homeio

1"use client";
2
3import { useCurrentUser } from "@/hooks/useCurrentUser";
4import { useEffect, useMemo, useReducer, useRef, type MouseEvent } from "react";
5import {
6  getEditorLanguage,
7  normalizePathForBackend,
8  type FileEntry,
9} from "@/modules/files/components/file-manager-presenters";
10import {
11  toFilePath,
12  useCreateFile,
13  useCreateFolder,
14  useFileContent,
15  useFileEntryInfo,
16  useFilesDirectory,
17  useFilesRoot,
18  usePasteFileEntry,
19  useRenameFileEntry,
20  useSaveFileContent,
21  useSearchFiles,
22  useStarredFiles,
23  useToggleFileStar,
24  useUnzipFile,
25  useUploadFiles,
26} from "@/modules/files/hooks/useFiles";
27import {
28  useCreateLocalFolderShare,
29  useDeleteLocalFolderShare,
30  useLocalFolderShares,
31} from "@/modules/files/hooks/useLocalFolderShares";
32import { useNetworkShares } from "@/modules/files/hooks/useNetworkShares";
33import { useUsbDrives } from "@/modules/files/hooks/useUsbDrives";
34import { useGoogleDriveConnections } from "@/modules/files/hooks/useGoogleDrive";
35import { Cloud } from "@/components/icons/platform-icons";
36import { OsIcon } from "@/components/icons/OsIcon";
37import { FILE_SIDEBAR_ICONS } from "@/components/icons/icon-assets";
38import {
39  useDeleteFromTrash,
40  useEmptyTrash,
41  useMoveToTrash,
42  useRestoreFromTrash,
43} from "@/modules/files/hooks/useTrashActions";
44import { useSystemMetrics } from "@/modules/system/hooks/useSystemMetrics";
45import { useFileManagerActions } from "@/modules/files/components/manager/file-manager-actions";
46import {
47  getBrowserCounts,
48  getClipboardDisplayName,
49  getCurrentEntries,
50  getCurrentPathForDisplay,
51  getDriveItems,
52  getLocalSharesByPath,
53  getLocationItems,
54  getOpenFileDetails,
55  getRemovableItems,
56  getStorageSummary,
57  getViewFlags,
58  sidebarSections,
59  sortEntries,
60} from "@/modules/files/components/manager/file-manager-derived";
61import { useFileManagerKeyboard } from "@/modules/files/components/manager/file-manager-keyboard";
62import {
63  fileManagerReducer,
64  initialState,
65} from "@/modules/files/components/manager/file-manager-state";
66import { FileManagerView } from "@/modules/files/components/manager/file-manager-view";
67
68export function FileManager() {
69  const rootRef = useRef<HTMLDivElement>(null);
70  const statusNoticeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
71  const uploadInputRef = useRef<HTMLInputElement>(null);
72  const uploadAbortControllerRef = useRef<AbortController | null>(null);
73  const [state, dispatch] = useReducer(fileManagerReducer, initialState);
74  const currentUserQuery = useCurrentUser();
75
76  const filesRootQuery = useFilesRoot();
77  const viewFlags = getViewFlags(state.currentPath);
78  const directoryQuery = useFilesDirectory(viewFlags.isStarredView ? [] : state.currentPath, state.includeHidden, {
79    enabled: !viewFlags.isStarredView,
80  });
81  const starredFilesQuery = useStarredFiles();
82  const systemMetricsQuery = useSystemMetrics();
83  const networkSharesQuery = useNetworkShares();
84  const localSharesQuery = useLocalFolderShares();
85  const usbDrivesQuery = useUsbDrives();
86  const googleDriveConnectionsQuery = useGoogleDriveConnections();
87  const createFolderMutation = useCreateFolder();
88  const createFileMutation = useCreateFile();
89  const pasteFileEntryMutation = usePasteFileEntry();
90  const createLocalShareMutation = useCreateLocalFolderShare();
91  const deleteLocalShareMutation = useDeleteLocalFolderShare();
92  const saveFileContentMutation = useSaveFileContent();
93  const moveToTrashMutation = useMoveToTrash();
94  const restoreFromTrashMutation = useRestoreFromTrash();
95  const deleteFromTrashMutation = useDeleteFromTrash();
96  const emptyTrashMutation = useEmptyTrash();
97  const renameFileEntryMutation = useRenameFileEntry();
98  const getFileInfoMutation = useFileEntryInfo();
99  const toggleStarMutation = useToggleFileStar();
100  const uploadFilesMutation = useUploadFiles();
101  const unzipFileMutation = useUnzipFile();
102
103  const openFilePath = state.openFile ? toFilePath(state.openFile.path) : null;
104  const fileContentQuery = useFileContent(openFilePath);
105  const globalSearchQuery = useSearchFiles({
106    query: state.debouncedSearchQuery,
107    basePath: undefined,
108    includeHidden: state.includeHidden,
109    enabled: state.globalSearch && state.debouncedSearchQuery.trim().length >= 2,
110  });
111  const isGlobalSearchActive = state.globalSearch && state.debouncedSearchQuery.trim().length >= 2;
112
113  useEffect(() => {
114    const timeoutId = setTimeout(() => {
115      dispatch({ type: "SET_DEBOUNCED_SEARCH_QUERY", query: state.searchQuery });
116    }, 300);
117    return () => clearTimeout(timeoutId);
118  }, [state.searchQuery]);
119
120  const currentEntries = useMemo(
121    () =>
122      getCurrentEntries({
123        directoryEntries: directoryQuery.data?.entries,
124        globalEntries: globalSearchQuery.data?.entries,
125        isGlobalSearchActive,
126        isStarredView: viewFlags.isStarredView,
127        starredEntries: starredFilesQuery.data?.entries,
128      }),
129    [
130      directoryQuery.data?.entries,
131      globalSearchQuery.data?.entries,
132      isGlobalSearchActive,
133      starredFilesQuery.data?.entries,
134      viewFlags.isStarredView,
135    ],
136  );
137  const sortedEntries = useMemo(
138    () =>
139      sortEntries({
140        currentEntries,
141        isGlobalSearchActive,
142        searchQuery: state.searchQuery,
143        sortBy: state.sortBy,
144        sortDir: state.sortDir,
145      }),
146    [currentEntries, isGlobalSearchActive, state.searchQuery, state.sortBy, state.sortDir],
147  );
148  const visibleEntries = isGlobalSearchActive
149    ? sortedEntries.slice(0, state.searchDisplayLimit)
150    : sortedEntries;
151  const hasMoreSearchResults = isGlobalSearchActive && sortedEntries.length > state.searchDisplayLimit;
152
153  const openFileLanguage = state.openFile ? getEditorLanguage(state.openFile.entry) : "plaintext";
154  const openFileViewer =
155    openFilePath && fileContentQuery.data?.path === openFilePath ? fileContentQuery.data : null;
156  const openFileState = getOpenFileDetails({
157    fileDrafts: state.fileDrafts,
158    filePath: openFilePath,
159    language: openFileLanguage,
160    viewer: openFileViewer,
161  });
162  const canSaveOpenFile = Boolean(
163    openFilePath &&
164      openFileViewer?.mode === "text" &&
165      !fileContentQuery.isLoading &&
166      !saveFileContentMutation.isPending &&
167      openFileState.hasUnsavedChanges,
168  );
169
170  const storageSummary = getStorageSummary(systemMetricsQuery.data?.storage);
171  const currentPathForDisplay = getCurrentPathForDisplay(state.currentPath);
172  const filesRootPath = filesRootQuery.data?.rootPath ?? "";
173  const rootLabel = filesRootPath || "/DATA";
174  const isDemoMode = currentUserQuery.data?.isDemoMode ?? false;
175  const localSharesByPath = useMemo(() => getLocalSharesByPath(localSharesQuery.data), [localSharesQuery.data]);
176  const locationItems = useMemo(
177    () => (isDemoMode ? [] : getLocationItems(networkSharesQuery.data)),
178    [isDemoMode, networkSharesQuery.data],
179  );
180  const removableItems = useMemo(
181    () => (isDemoMode ? [] : getRemovableItems(usbDrivesQuery.drives)),
182    [isDemoMode, usbDrivesQuery.drives],
183  );
184  const driveItems = useMemo(
185    () =>
186      isDemoMode
187        ? []
188        : getDriveItems(googleDriveConnectionsQuery.data?.connections).map((item) => ({
189            ...item,
190            icon: (
191              <OsIcon
192                src={FILE_SIDEBAR_ICONS.googleDrive}
193                className="size-4 object-contain"
194                fallback={<Cloud className="size-4 text-sky-400" />}
195              />
196            ),
197            accountEmail: item.email,
198          })),
199    [isDemoMode, googleDriveConnectionsQuery.data],
200  );
201  const activeDriveConnection = useMemo(() => {
202    if (!viewFlags.isDriveView) return null;
203    const connectionId = state.currentPath[1];
204    const conn = googleDriveConnectionsQuery.data?.connections.find((c) => c.id === connectionId);
205    return conn ? { id: conn.id, email: conn.email } : null;
206  }, [viewFlags.isDriveView, state.currentPath, googleDriveConnectionsQuery.data]);
207  const counts = useMemo(() => getBrowserCounts(sortedEntries), [sortedEntries]);
208  const clipboardDisplayName = getClipboardDisplayName(state.clipboardState);
209  const contextShare =
210    state.showContextMenu?.entry.type === "folder"
211      ? localSharesByPath.get(state.showContextMenu.entry.path)
212      : undefined;
213  const trashItemCount = viewFlags.isTrashView
214    ? (directoryQuery.data?.entries.length ?? currentEntries.length)
215    : 0;
216
217  function setStatusNotice(message: string | null) {
218    if (statusNoticeTimerRef.current) clearTimeout(statusNoticeTimerRef.current);
219    dispatch({ type: "SET_STATUS_NOTICE", notice: message });
220    if (message !== null) {
221      statusNoticeTimerRef.current = setTimeout(() => {
222        dispatch({ type: "SET_STATUS_NOTICE", notice: null });
223      }, 4000);
224    }
225  }
226
227  const actions = useFileManagerActions({
228    clipboardState: state.clipboardState,
229    createEntryDialog: state.createEntryDialog,
230    createFileMutation,
231    createFolderMutation,
232    createLocalShareMutation,
233    currentPath: state.currentPath,
234    deleteFromTrashMutation,
235    deleteLocalShareMutation,
236    dispatch,
237    emptyTrashMutation,
238    fileDrafts: state.fileDrafts,
239    filesRootPath,
240    getFileInfoMutation,
241    includeHidden: state.includeHidden,
242    isEmptyingTrash: state.isEmptyingTrash,
243    isStarredView: viewFlags.isStarredView,
244    isTrashView: viewFlags.isTrashView,
245    moveToTrashMutation,
246    openFile: state.openFile,
247    openFileKey: openFilePath,
248    openFileViewer,
249    pasteConflict: state.pasteConflict,
250    pasteFileEntryMutation,
251    renameDialog: state.renameDialog,
252    renameFileEntryMutation,
253    restoreFromTrashMutation,
254    saveFileContentMutation,
255    selectedFiles: state.selectedFiles,
256    setStatusNotice,
257    sortedEntries,
258    systemHostname: systemMetricsQuery.data?.hostname ?? "",
259    systemNetworkAddress: systemMetricsQuery.data?.wifi?.ipv4 ?? "",
260    toggleStarMutation,
261    uploadAbortControllerRef,
262    uploadFilesMutation,
263    unzipFileMutation,
264  });
265
266  useEffect(() => {
267    if (!openFilePath || !openFileViewer || openFileViewer.mode !== "text") return;
268    dispatch({ type: "INIT_FILE_DRAFT", key: openFilePath, value: openFileViewer.content ?? "" });
269  }, [openFilePath, openFileViewer]);
270
271  useEffect(() => {
272    dispatch({ type: "SET_EDITOR_NOTICE", notice: null });
273  }, [openFilePath]);
274
275  function navigateTo(entry: FileEntry) {
276    if (entry.type === "folder") {
277      dispatch({ type: "NAVIGATE_TO_PATH", path: entry.path.split("/").filter(Boolean) });
278      return;
279    }
280    dispatch({ type: "OPEN_FILE", path: entry.path.split("/").filter(Boolean), entry });
281  }
282
283  function navigateToPath(pathSegments: string[]) {
284    dispatch({ type: "NAVIGATE_TO_PATH", path: normalizePathForBackend(pathSegments) });
285  }
286
287  function handleEntryClick(event: MouseEvent, entry: FileEntry) {
288    if (event.ctrlKey || event.metaKey) {
289      const next = new Set(state.selectedFiles);
290      if (next.has(entry.name)) next.delete(entry.name);
291      else next.add(entry.name);
292      dispatch({ type: "SET_SELECTED_FILES", files: next });
293      dispatch({ type: "SELECT_FILE", name: entry.name });
294      return;
295    }
296    if (event.shiftKey && state.selectedFile) {
297      const anchor = sortedEntries.findIndex((candidate) => candidate.name === state.selectedFile);
298      const clicked = sortedEntries.findIndex((candidate) => candidate.name === entry.name);
299      if (anchor !== -1 && clicked !== -1) {
300        const [from, to] = anchor <= clicked ? [anchor, clicked] : [clicked, anchor];
301        dispatch({
302          type: "SET_SELECTED_FILES",
303          files: new Set(sortedEntries.slice(from, to + 1).map((candidate) => candidate.name)),
304        });
305      }
306      dispatch({ type: "SELECT_FILE", name: entry.name });
307      return;
308    }
309    dispatch({ type: "SET_SELECTED_FILES", files: new Set([entry.name]) });
310    dispatch({ type: "SELECT_FILE", name: entry.name });
311  }
312
313  useFileManagerKeyboard({
314    clipboardState: state.clipboardState,
315    createEntryDialogOpen: Boolean(state.createEntryDialog),
316    currentPath: state.currentPath,
317    dispatch,
318    fileInfoDialogOpen: Boolean(state.fileInfoDialog),
319    isStarredView: viewFlags.isStarredView,
320    isTrashView: viewFlags.isTrashView,
321    onCopyEntries: actions.setClipboardFromEntries,
322    onDeleteFromTrash: actions.handleDeleteFromTrash,
323    onMoveToTrash: actions.handleMoveSelectedToTrash,
324    onNavigateTo: navigateTo,
325    onNavigateUp: () => dispatch({ type: "NAVIGATE_UP" }),
326    onPaste: actions.handlePasteToDestination,
327    onRenameEntry: actions.handleRenameEntry,
328    openFileOpen: Boolean(state.openFile),
329    pasteConflict: state.pasteConflict,
330    renameDialogOpen: Boolean(state.renameDialog),
331    searchQuery: state.searchQuery,
332    selectedFile: state.selectedFile,
333    selectedFiles: state.selectedFiles,
334    showContextMenuOpen: Boolean(state.showContextMenu),
335    showEmptyTrashConfirmOpen: state.showEmptyTrashConfirm,
336    sortedEntries,
337  });
338
339  function positionMenu(event: MouseEvent, dimensions: { width: number; height: number }) {
340    const rootRect = rootRef.current?.getBoundingClientRect();
341    if (!rootRect) return null;
342    return {
343      x: Math.min(Math.max(8, event.clientX - rootRect.left), rootRect.width - dimensions.width - 8),
344      y: Math.min(Math.max(8, event.clientY - rootRect.top), rootRect.height - dimensions.height - 8),
345    };
346  }
347
348  return (
349    <FileManagerView
350      rootRef={rootRef}
351      actions={actions}
352      canSaveOpenFile={canSaveOpenFile}
353      clipboardDisplayName={clipboardDisplayName}
354      clipboardState={state.clipboardState}
355      contextShare={contextShare}
356      counts={counts}
357      createDialog={state.createEntryDialog}
358      createFilePending={createFileMutation.isPending}
359      createFolderPending={createFolderMutation.isPending}
360      currentEntriesCount={currentEntries.length}
361      currentPath={state.currentPath}
362      currentPathForDisplay={currentPathForDisplay}
363      directoryErrorMessage={directoryQuery.error instanceof Error ? directoryQuery.error.message : "Failed to load files"}
364      directoryIsError={directoryQuery.isError}
365      directoryIsLoading={directoryQuery.isLoading}
366      dispatch={dispatch}
367      editorNotice={state.editorNotice}
368      emptyTrashPending={emptyTrashMutation.isPending}
369      fileContentErrorMessage={fileContentQuery.error instanceof Error ? fileContentQuery.error.message : "Failed to open file"}
370      fileContentIsError={fileContentQuery.isError}
371      fileContentIsLoading={fileContentQuery.isLoading}
372      fileInfoDialog={state.fileInfoDialog}
373      globalSearch={state.globalSearch}
374      globalSearchIsFetching={globalSearchQuery.isFetching}
375      hasMoreSearchResults={hasMoreSearchResults}
376      includeHidden={state.includeHidden}
377      isDragOver={state.isDragOver}
378      isEmptyingTrash={state.isEmptyingTrash}
379      isGlobalSearchActive={isGlobalSearchActive}
380      isSharedView={viewFlags.isSharedView}
381      isStarredView={viewFlags.isStarredView}
382      isTrashView={viewFlags.isTrashView}
383      locationItems={locationItems}
384      cloudItems={driveItems}
385      activeDriveConnection={activeDriveConnection}
386      removableItems={removableItems}
387      onMountDrive={usbDrivesQuery.mount}
388      onEjectDrive={usbDrivesQuery.eject}
389      onCancelUpload={() => uploadAbortControllerRef.current?.abort()}
390      navigateTo={navigateTo}
391      navigateToPath={navigateToPath}
392      onEntryClick={handleEntryClick}
393      onPositionBackgroundContextMenu={(event) => {
394        if (viewFlags.isTrashView || viewFlags.isStarredView) return;
395        event.preventDefault();
396        const next = positionMenu(event, { width: 176, height: 112 });
397        if (!next) return;
398        dispatch({ type: "SHOW_BACKGROUND_CONTEXT_MENU", ...next });
399      }}
400      onPositionEntryContextMenu={(event, entry) => {
401        event.preventDefault();
402        event.stopPropagation();
403        const next = positionMenu(event, { width: 220, height: 260 });
404        if (!next) return;
405        dispatch({ type: "SHOW_CONTEXT_MENU", entry, ...next });
406        dispatch({ type: "SELECT_FILE", name: entry.name });
407      }}
408      openFile={state.openFile}
409      hasUnsavedChanges={openFileState.hasUnsavedChanges}
410      openFileBadgeLabel={openFileState.badgeLabel}
411      openFileContent={openFileState.content}
412      openFileKey={openFilePath}
413      openFileLanguage={openFileLanguage}
414      openFileViewer={openFileViewer}
415      pasteConflict={state.pasteConflict}
416      pastePending={pasteFileEntryMutation.isPending}
417      pendingEntryPath={state.pendingEntryPath}
418      renameDialog={state.renameDialog}
419      renamePending={renameFileEntryMutation.isPending}
420      rootLabel={rootLabel}
421      searchQuery={state.searchQuery}
422      selectedFiles={state.selectedFiles}
423      showBackgroundContextMenu={state.showBackgroundContextMenu}
424      showContextMenu={state.showContextMenu}
425      showEmptyTrashConfirm={state.showEmptyTrashConfirm}
426      showNetworkDialog={state.showNetworkDialog && !isDemoMode}
427      showGoogleDriveDialog={state.showGoogleDriveDialog && !isDemoMode}
428      showUsbDialog={state.showUsbDialog && !isDemoMode}
429      sidebarSections={sidebarSections}
430      sortedEntries={visibleEntries}
431      storageUsagePercent={storageSummary.percent}
432      storageUsageText={storageSummary.text}
433      sortBy={state.sortBy}
434      sortDir={state.sortDir}
435      statusNotice={state.statusNotice}
436      totalEntriesCount={sortedEntries.length}
437      trashItemCount={trashItemCount}
438      uploadInputRef={uploadInputRef}
439      uploadPending={uploadFilesMutation.isPending}
440      uploadProgress={state.uploadProgress}
441      unzipPending={unzipFileMutation.isPending}
442      viewMode={state.viewMode}
443    />
444  );
445}
446