Modern Folder Dashboard

1"use client";
2 
3import React, {
4  useState,
5  useCallback,
6  useMemo,
7  useRef,
8  createContext,
9  useContext,
10} from "react";
11import { AnimatePresence, motion } from "motion/react";
12import {
13  Home,
14  Folder as FolderIcon,
15  FileText,
16  FileSpreadsheet,
17  FileType,
18  Presentation,
19  Image as ImageIcon,
20  BarChart3,
21  Mail,
22  MailOpen,
23  Workflow,
24  Settings,
25  Bell,
26  Search,
27  SlidersHorizontal,
28  MoreHorizontal,
29  MoreVertical,
30  Share2,
31  ArrowLeft,
32  ChevronDown,
33  ChevronRight,
34  ChevronsRight,
35  ExternalLink,
36  Pin,
37  Inbox,
38  Plus,
39  Trash2,
40  Download,
41  Pencil,
42  Check,
43  Link2,
44  X,
45  ArrowUpDown,
46  Clock,
47  Zap,
48  Sun,
49  Moon,
50} from "lucide-react";
51import { cn } from "@/lib/utils";
52import { summarizeStorage } from "@/lib/storage";
53 
54/* ================================================================== */
55/*  Theme (dark mode) context                                          */
56/* ================================================================== */
57/*
58  Uses Tailwind's class-based dark mode strategy: the root wrapper gets a
59  "dark" class toggled by React state, and every descendant uses regular
60  `dark:` variants. Make sure tailwind.config has `darkMode: "class"`
61  (or, on Tailwind v4, `@custom-variant dark (&:where(.dark, .dark *));`
62  in your CSS) for this to take effect.
63*/
64 
65const ThemeContext = createContext<boolean>(false);
66function useIsDark() {
67  return useContext(ThemeContext);
68}
69 
70/* ================================================================== */
71/*  Types                                                              */
72/* ================================================================== */
73 
74type FolderVariant = "neutral" | "blue" | "black";
75type FileKind = "doc" | "sheet" | "image" | "pdf" | "slide";
76type TagName = "Sales" | "Marketing" | "Analytics" | "Product" | "Engineering" | "Growth";
77type NavKey = "home" | "notes" | "reports" | "emails" | "automation";
78type SortKey = "name" | "size" | "date";
79 
80type FileItem = {
81  id: string;
82  name: string;
83  kind: FileKind;
84  sizeKb: number;
85  modified: string; // ISO yyyy-mm-dd
86  owner: string;
87};
88 
89type Folder = {
90  id: string;
91  title: string;
92  notesCount: number;
93  sizeKb: number;
94  variant: FolderVariant;
95  tag: TagName;
96  files: FileItem[];
97};
98 
99type Project = {
100  id: string;
101  name: string;
102  folders: Folder[];
103};
104 
105type SelectedItem =
106  | { type: "folder"; folder: Folder }
107  | { type: "file"; file: FileItem; folderTitle: string; folderTag: TagName }
108  | null;
109 
110// … truncated