Update preference management

src/App.tsx

@@ -6,6 +6,7 @@ import Home from '@/components/Home';
 import Browse from '@/components/Browse';
 import Help from '@/components/Help';
 import Jobs from '@/components/Jobs';
+import Preferences from '@/components/Preferences';
 
 function Profile() {
   return (
@@ -23,14 +24,6 @@ function Login() {
   );
 }
 
-function Preferences() {
-  return (
-    <div className="p-4">
-      <h2 className="text-foreground text-lg">Preferences Page</h2>
-    </div>
-  );
-}
-
 function getBasename() {
   const { pathname } = window.location;
   // Try to match /user/:username/lab

src/components/ui/FileBrowser/ContextMenu.tsx

@@ -2,15 +2,15 @@
 import ReactDOM from 'react-dom';
 import { Typography } from '@material-tailwind/react';
 
-import type { File } from '@/shared.types';
+import type { FileOrFolder } from '@/shared.types';
 import { useZoneBrowserContext } from '@/contexts/ZoneBrowserContext';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 
 type ContextMenuProps = {
   x: number;
   y: number;
   menuRef: React.RefObject<HTMLDivElement | null>;
-  selectedFiles: File[];
+  selectedFiles: FileOrFolder[];
   setShowPropertiesDrawer: React.Dispatch<React.SetStateAction<boolean>>;
   setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;
   setShowRenameDialog: React.Dispatch<React.SetStateAction<boolean>>;
@@ -29,7 +29,7 @@
   setShowDeleteDialog,
   setShowPermissionsDialog
 }: ContextMenuProps): React.ReactNode {
   const { currentNavigationZone, currentFileSharePath } =
     useZoneBrowserContext();
   const { handleFavoriteChange } = usePreferencesContext();
   return ReactDOM.createPortal(
@@ -52,44 +52,25 @@
         >
           View file properties
         </Typography>
-
         {/* Set/unset folders as favorites */}
-        {(selectedFiles.length === 1 && selectedFiles[0].is_dir) ||
-        (selectedFiles.length > 1 &&
-          selectedFiles.some(file => file.is_dir)) ? (
+        {selectedFiles.length === 1 && selectedFiles[0].is_dir ? (
           <Typography
             className="text-sm p-1 cursor-pointer text-secondary-light hover:bg-secondary-light/30 transition-colors whitespace-nowrap"
             onClick={() => {
-              if (currentNavigationZone && currentFileSharePath) {
-                if (selectedFiles.length === 1) {
-                  handleFavoriteChange(
-                    {
-                      fileSharePath: currentFileSharePath,
-                      name: selectedFiles[0].name,
-                      path: selectedFiles[0].path
-                    },
-                    'directory'
-                  );
-                } else if (selectedFiles.length > 1) {
-                  console.log('selected files:', selectedFiles);
-                  const directoriesToAdd = selectedFiles
-                    .filter(file => file.is_dir)
-                    .map(file => ({
-                      navigationZone: currentNavigationZone,
-                      fileSharePath: currentFileSharePath,
-                      name: file.name,
-                      path: file.path
-                    }));
-                  handleFavoriteChange(directoriesToAdd, 'directory');
-                  setShowContextMenu(false);
-                }
+              if (currentFileSharePath) {
+                handleFavoriteChange(
+                  {
+                    folderPath: selectedFiles[0].path,
+                    fsp: currentFileSharePath
+                  },
+                  'folder'
+                );
               }
             }}
           >
             Set/unset as favorite
           </Typography>
         ) : null}
-
         {/* Rename file or folder */}
         {selectedFiles.length === 1 ? (
           <Typography
@@ -102,7 +83,6 @@
             Rename
           </Typography>
         ) : null}
-
         {/* Change permissions on file(s) */}
         {selectedFiles.length === 1 && !selectedFiles[0].is_dir ? (
           <Typography
@@ -115,7 +95,6 @@
             Change permissions
           </Typography>
         ) : null}
-
         {/* Delete file(s) or folder(s) */}
         <Typography
           className="text-sm p-1 cursor-pointer text-secondary-light hover:bg-secondary-light/30 transition-colors whitespace-nowrap"

src/components/ui/FileBrowser/Dialogs/ChangePermissions.tsx

@@ -7,11 +7,12 @@ import {
   Typography
 } from '@material-tailwind/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+
 import usePermissionsDialog from '@/hooks/usePermissionsDialog';
-import type { File } from '@/shared.types';
+import type { FileOrFolder } from '@/shared.types';
 
 type ChangePermissionsProps = {
-  targetItem: File | null;
+  targetItem: FileOrFolder | null;
   showPermissionsDialog: boolean;
   setShowPermissionsDialog: React.Dispatch<React.SetStateAction<boolean>>;
 };

src/components/ui/FileBrowser/Dialogs/Delete.tsx

@@ -7,12 +7,13 @@ import {
   Typography
 } from '@material-tailwind/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+
 import useDeleteDialog from '@/hooks/useDeleteDialog';
-import type { File } from '@/shared.types';
+import type { FileOrFolder } from '@/shared.types';
 import { useZoneBrowserContext } from '@/contexts/ZoneBrowserContext';
 
 type DeleteDialogProps = {
-  targetItem: File;
+  targetItem: FileOrFolder;
   showDeleteDialog: boolean;
   setShowDeleteDialog: React.Dispatch<React.SetStateAction<boolean>>;
 };

src/components/ui/FileBrowser/Dialogs/RenameDialog.tsx

@@ -7,11 +7,12 @@ import {
   Typography
 } from '@material-tailwind/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import type { File } from '@/shared.types';
+
+import type { FileOrFolder } from '@/shared.types';
 import useRenameDialog from '@/hooks/useRenameDialog';
 
 type ItemNamingDialogProps = {
-  propertiesTarget: File | null;
+  propertiesTarget: FileOrFolder | null;
   showRenameDialog: boolean;
   setShowRenameDialog: React.Dispatch<React.SetStateAction<boolean>>;
 };

src/components/ui/FileBrowser/FileList.tsx

@@ -1,26 +1,34 @@
 import * as React from 'react';
 import { Typography } from '@material-tailwind/react';
 
-import type { File } from '@/shared.types';
+
+import * as zarr from 'zarrita';
+import * as omezarr from 'ome-zarr.js';
+
+import type { FileOrFolder } from '@/shared.types';
 import FileListCrumbs from './Crumbs';
 import FileRow from './FileRow';
 import { useZoneBrowserContext } from '@/contexts/ZoneBrowserContext';
 import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
 import { getOmeZarrMetadata } from '@/omezarr-helper';
 
 type FileListProps = {
-  files: File[];
-  selectedFiles: File[];
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+  files: FileOrFolder[];
+  selectedFiles: FileOrFolder[];
+  setSelectedFiles: React.Dispatch<React.SetStateAction<FileOrFolder[]>>;
   showPropertiesDrawer: boolean;
-  setPropertiesTarget: React.Dispatch<React.SetStateAction<File | null>>;
+  setPropertiesTarget: React.Dispatch<
+    React.SetStateAction<FileOrFolder | null>
+  >;
   hideDotFiles: boolean;
   handleRightClick: (
     e: React.MouseEvent<HTMLDivElement>,
-    file: File,
-    selectedFiles: File[],
-    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>,
-    setPropertiesTarget: React.Dispatch<React.SetStateAction<File | null>>
+    file: FileOrFolder,
+    selectedFiles: FileOrFolder[],
+    setSelectedFiles: React.Dispatch<React.SetStateAction<FileOrFolder[]>>,
+    setPropertiesTarget: React.Dispatch<
+      React.SetStateAction<FileOrFolder | null>
+    >
   ) => void;
 };
 
@@ -70,7 +78,7 @@
       }
     };
 
     checkZattrsForMultiscales();
   }, [currentNavigationPath]);
 
   return (

src/components/ui/FileBrowser/FileRow.tsx

@@ -7,26 +7,31 @@ import {
   FolderIcon
 } from '@heroicons/react/24/outline';
 
-import type { File } from '@/shared.types';
+import type { FileOrFolder } from '@/shared.types';
 import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
 import { useZoneBrowserContext } from '@/contexts/ZoneBrowserContext';
 import useHandleLeftClick from '@/hooks/useHandleLeftClick';
 import { formatDate, formatFileSize } from '@/utils';
 
+
 type FileRowProps = {
-  file: File;
+  file: FileOrFolder;
   index: number;
-  selectedFiles: File[];
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  displayFiles: File[];
+  selectedFiles: FileOrFolder[];
+  setSelectedFiles: React.Dispatch<React.SetStateAction<FileOrFolder[]>>;
+  displayFiles: FileOrFolder[];
   showPropertiesDrawer: boolean;
-  setPropertiesTarget: React.Dispatch<React.SetStateAction<File | null>>;
+  setPropertiesTarget: React.Dispatch<
+    React.SetStateAction<FileOrFolder | null>
+  >;
   handleRightClick: (
     e: React.MouseEvent<HTMLDivElement>,
-    file: File,
-    selectedFiles: File[],
-    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>,
-    setPropertiesTarget: React.Dispatch<React.SetStateAction<File | null>>
+    file: FileOrFolder,
+    selectedFiles: FileOrFolder[],
+    setSelectedFiles: React.Dispatch<React.SetStateAction<FileOrFolder[]>>,
+    setPropertiesTarget: React.Dispatch<
+      React.SetStateAction<FileOrFolder | null>
+    >
   ) => void;
 };
 

src/components/ui/PropertiesDrawer/OverviewTable.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { File } from '@/shared.types';
+
+import { FileOrFolder } from '@/shared.types';
 import { formatDate, formatFileSize } from '@/utils';
 
-export default function OverviewTable({ file }: { file: File | null }) {
+export default function OverviewTable({ file }: { file: FileOrFolder | null }) {
   return (
     <div className="w-full overflow-hidden rounded-lg border border-surface mt-4">
       <table className="w-full">

src/components/ui/PropertiesDrawer/PermissionsTable.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { CheckIcon, MinusIcon } from '@heroicons/react/24/outline';
-import { File } from '@/shared.types';
+
+import { FileOrFolder } from '@/shared.types';
 import { parsePermissions } from '@/utils';
 
-export default function PermissionsTable({ file }: { file: File | null }) {
+
+export default function PermissionsTable({
+  file
+}: {
+  file: FileOrFolder | null;
+}) {
   const permissions = file ? parsePermissions(file.permissions) : null;
 
   const PermissionIcon = ({ hasPermission }: { hasPermission: boolean }) =>

src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx

@@ -13,14 +13,15 @@ import {
   XMarkIcon
 } from '@heroicons/react/24/outline';
 
-import type { File } from '@/shared.types';
+import type { FileOrFolder } from '@/shared.types';
+
 import PermissionsTable from './PermissionsTable';
 import OverviewTable from './OverviewTable';
 import useCopyPath from '@/hooks/useCopyPath';
 import { useZoneBrowserContext } from '@/contexts/ZoneBrowserContext';
 
 type PropertiesDrawerProps = {
-  propertiesTarget: File | null;
+  propertiesTarget: FileOrFolder | null;
   open: boolean;
   setShowPropertiesDrawer: React.Dispatch<React.SetStateAction<boolean>>;
   setShowPermissionsDialog: React.Dispatch<React.SetStateAction<boolean>>;