Skip to content

feat(staged): sort repo badges alphabetically and show full name in project list #611

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matt2e merged 1 commit into from
Apr 13, 2026
Merged

feat(staged): sort repo badges alphabetically and show full name in project list #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
92 changes: 75 additions & 17 deletions apps/staged/src/lib/features/projects/ProjectsList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
import Spinner from '../../shared/Spinner.svelte';
import SineWave from '../../shared/SineWave.svelte';
import RepoLabel from '../../shared/RepoLabel.svelte';
import RepoBadge from '../../shared/RepoBadge.svelte';

import { setProjects } from './projectsSidebarState.svelte';
import { darkMode } from '../../stores/isDark.svelte';
import { repoBadgeStore } from '../../stores/repoBadges.svelte';
Expand All @@ -58,7 +58,7 @@
)
);

/** Unique repo+subpath entries sorted by project count descending */
/** Unique repo+subpath entries sorted alphabetically by full display string */
let repoFilters = $derived.by(() => {
const counts = new Map<string, { repo: string; subpath: string; count: number }>();
for (const project of projects) {
Expand All @@ -83,7 +83,11 @@
}
}
}
return [...counts.values()].sort((a, b) => b.count - a.count);
return [...counts.values()].sort((a, b) => {
const aDisplay = a.subpath ? `${a.repo}/${a.subpath}` : a.repo;
const bDisplay = b.subpath ? `${b.repo}/${b.subpath}` : b.repo;
return aDisplay.localeCompare(bDisplay);
});
});

let unreadCount = $derived(projects.filter((p) => projectStateStore.isUnread(p.id)).length);
Expand Down Expand Up @@ -453,7 +457,7 @@
? `--repo-bg: ${darkMode.value ? `hsl(${badge.hue} 35% 22%)` : `hsl(${badge.hue} 50% 92%)`}; --repo-fg: ${darkMode.value ? `hsl(${badge.hue} 50% 75%)` : `hsl(${badge.hue} 55% 35%)`}; --repo-bg-hover: ${darkMode.value ? `hsl(${badge.hue} 35% 28%)` : `hsl(${badge.hue} 50% 88%)`}`
: ''}
>
{badge?.shortName ?? rf.repo.split('/').pop()}
<RepoLabel githubRepo={rf.repo} subpath={rf.subpath || null} />
<span class="filter-count">{rf.count}</span>
</button>
{/each}
Expand Down Expand Up @@ -541,23 +545,47 @@
{/if}
<div class="repo">
{#if repos.length > 0}
{#each repos as r}
{#each [...repos].sort((a, b) => {
const aKey = a.subpath ? `${a.githubRepo}/${a.subpath}` : a.githubRepo;
const bKey = b.subpath ? `${b.githubRepo}/${b.subpath}` : b.githubRepo;
return aKey.localeCompare(bKey);
}) as r}
{@const badge = repoBadgeStore.lookup(r.githubRepo, r.subpath)}
<span class="repo-line">
{#if badge}
<RepoBadge shortName={badge.shortName} hue={badge.hue} />
{/if}
<RepoLabel githubRepo={r.githubRepo} subpath={r.subpath} />
</span>
{#if badge}
<span
class="repo-badge-label"
style="background: {darkMode.value
? `hsl(${badge.hue} 35% 22%)`
: `hsl(${badge.hue} 50% 92%)`}; color: {darkMode.value
? `hsl(${badge.hue} 50% 75%)`
: `hsl(${badge.hue} 55% 35%)`};"
>
<RepoLabel githubRepo={r.githubRepo} subpath={r.subpath} />
</span>
{:else}
<span class="repo-line">
<RepoLabel githubRepo={r.githubRepo} subpath={r.subpath} />
</span>
{/if}
{/each}
{:else if project.githubRepo}
{@const badge = repoBadgeStore.lookup(project.githubRepo, project.subpath)}
<span class="repo-line">
{#if badge}
<RepoBadge shortName={badge.shortName} hue={badge.hue} />
{/if}
<RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
</span>
{#if badge}
<span
class="repo-badge-label"
style="background: {darkMode.value
? `hsl(${badge.hue} 35% 22%)`
: `hsl(${badge.hue} 50% 92%)`}; color: {darkMode.value
? `hsl(${badge.hue} 50% 75%)`
: `hsl(${badge.hue} 55% 35%)`};"
>
<RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
</span>
{:else}
<span class="repo-line">
<RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
</span>
{/if}
{:else}
No repo attached
{/if}
Expand Down Expand Up @@ -746,6 +774,15 @@
background: rgba(128, 128, 128, 0.2);
}

.filter-chip.repo-filter :global(.repo-label-prefix) {
color: inherit;
opacity: 0.6;
}

.filter-chip.repo-filter :global(.repo-label-emphasis) {
color: inherit;
}

.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
Expand Down Expand Up @@ -865,6 +902,27 @@
white-space: nowrap;
}

.repo-badge-label {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 4px;
font-weight: 600;
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.repo-badge-label :global(.repo-label-prefix) {
color: inherit;
opacity: 0.6;
}

.repo-badge-label :global(.repo-label-emphasis) {
color: inherit;
}

.deleting-pill {
width: fit-content;
padding: 2px 8px;
Expand Down
3 changes: 2 additions & 1 deletion apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,8 @@
{@const repos = reposByProject.get(project.id) ?? []}
{@const badges = repos
.map((r) => repoBadgeStore.lookup(r.githubRepo, r.subpath))
.filter((b): b is NonNullable<typeof b> => Boolean(b))}
.filter((b): b is NonNullable<typeof b> => Boolean(b))
.sort((a, b) => a.shortName.localeCompare(b.shortName))}
{@const activity = projectActivity(sessionTypes, status.runActionPhase)}
<button
class="project-row"
Expand Down