feat: redesign branch cards, timeline actions, and card layout consistency#98
Merged
taylorkmho merged 24 commits intomainfrom Feb 13, 2026
Merged
feat: redesign branch cards, timeline actions, and card layout consistency#98taylorkmho merged 24 commits intomainfrom
taylorkmho merged 24 commits intomainfrom
Conversation
- Create projectStore.svelte.ts: shared reactive singleton for projects and branches, lifting state out of ProjectHome so the sidebar and main view share data without double-fetching - Create Sidebar.svelte: collapsible left sidebar that fetches timelines for all tracked branches and renders a cumulative, recency-sorted list of commits and notes across all projects - Group-by-project toggle organizes items under project headings - Flat mode shows all items sorted by timestamp descending - Clicking an item scrolls to its parent branch card with a highlight flash - Colored icons distinguish commits (timeline-commit) from notes (timeline-note) - Each item shows title, branch name, and compact relative time - Refactor ProjectHome.svelte to consume projectStore instead of owning state; sort each project's branches by updatedAt descending - Update App.svelte layout from single column to horizontal flex below TopBar, with sidebar on left and content on right; add Cmd+B keyboard shortcut to toggle sidebar visibility - Add PanelLeft toggle button to TopBar with active state accent color - Add sidebar-open and sidebar-group-by-project preferences with Tauri persistent store backing (defaults: both true) - Add data-branch-id attribute to BranchCard and RemoteBranchCard root elements for scroll-to-branch targeting - Add scroll-highlight CSS animation for visual feedback on navigation Co-authored-by: Cursor <cursoragent@cursor.com>
- Add sidebarWidth preference (default 220px, clamped 140–480px) with Tauri store persistence via new sidebar-width key - Add setSidebarWidth() action to preferences module - Replace fixed 220px sidebar width with dynamic style:width driven by preferences.sidebarWidth - Add resize handle on right edge of Sidebar.svelte with mousedown/mousemove/mouseup tracking on document - Handle highlights with var(--ui-accent) on hover and during drag - Prevent text selection globally during resize via body style overrides Co-authored-by: Cursor <cursoragent@cursor.com>
- Add "Builds" section at the top of the sidebar list showing all currently running (and recently finished) actions across all branches - Listen to action_status Tauri events to track builds in real-time with live elapsed time counter that ticks every second - Each build item shows status icon (spinner/check/alert), action name, branch name, and elapsed/total duration - Clicking a build scrolls to its branch card and opens the ActionOutputModal via a new staged:show-action-output custom event - Add event listener in BranchCard to handle staged:show-action-output and open the output modal when triggered from the sidebar - Builds auto-remove after completion (3s) or failure (6s) so the section disappears when no builds are active - Builds section scrolls inline with the activity feed (not fixed) Co-authored-by: Cursor <cursoragent@cursor.com>
- Move the "New Branch" dashed button from the bottom to the top of the branches list in ProjectSection.svelte for easier access - Update file header comment to reflect new button placement Co-authored-by: Cursor <cursoragent@cursor.com>
…gress - Add navigation state module (navigation.svelte.ts) with selectedProjectId, selectProject(), and goHome() for lightweight client-side view switching - Add ProjectCard.svelte showing project name, branch count, last activity (relative timestamp), and up to 5 recent commits per project - Add ProjectsList.svelte as the new landing page rendering project cards with timeline metadata fetched from existing getBranchTimeline API - Move empty/loading/store-update states from ProjectHome to ProjectsList - Refactor ProjectHome.svelte to accept a required projectId prop, filter to a single project, and add a back button to return to the projects list - Add Projects navigation section to the top of Sidebar.svelte with clickable project items, active state highlighting, and last-activity times - Filter the sidebar Activity feed to the selected project when one is active - Make TopBar "+" button context-aware: dispatches staged:new-project on the landing page and staged:new-branch when viewing a project detail - Navigate to the new project's detail view after creation - Update App.svelte to switch between ProjectsList and ProjectHome based on navigation.selectedProjectId Co-authored-by: Cursor <cursoragent@cursor.com>
- Replace plain-text "Projects" section header with a prominent nav item featuring a Folder icon, hover state, and active highlight when on the projects list view - Remove individual project list from the sidebar (navigation to projects now goes through the Projects nav item to the landing page) - Bump nav-item font to --size-base, activity items (timeline, builds, groups, empty state) to --size-base, and item-meta bylines to --size-sm - Clean up dead code: remove unused Home and selectProject imports, getProjectLastActivity helper, and all .project-nav-* CSS rules Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Rework ProjectCard from a filled card (bg/border/radius) to a flat section with a clickable header row showing project name, branch count, and a hover-reveal chevron for navigation affordance - Replace recent commits list with a vertical list of recent branches (up to 5, sorted by updatedAt) using --branch-color semantic tokens - Clicking a branch navigates to the project detail and scrolls to that branch's card via selectProjectAndBranch() in navigation.svelte.ts - Add selectProjectAndBranch() helper that sets selectedProjectId then dispatches staged:scroll-to-branch after a delay for mount timing - Remove all timeline-fetching logic from ProjectsList (commitsByProject, fetchAllTimelines, stripXmlTags, formatRelativeTime, getRecentCommits, getLastActivity, getBranchCount) since commits are no longer shown - Add "Projects" page title with a "+" new project button on the right - Use negative horizontal margins on project entries for optical alignment of project names with the page title Co-authored-by: Cursor <cursoragent@cursor.com>
…pective sections - Split BranchTimeline into two visual sections: horizontal notes strip and vertical commit timeline, each with its own inline add button - Add "New note" button as the last chip in the notes strip (dashed border, 1/3-width slot, highlights with --note-color on hover) - Add "New commit" button at the bottom of the commit timeline (dashed border, highlights with --commit-color on hover) - Add onNewNote, onNewCommit, and newSessionDisabled props to BranchTimeline - Wire new props from BranchCard and RemoteBranchCard - Move note rendering out of TimelineRow into BranchTimeline as horizontal chips (TimelineRow now only handles commits and reviews) - Keep existing footer buttons in both card components Co-authored-by: Cursor <cursoragent@cursor.com>
- Restructure card header into two-row layout: branch name title on top, base branch with icon below, replacing the single-row inline format - Convert primary run action button from pill-shaped text button to circular icon-only button with white fill (idle) and muted background (running/stop state) - Replace Spinner with StopCircle icon when action is running for stop-button affordance; action name shown via title tooltip - Move diff button from header actions to footer, grouped with Create PR button in a new footer-left container - Remove branch separator character, base branch now shown as smaller metadata text beneath the title - Header actions (play, running actions, more menu) vertically centered against the combined title + metadata height Co-authored-by: Cursor <cursoragent@cursor.com>
- Change note chip default background from var(--note-bg) to var(--bg-hover) for a neutral muted appearance - Change hover background from var(--note-bg-emphasis) to var(--note-bg) so chips transition to yellow on hover - Note icon retains its yellow color (var(--note-color)) at all times Co-authored-by: Cursor <cursoragent@cursor.com>
…e branch rows - Pull GitBranch icon out of header-bottom into card-header as a standalone element, vertically centered against the stacked text - Flatten header-left to contain branch-name and base-branch-name directly, removing the intermediate header-top/header-bottom wrappers - Add gap to card-header for consistent icon-to-text spacing Co-authored-by: Cursor <cursoragent@cursor.com>
…th spinner - Change primary action button fill from white to var(--bg-elevated) with white (#fff) icon color, inverting the previous color scheme - Replace StopCircle with Spinner component when action is running for a loading indicator instead of a stop affordance Co-authored-by: Cursor <cursoragent@cursor.com>
…imeline - Default sidebar to closed (sidebarOpen: false) so new users start with a wider workspace; persisted preference still overrides - BranchCard: remove "New note" / "New commit" footer buttons and associated styles; use Spinner instead of StopCircle for running actions; apply theme variables to primary-action-button - BranchTimeline: add empty-state with large dashed "Add Note" / "Add Commit" action buttons when timeline is empty - BranchTimeline: restyle note chips with transparent background and subtle border, highlight border color on hover instead of fill Co-authored-by: Cursor <cursoragent@cursor.com>
- Move Create PR and diff viewer buttons from card footer into the commit timeline row, inline with the New commit button (PR left, diff right) - Only show PR/diff buttons when there are code changes (at least one finalized commit with a SHA on the branch) - Add `hasCodeChanges` derived state in BranchCard based on timeline commits - Pass buttons to BranchTimeline via Svelte 5 `footerActions` snippet prop - Remove card-footer section and its styles from BranchCard - Update empty state action buttons: muted bg (--bg-elevated), no dashed border - Add flex layout with gap to add-commit-row for inline button alignment Co-authored-by: Cursor <cursoragent@cursor.com>
- Restructure header to use .header-left flex-column with branch name and workspace name subtitle, matching the local card's two-line layout - Move workspace name from separate .card-subheader into the header as a .base-branch-name subtitle - Update .card-header styles: padding 12px 16px, gap 12px, add border-bottom to match local card - Add .header-left and .base-branch-name styles, remove unused .branch-info, .card-subheader, and .workspace-name styles - Reduce Cloud icon size from 16 to 14 to match GitBranch icon sizing - Tighten .header-actions gap from 8px to 4px for consistency Co-authored-by: Cursor <cursoragent@cursor.com>
- Remove note/commit button footer that appeared when workspace was running - Remove associated CSS for .card-footer, .new-btn-group, .new-item-btn - Clean up unused GitCommitHorizontal and StickyNote imports Co-authored-by: Cursor <cursoragent@cursor.com>
- Redesign Sidebar as a rounded floating pane (border-radius, margin, subtle bg color) instead of bordered edge-to-edge panel - Replace commit/note activity feed with flat list of recent branches sorted by updatedAt, shown across all projects - Remove group-by-project toggle, per-project filtering, and async timeline fetching (SidebarItem type, fetchAllTimelines, etc.) - Clicking any sidebar item now navigates to the correct project first, then scrolls to and highlights the branch card - Make selectProjectAndBranch skip the 150ms mount delay when already viewing the target project for instant scroll - Add projectId to RunningBuild type so build clicks also navigate to the correct project before opening the output modal - Increase font sizes throughout sidebar (nav: xl, items: lg, meta: base, titles: sm, empty: lg) - Increase padding around Projects button for better touch target - Remove all internal borders (activity-header, builds-section) - ProjectSection: reorder header to show name first, always-visible menu icon, increase project name to size-xl - ProjectCard: add cloud icon for remote branches with running state color Co-authored-by: Cursor <cursoragent@cursor.com>
taylorkmho
requested review from
baxen,
matt2e and
wesbillman
as code owners
- Merge notes back into the single sorted timeline list alongside commits and reviews, reverting the horizontal note-chip strip - Add FileText icon and note-color styling to TimelineRow for note items - Handle pending/failed states for notes (spinner, alert triangle) - Use type-specific icons on footer buttons (FileText for notes, GitCommitHorizontal for commits) instead of generic Plus - Remove ~140 lines of unused note-chip CSS and related imports (Spinner, MessageSquare, Trash2, AlertTriangle from BranchTimeline) Co-authored-by: Cursor <cursoragent@cursor.com>
…ts navigation - Remove Sidebar.svelte, ProjectsList.svelte, ProjectCard.svelte, projectStore.svelte.ts, navigation.svelte.ts, detailPanelState.svelte.ts - Restore App.svelte to render TopBar + ProjectHome directly (no sidebar, no conditional routing between projects list and project detail) - Restore TopBar.svelte to simple layout without sidebar toggle or context-aware "+" button - Restore ProjectHome.svelte as self-contained page with local state for projects, branches, loading, error, and all modal management - Remove sidebar-related preferences (sidebarOpen, sidebarWidth, sidebarGroupByProject) from preferences.svelte.ts - Remove sidebar event handler (staged:show-action-output) from BranchCard - Sort branches by most recently updated (descending) in ProjectSection - Move "New Branch" button to top of branch list - Preserve independent UI improvements: header layout redesign, circular action buttons, timeline-integrated note/commit buttons, cleaner TimelineRow conditionals Co-authored-by: Cursor <cursoragent@cursor.com>
* origin/main: fix: surface worktree setup errors instead of showing infinite spinner (#106) feat: store data in platform-conventional directories (XDG) (#104) feat(notes): add copy-to-clipboard button in NoteModal (#103) feat: add use github repo based projects to avoid cloning when using remote branches (#102) fix: always branch new worktrees from remote-tracking refs (#100) fix: remove debug console.log statements from BranchCard (#97) feat: improve PR button UX with push support and conditional visibility (#89)
…mits - Resolve 5 merge conflicts in BranchCard.svelte: - Keep hasCodeChanges (snippet gate) over hasCommits (unused footer gate) - Take main's !worktreeError guard + HEAD's data-branch-id attribute - Keep HEAD's snippet-based PR button (no separate card-footer) - Add main's .worktree-error styles alongside HEAD's .footer-actions - Drop .new-btn-group styles (note/commit now in BranchTimeline) - Update snippet PR button with main's push state handling (pushing, push errors, force push dialogs, unpushed commits) - Remove unused hasCommits derived variable Co-authored-by: Cursor <cursoragent@cursor.com>
…success states
- Replace hardcoded `color: #fff` with `var(--ui-accent)` in
.primary-action-button so the play icon is visible in light mode
- Replace undefined `var(--ui-success)` with `var(--status-added)` across
three files — the token was never defined in theme.ts or app.css:
- BranchCard.svelte: completed action button and running action badge
- NoteModal.svelte: copied state on share button
- SessionLauncher.svelte: completed session indicator (also removes
inline fallback that was papering over the missing token)
Co-authored-by: Cursor <cursoragent@cursor.com>
taylorkmho
changed the title
- BranchCard: keep both data-branch-id and drag-over class - BranchTimeline: integrate pendingDropNotes with inline action buttons Co-authored-by: Cursor <cursoragent@cursor.com>
taylorkmho
changed the title
taylorkmho
changed the title
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
1 participant
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
Redesign branch card headers, move note/commit action buttons into the timeline, and align remote cards with local card layout. Frontend-only changes (8 files).
›separator; replacehasCommitswithhasCodeChanges(checks for actual SHAs); make primary action button icon-only at 14px; remove standalone diff buttononNewNote/onNewCommit/footerActionsprops; render empty-state with large action buttons and a footer row with inline "New note" / "New commit" buttons; both local and remote cards now delegate action buttons hereisNotederived; consolidate duplicate icon conditionalsupdatedAtdescending; move "New Branch" button to top of listvar(--ui-success)/var(--ui-success, #22c55e)→var(--status-added)in NoteModal and SessionLauncherselectedProjectId,selectProject,selectProjectAndBranch,goHome)Files changed
BranchCard.svelteRemoteBranchCard.svelteBranchTimeline.svelteTimelineRow.svelteisNotederived, consolidated icon conditionalsProjectSection.svelteupdatedAt, "New Branch" button moved to topNoteModal.svelte--ui-success→--status-addedSessionLauncher.svelte--ui-success→--status-addednavigation.svelte.ts