gitmaps 1.0.0

package/app/lib/hidden-files.tsx

@@ -0,0 +1,222 @@
+// @ts-nocheck
+/**
+ * Hidden files management — hide/restore/modal with folder bulk-hide.
+ * Uses melina/client JSX + render instead of innerHTML.
+ */
+import { measure } from 'measure-fn';
+import { render } from 'melina/client';
+import type { CanvasContext } from './context';
+
+
+// ─── Load hidden files from localStorage ────────────────
+export function loadHiddenFiles(ctx: CanvasContext) {
+    try {
+        const saved = localStorage.getItem('gitcanvas:hiddenFiles');
+        if (saved) {
+            const arr = JSON.parse(saved);
+            arr.forEach((f: string) => ctx.hiddenFiles.add(f));
+        }
+    } catch (e) { /* ignore */ }
+}
+
+// ─── Persist hidden files to localStorage ───────────────
+export function saveHiddenFiles(ctx: CanvasContext) {
+    localStorage.setItem('gitcanvas:hiddenFiles', JSON.stringify([...ctx.hiddenFiles]));
+}
+
+// ─── Update hidden button badge ─────────────────────────
+export function updateHiddenUI(ctx: CanvasContext) {
+    const btn = document.getElementById('showHidden');
+    const badge = document.getElementById('hiddenCount');
+    if (ctx.hiddenFiles.size > 0) {
+        if (btn) btn.style.display = 'inline-flex';
+        if (badge) badge.textContent = String(ctx.hiddenFiles.size);
+    } else {
+        if (btn) btn.style.display = 'none';
+    }
+}
+
+// ─── Hide selected file paths ───────────────────────────
+export function hideSelectedFiles(ctx: CanvasContext, paths: string[]) {
+    measure('files:hide', () => {
+        paths.forEach(p => ctx.hiddenFiles.add(p));
+        saveHiddenFiles(ctx);
+        ctx.actor.send({ type: 'DESELECT_ALL' });
+
+        paths.forEach(p => {
+            const card = ctx.fileCards.get(p);
+            if (card) {
+                card.remove();
+                ctx.fileCards.delete(p);
+            }
+            // Also remove from deferred so viewport-culling doesn't re-create
+            ctx.deferredCards.delete(p);
+        });
+
+        updateHiddenUI(ctx);
+    });
+}
+
+// ─── Restore a single hidden file ───────────────────────
+export function restoreFile(ctx: CanvasContext, filePath: string) {
+    ctx.hiddenFiles.delete(filePath);
+    saveHiddenFiles(ctx);
+    updateHiddenUI(ctx);
+}
+
+// ─── Restore all hidden files ───────────────────────────
+export function restoreAllHidden(ctx: CanvasContext) {
+    ctx.hiddenFiles.clear();
+    saveHiddenFiles(ctx);
+    updateHiddenUI(ctx);
+}
+
+// ─── Get unique folder paths from file list ─────────────
+function getFolders(allFiles: string[]): string[] {
+    const folders = new Set<string>();
+    for (const f of allFiles) {
+        const parts = f.split('/');
+        // Build all ancestor folder paths
+        for (let i = 1; i < parts.length; i++) {
+            folders.add(parts.slice(0, i).join('/'));
+        }
+    }
+    return [...folders].sort();
+}
+
+// ─── Hidden files modal (JSX) ───────────────────────────
+function HiddenFilesModalContent({
+    hiddenFiles, allFiles, onRestore, onRestoreAll, onHideFolder, onClose
+}: {
+    hiddenFiles: string[];
+    allFiles: string[];
+    onRestore: (path: string) => void;
+    onRestoreAll: () => void;
+    onHideFolder: (folder: string) => void;
+    onClose: () => void;
+}) {
+    const folders = getFolders(allFiles);
+
+    return (
+        <>
+            <div className="hidden-modal-backdrop" onClick={onClose}></div>
+            <div className="hidden-modal-content">
+                <div className="hidden-modal-header">
+                    <h3>Hidden Files ({hiddenFiles.length})</h3>
+                    <div className="hidden-modal-actions">
+                        <button className="btn-secondary btn-sm" onClick={onRestoreAll}>Restore All</button>
+                        <button className="hidden-modal-close" onClick={onClose}>&times;</button>
+                    </div>
+                </div>
+                <div className="hidden-modal-body">
+                    {/* Folder bulk-hide section */}
+                    {folders.length > 0 && (
+                        <div className="hidden-folder-section">
+                            <div className="hidden-section-label">Hide by folder</div>
+                            <div className="hidden-folder-list">
+                                {folders.map(folder => {
+                                    const filesInFolder = allFiles.filter(f => f.startsWith(folder + '/'));
+                                    const hiddenInFolder = filesInFolder.filter(f => hiddenFiles.includes(f));
+                                    const allHidden = hiddenInFolder.length === filesInFolder.length;
+                                    return (
+                                        <div key={folder} className="hidden-folder-row">
+                                            <span className="hidden-folder-path">
+                                                📁 {folder}/
+                                                <span className="hidden-folder-count">
+                                                    {hiddenInFolder.length}/{filesInFolder.length}
+                                                </span>
+                                            </span>
+                                            <button
+                                                className={`btn-hide-folder ${allHidden ? 'btn-disabled' : ''}`}
+                                                title={allHidden ? 'All files already hidden' : `Hide ${filesInFolder.length - hiddenInFolder.length} files in ${folder}/`}
+                                                disabled={allHidden}
+                                                onClick={() => onHideFolder(folder)}
+                                            >
+                                                {allHidden ? '✓' : '🙈'}
+                                            </button>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Individual hidden files */}
+                    {hiddenFiles.length > 0 && (
+                        <div className="hidden-section-label" style={{ marginTop: '12px' }}>
+                            Currently hidden
+                        </div>
+                    )}
+                    {hiddenFiles.map(f => (
+                        <div key={f} className="hidden-file-row" data-path={f}>
+                            <span className="hidden-file-path">{f}</span>
+                            <button className="btn-restore" title="Restore this file" onClick={() => onRestore(f)}>
+                                👁
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+}
+
+// ─── Show the hidden files modal ────────────────────────
+export function showHiddenFilesModal(ctx: CanvasContext, rerenderCurrentView: () => void) {
+    measure('modal:hiddenFiles', () => {
+        // Allow opening even with 0 hidden files (to use folder bulk-hide)
+        let modal = document.getElementById('hiddenFilesModal');
+        if (modal) modal.remove();
+
+        modal = document.createElement('div');
+        modal.id = 'hiddenFilesModal';
+        modal.className = 'hidden-files-modal';
+        document.body.appendChild(modal);
+
+        // Get all file paths from fileCards + deferredCards + hiddenFiles
+        const allFiles = [
+            ...ctx.fileCards.keys(),
+            ...ctx.deferredCards.keys(),
+            ...ctx.hiddenFiles,
+        ];
+        // Deduplicate
+        const uniqueFiles = [...new Set(allFiles)];
+
+        function rerender() {
+            const hiddenFiles = [...ctx.hiddenFiles];
+            render(
+                <HiddenFilesModalContent
+                    hiddenFiles={hiddenFiles}
+                    allFiles={uniqueFiles}
+                    onRestore={(path) => {
+                        restoreFile(ctx, path);
+                        rerenderCurrentView();
+                        rerender();
+                    }}
+                    onRestoreAll={() => {
+                        restoreAllHidden(ctx);
+                        render(null, modal);
+                        modal.remove();
+                        rerenderCurrentView();
+                    }}
+                    onHideFolder={(folder) => {
+                        const toHide = uniqueFiles
+                            .filter(f => f.startsWith(folder + '/'))
+                            .filter(f => !ctx.hiddenFiles.has(f));
+                        if (toHide.length > 0) {
+                            hideSelectedFiles(ctx, toHide);
+                            rerender();
+                        }
+                    }}
+                    onClose={() => {
+                        render(null, modal);
+                        modal.remove();
+                    }}
+                />,
+                modal
+            );
+        }
+
+        rerender();
+    });
+}

package/app/lib/layers.tsx

@@ -0,0 +1,365 @@
+// @ts-nocheck
+import { render } from 'melina/client';
+import type { CanvasContext } from './context';
+import { renderAllFilesOnCanvas } from './repo';
+
+export interface FileSection {
+    startString: string;
+    endString: string;
+}
+
+export interface LayerData {
+    id: string;
+    name: string;
+    files: Record<string, { sections: FileSection[] }>;
+}
+
+export const layerState = {
+    layers: [] as LayerData[],
+    activeLayerId: 'default' as string
+};
+
+const DEFAULT_LAYER: LayerData = { id: 'default', name: 'All Files (Default)', files: {} };
+
+export function initLayers(ctx: CanvasContext) {
+    // Load from local storage for now or maybe an API? Let's use localStorage to persist across commits.
+    try {
+        const stored = localStorage.getItem(`gitcanvas:layers:${ctx.snap().context.repoPath}`);
+        if (stored) {
+            layerState.layers = JSON.parse(stored);
+        } else {
+            layerState.layers = [DEFAULT_LAYER];
+        }
+    } catch {
+        layerState.layers = [DEFAULT_LAYER];
+    }
+
+    // Ensure default exists
+    if (!layerState.layers.find(l => l.id === 'default')) {
+        layerState.layers.unshift(DEFAULT_LAYER);
+    }
+
+    const savedActive = localStorage.getItem(`gitcanvas:activeLayer:${ctx.snap().context.repoPath}`);
+    if (savedActive && layerState.layers.find(l => l.id === savedActive)) {
+        layerState.activeLayerId = savedActive;
+    } else {
+        layerState.activeLayerId = layerState.layers[0].id;
+    }
+}
+
+export function saveLayers(ctx: CanvasContext) {
+    if (!ctx.snap().context.repoPath) return;
+    localStorage.setItem(`gitcanvas:layers:${ctx.snap().context.repoPath}`, JSON.stringify(layerState.layers));
+}
+
+export function createLayer(ctx: CanvasContext, name: string) {
+    const newLayer: LayerData = {
+        id: `layer_${Date.now()}`,
+        name,
+        files: {}
+    };
+    layerState.layers.push(newLayer);
+    // Don't auto-switch to the new layer — stay on the current one
+    saveLayers(ctx);
+    renderLayersUI(ctx);
+}
+
+export function renameLayer(ctx: CanvasContext, id: string, newName: string) {
+    const layer = layerState.layers.find(l => l.id === id);
+    if (!layer || layer.id === 'default') return;
+    layer.name = newName;
+    saveLayers(ctx);
+    renderLayersUI(ctx);
+}
+
+export function deleteLayer(ctx: CanvasContext, id: string) {
+    if (id === 'default') return;
+
+    // Return files from deleted layer back to default visibility
+    const layer = layerState.layers.find(l => l.id === id);
+    if (layer) {
+        const defaultLayer = layerState.layers.find(l => l.id === 'default');
+        if (defaultLayer) {
+            // Remove exclusions for files that were in this layer
+            for (const path of Object.keys(layer.files)) {
+                delete defaultLayer.files[path]; // Remove from moved-out tracking
+            }
+        }
+    }
+
+    layerState.layers = layerState.layers.filter(l => l.id !== id);
+    if (layerState.activeLayerId === id) {
+        setActiveLayer(ctx, 'default');
+    } else {
+        saveLayers(ctx);
+        renderLayersUI(ctx);
+    }
+}
+
+/**
+ * Move a file to a layer — this REMOVES it from the default layer's visible set.
+ * When a file is moved to a non-default layer, the default layer tracks it as "moved out"
+ * so it won't show on the default canvas.
+ */
+export function moveFileToLayer(ctx: CanvasContext, layerId: string, path: string) {
+    if (layerId === 'default') return; // Can't "move" to default — use removeFileFromLayer instead
+
+    const layer = layerState.layers.find(l => l.id === layerId);
+    if (!layer) return;
+
+    // Add file to target layer
+    if (!layer.files[path]) {
+        layer.files[path] = { sections: [] };
+    }
+
+    // Track in default layer that this file has been moved out
+    const defaultLayer = layerState.layers.find(l => l.id === 'default');
+    if (defaultLayer) {
+        if (!defaultLayer.files[path]) {
+            defaultLayer.files[path] = { sections: [] };
+        }
+        // Mark as moved-out by adding a special marker
+        (defaultLayer.files[path] as any).__movedTo = layerId;
+    }
+
+    saveLayers(ctx);
+    renderLayersUI(ctx);
+    // Re-render current layer to hide the moved file
+    if (layerState.activeLayerId === 'default') {
+        applyLayer(ctx);
+    }
+}
+
+/** Backwards-compatible addFileToLayer that now delegates to moveFileToLayer */
+export function addFileToLayer(ctx: CanvasContext, layerId: string, path: string) {
+    moveFileToLayer(ctx, layerId, path);
+}
+
+export function removeFileFromLayer(ctx: CanvasContext, layerId: string, path: string) {
+    const layer = layerState.layers.find(l => l.id === layerId);
+    if (!layer || layer.id === 'default') return;
+    if (layer.files[path]) {
+        delete layer.files[path];
+
+        // Remove the moved-out tracking from default layer
+        const defaultLayer = layerState.layers.find(l => l.id === 'default');
+        if (defaultLayer && defaultLayer.files[path]) {
+            delete defaultLayer.files[path];
+        }
+
+        saveLayers(ctx);
+        renderLayersUI(ctx);
+        if (layer.id === layerState.activeLayerId) applyLayer(ctx);
+    }
+}
+
+export function addSectionToLayer(ctx: CanvasContext, layerId: string, path: string, startString: string, endString: string) {
+    const layer = layerState.layers.find(l => l.id === layerId);
+    if (!layer || layer.id === 'default') return;
+    if (!layer.files[path]) {
+        layer.files[path] = { sections: [] };
+    }
+    layer.files[path].sections.push({ startString, endString });
+    saveLayers(ctx);
+    if (layer.id === layerState.activeLayerId) applyLayer(ctx);
+}
+
+export function setActiveLayer(ctx: CanvasContext, id: string) {
+    layerState.activeLayerId = id;
+    localStorage.setItem(`gitcanvas:activeLayer:${ctx.snap().context.repoPath}`, id);
+    renderLayersUI(ctx);
+    applyLayer(ctx);
+
+    // User feedback
+    const layer = layerState.layers.find(l => l.id === id);
+    if (layer && id !== 'default') {
+        const fileCount = Object.keys(layer.files).length;
+        if (fileCount === 0) {
+            import('./utils').then(m => m.showToast(
+                `Layer "${layer.name}" is empty — right-click cards to move them here`,
+                'info'
+            ));
+        } else {
+            import('./utils').then(m => m.showToast(
+                `Switched to "${layer.name}" (${fileCount} files)`,
+                'info'
+            ));
+        }
+    } else if (id === 'default') {
+        import('./utils').then(m => m.showToast('Switched to All Files', 'info'));
+    }
+}
+
+export function getActiveLayer(): LayerData | null {
+    if (layerState.activeLayerId === 'default') return null;
+    return layerState.layers.find(l => l.id === layerState.activeLayerId) || null;
+}
+
+/**
+ * Get which layer a file belongs to (returns null if it's only in default/visible everywhere)
+ */
+export function getFileLayer(path: string): { layerId: string; layerName: string } | null {
+    for (const layer of layerState.layers) {
+        if (layer.id === 'default') continue;
+        if (layer.files[path]) {
+            return { layerId: layer.id, layerName: layer.name };
+        }
+    }
+    return null;
+}
+
+/**
+ * Check if a file has been moved out of the default layer to another layer
+ */
+export function isFileMovedFromDefault(path: string): boolean {
+    const defaultLayer = layerState.layers.find(l => l.id === 'default');
+    if (!defaultLayer) return false;
+    return !!(defaultLayer.files[path] && (defaultLayer.files[path] as any).__movedTo);
+}
+
+/**
+ * Navigate to a file that might be in another layer.
+ * Switches to the correct layer and returns true if found.
+ */
+export function navigateToFileInLayer(ctx: CanvasContext, path: string): boolean {
+    const fileLayer = getFileLayer(path);
+    if (fileLayer && fileLayer.layerId !== layerState.activeLayerId) {
+        setActiveLayer(ctx, fileLayer.layerId);
+        return true; // Layer was switched
+    }
+    return false; // No layer switch needed
+}
+
+export function applyLayer(ctx: CanvasContext) {
+    const state = ctx.snap().context;
+    const commitHash = state.currentCommitHash || 'allfiles';
+    import('./repo').then(({ selectCommit, renderAllFilesOnCanvas, populateChangedFilesPanel }) => {
+        if (commitHash === 'allfiles' && ctx.allFilesData) {
+            renderAllFilesOnCanvas(ctx, ctx.allFilesData);
+            // Also repopulate the changed files panel with the new layer filter
+            if (ctx.commitFilesData) {
+                populateChangedFilesPanel(ctx.commitFilesData);
+            }
+        } else if (commitHash && commitHash !== 'allfiles') {
+            selectCommit(ctx, commitHash, true);
+        }
+    });
+}
+
+function LayerItem({ layer, activeId, ctx }: { layer: LayerData; activeId: string; ctx: CanvasContext }) {
+    const isActive = layer.id === activeId;
+    const fileCount = Object.keys(layer.files).filter(k => {
+        // Don't count moved-out tracking entries in default layer
+        if (layer.id === 'default') return !(layer.files[k] as any).__movedTo;
+        return true;
+    }).length;
+
+    return (
+        <div
+            className={`layers-bar-item ${isActive ? 'active' : ''}`}
+            onClick={() => setActiveLayer(ctx, layer.id)}
+            onContextMenu={(e) => {
+                e.preventDefault();
+                if (layer.id === 'default') return;
+                if (confirm(`Delete layer "${layer.name}"?`)) {
+                    deleteLayer(ctx, layer.id);
+                }
+            }}
+            onDoubleClick={(e) => {
+                e.preventDefault();
+                if (layer.id === 'default') return;
+                const newName = prompt('Rename layer:', layer.name);
+                if (newName) {
+                    renameLayer(ctx, layer.id, newName);
+                }
+            }}
+            title={layer.id === 'default' ? 'Default Layer' : 'Double-click to rename, Right-click to delete'}
+        >
+            <span className="layer-name">{layer.name}</span>
+            {layer.id !== 'default' && fileCount > 0 && (
+                <span className="layer-badge">{fileCount}</span>
+            )}
+        </div>
+    );
+}
+
+export function renderLayersUI(ctx: CanvasContext) {
+    const container = document.getElementById('layersBarContainer');
+    if (!container) return;
+
+    render(
+        <div className="layers-bar">
+            {layerState.layers.map(l => (
+                <LayerItem key={`${l.id}_${Object.keys(l.files).length}`} layer={l} activeId={layerState.activeLayerId} ctx={ctx} />
+            ))}
+            <button
+                className="layers-bar-add"
+                id="newLayerBtn"
+                title="Create a new Layer"
+            >
+                + New Layer
+            </button>
+        </div>,
+        container
+    );
+
+    // Attach click handler via DOM (Melina onClick doesn't reliably bind here)
+    const btn = document.getElementById('newLayerBtn');
+    if (btn) {
+        btn.onclick = () => {
+            const name = prompt('Enter a name for the new layer:');
+            if (name) createLayer(ctx, name);
+        };
+    }
+}
+
+// UI to configure section extraction
+export function promptAddSection(ctx: CanvasContext, path: string, layerId?: string) {
+    const layer = layerId ? layerState.layers.find(l => l.id === layerId) : getActiveLayer();
+    if (!layer || layer.id === 'default') {
+        alert("Please select a valid layer to add sections to it.");
+        return;
+    }
+    const startStr = prompt(`Extracting ${path.split('/').pop()} into "${layer.name}"\nEnter starting string for the section (leave blank to include whole file):`);
+    // If user presses Cancel, startStr is null. If they just hit Enter, startStr is ''.
+    if (startStr === null) return;
+    const endStr = prompt("Enter ending string for the section (leave blank for end of file):");
+    if (endStr === null) return;
+
+    addSectionToLayer(ctx, layer.id, path, startStr, endStr);
+}
+
+export function filterFileContentByLayer(content: string, sections: FileSection[]): { filteredContent: string; visibleLineIndices: Set<number> } {
+    if (!content) return { filteredContent: '', visibleLineIndices: new Set() };
+    if (!sections || sections.length === 0) {
+        return { filteredContent: content, visibleLineIndices: new Set(content.split('\n').map((_, i) => i)) };
+    }
+
+    const lines = content.split('\n');
+    const visibleLines = new Set<number>();
+
+    for (const sec of sections) {
+        let inSection = false;
+        let startConditionMet = false;
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+
+            if (!inSection && line.includes(sec.startString)) {
+                inSection = true;
+                startConditionMet = true;
+            }
+
+            if (inSection) {
+                visibleLines.add(i);
+
+                // End after we add the closing line
+                if (line.includes(sec.endString) && (!sec.startString || line !== sec.startString || !startConditionMet)) {
+                    inSection = false;
+                }
+            }
+        }
+    }
+
+    return { filteredContent: content, visibleLineIndices: visibleLines };
+}

package/app/lib/loading.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+/**
+ * Loading progress overlay.
+ * Uses melina/client JSX + render.
+ */
+import { render } from 'melina/client';
+import type { CanvasContext } from './context';
+
+function LoadingOverlayContent({ message, sub }: { message: string; sub: string }) {
+    return (
+        <div className="loading-content">
+            <div className="loading-spinner"></div>
+            <div className="loading-message">{message}</div>
+            <div className="loading-sub">{sub}</div>
+        </div>
+    );
+}
+
+let currentMessage = '';
+let currentSub = '';
+
+export function showLoadingProgress(ctx: CanvasContext, message: string) {
+    if (!ctx.loadingOverlay) {
+        ctx.loadingOverlay = document.createElement('div');
+        ctx.loadingOverlay.className = 'loading-overlay';
+        document.body.appendChild(ctx.loadingOverlay);
+    }
+    currentMessage = message;
+    currentSub = '';
+    render(<LoadingOverlayContent message={currentMessage} sub={currentSub} />, ctx.loadingOverlay);
+    ctx.loadingOverlay.classList.add('active');
+}
+
+export function updateLoadingProgress(ctx: CanvasContext, sub: string) {
+    if (ctx.loadingOverlay) {
+        currentSub = sub;
+        render(<LoadingOverlayContent message={currentMessage} sub={currentSub} />, ctx.loadingOverlay);
+    }
+}
+
+export function hideLoadingProgress(ctx: CanvasContext) {
+    if (ctx.loadingOverlay) {
+        ctx.loadingOverlay.classList.remove('active');
+    }
+}