feat(app): group the Changes flat file list by directory

[cleiter]

Linked issue

None — opening directly, since the screenshots make the case better than a
description would. Happy to move it to a feature request if you'd rather
settle the shape first.

Your call: flat is the default view mode, so this changes the Changes
list everyone sees out of the box, and there's no way back to the old rows.

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Docs

What does this PR do

Groups the flat file list by directory, and gives every row its file-type
icon.

Before: one row per file — filename plus a muted inline directory suffix,
no icon (icons landed in #1918, but only in tree mode). The directory
string repeated on every row, and it truncated the filename first in a
narrow sidebar.

After: each directory appears once as a path label with its files beneath
it. Files sharing a directory share a label; root files get none.

The shape is taken from GitLab's merge-request file list, used deliberately
as a best-practice reference — the same reasoning as the tree's single-child
compression in #1918 following VS Code and GitHub: reach for a pattern
people already read fluently rather than invent one. The grouping only,
though. Paseo's +/- stats, New/Deleted badges and end-ellipsis truncation
stay as they are, not GitLab's status glyphs and middle-truncated paths.

Trade-off: it's taller. Every group adds a label row — the diff in the
screenshots goes from 5 rows to 8. The label is cheap (smaller text, top
padding only) but not free, and it narrows the density gap with tree mode,
which renders the same diff in 9 rows and can at least collapse. What it
buys is width for the filename.

That diff is close to the worst case for this, by the way: three groups over
five files, two of them single-file. The label amortizes where more files
share a directory — the three commands/ files here pay one label between
them.

I considered keeping the directory inline for single-file groups to save
the label (the screenshots have two), and dropped it: GitLab doesn't do it
either — its flat list is mostly single-file groups and they all get labels
— and rows would change shape live as an agent adds a second file to a
directory.

Client-only, built from the existing ParsedDiffFile paths — no protocol
or server change, tree mode untouched, icons reuse the existing
getFileIconSvg. The one non-obvious bit: labels get their own measured
height feeding getItemLayout, and sticky indices stay file-headers-only
so a label can't enter the sticky stack.

How did you verify it

• npm run typecheck, npm run lint, npm run format clean. All 224
  tests across the 21 git/ test files pass. Three cases in
  diff-flat-items.test.ts cover the new grouping: one shared label for
  same-directory files, no label at root, and the sticky index still
  landing on the expanded file header. Existing tree-mode tests unchanged
  and passing — that's what pins "tree mode is unaffected".
• Live in the Electron desktop app on this branch, against a real diff:
  the three groups label correctly, commands/ collects its three files
  under one label, icons resolve, and +/- stats stay right-aligned.
  Toggled to tree and back — unchanged.

Before:

After:

Tree, for comparison (unchanged):

Checklist

• One focused change. Unrelated cleanups split out.
• npm run typecheck passes
• npm run lint passes
• npm run format ran (Biome)
• UI changes include screenshots or video for every affected platform
• Tests added or updated where it made sense

[greptile-apps]

Greptile Summary

This PR groups the flat-mode file list by directory, emitting a dirLabel item above each run of same-directory files rather than repeating an inline directory suffix on every row, and promotes file-type icons from tree-only to both view modes.

• diff-flat-items.ts adds a dirLabel union variant to DiffFlatItem, a new underDirLabel: boolean field on header items, and a single-pass loop that tracks the current directory and emits one label per contiguous run of files sharing a path prefix. Root-level files receive no label and no indent.
• diff-pane.tsx adds DiffDirLabelRow and DiffFileIcon memo components, wires height measurement for dir-label rows into getItemLayout, removes the now-redundant showDir prop from DiffFileHeader, and ensures viewMode is no longer needed directly in renderItem (it flows through underDirLabel from the item model instead).
• Tests cover: shared label for same-directory files, no label at root, indent only under an emitted label, tree mode unaffected (underDirLabel always false), and the sticky index landing on the file header not the label.

Confidence Score: 5/5

Safe to merge — changes are client-only, tree mode is untouched, and the new flat grouping logic is well-tested.

The flat-mode grouping loop is straightforward and correct: root files get no label and no indent, the underDirLabel flag is set at the same site as label emission so they can't disagree, and viewMode correctly flows through the item model rather than into renderItem directly. Height measurement for dir-label rows follows the same pattern as the existing folder-row height tracking. Tests cross the module interface and cover the key behavioral variants. The previous-thread concern about root-file indentation is explicitly addressed by the underDirLabel = false path and verified by a dedicated test.

No files require special attention.

Important Files Changed

Filename	Overview
packages/app/src/git/diff-flat-items.ts	Adds dirLabel item type and underDirLabel field; flat-mode loop is clean and correctly handles root files and sort precondition (documented in JSDoc).
packages/app/src/git/diff-pane.tsx	DiffDirLabelRow and DiffFileIcon memo components added; height tracking, key extractor, and renderItem deps all correctly updated; viewMode correctly removed from renderItem deps.
packages/app/src/git/diff-flat-items.test.ts	Four new behavioral tests added covering the key cases: shared labels, no-label at root, indent-only-under-label, and tree mode isolation. All test through the module interface.
packages/app/e2e/diff-row-alignment.spec.ts	E2E helper updated to assert the dir-label test ID and verify the inline directory suffix is no longer on the file row.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["files: ParsedDiffFile[]<br/>(path-sorted)"] --> B{viewMode}
    B -->|flat| C["Loop over files<br/>track currentDir"]
    C --> D{dir changed?}
    D -->|"yes, dir != ''"| E["emit dirLabel item"]
    D -->|"yes, dir == ''"| F["no label (root-level)"]
    D -->|no| G["same dir, continue"]
    E --> H["pushFile(underDirLabel=true)"]
    F --> I["pushFile(underDirLabel=false)"]
    G --> H
    B -->|tree| J["buildDiffTree → compress → flatten"]
    J --> K["pushFile(depth, underDirLabel=false)"]
    H --> L["DiffFileHeader w/ fileHeaderFlatIndent"]
    I --> M["DiffFileHeader no indent"]
    E --> Q["DiffDirLabelRow renders 'path/'"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A["files: ParsedDiffFile[]<br/>(path-sorted)"] --> B{viewMode}
    B -->|flat| C["Loop over files<br/>track currentDir"]
    C --> D{dir changed?}
    D -->|"yes, dir != ''"| E["emit dirLabel item"]
    D -->|"yes, dir == ''"| F["no label (root-level)"]
    D -->|no| G["same dir, continue"]
    E --> H["pushFile(underDirLabel=true)"]
    F --> I["pushFile(underDirLabel=false)"]
    G --> H
    B -->|tree| J["buildDiffTree → compress → flatten"]
    J --> K["pushFile(depth, underDirLabel=false)"]
    H --> L["DiffFileHeader w/ fileHeaderFlatIndent"]
    I --> M["DiffFileHeader no indent"]
    E --> Q["DiffDirLabelRow renders 'path/'"]

Loading

_{Reviews (2): Last reviewed commit: "feat(app): group the Changes flat file l..." | Re-trigger Greptile}