homeio

1"use client";
2
3import { FileManagerSidebar, FileManagerStatusBar, FileManagerToolbar, type FileManagerSidebarItem, type FileManagerSidebarSection, type RemovableSidebarItem, type CloudSidebarItem } from "@/modules/files/components/file-manager-chrome";
4import { FileManagerFileArea } from "@/modules/files/components/content/file-manager-content";
5import { FILES_PANEL_SHELL } from "@/modules/files/components/file-manager-surface";
6import { FileManagerDialogLayer } from "@/modules/files/components/manager/file-manager-dialog-layer";
7import { validateEntryName } from "@/modules/files/components/manager/file-manager-derived";
8import { GoogleDrivePanel } from "@/modules/files/components/panels/google-drive-panel";
9import { buildAssetUrl, toFilePath } from "@/modules/files/hooks/useFiles";
10import type { MouseEvent, RefObject, SetStateAction } from "react";
11import type { FileEntry } from "@/modules/files/components/file-manager-presenters";
12import type { FileInfoResponse, FileReadResponse } from "@/lib/shared/contracts/files";
13import type { ClipboardState, CreateEntryDialogState, FileManagerAction, OpenFileState, PasteConflictState, RenameDialogState, ViewMode } from "@/modules/files/components/manager/file-manager-state";
14
15type FileManagerViewProps = {
16  rootRef: RefObject<HTMLDivElement | null>;
17  actions: {
18    confirmEmptyTrash: () => Promise<void>;
19    handleConflictResolution: (choice: "replace" | "keep-both" | "skip" | "skip-all") => Promise<void>;
20    handleCopyEntryPath: (entry: FileEntry) => Promise<void>;
21    handleDeleteFromTrash: (entry: FileEntry) => Promise<void>;
22    handleDownloadEntry: (entry: FileEntry) => void;
23    handleUnzipEntry: (entry: FileEntry) => Promise<void>;
24    handleEmptyTrash: () => void;
25    handleGetInfo: (entry: FileEntry) => Promise<void>;
26    handleMoveSelectedToTrash: (entry: FileEntry) => Promise<void>;
27    handlePasteToDestination: (destinationPath: string) => Promise<void>;
28    handleRenameEntry: (entry: FileEntry) => void;
29    handleRestoreFromTrash: (entry: FileEntry) => Promise<void>;
30    handleSaveOpenFile: () => Promise<void>;
31    handleShareFolder: (entry: FileEntry) => Promise<void>;
32    handleToggleStar: (entry: FileEntry) => Promise<void>;
33    handleTrashSelected: () => Promise<void>;
34    handleUnshareFolder: (shareId: string) => Promise<void>;
35    handleUploadFiles: (files: File[]) => Promise<void>;
36    setClipboardFromEntries: (entries: FileEntry[], operation: "copy" | "move") => void;
37    submitCreateEntryDialog: () => Promise<void>;
38    submitRenameDialog: () => Promise<void>;
39  };
40  canSaveOpenFile: boolean;
41  clipboardDisplayName: string | null;
42  clipboardState: ClipboardState | null;
43  contextShare: { id: string } | undefined;
44  counts: { fileCount: number; folderCount: number };
45  createDialog: CreateEntryDialogState | null;
46  createFilePending: boolean;
47  createFolderPending: boolean;
48  currentEntriesCount: number;
49  currentPath: string[];
50  currentPathForDisplay: string[];
51  directoryErrorMessage: string;
52  directoryIsError: boolean;
53  directoryIsLoading: boolean;
54  dispatch: (action: FileManagerAction) => void;
55  editorNotice: string | null;
56  emptyTrashPending: boolean;
57  fileContentErrorMessage: string;
58  fileContentIsError: boolean;
59  fileContentIsLoading: boolean;
60  fileInfoDialog: FileInfoResponse | null;
61  globalSearch: boolean;
62  globalSearchIsFetching: boolean;
63  hasMoreSearchResults: boolean;
64  includeHidden: boolean;
65  isDragOver: boolean;
66  isEmptyingTrash: boolean;
67  isGlobalSearchActive: boolean;
68  isSharedView: boolean;
69  isStarredView: boolean;
70  isTrashView: boolean;
71  locationItems: FileManagerSidebarItem[];
72  cloudItems: CloudSidebarItem[];
73  activeDriveConnection: { id: string; email: string } | null;
74  removableItems: RemovableSidebarItem[];
75  onMountDrive: (driveId: string) => void;
76  onEjectDrive: (driveId: string) => void;
77  onCancelUpload: () => void;
78  navigateTo: (entry: FileEntry) => void;
79  navigateToPath: (pathSegments: string[]) => void;
80  onEntryClick: (event: MouseEvent, entry: FileEntry) => void;
81  onPositionBackgroundContextMenu: (event: MouseEvent) => void;
82  onPositionEntryContextMenu: (event: MouseEvent, entry: FileEntry) => void;
83  hasUnsavedChanges: boolean;
84  openFile: OpenFileState | null;
85  openFileBadgeLabel: string;
86  openFileContent: string;
87  openFileKey: string | null;
88  openFileLanguage: string;
89  openFileViewer: FileReadResponse | null;
90  pasteConflict: PasteConflictState | null;
91  pastePending: boolean;
92  pendingEntryPath: string | null;
93  renameDialog: RenameDialogState | null;
94  renamePending: boolean;
95  rootLabel: string;
96  searchQuery: string;
97  selectedFiles: Set<string>;
98  showBackgroundContextMenu: { x: number; y: number } | null;
99  showContextMenu: { x: number; y: number; entry: FileEntry } | null;
100  showEmptyTrashConfirm: boolean;
101  showNetworkDialog: boolean;
102  showGoogleDriveDialog: boolean;
103  showUsbDialog: boolean;
104  sidebarSections: FileManagerSidebarSection[];
105  sortedEntries: FileEntry[];
106  storageUsagePercent: number;
107  storageUsageText: string;
108  sortBy: "name" | "modified" | "size";
109  sortDir: "asc" | "desc";
110  statusNotice: string | null;
111  totalEntriesCount: number;
112  trashItemCount: number;
113  uploadInputRef: RefObject<HTMLInputElement | null>;
114  uploadPending: boolean;
115  uploadProgress: { loaded: number; total: number } | null;
116  unzipPending: boolean;
117  viewMode: ViewMode;
118};
119
120export function FileManagerView({
121  rootRef,
122  actions,
123  canSaveOpenFile,
124  clipboardDisplayName,
125  clipboardState,
126  contextShare,
127  counts,
128  createDialog,
129  createFilePending,
130  createFolderPending,
131  currentEntriesCount,
132  currentPath,
133  currentPathForDisplay,
134  directoryErrorMessage,
135  directoryIsError,
136  directoryIsLoading,
137  dispatch,
138  editorNotice,
139  emptyTrashPending,
140  fileContentErrorMessage,
141  fileContentIsError,
142  fileContentIsLoading,
143  fileInfoDialog,
144  globalSearch,
145  globalSearchIsFetching,
146  hasMoreSearchResults,
147  hasUnsavedChanges,
148  includeHidden,
149  isDragOver,
150  isEmptyingTrash,
151  isGlobalSearchActive,
152  isSharedView,
153  isStarredView,
154  isTrashView,
155  locationItems,
156  cloudItems,
157  activeDriveConnection,
158  removableItems,
159  onMountDrive,
160  onEjectDrive,
161  onCancelUpload,
162  navigateTo,
163  navigateToPath,
164  onEntryClick,
165  onPositionBackgroundContextMenu,
166  onPositionEntryContextMenu,
167  openFile,
168  openFileBadgeLabel,
169  openFileContent,
170  openFileKey,
171  openFileLanguage,
172  openFileViewer,
173  pasteConflict,
174  pastePending,
175  pendingEntryPath,
176  renameDialog,
177  renamePending,
178  rootLabel,
179  searchQuery,
180  selectedFiles,
181  showBackgroundContextMenu,
182  showContextMenu,
183  showEmptyTrashConfirm,
184  showNetworkDialog,
185  showGoogleDriveDialog,
186  showUsbDialog,
187  sidebarSections,
188  sortedEntries,
189  storageUsagePercent,
190  storageUsageText,
191  sortBy,
192  sortDir,
193  statusNotice,
194  totalEntriesCount,
195  trashItemCount,
196  uploadInputRef,
197  uploadPending,
198  uploadProgress,
199  unzipPending,
200  viewMode,
201}: FileManagerViewProps) {
202  return (
203    <div
204      ref={rootRef}
205      className="relative flex h-full"
206      onClick={() => {
207        dispatch({ type: "HIDE_CONTEXT_MENU" });
208        dispatch({ type: "HIDE_BACKGROUND_CONTEXT_MENU" });
209      }}
210    >
211      <FileManagerSidebar
212        currentPath={currentPath}
213        isSharedView={isSharedView}
214        isTrashView={isTrashView}
215        locationItems={locationItems}
216        cloudItems={cloudItems}
217        removableItems={removableItems}
218        sidebarSections={sidebarSections}
219        storageUsagePercent={storageUsagePercent}
220        storageUsageText={storageUsageText}
221        onNavigateToPath={navigateToPath}
222        onOpenNetworkDialog={() => dispatch({ type: "SHOW_NETWORK_DIALOG" })}
223        onOpenGoogleDriveDialog={() => dispatch({ type: "SHOW_GOOGLE_DRIVE_DIALOG" })}
224        onOpenUsbDialog={() => dispatch({ type: "SHOW_USB_DIALOG" })}
225        onMountDrive={onMountDrive}
226        onEjectDrive={onEjectDrive}
227      />
228      {activeDriveConnection ? (
229        <div className={`m-2 min-w-0 flex-1 overflow-hidden ${FILES_PANEL_SHELL}`}>
230          <GoogleDrivePanel
231            connectionId={activeDriveConnection.id}
232            accountEmail={activeDriveConnection.email}
233          />
234        </div>
235      ) : (
236      <div className={`m-2 flex min-w-0 flex-1 flex-col ${FILES_PANEL_SHELL}`}>
237        <FileManagerToolbar
238          canNavigateUp={currentPath.length > 0}
239          currentEntriesCount={currentEntriesCount}
240          currentPath={currentPath}
241          currentPathForDisplay={currentPathForDisplay}
242          emptyTrashPending={emptyTrashPending}
243          globalSearch={globalSearch}
244          globalSearchIsFetching={globalSearchIsFetching}
245          includeHidden={includeHidden}
246          isEmptyingTrash={isEmptyingTrash}
247          isStarredView={isStarredView}
248          isTrashView={isTrashView}
249          rootLabel={rootLabel}
250          searchQuery={searchQuery}
251          sortBy={sortBy}
252          sortDir={sortDir}
253          uploadFilesPending={uploadPending}
254          uploadInputRef={uploadInputRef}
255          viewMode={viewMode}
256          onCycleSortBy={() => dispatch({ type: "SET_SORT_BY", by: sortBy === "name" ? "modified" : sortBy === "modified" ? "size" : "name" })}
257          onEmptyTrash={actions.handleEmptyTrash}
258          onNavigateToPath={navigateToPath}
259          onNavigateUp={() => dispatch({ type: "NAVIGATE_UP" })}
260          onSearchQueryChange={(query) => dispatch({ type: "SET_SEARCH_QUERY", query })}
261          onSetViewMode={(mode) => dispatch({ type: "SET_VIEW_MODE", mode })}
262          onToggleGlobalSearch={() => dispatch({ type: "TOGGLE_GLOBAL_SEARCH" })}
263          onToggleIncludeHidden={() => dispatch({ type: "TOGGLE_INCLUDE_HIDDEN" })}
264          onToggleSortDir={() => dispatch({ type: "TOGGLE_SORT_DIR" })}
265          onUploadInputChange={(files) => {
266            void actions.handleUploadFiles(files);
267          }}
268        />
269        <FileManagerFileArea
270          canSaveOpenFile={canSaveOpenFile}
271          directoryErrorMessage={directoryErrorMessage}
272          directoryIsError={directoryIsError}
273          directoryIsLoading={directoryIsLoading}
274          editorNotice={editorNotice}
275          fileContentErrorMessage={fileContentErrorMessage}
276          fileContentIsError={fileContentIsError}
277          fileContentIsLoading={fileContentIsLoading}
278          globalSearchIsFetching={globalSearchIsFetching}
279          hasMoreSearchResults={hasMoreSearchResults}
280          hasUnsavedChanges={hasUnsavedChanges}
281          isDragOver={isDragOver}
282          isGlobalSearchActive={isGlobalSearchActive}
283          isStarredView={isStarredView}
284          isTrashView={isTrashView}
285          openFile={openFile}
286          openFileAssetUrl={openFileKey ? buildAssetUrl(openFileKey) : ""}
287          openFileBadgeLabel={openFileBadgeLabel}
288          openFileContent={openFileContent}
289          openFileKey={openFileKey}
290          openFileLanguage={openFileLanguage}
291          openFileViewer={openFileViewer}
292          showSaveOpenFile={openFileViewer?.mode === "text"}
293          pendingEntryPath={pendingEntryPath}
294          searchQuery={searchQuery}
295          selectedFiles={selectedFiles}
296          sortedEntries={sortedEntries}
297          totalEntriesCount={totalEntriesCount}
298          viewMode={viewMode}
299          onBackgroundContextMenu={onPositionBackgroundContextMenu}
300          onChangeOpenFileDraft={(value: SetStateAction<string>) => {
301            if (!openFileKey) return;
302            dispatch({
303              type: "SET_FILE_DRAFT",
304              key: openFileKey,
305              value: typeof value === "function" ? value(openFileContent) : value,
306            });
307          }}
308          onCloseOpenFile={() => dispatch({ type: "CLOSE_FILE" })}
309          onDragLeave={(event) => {
310            if (!event.currentTarget.contains(event.relatedTarget as Node)) {
311              dispatch({ type: "SET_DRAG_OVER", value: false });
312            }
313          }}
314          onDragOver={(event) => {
315            if (isTrashView || isStarredView) return;
316            event.preventDefault();
317            event.dataTransfer.dropEffect = "copy";
318            dispatch({ type: "SET_DRAG_OVER", value: true });
319          }}
320          onDrop={(event) => {
321            event.preventDefault();
322            dispatch({ type: "SET_DRAG_OVER", value: false });
323            if (isTrashView || isStarredView) return;
324            void actions.handleUploadFiles(Array.from(event.dataTransfer.files));
325          }}
326          onEntryClick={onEntryClick}
327          onEntryContextMenu={onPositionEntryContextMenu}
328          onLoadMoreSearch={() => dispatch({ type: "LOAD_MORE_SEARCH" })}
329          onOpenEntry={navigateTo}
330          onSaveOpenFile={() => {
331            void actions.handleSaveOpenFile();
332          }}
333        />
334        <FileManagerStatusBar
335          clipboardName={clipboardDisplayName}
336          clipboardOperation={clipboardState?.operation ?? null}
337          currentPathForDisplay={currentPathForDisplay}
338          fileCount={counts.fileCount}
339          folderCount={counts.folderCount}
340          isStarredView={isStarredView}
341          isTrashView={isTrashView}
342          rootLabel={rootLabel}
343          selectedFilesCount={selectedFiles.size}
344          statusNotice={statusNotice}
345          onTrashSelected={() => {
346            void actions.handleTrashSelected();
347          }}
348        />
349      </div>
350      )}
351      <FileManagerDialogLayer
352        clipboardState={clipboardState}
353        contextShare={contextShare}
354        createEntryDialog={createDialog}
355        createPending={createFilePending || createFolderPending}
356        fileInfoDialog={fileInfoDialog}
357        isTrashView={isTrashView}
358        pasteConflict={pasteConflict}
359        pastePending={pastePending}
360        renameDialog={renameDialog}
361        renamePending={renamePending}
362        showBackgroundContextMenu={showBackgroundContextMenu}
363        showContextMenu={showContextMenu}
364        showEmptyTrashConfirm={showEmptyTrashConfirm}
365        showNetworkDialog={showNetworkDialog}
366        showGoogleDriveDialog={showGoogleDriveDialog}
367        showUsbDialog={showUsbDialog}
368        trashItemCount={trashItemCount}
369        uploadPending={uploadPending}
370        uploadProgress={uploadProgress}
371        unzipPending={unzipPending}
372        onCancelEmptyTrash={() => dispatch({ type: "HIDE_EMPTY_TRASH_CONFIRM" })}
373        onCancelUpload={onCancelUpload}
374        onChangeCreateEntryDialog={(value) => dispatch({ type: "UPDATE_CREATE_ENTRY_DIALOG", name: value, error: validateEntryName(value) })}
375        onChangeRenameDialog={(value) => dispatch({ type: "UPDATE_RENAME_DIALOG", name: value, error: validateEntryName(value) })}
376        onCloseBackgroundContextMenu={() => dispatch({ type: "HIDE_BACKGROUND_CONTEXT_MENU" })}
377        onCloseContextMenu={() => dispatch({ type: "HIDE_CONTEXT_MENU" })}
378        onCloseCreateEntryDialog={() => dispatch({ type: "CLOSE_CREATE_ENTRY_DIALOG" })}
379        onCloseFileInfoDialog={() => dispatch({ type: "CLOSE_FILE_INFO_DIALOG" })}
380        onCloseNetworkDialog={() => dispatch({ type: "HIDE_NETWORK_DIALOG" })}
381        onCloseGoogleDriveDialog={() => dispatch({ type: "HIDE_GOOGLE_DRIVE_DIALOG" })}
382        onCloseUsbDialog={() => dispatch({ type: "HIDE_USB_DIALOG" })}
383        onCloseRenameDialog={() => dispatch({ type: "CLOSE_RENAME_DIALOG" })}
384        onConfirmEmptyTrash={() => {
385          void actions.confirmEmptyTrash();
386        }}
387        onConflictResolution={(choice) => {
388          void actions.handleConflictResolution(choice);
389        }}
390        onCopyContextEntry={() => showContextMenu && actions.setClipboardFromEntries([showContextMenu.entry], "copy")}
391        onCopyContextPath={() => showContextMenu && void actions.handleCopyEntryPath(showContextMenu.entry)}
392        onCutContextEntry={() => showContextMenu && actions.setClipboardFromEntries([showContextMenu.entry], "move")}
393        onDeleteContextEntry={() => showContextMenu && void actions.handleDeleteFromTrash(showContextMenu.entry)}
394        onDownloadContextEntry={() => showContextMenu && actions.handleDownloadEntry(showContextMenu.entry)}
395        onUnzipContextEntry={() => showContextMenu && void actions.handleUnzipEntry(showContextMenu.entry)}
396        onGetInfoContextEntry={() => showContextMenu && void actions.handleGetInfo(showContextMenu.entry)}
397        onMoveContextEntryToTrash={() => showContextMenu && void actions.handleMoveSelectedToTrash(showContextMenu.entry)}
398        onNavigateToNetwork={() => {
399          dispatch({ type: "NAVIGATE_TO_PATH", path: ["Network"] });
400          dispatch({ type: "HIDE_NETWORK_DIALOG" });
401        }}
402        onNavigateToUsb={(path) => {
403          dispatch({ type: "NAVIGATE_TO_PATH", path });
404        }}
405        onOpenContextEntry={() => showContextMenu && navigateTo(showContextMenu.entry)}
406        onOpenCreateEntryDialog={(kind) => dispatch({ type: "OPEN_CREATE_ENTRY_DIALOG", kind })}
407        onPasteIntoBackground={() => {
408          void actions.handlePasteToDestination(toFilePath(currentPath));
409        }}
410        onPasteIntoContextEntry={() => {
411          if (!showContextMenu) return;
412          void actions.handlePasteToDestination(
413            showContextMenu.entry.type === "folder" ? showContextMenu.entry.path : toFilePath(currentPath),
414          );
415        }}
416        onRenameContextEntry={() => showContextMenu && actions.handleRenameEntry(showContextMenu.entry)}
417        onRestoreContextEntry={() => showContextMenu && void actions.handleRestoreFromTrash(showContextMenu.entry)}
418        onSubmitCreateEntryDialog={() => {
419          void actions.submitCreateEntryDialog();
420        }}
421        onSubmitRenameDialog={() => {
422          void actions.submitRenameDialog();
423        }}
424        onToggleContextShare={() => {
425          if (!showContextMenu) return;
426          if (contextShare) {
427            void actions.handleUnshareFolder(contextShare.id);
428            return;
429          }
430          if (
431            showContextMenu.entry.path === "Shared" ||
432            showContextMenu.entry.path.startsWith("Shared/") ||
433            showContextMenu.entry.path === "Network" ||
434            showContextMenu.entry.path.startsWith("Network/")
435          ) {
436            return;
437          }
438          void actions.handleShareFolder(showContextMenu.entry);
439        }}
440        onToggleContextStar={() => showContextMenu && void actions.handleToggleStar(showContextMenu.entry)}
441      />
442    </div>
443  );
444}
445