@cytario/web 2.1.4 → 2.1.5

package/app/components/DirectoryView/DirectoryViewGrid.tsx

@@ -12,24 +12,21 @@ import { ClientOnly } from "~/components/ClientOnly";
 import { ProviderPill } from "~/components/Pills/ProviderPill";
 import { ScopePill } from "~/components/Pills/ScopePill";
 import { useNodeInfoModal } from "~/hooks/useNodeInfoModal";
-import {
-  select,
-  selectHttpsUrl,
-} from "~/utils/connectionsStore/selectors";
+import { select, selectHttpsUrl } from "~/utils/connectionsStore/selectors";
 import { useConnectionsStore } from "~/utils/connectionsStore/useConnectionsStore";
 import { getNodeIcon, isImageFile } from "~/utils/fileType";
 import { buildConnectionPath, constructS3Url } from "~/utils/resourceId";
 import { createSignedFetch } from "~/utils/signedFetch";
 
 const ViewerStoreProvider = lazy(() =>
-  import("~/components/.client/ImageViewer/state/store/ViewerStoreContext").then(
-    (mod) => ({ default: mod.ViewerStoreProvider }),
-  ),
+  import("~/components/.client/ImageViewer/state/store/ViewerStoreContext").then((mod) => ({
+    default: mod.ViewerStoreProvider,
+  })),
 );
 const ImagePreview = lazy(() =>
-  import("~/components/.client/ImageViewer/components/Image/ImagePreview").then(
-    (mod) => ({ default: mod.ImagePreview }),
-  ),
+  import("~/components/.client/ImageViewer/components/Image/ImagePreview").then((mod) => ({
+    default: mod.ImagePreview,
+  })),
 );
 
 const gridClasses: Partial<Record<ViewMode, string>> = {
@@ -40,15 +37,12 @@ const gridClasses: Partial<Record<ViewMode, string>> = {
 
 /** Create a signedFetch that lazily resolves credentials from the connections store. */
 function useSignedFetch(connectionName: string) {
-  const connectionConfig = useConnectionsStore(
-    select.connectionConfig(connectionName),
-  );
+  const connectionConfig = useConnectionsStore(select.connectionConfig(connectionName));
 
   const signedFetch = useMemo(() => {
     if (!connectionConfig) return null;
     return createSignedFetch(
-      () =>
-        useConnectionsStore.getState().connections[connectionName]?.credentials,
+      () => useConnectionsStore.getState().connections[connectionName]?.credentials,
       connectionConfig,
     );
   }, [connectionName, connectionConfig]);
@@ -56,13 +50,7 @@ function useSignedFetch(connectionName: string) {
   return { connectionConfig, signedFetch };
 }
 
-function BucketCardGridItem({
-  node,
-  connectionName,
-}: {
-  node: TreeNode;
-  connectionName: string;
-}) {
+function BucketCardGridItem({ node, connectionName }: { node: TreeNode; connectionName: string }) {
   const navigate = useNavigate();
   const { connectionConfig, signedFetch } = useSignedFetch(connectionName);
 
@@ -73,10 +61,7 @@ function BucketCardGridItem({
   // `_Object.Key` (already absolute — includes any configured prefix).
   const previewKey = node._Object?.Key ?? null;
   const hasPreview = !!previewKey && isImageFile(previewKey) && !!signedFetch;
-  const s3Url =
-    hasPreview && connectionConfig
-      ? constructS3Url(connectionConfig, previewKey)
-      : "";
+  const s3Url = hasPreview && connectionConfig ? constructS3Url(connectionConfig, previewKey) : "";
 
   return (
     <StorageConnectionCard
@@ -97,11 +82,7 @@ function BucketCardGridItem({
     >
       {hasPreview && signedFetch && (
         <ClientOnly>
-          <Suspense
-            fallback={
-              <div className="animate-pulse w-full h-full bg-slate-600" />
-            }
-          >
+          <Suspense fallback={<div className="animate-pulse w-full h-full bg-slate-600" />}>
             <ViewerStoreProvider url={s3Url} signedFetch={signedFetch}>
               <ImagePreview />
             </ViewerStoreProvider>
@@ -124,8 +105,7 @@ function FileCardGridItem({
   const navigate = useNavigate();
   const handleInfo = useNodeInfoModal(node);
 
-  const { connectionConfig: config, signedFetch } =
-    useSignedFetch(connectionName);
+  const { connectionConfig: config, signedFetch } = useSignedFetch(connectionName);
   // `_Object.Key` is absolute (prefix already applied) and set for both file
   // nodes (from listing) and directory nodes (first image inside, via
   // buildDirectoryTree). File nodes without `_Object` — e.g. recently-viewed
@@ -146,10 +126,7 @@ function FileCardGridItem({
   const hasPreview = !!s3Url && !!signedFetch;
 
   const nodeIcon = getNodeIcon(node);
-  const size =
-    node.type === "file" && node._Object?.Size
-      ? filesize(node._Object.Size)
-      : undefined;
+  const size = node.type === "file" && node._Object?.Size ? filesize(node._Object.Size) : undefined;
 
   return (
     <FileCard
@@ -162,11 +139,7 @@ function FileCardGridItem({
     >
       {hasPreview && signedFetch && (
         <ClientOnly>
-          <Suspense
-            fallback={
-              <div className="animate-pulse w-full h-full bg-slate-600" />
-            }
-          >
+          <Suspense fallback={<div className="animate-pulse w-full h-full bg-slate-600" />}>
             <ViewerStoreProvider url={s3Url} signedFetch={signedFetch}>
               <ImagePreview />
             </ViewerStoreProvider>
@@ -196,13 +169,7 @@ export function DirectoryViewGrid({
       {nodes.map((node) => {
         const key = node.id;
         if (kind === "connections") {
-          return (
-            <BucketCardGridItem
-              key={key}
-              node={node}
-              connectionName={node.connectionName}
-            />
-          );
+          return <BucketCardGridItem key={key} node={node} connectionName={node.connectionName} />;
         }
         return (
           <FileCardGridItem

package/app/components/DirectoryView/DirectoryViewTableConnection.tsx

@@ -94,10 +94,7 @@ export function DirectoryViewTableConnection({
   const connections = useConnectionsStore(select.connections);
 
   const data = useMemo(
-    () =>
-      nodes
-        .map((n) => connections[n.connectionName]?.connectionConfig)
-        .filter(Boolean),
+    () => nodes.map((n) => connections[n.connectionName]?.connectionConfig).filter(Boolean),
     [nodes, connections],
   );
 

package/app/components/DirectoryView/DirectoryViewTableDirectory.tsx

@@ -3,11 +3,7 @@ import { filesize } from "filesize";
 import { useMemo } from "react";
 import { Link } from "react-router";
 
-import {
-  TreeNode,
-  computeDirectorySize,
-  computeDirectoryLastModified,
-} from "./buildDirectoryTree";
+import { TreeNode, computeDirectorySize, computeDirectoryLastModified } from "./buildDirectoryTree";
 import { CellRenderers, ColumnConfig, Table } from "~/components/Table/Table";
 import { getFileType } from "~/utils/fileType";
 import { formatHumanReadableDate } from "~/utils/formatHumanReadableDate";
@@ -74,8 +70,7 @@ const fileCellRenderers: CellRenderers<FileRow> = {
   // for directories, file-type icon for files) to match the grid's FileCard.
   name: (row) => <Link to={`/connections/${row.id}`}>{row.name}</Link>,
   file_type: (row) => <Pill>{row.file_type}</Pill>,
-  last_modified: (row) =>
-    row.last_modified ? formatHumanReadableDate(row.last_modified) : null,
+  last_modified: (row) => (row.last_modified ? formatHumanReadableDate(row.last_modified) : null),
   size: (row) => (row.size ? filesize(row.size).toString() : null),
 };
 

package/app/components/DirectoryView/DirectoryViewTree.tsx

@@ -44,11 +44,7 @@ export function NodeLinkIcon({ node }: { node: TreeNode }) {
  * this wrapper and {@link DirectoryTree} should collapse into a single
  * component used across the app.
  */
-export function DirectoryViewTree({
-  nodes,
-  searchTerm,
-  kind,
-}: DirectoryViewTreeProps) {
+export function DirectoryViewTree({ nodes, searchTerm, kind }: DirectoryViewTreeProps) {
   const navigate = useNavigate();
 
   if (nodes.length === 0) return <DirectoryViewEmptyState kind={kind} />;
@@ -63,12 +59,8 @@ export function DirectoryViewTree({
         size="comfortable"
         height={600}
         searchTerm={searchTerm}
-        searchMatch={(node, term) =>
-          node.name.toLowerCase().includes(term.toLowerCase())
-        }
-        onActivate={(node) =>
-          navigate(buildConnectionPath(node.connectionName, node.pathName))
-        }
+        searchMatch={(node, term) => node.name.toLowerCase().includes(term.toLowerCase())}
+        onActivate={(node) => navigate(buildConnectionPath(node.connectionName, node.pathName))}
       />
     </div>
   );
@@ -84,11 +76,7 @@ interface DirectoryTreeProps {
   className?: string;
 }
 
-function DirectoryTreeRecursive({
-  nodes,
-  action,
-  className,
-}: DirectoryTreeProps) {
+function DirectoryTreeRecursive({ nodes, action, className }: DirectoryTreeProps) {
   return (
     <ul className="pl-6">
       {nodes.map((node) => {
@@ -121,11 +109,7 @@ function DirectoryTreeRecursive({
               </Link>
             </div>
             {node.children && node.children.length > 0 && (
-              <DirectoryTreeRecursive
-                nodes={node.children}
-                action={action}
-                className={className}
-              />
+              <DirectoryTreeRecursive nodes={node.children} action={action} className={className} />
             )}
           </li>
         );

package/app/components/DirectoryView/FilterBar.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  IconButton,
-  Input,
-  Pill,
-  Select,
-  type SelectItem,
-} from "@cytario/design";
+import { Button, IconButton, Input, Pill, Select, type SelectItem } from "@cytario/design";
 import { FilterX, X } from "lucide-react";
 import { type ReactNode, useMemo } from "react";
 
@@ -40,19 +33,12 @@ interface FilterBarProps {
  * Introduced in C-82 to give grid and tree views the same filter capabilities
  * as the table view.
  */
-export function FilterBar({
-  columns,
-  tableId,
-  dynamicOptions,
-}: FilterBarProps) {
+export function FilterBar({ columns, tableId, dynamicOptions }: FilterBarProps) {
   const { columnFilters, setColumnFilters, resetFilters } = useColumnFilters({
     tableId,
   });
 
-  const filterable = useMemo(
-    () => columns.filter((c) => c.enableColumnFilter),
-    [columns],
-  );
+  const filterable = useMemo(() => columns.filter((c) => c.enableColumnFilter), [columns]);
 
   const hasActive = columnFilters.length > 0;
 
@@ -65,9 +51,7 @@ export function FilterBar({
           key={col.id}
           column={col}
           options={col.filterOptions ?? dynamicOptions?.[col.id]}
-          value={
-            (columnFilters.find((f) => f.id === col.id)?.value as string) ?? ""
-          }
+          value={(columnFilters.find((f) => f.id === col.id)?.value as string) ?? ""}
           onChange={(next) => {
             setColumnFilters((prev) => {
               const rest = prev.filter((f) => f.id !== col.id);
@@ -77,12 +61,7 @@ export function FilterBar({
         />
       ))}
       {hasActive && (
-        <Button
-          variant="ghost"
-          size="sm"
-          iconLeft={FilterX}
-          onPress={resetFilters}
-        >
+        <Button variant="ghost" size="sm" iconLeft={FilterX} onPress={resetFilters}>
           Clear all
         </Button>
       )}
@@ -97,23 +76,11 @@ interface FilterControlProps {
   onChange: (value: string) => void;
 }
 
-function FilterControl({
-  column,
-  options,
-  value,
-  onChange,
-}: FilterControlProps) {
+function FilterControl({ column, options, value, onChange }: FilterControlProps) {
   const clear = () => onChange("");
 
   if (column.filterType === "select") {
-    return (
-      <SelectFilter
-        column={column}
-        options={options}
-        value={value}
-        onChange={onChange}
-      />
-    );
+    return <SelectFilter column={column} options={options} value={value} onChange={onChange} />;
   }
 
   return (
@@ -154,9 +121,7 @@ function SelectFilter({
     if (!options) return [ALL_OPTION];
     return [
       ALL_OPTION,
-      ...options
-        .filter((o) => o.value !== "")
-        .map((o) => ({ id: o.value, name: o.label })),
+      ...options.filter((o) => o.value !== "").map((o) => ({ id: o.value, name: o.label })),
     ];
   }, [options]);
 
@@ -166,11 +131,7 @@ function SelectFilter({
     if (!column.filterRender) return undefined;
     const render = column.filterRender;
     function FilterOption(item: SelectItem): ReactNode {
-      return item.id === ALL_KEY ? (
-        <AllPill />
-      ) : (
-        render({ label: item.name, value: item.id })
-      );
+      return item.id === ALL_KEY ? <AllPill /> : render({ label: item.name, value: item.id });
     }
     return FilterOption;
   }, [column.filterRender]);

package/app/components/DirectoryView/buildDirectoryTree.ts

@@ -100,10 +100,7 @@ function buildDirectoryTreeRecursive(
         _Object: obj,
       };
       currentDir.push(existingDir);
-    } else if (
-      isImageFile(obj.Key ?? "") &&
-      !isImageFile(existingDir._Object?.Key ?? "")
-    ) {
+    } else if (isImageFile(obj.Key ?? "") && !isImageFile(existingDir._Object?.Key ?? "")) {
       existingDir._Object = obj;
     }
 
@@ -118,10 +115,7 @@ function buildDirectoryTreeRecursive(
 }
 
 /** Depth-first search for a node by its `id`. */
-export function findNodeById(
-  nodes: TreeNode[],
-  id: string,
-): TreeNode | undefined {
+export function findNodeById(nodes: TreeNode[], id: string): TreeNode | undefined {
   for (const node of nodes) {
     if (node.id === id) return node;
     if (node.children.length > 0) {
@@ -136,23 +130,16 @@ export function findNodeById(
 export function computeDirectorySize(node: TreeNode): number {
   if (node.type === "file") return node._Object?.Size ?? 0;
   if (node.children.length === 0) return node._Object?.Size ?? 0;
-  return node.children.reduce(
-    (sum, child) => sum + computeDirectorySize(child),
-    0,
-  );
+  return node.children.reduce((sum, child) => sum + computeDirectorySize(child), 0);
 }
 
 /** Latest LastModified timestamp under a directory node. */
 export function computeDirectoryLastModified(node: TreeNode): number {
   if (node.type === "file") {
-    return node._Object?.LastModified
-      ? new Date(node._Object.LastModified).getTime()
-      : 0;
+    return node._Object?.LastModified ? new Date(node._Object.LastModified).getTime() : 0;
   }
   if (node.children.length === 0) {
-    return node._Object?.LastModified
-      ? new Date(node._Object.LastModified).getTime()
-      : 0;
+    return node._Object?.LastModified ? new Date(node._Object.LastModified).getTime() : 0;
   }
   return node.children.reduce(
     (max, child) => Math.max(max, computeDirectoryLastModified(child)),
@@ -182,13 +169,7 @@ export function buildDirectoryTree(
     const pathName = obj.Key.replace(prefix || "", "");
     const pathSegments = pathName.split("/");
 
-    buildDirectoryTreeRecursive(
-      root,
-      pathSegments,
-      obj,
-      connectionName,
-      basePath,
-    );
+    buildDirectoryTreeRecursive(root, pathSegments, obj, connectionName, basePath);
   });
 
   return root;

package/app/components/DirectoryView/filterNodes.ts

@@ -20,15 +20,13 @@ type NodeAccessor = (node: TreeNode) => string;
 
 const fileAccessors: Record<string, NodeAccessor> = {
   name: (node) => node.name,
-  file_type: (node) =>
-    node.type === "file" ? getFileType(node.name) : "Directory",
+  file_type: (node) => (node.type === "file" ? getFileType(node.name) : "Directory"),
 };
 
 function makeConnectionAccessors(
   connections: Record<string, Connection>,
 ): Record<string, NodeAccessor> {
-  const config = (node: TreeNode) =>
-    connections[node.connectionName]?.connectionConfig;
+  const config = (node: TreeNode) => connections[node.connectionName]?.connectionConfig;
   return {
     name: (node) => node.name,
     provider: (node) => config(node)?.provider ?? "",
@@ -41,9 +39,7 @@ export function getNodeAccessors(
   kind: DirectoryKind,
   connections: Record<string, Connection> = {},
 ): Record<string, NodeAccessor> {
-  return kind === "connections"
-    ? makeConnectionAccessors(connections)
-    : fileAccessors;
+  return kind === "connections" ? makeConnectionAccessors(connections) : fileAccessors;
 }
 
 /**
@@ -51,10 +47,7 @@ export function getNodeAccessors(
  * Filtering is applied recursively so that hidden children inside visible
  * directories are also removed (required for the tree view).
  */
-export function filterHiddenNodes(
-  nodes: TreeNode[],
-  showHidden: boolean,
-): TreeNode[] {
+export function filterHiddenNodes(nodes: TreeNode[], showHidden: boolean): TreeNode[] {
   if (showHidden) return nodes;
 
   return nodes

package/app/components/DirectoryView/modals/Cyberduck.modal.tsx

@@ -9,11 +9,7 @@ import { RouteModal } from "~/components/RouteModal";
  * Provides information and a download link for a Cyberduck connection profile.
  * Opens via `?modal=cyberduck&connectionName=my-connection`.
  */
-export default function CyberduckModal({
-  onClose,
-}: {
-  onClose: () => void;
-}) {
+export default function CyberduckModal({ onClose }: { onClose: () => void }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const connectionName = searchParams.get("connectionName");
 
@@ -34,14 +30,13 @@ export default function CyberduckModal({
   return (
     <RouteModal title="Access with Cyberduck" onClose={handleClose}>
       <p className="text-(--color-text-secondary)">
-        Cyberduck is a free desktop application that allows you to browse and
-        manage your cloud storage files with a familiar file manager interface.
+        Cyberduck is a free desktop application that allows you to browse and manage your cloud
+        storage files with a familiar file manager interface.
       </p>
 
       <p className="text-(--color-text-secondary)">
-        Download a pre-configured connection profile for{" "}
-        <strong>{connectionName}</strong> that will automatically set up your
-        authentication and bucket access in Cyberduck.
+        Download a pre-configured connection profile for <strong>{connectionName}</strong> that will
+        automatically set up your authentication and bucket access in Cyberduck.
       </p>
 
       <div className="bg-(--color-surface-subtle) border border-(--color-border-default) rounded-sm px-4 py-2 flex flex-col gap-2">
@@ -49,11 +44,7 @@ export default function CyberduckModal({
         <ol className="list-decimal list-inside space-y-1 text-sm text-(--color-text-secondary)">
           <li>
             Download and install{" "}
-            <Link
-              href="https://cyberduck.io/download/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <Link href="https://cyberduck.io/download/" target="_blank" rel="noopener noreferrer">
               Cyberduck
             </Link>{" "}
             (version 8.7.0 or later)

package/app/components/DirectoryView/modals/FileInfo.modal.tsx

@@ -4,11 +4,7 @@ import { useParams, useSearchParams } from "react-router";
 
 import { RouteModal } from "~/components/RouteModal";
 
-export default function FileInfoModal({
-  onClose,
-}: {
-  onClose: (extraKeys?: string[]) => void;
-}) {
+export default function FileInfoModal({ onClose }: { onClose: (extraKeys?: string[]) => void }) {
   const [searchParams] = useSearchParams();
   const { name: connectionName } = useParams();
 

package/app/components/DirectoryView/useLayoutStore.ts

@@ -44,11 +44,7 @@ export const useLayoutStore = create<LayoutStore>()(
           ),
         showFilters: false,
         toggleShowFilters: () =>
-          set(
-            (state) => ({ showFilters: !state.showFilters }),
-            false,
-            "toggleShowFilters",
-          ),
+          set((state) => ({ showFilters: !state.showFilters }), false, "toggleShowFilters"),
         headerSlot: null,
         setHeaderSlot: (headerSlot) => set({ headerSlot }),
       }),
@@ -61,34 +57,18 @@ export const useLayoutStore = create<LayoutStore>()(
         {
           0: (state) => {
             const s = state as { viewMode?: string };
-            const OLD_VALID = [
-              "list",
-              "list-wide",
-              "grid-sm",
-              "grid-md",
-              "grid-lg",
-            ];
+            const OLD_VALID = ["list", "list-wide", "grid-sm", "grid-md", "grid-lg"];
             return {
-              viewMode: OLD_VALID.includes(s?.viewMode ?? "")
-                ? (s.viewMode as string)
-                : "grid",
+              viewMode: OLD_VALID.includes(s?.viewMode ?? "") ? (s.viewMode as string) : "grid",
               showHiddenFiles: false,
               showFilters: false,
             };
           },
           1: (state) => {
             const s = state as { viewMode?: string };
-            const OLD_VALID = [
-              "list",
-              "list-wide",
-              "grid-sm",
-              "grid-md",
-              "grid-lg",
-            ];
+            const OLD_VALID = ["list", "list-wide", "grid-sm", "grid-md", "grid-lg"];
             return {
-              viewMode: OLD_VALID.includes(s?.viewMode ?? "")
-                ? (s.viewMode as string)
-                : "grid",
+              viewMode: OLD_VALID.includes(s?.viewMode ?? "") ? (s.viewMode as string) : "grid",
               showHiddenFiles: false,
               showFilters: false,
             };

package/app/components/GlobalSearch/GlobalSearch.tsx

@@ -40,10 +40,7 @@ export const GlobalSearch = () => {
   };
 
   const handleClickOutside = (event: Event) => {
-    if (
-      parentRef.current &&
-      !parentRef.current.contains(event.target as Node)
-    ) {
+    if (parentRef.current && !parentRef.current.contains(event.target as Node)) {
       setShowResults(false);
     }
   };

package/app/components/GlobalSearch/SearchBar.tsx

@@ -17,13 +17,7 @@ export function SearchBar({ value, onChange, onClear }: SearchBarProps) {
         placeholder="Search..."
       />
 
-      {value ? (
-        <IconButton
-          icon={X}
-          onPress={onClear}
-          aria-label="Clear search"
-        />
-      ) : null}
+      {value ? <IconButton icon={X} onPress={onClear} aria-label="Clear search" /> : null}
     </div>
   );
 }

package/app/components/GlobalSearch/Suggestions.tsx

@@ -10,7 +10,6 @@ interface SuggestionsProps {
   showResults: boolean;
 }
 export const Suggestions = ({ nodes, showResults }: SuggestionsProps) => {
-
   return (
     <AnimatePresence>
       {showResults && (

package/app/components/ImageViewer/state/formatRegistry.ts

@@ -1,8 +1,4 @@
-import type {
-  FormatExtension,
-  FormatHandler,
-  FormatRegistry,
-} from "@cytario/plugin-api";
+import type { FormatExtension, FormatHandler, FormatRegistry } from "@cytario/plugin-api";
 import { getExtension } from "~/utils/fileType";
 
 /**
@@ -87,8 +83,7 @@ class FormatRegistryImpl {
    */
   scopedFor(pluginName: string): FormatRegistry {
     return {
-      register: (extension, handler) =>
-        this.add(pluginName, extension, handler),
+      register: (extension, handler) => this.add(pluginName, extension, handler),
     };
   }
 
@@ -97,15 +92,9 @@ class FormatRegistryImpl {
    * same plugin name) is a no-op so HMR re-runs do not throw.
    * Cross-plugin overlap on any key throws `DuplicateRegistrationError`.
    */
-  add(
-    pluginName: string,
-    extension: FormatExtension,
-    handler: FormatHandler,
-  ): void {
+  add(pluginName: string, extension: FormatExtension, handler: FormatHandler): void {
     const keys = normalizeKeys(extension);
-    const existing = this.registrations.find((r) =>
-      keysCollide(r.keys, keys),
-    );
+    const existing = this.registrations.find((r) => keysCollide(r.keys, keys));
     if (existing) {
       if (existing.pluginName === pluginName) return;
       throw new DuplicateRegistrationError(
@@ -136,9 +125,7 @@ class FormatRegistryImpl {
         }
       }
     }
-    throw new UnknownFormatError(
-      `No format handler registered for URL: ${url}`,
-    );
+    throw new UnknownFormatError(`No format handler registered for URL: ${url}`);
   }
 
   list(): readonly Registration[] {