feat(app): filter the sidebar by project (#3563)

The sidebar can be pinned to a set of hosts or to a set of labels, but not to a set of projects. If you keep many projects on one host, the project is the filter you want. Add a Project page to the sidebar display menu, next to Host. It multi-selects projects, and an empty selection means every project. Apply the filter at two points. Project grouping reads the projects array, but Status grouping builds its rows from the workspace entries. A filter applied to only one of the two leaves the other mode unfiltered. Apply nothing when a stored selection names no visible project. The project list is narrowed by the host filter, and it is empty before any host connects, so dropping keys that do not match would destroy the selection on every cold start. Count the project filter in the sidebar header gate. Pinning every chat in a project drops that project from the unpinned list. Filtering to that project then removed the header, and the header carries the display menu, which is the only way back to the Project page. Generalise the label filter empty state to all sidebar filters, and move its strings out of the labels namespace. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-08-20 23:51:35 +02:00
parent 33224ace47
commit c3d37eba4b
23 changed files with 747 additions and 78 deletions
@@ -88,7 +88,8 @@ interface SidebarSharedProps {
  projectIconTargets: SidebarProjectIconTarget[];
  pinnedGroups: PinnedSidebarGroups;
  projects: SidebarProjectEntry[];
-  hasProjectsBeforeLabelFilter: boolean;
+  hasProjectsBeforeFilter: boolean;
+  hasActiveProjectFilter: boolean;
  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
  isInitialLoad: boolean;
  isRevalidating: boolean;
@@ -143,7 +144,8 @@ export const LeftSidebar = memo(function LeftSidebar({ active }: { active: boole

  const {
    projects,
-    hasProjectsBeforeLabelFilter,
+    hasProjectsBeforeFilter,
+    resolvedProjectFilters,
    workspaceEntriesByKey,
    isInitialLoad,
    isRevalidating,
@@ -251,7 +253,8 @@ export const LeftSidebar = memo(function LeftSidebar({ active }: { active: boole
    projectIconTargets,
    pinnedGroups,
    projects,
-    hasProjectsBeforeLabelFilter,
+    hasProjectsBeforeFilter,
+    hasActiveProjectFilter: resolvedProjectFilters.length > 0,
    workspaceEntriesByKey,
    isInitialLoad,
    isRevalidating,
@@ -606,7 +609,8 @@ function MobileSidebar({
  projectIconTargets,
  pinnedGroups,
  projects,
-  hasProjectsBeforeLabelFilter,
+  hasProjectsBeforeFilter,
+  hasActiveProjectFilter,
  workspaceEntriesByKey,
  isInitialLoad,
  isRevalidating,
@@ -725,7 +729,8 @@ function MobileSidebar({
            projectIconTargets={projectIconTargets}
            pinnedGroups={pinnedGroups}
            projects={projects}
-            hasProjectsBeforeLabelFilter={hasProjectsBeforeLabelFilter}
+            hasProjectsBeforeFilter={hasProjectsBeforeFilter}
+            hasActiveProjectFilter={hasActiveProjectFilter}
            workspaceEntriesByKey={workspaceEntriesByKey}
            isRefreshing={isManualRefresh && isRevalidating}
            onRefresh={handleRefresh}
@@ -757,7 +762,8 @@ function DesktopSidebar({
  projectIconTargets,
  pinnedGroups,
  projects,
-  hasProjectsBeforeLabelFilter,
+  hasProjectsBeforeFilter,
+  hasActiveProjectFilter,
  workspaceEntriesByKey,
  isInitialLoad,
  isRevalidating,
@@ -930,7 +936,8 @@ function DesktopSidebar({
            projectIconTargets={projectIconTargets}
            pinnedGroups={pinnedGroups}
            projects={projects}
-            hasProjectsBeforeLabelFilter={hasProjectsBeforeLabelFilter}
+            hasProjectsBeforeFilter={hasProjectsBeforeFilter}
+            hasActiveProjectFilter={hasActiveProjectFilter}
            workspaceEntriesByKey={workspaceEntriesByKey}
            isRefreshing={isManualRefresh && isRevalidating}
            onRefresh={handleRefresh}
@@ -118,7 +118,7 @@ import {
 } from "@/components/sidebar/sidebar-workspace-row-content";
 import { useOpenKebabMenuVisibility } from "@/components/sidebar/use-open-kebab-menu-visibility";
 import {
-  SidebarLabelFilterEmptyState,
+  SidebarFilterEmptyState,
  SidebarProjectEmptyState,
 } from "@/components/sidebar/empty-states";
 import { selectWorkspaceServiceSummary } from "@/components/sidebar/workspace-meta-row";
@@ -245,7 +245,9 @@ interface SidebarWorkspaceListProps {
  projectIconTargets: SidebarProjectIconTarget[];
  pinnedGroups: PinnedSidebarGroups;
  projects: SidebarProjectEntry[];
-  hasProjectsBeforeLabelFilter: boolean;
+  hasProjectsBeforeFilter: boolean;
+  /** Whether a project filter is actually being applied — the resolved list, not the stored one. */
+  hasActiveProjectFilter: boolean;
  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
  collapsedProjectKeys: ReadonlySet<string>;
  onToggleProjectCollapsed: (projectViewKey: string) => void;
@@ -1935,7 +1937,8 @@ export function SidebarWorkspaceList({
  projectIconTargets,
  pinnedGroups,
  projects,
-  hasProjectsBeforeLabelFilter,
+  hasProjectsBeforeFilter,
+  hasActiveProjectFilter,
  workspaceEntriesByKey,
  collapsedProjectKeys,
  onToggleProjectCollapsed,
@@ -1999,8 +2002,12 @@ export function SidebarWorkspaceList({
  // A filter that matches nothing swaps the list's body and nothing above it. It used to replace
  // this whole subtree, which unmounted the header — and the header is where the display menu's
  // trigger lives, so filtering the last row away closed the menu you were filtering from.
-  const labelFilterEmpty =
-    hasActiveLabelFilter && hasProjectsBeforeLabelFilter && projects.length === 0;
+  //
+  // Only the label filter can get here. The project filter resolves against the projects it can
+  // see and falls back to "all projects" when nothing matches, so it either keeps at least one
+  // project or is not applied at all — it can narrow this list but never empty it.
+  const sidebarFilterEmpty =
+    hasActiveLabelFilter && hasProjectsBeforeFilter && projects.length === 0;

  // Project mode is the one that keeps its project headers; every other grouping mode is a flat
  // list of grouped rows, so a new mode lands in the grouped branch rather than silently in this
@@ -2019,7 +2026,7 @@ export function SidebarWorkspaceList({
        onToggleWorkspacePin={onToggleWorkspacePin}
        onPinnedWorkspaceReorder={handlePinnedWorkspaceReorder}
        listHeaderComponent={listHeaderComponent}
-        labelFilterEmpty={labelFilterEmpty}
+        sidebarFilterEmpty={sidebarFilterEmpty}
        parentGestureRef={parentGestureRef}
        dragGestureHostPresented={dragGestureHostPresented}
      />
@@ -2036,7 +2043,8 @@ export function SidebarWorkspaceList({
        onAddProject={onAddProject}
        listFooterComponent={listFooterComponent}
        listHeaderComponent={listHeaderComponent}
-        labelFilterEmpty={labelFilterEmpty}
+        sidebarFilterEmpty={sidebarFilterEmpty}
+        hasActiveProjectFilter={hasActiveProjectFilter}
        parentGestureRef={parentGestureRef}
        dragGestureHostPresented={dragGestureHostPresented}
        pathname={pathname}
@@ -2069,7 +2077,7 @@ function SidebarGroupedModeList({
  onToggleWorkspacePin,
  onPinnedWorkspaceReorder,
  listHeaderComponent,
-  labelFilterEmpty,
+  sidebarFilterEmpty,
  parentGestureRef,
  dragGestureHostPresented,
 }: {
@@ -2084,7 +2092,7 @@ function SidebarGroupedModeList({
  onToggleWorkspacePin: ToggleSidebarWorkspacePin;
  onPinnedWorkspaceReorder: (workspaces: SidebarWorkspacePlacement[]) => void;
  listHeaderComponent?: ReactElement | null;
-  labelFilterEmpty: boolean;
+  sidebarFilterEmpty: boolean;
  parentGestureRef?: MutableRefObject<GestureType | undefined>;
  dragGestureHostPresented?: boolean;
 }) {
@@ -2111,7 +2119,7 @@ function SidebarGroupedModeList({
      onToggleWorkspacePin={onToggleWorkspacePin}
      onPinnedWorkspaceReorder={onPinnedWorkspaceReorder}
      listHeaderComponent={listHeaderComponent}
-      labelFilterEmpty={labelFilterEmpty}
+      sidebarFilterEmpty={sidebarFilterEmpty}
      parentGestureRef={parentGestureRef}
      dragGestureHostPresented={dragGestureHostPresented}
    />
@@ -2130,7 +2138,8 @@ function ProjectModeList({
  onAddProject,
  listFooterComponent,
  listHeaderComponent,
-  labelFilterEmpty,
+  sidebarFilterEmpty,
+  hasActiveProjectFilter,
  parentGestureRef,
  dragGestureHostPresented,
  pathname,
@@ -2144,12 +2153,12 @@ function ProjectModeList({
  | "workspaceGroups"
  | "projectIconTargets"
  | "groupMode"
-  | "hasProjectsBeforeLabelFilter"
+  | "hasProjectsBeforeFilter"
  | "isRefreshing"
  | "onRefresh"
 > & {
  /** Swaps the list body for the label filter's empty state. Never the header above it. */
-  labelFilterEmpty: boolean;
+  sidebarFilterEmpty: boolean;
  projectIconByProjectViewKey: ReadonlyMap<string, string | null>;
  pathname: string;
  hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
@@ -2487,11 +2496,17 @@ function ProjectModeList({
      ) : null}
      {/* The header carries the display menu, which is the only way back out of a filter, so it
        stays for as long as a filter is what emptied the list. It is absent only when the
-        sidebar is genuinely empty, where a section heading would sit over nothing. */}
-      {unpinnedProjects.length > 0 || hasActiveHostFilter || labelFilterEmpty
+        sidebar is genuinely empty, where a section heading would sit over nothing.
+        Every filter that can empty this branch needs a term here: a project filter pinned to a
+        project whose chats are all pinned leaves `unpinnedProjects` empty, and without its term
+        the header would go with it, taking the only route back to the filter page. */}
+      {unpinnedProjects.length > 0 ||
+      hasActiveHostFilter ||
+      hasActiveProjectFilter ||
+      sidebarFilterEmpty
        ? listHeaderComponent
        : null}
-      {labelFilterEmpty ? <SidebarLabelFilterEmptyState /> : projectBody}
+      {sidebarFilterEmpty ? <SidebarFilterEmptyState /> : projectBody}
      {listFooterComponent}
    </>
  );
@@ -38,6 +38,12 @@ import {
 import { HostStatusDot } from "@/components/host-status-dot";
 import { isWeb } from "@/constants/platform";
 import { useHosts } from "@/runtime/host-runtime";
+import { useSidebarModel } from "@/components/sidebar/sidebar-model";
+import { ProjectIconView } from "@/components/project-icon-view";
+import { useProjectIcons } from "@/projects/icons";
+import { resolveSidebarProjectIconTargets } from "@/utils/sidebar-project-row-model";
+import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
+import type { SidebarProjectEntry } from "@/hooks/use-sidebar-workspaces-list";
 import type { Theme } from "@/styles/theme";
 import {
  hasActiveSidebarLabelFilter,
@@ -159,6 +165,9 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
  const { t } = useTranslation();
  const preferences = useSidebarDisplayPreferences();
  const hosts = useHosts();
+  // `allProjects`, never `projects`: the model's `projects` is already filtered, so a picker fed
+  // from it would lose the row that undoes the filter as soon as the filter narrowed to one.
+  const { allProjects, resolvedProjectFilters } = useSidebarModel();
  const { labels } = useWorkspaceLabelProjection();
  const [managerOpen, setManagerOpen] = useState(false);
  const openManager = useCallback(() => setManagerOpen(true), []);
@@ -173,6 +182,8 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
  );

  const showHostFilter = hosts.length > 1;
+  // One project is the whole sidebar, so filtering to it is a no-op with a menu row attached.
+  const showProjectFilter = allProjects.length > 1;
  // Nothing to filter by means no row at all. The active-filter half is not redundant: the merged
  // catalog only counts hosts that are online, so a host dropping off would otherwise take away
  // the only way back to a filter that is still hiding workspaces.
@@ -236,6 +247,19 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
        content: <HostFilterPage preferences={preferences} hosts={hosts} />,
      });
    }
+    if (showProjectFilter) {
+      definitions.push({
+        id: "projectFilter",
+        title: t("sidebar.display.projectFilter.label"),
+        content: (
+          <ProjectFilterPage
+            projects={allProjects}
+            resolvedProjectFilters={resolvedProjectFilters}
+            preferences={preferences}
+          />
+        ),
+      });
+    }
    if (showLabelFilter) {
      definitions.push({
        id: "labelFilter",
@@ -246,7 +270,18 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
      });
    }
    return definitions;
-  }, [t, preferences, hosts, showHostFilter, showLabelFilter, labels, openManager]);
+  }, [
+    t,
+    preferences,
+    hosts,
+    showHostFilter,
+    showProjectFilter,
+    allProjects,
+    resolvedProjectFilters,
+    showLabelFilter,
+    labels,
+    openManager,
+  ]);

  return (
    <>
@@ -297,6 +332,21 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
              </MenuSubTrigger>
            </>
          ) : null}
+          {showProjectFilter ? (
+            <>
+              {/* Host and Project narrow the same list, so they read as one block. The separator
+                belongs above whichever of the two is showing first — with a single host there is
+                no Host row and Project is what has to carry it. */}
+              {showHostFilter ? null : <MenuSeparator />}
+              <MenuSubTrigger
+                id="projectFilter"
+                indicator={resolvedProjectFilters.length > 0}
+                testID="sidebar-display-project-filter"
+              >
+                {t("sidebar.display.projectFilter.label")}
+              </MenuSubTrigger>
+            </>
+          ) : null}
          {showLabelFilter ? (
            <>
              <MenuSeparator />
@@ -550,6 +600,93 @@ function ChecksSubTrigger(): ReactElement {
  );
 }

+/**
+ * Every project the sidebar could show, one row each.
+ *
+ * A workspace belongs to exactly one project, so this is a plain allowlist — the same shape as the
+ * host page, and deliberately not the label page's tri-state.
+ *
+ * Selection reads `resolvedProjectFilters`, not the stored list. A stored key whose project is not
+ * currently visible filters nothing, so showing it as checked here would contradict the sidebar.
+ */
+function ProjectFilterPage({
+  projects,
+  resolvedProjectFilters,
+  preferences,
+}: {
+  projects: readonly SidebarProjectEntry[];
+  resolvedProjectFilters: readonly string[];
+  preferences: Preferences;
+}): ReactElement {
+  const { t } = useTranslation();
+  const iconTargets = useMemo(() => resolveSidebarProjectIconTargets(projects), [projects]);
+  // Shares TanStack's cache with the sidebar's own call, so this subscribes rather than refetches.
+  const iconByProjectViewKey = useProjectIcons({ projects: iconTargets });
+
+  return (
+    <>
+      <MenuItem
+        selected={resolvedProjectFilters.length === 0}
+        closeOnSelect={false}
+        onSelect={preferences.clearProjectFilters}
+        testID="sidebar-project-filter-all"
+      >
+        {t("sidebar.display.projectFilter.all")}
+      </MenuItem>
+      {projects.map((project) => (
+        <ProjectFilterItem
+          key={project.viewKey}
+          viewKey={project.viewKey}
+          label={project.projectName}
+          iconDataUri={iconByProjectViewKey.get(project.viewKey) ?? null}
+          selected={resolvedProjectFilters.includes(project.viewKey)}
+          onToggle={preferences.toggleProjectFilter}
+        />
+      ))}
+    </>
+  );
+}
+
+function ProjectFilterItem({
+  viewKey,
+  label,
+  iconDataUri,
+  selected,
+  onToggle,
+}: {
+  viewKey: string;
+  label: string;
+  iconDataUri: string | null;
+  selected: boolean;
+  onToggle: (viewKey: string) => void;
+}): ReactElement {
+  const handleSelect = useCallback(() => onToggle(viewKey), [viewKey, onToggle]);
+  const leading = useMemo(
+    () => (
+      <ProjectIconView
+        iconDataUri={iconDataUri}
+        initial={projectIconPlaceholderLabelFromDisplayName(label).charAt(0).toUpperCase()}
+        projectViewKey={viewKey}
+        size={OPTION_ICON_SIZE}
+        textStyle={styles.projectIconText}
+      />
+    ),
+    [iconDataUri, label, viewKey],
+  );
+
+  return (
+    <MenuItem
+      selected={selected}
+      leading={leading}
+      closeOnSelect={false}
+      onSelect={handleSelect}
+      testID={`sidebar-project-filter-${viewKey}`}
+    >
+      {label}
+    </MenuItem>
+  );
+}
+
 function HostFilterPage({
  preferences,
  hosts,
@@ -627,4 +764,9 @@ const styles = StyleSheet.create((theme) => ({
  triggerHovered: {
    backgroundColor: theme.colors.surfaceSidebarHover,
  },
+  // The icon sits in a 14pt menu slot, so the fallback initial is sized down to match rather
+  // than reusing the sidebar row's 16pt figure.
+  projectIconText: {
+    fontSize: 8,
+  },
 }));
@@ -30,6 +30,10 @@ export interface SidebarDisplayPreferences {
  hostFilters: readonly string[];
  toggleHostFilter: (serverId: string) => void;
  clearHostFilters: () => void;
+  /** Raw stored selection. For anything the user sees, use the model's resolved list instead. */
+  projectFilters: readonly string[];
+  toggleProjectFilter: (viewKey: string) => void;
+  clearProjectFilters: () => void;
  labelFilter: SidebarLabelFilter;
  toggleLabelFilter: (name: string) => void;
  clearLabelFilter: () => void;
@@ -49,6 +53,9 @@ export function useSidebarDisplayPreferences(): SidebarDisplayPreferences {
  const hostFilters = useSidebarViewStore((state) => state.hostFilters);
  const toggleHostFilter = useSidebarViewStore((state) => state.toggleHostFilter);
  const clearHostFilters = useSidebarViewStore((state) => state.clearHostFilters);
+  const projectFilters = useSidebarViewStore((state) => state.projectFilters);
+  const toggleProjectFilter = useSidebarViewStore((state) => state.toggleProjectFilter);
+  const clearProjectFilters = useSidebarViewStore((state) => state.clearProjectFilters);
  const labelFilter = useSidebarViewStore((state) => state.labelFilter);
  const toggleLabelFilter = useSidebarViewStore((state) => state.toggleLabelFilter);
  const clearLabelFilter = useSidebarViewStore((state) => state.clearLabelFilter);
@@ -110,6 +117,9 @@ export function useSidebarDisplayPreferences(): SidebarDisplayPreferences {
      hostFilters,
      toggleHostFilter,
      clearHostFilters,
+      projectFilters,
+      toggleProjectFilter,
+      clearProjectFilters,
      labelFilter,
      toggleLabelFilter,
      clearLabelFilter,
@@ -128,6 +138,9 @@ export function useSidebarDisplayPreferences(): SidebarDisplayPreferences {
      hostFilters,
      toggleHostFilter,
      clearHostFilters,
+      projectFilters,
+      toggleProjectFilter,
+      clearProjectFilters,
      labelFilter,
      toggleLabelFilter,
      clearLabelFilter,
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { Plus } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import { Text, View } from "react-native";
@@ -13,16 +14,24 @@ import { useSidebarViewStore } from "@/stores/sidebar-view-store";
 * trigger, and an empty state that replaces the list rather than its body takes the header with
 * it — which is how filtering the last row away used to close the menu you were filtering from.
 */
-export function SidebarLabelFilterEmptyState() {
+export function SidebarFilterEmptyState() {
  const { t } = useTranslation();
  const clearLabelFilter = useSidebarViewStore((state) => state.clearLabelFilter);
+  const clearProjectFilters = useSidebarViewStore((state) => state.clearProjectFilters);
+  // Clears every filter that can empty the list, not just the one that did. The card names no
+  // filter, so a Clear that undid only one of two active filters would leave it on screen looking
+  // like it had failed.
+  const clearFilters = useCallback(() => {
+    clearLabelFilter();
+    clearProjectFilters();
+  }, [clearLabelFilter, clearProjectFilters]);

  return (
-    <View style={styles.container} testID="sidebar-label-filter-empty-state">
-      <Text style={styles.title}>{t("workspaceLabels.filter.noMatchesTitle")}</Text>
-      <Text style={styles.description}>{t("workspaceLabels.filter.noMatchesDescription")}</Text>
-      <Button variant="ghost" size="sm" onPress={clearLabelFilter}>
-        {t("workspaceLabels.filter.clear")}
+    <View style={styles.container} testID="sidebar-filter-empty-state">
+      <Text style={styles.title}>{t("sidebar.filterEmpty.title")}</Text>
+      <Text style={styles.description}>{t("sidebar.filterEmpty.description")}</Text>
+      <Button variant="ghost" size="sm" onPress={clearFilters}>
+        {t("sidebar.filterEmpty.clear")}
      </Button>
    </View>
  );
@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useMemo, type ReactNode } from "react";
 import {
  useSidebarWorkspacesList,
+  type SidebarProjectEntry,
  type SidebarWorkspaceEntry,
  type SidebarWorkspacesListResult,
 } from "@/hooks/use-sidebar-workspaces-list";
@@ -17,6 +18,7 @@ import type { SidebarShortcutModel } from "@/utils/sidebar-shortcuts";
 import { buildSidebarProjection } from "./sidebar-projection";
 import type { SidebarProjectIconTarget } from "@/utils/sidebar-project-row-model";
 import { filterWorkspacesByLabels, type SidebarWorkspaceGroup } from "./sidebar-labels";
+import { filterWorkspacesByProjects, resolveActiveProjectFilters } from "./sidebar-project-filter";
 import {
  hasAuthoritativeWorkspaceLabelCatalog,
  useWorkspaceLabelProjection,
@@ -24,7 +26,16 @@ import {

 interface SidebarModel extends SidebarWorkspacesListResult {
  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
-  hasProjectsBeforeLabelFilter: boolean;
+  /**
+   * Every project the sidebar could show, before any filter narrows it.
+   *
+   * `projects` is the FILTERED list. A surface that offers a filter picker must read this one, or
+   * narrowing the filter deletes the rows that would undo it.
+   */
+  allProjects: SidebarProjectEntry[];
+  /** The project filter as it is actually being applied — see `resolveActiveProjectFilters`. */
+  resolvedProjectFilters: readonly string[];
+  hasProjectsBeforeFilter: boolean;
  groupMode: SidebarGroupMode;
  workspaceGroups: SidebarWorkspaceGroup[];
  projectIconTargets: SidebarProjectIconTarget[];
@@ -46,6 +57,7 @@ export function SidebarModelProvider({
  const list = useSidebarWorkspacesList();
  const groupMode = useSidebarViewStore((state) => state.groupMode);
  const labelFilter = useSidebarViewStore((state) => state.labelFilter);
+  const projectFilters = useSidebarViewStore((state) => state.projectFilters);
  const reconcileLabelFilter = useSidebarViewStore((state) => state.reconcileLabelFilter);
  const { hosts: labelHosts } = useWorkspaceLabelProjection();
  const collapsedProjectKeys = useSidebarCollapsedSectionsStore(
@@ -69,31 +81,63 @@ export function SidebarModelProvider({
    reconcileLabelFilter(availableLabelNames);
  }, [availableLabelNames, hasAuthoritativeLabelCatalog, reconcileLabelFilter]);
  const hasActiveLabelFilter = hasActiveSidebarLabelFilter(labelFilter);
+  const resolvedProjectFilters = useMemo(
+    () =>
+      resolveActiveProjectFilters(
+        projectFilters,
+        new Set(list.projects.map((project) => project.viewKey)),
+      ),
+    [projectFilters, list.projects],
+  );
+  const hasActiveProjectFilter = resolvedProjectFilters.length > 0;
+  // The project filter is deliberately absent from this gate. It reads `projectViewKey`, which
+  // lives on the project and the placement, so it can narrow the project list without hydrating
+  // anything; the label filter reads `labels`, which only exists on an entry. Hydration opens a
+  // live session-store subscription over every workspace on every visible host, so widening this
+  // for a filter that does not need it costs a retained-but-inactive sidebar real work.
  const needsWorkspaceEntries = groupMode !== "project" || hasActiveLabelFilter;
  const workspaceEntriesByKey = useSidebarWorkspaceEntries(
    list.workspacePlacements,
    active !== false || needsWorkspaceEntries,
  );
  const filteredWorkspaceEntriesByKey = useMemo(() => {
-    const filtered = filterWorkspacesByLabels({
+    const byProject = filterWorkspacesByProjects({
      workspaces: [...workspaceEntriesByKey.values()],
-      ...labelFilter,
+      projectFilters: resolvedProjectFilters,
    });
+    const filtered = filterWorkspacesByLabels({ workspaces: byProject, ...labelFilter });
    return new Map(filtered.map((workspace) => [workspace.workspaceKey, workspace]));
-  }, [labelFilter, workspaceEntriesByKey]);
+  }, [labelFilter, resolvedProjectFilters, workspaceEntriesByKey]);
  const visibleWorkspaceKeys = useMemo(
    () => new Set(filteredWorkspaceEntriesByKey.keys()),
    [filteredWorkspaceEntriesByKey],
  );
+  // The two filters prune differently on purpose. The project filter is a membership test on the
+  // project itself, so a project you filtered TO survives even with no workspaces — it still owns
+  // a header row you can create your first workspace under. The label filter can only ask about
+  // workspaces, so a project it empties has nothing left to show.
  const filteredProjects = useMemo(() => {
-    if (!hasActiveLabelFilter) return list.projects;
-    return list.projects.flatMap((project) => {
-      const workspaces = project.workspaces.filter((workspace) =>
-        visibleWorkspaceKeys.has(workspace.workspaceKey),
-      );
-      return workspaces.length > 0 ? [{ ...project, workspaces }] : [];
-    });
-  }, [hasActiveLabelFilter, list.projects, visibleWorkspaceKeys]);
+    let projects = list.projects;
+    if (hasActiveProjectFilter) {
+      const included = new Set(resolvedProjectFilters);
+      projects = projects.filter((project) => included.has(project.viewKey));
+    }
+    if (hasActiveLabelFilter) {
+      projects = projects.flatMap((project) => {
+        const workspaces = project.workspaces.filter((workspace) =>
+          visibleWorkspaceKeys.has(workspace.workspaceKey),
+        );
+        return workspaces.length > 0 ? [{ ...project, workspaces }] : [];
+      });
+    }
+    return projects;
+  }, [
+    hasActiveLabelFilter,
+    hasActiveProjectFilter,
+    resolvedProjectFilters,
+    list.projects,
+    visibleWorkspaceKeys,
+  ]);
  const pinnedKeys = usePinnedSidebarKeys(filteredProjects);
  const projectionInput = useMemo(
    () => ({
@@ -124,7 +168,9 @@ export function SidebarModelProvider({
    () => ({
      ...list,
      projects: filteredProjects,
-      hasProjectsBeforeLabelFilter: list.projects.length > 0,
+      allProjects: list.projects,
+      resolvedProjectFilters,
+      hasProjectsBeforeFilter: list.projects.length > 0,
      workspaceEntriesByKey: filteredWorkspaceEntriesByKey,
      groupMode,
      workspaceGroups: projection.workspaceGroups,
@@ -135,6 +181,7 @@ export function SidebarModelProvider({
      shortcutModel: projection.shortcutModel,
    }),
    [
+      resolvedProjectFilters,
      collapsedProjectKeys,
      groupMode,
      list,
@@ -0,0 +1,83 @@
+import { describe, expect, test } from "vitest";
+import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
+import { filterWorkspacesByProjects, resolveActiveProjectFilters } from "./sidebar-project-filter";
+
+function workspace(workspaceId: string, projectViewKey: string): SidebarWorkspaceEntry {
+  return {
+    workspaceKey: `host:${workspaceId}`,
+    serverId: "host",
+    workspaceId,
+    projectViewKey,
+    projectName: projectViewKey,
+    projectRootPath: `/repo/${projectViewKey}`,
+    workspaceDirectory: `/repo/${projectViewKey}/${workspaceId}`,
+    workspaceDirectoryLabel: workspaceId,
+    projectKind: "git",
+    workspaceKind: "worktree",
+    name: workspaceId,
+    title: null,
+    pinnedAt: null,
+    labels: [],
+    currentBranch: "main",
+    statusBucket: "done",
+    statusEnteredAt: null,
+    archivingAt: null,
+    diffStat: null,
+    prHint: null,
+    archiveHasUncommittedChanges: null,
+    archiveUnpushedCommitCount: null,
+    scripts: [],
+    hasRunningScripts: false,
+  };
+}
+
+describe("resolveActiveProjectFilters", () => {
+  test("reads an empty stored filter as every project", () => {
+    expect(resolveActiveProjectFilters([], new Set(["alpha", "beta"]))).toEqual([]);
+  });
+
+  test("keeps only the keys that still name a project it can see", () => {
+    expect(resolveActiveProjectFilters(["alpha", "gone"], new Set(["alpha", "beta"]))).toEqual([
+      "alpha",
+    ]);
+    expect(resolveActiveProjectFilters(["alpha", "beta"], new Set(["alpha", "beta"]))).toEqual([
+      "alpha",
+      "beta",
+    ]);
+  });
+
+  // Nothing deletes the stored keys, so a filter naming only projects on a host that has not
+  // connected yet must go inert rather than blank the sidebar. It comes back with the host.
+  test("goes inert instead of matching nothing", () => {
+    expect(resolveActiveProjectFilters(["alpha"], new Set(["beta"]))).toEqual([]);
+    expect(resolveActiveProjectFilters(["alpha"], new Set())).toEqual([]);
+  });
+});
+
+describe("filterWorkspacesByProjects", () => {
+  const workspaces = [
+    workspace("one", "alpha"),
+    workspace("two", "alpha"),
+    workspace("three", "beta"),
+  ];
+
+  function filtered(projectFilters: string[]) {
+    return filterWorkspacesByProjects({ workspaces, projectFilters }).map(
+      (entry) => entry.workspaceId,
+    );
+  }
+
+  test("keeps every workspace when nothing is pinned", () => {
+    expect(filtered([])).toEqual(["one", "two", "three"]);
+  });
+
+  test("keeps the workspaces of the pinned projects", () => {
+    expect(filtered(["alpha"])).toEqual(["one", "two"]);
+    expect(filtered(["beta"])).toEqual(["three"]);
+    expect(filtered(["alpha", "beta"])).toEqual(["one", "two", "three"]);
+  });
+
+  test("keeps nothing for a project with no workspaces", () => {
+    expect(filtered(["gamma"])).toEqual([]);
+  });
+});
@@ -0,0 +1,40 @@
+import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
+
+/**
+ * The subset of a stored project filter that still names a project the sidebar can see.
+ *
+ * Empty means "all projects" — both when nothing is pinned and when everything pinned has gone
+ * away. That second case is why nothing ever deletes a stored key: the project list is narrowed
+ * by the host filter and is empty before any host connects, so absence does not mean the project
+ * is gone. A filter goes inert while its host is away and comes back with it.
+ *
+ * This is the only definition of "is a project filter active". The menu's indicator, the
+ * "All projects" check and the per-row selection all read it, so they cannot disagree with what
+ * the list is actually doing.
+ */
+export function resolveActiveProjectFilters(
+  projectFilters: readonly string[],
+  availableViewKeys: ReadonlySet<string>,
+): readonly string[] {
+  if (projectFilters.length === 0) return EMPTY_PROJECT_FILTERS;
+  const matching = projectFilters.filter((viewKey) => availableViewKeys.has(viewKey));
+  return matching.length > 0 ? matching : EMPTY_PROJECT_FILTERS;
+}
+
+/**
+ * Applies the Project page's selection to the sidebar's workspace entries.
+ *
+ * A workspace belongs to exactly one project, so this is a plain allowlist — no tri-state, and
+ * no "unassigned" row of the kind the label filter needs.
+ */
+export function filterWorkspacesByProjects(input: {
+  workspaces: readonly SidebarWorkspaceEntry[];
+  projectFilters: readonly string[];
+}): SidebarWorkspaceEntry[] {
+  const { workspaces, projectFilters } = input;
+  if (projectFilters.length === 0) return [...workspaces];
+  const included = new Set(projectFilters);
+  return workspaces.filter((workspace) => included.has(workspace.projectViewKey));
+}
+
+const EMPTY_PROJECT_FILTERS: readonly string[] = [];
@@ -23,7 +23,7 @@ import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspac
 import { type SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
 import type { StatusBucket } from "@/hooks/sidebar-status-view-model";
 import type { SidebarWorkspaceGroup } from "@/components/sidebar/sidebar-labels";
-import { SidebarLabelFilterEmptyState } from "@/components/sidebar/empty-states";
+import { SidebarFilterEmptyState } from "@/components/sidebar/empty-states";
 import type { HostBadgeModel } from "@/hosts/appearance";
 import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
 import { useIsCompactFormFactor } from "@/constants/layout";
@@ -127,7 +127,7 @@ interface StatusWorkspaceListProps {
  onPinnedWorkspaceReorder: (workspaces: SidebarWorkspaceEntry[]) => void;
  listHeaderComponent?: ReactNode;
  /** Swaps the group list for the label filter's empty state. Never the header above it. */
-  labelFilterEmpty?: boolean;
+  sidebarFilterEmpty?: boolean;
  parentGestureRef?: MutableRefObject<GestureType | undefined>;
  dragGestureHostPresented?: boolean;
 }
@@ -144,7 +144,7 @@ export function SidebarStatusWorkspaceList({
  onToggleWorkspacePin,
  onPinnedWorkspaceReorder,
  listHeaderComponent,
-  labelFilterEmpty = false,
+  sidebarFilterEmpty = false,
  parentGestureRef,
  dragGestureHostPresented,
 }: StatusWorkspaceListProps) {
@@ -231,8 +231,8 @@ export function SidebarStatusWorkspaceList({
        </View>
      ) : null}
      {listHeaderComponent}
-      {labelFilterEmpty ? (
-        <SidebarLabelFilterEmptyState />
+      {sidebarFilterEmpty ? (
+        <SidebarFilterEmptyState />
      ) : (
        <StatusGroupList
          groups={groups}