gitmaps 1.0.0

package/app/lib/tab-diff.ts

@@ -0,0 +1,238 @@
+// @ts-nocheck
+/**
+ * Tab diff — side-by-side diff viewer for comparing two open tabs.
+ * Uses a simple LCS-based diff algorithm to highlight additions/removals.
+ */
+import { getOpenTabs, getActiveTabIndex } from './file-tabs';
+
+// ─── Simple LCS diff algorithm ──────────────────────
+
+interface DiffLine {
+    type: 'same' | 'add' | 'remove';
+    content: string;
+    lineNo: number;
+}
+
+function computeDiff(a: string[], b: string[]): { left: DiffLine[]; right: DiffLine[] } {
+    // Build LCS table
+    const m = a.length, n = b.length;
+    const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+
+    for (let i = 1; i <= m; i++) {
+        for (let j = 1; j <= n; j++) {
+            dp[i][j] = a[i - 1] === b[j - 1]
+                ? dp[i - 1][j - 1] + 1
+                : Math.max(dp[i - 1][j], dp[i][j - 1]);
+        }
+    }
+
+    // Backtrack to find diff
+    const left: DiffLine[] = [];
+    const right: DiffLine[] = [];
+    let i = m, j = n;
+
+    const resultPairs: Array<{ type: 'same' | 'add' | 'remove'; aLine?: string; bLine?: string; aNo?: number; bNo?: number }> = [];
+
+    while (i > 0 || j > 0) {
+        if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
+            resultPairs.unshift({ type: 'same', aLine: a[i - 1], bLine: b[j - 1], aNo: i, bNo: j });
+            i--; j--;
+        } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+            resultPairs.unshift({ type: 'add', bLine: b[j - 1], bNo: j });
+            j--;
+        } else {
+            resultPairs.unshift({ type: 'remove', aLine: a[i - 1], aNo: i });
+            i--;
+        }
+    }
+
+    for (const pair of resultPairs) {
+        if (pair.type === 'same') {
+            left.push({ type: 'same', content: pair.aLine!, lineNo: pair.aNo! });
+            right.push({ type: 'same', content: pair.bLine!, lineNo: pair.bNo! });
+        } else if (pair.type === 'remove') {
+            left.push({ type: 'remove', content: pair.aLine!, lineNo: pair.aNo! });
+            right.push({ type: 'same', content: '', lineNo: 0 }); // spacer
+        } else {
+            left.push({ type: 'same', content: '', lineNo: 0 }); // spacer
+            right.push({ type: 'add', content: pair.bLine!, lineNo: pair.bNo! });
+        }
+    }
+
+    return { left, right };
+}
+
+// ─── Diff panel rendering ───────────────────────────
+
+let diffOverlay: HTMLElement | null = null;
+
+function escapeHtml(s: string): string {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function renderDiffPanel(leftContent: string, rightContent: string, leftName: string, rightName: string) {
+    closeDiffPanel();
+
+    const leftLines = leftContent.split('\n');
+    const rightLines = rightContent.split('\n');
+    const { left, right } = computeDiff(leftLines, rightLines);
+
+    // Count changes
+    const adds = right.filter(l => l.type === 'add').length;
+    const removes = left.filter(l => l.type === 'remove').length;
+
+    const overlay = document.createElement('div');
+    overlay.className = 'tab-diff-overlay';
+    overlay.innerHTML = `
+        <div class="tab-diff-container">
+            <div class="tab-diff-header">
+                <div class="tab-diff-title">
+                    <span class="tab-diff-icon">⇄</span>
+                    Comparing Files
+                    <span class="tab-diff-stats">
+                        <span class="tab-diff-stat-add">+${adds}</span>
+                        <span class="tab-diff-stat-rm">−${removes}</span>
+                    </span>
+                </div>
+                <button class="tab-diff-close" title="Close diff (Esc)">✕</button>
+            </div>
+            <div class="tab-diff-names">
+                <div class="tab-diff-name tab-diff-name-left">📄 ${escapeHtml(leftName)}</div>
+                <div class="tab-diff-name tab-diff-name-right">📄 ${escapeHtml(rightName)}</div>
+            </div>
+            <div class="tab-diff-body">
+                <div class="tab-diff-pane tab-diff-left"></div>
+                <div class="tab-diff-divider"></div>
+                <div class="tab-diff-pane tab-diff-right"></div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+    diffOverlay = overlay;
+
+    const leftPane = overlay.querySelector('.tab-diff-left')!;
+    const rightPane = overlay.querySelector('.tab-diff-right')!;
+
+    // Render lines
+    const renderLines = (pane: Element, lines: DiffLine[]) => {
+        const frag = document.createDocumentFragment();
+        for (const line of lines) {
+            const el = document.createElement('div');
+            el.className = `tab-diff-line tab-diff-${line.type}`;
+
+            const gutter = document.createElement('span');
+            gutter.className = 'tab-diff-gutter';
+            gutter.textContent = line.lineNo > 0 ? String(line.lineNo) : ' ';
+            el.appendChild(gutter);
+
+            const marker = document.createElement('span');
+            marker.className = 'tab-diff-marker';
+            marker.textContent = line.type === 'add' ? '+' : line.type === 'remove' ? '−' : ' ';
+            el.appendChild(marker);
+
+            const code = document.createElement('span');
+            code.className = 'tab-diff-code';
+            code.textContent = line.content;
+            el.appendChild(code);
+
+            frag.appendChild(el);
+        }
+        pane.appendChild(frag);
+    };
+
+    renderLines(leftPane, left);
+    renderLines(rightPane, right);
+
+    // Sync scroll between panes
+    let syncing = false;
+    const syncScroll = (source: Element, target: Element) => {
+        if (syncing) return;
+        syncing = true;
+        target.scrollTop = source.scrollTop;
+        syncing = false;
+    };
+    leftPane.addEventListener('scroll', () => syncScroll(leftPane, rightPane));
+    rightPane.addEventListener('scroll', () => syncScroll(rightPane, leftPane));
+
+    // Close on button/overlay/Esc
+    overlay.querySelector('.tab-diff-close')!.addEventListener('click', closeDiffPanel);
+    overlay.addEventListener('click', (e) => {
+        if ((e.target as HTMLElement).classList.contains('tab-diff-overlay')) closeDiffPanel();
+    });
+
+    const onEsc = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') { closeDiffPanel(); document.removeEventListener('keydown', onEsc); }
+    };
+    document.addEventListener('keydown', onEsc);
+}
+
+function closeDiffPanel() {
+    if (diffOverlay) {
+        diffOverlay.remove();
+        diffOverlay = null;
+    }
+}
+
+// ─── Tab selection UI ───────────────────────────────
+
+export function openTabDiffSelector() {
+    const tabs = getOpenTabs();
+    if (tabs.length < 2) {
+        alert('Open at least 2 files in tabs to compare them.');
+        return;
+    }
+
+    const activeIdx = getActiveTabIndex();
+
+    // If exactly 2 tabs, diff them immediately
+    if (tabs.length === 2) {
+        renderDiffPanel(
+            tabs[0].originalContent || tabs[0].rendered.full_raw || '',
+            tabs[1].originalContent || tabs[1].rendered.full_raw || '',
+            tabs[0].name,
+            tabs[1].name
+        );
+        return;
+    }
+
+    // More than 2 tabs — show picker for the second file
+    const modal = document.createElement('div');
+    modal.className = 'tab-diff-picker-overlay';
+    modal.innerHTML = `
+        <div class="tab-diff-picker">
+            <div class="tab-diff-picker-title">Compare "${escapeHtml(tabs[activeIdx].name)}" with:</div>
+            <div class="tab-diff-picker-list"></div>
+        </div>
+    `;
+
+    const list = modal.querySelector('.tab-diff-picker-list')!;
+    for (let i = 0; i < tabs.length; i++) {
+        if (i === activeIdx) continue;
+        const btn = document.createElement('button');
+        btn.className = 'tab-diff-picker-item';
+        btn.textContent = `📄 ${tabs[i].name}`;
+        btn.title = tabs[i].path;
+        btn.addEventListener('click', () => {
+            modal.remove();
+            renderDiffPanel(
+                tabs[activeIdx].originalContent || tabs[activeIdx].rendered.full_raw || '',
+                tabs[i].originalContent || tabs[i].rendered.full_raw || '',
+                tabs[activeIdx].name,
+                tabs[i].name
+            );
+        });
+        list.appendChild(btn);
+    }
+
+    document.body.appendChild(modal);
+
+    // Close on overlay click or Esc
+    modal.addEventListener('click', (e) => {
+        if ((e.target as HTMLElement).classList.contains('tab-diff-picker-overlay')) modal.remove();
+    });
+    const onEsc = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') { modal.remove(); document.removeEventListener('keydown', onEsc); }
+    };
+    document.addEventListener('keydown', onEsc);
+}

package/app/lib/user.tsx

@@ -0,0 +1,133 @@
+/**
+ * Client-side auth — fetches user session, manages login/logout UI, favorites
+ */
+
+interface UserData {
+    id: number;
+    username: string;
+    displayName: string;
+    avatarUrl: string;
+}
+
+let currentUser: UserData | null = null;
+let userFavorites: { repoUrl: string; repoName: string }[] = [];
+
+/** Initialize auth UI — call once on page load */
+export async function setupAuth() {
+    try {
+        const res = await fetch('/api/auth/me');
+        const data = await res.json();
+
+        if (data.authenticated && data.user) {
+            currentUser = data.user;
+            userFavorites = data.favorites || [];
+            showLoggedIn(data.user);
+        } else {
+            showLoggedOut();
+        }
+    } catch {
+        showLoggedOut();
+    }
+
+    // Wire up logout button
+    const logoutBtn = document.getElementById('logoutBtn');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async () => {
+            try {
+                await fetch('/api/auth/me', { method: 'POST' });
+                currentUser = null;
+                userFavorites = [];
+                showLoggedOut();
+            } catch { }
+        });
+    }
+
+    // Wire up favorite toggle
+    const favBtn = document.getElementById('favToggle');
+    if (favBtn) {
+        favBtn.addEventListener('click', toggleFavorite);
+    }
+}
+
+function showLoggedIn(user: UserData) {
+    const loggedOut = document.getElementById('userLoggedOut');
+    const loggedIn = document.getElementById('userLoggedIn');
+    const avatar = document.getElementById('userAvatar') as HTMLImageElement;
+    const name = document.getElementById('userName');
+
+    if (loggedOut) loggedOut.style.display = 'none';
+    if (loggedIn) loggedIn.style.display = 'flex';
+    if (avatar) avatar.src = user.avatarUrl;
+    if (name) name.textContent = user.displayName || user.username;
+}
+
+function showLoggedOut() {
+    const loggedOut = document.getElementById('userLoggedOut');
+    const loggedIn = document.getElementById('userLoggedIn');
+
+    if (loggedOut) loggedOut.style.display = '';
+    if (loggedIn) loggedIn.style.display = 'none';
+}
+
+/** Update the favorite star for the currently loaded repo */
+export function updateFavoriteStar(repoUrl?: string) {
+    const favBtn = document.getElementById('favToggle');
+    if (!favBtn || !currentUser) return;
+
+    const url = repoUrl || getCurrentRepoUrl();
+    if (!url) {
+        favBtn.style.display = 'none';
+        return;
+    }
+
+    favBtn.style.display = '';
+    const isFav = userFavorites.some(f => f.repoUrl === url);
+    favBtn.classList.toggle('favorited', isFav);
+}
+
+async function toggleFavorite() {
+    if (!currentUser) return;
+
+    const repoUrl = getCurrentRepoUrl();
+    if (!repoUrl) return;
+
+    const isFav = userFavorites.some(f => f.repoUrl === repoUrl);
+    const action = isFav ? 'remove' : 'add';
+    const repoName = document.querySelector('.commit-hash-label')?.textContent || '';
+
+    try {
+        const res = await fetch('/api/auth/favorites', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ action, repoUrl, repoName }),
+        });
+
+        const data = await res.json();
+        if (data.ok) {
+            if (action === 'add') {
+                userFavorites.push({ repoUrl, repoName });
+            } else {
+                userFavorites = userFavorites.filter(f => f.repoUrl !== repoUrl);
+            }
+            updateFavoriteStar(repoUrl);
+        }
+    } catch { }
+}
+
+function getCurrentRepoUrl(): string {
+    // Get from hash (e.g. #C:\Code\project or #https://github.com/user/repo)
+    const hash = location.hash.slice(1);
+    if (hash) return hash;
+
+    return '';
+}
+
+/** Get the current user for other modules */
+export function getUser() {
+    return currentUser;
+}
+
+/** Get user favorites list */
+export function getFavorites() {
+    return userFavorites;
+}

package/app/lib/utils.ts

@@ -0,0 +1,78 @@
+// @ts-nocheck
+/**
+ * General-purpose utilities — escaping, formatting, icons, toast.
+ */
+import { measure } from 'measure-fn';
+
+// ─── HTML escaping ───────────────────────────────────────
+export function escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// ─── Date formatting ─────────────────────────────────────
+export function formatDate(dateStr: string): string {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diff = (now as any) - (date as any);
+    if (diff < 60000) return 'just now';
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+    if (diff < 604800000) return `${Math.floor(diff / 86400000)}d ago`;
+    return date.toLocaleDateString();
+}
+
+// ─── File size formatting ────────────────────────────────
+export function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ─── File icon class from extension ──────────────────────
+export function getFileIconClass(ext: string): string {
+    const extMap: Record<string, string> = {
+        'js': 'js', 'jsx': 'js', 'mjs': 'js',
+        'ts': 'ts', 'tsx': 'ts',
+        'html': 'html', 'htm': 'html',
+        'css': 'css', 'scss': 'css', 'sass': 'css', 'less': 'css',
+        'json': 'json',
+        'md': 'md', 'markdown': 'md',
+        'py': 'py',
+        'go': 'go',
+        'rs': 'rs'
+    };
+    return extMap[ext] || '';
+}
+
+// ─── SVG file icon ───────────────────────────────────────
+export function getFileIcon(type: string, ext: string): string {
+    if (type === 'folder') {
+        return `<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>
+        </svg>`;
+    }
+    return `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+        <polyline points="14 2 14 8 20 8"/>
+    </svg>`;
+}
+
+// ─── Toast notifications ─────────────────────────────────
+export function showToast(message: string, type = 'info') {
+    measure('toast:show', () => {
+        let container = document.querySelector('.toast-container') as HTMLElement;
+        if (!container) {
+            container = document.createElement('div');
+            container.className = 'toast-container';
+            document.body.appendChild(container);
+        }
+
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        toast.textContent = message;
+        container.appendChild(toast);
+        setTimeout(() => toast.remove(), 3000);
+    });
+}