File Browser

1"use client";
2 
3import type { StoredFile } from "files-sdk";
4import type { UseFilesResult } from "files-sdk/react";
5import {
6  ChevronRightIcon,
7  FileIcon,
8  FolderIcon,
9  HomeIcon,
10  Loader2Icon,
11} from "lucide-react";
12import { Fragment, useCallback, useEffect, useRef, useState } from "react";
13 
14import { FileActions } from "@/components/files-sdk/file-actions";
15import { Button } from "@/components/ui/button";
16import { cn } from "@/lib/utils";
17 
18export interface FileBrowserProps {
19  /** A `useFiles()` instance — folders and files are listed through it. */
20  files: UseFilesResult;
21  /** Folder to open on mount, e.g. `"photos/"`. Defaults to the root. */
22  initialPrefix?: string;
23  /** Delimiter that marks a folder boundary. Default `"/"`. */
24  delimiter?: string;
25  /** Called when a file row (not a folder) is clicked. */
26  onSelect?: (file: StoredFile) => void;
27  /** Called after a successful copy/rename/move/delete from a row's actions menu. */
28  onChanged?: () => void;
29  /** Hide the per-file actions menu. */
30  readOnly?: boolean;
31  className?: string;
32}
33 
34const formatBytes = (bytes: number): string => {
35  if (bytes === 0) {
36    return "0 B";
37  }
38  const units = ["B", "KB", "MB", "GB", "TB"];
39  const exponent = Math.min(
40    Math.floor(Math.log(bytes) / Math.log(1024)),
41    units.length - 1
42  );
43  return `${(bytes / 1024 ** exponent).toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
44};
45 
46/** Split `"photos/2024/"` into clickable crumbs with their cumulative prefix. */
47const crumbsOf = (
48  prefix: string,
49  delimiter: string
50): { label: string; prefix: string }[] => {
51  const parts = prefix.split(delimiter).filter(Boolean);
52  let acc = "";
53  return parts.map((label) => {
54    acc += label + delimiter;
55    return { label, prefix: acc };
56  });
57};
58 
59/** Strip the parent prefix + trailing delimiter so a folder shows its own name. */
60const folderName = (
61  folderPrefix: string,
62  parent: string,
63  delimiter: string
64): string => folderPrefix.slice(parent.length).replace(delimiter, "");
65 
66/**
67 * A folder-aware browser for a `useFiles()` instance. Uses `list({ delimiter })`
68 * so common prefixes surface as folders you can descend into, with a breadcrumb
69 * trail and cursor-based "load more". Each file row carries a `FileActions` menu
70 * (download, copy, rename, move, delete) unless `readOnly`. Falls back
71 * gracefully on adapters that can't delimit — everything just appears as files
72 * at the root.
73 */
74export const FileBrowser = ({
75  files,
76  initialPrefix = "",
77// … truncated