fix(mobile): pin the workspace selector to the picker header

The workspace governs everything below it, but it sat inside the scrolling list — with 50
projects it scrolled away, leaving no indication of which workspace the rows belonged to and
no way to change it without scrolling back.

It moves into the pinned header beside the title: chips when there are several, a labelled
name when there is one. The list below becomes the selected workspace's projects, which
also drops the nested section-per-workspace shape it no longer needs.

Splits the old component in three along the way — the selector, the list, and the grouping,
which was an inline useMemo and is now a covered pure function.

Author: ardaerzin

web/mobile/src/features/context/ContextResolver.tsx

@@ -7,8 +7,10 @@ import {ScreenScaffold} from "@/components/ScreenScaffold"
 import {fetchProjects, readDesktopLastUsed, readLastContext, type LastContext} from "@/lib/context"
 
 import {selectContextTarget} from "./contextTarget"
+import {ProjectList} from "./ProjectList"
 import {SignedOutNotice} from "./states/SignedOutNotice"
-import {WorkspaceProjectList, type WorkspaceGroup} from "./WorkspaceProjectList"
+import {groupByWorkspace, type WorkspaceGroup} from "./workspaceGroups"
+import {WorkspaceSelector} from "./WorkspaceSelector"
 
 const sessionsUrl = ({workspaceId, projectId}: LastContext) =>
     `/w/${workspaceId}/p/${projectId}/sessions`
@@ -36,21 +38,15 @@ export const ContextResolver = () => {
     })
     const result = query.data
 
-    const groups = useMemo<WorkspaceGroup[]>(() => {
-        if (result?.kind !== "ok") return []
-        const byWorkspace = new Map<string, WorkspaceGroup>()
-        for (const project of result.projects) {
-            if (!project.workspace_id) continue
-            const group = byWorkspace.get(project.workspace_id) ?? {
-                workspaceId: project.workspace_id,
-                workspaceName: project.workspace_name ?? "Workspace",
-                projects: [],
-            }
-            group.projects.push(project)
-            byWorkspace.set(project.workspace_id, group)
-        }
-        return [...byWorkspace.values()]
-    }, [result])
+    const groups = useMemo<WorkspaceGroup[]>(
+        () => (result?.kind === "ok" ? groupByWorkspace(result.projects) : []),
+        [result],
+    )
+    // Which workspace the header is scoped to. Falls back rather than syncing on every fetch:
+    // a refetch can drop the selected workspace entirely.
+    const [selectedWorkspaceId, setSelectedWorkspaceId] = useState("")
+    const selectedGroup =
+        groups.find((group) => group.workspaceId === selectedWorkspaceId) ?? groups[0]
 
     const target = useMemo<LastContext | null>(
         () =>
@@ -76,13 +72,18 @@ export const ContextResolver = () => {
         body = <p className="text-muted-foreground grow p-6 text-center text-xs">Loading…</p>
     } else if (result?.kind === "unauthenticated") {
         body = <SignedOutNotice />
-    } else if (result?.kind === "ok" && groups.length > 0) {
+    } else if (result?.kind === "ok" && selectedGroup) {
         header = (
-            <h1 className="border-border shrink-0 border-b p-4 text-xs font-semibold">
-                Choose a project
-            </h1>
+            <div className="border-border flex shrink-0 flex-col gap-2 border-b px-4 pt-3 pb-2">
+                <h1 className="text-xs font-semibold">Choose a project</h1>
+                <WorkspaceSelector
+                    groups={groups}
+                    selectedId={selectedGroup.workspaceId}
+                    onSelect={setSelectedWorkspaceId}
+                />
+            </div>
         )
-        body = <WorkspaceProjectList groups={groups} />
+        body = <ProjectList group={selectedGroup} />
     } else {
         body = (
             <div className="flex grow flex-col items-center justify-center gap-3 p-6 text-center">

web/mobile/src/features/context/ProjectList.tsx

@@ -0,0 +1,29 @@
+import {useRouter} from "next/router"
+
+import type {WorkspaceGroup} from "./workspaceGroups"
+
+/** Tappable project rows for the selected workspace; the workspace itself is chosen in the header. */
+export const ProjectList = ({group}: {group: WorkspaceGroup}) => {
+    const router = useRouter()
+    return (
+        <div className="flex flex-col gap-2 p-4">
+            {group.projects.map((project) => (
+                <button
+                    key={project.project_id}
+                    type="button"
+                    className="border-border min-h-11 rounded-md border px-3 py-2.5 text-left text-xs"
+                    onClick={() =>
+                        void router.replace(
+                            `/w/${group.workspaceId}/p/${project.project_id}/sessions`,
+                        )
+                    }
+                >
+                    {project.project_name}
+                    {project.is_demo ? (
+                        <span className="text-muted-foreground ml-2">demo</span>
+                    ) : null}
+                </button>
+            ))}
+        </div>
+    )
+}

web/mobile/src/features/context/WorkspaceProjectList.tsx

@@ -0,0 +1,57 @@
+import {Building2} from "lucide-react"
+
+import type {WorkspaceGroup} from "./workspaceGroups"
+
+/**
+ * The picker's scope control, pinned in the header rather than sitting in the scrolling list —
+ * it governs everything below it, and a project list runs long enough to scroll its own scope
+ * off screen.
+ *
+ * With one workspace there is nothing to select, so it degrades to a label naming where you are
+ * (the default workspace is called "Default", indistinguishable from a project of that name
+ * unless it is labelled).
+ */
+export const WorkspaceSelector = ({
+    groups,
+    selectedId,
+    onSelect,
+}: {
+    groups: WorkspaceGroup[]
+    selectedId: string
+    onSelect: (workspaceId: string) => void
+}) => {
+    if (groups.length <= 1) {
+        const only = groups[0]
+        if (!only) return null
+        return (
+            <p className="text-muted-foreground flex items-center gap-1.5 text-xs">
+                <Building2 aria-hidden className="size-3.5 shrink-0" />
+                <span className="truncate">{only.workspaceName}</span>
+                <span className="shrink-0 opacity-70">workspace</span>
+            </p>
+        )
+    }
+
+    return (
+        <div className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1">
+            {groups.map((group) => {
+                const isSelected = group.workspaceId === selectedId
+                return (
+                    <button
+                        key={group.workspaceId}
+                        type="button"
+                        aria-pressed={isSelected}
+                        onClick={() => onSelect(group.workspaceId)}
+                        className={`relative h-8 shrink-0 rounded-full border px-3 text-xs font-medium after:absolute after:-inset-x-1 after:-inset-y-1.5 after:content-[''] ${
+                            isSelected
+                                ? "border-foreground text-foreground"
+                                : "border-border text-muted-foreground"
+                        }`}
+                    >
+                        {group.workspaceName}
+                    </button>
+                )
+            })}
+        </div>
+    )
+}

web/mobile/src/features/context/WorkspaceSelector.tsx

@@ -1,6 +1,6 @@
 import type {LastContext} from "@/lib/context"
 
-import type {WorkspaceGroup} from "./WorkspaceProjectList"
+import type {WorkspaceGroup} from "./workspaceGroups"
 
 export interface ContextTargetInput {
     /** False until the router has parsed the query string. */

web/mobile/src/features/context/contextTarget.ts

@@ -0,0 +1,24 @@
+import type {MobileProject} from "@/lib/context"
+
+export interface WorkspaceGroup {
+    workspaceId: string
+    workspaceName: string
+    projects: MobileProject[]
+}
+
+/** Group the flat project list by workspace, preserving the server's order within each. */
+export const groupByWorkspace = (projects: MobileProject[]): WorkspaceGroup[] => {
+    const byWorkspace = new Map<string, WorkspaceGroup>()
+    for (const project of projects) {
+        // A project with no workspace cannot be routed to (`/w/:id/p/:id`), so it is dropped.
+        if (!project.workspace_id) continue
+        const group = byWorkspace.get(project.workspace_id) ?? {
+            workspaceId: project.workspace_id,
+            workspaceName: project.workspace_name ?? "Workspace",
+            projects: [],
+        }
+        group.projects.push(project)
+        byWorkspace.set(project.workspace_id, group)
+    }
+    return [...byWorkspace.values()]
+}

web/mobile/src/features/context/workspaceGroups.ts

@@ -4,7 +4,7 @@ import {
     selectContextTarget,
     type ContextTargetInput,
 } from "../../src/features/context/contextTarget"
-import type {WorkspaceGroup} from "../../src/features/context/WorkspaceProjectList"
+import type {WorkspaceGroup} from "../../src/features/context/workspaceGroups"
 
 const project = (projectId: string, workspaceId: string) =>
     ({

web/mobile/tests/unit/contextTarget.test.ts

@@ -0,0 +1,38 @@
+import {describe, expect, it} from "vitest"
+
+import {groupByWorkspace} from "../../src/features/context/workspaceGroups"
+import type {MobileProject} from "../../src/lib/context"
+
+const project = (projectId: string, workspaceId: string | null, name = "Workspace") =>
+    ({
+        project_id: projectId,
+        project_name: projectId,
+        workspace_id: workspaceId,
+        workspace_name: workspaceId ? name : null,
+    }) as MobileProject
+
+describe("groupByWorkspace", () => {
+    it("groups projects under their workspace, keeping server order", () => {
+        const groups = groupByWorkspace([
+            project("p1", "w1"),
+            project("p2", "w2"),
+            project("p3", "w1"),
+        ])
+
+        expect(groups.map((g) => g.workspaceId)).toEqual(["w1", "w2"])
+        expect(groups[0].projects.map((p) => p.project_id)).toEqual(["p1", "p3"])
+    })
+
+    it("drops a project with no workspace — it cannot be routed to", () => {
+        // The session route is /w/:workspaceId/p/:projectId; without the first half the row
+        // would render as a tap that goes nowhere.
+        expect(groupByWorkspace([project("orphan", null), project("p1", "w1")])).toHaveLength(1)
+    })
+
+    it("falls back to a generic name when the workspace is unnamed", () => {
+        const [group] = groupByWorkspace([
+            {project_id: "p1", project_name: "p1", workspace_id: "w1"} as MobileProject,
+        ])
+        expect(group.workspaceName).toBe("Workspace")
+    })
+})