Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(ui): add visual color distinction for commit vs note items#72

Merged
wesbillman merged 18 commits intomainfrom
note-commit-distinction
Feb 12, 2026
Merged

feat(ui): add visual color distinction for commit vs note items#72
wesbillman merged 18 commits intomainfrom
note-commit-distinction

Conversation

@taylorkmho
Copy link
Contributor

Summary

Add semantic color theming to visually distinguish commit (green) and note (orange) items throughout the UI.

Changes

Theme System

  • Add timeline section to Theme interface with commit/note/branch color tokens
  • Generate adaptive background colors (commitBg, noteBg) and emphasis variants
  • Export CSS variables: --commit-color, --note-color, --branch-color, --commit-bg, --note-bg

UI Components

  • TimelineRow: Colored icons with tinted backgrounds (commit=green, note=orange)
  • NewSessionModal: Mode toggle shows colored text/icon when active
  • BranchCard/RemoteBranchCard: Picker dropdown items have colored icons and hover backgrounds

Color Semantics

  • Commits use --status-added (green) - they represent new items
  • Notes use --status-modified (orange) - they represent changes/annotations
  • Branches use --status-renamed (purple)

Base Commit

Branched from: 2756f6f - fix: restore 'Open In' submenu to branch card more menu (#54)

- Add semantic CSS variables in app.css for commit (yellow) and note (green) theming
- TimelineRow: colored icons and subtle background tints on hover
- NewSessionModal: mode toggle shows colored text/icon when active
- BranchCard/RemoteBranchCard: picker dropdown items have colored icons and hover backgrounds

Commit uses --status-modified (#d29922), Note uses --status-added (#3fb950)
- Add timeline section to Theme interface with commit/note background colors
- Generate commitBg, commitBgEmphasis, noteBg, noteBgEmphasis in createAdaptiveTheme()
- Use overlay() helper with light/dark adaptive opacity values
- Export CSS variables via themeToVarMap() for --commit-bg, --note-bg variants

This integrates commit/note color theming into the adaptive theme infrastructure,
ensuring proper light/dark mode support derived from the syntax theme colors.
- Commit icons get --commit-bg background (yellow tint)
- Note icons get --note-bg background (green tint)
- Remove border for colored icons (border-color: transparent)
- Maintains default bg-elevated for other icon types (review, failed)
Reset background-color to --bg-elevated for pending states, overriding
the tinted backgrounds from commit-icon/note-icon classes.
Set border-color to transparent for pending icons, matching the
borderless style of commit/note icons.
Change spinner color from --text-muted to --text-primary for higher
contrast visibility against the neutral background.
Use --commit-bg-emphasis and --note-bg-emphasis for the active mode
option in NewSessionModal, matching the color treatment used in
TimelineRow and BranchCard components.
- Commits now use added/green (--status-added) - they represent new items
- Notes now use modified/orange (--status-modified) - they represent changes

Updated in both:
- app.css: fallback CSS variables
- theme.ts: adaptive theme generation
- Add --branch-color: var(--status-renamed) to semantic color tokens in app.css
- Update BranchCard.svelte to use --branch-color instead of --status-renamed
- Update NewSessionModal.svelte to use --branch-color instead of --status-renamed

This follows the same pattern as --commit-color and --note-color, providing
a semantic abstraction layer for branch-related UI elements.
- Add commitColor, noteColor, branchColor to Theme.timeline interface
- Generate color tokens in createAdaptiveTheme() from accent colors
- Export --commit-color, --note-color, --branch-color via themeToVarMap()

This moves the semantic color tokens from app.css var() aliases into the
adaptive theme system, ensuring they inherit from the same accent colors
used for the background tokens.
Remove tinted commit-bg/note-bg hover backgrounds from timeline rows,
reverting to the standard --bg-hover (gray) for all row types.

Color distinction is maintained through the tinted icons only.
* origin/main:
  feat: async worktree creation (#71)
  fix: Skip main worktree on project import and remove main badge UI (#70)
  feat(ui): replace long-press picker with explicit New note / New commit buttons (#67)
  fix: remember ordered list of recent agents instead of single last-used (#65)
  fix: capitalize 'Staged' in macOS application menu (#64)
  fix: dismiss new branch dialog immediately for remote branches (#57)
  feat: add Amp (Sourcegraph) as a supported ACP agent (#55)
  feat: restore subfolder autocomplete in new project dialog (#56)
  Consolidate ACP implementations into acp-client crate (#52)

# Conflicts:
#	staged/src/lib/BranchCard.svelte
#	staged/src/lib/NewSessionModal.svelte
Wrap icons in .btn-icon spans with colored backgrounds matching the
timeline icon treatment:
- Note button: --note-bg background, --note-color icon (orange)
- Commit button: --commit-bg background, --commit-color icon (green)

This extends the visual color distinction to the footer action buttons
in BranchCard, making the commit/note type immediately recognizable.
Apply colored icon fill treatment to:
- BranchCard footer buttons: wrap icons in .btn-icon spans
- NewSessionModal header: wrap icons in .header-icon spans

Both use the same color pattern as timeline icons:
- Note: --note-bg background, --note-color icon (orange)
- Commit: --commit-bg background, --commit-color icon (green)

This extends the visual color distinction to action buttons and modal
headers, making the commit/note type immediately recognizable.
…ttons

Remove default background/padding from button icons, showing the tinted
fill (--note-bg/--commit-bg) only when hovering over the button.
Replace StickyNote with FileText icon for note-related UI elements:
- BranchCard: New note button
- NewSessionModal: header icon for note mode
- RemoteBranchCard: picker dropdown note item

This ensures consistency with TimelineRow which uses FileText for notes.
Remove the .btn-icon wrapper and fixed sizing from New note/commit buttons.
Icons now show colored tint (--note-color/--commit-color) only on hover,
without the background fill or padding that was previously applied.
Add 0.15s transition to svg icons in New note/commit buttons,
matching the button's existing transition duration for a smooth
color change on hover.
@wesbillman wesbillman merged commit e681d2d into main Feb 12, 2026
3 checks passed
@wesbillman wesbillman deleted the note-commit-distinction branch February 12, 2026 20:28
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.

3 participants