File Tree

1"use client";
2 
3import * as React from "react";
4import {
5  Folder,
6  FolderOpen,
7  File,
8  FileText,
9  FileCode,
10  FileJson,
11  FileImage,
12  FileCog,
13} from "lucide-react";
14import { AnimatePresence, motion } from "motion/react";
15import { cn } from "@/lib/utils";
16 
17// ─── Types ─────────────────────────────────────────────────────────────────────
18 
19export type FileTreeElement = {
20  id: string;
21  name: string;
22  /** Omit or set to "file" for a leaf node; "folder" renders a collapsible branch. */
23  type?: "folder" | "file";
24  children?: FileTreeElement[];
25  /** Custom icon component (receives a `className` prop). */
26  icon?: React.ComponentType<{ className?: string }>;
27  /** Pink-tints the item to mark it as newly added / relevant. */
28  highlight?: boolean;
29  /** Whether this folder starts expanded. */
30  defaultOpen?: boolean;
31};
32 
33// ─── Context ───────────────────────────────────────────────────────────────────
34 
35type FileTreeCtx = {
36  highlightColor: string;
37  indentSize: number;
38  showIcons: boolean;
39  defaultOpenIds: Set<string>;
40  containerRef: React.RefObject<HTMLDivElement | null>;
41  highlightBounds: HighlightBounds | null;
42  setHighlightBounds: React.Dispatch<
43    React.SetStateAction<HighlightBounds | null>
44  >;
45};
46 
47type HighlightBounds = {
48  top: number;
49  left: number;
50  width: number;
51  height: number;
52};
53 
54const FileTreeContext = React.createContext<FileTreeCtx | null>(null);
55 
56function useFileTree() {
57  const context = React.useContext(FileTreeContext);
58  if (!context) {
59    throw new Error("File tree components must be used within <FileTree />");
60  }
61  return context;
62}
63 
64type FolderCtx = {
65  isOpen: boolean;
66  toggle: () => void;
67};
68 
69const FolderContext = React.createContext<FolderCtx | null>(null);
70 
71function useFolder() {
72  const context = React.useContext(FolderContext);
73  if (!context) {
74    throw new Error("Folder components must be used within a folder item");
75  }
76  return context;
77}
78 
79// ─── Icon resolution ───────────────────────────────────────────────────────────
80 
81// … truncated