File System Light

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import type { ViewerSource } from "@/lib/viewer-source";
7import {
8  Breadcrumb,
9  BreadcrumbItem,
10  BreadcrumbList,
11  BreadcrumbPage,
12  BreadcrumbSeparator,
13} from "@/components/ui/breadcrumb";
14import { FileViewerPreview } from "@/components/ui/file-viewer";
15import {
16  ViewerBody,
17  ViewerHeader,
18  ViewerRoot,
19  ViewerSidebar,
20  ViewerSurface,
21} from "@/components/ui/viewer";
22 
23import { FileSystemLightTree } from "./file-system-light-tree";
24import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
25import { joinEffectKey } from "@/lib/effect-key";
26 
27export type FileSystemLightFile = {
28  path: string;
29  source: ViewerSource;
30};
31 
32export type FileSystemLightProps = {
33  files: FileSystemLightFile[];
34  className?: string;
35  defaultSelectedPath?: string | null;
36  onSelectedPathChange?: (path: string | null) => void;
37  selectedPath?: string | null;
38  title?: string;
39};
40 
41export function FileSystemLight({
42  files,
43  className,
44  defaultSelectedPath = files[0]?.path ?? null,
45  onSelectedPathChange,
46  selectedPath: selectedPathProp,
47  title = "Files",
48}: FileSystemLightProps) {
49  const normalizedFiles = React.useMemo(
50    () =>
51      files.map((file) => ({
52        ...file,
53        path: normalizeFileSystemLightPath(file.path),
54      })),
55    [files],
56  );
57  const paths = React.useMemo(
58    () => normalizedFiles.map((file) => file.path),
59    [normalizedFiles],
60  );
61  const filesByPath = React.useMemo(
62    () => new Map(normalizedFiles.map((file) => [file.path, file])),
63    [normalizedFiles],
64  );
65  const onSelectedPathChangeRef = React.useRef(onSelectedPathChange);
66  const isSelectionControlledRef = React.useRef(selectedPathProp !== undefined);
67  const initialSelectedPath =
68    normalizeOptionalFileSystemLightPath(defaultSelectedPath);
69  const [internalSelectedPath, setInternalSelectedPath] = React.useState<
70    string | null
71  >(() =>
72    initialSelectedPath && filesByPath.has(initialSelectedPath)
73      ? initialSelectedPath
74      : (paths[0] ?? null),
75  );
76  const isSelectionControlled = selectedPathProp !== undefined;
77  const selectedPath = normalizeOptionalFileSystemLightPath(
78    selectedPathProp ?? internalSelectedPath,
79  );
80  const selectedFile = selectedPath ? filesByPath.get(selectedPath) : undefined;
81  const selectedTreePaths = React.useMemo(
82    () => (selectedPath && filesByPath.has(selectedPath) ? [selectedPath] : []),
83    [filesByPath, selectedPath],
84  );
85// … truncated