{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dashboard-folder", "title": "Modern Folder Dashboard", "description": "", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "registry/default/blocks/Dashboard/dashboard-folde.tsx", "content": "\"use client\";\n\nimport React, {\n useState,\n useCallback,\n useMemo,\n useRef,\n createContext,\n useContext,\n} from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport {\n Home,\n Folder as FolderIcon,\n FileText,\n FileSpreadsheet,\n FileType,\n Presentation,\n Image as ImageIcon,\n BarChart3,\n Mail,\n MailOpen,\n Workflow,\n Settings,\n Bell,\n Search,\n SlidersHorizontal,\n MoreHorizontal,\n MoreVertical,\n Share2,\n ArrowLeft,\n ChevronDown,\n ChevronRight,\n ChevronsRight,\n ExternalLink,\n Pin,\n Inbox,\n Plus,\n Trash2,\n Download,\n Pencil,\n Check,\n Link2,\n X,\n ArrowUpDown,\n Clock,\n Zap,\n Sun,\n Moon,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { summarizeStorage } from \"@/lib/storage\";\n\n/* ================================================================== */\n/* Theme (dark mode) context */\n/* ================================================================== */\n/*\n Uses Tailwind's class-based dark mode strategy: the root wrapper gets a\n \"dark\" class toggled by React state, and every descendant uses regular\n `dark:` variants. Make sure tailwind.config has `darkMode: \"class\"`\n (or, on Tailwind v4, `@custom-variant dark (&:where(.dark, .dark *));`\n in your CSS) for this to take effect.\n*/\n\nconst ThemeContext = createContext(false);\nfunction useIsDark() {\n return useContext(ThemeContext);\n}\n\n/* ================================================================== */\n/* Types */\n/* ================================================================== */\n\ntype FolderVariant = \"neutral\" | \"blue\" | \"black\";\ntype FileKind = \"doc\" | \"sheet\" | \"image\" | \"pdf\" | \"slide\";\ntype TagName = \"Sales\" | \"Marketing\" | \"Analytics\" | \"Product\" | \"Engineering\" | \"Growth\";\ntype NavKey = \"home\" | \"notes\" | \"reports\" | \"emails\" | \"automation\";\ntype SortKey = \"name\" | \"size\" | \"date\";\n\ntype FileItem = {\n id: string;\n name: string;\n kind: FileKind;\n sizeKb: number;\n modified: string; // ISO yyyy-mm-dd\n owner: string;\n};\n\ntype Folder = {\n id: string;\n title: string;\n notesCount: number;\n sizeKb: number;\n variant: FolderVariant;\n tag: TagName;\n files: FileItem[];\n};\n\ntype Project = {\n id: string;\n name: string;\n folders: Folder[];\n};\n\ntype SelectedItem =\n | { type: \"folder\"; folder: Folder }\n | { type: \"file\"; file: FileItem; folderTitle: string; folderTag: TagName }\n | null;\n\ntype NotificationItem = {\n id: number;\n message: string;\n time: string;\n unread: boolean;\n link?: { projectId: string; folderId: string };\n};\n\ntype EmailItem = {\n id: number;\n from: string;\n subject: string;\n snippet: string;\n time: string;\n unread: boolean;\n};\n\ntype AutomationItem = {\n id: number;\n name: string;\n description: string;\n trigger: string;\n enabled: boolean;\n};\n\n/* ================================================================== */\n/* Folder graphic — same flap silhouette + \"cards peeking out\" idea */\n/* ================================================================== */\n\nconst FLAP_PATH =\n \"M0 25C0 11.1929 11.1929 0 25 0H136.084C143.044 0 149.689 2.90139 154.42 8.00608L178.08 33.5343C182.811 38.639 189.456 41.5404 196.416 41.5404H296C309.807 41.5404 321 52.7333 321 66.5404V216C321 229.807 309.807 241 296 241H25C11.1929 241 0 229.807 0 216V25Z\";\n\n/* Light theme — soft neutrals + a single blue accent */\ntype FolderPalette = {\n readonly flapFill: string;\n readonly flapStroke: string;\n readonly cardFill: string;\n readonly cardStroke: string;\n readonly cardLineFill: string;\n};\n\nconst folderPalettes = {\n neutral: {\n flapFill: \"#EFEFF1\",\n flapStroke: \"#E2E2E6\",\n cardFill: \"#FFFFFF\",\n cardStroke: \"#E9E9EC\",\n cardLineFill: \"#E3E3E7\",\n },\n blue: {\n flapFill: \"#6DBCFE\",\n flapStroke: \"#94CEFF\",\n cardFill: \"#FFFFFF\",\n cardStroke: \"#EAF4FF\",\n cardLineFill: \"#DCEEFF\",\n },\n black: {\n flapFill: \"#1F2937\",\n flapStroke: \"#374151\",\n cardFill: \"#111827\",\n cardStroke: \"#374151\",\n cardLineFill: \"#374151\",\n }\n} as const satisfies Record;\n\n/* Dark theme — kept deliberately monochrome (charcoal / graphite / off-white),\n with the \"blue\" variant surviving as the one accent, muted to a deep\n midnight so it still reads as black-and-white-first. The \"black\" variant\n flips to near-white so it keeps acting as the spotlight tile against a\n dark canvas. */\nconst folderPalettesDark = {\n neutral: {\n flapFill: \"#4B4B4F\",\n flapStroke: \"#5D5D62\",\n cardFill: \"#ECECEE\",\n cardStroke: \"#E5E7EB\",\n cardLineFill: \"#C7C7CB\",\n },\n blue: {\n flapFill: \"#2B4A6E\",\n flapStroke: \"#3E6690\",\n cardFill: \"#ECECEE\",\n cardStroke: \"#E5E7EB\",\n cardLineFill: \"#C7C7CB\",\n },\n black: {\n flapFill: \"#F5F5F7\",\n flapStroke: \"#E4E4E7\",\n cardFill: \"#FFFFFF\",\n cardStroke: \"#E5E7EB\",\n cardLineFill: \"#E2E2E5\",\n }\n} as const satisfies Record;\n\nconst cardSpring = { type: \"spring\" as const, stiffness: 150, damping: 15 };\n\nfunction MiniCard({ palette }: { palette: FolderPalette }) {\n const isDark = useIsDark();\n return (\n \n \n \n \n \n \n \n );\n}\n\nconst FolderGraphic = React.memo(function FolderGraphic({\n variant = \"neutral\",\n hovered,\n}: {\n variant?: FolderVariant;\n hovered: boolean;\n}) {\n const isDark = useIsDark();\n const palette = (isDark ? folderPalettesDark : folderPalettes)[variant];\n const open = hovered;\n\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n
\n\n \n \n \n \n
\n );\n});\n\n/* ================================================================== */\n/* Helpers */\n/* ================================================================== */\n\nfunction formatSize(kb: number) {\n if (kb >= 1024 * 1024) return `${(kb / (1024 * 1024)).toFixed(1)} GB`;\n if (kb >= 1024) return `${(kb / 1024).toFixed(1)} MB`;\n return `${Math.round(kb)} KB`;\n}\n\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nfunction formatDate(iso: string) {\n const [y, m, d] = iso.split(\"-\").map(Number);\n return `${MONTHS[(m ?? 1) - 1]} ${d}, ${y}`;\n}\nfunction todayIso() {\n const d = new Date();\n return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`;\n}\n\nconst TAG_DOT: Record = {\n Sales: \"bg-blue-500\",\n Marketing: \"bg-neutral-400\",\n Analytics: \"bg-rose-500\",\n Product: \"bg-violet-500\",\n Engineering: \"bg-amber-500\",\n Growth: \"bg-emerald-500\",\n};\n\nconst KIND_META: Record; color: string; bg: string; label: string }> = {\n doc: { icon: FileText, color: \"text-indigo-500 dark:text-indigo-400\", bg: \"bg-indigo-50 dark:bg-indigo-500/15\", label: \"Document\" },\n sheet: { icon: FileSpreadsheet, color: \"text-emerald-600 dark:text-emerald-400\", bg: \"bg-emerald-50 dark:bg-emerald-500/15\", label: \"Spreadsheet\" },\n image: { icon: ImageIcon, color: \"text-pink-500 dark:text-pink-400\", bg: \"bg-pink-50 dark:bg-pink-500/15\", label: \"Image\" },\n pdf: { icon: FileType, color: \"text-rose-500 dark:text-rose-400\", bg: \"bg-rose-50 dark:bg-rose-500/15\", label: \"PDF\" },\n slide: { icon: Presentation, color: \"text-orange-500 dark:text-orange-400\", bg: \"bg-orange-50 dark:bg-orange-500/15\", label: \"Slides\" },\n};\n\nfunction sortFolders(folders: Folder[], sortBy: SortKey): Folder[] {\n const copy = [...folders];\n copy.sort((a, b) => {\n if (sortBy === \"name\") return a.title.localeCompare(b.title);\n if (sortBy === \"size\") return b.sizeKb - a.sizeKb;\n return 0;\n });\n return copy;\n}\n\nfunction sortFiles(files: FileItem[], sortBy: SortKey): FileItem[] {\n const copy = [...files];\n copy.sort((a, b) => {\n if (sortBy === \"name\") return a.name.localeCompare(b.name);\n if (sortBy === \"size\") return b.sizeKb - a.sizeKb;\n return b.modified.localeCompare(a.modified);\n });\n return copy;\n}\n\n/* ================================================================== */\n/* Mock data */\n/* ================================================================== */\n\nlet uid = 1000;\nfunction nextId(prefix: string) {\n uid += 1;\n return `${prefix}-${uid}`;\n}\n\nfunction f(name: string, kind: FileKind, sizeKb: number, modified: string, owner: string): FileItem {\n return { id: nextId(\"file\"), name, kind, sizeKb, modified, owner };\n}\n\nconst INITIAL_PROJECTS: Project[] = [\n {\n id: \"bagui\",\n name: \"Bag Ui\",\n folders: [\n {\n id: \"ux-research\",\n title: \"UX research\",\n notesCount: 233,\n sizeKb: 119706,\n variant: \"neutral\",\n tag: \"Product\",\n files: [\n f(\"Interview transcript — Maria K.\", \"doc\", 480, \"2024-12-01\", \"Sophia Lane\"),\n f(\"Interview transcript — Noah P.\", \"doc\", 512, \"2024-12-02\", \"Sophia Lane\"),\n f(\"Usability test notes\", \"doc\", 210, \"2024-11-28\", \"Lina Voss\"),\n f(\"Persona board\", \"image\", 3200, \"2024-11-20\", \"Marc Ade\"),\n f(\"Research plan Q4\", \"pdf\", 640, \"2024-11-15\", \"Sophia Lane\"),\n ],\n },\n {\n id: \"raw-data\",\n title: \"Raw data\",\n notesCount: 39,\n sizeKb: 184525,\n variant: \"blue\",\n tag: \"Analytics\",\n files: [\n f(\"Event export — Nov\", \"sheet\", 43008, \"2024-12-01\", \"Theo Kade\"),\n f(\"Event export — Dec\", \"sheet\", 38912, \"2024-12-05\", \"Theo Kade\"),\n f(\"Survey responses raw\", \"sheet\", 15360, \"2024-11-30\", \"Nora Bell\"),\n f(\"Session logs sample\", \"doc\", 1126, \"2024-11-22\", \"Theo Kade\"),\n ],\n },\n {\n id: \"processed-data\",\n title: \"Processed data\",\n notesCount: 21,\n sizeKb: 23962,\n variant: \"neutral\",\n tag: \"Analytics\",\n files: [\n f(\"Cohort table Q4\", \"sheet\", 6554, \"2024-12-03\", \"Nora Bell\"),\n f(\"Cleaned survey set\", \"sheet\", 4915, \"2024-11-30\", \"Nora Bell\"),\n f(\"Feature matrix v3\", \"sheet\", 3174, \"2024-11-25\", \"Theo Kade\"),\n ],\n },\n {\n id: \"reports\",\n title: \"Reports\",\n notesCount: 17,\n sizeKb: 501760,\n variant: \"neutral\",\n tag: \"Marketing\",\n files: [\n f(\"Q4 growth report\", \"pdf\", 2458, \"2024-12-06\", \"Sophia Lane\"),\n f(\"Board deck — December\", \"slide\", 18432, \"2024-12-04\", \"Marc Ade\"),\n f(\"Retention deep dive\", \"pdf\", 3994, \"2024-11-18\", \"Nora Bell\"),\n f(\"Weekly summary #48\", \"doc\", 220, \"2024-11-29\", \"Sophia Lane\"),\n ],\n },\n {\n id: \"data-visualization\",\n title: \"Data visualization\",\n notesCount: 96,\n sizeKb: 1362790,\n variant: \"neutral\",\n tag: \"Analytics\",\n files: [\n f(\"Funnel dashboard export\", \"image\", 4710, \"2024-12-02\", \"Marc Ade\"),\n f(\"Cohort heatmap\", \"image\", 2969, \"2024-11-27\", \"Nora Bell\"),\n f(\"Revenue trend chart\", \"image\", 1843, \"2024-11-21\", \"Marc Ade\"),\n f(\"Viz style guide\", \"pdf\", 1229, \"2024-11-10\", \"Lina Voss\"),\n ],\n },\n {\n id: \"ideas-insights\",\n title: \"Ideas and Insights\",\n notesCount: 103,\n sizeKb: 129331,\n variant: \"neutral\",\n tag: \"Product\",\n files: [\n f(\"Insight log — November\", \"doc\", 340, \"2024-11-30\", \"Lina Voss\"),\n f(\"Feature idea backlog\", \"doc\", 290, \"2024-11-26\", \"Marc Ade\"),\n f(\"Customer quotes bank\", \"doc\", 410, \"2024-11-19\", \"Sophia Lane\"),\n ],\n },\n ],\n },\n {\n id: \"kivu-event\",\n name: \"Kivu Event\",\n folders: [\n {\n id: \"customer-interviews\",\n title: \"Customer interviews\",\n notesCount: 58,\n sizeKb: 65843,\n variant: \"neutral\",\n tag: \"Product\",\n files: [\n f(\"Interview — Acme Co.\", \"doc\", 380, \"2024-12-01\", \"Lina Voss\"),\n f(\"Interview — Nimbus Inc.\", \"doc\", 402, \"2024-11-27\", \"Lina Voss\"),\n f(\"Synthesis notes\", \"doc\", 260, \"2024-11-24\", \"Sophia Lane\"),\n ],\n },\n {\n id: \"onboarding-flows\",\n title: \"Onboarding flows\",\n notesCount: 24,\n sizeKb: 39014,\n variant: \"neutral\",\n tag: \"Growth\",\n files: [\n f(\"Flow diagram v2\", \"image\", 2150, \"2024-11-29\", \"Marc Ade\"),\n f(\"Drop-off analysis\", \"sheet\", 5530, \"2024-11-22\", \"Theo Kade\"),\n f(\"Copy audit\", \"doc\", 180, \"2024-11-15\", \"Nora Bell\"),\n ],\n },\n {\n id: \"growth-experiments\",\n title: \"Growth experiments\",\n notesCount: 31,\n sizeKb: 53862,\n variant: \"blue\",\n tag: \"Growth\",\n files: [\n f(\"Experiment log Q4\", \"sheet\", 3686, \"2024-12-05\", \"Theo Kade\"),\n f(\"Pricing test results\", \"pdf\", 1434, \"2024-11-30\", \"Nora Bell\"),\n f(\"Referral loop notes\", \"doc\", 310, \"2024-11-20\", \"Sophia Lane\"),\n f(\"Landing page variants\", \"image\", 2765, \"2024-11-12\", \"Marc Ade\"),\n ],\n },\n ],\n },\n {\n id: \"codeai\",\n name: \"CodeAI\",\n folders: [\n {\n id: \"model-evals\",\n title: \"Model evals\",\n notesCount: 47,\n sizeKb: 215450,\n variant: \"blue\",\n tag: \"Engineering\",\n files: [\n f(\"Eval suite results v6\", \"sheet\", 8397, \"2024-12-04\", \"Theo Kade\"),\n f(\"Regression report\", \"pdf\", 1946, \"2024-11-28\", \"Nora Bell\"),\n f(\"Prompt failure cases\", \"doc\", 340, \"2024-11-21\", \"Lina Voss\"),\n ],\n },\n {\n id: \"prompt-library\",\n title: \"Prompt library\",\n notesCount: 19,\n sizeKb: 13107,\n variant: \"neutral\",\n tag: \"Engineering\",\n files: [\n f(\"System prompts v3\", \"doc\", 220, \"2024-12-02\", \"Marc Ade\"),\n f(\"Few-shot examples\", \"doc\", 190, \"2024-11-25\", \"Sophia Lane\"),\n f(\"Prompt style guide\", \"pdf\", 640, \"2024-11-10\", \"Lina Voss\"),\n ],\n },\n {\n id: \"release-notes\",\n title: \"Release notes\",\n notesCount: 12,\n sizeKb: 6246,\n variant: \"neutral\",\n tag: \"Engineering\",\n files: [\n f(\"v2.4 release notes\", \"doc\", 120, \"2024-12-06\", \"Marc Ade\"),\n f(\"v2.3 release notes\", \"doc\", 118, \"2024-11-18\", \"Marc Ade\"),\n f(\"Changelog archive\", \"pdf\", 980, \"2024-10-30\", \"Theo Kade\"),\n ],\n },\n ],\n },\n];\n\nconst INITIAL_NOTIFICATIONS: NotificationItem[] = [\n { id: 1, message: \"Marc Ade commented on Q4 growth report\", time: \"5m ago\", unread: true, link: { projectId: \"bagui\", folderId: \"reports\" } },\n { id: 2, message: \"New file added to Raw data\", time: \"1h ago\", unread: true, link: { projectId: \"bagui\", folderId: \"raw-data\" } },\n { id: 3, message: \"Theo Kade shared Event export — Dec\", time: \"3h ago\", unread: true, link: { projectId: \"bagui\", folderId: \"raw-data\" } },\n { id: 4, message: \"Weekly summary #48 is ready\", time: \"Yesterday\", unread: false, link: { projectId: \"bagui\", folderId: \"reports\" } },\n { id: 5, message: \"You were mentioned in Persona board\", time: \"2d ago\", unread: true, link: { projectId: \"bagui\", folderId: \"ux-research\" } },\n { id: 6, message: \"New experiment added to Growth experiments\", time: \"2d ago\", unread: false, link: { projectId: \"kivu-event\", folderId: \"growth-experiments\" } },\n];\n\nconst INITIAL_EMAILS: EmailItem[] = [\n { id: 1, from: \"Notion Digest\", subject: \"Your weekly activity summary\", snippet: \"Here's what happened across bagui Labs this week: 14 new files, 3 comments, and 2 folders updated across the team.\", time: \"9:14 AM\", unread: true },\n { id: 2, from: \"Marc Ade\", subject: \"Re: Board deck feedback\", snippet: \"Left a few comments on slide 6, mostly about the retention chart. Can we sync before Friday's review?\", time: \"Yesterday\", unread: true },\n { id: 3, from: \"Linear\", subject: \"3 issues assigned to you\", snippet: \"ENG-482, ENG-491 and ENG-503 are waiting on your review. Two are marked high priority.\", time: \"Yesterday\", unread: false },\n { id: 4, from: \"Theo Kade\", subject: \"Raw export is ready\", snippet: \"Pushed the December event export to Raw data, let me know if the schema looks right before we process it.\", time: \"Mon\", unread: false },\n { id: 5, from: \"Stripe\", subject: \"Your invoice is ready\", snippet: \"Your December invoice for the Kintsugi workspace is now available to download from your billing settings.\", time: \"Mon\", unread: false },\n];\n\nconst INITIAL_AUTOMATIONS: AutomationItem[] = [\n { id: 1, name: \"Weekly report digest\", description: \"Sends a summary of new files every Monday at 9:00 AM.\", trigger: \"Schedule\", enabled: true },\n { id: 2, name: \"Auto-tag raw uploads\", description: \"Applies the Analytics tag to anything dropped into Raw data.\", trigger: \"File added\", enabled: true },\n { id: 3, name: \"Slack notify on comment\", description: \"Posts to #bagui-labs whenever a file gets a new comment.\", trigger: \"Comment\", enabled: false },\n { id: 4, name: \"Archive stale drafts\", description: \"Moves drafts untouched for 30 days into Archive.\", trigger: \"Schedule\", enabled: false },\n { id: 5, name: \"Sync to data warehouse\", description: \"Pushes processed sheets to the analytics warehouse nightly.\", trigger: \"Schedule\", enabled: true },\n];\n\nconst SECONDARY_NAV: { key: NavKey; icon: React.ComponentType<{ className?: string }>; label: string }[] = [\n { key: \"notes\", icon: FileText, label: \"Notes\" },\n { key: \"reports\", icon: BarChart3, label: \"Reports\" },\n { key: \"emails\", icon: Mail, label: \"Emails\" },\n { key: \"automation\", icon: Workflow, label: \"Automation\" },\n];\n\nconst PROJECT_TABS = [\n { id: \"kivu-event\", label: \"Kivu Event\" },\n { id: \"codeai\", label: \"CodeAI\" },\n { id: \"bagui\", label: \"Bag Ui\" },\n];\n\nconst CURRENT_USER = \"Anelka Bag\";\n\n/* ================================================================== */\n/* Small atoms */\n/* ================================================================== */\n\nfunction AppLogo() {\n const isDark = useIsDark();\n return (\n \n );\n}\n\nfunction Avatar({ seed, src, className }: { seed: string; src?: string; className?: string }) {\n return (\n \n );\n}\n\nfunction Switch({ checked, onChange, label }: { checked: boolean; onChange: () => void; label?: string }) {\n return (\n \n \n \n );\n}\n\nfunction TagChip({\n tag,\n active,\n onClick,\n}: {\n tag: TagName;\n active?: boolean;\n onClick?: () => void;\n}) {\n return (\n \n \n {tag}\n \n );\n}\n\nfunction ToastStack({ toasts }: { toasts: { id: number; message: string }[] }) {\n return (\n
\n \n {toasts.map((t) => (\n \n \n {t.message}\n \n ))}\n \n
\n );\n}\n\n/* Generic dropdown shell: backdrop + animated panel */\nfunction Dropdown({\n open,\n onClose,\n anchorClassName,\n children,\n}: {\n open: boolean;\n onClose: () => void;\n anchorClassName: string;\n children: React.ReactNode;\n}) {\n if (!open) return null;\n return (\n <>\n
\n \n {children}\n \n \n );\n}\n\n/* ================================================================== */\n/* Theme toggle */\n/* ================================================================== */\n\nfunction ThemeToggle({\n isDark,\n onToggle,\n collapsed,\n}: {\n isDark: boolean;\n onToggle: () => void;\n collapsed?: boolean;\n}) {\n return (\n \n \n \n {isDark ? (\n \n \n \n ) : (\n \n \n \n )}\n \n \n {!collapsed && {isDark ? \"Dark mode\" : \"Light mode\"}}\n {!collapsed && (\n \n \n \n )}\n \n );\n}\n\n/* ================================================================== */\n/* Nav item */\n/* ================================================================== */\n\nconst NavItem = React.memo(function NavItem({\n icon: Icon,\n label,\n active,\n collapsed,\n onClick,\n badge,\n}: {\n icon: React.ComponentType<{ className?: string }>;\n label: string;\n active?: boolean;\n collapsed?: boolean;\n onClick?: () => void;\n badge?: number;\n}) {\n return (\n \n \n {!collapsed && {label}}\n {!!badge && badge > 0 && (\n \n {badge}\n \n )}\n \n );\n});\n\n/* ================================================================== */\n/* Sidebar */\n/* ================================================================== */\n\nfunction Sidebar({\n collapsed,\n onToggleCollapsed,\n projects,\n activeProjectId,\n onSelectProject,\n projectsExpanded,\n onToggleProjectsExpanded,\n activeNav,\n onGoHome,\n onGoNav,\n notifications,\n notificationsOpen,\n onToggleNotifications,\n onMarkAllRead,\n onNotificationClick,\n unreadCount,\n isDark,\n onToggleDark,\n}: {\n collapsed: boolean;\n onToggleCollapsed: () => void;\n projects: Project[];\n activeProjectId: string;\n onSelectProject: (id: string) => void;\n projectsExpanded: boolean;\n onToggleProjectsExpanded: () => void;\n activeNav: NavKey | null;\n onGoHome: () => void;\n onGoNav: (key: NavKey) => void;\n notifications: NotificationItem[];\n notificationsOpen: boolean;\n onToggleNotifications: () => void;\n onMarkAllRead: () => void;\n onNotificationClick: (n: NotificationItem) => void;\n unreadCount: number;\n isDark: boolean;\n onToggleDark: () => void;\n}) {\n return (\n \n
\n {!collapsed && (\n
\n \n
\n BagUi\n

Open Source Ui Blocks

\n
\n
\n )}\n {collapsed && }\n {!collapsed && (\n \n \n \n )}\n
\n\n {collapsed && (\n \n \n \n )}\n\n \n\n
\n \n \n
\n \n \n {notificationsOpen && (\n \n
\n Notifications\n \n
\n
\n {notifications.map((n) => (\n onNotificationClick(n)}\n className=\"flex w-full items-start gap-2.5 px-3.5 py-2.5 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/60\"\n >\n \n \n \n {n.message}\n \n {n.time}\n \n \n ))}\n
\n \n )}\n \n
\n\n
\n\n
\n \n {!collapsed && (\n <>\n
\n

{CURRENT_USER}

\n

ceo@bagui.pro

\n
\n \n \n )}\n
\n
\n \n );\n}\n\n/* ================================================================== */\n/* Top bar */\n/* ================================================================== */\n\nfunction TopBar({\n projectName,\n folderTitle,\n onBack,\n onGoProjectRoot,\n showBack,\n onShare,\n shareOpen,\n onCopyLink,\n}: {\n projectName: string;\n folderTitle: string | null;\n onBack: () => void;\n onGoProjectRoot: () => void;\n showBack: boolean;\n onShare: () => void;\n shareOpen: boolean;\n onCopyLink: () => void;\n}) {\n const [moreOpen, setMoreOpen] = useState(false);\n return (\n
\n
\n
\n \n \n \n
\n \n \n \n \n {projectName}\n \n {folderTitle && (\n <>\n \n {folderTitle}\n \n )}\n
\n
\n\n
\n \n
\n \n \n {shareOpen && (\n \n

Anyone with the link can view this project.

\n
\n \n bagui.app/fullscreen/dashboard-folder\n \n Copy\n \n
\n \n )}\n \n
\n
\n setMoreOpen((v) => !v)}\n className=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n >\n \n \n \n {moreOpen && (\n setMoreOpen(false)} anchorClassName=\"right-0 top-[calc(100%+6px)] w-[190px] py-1.5\">\n \n \n \n \n )}\n \n
\n
\n
\n
\n );\n}\n\n/* ================================================================== */\n/* Folder tile */\n/* ================================================================== */\n\nconst FolderTile = React.memo(function FolderTile({\n folder,\n onOpen,\n}: {\n folder: Folder;\n onOpen: (id: string) => void;\n}) {\n const [hovered, setHovered] = useState(false);\n const active = folder.variant === \"black\";\n return (\n \n onOpen(folder.id)}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n whileHover={{ y: -2 }}\n whileTap={{ scale: 0.98 }}\n className=\"inline-flex cursor-pointer rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900/40 dark:focus-visible:ring-neutral-100/40 mt-4\"\n >\n \n \n\n
\n
\n

\n {folder.title}\n

\n \n {folder.tag}\n \n
\n
\n

\n {folder.notesCount} notes\n

\n

\n {formatSize(folder.sizeKb)}\n

\n
\n
\n \n );\n});\n\n/* ================================================================== */\n/* File row / card */\n/* ================================================================== */\n\nconst FileRow = React.memo(function FileRow({\n file,\n selected,\n onSelect,\n onDelete,\n onRename,\n onDownload,\n}: {\n file: FileItem;\n selected: boolean;\n onSelect: (file: FileItem) => void;\n onDelete: (id: string) => void;\n onRename: (file: FileItem) => void;\n onDownload: (file: FileItem) => void;\n}) {\n const [menuOpen, setMenuOpen] = useState(false);\n const meta = KIND_META[file.kind];\n const Icon = meta.icon;\n return (\n onSelect(file)}\n className={cn(\n \"group flex cursor-pointer items-center gap-3 rounded-xl border px-3.5 py-2.5 transition-colors\",\n selected\n ? \"border-neutral-900/15 bg-neutral-50 dark:border-neutral-100/15 dark:bg-neutral-900\"\n : \"border-transparent hover:bg-neutral-50 dark:hover:bg-neutral-900/70\"\n )}\n >\n \n \n \n
\n

{file.name}

\n

\n {meta.label} · {formatSize(file.sizeKb)} · {formatDate(file.modified)}\n

\n
\n \n
\n {\n e.stopPropagation();\n setMenuOpen((v) => !v);\n }}\n className=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-neutral-400 opacity-0 hover:bg-neutral-200/60 hover:text-neutral-700 group-hover:opacity-100 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200\"\n >\n \n \n \n {menuOpen && (\n setMenuOpen(false)} anchorClassName=\"right-0 top-[calc(100%+4px)] w-[170px] py-1.5\">\n {\n e.stopPropagation();\n onRename(file);\n setMenuOpen(false);\n }}\n className=\"flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-[13px] text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n >\n Rename\n \n {\n e.stopPropagation();\n onDownload(file);\n setMenuOpen(false);\n }}\n className=\"flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-[13px] text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n >\n Download\n \n {\n e.stopPropagation();\n onDelete(file.id);\n setMenuOpen(false);\n }}\n className=\"flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-[13px] text-rose-500 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10\"\n >\n Delete\n \n \n )}\n \n
\n \n );\n});\n\n/* ================================================================== */\n/* Search + sort toolbar (shared) */\n/* ================================================================== */\n\nfunction Toolbar({\n search,\n onSearch,\n placeholder,\n sortBy,\n onSortChange,\n onNewDraft,\n newDraftLabel,\n}: {\n search: string;\n onSearch: (v: string) => void;\n placeholder: string;\n sortBy: SortKey;\n onSortChange: (v: SortKey) => void;\n onNewDraft?: () => void;\n newDraftLabel?: string;\n}) {\n const [sortOpen, setSortOpen] = useState(false);\n const sortLabel: Record = { name: \"Name\", size: \"Size\", date: \"Date\" };\n return (\n
\n
\n \n onSearch(e.target.value)}\n placeholder={placeholder}\n className=\"w-full bg-transparent text-[13.5px] text-neutral-700 placeholder:text-neutral-400 focus:outline-none dark:text-neutral-200 dark:placeholder:text-neutral-600\"\n />\n {search && (\n \n )}\n
\n
\n setSortOpen((v) => !v)}\n className=\"flex cursor-pointer items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2.5 text-[13.5px] text-neutral-600 hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n >\n \n {sortLabel[sortBy]}\n \n \n {sortOpen && (\n setSortOpen(false)} anchorClassName=\"right-0 top-[calc(100%+6px)] w-[150px] py-1.5\">\n {(Object.keys(sortLabel) as SortKey[]).map((key) => (\n {\n onSortChange(key);\n setSortOpen(false);\n }}\n className={cn(\n \"flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-[13px] hover:bg-neutral-50 dark:hover:bg-neutral-800\",\n sortBy === key ? \"font-medium text-neutral-900 dark:text-neutral-50\" : \"text-neutral-600 dark:text-neutral-400\"\n )}\n >\n {sortLabel[key]}\n \n ))}\n \n )}\n \n
\n {onNewDraft && (\n \n \n {newDraftLabel ?? \"New draft\"}\n \n )}\n
\n );\n}\n\n/* ================================================================== */\n/* Home view */\n/* ================================================================== */\n\nfunction HomeView({\n projectName,\n folders,\n search,\n onSearch,\n sortBy,\n onSortChange,\n tagFilter,\n onOpenFolder,\n onNewDraft,\n}: {\n projectName: string;\n folders: Folder[];\n search: string;\n onSearch: (v: string) => void;\n sortBy: SortKey;\n onSortChange: (v: SortKey) => void;\n tagFilter: TagName | null;\n onOpenFolder: (id: string) => void;\n onNewDraft: () => void;\n}) {\n const visible = useMemo(() => {\n let list = folders;\n if (tagFilter) list = list.filter((f) => f.tag === tagFilter);\n if (search.trim()) {\n const q = search.trim().toLowerCase();\n list = list.filter((f) => f.title.toLowerCase().includes(q));\n }\n return sortFolders(list, sortBy);\n }, [folders, search, sortBy, tagFilter]);\n\n return (\n
\n
\n

{projectName}

\n
\n\n \n\n {visible.length === 0 ? (\n
\n \n

Nothing matches your search or filter.

\n
\n ) : (\n \n \n {visible.map((folder) => (\n \n ))}\n \n \n )}\n
\n );\n}\n\n/* ================================================================== */\n/* Folder detail view */\n/* ================================================================== */\n\nfunction FolderDetailView({\n folder,\n search,\n onSearch,\n sortBy,\n onSortChange,\n selectedFileId,\n onSelectFile,\n onDeleteFile,\n onRenameFile,\n onDownloadFile,\n onNewDraft,\n}: {\n folder: Folder;\n search: string;\n onSearch: (v: string) => void;\n sortBy: SortKey;\n onSortChange: (v: SortKey) => void;\n selectedFileId: string | null;\n onSelectFile: (file: FileItem) => void;\n onDeleteFile: (id: string) => void;\n onRenameFile: (file: FileItem) => void;\n onDownloadFile: (file: FileItem) => void;\n onNewDraft: () => void;\n}) {\n const isDark = useIsDark();\n const palette = (isDark ? folderPalettesDark : folderPalettes)[folder.variant];\n\n const visible = useMemo(() => {\n let list = folder.files;\n if (search.trim()) {\n const q = search.trim().toLowerCase();\n list = list.filter((file) => file.name.toLowerCase().includes(q));\n }\n return sortFiles(list, sortBy);\n }, [folder.files, search, sortBy]);\n\n return (\n
\n
\n
\n
\n
\n
\n \n
\n
\n

{folder.title}

\n

{folder.files.length} files

\n
\n
\n
\n
\n\n
\n \n {folder.tag}\n \n

{formatSize(folder.sizeKb)}

\n
\n
\n\n \n\n {visible.length === 0 ? (\n
\n \n

No files match your search.

\n
\n ) : (\n \n \n {visible.map((file) => (\n onSelectFile(file)}\n whileHover={{ y: -2 }}\n whileTap={{ scale: 0.98 }}\n className={cn(\n \"group flex h-full flex-col justify-between rounded-[24px] border border-neutral-200/80 bg-white p-4 text-left transition hover:-translate-y-1 hover:shadow-[0_12px_40px_-24px_rgba(15,23,42,0.35)] focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900/40 dark:border-neutral-800/80 dark:bg-neutral-900 dark:hover:shadow-[0_12px_40px_-24px_rgba(0,0,0,0.8)] dark:focus-visible:ring-neutral-100/30\",\n file.id === selectedFileId ? \"border-neutral-900/30 bg-neutral-50 dark:border-neutral-100/20 dark:bg-neutral-800/70\" : \"border-transparent\"\n )}\n >\n
\n
\n
\n \n
\n
\n

{file.name}

\n

{formatSize(file.sizeKb)}

\n
\n
\n {file.kind}\n
\n\n
\n {formatDate(file.modified)}\n {folder.tag}\n
\n \n ))}\n \n \n )}\n
\n );\n}\n\n/* ================================================================== */\n/* Notes / Reports views (derived from files across the project) */\n/* ================================================================== */\n\nfunction FlatFileListView({\n title,\n emptyLabel,\n files,\n search,\n onSearch,\n selectedFileId,\n onSelectFile,\n onDownloadFile,\n}: {\n title: string;\n emptyLabel: string;\n files: (FileItem & { folderTitle: string })[];\n search: string;\n onSearch: (v: string) => void;\n selectedFileId: string | null;\n onSelectFile: (file: FileItem, folderTitle: string) => void;\n onDownloadFile: (file: FileItem) => void;\n}) {\n const visible = useMemo(() => {\n if (!search.trim()) return files;\n const q = search.trim().toLowerCase();\n return files.filter((f) => f.name.toLowerCase().includes(q) || f.folderTitle.toLowerCase().includes(q));\n }, [files, search]);\n\n return (\n
\n
\n

{title}

\n
\n\n
\n \n onSearch(e.target.value)}\n placeholder={`Search ${title.toLowerCase()}`}\n className=\"w-full bg-transparent text-[13.5px] text-neutral-700 placeholder:text-neutral-400 focus:outline-none dark:text-neutral-200 dark:placeholder:text-neutral-600\"\n />\n
\n\n {visible.length === 0 ? (\n
\n

{emptyLabel}

\n
\n ) : (\n
\n {visible.map((file) => {\n const meta = KIND_META[file.kind];\n const Icon = meta.icon;\n const selected = file.id === selectedFileId;\n return (\n onSelectFile(file, file.folderTitle)}\n className={cn(\n \"group flex cursor-pointer items-center gap-3 rounded-xl border px-3.5 py-2.5\",\n selected\n ? \"border-neutral-900/15 bg-neutral-50 dark:border-neutral-100/15 dark:bg-neutral-900\"\n : \"border-transparent hover:bg-neutral-50 dark:hover:bg-neutral-900/70\"\n )}\n >\n \n \n \n
\n

{file.name}

\n

\n {file.folderTitle} · {formatSize(file.sizeKb)} · {formatDate(file.modified)}\n

\n
\n {\n e.stopPropagation();\n onDownloadFile(file);\n }}\n className=\"flex cursor-pointer h-7 w-7 shrink-0 items-center justify-center rounded-md text-neutral-400 opacity-0 hover:bg-neutral-200/60 hover:text-neutral-700 group-hover:opacity-100 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200\"\n >\n \n \n \n );\n })}\n
\n )}\n
\n );\n}\n\n/* ================================================================== */\n/* Emails view */\n/* ================================================================== */\n\nfunction EmailsView({\n emails,\n expandedId,\n onToggleExpand,\n}: {\n emails: EmailItem[];\n expandedId: number | null;\n onToggleExpand: (id: number) => void;\n}) {\n return (\n
\n
\n

Emails

\n
\n
\n {emails.map((email) => {\n const open = expandedId === email.id;\n return (\n onToggleExpand(email.id)}\n >\n
\n \n {email.unread ? (\n \n ) : (\n \n )}\n \n
\n
\n

\n {email.from}\n

\n {email.time}\n
\n

\n {email.subject}\n

\n
\n
\n \n {open && (\n \n

{email.snippet}

\n \n )}\n \n \n );\n })}\n
\n
\n );\n}\n\n/* ================================================================== */\n/* Automation view */\n/* ================================================================== */\n\nfunction AutomationView({\n automations,\n onToggle,\n}: {\n automations: AutomationItem[];\n onToggle: (id: number) => void;\n}) {\n return (\n
\n
\n

Automation

\n
\n
\n {automations.map((a) => (\n \n \n {a.trigger === \"Schedule\" ? (\n \n ) : (\n \n )}\n \n
\n

{a.name}

\n

{a.description}

\n
\n {a.trigger}\n onToggle(a.id)} label={a.name} />\n
\n ))}\n
\n
\n );\n}\n\n/* ================================================================== */\n/* Info panel */\n/* ================================================================== */\n\nfunction StatCard({ label, value, progress, barColor }: { label: string; value: string; progress: number; barColor: string }) {\n return (\n
\n
\n {label}\n \n
\n

{value}

\n
\n \n
\n
\n );\n}\n\nfunction InfoPanel({\n selected,\n activeTagFilter,\n onToggleTag,\n allTags,\n pinnedFolders,\n onOpenPinned,\n storageSummary,\n}: {\n selected: SelectedItem;\n activeTagFilter: TagName | null;\n onToggleTag: (tag: TagName) => void;\n allTags: TagName[];\n pinnedFolders: Folder[];\n onOpenPinned: (id: string) => void;\n storageSummary: { documentsKb: number; imagesKb: number; totalKb: number };\n}) {\n const properties = useMemo(() => {\n if (!selected) return null;\n if (selected.type === \"folder\") {\n return [\n { label: \"Size\", value: formatSize(selected.folder.sizeKb) },\n { label: \"Files\", value: `${selected.folder.files.length}` },\n { label: \"Tag\", value: selected.folder.tag },\n ];\n }\n return [\n { label: \"Size\", value: formatSize(selected.file.sizeKb) },\n { label: \"Modified\", value: formatDate(selected.file.modified) },\n { label: \"Owner\", value: selected.file.owner },\n ];\n }, [selected]);\n\n const docProgress = Math.min(100, Math.round((storageSummary.documentsKb / Math.max(storageSummary.totalKb, 1)) * 100));\n const imageProgress = Math.min(100, Math.round((storageSummary.imagesKb / Math.max(storageSummary.totalKb, 1)) * 100));\n\n return (\n \n );\n}\n\n/* ================================================================== */\n/* Root */\n/* ================================================================== */\n\nexport default function baguiDashboard() {\n const [projects, setProjects] = useState(INITIAL_PROJECTS);\n const [activeProjectId, setActiveProjectId] = useState(\"bagui\");\n const [projectsExpanded, setProjectsExpanded] = useState(true);\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n\n const [activeNav, setActiveNav] = useState(\"home\");\n const [openFolderId, setOpenFolderId] = useState(null);\n const [selectedItem, setSelectedItem] = useState(null);\n\n const [search, setSearch] = useState(\"\");\n const [sortBy, setSortBy] = useState(\"name\");\n const [activeTagFilter, setActiveTagFilter] = useState(null);\n\n const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS);\n const [notificationsOpen, setNotificationsOpen] = useState(false);\n\n const [emails, setEmails] = useState(INITIAL_EMAILS);\n const [expandedEmailId, setExpandedEmailId] = useState(null);\n\n const [automations, setAutomations] = useState(INITIAL_AUTOMATIONS);\n\n const [shareOpen, setShareOpen] = useState(false);\n const [toasts, setToasts] = useState<{ id: number; message: string }[]>([]);\n const toastIdRef = useRef(0);\n\n const [isDark, setIsDark] = useState(false);\n const toggleDark = useCallback(() => setIsDark((v) => !v), []);\n\n const pushToast = useCallback((message: string) => {\n const id = ++toastIdRef.current;\n setToasts((prev) => [...prev, { id, message }]);\n setTimeout(() => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, 2600);\n }, []);\n\n const activeProject = useMemo(\n () => projects.find((p) => p.id === activeProjectId)!,\n [projects, activeProjectId]\n );\n const openFolder = useMemo(\n () => (openFolderId ? activeProject.folders.find((fl) => fl.id === openFolderId) ?? null : null),\n [activeProject, openFolderId]\n );\n\n const unreadCount = useMemo(() => notifications.filter((n) => n.unread).length, [notifications]);\n\n const allFilesFlat = useMemo(\n () =>\n activeProject.folders.flatMap((folder) =>\n folder.files.map((file) => ({ ...file, folderTitle: folder.title }))\n ),\n [activeProject]\n );\n\n const updateFolders = useCallback(\n (projectId: string, updater: (folders: Folder[]) => Folder[]) => {\n setProjects((prev) =>\n prev.map((p) => (p.id === projectId ? { ...p, folders: updater(p.folders) } : p))\n );\n },\n []\n );\n\n /* ---- navigation ---- */\n\n const resetViewState = useCallback(() => {\n setSearch(\"\");\n setSelectedItem(null);\n }, []);\n\n const selectProject = useCallback(\n (id: string) => {\n setActiveProjectId(id);\n setOpenFolderId(null);\n setActiveNav(\"home\");\n setActiveTagFilter(null);\n resetViewState();\n },\n [resetViewState]\n );\n\n const goHome = useCallback(() => {\n setActiveNav(\"home\");\n setOpenFolderId(null);\n resetViewState();\n }, [resetViewState]);\n\n const goNav = useCallback(\n (key: NavKey) => {\n setActiveNav(key);\n setOpenFolderId(null);\n resetViewState();\n },\n [resetViewState]\n );\n\n const openFolderById = useCallback(\n (id: string) => {\n const folder = activeProject.folders.find((fl) => fl.id === id);\n setOpenFolderId(id);\n setSearch(\"\");\n if (folder) setSelectedItem({ type: \"folder\", folder });\n },\n [activeProject]\n );\n\n const closeFolder = useCallback(() => {\n setOpenFolderId(null);\n resetViewState();\n }, [resetViewState]);\n\n /* ---- selection ---- */\n\n const selectFile = useCallback((file: FileItem, folderTitle: string, folderTag: TagName) => {\n setSelectedItem({ type: \"file\", file, folderTitle, folderTag });\n }, []);\n\n /* ---- file / folder mutations ---- */\n\n const deleteFile = useCallback(\n (folderId: string, fileId: string) => {\n updateFolders(activeProjectId, (folders) =>\n folders.map((fl) =>\n fl.id === folderId\n ? { ...fl, files: fl.files.filter((file) => file.id !== fileId), notesCount: Math.max(0, fl.notesCount - 1) }\n : fl\n )\n );\n setSelectedItem((prev) => (prev?.type === \"file\" && prev.file.id === fileId ? null : prev));\n pushToast(\"File deleted\");\n },\n [activeProjectId, updateFolders, pushToast]\n );\n\n const renameFile = useCallback(\n (_file: FileItem) => {\n pushToast(\"Renaming is a demo action — hook this up to your API\");\n },\n [pushToast]\n );\n\n const downloadFile = useCallback(\n (file: FileItem) => {\n pushToast(`Downloading \"${file.name}\"`);\n },\n [pushToast]\n );\n\n const addDraft = useCallback(() => {\n const targetFolder = openFolder ?? activeProject.folders[0];\n if (!targetFolder) return;\n const draft: FileItem = {\n id: nextId(\"file\"),\n name: \"Untitled draft\",\n kind: \"doc\",\n sizeKb: 12,\n modified: todayIso(),\n owner: CURRENT_USER,\n };\n updateFolders(activeProjectId, (folders) =>\n folders.map((fl) =>\n fl.id === targetFolder.id ? { ...fl, files: [draft, ...fl.files], notesCount: fl.notesCount + 1 } : fl\n )\n );\n if (!openFolder) {\n setActiveNav(\"notes\");\n setOpenFolderId(null);\n }\n setSelectedItem({ type: \"file\", file: draft, folderTitle: targetFolder.title, folderTag: targetFolder.tag });\n pushToast(`Draft added to ${targetFolder.title}`);\n }, [openFolder, activeProject, activeProjectId, updateFolders, pushToast]);\n\n /* ---- tags ---- */\n\n const allTags = useMemo(() => {\n const set = new Set();\n activeProject.folders.forEach((fl) => set.add(fl.tag));\n return Array.from(set);\n }, [activeProject]);\n\n const toggleTagFilter = useCallback((tag: TagName) => {\n setActiveTagFilter((prev) => (prev === tag ? null : tag));\n }, []);\n\n /* ---- notifications ---- */\n\n const toggleNotifications = useCallback(() => setNotificationsOpen((v) => !v), []);\n\n const markAllRead = useCallback(() => {\n setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })));\n }, []);\n\n const handleNotificationClick = useCallback(\n (n: NotificationItem) => {\n setNotifications((prev) => prev.map((item) => (item.id === n.id ? { ...item, unread: false } : item)));\n setNotificationsOpen(false);\n if (n.link) {\n if (n.link.projectId !== activeProjectId) setActiveProjectId(n.link.projectId);\n setActiveNav(\"home\");\n setOpenFolderId(n.link.folderId);\n const proj = projects.find((p) => p.id === n.link!.projectId);\n const folder = proj?.folders.find((fl) => fl.id === n.link!.folderId);\n if (folder) setSelectedItem({ type: \"folder\", folder });\n setSearch(\"\");\n }\n },\n [activeProjectId, projects]\n );\n\n /* ---- share ---- */\n\n const toggleShare = useCallback(() => setShareOpen((v) => !v), []);\n const copyLink = useCallback(() => {\n if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n navigator.clipboard.writeText(\"https://www.bagui.app/fullscreen/dashboard-folder\").catch(() => {});\n }\n setShareOpen(false);\n pushToast(\"Link copied to clipboard\");\n }, [pushToast]);\n\n /* ---- emails / automation ---- */\n\n const toggleEmailExpand = useCallback((id: number) => {\n setEmails((prev) => prev.map((e) => (e.id === id ? { ...e, unread: false } : e)));\n setExpandedEmailId((prev) => (prev === id ? null : id));\n }, []);\n\n const toggleAutomation = useCallback((id: number) => {\n setAutomations((prev) =>\n prev.map((a) => {\n if (a.id !== id) return a;\n pushToast(`${a.name} ${a.enabled ? \"disabled\" : \"enabled\"}`);\n return { ...a, enabled: !a.enabled };\n })\n );\n }, [pushToast]);\n\n const pinnedFolders = useMemo(() => activeProject.folders.slice(0, 3), [activeProject]);\n\n const storageSummary = useMemo(() => {\n const files = activeProject.folders.flatMap((folder) => folder.files);\n return summarizeStorage(files);\n }, [activeProject]);\n\n return (\n \n \n setSidebarCollapsed((v) => !v)}\n projects={PROJECT_TABS.map((t) => ({ id: t.id, name: t.label, folders: [] }))}\n activeProjectId={activeProjectId}\n onSelectProject={selectProject}\n projectsExpanded={projectsExpanded}\n onToggleProjectsExpanded={() => setProjectsExpanded((v) => !v)}\n activeNav={openFolderId ? null : activeNav}\n onGoHome={goHome}\n onGoNav={goNav}\n notifications={notifications}\n notificationsOpen={notificationsOpen}\n onToggleNotifications={toggleNotifications}\n onMarkAllRead={markAllRead}\n onNotificationClick={handleNotificationClick}\n unreadCount={unreadCount}\n isDark={isDark}\n onToggleDark={toggleDark}\n />\n\n
\n \n\n
\n
\n \n \n {openFolder ? (\n selectFile(file, openFolder.title, openFolder.tag)}\n onDeleteFile={(id) => deleteFile(openFolder.id, id)}\n onRenameFile={renameFile}\n onDownloadFile={downloadFile}\n onNewDraft={addDraft}\n />\n ) : activeNav === \"home\" ? (\n \n ) : activeNav === \"notes\" ? (\n file.kind === \"doc\")}\n search={search}\n onSearch={setSearch}\n selectedFileId={selectedItem?.type === \"file\" ? selectedItem.file.id : null}\n onSelectFile={(file, folderTitle) => {\n const folder = activeProject.folders.find((fl) => fl.title === folderTitle);\n selectFile(file, folderTitle, folder?.tag ?? \"Product\");\n }}\n onDownloadFile={downloadFile}\n />\n ) : activeNav === \"reports\" ? (\n file.kind === \"pdf\" || file.kind === \"slide\")}\n search={search}\n onSearch={setSearch}\n selectedFileId={selectedItem?.type === \"file\" ? selectedItem.file.id : null}\n onSelectFile={(file, folderTitle) => {\n const folder = activeProject.folders.find((fl) => fl.title === folderTitle);\n selectFile(file, folderTitle, folder?.tag ?? \"Marketing\");\n }}\n onDownloadFile={downloadFile}\n />\n ) : activeNav === \"emails\" ? (\n \n ) : (\n \n )}\n \n \n
\n\n {\n setActiveNav(\"home\");\n openFolderById(id);\n }}\n />\n
\n
\n\n \n
\n \n );\n}", "type": "registry:block", "target": "components/Dashboard/dashboard-folder.tsx" } ], "type": "registry:block" }