feat(ui): add visual color distinction for commit vs note items#72
Merged
wesbillman merged 18 commits intomainfrom Feb 12, 2026
Merged
feat(ui): add visual color distinction for commit vs note items#72wesbillman merged 18 commits intomainfrom
wesbillman merged 18 commits intomainfrom
Conversation
- 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.
matt2e
approved these changes
Feb 12, 2026
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add semantic color theming to visually distinguish commit (green) and note (orange) items throughout the UI.
Changes
Theme System
timelinesection to Theme interface with commit/note/branch color tokenscommitBg,noteBg) and emphasis variants--commit-color,--note-color,--branch-color,--commit-bg,--note-bgUI Components
Color Semantics
--status-added(green) - they represent new items--status-modified(orange) - they represent changes/annotations--status-renamed(purple)Base Commit
Branched from:
2756f6f- fix: restore 'Open In' submenu to branch card more menu (#54)