Skip to content

feat: add file state indicators to sidebar#128

Merged
benvinegar merged 1 commit intomainfrom
file-state-indicators
Mar 29, 2026
Merged

feat: add file state indicators to sidebar#128
benvinegar merged 1 commit intomainfrom
file-state-indicators

Conversation

@benvinegar
Copy link
Copy Markdown
Member

@benvinegar benvinegar commented Mar 29, 2026

Show standard git status letters for file states in the sidebar and headers:

  • ? untracked files (blue)
  • A added/new files (green)
  • D deleted files (red)
  • R renamed files (amber/gold)
  • M modified files (purple)

Using standard git status codes (A/D/M/R/?) makes the UI immediately recognizable to git users while color coding helps distinguish states at a glance.

Changes:

  • Add isUntracked field to DiffFile type to distinguish untracked from tracked new files
  • Add changeType and isUntracked to FileListEntry for sidebar rendering
  • Add file state color tokens (fileNew, fileDeleted, fileRenamed, fileModified, fileUntracked) to all 4 themes
  • Render colored git status letter prefix in FileListItem sidebar component
  • Update buildDiffFile to track untracked status from git loader
  • Add fileLabelParts() helper for styled header rendering (filename + muted state label)
  • Show state labels in muted color in file headers for visual hierarchy

Fixes:

  • DRY up fileLabel() to use fileLabelParts() internally
  • Clamp header width calculation to prevent negative values on narrow terminals
  • Reorder buildDiffFile() parameters so isUntracked comes before previousPath

Files changed:

  • src/core/loaders.ts - Track untracked status, improved parameter ordering
  • src/core/types.ts - Add isUntracked field
  • src/ui/themes.ts - Add 5 file state colors across all themes
  • src/ui/lib/files.ts - fileLabelParts() helper, DRY improvements
  • src/ui/components/panes/FileListItem.tsx - Git status letter rendering
  • src/ui/components/panes/DiffSection.tsx - Styled headers with width clamping
  • src/ui/components/panes/DiffSectionPlaceholder.tsx - Styled headers with width clamping

@greptile-apps
Copy link
Copy Markdown

greptile-apps bot commented Mar 29, 2026

Greptile Summary

This PR adds visual state indicators (◌ ✦ ✕ ➜) to the sidebar file list, letting users instantly distinguish untracked, new, deleted, and renamed files by icon and color. The change threads a new isUntracked boolean through the full stack — from DiffFile type → git loader → FileListEntryFileListItem — and adds four matching color tokens to all four themes.

Key changes:

  • DiffFile.isUntracked?: boolean added as an optional field; all non-git loaders continue to work without change.
  • buildUntrackedDiffFile explicitly passes true; all other buildDiffFile call sites are unaffected (the parameter is optional).
  • FileListEntry normalises isUntracked to a non-optional boolean via ?? false, keeping icon rendering free of null checks.
  • getFileStateIcon checks isUntracked first, then falls back to changeType, correctly giving untracked files the ◌ icon even though the underlying metadata.type is \"new\".
  • Layout arithmetic in FileListItem is adjusted correctly: iconWidth = icon ? 2 : 0 accounts for 1 Unicode char + 1 trailing space, and nameWidth is reduced by iconWidth accordingly.
  • All four themes (graphite, midnight, paper, ember) receive consistent new color tokens that complement their existing badge palette.

Confidence Score: 5/5

Safe to merge — no correctness, data-integrity, or layout issues found.

All five changed files are clean with no P0 or P1 issues. The data flow is end-to-end consistent, the layout math is verified, all themes are updated, and the isUntracked / changeType priority ordering in getFileStateIcon is correct.

No files require special attention.

Important Files Changed

Filename Overview
src/ui/components/panes/FileListItem.tsx Adds getFileStateIcon helper and integrates the icon into the sidebar row; correctly adjusts nameWidth by subtracting iconWidth (2 = 1 Unicode char + 1 space) to keep the layout stable.
src/ui/lib/files.ts Adds changeType and isUntracked to FileListEntry; correctly normalises the optional DiffFile.isUntracked to a non-optional boolean via ?? false; adds a new @pierre/diffs type import to the UI layer.
src/core/loaders.ts Adds isUntracked parameter to buildDiffFile and passes true from buildUntrackedDiffFile. Uses an explicit undefined positional argument which is slightly awkward but fully functional.
src/core/types.ts Adds optional isUntracked?: boolean field to DiffFile interface — minimal, safe change that keeps the field optional for backwards-compatibility with all non-git loaders.
src/ui/themes.ts Adds four new color tokens (fileNew, fileDeleted, fileRenamed, fileUntracked) to the AppTheme interface and all four themes; colors are internally consistent (matching or complementing existing badge colors).

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Git loader\nsrc/core/loaders.ts] -->|buildUntrackedDiffFile\nisUntracked=true| B[DiffFile\nsrc/core/types.ts]
    A -->|buildDiffFile\nisUntracked=undefined| B
    B -->|buildSidebarEntries\nchangeType + isUntracked ?? false| C[FileListEntry\nsrc/ui/lib/files.ts]
    C -->|entry prop| D[FileListItem\nsrc/ui/components/panes/FileListItem.tsx]
    D -->|getFileStateIcon| E{isUntracked?}
    E -->|yes| F["◌ blue — untracked"]
    E -->|no, check changeType| G{changeType}
    G -->|new| H["✦ green — new"]
    G -->|deleted| I["✕ red — deleted"]
    G -->|rename-pure / rename-changed| J["➜ amber — renamed"]
    G -->|change / default| K["no icon"]
    L[AppTheme\nsrc/ui/themes.ts] -->|fileNew / fileDeleted\nfileRenamed / fileUntracked| D
Loading

Reviews (1): Last reviewed commit: "feat: add file state indicators to sideb..." | Re-trigger Greptile

@benvinegar benvinegar force-pushed the file-state-indicators branch 4 times, most recently from 2124bef to 7ce1562 Compare March 29, 2026 14:00
Show standard git status letters for file states:
- ? untracked files (blue)
- A added/new files (green)
- D deleted files (red)
- R renamed files (amber/gold)
- M modified files (purple)

Changes:
- Add isUntracked field to DiffFile type
- Add changeType and isUntracked to FileListEntry
- Add file state color tokens (fileNew, fileDeleted, fileRenamed, fileModified, fileUntracked) to all themes
- Render colored git status letter prefix in FileListItem
- Update buildDiffFile to track untracked status
- Add fileLabelParts for styled header rendering
- Show state labels in muted color in file headers

Using standard git status codes (A/D/M/R/?) makes the UI immediately
recognizable to git users while color coding helps distinguish states.
@benvinegar benvinegar force-pushed the file-state-indicators branch from 7ce1562 to 34bbee5 Compare March 29, 2026 14:15
@benvinegar benvinegar merged commit 5265377 into main Mar 29, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant