repoview 0.3.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "repoview",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "description": "GitHub-like repo browsing for local Git repositories (Markdown, live reload, broken link scanner).",

package/public/app.css

@@ -564,6 +564,36 @@ a {
   text-size-adjust: 100%;
 }
 
+.diff-actions {
+  display: flex;
+  gap: 8px;
+  padding: 10px 14px;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+
+.btn-sm {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--btn);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.btn-sm:hover {
+  background: var(--btnHover);
+}
+
+.diff-truncated {
+  margin: 12px 14px;
+}
+
 .diff-empty {
   margin: 12px;
 }
@@ -701,6 +731,34 @@ a {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 13px;
   font-weight: 600;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.diff-file-link {
+  color: var(--accent);
+}
+
+.diff-file-link:hover {
+  text-decoration: underline;
+}
+
+.diff-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 6px;
+  padding: 2px;
+  border: none;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+.diff-copy-btn:hover {
+  color: var(--accent);
+  background: var(--btnHover);
 }
 
 .d2h-file-header .d2h-tag {
@@ -763,7 +821,8 @@ a {
   transform: rotate(-90deg);
 }
 
-.d2h-file-diff[hidden] {
+/* Diffs start hidden; JS adds .expanded to show them */
+.d2h-file-diff:not(.expanded) {
   display: none;
 }
 

package/public/app.js

@@ -180,21 +180,93 @@ function initTimezoneToggle() {
   update();
 }
 
+function fallbackCopy(text) {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+}
+
 function initDiffCollapse() {
   const wrappers = document.querySelectorAll(".d2h-file-wrapper");
   if (!wrappers.length) return;
 
+  // Diffs are hidden by CSS by default (.d2h-file-diff:not(.expanded)).
+  // Only expand when there are few files — avoids layout/paint cost for large diffs.
+  const shouldExpand = wrappers.length <= 8;
+
+  // Add expand/collapse all buttons
+  const diffWrap = document.querySelector(".diff-wrap");
+  if (diffWrap && wrappers.length > 1) {
+    const bar = document.createElement("div");
+    bar.className = "diff-actions";
+    bar.innerHTML = `<button type="button" class="btn btn-sm" id="expand-all">Expand all</button>
+      <button type="button" class="btn btn-sm" id="collapse-all">Collapse all</button>`;
+    diffWrap.insertBefore(bar, diffWrap.firstChild);
+  }
+
   for (const wrapper of wrappers) {
     const header = wrapper.querySelector(".d2h-file-header");
     const diff = wrapper.querySelector(".d2h-file-diff");
     if (!header || !diff) continue;
 
+    const fileNameEl = header.querySelector(".d2h-file-name");
+    if (fileNameEl && !fileNameEl.querySelector("a")) {
+      const rawName = fileNameEl.textContent.trim();
+      const name = rawName.includes(" → ") ? rawName.split(" → ").pop() : rawName;
+      const link = document.createElement("a");
+      link.className = "diff-file-link";
+      link.href = `/blob/${encodeURI(name)}`;
+      link.textContent = rawName;
+      fileNameEl.textContent = "";
+      fileNameEl.appendChild(link);
+
+      const copyBtn = document.createElement("button");
+      copyBtn.className = "diff-copy-btn";
+      copyBtn.type = "button";
+      copyBtn.setAttribute("aria-label", "Copy filename");
+      copyBtn.innerHTML =
+        '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
+        '<rect x="5" y="5" width="9" height="9" rx="1.5"/>' +
+        '<path d="M3 11V2.5A1.5 1.5 0 0 1 4.5 1H11"/>' +
+        "</svg>";
+      const svgIcon = copyBtn.innerHTML;
+      copyBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const showSuccess = () => {
+          copyBtn.textContent = "\u2713";
+          setTimeout(() => { copyBtn.innerHTML = svgIcon; }, 1500);
+        };
+        if (navigator.clipboard?.writeText) {
+          navigator.clipboard.writeText(name).then(showSuccess).catch(() => {
+            fallbackCopy(name);
+            showSuccess();
+          });
+        } else {
+          fallbackCopy(name);
+          showSuccess();
+        }
+      });
+      fileNameEl.appendChild(copyBtn);
+    }
+
     const toggle = document.createElement("button");
     toggle.className = "diff-toggle";
     toggle.type = "button";
-    toggle.setAttribute("aria-expanded", "true");
     toggle.setAttribute("aria-label", "Toggle file diff");
-    toggle.textContent = "\u25BE";
+
+    if (shouldExpand) {
+      toggle.setAttribute("aria-expanded", "true");
+      toggle.textContent = "\u25BE";
+      diff.classList.add("expanded");
+    } else {
+      toggle.setAttribute("aria-expanded", "false");
+      toggle.textContent = "\u25B8";
+    }
     header.appendChild(toggle);
 
     header.addEventListener("click", (e) => {
@@ -202,9 +274,31 @@ function initDiffCollapse() {
       const expanded = toggle.getAttribute("aria-expanded") === "true";
       toggle.setAttribute("aria-expanded", String(!expanded));
       toggle.textContent = expanded ? "\u25B8" : "\u25BE";
-      diff.hidden = expanded;
+      diff.classList.toggle("expanded");
     });
   }
+
+  document.getElementById("expand-all")?.addEventListener("click", () => {
+    for (const wrapper of wrappers) {
+      const toggle = wrapper.querySelector(".diff-toggle");
+      const diff = wrapper.querySelector(".d2h-file-diff");
+      if (!toggle || !diff) continue;
+      toggle.setAttribute("aria-expanded", "true");
+      toggle.textContent = "\u25BE";
+      diff.classList.add("expanded");
+    }
+  });
+
+  document.getElementById("collapse-all")?.addEventListener("click", () => {
+    for (const wrapper of wrappers) {
+      const toggle = wrapper.querySelector(".diff-toggle");
+      const diff = wrapper.querySelector(".d2h-file-diff");
+      if (!toggle || !diff) continue;
+      toggle.setAttribute("aria-expanded", "false");
+      toggle.textContent = "\u25B8";
+      diff.classList.remove("expanded");
+    }
+  });
 }
 
 function initBaseSelector() {
@@ -222,7 +316,7 @@ function initBaseSelector() {
 }
 
 window.addEventListener("load", () => {
-  preserveQueryParamsOnInternalLinks(["ignored", "watch", "base"]);
+  preserveQueryParamsOnInternalLinks(["ignored", "watch", "base", "show_all"]);
   renderMath();
   renderMermaid();
   initTimezoneToggle();

package/src/server.js

@@ -143,8 +143,7 @@ async function getGitDiffRaw(repoRootReal, base) {
 async function getGitInfo(repoRootReal) {
   const gitDir = path.join(repoRootReal, ".git");
   try {
-    const stat = await fs.stat(gitDir);
-    if (!stat.isDirectory()) return { branch: null, commit: null };
+    await fs.stat(gitDir);
   } catch {
     return { branch: null, commit: null };
   }
@@ -387,6 +386,7 @@ export async function startServer({ repoRoot, host, port, watch }) {
       if (req.query.watch === "0") query.set("watch", "0");
       if (req.query.ignored === "1") query.set("ignored", "1");
       if (base !== "HEAD") query.set("base", base);
+      if (req.query.show_all === "1") query.set("show_all", "1");
       const querySuffix = query.toString() ? `?${query.toString()}` : "";
 
       const [branches, tags, diffResult] = await Promise.all([
@@ -395,9 +395,17 @@ export async function startServer({ repoRoot, host, port, watch }) {
         getGitDiffRaw(repoRootReal, base),
       ]);
 
+      const MAX_DIFF_FILES = 30;
       let diffHtml = "";
+      let fileCount = 0;
+      const showAll = req.query.show_all === "1";
       if (!diffResult.tooLarge && diffResult.raw) {
-        diffHtml = diff2html.html(diffResult.raw, {
+        const parsed = diff2html.parse(diffResult.raw);
+        fileCount = parsed.length;
+        const toRender = (!showAll && parsed.length > MAX_DIFF_FILES)
+          ? parsed.slice(0, MAX_DIFF_FILES)
+          : parsed;
+        diffHtml = diff2html.html(toRender, {
           outputFormat: "line-by-line",
           drawFileList: true,
         });
@@ -416,6 +424,8 @@ export async function startServer({ repoRoot, host, port, watch }) {
           diffHtml,
           tooLarge: diffResult.tooLarge,
           empty: !diffResult.raw,
+          fileCount,
+          showAll,
         }),
       );
     } catch (e) {

package/src/views.js

@@ -293,6 +293,8 @@ export function renderDiffPage({
   diffHtml,
   tooLarge,
   empty,
+  fileCount,
+  showAll,
 }) {
   const branchOptions = branches
     .map((b) => {
@@ -323,6 +325,16 @@ export function renderDiffPage({
     content = diffHtml;
   }
 
+  const MAX_DIFF_FILES = 30;
+  let truncatedMsg = "";
+  if (fileCount > MAX_DIFF_FILES && !showAll) {
+    const hidden = fileCount - MAX_DIFF_FILES;
+    const showAllQuery = new URLSearchParams(querySuffix ? querySuffix.slice(1) : "");
+    showAllQuery.set("show_all", "1");
+    const showAllHref = `/diff?${showAllQuery.toString()}`;
+    truncatedMsg = `<div class="diff-truncated note">${hidden} more file${hidden === 1 ? "" : "s"} not shown. <a class="link" href="${showAllHref}">Show all ${fileCount} files</a></div>`;
+  }
+
   const body = `<section class="panel">
   <div class="panel-title">
     <span>Compare working tree against</span>
@@ -332,6 +344,7 @@ export function renderDiffPage({
   </div>
   <div class="diff-wrap">
     ${content}
+    ${truncatedMsg}
   </div>
 </section>`;