Skip to content
This repository was archived by the owner on Feb 6, 2026. It is now read-only.

fix: single row commit and notes #110

Open
matt2e wants to merge 13 commits into
base: main
Choose a base branch
from
Open

fix: single row commit and notes #110

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7c093c4
refactor(BranchCard): compact commit/note layout to single-line 3-col…
matt2e Feb 5, 2026
c34aabb
fix(BranchCard): align timeline row heights and vertical spacing
matt2e Feb 5, 2026
7cda2d9
feat(BranchCard): time label fades into hover buttons with hash visible
matt2e Feb 5, 2026
5d3ce2c
fix(BranchCard): remove vertical timeline lines to reduce row spacing
matt2e Feb 5, 2026
d6a35be
fix(BranchCard): vertically center timeline row content
matt2e Feb 5, 2026
9063c3a
feat(BranchCard): increase row height and restore vertical timeline l…
matt2e Feb 5, 2026
0cb2e2c
fix(BranchCard): center timeline icon and add lines above/below
matt2e Feb 5, 2026
af20a81
fix(BranchCard): restore min-height to timeline vertical lines
matt2e Feb 5, 2026
032cc90
fix(BranchCard): extend timeline lines to full row height and reduce …
matt2e Feb 5, 2026
c59e141
fix(BranchCard): balance row spacing and ensure icon centering
matt2e Feb 5, 2026
ec632ed
fix(BranchCard): increase row spacing and timeline line height
matt2e Feb 5, 2026
0abb2e6
fix(BranchCard): center timeline icons and remove commit hash
matt2e Feb 5, 2026
ca320da
refactor(BranchCard): remove unused commit-sha CSS class
matt2e Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 74 additions & 69 deletions src/lib/BranchCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -564,20 +564,16 @@
onclick={() => handleViewNote(item.note, true)}
>
<div class="timeline-marker">
<div class="timeline-line" class:invisible={index === 0}></div>
<div class="timeline-icon note-icon">
<Loader2 size={12} class="spinner" />
</div>
{#if index < timeline.length - 1}
<div class="timeline-line"></div>
{/if}
<div class="timeline-line" class:invisible={index === timeline.length - 1}></div>
</div>
<div class="timeline-content">
<div class="timeline-info">
<span class="timeline-title skeleton-title">{item.note.title}</span>
<div class="timeline-meta">
<span class="skeleton-meta">generating...</span>
</div>
</div>
<span class="timeline-title skeleton-title">{item.note.title}</span>
<span class="note-spacer"></span>
<span class="skeleton-meta">generating...</span>
</div>
<div class="watch-button">
<MessageSquare size={12} />
Expand All @@ -589,20 +585,16 @@
{#if isRunningSessionAlive}
<button class="timeline-row skeleton-row" onclick={handleWatchSession}>
<div class="timeline-marker">
<div class="timeline-line" class:invisible={index === 0}></div>
<div class="timeline-icon commit-icon">
<Loader2 size={12} class="spinner" />
</div>
{#if index < timeline.length - 1}
<div class="timeline-line"></div>
{/if}
<div class="timeline-line" class:invisible={index === timeline.length - 1}></div>
</div>
<div class="timeline-content">
<div class="timeline-info">
<span class="timeline-title skeleton-title">{item.session.prompt}</span>
<div class="timeline-meta">
<span class="skeleton-meta">generating...</span>
</div>
</div>
<span class="timeline-title skeleton-title">{item.session.prompt}</span>
<span class="note-spacer"></span>
<span class="skeleton-meta">Generating...</span>
</div>
<div class="watch-button">
<MessageSquare size={12} />
Expand All @@ -613,20 +605,17 @@
<!-- Stuck session - show recovery options -->
<div class="timeline-row skeleton-row stuck-session-row">
<div class="timeline-marker">
<div class="timeline-line" class:invisible={index === 0}></div>
<div
class="timeline-icon stuck-icon"
title="Session was interrupted before completing"
>
<AlertCircle size={12} />
</div>
{#if index < timeline.length - 1}
<div class="timeline-line"></div>
{/if}
<div class="timeline-line" class:invisible={index === timeline.length - 1}></div>
</div>
<div class="timeline-content">
<div class="timeline-info">
<span class="timeline-title skeleton-title">{item.session.prompt}</span>
</div>
<span class="timeline-title skeleton-title">{item.session.prompt}</span>
</div>
<div class="stuck-actions">
<button
Expand Down Expand Up @@ -655,23 +644,18 @@
{:else if item.type === 'commit'}
<div class="timeline-row commit-row" class:is-head={item.isHead}>
<div class="timeline-marker">
<div class="timeline-line" class:invisible={index === 0}></div>
<div class="timeline-icon commit-icon">
<GitCommit size={12} />
</div>
{#if index < timeline.length - 1}
<div class="timeline-line"></div>
{/if}
<div class="timeline-line" class:invisible={index === timeline.length - 1}></div>
</div>
<div class="timeline-content">
<div class="timeline-info">
<span class="timeline-title">{item.commit.subject}</span>
<div class="timeline-meta">
<span class="commit-sha">{item.commit.shortSha}</span>
<span class="timeline-time">{formatRelativeTime(item.commit.timestamp)}</span>
</div>
</div>
<span class="timeline-title">{item.commit.subject}</span>
</div>
<div class="timeline-actions">
<div class="timeline-actions-wrapper">
<span class="timeline-time fade-on-hover">{formatRelativeTime(item.commit.timestamp)}</span>
<div class="timeline-actions">
{#if confirmingDeleteCommitSha === item.commit.sha}
<div class="delete-confirm">
{#if commitsToDeleteCount > 1}
Expand Down Expand Up @@ -725,32 +709,29 @@
</button>
{/if}
{/if}
</div>
</div>
</div>
{:else if item.type === 'note'}
<!-- Note row - similar to commit row with separate action buttons -->
<div class="timeline-row note-row">
<div class="timeline-marker">
<div class="timeline-line" class:invisible={index === 0}></div>
<div class="timeline-icon note-icon">
{#if item.note.title.startsWith('Code Review')}
<FileSearch size={12} />
{:else}
<FileText size={12} />
{/if}
</div>
{#if index < timeline.length - 1}
<div class="timeline-line"></div>
{/if}
<div class="timeline-line" class:invisible={index === timeline.length - 1}></div>
</div>
<div class="timeline-content">
<div class="timeline-info">
<span class="timeline-title">{item.note.title}</span>
<div class="timeline-meta">
<span class="timeline-time">{formatRelativeTimeMs(item.note.createdAt)}</span>
</div>
</div>
<span class="timeline-title">{item.note.title}</span>
</div>
<div class="timeline-actions">
<div class="timeline-actions-wrapper">
<span class="timeline-time fade-on-hover">{formatRelativeTimeMs(item.note.createdAt)}</span>
<div class="timeline-actions">
{#if confirmingDeleteNoteId === item.note.id}
<div class="delete-confirm">
<button
Expand Down Expand Up @@ -803,6 +784,7 @@
<Trash2 size={12} />
</button>
{/if}
</div>
</div>
</div>
{/if}
Expand Down Expand Up @@ -1190,9 +1172,9 @@

.timeline-row {
display: flex;
align-items: flex-start;
align-items: center;
gap: 10px;
padding: 6px 8px;
padding: 10px 8px;
margin: 0 -8px;
background: transparent;
border: none;
Expand All @@ -1217,24 +1199,32 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20px;
flex-shrink: 0;
position: absolute;
top: 0;
bottom: 0;
left: 8px;
}

.timeline-content {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
margin-left: 30px;
}

.timeline-line {
flex: 1;
width: 2px;
min-height: 16px;
min-height: 8px;
background-color: var(--border-subtle);
margin-top: 4px;
}

.timeline-content {
flex: 1;
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
.timeline-line.invisible {
opacity: 0;
}

.timeline-icon {
Expand All @@ -1256,47 +1246,62 @@
color: var(--text-accent);
}

.timeline-info {
flex: 1;
min-width: 0;
}

.timeline-title {
display: block;
flex: 1;
font-size: var(--size-sm);
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

.skeleton-title {
color: var(--text-muted);
font-style: italic;
}

.timeline-meta {
.note-spacer {
/* Empty spacer for notes to align with commit hash column */
}

.timeline-actions-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
gap: 12px;
position: relative;
flex-shrink: 0;
}

.commit-sha {
.timeline-time {
font-size: var(--size-xs);
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
color: var(--text-faint);
white-space: nowrap;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
right: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}

.timeline-time {
font-size: var(--size-xs);
color: var(--text-faint);
.fade-on-hover {
opacity: 1;
}

.commit-row:hover .fade-on-hover,
.note-row:hover .fade-on-hover {
opacity: 0;
}

.skeleton-meta {
font-size: var(--size-xs);
color: var(--text-faint);
animation: pulse 2s ease-in-out infinite;
white-space: nowrap;
text-align: right;
}

.timeline-actions {
Expand Down
Loading