From bf58fae51f6c4c2112c1da4a27b1ba2bd3a6a5bb Mon Sep 17 00:00:00 2001 From: usrnk1 <7547651+usrnk1@users.noreply.github.com> Date: Fri, 3 Jul 2026 09:52:40 +0200 Subject: [PATCH] feat(desktop): add recently closed projects to home (#34926) --- packages/app/src/context/global.tsx | 12 +- packages/app/src/context/layout.tsx | 13 +- packages/app/src/context/server.test.ts | 84 ++++++++++++- packages/app/src/context/server.tsx | 45 ++++++- packages/app/src/i18n/en.ts | 1 + packages/app/src/pages/home.tsx | 111 +++++++++++++++++- .../src/v2/components/project-avatar-v2.css | 7 ++ .../components/project-avatar-v2.stories.tsx | 10 +- .../src/v2/components/project-avatar-v2.tsx | 5 +- 9 files changed, 271 insertions(+), 17 deletions(-) diff --git a/packages/app/src/context/global.tsx b/packages/app/src/context/global.tsx index 138b17c4fc..83438898b5 100644 --- a/packages/app/src/context/global.tsx +++ b/packages/app/src/context/global.tsx @@ -1,7 +1,8 @@ import { createSimpleContext } from "@opencode-ai/ui/context" import { createEffect, createMemo, createRoot } from "solid-js" import { createStore } from "solid-js/store" -import { createServerProjects, ServerConnection, useServer } from "./server" +import { createServerProjects, RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServer } from "./server" +import { pathKey } from "@/utils/path-key" import { useServerHealth } from "@/utils/server-health" import { createServerSdkContext } from "./server-sdk" import { createServerSyncContext } from "./server-sync" @@ -127,6 +128,14 @@ function createServerCtx( } const projectsList = createMemo(() => projects.list().map(enrich)) + const recentlyClosedList = createMemo(() => { + const known = new Set(sync.data.project.map((project) => pathKey(project.worktree))) + return projects + .recentlyClosed() + .filter((worktree) => known.has(pathKey(worktree))) + .slice(0, RECENTLY_CLOSED_DISPLAY_LIMIT) + .map((worktree) => enrich({ worktree, expanded: false })) + }) const isLocal = (conn?.type === "sidecar" && conn.variant === "base") || (conn?.type === "http" && isLocalHost(conn.http.url)) @@ -139,6 +148,7 @@ function createServerCtx( projects: { ...projects, list: projectsList, + recentlyClosed: recentlyClosedList, }, } } diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx index 1487676e54..b09a77eb33 100644 --- a/packages/app/src/context/layout.tsx +++ b/packages/app/src/context/layout.tsx @@ -5,10 +5,11 @@ import { createSimpleContext } from "@opencode-ai/ui/context" import { makeEventListener } from "@solid-primitives/event-listener" import { useServerSync } from "./server-sync" import { useServerSDK } from "./server-sdk" -import { ServerConnection, useServer } from "./server" +import { RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServer } from "./server" import { usePlatform } from "./platform" import { Project } from "@opencode-ai/sdk/v2" import { Persist, persisted, removePersisted } from "@/utils/persist" +import { pathKey } from "@/utils/path-key" import { decode64 } from "@/utils/base64" import { same } from "@/utils/same" import { createScrollPersistence, type SessionScroll } from "./layout-scroll" @@ -493,7 +494,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( const root = rootFor(project.worktree) if (root === project.worktree) continue - server.projects.close(project.worktree) + server.projects.remove(project.worktree) if (!seen.has(root)) { server.projects.open(root) @@ -613,6 +614,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( }, projects: { list, + recentlyClosed: createMemo(() => { + const known = new Set(serverSync().data.project.map((project) => pathKey(project.worktree))) + return server.projects + .recentlyClosed() + .filter((worktree) => known.has(pathKey(worktree))) + .slice(0, RECENTLY_CLOSED_DISPLAY_LIMIT) + .map((worktree) => enrich({ worktree, expanded: false })) + }), open(directory: string) { const root = rootFor(directory) if (server.projects.list().find((x) => x.worktree === root)) return diff --git a/packages/app/src/context/server.test.ts b/packages/app/src/context/server.test.ts index 72352fc5d5..d78880ecf1 100644 --- a/packages/app/src/context/server.test.ts +++ b/packages/app/src/context/server.test.ts @@ -99,7 +99,7 @@ describe("createServerProjects", () => { test("keeps active and explicit server buckets in one reactive store", () => { createRoot((dispose) => { const [scope] = createSignal(ServerScope.local) - const [store, setStore] = createStore({ projects: {}, lastProject: {} }) + const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} }) const active = createServerProjects({ scope, store, setStore }) const remote = createServerProjects({ scope: () => "https://debian.example" as ServerScope, store, setStore }) @@ -115,6 +115,88 @@ describe("createServerProjects", () => { dispose() }) }) + + test("tracks recently closed projects and drops them when reopened", () => { + createRoot((dispose) => { + const [scope] = createSignal(ServerScope.local) + const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} }) + const projects = createServerProjects({ scope, store, setStore }) + + projects.open("/a") + projects.open("/b") + projects.close("/a") + expect(projects.recentlyClosed()).toEqual(["/a"]) + + projects.close("/b") + expect(projects.recentlyClosed()).toEqual(["/b", "/a"]) + + projects.open("/a") + expect(projects.recentlyClosed()).toEqual(["/b"]) + expect(projects.list()).toEqual([{ worktree: "/a", expanded: true }]) + dispose() + }) + }) + + test("remove drops a project without recording it as recently closed", () => { + createRoot((dispose) => { + const [scope] = createSignal(ServerScope.local) + const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} }) + const projects = createServerProjects({ scope, store, setStore }) + + projects.open("/repo/subdir") + projects.remove("/repo/subdir") + expect(projects.list()).toEqual([]) + expect(projects.recentlyClosed()).toEqual([]) + dispose() + }) + }) + + test("retains recently closed history beyond the visible display limit", () => { + createRoot((dispose) => { + const [scope] = createSignal(ServerScope.local) + const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} }) + const projects = createServerProjects({ scope, store, setStore }) + + // Closing 6 projects keeps all 6 in the store even though only 5 are displayed; + // this prevents display-filtered entries from evicting still-visible ones. + for (const dir of ["/1", "/2", "/3", "/4", "/5", "/6"]) { + projects.open(dir) + projects.close(dir) + } + expect(projects.recentlyClosed()).toEqual(["/6", "/5", "/4", "/3", "/2", "/1"]) + dispose() + }) + }) + + test("caps recently closed history at the store limit", () => { + createRoot((dispose) => { + const [scope] = createSignal(ServerScope.local) + const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} }) + const projects = createServerProjects({ scope, store, setStore }) + + for (let i = 1; i <= 20; i++) { + projects.open(`/p${i}`) + projects.close(`/p${i}`) + } + expect(projects.recentlyClosed()).toHaveLength(16) + expect(projects.recentlyClosed()[0]).toBe("/p20") + expect(projects.recentlyClosed().at(-1)).toBe("/p5") + dispose() + }) + }) + + test("dedupes recently closed entries by normalized path", () => { + createRoot((dispose) => { + const [scope] = createSignal(ServerScope.local) + const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} }) + const projects = createServerProjects({ scope, store, setStore }) + + projects.close("/repo") + projects.close("/repo/") + expect(projects.recentlyClosed()).toEqual(["/repo/"]) + dispose() + }) + }) }) describe("migrateCanonicalLocalServerState", () => { diff --git a/packages/app/src/context/server.tsx b/packages/app/src/context/server.tsx index c7957bab8e..95c6940d70 100644 --- a/packages/app/src/context/server.tsx +++ b/packages/app/src/context/server.tsx @@ -2,12 +2,23 @@ import { createSimpleContext } from "@opencode-ai/ui/context" import { type Accessor, batch, createMemo } from "solid-js" import { createStore, type SetStoreFunction, type Store } from "solid-js/store" import { Persist, persisted } from "@/utils/persist" +import { pathKey } from "@/utils/path-key" import { ServerScope } from "@/utils/server-scope" type StoredProject = { worktree: string; expanded: boolean } type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http -type ServerProjectState = { projects: Record; lastProject: Record } +type ServerProjectState = { + projects: Record + lastProject: Record + recentlyClosed: Record +} const HEALTH_POLL_INTERVAL_MS = 10_000 +// The store retains more history than is displayed. Consumers filter recently closed entries +// against the live project list (dropping deleted projects) and then cap the visible count via +// RECENTLY_CLOSED_DISPLAY_LIMIT. Retaining extra history ensures entries that are temporarily +// filtered out do not evict still-visible ones from the persisted store. +const RECENTLY_CLOSED_HISTORY_LIMIT = 16 +export const RECENTLY_CLOSED_DISPLAY_LIMIT = 5 export function normalizeServerUrl(input: string) { const trimmed = input.trim() @@ -72,19 +83,42 @@ export function createServerProjects(input: { }) { const setStore = input.setStore as unknown as SetStoreFunction const current = () => input.store.projects[input.scope()] ?? [] + const currentClosed = () => input.store.recentlyClosed?.[input.scope()] ?? [] + const remove = (directory: string) => { + setStore( + "projects", + input.scope(), + current().filter((project) => project.worktree !== directory), + ) + } return { list: current, + recentlyClosed: currentClosed, + remove, open(directory: string) { const scope = input.scope() + const key = pathKey(directory) + const closed = currentClosed() + if (closed.some((worktree) => pathKey(worktree) === key)) { + setStore( + "recentlyClosed", + scope, + closed.filter((worktree) => pathKey(worktree) !== key), + ) + } if (current().some((project) => project.worktree === directory)) return setStore("projects", scope, [{ worktree: directory, expanded: true }, ...current()]) }, + // User-initiated close: removes the project and records it in recently closed. + // Internal, non-user removals (e.g. sandbox/worktree normalization) should use remove(). close(directory: string) { - setStore( - "projects", - input.scope(), - current().filter((project) => project.worktree !== directory), + remove(directory) + const key = pathKey(directory) + const closed = [directory, ...currentClosed().filter((worktree) => pathKey(worktree) !== key)].slice( + 0, + RECENTLY_CLOSED_HISTORY_LIMIT, ) + setStore("recentlyClosed", input.scope(), closed) }, expand(directory: string) { const index = current().findIndex((project) => project.worktree === directory) @@ -235,6 +269,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext( list: [] as StoredServer[], projects: {} as Record, lastProject: {} as Record, + recentlyClosed: {} as Record, }), ) diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts index 0124fcf6ed..e5255df542 100644 --- a/packages/app/src/i18n/en.ts +++ b/packages/app/src/i18n/en.ts @@ -604,6 +604,7 @@ export const dict = { "home.title": "Home", "home.projects": "Projects", "home.project.add": "Add project", + "home.recentlyClosed": "Recently closed", "home.server.collapse": "Collapse server projects", "home.server.expand": "Expand server projects", "home.sessions.search.placeholder": "Search sessions", diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index 7990495260..6222817ab6 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -270,6 +270,10 @@ export function NewHome() { }) const focusedSync = () => focusedServerCtx()?.sync ?? sync() const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list()) + const recentlyClosed = createMemo( + () => focusedServerCtx()?.projects.recentlyClosed() ?? layout.projects.recentlyClosed(), + ) + const homedir = createMemo(() => focusedSync().data.path.home ?? "") const selectedProject = createMemo(() => projects().find((project) => project.worktree === selection().directory)) const newSessionProject = createMemo( () => @@ -518,10 +522,13 @@ export function NewHome() {
addProjects(conn, [directory])} chooseProject={(conn) => void chooseProject(conn)} editProject={editProject} closeProject={(conn, directory) => { @@ -638,10 +645,13 @@ export function NewHome() { function HomeProjectColumn(props: { projects: LocalProject[] + recentlyClosed: LocalProject[] + homedir: string selected: HomeProjectSelection focusServer: (server: ServerConnection.Any) => void selectProject: (server: ServerConnection.Any, directory: string) => void openNewSession: (server: ServerConnection.Any, directory: string) => void + openRecentProject: (server: ServerConnection.Any, directory: string) => void chooseProject: (server: ServerConnection.Any) => void editProject: (server: ServerConnection.Any, project: LocalProject) => void closeProject: (server: ServerConnection.Any, directory: string) => void @@ -670,8 +680,10 @@ function HomeProjectColumn(props: { aria-label={props.language.t("home.projects")} >
-
{props.language.t("home.projects")}
- +
{props.language.t("home.projects")}
+ 0)} + > 1} fallback={
- + 0} + fallback={ + + } + > + +
} > @@ -897,6 +923,79 @@ function HomeProjectList(props: { ) } +function HomeProjectEmpty(props: { + server: ServerConnection.Any + recentlyClosed: LocalProject[] + homedir: string + chooseProject: (server: ServerConnection.Any) => void + openRecentProject: (server: ServerConnection.Any, directory: string) => void + language: ReturnType +}) { + const global = useGlobal() + const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false + return ( +
+ + 0}> +
+
{props.language.t("home.recentlyClosed")}
+
+ + {(project) => ( + + )} + + +
+ ) +} + +function HomeRecentlyClosedRow(props: { + project: LocalProject + server: ServerConnection.Any + homedir: string + openRecentProject: (server: ServerConnection.Any, directory: string) => void + language: ReturnType +}) { + const global = useGlobal() + const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false + const path = () => { + const home = props.homedir + const worktree = props.project.worktree + if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}` + return worktree + } + return ( + + + + ) +} + function HomeProjectRow(props: { project: LocalProject server: ServerConnection.Any @@ -979,13 +1078,13 @@ function HomeProjectRow(props: { ) } -function HomeProjectAvatar(props: { project: LocalProject }) { +function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) { const name = createMemo(() => displayName(props.project)) return ( ) } diff --git a/packages/ui/src/v2/components/project-avatar-v2.css b/packages/ui/src/v2/components/project-avatar-v2.css index c724744654..e8c2149b5d 100644 --- a/packages/ui/src/v2/components/project-avatar-v2.css +++ b/packages/ui/src/v2/components/project-avatar-v2.css @@ -81,6 +81,13 @@ --project-avatar-border: var(--v2-avatar-border-gray); } +[data-slot="project-avatar-surface"][data-variant="outline"] { + --project-avatar-bg: var(--v2-background-bg-base); + --project-avatar-border: var(--v2-border-border-strong); + color: var(--v2-text-text-muted); + text-shadow: none; +} + [data-slot="project-avatar-surface"][data-has-image] { background: var(--project-avatar-bg); } diff --git a/packages/ui/src/v2/components/project-avatar-v2.stories.tsx b/packages/ui/src/v2/components/project-avatar-v2.stories.tsx index a677384627..3a2babcd9e 100644 --- a/packages/ui/src/v2/components/project-avatar-v2.stories.tsx +++ b/packages/ui/src/v2/components/project-avatar-v2.stories.tsx @@ -11,6 +11,7 @@ Saturated 16px project avatar with color variants and optional unread dot. ### Variants - Color: orange, yellow, cyan, green, red, pink, blue, purple, gray. +- Outline: neutral, muted style for de-emphasized projects (e.g. recently closed). - Image vs initial content state. - Unread dot with corner mask when \`unread\` is set. @@ -33,7 +34,7 @@ export default { argTypes: { variant: { control: "select", - options: [...PROJECT_AVATAR_VARIANTS], + options: [...PROJECT_AVATAR_VARIANTS, "outline"], }, }, args: { @@ -62,6 +63,13 @@ export const AllVariants = { ), } +export const Outline = { + args: { + fallback: "O", + variant: "outline", + }, +} + export const Unread = { args: { fallback: "O", diff --git a/packages/ui/src/v2/components/project-avatar-v2.tsx b/packages/ui/src/v2/components/project-avatar-v2.tsx index e0110d3cb4..22da7f6b72 100644 --- a/packages/ui/src/v2/components/project-avatar-v2.tsx +++ b/packages/ui/src/v2/components/project-avatar-v2.tsx @@ -26,10 +26,13 @@ export const PROJECT_AVATAR_VARIANTS = [ export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number] +// "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation. +export type ProjectAvatarStyle = ProjectAvatarVariant | "outline" + export interface ProjectAvatarProps extends ComponentProps<"div"> { fallback: string src?: string - variant?: ProjectAvatarVariant + variant?: ProjectAvatarStyle unread?: boolean }