diff --git a/apps/staged/src/App.svelte b/apps/staged/src/App.svelte
index 0c11b85a..ef7d682e 100644
--- a/apps/staged/src/App.svelte
+++ b/apps/staged/src/App.svelte
@@ -47,6 +47,7 @@
import { runSearchShortcut } from './lib/features/keyboard/searchTargets';
import { projectStateStore } from './lib/stores/projectState.svelte';
import { projectsDataStore } from './lib/stores/projectsData.svelte';
+ import { projectRunActionsStore } from './lib/stores/projectRunActions.svelte';
import { initBloxEnv } from './lib/stores/bloxEnv.svelte';
import { listenForSessionStatus } from './lib/listeners/sessionStatusListener';
import { listenForCacheInvalidation } from './lib/listeners/cacheInvalidationListener';
@@ -309,6 +310,12 @@
// Keep the shared project-list cache fresh for the app's lifetime — the
// store dedupes, so starting before any view consumes it is safe.
projectsDataStore.startListeners();
+ // Run-action state feeds the shared project filters (Running chip,
+ // filtered lists), which every route renders via the sidebar or the
+ // landing grid — so its listeners are app-lifetime too. A view-scoped
+ // lifecycle wiped the state on the repos route, where neither view that
+ // used to own it is mounted.
+ projectRunActionsStore.startListening();
try {
await initPreferences();
@@ -499,6 +506,7 @@
unlistenPageLifecycle?.();
unlistenAcpToolsReconciled?.();
projectsDataStore.stopListeners();
+ projectRunActionsStore.stopListening();
stopUpdaterLoop?.();
});
diff --git a/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte b/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte
new file mode 100644
index 00000000..ed261f55
--- /dev/null
+++ b/apps/staged/src/lib/features/projects/ProjectFilterChips.svelte
@@ -0,0 +1,226 @@
+
+
+
+
+
+
diff --git a/apps/staged/src/lib/features/projects/ProjectHome.svelte b/apps/staged/src/lib/features/projects/ProjectHome.svelte
index 8763fd92..3eaa8965 100644
--- a/apps/staged/src/lib/features/projects/ProjectHome.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectHome.svelte
@@ -128,14 +128,14 @@
onMount(() => {
// Backend/window listeners for the shared data (pr-status-changed,
// session-status-changed, project-setup-progress, cache-stale) live in
- // the projectsData store, started once from App.svelte.
+ // the projectsData and projectRunActions stores, started once from
+ // App.svelte.
workspaceLifecycle.start({
getBranchesByProject: () => projectsDataStore.branchesByProject,
setBranchesByProject: (next) => projectsDataStore.setBranchesByProject(next),
isProjectDeleting: (projectId) => projectsDataStore.isProjectDeleting(projectId),
});
checkStoreAndLoad();
- void projectRunActionsStore.startListening();
const onNewProject = (event: Event) => handleNewProject(repoSeedFromNewProjectEvent(event));
window.addEventListener('staged:new-project', onNewProject);
@@ -165,7 +165,6 @@
unlistenDetection();
cancelQueuedSessionDrain();
workspaceLifecycle.stop();
- projectRunActionsStore.stopListening();
};
});
diff --git a/apps/staged/src/lib/features/projects/ProjectsList.svelte b/apps/staged/src/lib/features/projects/ProjectsList.svelte
index 880a85c5..fa5cd849 100644
--- a/apps/staged/src/lib/features/projects/ProjectsList.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectsList.svelte
@@ -44,17 +44,18 @@
} from './projectsListViewState.svelte';
import { darkMode } from '../../stores/isDark.svelte';
import { repoBadgeStore } from '../../stores/repoBadges.svelte';
- import { badgeBg, badgeFg, badgeBgHover } from '../../shared/badgeColors';
+ import { badgeBg, badgeFg } from '../../shared/badgeColors';
+ import { projectFiltersStore } from './projectFilters.svelte';
+ import ProjectFilterChips from './ProjectFilterChips.svelte';
import { repoSeedFromNewProjectEvent } from './newProjectEvent';
import type { RepoSelection } from '../../shared/githubUrl';
import { viewport } from '../../shared/viewport.svelte';
import TopBarPortal from '../layout/TopBarPortal.svelte';
- type FilterKind = 'unread' | 'running' | { repo: string; subpath: string };
-
// Data comes from the shared projectsData store — returning to the landing
// page paints instantly from memory while the store revalidates in the
- // background. Filters, scroll restore, and modal state stay view-local.
+ // background. Filters live in the shared projectFiltersStore so the sidebar
+ // sees the same selection; scroll restore and modal state stay view-local.
let projects = $derived(projectsDataStore.projects);
let projectBranches = $derived(projectsDataStore.branchesByProject);
let reposByProject = $derived(projectsDataStore.reposByProject);
@@ -71,127 +72,40 @@
let newProjectInitialRepo = $state(null);
let isCommandKeyHeld = $state(false);
let mainPanelEl = $state(null);
- let activeFilters = $state>(new Set());
let restoreInProgress = false;
let restoreToken = 0;
const projectCardElements = new Map();
- /** Unique repo+subpath entries sorted alphabetically by full display string */
- let repoFilters = $derived.by(() => {
- const counts = new Map();
- for (const project of projects) {
- const repos = reposByProject.get(project.id) ?? [];
- if (repos.length > 0) {
- for (const r of repos) {
- const displayRepo = r.headRepo ?? r.githubRepo;
- const key = `${displayRepo}:${r.subpath ?? ''}`;
- const entry = counts.get(key);
- if (entry) {
- entry.count++;
- } else {
- counts.set(key, { repo: displayRepo, subpath: r.subpath ?? '', count: 1 });
- }
- }
- } else if (project.githubRepo) {
- const key = `${project.githubRepo}:${project.subpath ?? ''}`;
- const entry = counts.get(key);
- if (entry) {
- entry.count++;
- } else {
- counts.set(key, { repo: project.githubRepo, subpath: project.subpath ?? '', count: 1 });
- }
- }
- }
- 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);
- });
- });
-
- function filterKey(filter: FilterKind): string {
- if (typeof filter === 'string') return filter;
- return `repo:${filter.repo}:${filter.subpath}`;
- }
-
- let allFilters = $derived.by(() => {
- const filters: FilterKind[] = ['unread', 'running'];
- for (const rf of repoFilters) {
- filters.push({ repo: rf.repo, subpath: rf.subpath });
- }
- return filters;
- });
-
- let unreadCount = $derived(projects.filter((p) => projectStateStore.isUnread(p.id)).length);
-
- let runningCount = $derived(
- projects.filter((p) => {
- const status = getProjectStatus(p.id, deletingProjectNames, projectBranches.get(p.id) || []);
- return status.kind === 'running' || status.kind === 'runAction';
- }).length
- );
-
- let hasRepoFilters = $derived(
- [...activeFilters].some((key) => key !== 'unread' && key !== 'running')
- );
+ // The card you just came back from stays in the grid even when the active
+ // filters no longer match it: visiting a project marks it read, so with
+ // Unread active the card returnTargetProjectId points at — the one the
+ // scroll restore is aiming for — would otherwise be gone on arrival. Same
+ // exception the sidebar makes for the selected project. Captured at mount
+ // (this component is created fresh on every return to the landing page),
+ // but only while a restore is actually pending: returnTargetProjectId is
+ // never cleared, so an ordinary mount — landing → settings → back, where
+ // requestProjectsListRestore(null) early-returns — would otherwise pin a
+ // project from a previous visit. restorePending is still true here; the
+ // effect that finishes the restore runs after mount.
+ const stickyProjectId = projectsListViewState.restorePending
+ ? projectsListViewState.returnTargetProjectId
+ : null;
+ // The exception lasts only until the first filter change, so a deliberate
+ // re-filter hides the card. The store replaces the Set on every change, so
+ // identity is the signal — derived rather than tracked in an effect, which
+ // would paint the stale card once under the new filters before removing it.
+ const filtersAtMount = projectFiltersStore.activeFilters;
let filteredProjects = $derived.by(() => {
- if (activeFilters.size === 0) return projects;
- return projects.filter((p) => {
- // Status filters are AND'd with each other and with repo filters
- if (activeFilters.has('unread') && !projectStateStore.isUnread(p.id)) return false;
- if (activeFilters.has('running')) {
- const status = getProjectStatus(
- p.id,
- deletingProjectNames,
- projectBranches.get(p.id) || []
- );
- if (status.kind !== 'running' && status.kind !== 'runAction') return false;
- }
- // Repo filters are OR'd with each other
- if (!hasRepoFilters) return true;
- const repos = reposByProject.get(p.id) ?? [];
- if (repos.length > 0) {
- return repos.some((r) =>
- activeFilters.has(
- filterKey({ repo: r.headRepo ?? r.githubRepo, subpath: r.subpath ?? '' })
- )
- );
- }
- if (p.githubRepo) {
- return activeFilters.has(filterKey({ repo: p.githubRepo, subpath: p.subpath ?? '' }));
- }
- return false;
- });
+ const filtered = projectFiltersStore.filteredProjects;
+ const sticky = projectFiltersStore.activeFilters === filtersAtMount ? stickyProjectId : null;
+ if (!sticky || filtered.some((p) => p.id === sticky)) return filtered;
+ // Rebuilt from the full list rather than appended so the sticky card keeps
+ // its place in the grid — the position the scroll restore captured.
+ const matched = new Set(filtered.map((p) => p.id));
+ return projects.filter((p) => matched.has(p.id) || p.id === sticky);
});
- function toggleFilter(filter: FilterKind, event?: MouseEvent) {
- const key = filterKey(filter);
-
- if (event?.shiftKey) {
- // Shift+click: toggle individual filter
- const next = new Set(activeFilters);
- if (next.has(key)) {
- next.delete(key);
- } else {
- next.add(key);
- }
- activeFilters = next;
- } else {
- // Plain click: switch to this filter exclusively
- if (activeFilters.size === 1 && activeFilters.has(key)) {
- // Clicking the only active filter deselects it (back to showing all)
- activeFilters = new Set();
- } else {
- activeFilters = new Set([key]);
- }
- }
- }
-
- function isFilterActive(filter: FilterKind): boolean {
- return activeFilters.has(filterKey(filter));
- }
-
function trackProjectCard(node: HTMLElement, projectId: string) {
let currentProjectId = projectId;
projectCardElements.set(currentProjectId, node);
@@ -245,24 +159,32 @@
}
$effect(() => {
- const readyToRestore =
+ const readyToDecide =
projectsListViewState.restorePending &&
!restoreInProgress &&
!loading &&
!error &&
- filteredProjects.length > 0 &&
mainPanelEl;
- if (!readyToRestore) return;
+ if (!readyToDecide) return;
+
+ // Nothing to restore to — the shared filters can outlive this view and
+ // match no project at all. Drop the request rather than leaving it armed:
+ // it would otherwise fire whenever the list next became non-empty, jumping
+ // scroll to a position captured for a different list.
+ if (filteredProjects.length === 0) {
+ finishProjectsListRestore();
+ return;
+ }
+
void restoreProjectsListPosition();
});
onMount(() => {
// Backend/window listeners for the shared data live in the projectsData
- // store, started once from App.svelte.
+ // and projectRunActions stores, started once from App.svelte.
void projectsDataStore.ensureLoaded();
void projectsDataStore.ensureHomeReposLoaded();
- void projectRunActionsStore.startListening();
const onNewProject = (event: Event) => {
newProjectInitialRepo = repoSeedFromNewProjectEvent(event);
@@ -271,7 +193,6 @@
window.addEventListener('staged:new-project', onNewProject);
return () => {
- projectRunActionsStore.stopListening();
window.removeEventListener('staged:new-project', onNewProject);
};
});
@@ -363,8 +284,8 @@
if ((e.metaKey || e.ctrlKey) && /^[1-9]$/.test(e.key)) {
e.preventDefault();
const index = parseInt(e.key) - 1;
- if (index < projects.length) {
- openProject(projects[index].id);
+ if (index < filteredProjects.length) {
+ openProject(filteredProjects[index].id);
}
}
}
@@ -462,43 +383,9 @@
{/if}
- {#if projects.length > 0}
-