File System

1"use client";
2 
3import * as React from "react";
4import { AlertCircle, FileQuestion, RefreshCw } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8import { FileViewerPreview } from "@/components/ui/file-viewer";
9import { Spinner } from "@/components/ui/spinner";
10 
11import {
12  FileSystemOpenPreview,
13  useFileSystemOpenPreview,
14} from "./file-system-open-preview-dialog";
15import {
16  FileSystemBrowser,
17  FileSystemHeader,
18  FileSystemSelection,
19  useFileSystemBrowser,
20  useFileSystemHeader,
21  useFileSystemSelectedItem,
22  useFileSystemSelectedSource,
23  useFileSystemSelection,
24  type FileSystemSelectionRenderState,
25} from "./file-system-parts";
26import {
27  FILE_SYSTEM_COLUMNS_SIDEBAR_WIDTH,
28  FILE_SYSTEM_SIDEBAR_WIDTH,
29} from "./file-system-columns-view";
30import { FileSystemProvider, useFileSystem } from "./file-system-provider";
31import { FileSystemThumbnail } from "./file-system-thumbnail";
32import type {
33  FileSystemEntry,
34  FileSystemFileItem,
35  FileSystemProps,
36} from "./file-system-types";
37import {
38  ViewerBody,
39  ViewerHeader,
40  ViewerRoot,
41  ViewerSidebar,
42  ViewerSurface,
43} from "./viewer";
44 
45export {
46  FileSystemOpenPreview,
47  FileSystemProvider,
48  FileSystemBrowser,
49  FileSystemHeader,
50  FileSystemSelection,
51  useFileSystem,
52  useFileSystemBrowser,
53  useFileSystemHeader,
54  useFileSystemOpenPreview,
55  useFileSystemSelectedItem,
56  useFileSystemSelectedSource,
57  useFileSystemSelection,
58};
59 
60export type {
61  FileSystemFileItem,
62  FileSystemFolderItem,
63  FileSystemItem,
64  FileSystemLoadChildrenArgs,
65  FileSystemLoadChildrenResult,
66  FileSystemProps,
67  FileSystemQueryState,
68  FileSystemResolveSourceArgs,
69  FileSystemView,
70} from "./file-system-types";
71export type { FileSystemProviderProps } from "./file-system-provider";
72export type {
73  FileSystemBrowserPartState,
74  FileSystemHeaderState,
75  FileSystemSelectionRenderState,
76  FileSystemSelectionState,
77} from "./file-system-parts";
78 
79export function FileSystem({ className, ...providerProps }: FileSystemProps) {
80  return (
81    <FileSystemProvider {...providerProps}>
82      <FileSystemRoot className={className} />
83    </FileSystemProvider>
84  );
85}
86 
87function FileSystemRoot({ className }: { className?: string }) {
88  const { browser } = useFileSystem();
89  const sidebarWidth =
90    browser.view === "columns"
91      ? FILE_SYSTEM_COLUMNS_SIDEBAR_WIDTH
92      : FILE_SYSTEM_SIDEBAR_WIDTH;
93 
94  return (
95    <div data-slot="file-system">
96      <ViewerRoot
97// … truncated