@forgeax/interface 0.4.1

package/dist/package/browser/components/Sidebar/FilesPanel.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createIntervalTaskLifecycle, createRestartableTimeoutTaskLifecycle, } from '@forgeax/app-shell/react';
+import { ChevronRight, ChevronDown, Folder, FolderOpen, FileCode2, FileJson, FileText, FileImage, FileAudio, FileArchive, FileCog, Box, Table2, File as FileIcon, } from 'lucide-react';
+import { useShellStore } from '../../store';
+import { publish } from '../../lib/bus';
+import { useBusSnapshot } from '../../lib/use-bus-snapshot';
+import { useTranslation } from '../../i18n';
+import { FAMILY_ORDER, familyOf } from '../../lib/file-family';
+function fileIconFor(name) {
+    switch (familyOf(name)) {
+        case 'code': return FileCode2;
+        case 'config': return FileJson;
+        case 'doc': return FileText;
+        case 'scene': return FileCode2;
+        case 'pack': return FileArchive;
+        case 'meta': return FileCog;
+        case 'image': return FileImage;
+        case 'audio': return FileAudio;
+        case 'model': return Box;
+        case 'data': return Table2;
+        default: return FileIcon;
+    }
+}
+function aggregateFamilies(tree) {
+    const tally = {
+        code: { count: 0, firstPath: null },
+        config: { count: 0, firstPath: null },
+        doc: { count: 0, firstPath: null },
+        scene: { count: 0, firstPath: null },
+        pack: { count: 0, firstPath: null },
+        meta: { count: 0, firstPath: null },
+        image: { count: 0, firstPath: null },
+        audio: { count: 0, firstPath: null },
+        model: { count: 0, firstPath: null },
+        data: { count: 0, firstPath: null },
+    };
+    const walk = (n) => {
+        if (n.type === 'file') {
+            const fam = familyOf(n.name);
+            tally[fam].count += 1;
+            if (tally[fam].firstPath === null)
+                tally[fam].firstPath = n.path;
+            return;
+        }
+        for (const c of n.children ?? [])
+            walk(c);
+    };
+    if (tree)
+        walk(tree);
+    return FAMILY_ORDER.map((m) => ({
+        key: m.key,
+        label: m.label,
+        count: tally[m.key].count,
+        firstPath: tally[m.key].firstPath,
+    }));
+}
+// P4.54 — recursive file count under a directory node. Used by TreeRow.dir
+// to render a 9px dim count badge after the folder name (`src 23`) so the
+// player can size each folder without expanding it. Pure derive over the
+// already-fetched tree, 0 new endpoint / 0 store / 0 poll. Cached per node
+// via WeakMap keyed on the children array reference — tree is replaced
+// wholesale on each 5s poll, so identity equality is enough.
+const dirFileCountCache = new WeakMap();
+function countFilesIn(node) {
+    if (node.type === 'file')
+        return 1;
+    const cached = dirFileCountCache.get(node);
+    if (cached !== undefined)
+        return cached;
+    let n = 0;
+    for (const c of node.children ?? [])
+        n += countFilesIn(c);
+    dirFileCountCache.set(node, n);
+    return n;
+}
+// Collect every ancestor dir path so we can auto-expand on jump.
+function ancestorsOf(path, rootPath) {
+    const out = [];
+    if (!path.startsWith(rootPath))
+        return out;
+    const tail = path.slice(rootPath.length).replace(/^\//, '');
+    if (!tail)
+        return out;
+    const parts = tail.split('/').slice(0, -1);
+    let acc = rootPath;
+    out.push(acc);
+    for (const p of parts) {
+        acc = `${acc}/${p}`;
+        out.push(acc);
+    }
+    return out;
+}
+export function FilesPanel() {
+    const openFile = (path) => { publish('resource-editor:open-file', { path }); };
+    const activeFilePath = useBusSnapshot('resource-editor:files')?.activeFilePath ?? null;
+    const activeSlug = useShellStore((s) => s.activeGameSlug);
+    const [tree, setTree] = useState(null);
+    const [expanded, setExpanded] = useState(new Set());
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Re-run when the authoritative active game projection changes. An earlier
+    // version closed over the initial slug, so switching
+    // project left the tree stuck on the old slug until full reload.
+    //
+    // expanded init is keyed by `isFirstLoad`: only the first successful
+    // tree fetch for a given slug seeds the default expansion. Subsequent
+    // 5s polls keep the user's manual expansion intact — earlier this same
+    // block called setExpanded() unconditionally, which silently re-collapsed
+    // every folder the user clicked into within 1-2s of opening it.
+    useEffect(() => {
+        let cancelled = false;
+        let isFirstLoad = true;
+        setLoading(true);
+        setError(null);
+        setTree(null);
+        const load = async () => {
+            try {
+                const slug = activeSlug ?? undefined;
+                if (!slug) {
+                    setError('no active game');
+                    setLoading(false);
+                    return;
+                }
+                const tr = await fetch(`/api/files/tree?root=.forgeax/games/${encodeURIComponent(slug)}`).then((r) => r.json());
+                if (cancelled)
+                    return;
+                if (tr.error || !tr.tree) {
+                    setError(tr.error ?? 'no tree');
+                }
+                else {
+                    setTree(tr.tree);
+                    if (isFirstLoad) {
+                        setExpanded(new Set([tr.tree.path, `${tr.tree.path}/src`, `${tr.tree.path}/design`]));
+                        isFirstLoad = false;
+                    }
+                }
+                setLoading(false);
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError(e.message);
+                    setLoading(false);
+                }
+            }
+        };
+        load();
+        const poll = createIntervalTaskLifecycle({
+            task: () => { void load(); },
+            intervalMs: 5_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            poll.dispose();
+        };
+    }, [activeSlug]);
+    return _jsx(FilesPanelView, { loading: loading, error: error, tree: tree, activeSlug: activeSlug, expanded: expanded, setExpanded: setExpanded, previewPath: activeFilePath, openFile: openFile });
+}
+function FilesPanelView({ loading, error, tree, activeSlug, expanded, setExpanded, previewPath, openFile }) {
+    const { t } = useTranslation();
+    const [flashPath, setFlashPath] = useState(null);
+    const [pendingScrollPath, setPendingScrollPath] = useState(null);
+    const flashTaskRef = useRef(null);
+    const flashTargetRef = useRef(null);
+    const families = useMemo(() => aggregateFamilies(tree), [tree]);
+    const total = useMemo(() => families.reduce((s, f) => s + f.count, 0), [families]);
+    useEffect(() => {
+        const task = createRestartableTimeoutTaskLifecycle({
+            delayMs: 1500,
+            task: () => {
+                const path = flashTargetRef.current;
+                setFlashPath((cur) => (cur === path ? null : cur));
+            },
+        });
+        flashTaskRef.current = task;
+        return () => {
+            task.dispose();
+            flashTaskRef.current = null;
+        };
+    }, []);
+    // Two-phase: click sets pendingScrollPath + expands ancestors → React
+    // re-renders the new rows → this effect (re-run when expanded changes)
+    // finds the row and runs scroll/focus/flash. Avoids the rAF-before-
+    // commit race the naive inline approach hits.
+    useEffect(() => {
+        if (!pendingScrollPath)
+            return;
+        const el = document.querySelector(`[data-fp-path="${CSS.escape(pendingScrollPath)}"]`);
+        if (!el)
+            return; // not yet expanded — will re-fire on next expanded update
+        el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        el.focus({ preventScroll: true });
+        setFlashPath(pendingScrollPath);
+        flashTargetRef.current = pendingScrollPath;
+        setPendingScrollPath(null);
+        flashTaskRef.current?.schedule();
+    }, [pendingScrollPath, expanded]);
+    const onTypeClick = (fam) => {
+        if (!fam.firstPath || !tree)
+            return;
+        const next = new Set(expanded);
+        for (const a of ancestorsOf(fam.firstPath, tree.path))
+            next.add(a);
+        setExpanded(next);
+        setPendingScrollPath(fam.firstPath);
+    };
+    if (loading) {
+        return (_jsxs("div", { className: "files-panel", children: [_jsx("div", { className: "fp-header", children: _jsxs("span", { className: "fp-slug", children: [".forgeax/games / ", activeSlug ?? '…'] }) }), _jsx("div", { className: "fp-empty", children: t('common.loading') })] }));
+    }
+    if (error || !tree) {
+        return (_jsxs("div", { className: "files-panel", children: [_jsx("div", { className: "fp-header", children: _jsxs("span", { className: "fp-slug", children: [".forgeax/games / ", activeSlug ?? '—'] }) }), _jsx("div", { className: "fp-empty", children: error ?? 'empty' })] }));
+    }
+    return (_jsxs("div", { className: "files-panel rail-panel", children: [_jsx("div", { className: "fp-header", children: _jsxs("span", { className: "fp-slug", children: [".forgeax/games / ", activeSlug] }) }), _jsxs("div", { className: "fp-types", role: "toolbar", "aria-label": "file type distribution", children: [_jsx("span", { className: "fp-types-label", "aria-hidden": "true", children: "FILES" }), families.filter((f) => f.count > 0).map((f) => (_jsxs("button", { type: "button", className: `fp-type-chip fam-${f.key}`, onClick: () => onTypeClick(f), disabled: !f.firstPath, title: `${f.label} · ${t('filesPanel.fileCount', { count: f.count })}${f.firstPath ? ` · ${t('filesPanel.jumpToFile', { name: f.firstPath.split('/').pop() ?? '' })}` : ''}`, "aria-label": `${f.label} ${f.count} files — jump to first`, children: [_jsx("span", { className: `fp-type-dot fam-${f.key}`, "aria-hidden": "true" }), _jsx("span", { className: "fp-type-label", children: f.label }), _jsx("span", { className: "fp-type-count", children: f.count })] }, f.key))), total > 0 && (_jsxs("span", { className: "fp-types-total", title: `Σ ${t('filesPanel.fileCount', { count: total })} · ${t('filesPanel.splitByFamily')}`, "aria-label": `${total} files total across all families`, children: [_jsx("span", { className: "fp-types-vsep", "aria-hidden": "true" }), _jsx("span", { className: "fp-types-sigma", "aria-hidden": "true", children: "\u03A3" }), _jsx("span", { className: "fp-types-total-n", children: total })] }))] }), _jsx("div", { className: "file-tree reveal-stagger", children: _jsx(TreeRow, { node: tree, depth: 0, expanded: expanded, setExpanded: setExpanded, activeFile: previewPath, flashPath: flashPath, onOpen: (p) => void openFile(p) }) })] }));
+}
+function TreeRow({ node, depth, expanded, setExpanded, activeFile, flashPath, onOpen }) {
+    const { t } = useTranslation();
+    if (node.type === 'dir') {
+        const isOpen = expanded.has(node.path);
+        const FolderGlyph = isOpen ? FolderOpen : Folder;
+        const toggle = () => {
+            const next = new Set(expanded);
+            isOpen ? next.delete(node.path) : next.add(node.path);
+            setExpanded(next);
+        };
+        const fileCount = countFilesIn(node);
+        return (_jsxs(_Fragment, { children: [_jsxs("button", { className: "fp-row dir", style: { paddingLeft: 6 + depth * 12 }, onClick: toggle, title: `${node.name} · ${t('filesPanel.fileCount', { count: fileCount })} · ${isOpen ? t('filesPanel.clickToCollapse') : t('filesPanel.clickToExpand')}`, children: [_jsx("span", { className: "fp-chev", children: isOpen ? _jsx(ChevronDown, { size: 11 }) : _jsx(ChevronRight, { size: 11 }) }), _jsx(FolderGlyph, { size: 13, className: "fp-folder-ico" }), _jsx("span", { className: "fp-name", children: node.name }), fileCount > 0 && (_jsx("span", { className: "fp-dir-count", "aria-label": `${fileCount} files in folder`, children: fileCount }))] }), isOpen && (node.children ?? []).map((c) => (_jsx(TreeRow, { node: c, depth: depth + 1, expanded: expanded, setExpanded: setExpanded, activeFile: activeFile, flashPath: flashPath, onOpen: onOpen }, c.path)))] }));
+    }
+    const Icon = fileIconFor(node.name);
+    const isActive = activeFile === node.path;
+    const isFlash = flashPath === node.path;
+    const fam = familyOf(node.name);
+    return (_jsxs("button", { className: `fp-row file fam-${fam} ${isActive ? 'active' : ''} ${isFlash ? 'is-flash' : ''}`, style: { paddingLeft: 6 + depth * 12 + 14 }, onClick: () => onOpen(node.path), title: node.path, "data-fp-path": node.path, children: [_jsx(Icon, { size: 13, className: "fp-file-ico" }), _jsx("span", { className: "fp-name", children: node.name })] }));
+}