/* ========================================================================= * CTWCAD — Context menu, upload manager, toasts, search, notifications, * keyboard shortcuts cheat sheet. * * (The pre-wave-6 CommandPalette has been retired in favor of * GlobalSearchPalette below — file/project search lives there now. * Top-bar Cmd+K still binds to the same overlay; nothing else changed.) * =======================================================================*/ function ContextMenu({ menu, onClose }) { const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; if (!menu) return null; const fileItems = [ { id: "open", icon: "eye", label: "Preview" }, { id: "open-cad", icon: "external-link", label: "Open in CTWCAD" }, { id: "download", icon: "download", label: "Download" }, { id: "share", icon: "share-2", label: "Share…" }, { divider: true }, { id: "rename", icon: "edit-3", label: "Rename" }, { id: "move", icon: "folder-input", label: "Move…" }, { id: "duplicate", icon: "copy", label: "Duplicate" }, { divider: true }, { id: "trash", icon: "trash-2", label: "Move to Trash", danger: true }, ]; // Items shown when right-clicking a file that's already in the trash. const trashedFileItems = [ { id: "open", icon: "eye", label: "Preview" }, { id: "download", icon: "download", label: "Download" }, { divider: true }, { id: "restore", icon: "undo-2", label: "Restore" }, { id: "delete-forever", icon: "trash-2", label: "Delete forever", danger: true }, ]; // Items shown when right-clicking a version row in the file drawer. const versionItems = [ { id: "download-version", icon: "download", label: "Download this version" }, { id: "restore-version", icon: "undo-2", label: "Make this current" }, ]; const folderItems = [ { id: "open", icon: "folder-open", label: "Open" }, { id: "new-folder", icon: "folder-plus", label: "New folder inside" }, { id: "upload", icon: "upload", label: "Upload here…" }, { divider: true }, { id: "rename", icon: "edit-3", label: "Rename" }, { id: "move", icon: "folder-input", label: "Move…" }, { id: "duplicate", icon: "copy", label: "Duplicate folder" }, { id: "share", icon: "share-2", label: "Share folder…" }, { divider: true }, { id: "download", icon: "download", label: "Download as ZIP" }, { id: "archive", icon: "archive", label: "Archive" }, { id: "trash", icon: "trash-2", label: "Move to Trash", danger: true }, ]; // Pin label flips based on current state. The action id stays "pin" — // app.jsx's handler reads !item.pinned and toggles, so the same id // covers both directions. Icon swap (pin / pin-off) is just visual. const projectIsPinned = !!menu?.project?.pinned; const projectItems = [ { id: "open", icon: "folder-open", label: "Open project" }, { id: "new-folder", icon: "folder-plus", label: "New folder" }, { id: "upload", icon: "upload", label: "Upload to project…" }, { divider: true }, { id: "rename", icon: "edit-3", label: "Rename project" }, { id: "members", icon: "users", label: "Manage members…" }, { id: "settings", icon: "settings", label: "Project settings" }, { id: "pin", icon: projectIsPinned ? "pin-off" : "pin", label: projectIsPinned ? "Unpin from dashboard" : "Pin to dashboard" }, { divider: true }, { id: "duplicate", icon: "copy", label: "Duplicate project" }, { id: "download", icon: "download", label: "Export as ZIP" }, { id: "archive", icon: "archive", label: "Archive project", danger: true }, ]; const items = menu.kind === "folder" ? folderItems : menu.kind === "project" ? projectItems : menu.kind === "trashed-file" ? trashedFileItems : menu.kind === "version" ? versionItems : fileItems; const title = menu.kind === "folder" ? menu.folder?.name : menu.kind === "project" ? menu.project?.name : menu.kind === "version" ? `Version ${menu.version?.number ?? "?"}` : menu.file?.name; const titleIcon = menu.kind === "folder" ? "folder" : menu.kind === "project" ? "box" : menu.kind === "version" ? "git-commit" : menu.kind === "trashed-file" ? "trash-2" : "file"; const dispatch = (it) => { if (it.divider || !it.id) return; window.dispatchEvent(new CustomEvent("ctwcad:item-action", { detail: { action: it.id, kind: menu.kind || "file", file: menu.file, folder: menu.folder, project: menu.project, version: menu.version, }, })); onClose(); }; return ( {title && ( <>
{title}
)} {items.map((it, i) => it.divider ?
: ( ))} ); } function UploadManager({ uploads, onDismiss }) { const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; const [open, setOpen] = useState(true); if (!uploads || uploads.length === 0) return null; const done = uploads.every(u => u.progress >= 1); return (
setOpen(o => !o)}> {done ? "Uploads complete" : `Uploading ${uploads.filter(u => u.progress < 1).length} of ${uploads.length}`}
{done && }
{open && ( {uploads.map(u => { const done = u.progress >= 1; const eta = (typeof u.etaSeconds === "number") ? u.etaSeconds : null; const speedTxt = (u.speedBps > 0) ? fmtBytes(u.speedBps) + "/s" : null; const etaTxt = done ? "done" : (eta !== null ? (eta >= 60 ? `${Math.floor(eta/60)}m ${eta%60}s left` : `${eta}s left`) : "estimating…"); return (
  • {u.name}
    {Math.round(u.progress * 100)}% {!done && speedTxt && ·} {!done && speedTxt && {speedTxt}} · {etaTxt}
    • ); })}     )}     ); } function Toasts({ items, onDismiss }) { const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; return (
    {items.map((t) => ( {t.message} onDismiss(t.id)} style={{ transformOrigin: "center", transform: "rotate(-90deg)" }} /> ))}
    ); } /* Sticky bottom action bar surfaced when the user has multi-selected files * or folders in the browser. Bulk actions fan out to per-item dispatches * via ctwcad:item-action so they reuse the existing handlers in app.jsx * (folder-changed events, toasts, error handling are all free). * Animates in from below; mirrors the Dropbox / Drive bottom-action-bar * pattern. */ function BulkActionBar({ count, onMove, onTrash, onShare, onDownload, onCancel }) { const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; return ( {count > 0 && (
    {count} selected
    )}     ); } /* ========================================================================= * Wave 6 — Global file search palette (Cmd/Ctrl+K) * ----------------------------------------------------------------------- * Searches every file the signed-in user can read (or every file system- * wide when admin viewAll is on). Client-side fuzzy filter, debounced * 200 ms. Top 12 hits, keyboard navigation, Enter opens the file drawer. * =======================================================================*/ function GlobalSearchPalette({ open, onClose, onOpenFile }) { const [q, setQ] = useState(""); const [debounced, setDebounced] = useState(""); const [files, setFiles] = useState(null); // null = first load, [] = empty const [fetchedAt, setFetchedAt] = useState(0); const [projectsById, setProjectsById] = useState({}); const [foldersById, setFoldersById] = useState({}); const [highlight, setHighlight] = useState(0); const inputRef = useRef(null); // Remember which element had focus before the palette opened so we can // restore it on close — keyboard users shouldn't get dropped at . const lastFocusRef = useRef(null); const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; // Refresh files cache on open if we have nothing or it's >30 s stale. useEffect(() => { if (!open) { // On close, restore focus to whatever was active before we opened. const t = lastFocusRef.current; if (t && typeof t.focus === "function") { try { t.focus(); } catch {} } lastFocusRef.current = null; return; } lastFocusRef.current = document.activeElement; setQ(""); setHighlight(0); setTimeout(() => inputRef.current?.focus(), 50); const stale = !files || (Date.now() - fetchedAt > 30_000); if (!stale) return; let cancelled = false; window.api.listAllOwnedFiles(500).then((rows) => { if (cancelled) return; setFiles(rows || []); setFetchedAt(Date.now()); // Resolve project + folder names for context strings. One pass each. const projectIds = Array.from(new Set(rows.map(r => r.projectId).filter(Boolean))); const folderIds = Array.from(new Set(rows.map(r => r.folderId ).filter(Boolean))); Promise.all(projectIds.map(id => window.api.getProject?.(id).catch(() => null))).then((ps) => { if (cancelled) return; const map = {}; ps.forEach((p, i) => { if (p) map[projectIds[i]] = p; }); setProjectsById(map); }); Promise.all(folderIds.map(id => window.api.getFolder?.(id).catch(() => null))).then((fs) => { if (cancelled) return; const map = {}; fs.forEach((f, i) => { if (f) map[folderIds[i]] = f; }); setFoldersById(map); }); }).catch(() => { if (!cancelled) setFiles([]); }); return () => { cancelled = true; }; }, [open]); // 200 ms debounce on the query. useEffect(() => { const t = setTimeout(() => setDebounced(q), 200); return () => clearTimeout(t); }, [q]); // Reset highlighted row whenever filter changes. useEffect(() => { setHighlight(0); }, [debounced]); // Filter + score. Files matching the query in their name (or tags) rise to // the top. We rank by: name-prefix > name-substring > tag-substring. const results = useMemo(() => { if (!files) return []; const needle = (debounced || "").trim().toLowerCase(); if (!needle) return []; const out = []; for (const f of files) { const name = (f.name || "").toLowerCase(); const tags = Array.isArray(f.tags) ? f.tags : []; let score = 0; if (name.startsWith(needle)) score = 3; else if (name.includes(needle)) score = 2; else if (tags.some(t => (t || "").toLowerCase().includes(needle))) score = 1; if (score > 0) out.push({ f, score }); } out.sort((a, b) => { if (b.score !== a.score) return b.score - a.score; return new Date(b.f.updatedAt || 0) - new Date(a.f.updatedAt || 0); }); return out.slice(0, 12).map(o => o.f); }, [files, debounced]); // Keyboard nav. Up / Down / Enter / Esc all swallowed when palette open. useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "ArrowDown") { e.preventDefault(); setHighlight(i => Math.min(results.length - 1, i + 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setHighlight(i => Math.max(0, i - 1)); } else if (e.key === "Enter") { e.preventDefault(); const pick = results[highlight]; if (pick) { onOpenFile?.(pick.id); onClose(); } } else if (e.key === "Escape") { e.preventDefault(); onClose(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, results, highlight, onOpenFile, onClose]); if (!open) return null; // Renders a name with the matching span underlined. Falls back to plain // text when no match (e.g. tag-only hits). const highlightMatch = (name) => { const needle = (debounced || "").trim().toLowerCase(); if (!needle) return name; const lower = name.toLowerCase(); const idx = lower.indexOf(needle); if (idx < 0) return name; return ( <> {name.slice(0, idx)} {name.slice(idx, idx + needle.length)} {name.slice(idx + needle.length)} ); }; const contextOf = (f) => { const proj = f.projectId ? projectsById[f.projectId] : null; const fold = f.folderId ? foldersById[f.folderId] : null; const parts = []; if (proj?.name) parts.push(proj.name); if (fold?.name && fold.name !== proj?.name) parts.push(fold.name); return parts.join(" › "); }; const empty = files && files.length === 0; return ( e.stopPropagation()} role="dialog" aria-modal="true" >
    setQ(e.target.value)} placeholder="Search across all your files…" spellCheck={false} autoComplete="off" /> esc
    {!debounced && (
    {empty ? "No files yet — upload something to start searching." : (files === null ? "loading your files…" : "Type to search across all your files.")}
    )} {debounced && results.length === 0 && (
    No files match “{debounced}”.
    )} {results.length > 0 && (
      {results.map((f, i) => { const ctx = contextOf(f); const active = i === highlight; return (
    • setHighlight(i)} onClick={() => { onOpenFile?.(f.id); onClose(); }} >
      {highlightMatch(f.name)}
      {ctx || "—"}
      • ); })}
    )}
    ↑↓ navigate enter open esc close
    ); } /* ========================================================================= * Wave 6 — Notifications bell * ----------------------------------------------------------------------- * Top-right bell with an unread count badge. Click opens a dropdown that * lists the last ~10 relevant activity events. Live via onSnapshot. * Marks-as-read by writing /users/{uid}.notificationLastReadAt on open. * =======================================================================*/ function NotificationsBell({ user }) { const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; const [open, setOpen] = useState(false); const [events, setEvents] = useState([]); const [actorMap, setActorMap] = useState({}); const [filesById, setFilesById] = useState({}); // Per-user "last read" timestamp. Stored as ms-since-epoch so date math // is trivial. Re-fetched on mount; bumped to Date.now() locally when // the dropdown opens (the server write follows asynchronously). const [lastReadAt, setLastReadAt] = useState(0); // Local opt-out from Settings → Notifications. We still hold the // listener subscription so the unread state is correct the moment the // user re-enables; we just hide the bell from the top bar. const [bellEnabled, setBellEnabled] = useState(() => localStorage.getItem("ctwcad.notif.bell") !== "0"); useEffect(() => { const onPref = () => setBellEnabled(localStorage.getItem("ctwcad.notif.bell") !== "0"); window.addEventListener("ctwcad:notif-pref-changed", onPref); return () => window.removeEventListener("ctwcad:notif-pref-changed", onPref); }, []); const wrapRef = useRef(null); const meUid = window.firebaseAuth?.currentUser?.uid || null; // Initial lastRead fetch. useEffect(() => { let cancelled = false; window.api.getNotificationLastReadAt().then((iso) => { if (cancelled) return; setLastReadAt(iso ? new Date(iso).getTime() : 0); }); return () => { cancelled = true; }; }, [user?.id, user?.email]); // Live activity listener. We re-establish whenever the actor changes. useEffect(() => { if (!user) return; const unsub = window.api.watchUserActivity((rows) => { setEvents(rows || []); }, 50); return () => { try { unsub?.(); } catch {} }; }, [user?.id, user?.email]); // Resolve actor profiles + file names for the events we'll display. useEffect(() => { if (!events.length) return; const actorIds = Array.from(new Set(events.map(e => e.actorUid).filter(Boolean))); const fileIds = Array.from(new Set(events.map(e => e.fileId ).filter(Boolean))); let cancelled = false; window.api.resolveUserProfiles(actorIds).then((m) => { if (!cancelled) setActorMap(prev => ({ ...prev, ...m })); }); Promise.all(fileIds.map(id => window.api.getFile?.(id).catch(() => null))).then((rows) => { if (cancelled) return; const m = {}; rows.forEach((r, i) => { if (r) m[fileIds[i]] = r; }); setFilesById(prev => ({ ...prev, ...m })); }); return () => { cancelled = true; }; }, [events]); // Filter to events that should notify THIS user: // - skip events the user themselves caused // - keep events on files this user owns OR is a project member of // (the server already enforces this via the rules — if the user // can read the file, they can see the activity). // We also drop events whose fileId we couldn't resolve (file might be // deleted / out-of-scope). const relevant = useMemo(() => { return events.filter((ev) => { if (!ev || !ev.fileId) return false; if (meUid && ev.actorUid === meUid) return false; const f = filesById[ev.fileId]; if (!f) return false; // can't resolve → not authorized → drop return true; }); }, [events, filesById, meUid]); // Unread = count of relevant events newer than lastReadAt. Capped 9+. const unread = useMemo(() => { if (!lastReadAt) return Math.min(relevant.length, 99); return relevant.filter(ev => { const t = ev.at ? new Date(ev.at).getTime() : 0; return t > lastReadAt; }).length; }, [relevant, lastReadAt]); // Click-outside to close. useEffect(() => { if (!open) return; const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [open]); const onToggle = () => { const willOpen = !open; setOpen(willOpen); if (willOpen) { // Optimistically mark read locally so the badge clears immediately; // server write follows in the background. If the write fails the // badge will repopulate on next reload, which is the correct // pessimistic fallback. const now = Date.now(); setLastReadAt(now); window.api.setNotificationLastReadAt().catch(() => {}); } }; // Friendly message generator. Falls back to the raw type for unknown // events so we never render a blank line. const messageFor = (ev, fileName) => { const map = { "version.created": `saved a new version of ${fileName}`, "file.created": `uploaded ${fileName}`, "file.uploaded": `uploaded ${fileName}`, "file.renamed": `renamed ${fileName}`, "file.moved": `moved ${fileName}`, "file.trashed": `moved ${fileName} to Trash`, "file.restored": `restored ${fileName}`, "file.shared": `shared ${fileName}`, "file.commented": `commented on ${fileName}`, }; return map[ev.type] || `${ev.type || "did something with"} ${fileName}`; }; // Hidden when the user has opted out via Settings → Notifications. // The listener / unread tracking is still wired up so re-enabling // shows the correct state immediately. if (!bellEnabled) return null; return (
    {open && (
    Notifications {unread > 0 && ( {unread > 9 ? "9+" : unread} new )}
    {relevant.length === 0 && (
    No notifications yet.
    When teammates upload, comment, or save versions, you'll see them here.
    )} {relevant.length > 0 && (
      {relevant.slice(0, 10).map((ev) => { const actor = actorMap[ev.actorUid] || null; const file = filesById[ev.fileId] || null; const fname = file?.name || "a file"; const t = ev.at ? new Date(ev.at).getTime() : 0; const isUnread = t > lastReadAt; return (
    • { if (file) { window.dispatchEvent(new CustomEvent("ctwcad:item-action", { detail: { action: "open", kind: "file", file }, })); setOpen(false); } }} >
      {actor?.name || "Someone"}{" "} {messageFor(ev, fname)}
      {ev.at ? fmtRelative(ev.at) : ""}
      {isUnread && }
      • ); })}
    )} )}
    ); } /* ========================================================================= * Keyboard shortcuts cheat sheet * ----------------------------------------------------------------------- * Mounted at the app root. Listens for the bare "?" key while no input * is focused, and for the synthetic "ctwcad:open-shortcuts" event so * the Settings page can open it directly. Esc / backdrop / close-button * all dismiss. Pure presentational — no Firestore reads. * =======================================================================*/ function KeyboardShortcuts() { const M = window.FramerMotion.motion; const A = window.FramerMotion.AnimatePresence; const [open, setOpen] = useState(false); // Restore focus to whatever element opened the cheat sheet on close. const lastFocusRef = useRef(null); useEffect(() => { if (open) { lastFocusRef.current = document.activeElement; } else { const t = lastFocusRef.current; if (t && typeof t.focus === "function") { try { t.focus(); } catch {} } lastFocusRef.current = null; } }, [open]); useEffect(() => { const isEditable = (el) => { if (!el) return false; const tag = (el.tagName || "").toLowerCase(); if (tag === "input" || tag === "textarea" || tag === "select") return true; if (el.isContentEditable) return true; return false; }; const onKey = (e) => { if (e.key === "Escape") { setOpen(false); return; } // "?" — Shift+/ on US layout. Only act if no editable element is // focused (text inputs, the global search box, rename fields, etc.). if (e.key === "?" && !isEditable(document.activeElement) && !e.metaKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); setOpen((v) => !v); } }; const onOpen = () => setOpen(true); window.addEventListener("keydown", onKey); window.addEventListener("ctwcad:open-shortcuts", onOpen); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("ctwcad:open-shortcuts", onOpen); }; }, []); // Detect macOS once. "⌘" looks wrong on Windows / Linux; show "Ctrl" // instead. Falls back to userAgent if navigator.platform is empty // (it's deprecated but still populated on every shipping browser). const isMac = useMemo(() => { const p = (navigator.userAgentData?.platform || navigator.platform || navigator.userAgent || ""); return /mac|iphone|ipad|ipod/i.test(p); }, []); const cmdKey = isMac ? "⌘" : "Ctrl"; const groups = [ { title: "Navigation", rows: [ { keys: [cmdKey, "K"], label: "Open global search" }, { keys: ["/"], label: "Focus folder search" }, { keys: ["G", "D"], label: "Go to dashboard" }, { keys: ["G", "F"], label: "Go to files" }, { keys: ["G", "T"], label: "Go to trash" }, { keys: ["G", "S"], label: "Go to settings" }, ], }, { title: "Files & folders", rows: [ { keys: ["Enter"], label: "Open selected item" }, { keys: ["F2"], label: "Rename" }, { keys: ["Del"], label: "Move to trash" }, { keys: [cmdKey, "Click"], label: "Add to selection" }, { keys: ["Shift", "Click"], label: "Select range" }, ], }, { title: "Overlays", rows: [ { keys: ["Esc"], label: "Close drawer / modal" }, { keys: ["?"], label: "Show this cheat sheet" }, ], }, ]; return ( {open && ( <> setOpen(false)} />
    SHORTCUTS

    Keyboard shortcuts

    {groups.map((g) => (
    {g.title}
      {g.rows.map((r, i) => (
    • {r.label} {r.keys.map((k, j) => ( {k} ))}
      • ))}
    ))}
    Press ? any time · Esc to close
    )}     ); } Object.assign(window, { ContextMenu, UploadManager, Toasts, BulkActionBar, GlobalSearchPalette, NotificationsBell, KeyboardShortcuts, });