feat(desktop): add list/tree toggle to history commit file list (#61)

Author: t1gu1

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Full-screen views + floating navigation dock** — the permanent left sidebar (3 tabs) and right Git Tree strip are gone. Navigation now lives in a floating bottom-center `AppDock` (Dashboard · Changes · PRs · Git Tree), so each view renders full-bleed. Dashboard, Changes (files │ diff │ collapsible commit rail), History (commit list │ diff) and PRs (list │ detail) compose their own panes; the Git Tree becomes a first-class full-screen `graph` view (selecting a commit drills into History). `RepoSidebar` gained a `pane` prop so a single component renders any one slice; the commit composer rail is collapsible and its state persisted. New `sidebar.toggleCommitPanel` i18n key in all 5 locales.
 - **File-tree view for the changes sidebar** — the Changes view gains a list/tree layout toggle (in the controls row, to the right of the monorepo scope picker; full-width with text labels when no scope picker is present). The tree layout nests each git section's files under their folders, with collapsible folders (per-section collapse state, persisted in `localStorage`); selecting a file auto-expands its ancestor folders. The chosen layout is persisted. Pure tree-building logic lives in a new `useFileTree` composable with unit tests; `viewLayout` / `viewAsList` / `viewAsTree` i18n keys added in all 5 locales.
 - **Per-file and per-folder discard** — every file row now carries a discard button alongside stage/unstage, and tree folder rows carry folder-level stage/unstage + discard (operating on all files under the folder). Section-header, folder and file actions share a new segmented "action group" control (fused square buttons split by a hairline divider), and the stage/unstage/discard buttons are now always visible rather than hover-only.
+- **File-tree view for the history (commit) sidebar** — the list/tree toggle now also applies when browsing a previously committed (already pushed) commit: the commit's changed-files list can render as a nested, collapsible folder tree, with the status badge per file and click-to-scroll preserved. The layout choice is shared with the Changes view — switching to tree in one switches both — and folder collapse state is persisted per folder path. The pure tree-builder (`useFileTree`) was generalised over any `{ path: string }` entry so it serves both the working-tree `RepoFileEntry` list and the commit `GitDiff` list. The lone "H" header icon is indented to align with the chevron-prefixed change sections.
 
 ### Changed
 

apps/desktop/src/components/RepoSidebar.vue

@@ -202,6 +202,28 @@ function setChangesLayout(layout: "list" | "tree") {
   if (layout === "tree" && props.selectedFile) expandFoldersForFile(props.selectedFile);
 }
 
+// History reuses the shared `changesLayout` state so the list/tree choice
+// stays in sync between the changes view and the read-only commit file list.
+
+/** Section namespace used for the history tree's collapsed-folder state. */
+const HISTORY_SECTION = "history";
+
+/** Flattened tree rows for the commit file list, recomputed when diffs or collapse state change. */
+const historyTreeRows = computed<TreeRow<GitDiff>[]>(() => {
+  const root = buildFileTree(props.commitDiffs ?? []);
+  return flattenTree(
+    root,
+    (folderPath) => !!collapsedFolders.value[folderKey(HISTORY_SECTION, folderPath)],
+  );
+});
+
+/** Map a diff path → its index in `commitDiffs`, for the scrollToFile emit. */
+const historyIndexByPath = computed<Record<string, number>>(() => {
+  const map: Record<string, number> = {};
+  (props.commitDiffs ?? []).forEach((d, i) => { map[d.path] = i; });
+  return map;
+});
+
 // ─── Tree view: collapsible folders (namespaced per section) ───
 const COLLAPSED_FOLDERS_KEY = "gitwand-collapsed-folders";
 
@@ -970,35 +992,129 @@ function formatActivityDate(dateStr: string): string {
     <div class="sections" v-if="showPane('history')">
       <div class="section">
         <div class="section-header">
-          <span class="section-icon" style="color: var(--color-accent)">H</span>
+          <span class="section-icon section-icon--history" style="color: var(--color-accent)">H</span>
           <span class="section-label">{{ t('header.files') }}</span>
           <span class="section-count" v-if="commitDiffs">{{ commitDiffs.length }}</span>
+          <span class="section-spacer"></span>
+          <!-- List / tree layout toggle -->
+          <div
+            v-if="commitDiffs && commitDiffs.length > 0"
+            class="layout-toggle"
+            role="group"
+            :aria-label="t('sidebar.viewLayout')"
+            @click.stop
+          >
+            <button
+              class="layout-toggle-btn"
+              :class="{ 'layout-toggle-btn--active': changesLayout === 'list' }"
+              @click="setChangesLayout('list')"
+              :title="t('sidebar.viewAsList')"
+              :aria-pressed="changesLayout === 'list'"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
+                <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
+              </svg>
+            </button>
+            <button
+              class="layout-toggle-btn"
+              :class="{ 'layout-toggle-btn--active': changesLayout === 'tree' }"
+              @click="setChangesLayout('tree')"
+              :title="t('sidebar.viewAsTree')"
+              :aria-pressed="changesLayout === 'tree'"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M3 5h6l2 2h10v12H3z"/>
+              </svg>
+            </button>
+          </div>
         </div>
         <ul class="file-items" role="listbox" v-if="commitDiffs">
-          <li
-            v-for="(diff, idx) in commitDiffs"
-            :key="idx"
-            class="file-item"
-            :class="{ 'file-item--selected': idx === visibleFileIdx }"
-            role="option"
-            :aria-selected="idx === visibleFileIdx"
-            tabindex="0"
-            @click="emit('scrollToFile', idx)"
-            @dblclick="onFileItemDblClick"
-            @keydown.enter="emit('scrollToFile', idx)"
-            @keydown.space.prevent="emit('scrollToFile', idx)"
-          >
-            <span
-              class="file-status-badge mono"
-              :style="{ color: getFileStatus(diff).color }"
+          <!-- Flat list layout -->
+          <template v-if="changesLayout === 'list'">
+            <li
+              v-for="(diff, idx) in commitDiffs"
+              :key="idx"
+              class="file-item"
+              :class="{ 'file-item--selected': idx === visibleFileIdx }"
+              role="option"
+              :aria-selected="idx === visibleFileIdx"
+              tabindex="0"
+              @click="emit('scrollToFile', idx)"
+              @dblclick="onFileItemDblClick"
+              @keydown.enter="emit('scrollToFile', idx)"
+              @keydown.space.prevent="emit('scrollToFile', idx)"
             >
-              {{ getFileStatus(diff).icon }}
-            </span>
-            <div class="file-info">
-              <span class="file-name mono">{{ fileName(diff.path) }}</span>
-              <span class="file-dir muted">{{ fileDir(diff.path) }}</span>
-            </div>
-          </li>
+              <span
+                class="file-status-badge mono"
+                :style="{ color: getFileStatus(diff).color }"
+              >
+                {{ getFileStatus(diff).icon }}
+              </span>
+              <div class="file-info">
+                <span class="file-name mono">{{ fileName(diff.path) }}</span>
+                <span class="file-dir muted">{{ fileDir(diff.path) }}</span>
+              </div>
+            </li>
+          </template>
+
+          <!-- Nested folder tree layout -->
+          <template v-else>
+            <template
+              v-for="row in historyTreeRows"
+              :key="`${row.kind}-${row.path}`"
+            >
+              <!-- Folder row -->
+              <li
+                v-if="row.kind === 'folder'"
+                class="file-item tree-folder"
+                :style="{ paddingLeft: `${row.depth * 14 + 5}px` }"
+                role="option"
+                tabindex="0"
+                @click="toggleFolder(HISTORY_SECTION, row.path)"
+                @keydown.enter="toggleFolder(HISTORY_SECTION, row.path)"
+                @keydown.space.prevent="toggleFolder(HISTORY_SECTION, row.path)"
+              >
+                <svg
+                  class="tree-chevron"
+                  :class="{ 'tree-chevron--collapsed': collapsedFolders[folderKey(HISTORY_SECTION, row.path)] }"
+                  width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
+                >
+                  <polyline points="6 9 12 15 18 9"/>
+                </svg>
+                <svg class="tree-folder-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M3 5h6l2 2h10v12H3z"/>
+                </svg>
+                <span class="file-name mono tree-folder-name">{{ row.name }}</span>
+                <span class="tree-folder-count">{{ row.count }}</span>
+              </li>
+
+              <!-- File row -->
+              <li
+                v-else
+                class="file-item"
+                :class="{ 'file-item--selected': historyIndexByPath[row.path] === visibleFileIdx }"
+                :style="{ paddingLeft: `${row.depth * 14 + 18}px` }"
+                role="option"
+                :aria-selected="historyIndexByPath[row.path] === visibleFileIdx"
+                tabindex="0"
+                @click="emit('scrollToFile', historyIndexByPath[row.path])"
+                @dblclick="onFileItemDblClick"
+                @keydown.enter="emit('scrollToFile', historyIndexByPath[row.path])"
+                @keydown.space.prevent="emit('scrollToFile', historyIndexByPath[row.path])"
+              >
+                <span
+                  class="file-status-badge mono"
+                  :style="{ color: getFileStatus(row.file!).color }"
+                >
+                  {{ getFileStatus(row.file!).icon }}
+                </span>
+                <div class="file-info">
+                  <span class="file-name mono">{{ row.name }}</span>
+                </div>
+              </li>
+            </template>
+          </template>
         </ul>
         <div v-else-if="selectedCommitHash" class="empty-section">
           <span class="empty-text">{{ t('log.noDiffForCommit') }}</span>
@@ -1937,6 +2053,12 @@ function formatActivityDate(dateStr: string): string {
   margin-left:-2px;
 }
 
+/* History header has no chevron — indent the lone "H" to match the
+   icon alignment of the chevron-prefixed change sections. */
+.section-icon--history {
+  margin-left: var(--space-1);
+}
+
 .section-label {
   margin-top: -1px;
 }

apps/desktop/src/composables/__tests__/useFileTree.test.ts

@@ -54,4 +54,29 @@ describe("buildFileTree / flattenTree", () => {
       "a/b",
     ]);
   });
+
+  it("is generic over any PathLike entry (e.g. commit diffs)", () => {
+    // Mirrors the history sidebar: entries carry a `path` plus extra fields
+    // (here a diff `status`) that must survive on the file row via `row.file`.
+    interface DiffLike {
+      path: string;
+      status: "added" | "modified" | "deleted";
+    }
+    const diff = (path: string, status: DiffLike["status"]): DiffLike => ({ path, status });
+
+    const root = buildFileTree<DiffLike>([
+      diff("src/a.ts", "modified"),
+      diff("src/b.ts", "added"),
+    ]);
+    const rows = flattenTree(root, never);
+
+    expect(rows.map((r) => `${r.kind}:${r.name}`)).toEqual([
+      "folder:src",
+      "file:a.ts",
+      "file:b.ts",
+    ]);
+    // The underlying typed entry is preserved on file rows.
+    const aRow = rows.find((r) => r.kind === "file" && r.name === "a.ts");
+    expect(aRow?.file).toEqual({ path: "src/a.ts", status: "modified" });
+  });
 });

apps/desktop/src/composables/useFileTree.ts

@@ -11,29 +11,34 @@
  */
 import type { RepoFileEntry } from "./useGitRepo";
 
-export interface TreeRow {
+/** Minimal shape the tree builder needs from an entry: just a path. */
+export interface PathLike {
+  path: string;
+}
+
+export interface TreeRow<T extends PathLike = RepoFileEntry> {
   kind: "folder" | "file";
   /** Folder rows: cumulative dir path (no trailing slash). File rows: the entry's full path. */
   path: string;
   /** Display segment (folder name, or file leaf — may keep a trailing "/" for untracked dirs). */
   name: string;
   /** Nesting depth (0 = section root). */
   depth: number;
-  /** File rows only: the underlying git entry. */
-  file?: RepoFileEntry;
+  /** File rows only: the underlying entry. */
+  file?: T;
   /** Folder rows only: rolled-up count of files under this folder. */
   count?: number;
 }
 
-interface FolderNode {
+interface FolderNode<T extends PathLike> {
   name: string;
   path: string;
-  folders: Map<string, FolderNode>;
-  files: RepoFileEntry[];
+  folders: Map<string, FolderNode<T>>;
+  files: T[];
   count: number;
 }
 
-function newNode(name: string, path: string): FolderNode {
+function newNode<T extends PathLike>(name: string, path: string): FolderNode<T> {
   return { name, path, folders: new Map(), files: [], count: 0 };
 }
 
@@ -45,8 +50,8 @@ function leafName(path: string): string {
 }
 
 /** Build a nested folder tree from a flat list of entries. */
-export function buildFileTree(files: RepoFileEntry[]): FolderNode {
-  const root = newNode("", "");
+export function buildFileTree<T extends PathLike>(files: T[]): FolderNode<T> {
+  const root = newNode<T>("", "");
   for (const f of files) {
     // The leaf (last non-empty segment) is the file; preceding segments are folders.
     // Trailing "/" entries (untracked dirs) collapse to a single leaf node.
@@ -69,7 +74,7 @@ export function buildFileTree(files: RepoFileEntry[]): FolderNode {
   return root;
 }
 
-function computeCount(node: FolderNode): number {
+function computeCount<T extends PathLike>(node: FolderNode<T>): number {
   let c = node.files.length;
   for (const child of node.folders.values()) c += computeCount(child);
   node.count = c;
@@ -81,12 +86,12 @@ function computeCount(node: FolderNode): number {
  * before files at each level, both sorted by name. A folder for which
  * `isCollapsed(path)` returns true hides its descendants.
  */
-export function flattenTree(
-  root: FolderNode,
+export function flattenTree<T extends PathLike>(
+  root: FolderNode<T>,
   isCollapsed: (folderPath: string) => boolean,
   depth = 0,
-  out: TreeRow[] = [],
-): TreeRow[] {
+  out: TreeRow<T>[] = [],
+): TreeRow<T>[] {
   const folders = [...root.folders.values()].sort((a, b) => a.name.localeCompare(b.name));
   for (const folder of folders) {
     out.push({ kind: "folder", path: folder.path, name: folder.name, depth, count: folder.count });

website/changelog.md

@@ -15,6 +15,10 @@ The Changes sidebar can now show your working-tree changes as a **nested folder
 
 Every file row now has a **discard** button sitting next to stage/unstage, and folder rows in the tree get folder-level stage, unstage and discard that act on everything inside. The buttons are grouped into a tidy segmented control — and they're always visible now, so you no longer have to hover to find them.
 
+### The folder tree follows you into history
+
+The same list/tree toggle now works when you're looking at an earlier, already-pushed commit. Open any commit and its changed files can be shown as a nested folder tree instead of a flat list — collapse the folders you don't care about, click a file to jump straight to its diff, just like in the Changes view. The choice is shared: flip to tree once and it stays tree everywhere, whether you're staging new work or reviewing past commits.
+
 ### Every external link works in the Linux AppImage
 
 External links did nothing in the released Linux AppImage — clicking "Open GitHub" or "Open Azure" during sign-in, a pull-request or issue link in the Launchpad, the "open this repo on the web" button, or the changelog link simply went nowhere, even though all of them worked when running GitWand from source. There were two reasons. The first: the helper GitWand used to hand a URL to your browser ran without checking whether it actually succeeded, so when the AppImage runtime's polluted library path made that helper (or the desktop tool it calls) crash on the wrong libraries, the failure vanished silently. The second: a handful of links were plain web anchors, which the desktop webview quietly ignores, so they never reached the opener at all. GitWand now tries several system openers in turn, cleans up the environment before each one, and reports a real error if they all fail — and a single catch-all sends every external link in the app through your system browser, so none of them can silently do nothing again. Thanks to @t1gu1 for the report.