@youtyan/code-viewer 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Local browser-based code and git diff viewer",
   "type": "module",
   "bin": {

package/web/app.js

@@ -6764,6 +6764,8 @@
     let REPO_SIDEBAR_REF = null;
     let REPO_SIDEBAR_LOAD_REF = null;
     let REPO_SIDEBAR_LOAD = null;
+    let SIDEBAR_FILES = [];
+    let SIDEBAR_ON_FILE_CLICK;
     let PENDING_G_SCOPE = null;
     let PENDING_G_UNTIL = 0;
     let SOURCE_CURSOR = null;
@@ -7239,8 +7241,10 @@
         }
         if (f2.type === "tree") {
           node.explicit = true;
-          if (f2.children_omitted === true)
+          if (f2.children_omitted === true) {
             node.children_omitted = true;
+            node.children_omitted_reason = f2.children_omitted_reason;
+          }
           continue;
         }
         node.files.push(f2);
@@ -7283,12 +7287,18 @@
             li.dataset.explicit = "true";
           if (dir.children_omitted) {
             li.classList.add("children-omitted");
-            li.title = "Directory contents are intentionally not listed";
+            li.classList.add(dir.children_omitted_reason === "ignored" ? "children-omitted-ignored" : "children-omitted-internal");
+            li.title = dir.children_omitted_reason === "ignored" ? "Ignored directory: open the detail pane to browse its contents" : "Internal Git metadata is not browsed";
           }
           li.style.setProperty("--lvl-pad", 12 + depth * 14 + "px");
           const chev = document.createElement("span");
-          chev.className = "chev";
-          setChevronIcon(chev);
+          if (dir.children_omitted) {
+            chev.className = "chev-spacer";
+            chev.setAttribute("aria-hidden", "true");
+          } else {
+            chev.className = "chev";
+            setChevronIcon(chev);
+          }
           li.appendChild(chev);
           const dirIcon = document.createElement("span");
           dirIcon.className = "dir-icon";
@@ -7302,9 +7312,9 @@
           label.appendChild(dn);
           if (dir.children_omitted) {
             const omitted = document.createElement("span");
-            omitted.className = "dir-omitted";
-            omitted.textContent = "skipped";
-            omitted.title = "Directory contents are intentionally not listed";
+            omitted.className = "dir-omitted " + (dir.children_omitted_reason === "ignored" ? "dir-omitted-ignored" : "dir-omitted-internal");
+            omitted.textContent = dir.children_omitted_reason === "ignored" ? "ignored" : "private";
+            omitted.title = dir.children_omitted_reason === "ignored" ? "Tree expansion is skipped, but the directory detail can be opened" : "This directory cannot be opened from the browser";
             label.appendChild(omitted);
           }
           li.appendChild(label);
@@ -7329,12 +7339,24 @@
               STATE.collapsedDirs.delete(dir.path);
             localStorage.setItem("gdp:collapsed-dirs", JSON.stringify([...STATE.collapsedDirs]));
           };
-          chev.addEventListener("click", toggleDir);
-          dirIcon.addEventListener("click", toggleDir);
+          if (!dir.children_omitted) {
+            chev.addEventListener("click", toggleDir);
+            dirIcon.addEventListener("click", toggleDir);
+          }
           if (onFileClick) {
             li.addEventListener("click", (e2) => {
               e2.stopPropagation();
-              onFileClick({ path: dir.path, display_path: dir.path, type: "tree", children_omitted: dir.children_omitted });
+              if (dir.children_omitted_reason === "internal")
+                return;
+              if (dir.children_omitted_reason !== "internal") {
+                onFileClick({
+                  path: dir.path,
+                  display_path: dir.path,
+                  type: "tree",
+                  children_omitted: dir.children_omitted,
+                  children_omitted_reason: dir.children_omitted_reason
+                });
+              }
               focusSidebarPanel();
             });
           } else {
@@ -7416,6 +7438,8 @@
       ul.innerHTML = "";
       ul.classList.toggle("tree", STATE.sbView === "tree");
       STATE.files = files;
+      SIDEBAR_FILES = files;
+      SIDEBAR_ON_FILE_CLICK = onFileClick;
       if (!onFileClick)
         REPO_SIDEBAR_REF = null;
       if (STATE.sbView === "tree") {
@@ -7550,13 +7574,43 @@
         card.scrollIntoView({ behavior: "smooth", block: "start" });
       }
     }
-    function markActive(path) {
+    function sidebarAncestorDirs(path) {
+      const parts = path.split("/").filter(Boolean);
+      const dirs = [];
+      for (let i2 = 1;i2 < parts.length; i2++)
+        dirs.push(parts.slice(0, i2).join("/"));
+      return dirs;
+    }
+    function expandSidebarAncestors(path) {
+      if (STATE.sbView !== "tree")
+        return;
+      let changed = false;
+      for (const dir of sidebarAncestorDirs(path)) {
+        if (STATE.collapsedDirs.delete(dir))
+          changed = true;
+        const row = document.querySelector('#filelist .tree-dir[data-dirpath="' + CSS.escape(dir) + '"]');
+        row?.classList.remove("collapsed");
+        const icon = row?.querySelector(".dir-icon");
+        if (icon)
+          setFolderIcon(icon, false);
+      }
+      if (changed)
+        localStorage.setItem("gdp:collapsed-dirs", JSON.stringify([...STATE.collapsedDirs]));
+    }
+    function markActive(path, options = {}) {
       STATE.activeFile = path;
+      if (options.reveal && STATE.sbView === "tree")
+        expandSidebarAncestors(path);
       $$("#filelist li").forEach((li) => {
         const itemPath = li.dataset.path || li.dataset.dirpath;
         if (itemPath)
           li.classList.toggle("active", itemPath === path);
       });
+      if (options.reveal) {
+        const active = document.querySelector("#filelist li.active[data-path], #filelist .tree-dir.active[data-dirpath]");
+        if (active)
+          requestAnimationFrame(() => scrollSidebarItemIntoView(active));
+      }
     }
     function applyViewedState() {
       $$("#filelist li[data-path]").forEach((li) => {
@@ -8239,7 +8293,8 @@
           path: entry.path,
           display_path: entry.path,
           type: entry.type,
-          children_omitted: entry.children_omitted
+          children_omitted: entry.children_omitted,
+          children_omitted_reason: entry.children_omitted_reason
         }));
         renderSidebar(files, (file) => {
           if (file.type === "tree") {
@@ -8266,7 +8321,7 @@
       return load2;
     }
     function activateRepoSidebarPath(currentPath) {
-      markActive(currentPath);
+      markActive(currentPath, { reveal: true });
       applyFilter();
     }
     function createPlaceholder(f2) {
@@ -9213,6 +9268,8 @@
     function sourceDisplayKind(path) {
       if (isVideo(path))
         return "video";
+      if (isAudio(path))
+        return "audio";
       if (isImage(path))
         return "image";
       if (/\.pdf$/i.test(path))
@@ -9259,10 +9316,28 @@
         return "MP4 video";
       if (ext === "webm")
         return "WebM video";
+      if (ext === "mp3")
+        return "MP3 audio";
+      if (ext === "wav")
+        return "WAV audio";
+      if (ext === "ogg")
+        return "Ogg audio";
+      if (ext === "flac")
+        return "FLAC audio";
+      if (ext === "m4a")
+        return "M4A audio";
+      if (ext === "aac")
+        return "AAC audio";
+      if (ext === "opus")
+        return "Opus audio";
+      if (ext === "mid" || ext === "midi")
+        return "MIDI file";
       if (mime?.startsWith("image/"))
         return "Image";
       if (mime?.startsWith("video/"))
         return "Video";
+      if (mime?.startsWith("audio/"))
+        return "Audio";
       if (mime === "application/pdf")
         return "PDF document";
       if (fallback === "unsupported file")
@@ -9734,6 +9809,12 @@
         video.controls = true;
         video.preload = "metadata";
         view.appendChild(video);
+      } else if (mediaKind === "audio") {
+        const audio = document.createElement("audio");
+        audio.src = url;
+        audio.controls = true;
+        audio.preload = "metadata";
+        view.appendChild(audio);
       } else if (mediaKind === "pdf") {
         const frame = document.createElement("iframe");
         frame.src = url;
@@ -9900,7 +9981,7 @@
           renderSourceUnsupported(card, target);
           return;
         }
-        if (displayKind === "image" || displayKind === "video" || displayKind === "pdf") {
+        if (displayKind === "image" || displayKind === "video" || displayKind === "audio" || displayKind === "pdf") {
           if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
             return;
           finishSourceLoad(req);
@@ -10296,9 +10377,10 @@
         b2.addEventListener("scroll", () => mirror(b2, a2), { passive: true });
       });
     }
-    const MEDIA_RE = /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico|mp4|webm|mov)(\?.*)?$/i;
+    const MEDIA_RE = /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico|mp4|webm|mov|mp3|wav|ogg|flac|m4a|aac|opus)(\?.*)?$/i;
     const IMAGE_RE = /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico)(\?.*)?$/i;
     const VIDEO_RE = /\.(mp4|webm|mov)$/i;
+    const AUDIO_RE = /\.(mp3|wav|ogg|flac|m4a|aac|opus)$/i;
     function isMedia(p2) {
       return MEDIA_RE.test(p2);
     }
@@ -10308,6 +10390,9 @@
     function isVideo(p2) {
       return VIDEO_RE.test(p2);
     }
+    function isAudio(p2) {
+      return AUDIO_RE.test(p2);
+    }
     function fileURL(path, ref) {
       return "/_file?path=" + encodeURIComponent(path) + "&ref=" + ref;
     }
@@ -10316,6 +10401,9 @@
       if (isVideo(path)) {
         return '<video src="' + url + '" controls preload="metadata"></video>';
       }
+      if (isAudio(path)) {
+        return '<audio src="' + url + '" controls preload="metadata"></audio>';
+      }
       return '<img src="' + url + '" alt="" loading="lazy">';
     }
     function enhanceMediaCard(file, card) {
@@ -10409,8 +10497,8 @@
       b2.addEventListener("click", () => {
         STATE.sbView = b2.dataset.view || "tree";
         localStorage.setItem("gdp:sbview", STATE.sbView);
-        if (STATE.files && STATE.files.length)
-          renderSidebar(STATE.files);
+        if (SIDEBAR_FILES.length)
+          renderSidebar(SIDEBAR_FILES, SIDEBAR_ON_FILE_CLICK);
       });
     });
     $("#sb-expand-all").addEventListener("click", () => setAllSidebarDirsCollapsed(false));

package/web/style.css

@@ -807,16 +807,14 @@ html, body {
   z-index: 30;
 }
 body[data-focus-scope="sidebar"] #sidebar {
-  background: color-mix(in oklab, var(--bg-soft) 97%, var(--scope-accent) 3%);
-  outline: 1px solid color-mix(in oklab, var(--scope-accent) 58%, transparent);
-  outline-offset: -1px;
-  box-shadow: inset -3px 0 0 var(--scope-accent);
+  background: var(--bg-soft);
+  outline: none;
+  box-shadow: none;
 }
 body[data-focus-scope="main"] #content {
-  background: color-mix(in oklab, var(--bg) 98%, var(--scope-accent) 2%);
-  outline: 1px solid color-mix(in oklab, var(--scope-accent) 58%, transparent);
-  outline-offset: -1px;
-  box-shadow: inset 3px 0 0 var(--scope-accent);
+  background: var(--bg);
+  outline: none;
+  box-shadow: none;
 }
 .sb-head {
   display: flex; justify-content: space-between; align-items: center;
@@ -1102,6 +1100,12 @@ body.gdp-help-page #content {
 #filelist.tree .tree-dir.children-omitted .dir-label {
   border-bottom: 1px dashed var(--border-strong);
 }
+#filelist.tree .tree-dir.children-omitted-ignored {
+  cursor: pointer;
+}
+#filelist.tree .tree-dir.children-omitted-internal {
+  cursor: default;
+}
 #filelist.tree .tree-dir .chev {
   display: flex;
   width: 16px;
@@ -1120,6 +1124,11 @@ body.gdp-help-page #content {
   width: 12px;
   height: 12px;
 }
+#filelist.tree .tree-dir .chev-spacer {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
 #filelist.tree .tree-dir .dir-label {
   min-width: 0;
   display: flex;
@@ -1140,7 +1149,7 @@ body.gdp-help-page #content {
 }
 #filelist.tree .tree-dir .dir-omitted {
   flex: 0 0 auto;
-  max-width: 54px;
+  max-width: 62px;
   overflow: hidden;
   text-overflow: ellipsis;
   border: 1px solid var(--border-muted);
@@ -1151,6 +1160,16 @@ body.gdp-help-page #content {
   line-height: 15px;
   text-transform: uppercase;
 }
+#filelist.tree .tree-dir .dir-omitted-ignored {
+  color: var(--accent);
+  border-color: var(--accent-muted);
+  background: var(--accent-subtle);
+}
+#filelist.tree .tree-dir .dir-omitted-internal {
+  color: var(--fg-subtle);
+  border-color: var(--border-muted);
+  background: var(--bg-soft);
+}
 #filelist.tree .tree-dir .dir-icon {
   color: #54aeff;
   flex-shrink: 0;
@@ -3244,7 +3263,7 @@ body.gdp-file-detail-page #empty {
   font-style: italic;
 }
 
-/* ===== Media (binary image/video) ===== */
+/* ===== Media (binary image/video/audio) ===== */
 .gdp-media {
   display: flex;
   gap: 16px;
@@ -3280,7 +3299,8 @@ body.gdp-file-detail-page #empty {
   color: var(--danger);
 }
 .gdp-media img,
-.gdp-media video {
+.gdp-media video,
+.gdp-media audio {
   max-width: 100%;
   max-height: 70vh;
   border: 1px solid var(--border);
@@ -3295,6 +3315,12 @@ body.gdp-file-detail-page #empty {
   background-position: 0 0, 0 8px, 8px -8px, -8px 0;
   object-fit: contain;
 }
+.gdp-media audio {
+  width: min(100%, 480px);
+  max-height: none;
+  padding: 8px;
+  background-image: none;
+}
 .gdp-media .media-empty {
   width: 100%;
   min-height: 120px;

package/web-src/server/git.ts

@@ -18,8 +18,11 @@ export type GitTreeEntry = {
   path: string;
   type: 'tree' | 'blob' | 'commit';
   children_omitted?: true;
+  children_omitted_reason?: 'ignored' | 'internal';
 };
 
+const WORKTREE_RECURSIVE_DEPTH_LIMIT = 32;
+
 function run(args: string[], cwd: string): { code: number; stdout: string; stderr: string } {
   const proc = Bun.spawnSync(args, { cwd, stdout: 'pipe', stderr: 'pipe' });
   return {
@@ -156,24 +159,85 @@ function sortTreeEntries(entries: GitTreeEntry[]): GitTreeEntry[] {
   });
 }
 
-function worktreeDirectChildren(cwd: string, path: string): GitTreeEntry[] {
+function ignoredWorktreeDirectories(cwd: string, path: string): Set<string> {
   const base = normalizeTreePath(path);
-  const dir = join(cwd, base);
-  try {
-    return sortTreeEntries(readdirSync(dir, { withFileTypes: true }).map((entry) => {
-      const entryPath = base ? `${base}/${entry.name}` : entry.name;
-      const type = entry.isDirectory()
-        ? hasDotGitEntry(join(dir, entry.name)) ? 'commit' as const : 'tree' as const
-        : 'blob' as const;
-      return {
-        name: entry.name,
+  const args = ['git', '-c', 'core.quotepath=false', 'ls-files', '--others', '--ignored', '--exclude-standard', '--directory', '-z'];
+  if (base) args.push('--', `${base}/`);
+  const proc = Bun.spawnSync(args, {
+    cwd,
+    stdout: 'pipe',
+    stderr: 'ignore',
+  });
+  if (proc.exitCode !== 0) return new Set();
+  return new Set(new TextDecoder().decode(proc.stdout)
+    .split('\0')
+    .filter(entry => entry.endsWith('/'))
+    .map(entry => entry.replace(/\/+$/g, ''))
+    .filter(entry => entry && entry !== base));
+}
+
+function worktreeEntryFromDirent(base: string, dir: string, name: string, isDirectory: boolean, ignoredDirectories: Set<string>): GitTreeEntry {
+  const entryPath = base ? `${base}/${name}` : name;
+  const type = isDirectory
+    ? hasDotGitEntry(join(dir, name)) ? 'commit' as const : 'tree' as const
+    : 'blob' as const;
+  return type === 'tree' && (name === '.git' || ignoredDirectories.has(entryPath))
+    ? {
+        name,
         path: entryPath,
         type,
-      };
-    }));
+        children_omitted: true,
+        children_omitted_reason: name === '.git' ? 'internal' : 'ignored',
+      }
+    : { name, path: entryPath, type };
+}
+
+function worktreeFilesystemEntries(cwd: string, path: string, recursive: boolean): GitTreeEntry[] {
+  const base = normalizeTreePath(path);
+  const root = join(cwd, base);
+  const ignoredDirectories = ignoredWorktreeDirectories(cwd, base);
+  let directEntries: GitTreeEntry[];
+  try {
+    const dirents = readdirSync(root, { withFileTypes: true });
+    directEntries = sortTreeEntries(dirents
+      .map(entry => worktreeEntryFromDirent(base, root, entry.name, entry.isDirectory(), ignoredDirectories)));
   } catch {
     return [];
   }
+  if (!recursive) return directEntries;
+
+  const fileEntries: GitTreeEntry[] = [];
+  const walk = (dir: string, prefix: string, depth: number) => {
+    if (depth >= WORKTREE_RECURSIVE_DEPTH_LIMIT) return;
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const entryPath = prefix ? `${prefix}/${entry.name}` : entry.name;
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === '.git' || ignoredDirectories.has(entryPath)) {
+          fileEntries.push({
+            name: entry.name,
+            path: entryPath,
+            type: 'tree',
+            children_omitted: true,
+            children_omitted_reason: entry.name === '.git' ? 'internal' : 'ignored',
+          });
+          continue;
+        }
+        if (hasDotGitEntry(full)) continue;
+        walk(full, entryPath, depth + 1);
+      } else if (entry.isFile() || entry.isSymbolicLink()) {
+        fileEntries.push({ name: entry.name, path: entryPath, type: 'blob' });
+      }
+    }
+  };
+  walk(root, base, 0);
+  return combineDirectAndRecursiveFiles(directEntries, fileEntries.sort((a, b) => a.path.localeCompare(b.path)));
 }
 
 function hasDotGitEntry(dir: string): boolean {
@@ -185,20 +249,6 @@ function hasDotGitEntry(dir: string): boolean {
   }
 }
 
-function worktreeRecursiveFiles(cwd: string, path: string): GitTreeEntry[] {
-  const base = normalizeTreePath(path);
-  const trackedArgs = ['git', '-c', 'core.quotepath=false', 'ls-files', '-z'];
-  if (base) trackedArgs.push('--', `${base}/`);
-  const tracked = run(trackedArgs, cwd);
-  const paths = tracked.code === 0 ? tracked.stdout.split('\0').filter(Boolean) : [];
-  paths.push(...untracked(cwd, base));
-  return [...new Set(paths)].filter(Boolean).sort().map((entryPath) => ({
-    name: entryPath.split('/').pop() || entryPath,
-    path: entryPath,
-    type: 'blob' as const,
-  }));
-}
-
 function gitTreeEntries(ref: string, path: string, cwd: string, recursive: boolean): { code: number; entries: GitTreeEntry[]; stderr: string } {
   const base = normalizeTreePath(path);
   const args = ['git', '-c', 'core.quotepath=false', 'ls-tree'];
@@ -227,31 +277,6 @@ function combineDirectAndRecursiveFiles(directEntries: GitTreeEntry[], fileEntri
   ];
 }
 
-function ignoredWorktreePaths(cwd: string, path: string): Set<string> {
-  const base = normalizeTreePath(path);
-  const args = ['git', '-c', 'core.quotepath=false', 'status', '--ignored', '--porcelain=v1', '-z', '--'];
-  if (base) args.push(`${base}/`);
-  const res = run(args, cwd);
-  const ignored = new Set<string>();
-  if (res.code !== 0) return ignored;
-  const records = res.stdout.split('\0').filter(Boolean);
-  for (let i = 0; i < records.length; i++) {
-    const rec = records[i];
-    if (!rec.startsWith('!! ')) continue;
-    const path = rec.slice(3).replace(/\/+$/g, '');
-    if (path) ignored.add(path);
-  }
-  return ignored;
-}
-
-function annotateOmittedWorktreeChildren(entries: GitTreeEntry[], ignoredPaths: Set<string>): GitTreeEntry[] {
-  return entries.map((entry) => {
-    return entry.type === 'tree' && ignoredPaths.has(entry.path)
-      ? { ...entry, children_omitted: true }
-      : entry;
-  });
-}
-
 export function worktreeEntries(cwd: string, path: string): GitTreeEntry[] {
   return listTree('worktree', path, cwd).entries;
 }
@@ -276,12 +301,7 @@ export function listTree(
 ): { code: number; entries: GitTreeEntry[]; stderr: string } {
   const base = normalizeTreePath(path);
   if (ref === 'worktree') {
-    const directEntries = worktreeDirectChildren(cwd, base);
-    const ignoredPaths = ignoredWorktreePaths(cwd, base);
-    const annotatedDirectEntries = annotateOmittedWorktreeChildren(directEntries, ignoredPaths);
-    if (!options.recursive) return { code: 0, entries: annotatedDirectEntries, stderr: '' };
-    const recursiveEntries = worktreeRecursiveFiles(cwd, base);
-    return { code: 0, entries: combineDirectAndRecursiveFiles(annotatedDirectEntries, recursiveEntries), stderr: '' };
+    return { code: 0, entries: worktreeFilesystemEntries(cwd, base, !!options.recursive), stderr: '' };
   }
 
   const direct = gitTreeEntries(ref, base, cwd, false);

package/web-src/server/preview.ts

@@ -180,6 +180,7 @@ function guessMediaKind(path: string) {
   const ext = extname(path).slice(1).toLowerCase();
   if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'bmp', 'ico'].includes(ext)) return 'image';
   if (['mp4', 'webm', 'mov'].includes(ext)) return 'video';
+  if (['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac', 'opus'].includes(ext)) return 'audio';
   return null;
 }
 
@@ -641,7 +642,9 @@ function rawFileHeaders(path: string, size: number | null = null): HeadersInit {
   const mime: Record<string, string> = {
     '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
     '.webp': 'image/webp', '.svg': 'image/svg+xml', '.mp4': 'video/mp4', '.webm': 'video/webm',
-    '.pdf': 'application/pdf',
+    '.mov': 'video/quicktime', '.pdf': 'application/pdf',
+    '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.ogg': 'audio/ogg', '.flac': 'audio/flac',
+    '.m4a': 'audio/mp4', '.aac': 'audio/aac', '.opus': 'audio/ogg',
   };
   const headers: Record<string, string> = {
     'Content-Type': mime[extname(path).toLowerCase()] || 'application/octet-stream',

package/web-src/types.ts

@@ -38,6 +38,7 @@ export type RepoTreeEntry = {
   path: string;
   type: 'tree' | 'blob' | 'commit';
   children_omitted?: true;
+  children_omitted_reason?: 'ignored' | 'internal';
 };
 
 export type RepoTreeResponse = {