feat(app): improve project settings and actions (#49423)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

Author: iamdavidhill

packages/app/e2e/regression/settings-search.spec.ts

@@ -172,64 +172,6 @@ test("Models and Shortcuts autofocus their filters on normal navigation", async
   await expect(result).toBeFocused()
 })
 
-for (const count of [7, 8]) {
-  test(`Projects search uses the full list threshold with ${count} projects`, async ({ page }) => {
-    await page.route("**/api/project", (route) => route.fulfill({ json: projectList(count) }))
-    await page.reload()
-    const view = ui(page)
-    await view.search.fill("OpenCode")
-    await expect(view.results.getByRole("option")).toHaveCount(count)
-    await view.search.clear()
-    await view.settings.getByRole("tab", { name: "Projects", exact: true }).click()
-    const search = view.settings.getByRole("searchbox", { name: "Search projects", exact: true })
-    const projects = view.settings.getByRole("button", { name: /^OpenCode / })
-    await expect(projects).toHaveCount(count)
-    if (count === 7) {
-      await expect(search).toHaveCount(0)
-      return
-    }
-    await expect(search).toBeFocused()
-    await search.fill("  CODE 06  ")
-    await expect(projects).toHaveCount(1)
-    await expect(projects).toHaveAccessibleName("OpenCode 06")
-    await expect(search).toBeVisible()
-    await search.fill("missing-project")
-    await expect(projects).toHaveCount(0)
-    await expect(view.settings.getByText("No projects found", { exact: true })).toBeVisible()
-    await view.settings.getByRole("button", { name: "Clear", exact: true }).click()
-    await expect(search).toBeFocused()
-    await expect(projects).toHaveCount(count)
-    await view.settings.getByRole("tab", { name: "Models", exact: true }).click()
-    await view.settings.getByRole("tab", { name: "Projects", exact: true }).click()
-    await expect(search).toBeFocused()
-    await search.fill("OpenCode 06")
-    await projects.click()
-    await expect(view.settings.getByRole("heading", { name: "OpenCode 06", exact: true })).toBeVisible()
-  })
-}
-
-test("Projects search focuses when the qualifying inventory arrives after opening", async ({ page }) => {
-  const inventory = Promise.withResolvers<void>()
-  await page.route("**/api/project", async (route) => {
-    await inventory.promise
-    await route.fulfill({ json: projectList(8) })
-  })
-  const requested = page.waitForRequest((request) => new URL(request.url()).pathname === "/api/project")
-  await page.reload()
-  await requested
-  const view = ui(page)
-  const search = view.settings.getByRole("searchbox", { name: "Search projects", exact: true })
-  try {
-    await view.settings.getByRole("tab", { name: "Projects", exact: true }).click()
-    await expect(view.settings.getByRole("heading", { name: "Projects", exact: true })).toBeVisible()
-    await expect(search).toHaveCount(0)
-  } finally {
-    inventory.resolve()
-  }
-  await expect(search).toBeFocused()
-  await expect(view.settings.getByRole("button", { name: /^OpenCode / })).toHaveCount(8)
-})
-
 test("all indexed client controls resolve to visible production controls", async ({ page }) => {
   const view = ui(page)
   for (const entry of clientSettings.filter((entry) => entry.target && !entry.available)) {

packages/app/src/runtime/server/registry.tsx

@@ -8,11 +8,8 @@ import { ServerHttp, ServerHttpBase, ServerKey, serverState } from "./persistenc
 import type { SshItem } from "@/servers/ssh/types"
 
 type ServerState = ReturnType<typeof serverState>["current"]["Type"]
-// 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
+// Retain closed paths until reopened so settings can exclude them from the server inventory.
+// The Home page independently limits the visible recently closed entries.
 export const RECENTLY_CLOSED_DISPLAY_LIMIT = 5
 
 export function normalizeServerUrl(input: string) {
@@ -51,6 +48,7 @@ export function createServerProjects(input: {
   }
   return {
     list: current,
+    closed: currentClosed,
     recentlyClosed: currentClosed,
     remove,
     open(directory: string) {
@@ -72,10 +70,7 @@ export function createServerProjects(input: {
     close(directory: string) {
       remove(directory)
       const key = pathKey(directory)
-      const closed = [directory, ...currentClosed().filter((worktree) => pathKey(worktree) !== key)].slice(
-        0,
-        RECENTLY_CLOSED_HISTORY_LIMIT,
-      )
+      const closed = [directory, ...currentClosed().filter((worktree) => pathKey(worktree) !== key)]
       setStore("recentlyClosed", input.scope(), closed)
     },
     expand(directory: string) {

packages/app/src/runtime/server/runtime.tsx

@@ -146,7 +146,11 @@ function createServerController(
     // Preserve local icon override from per-workspace localStorage cache (childStore.icon).
     // Without this, different subdirectories of the same git repo would share the same
     // icon from the database instead of using their individual overrides.
-    const base = { ...metadata, ...project }
+    const base = {
+      ...metadata,
+      ...(!metadata || metadata.id === "global" ? childStore.projectMeta : undefined),
+      ...project,
+    }
     if (childStore.icon) {
       return { ...base, icon: { ...base.icon, override: childStore.icon } }
     }
@@ -174,6 +178,7 @@ function createServerController(
     projects: {
       ...projects,
       list: projectsList,
+      resolve: enrich,
       recentlyClosed: recentlyClosedList,
     },
     notification,

packages/app/src/settings/search-empty.tsx

@@ -6,12 +6,19 @@ import { useLanguage } from "@/runtime/i18n/language"
 export function SettingsSearchEmpty(props: { query: string }) {
   const language = useLanguage()
   const [state, setState] = createStore({ query: props.query })
-  let quoted: HTMLSpanElement | undefined
+  let container: HTMLDivElement | undefined
   let measure: HTMLSpanElement | undefined
   const text = (query: string) => language.t("settings.search.empty.query", { query })
   const update = () => {
-    if (!quoted || !measure) return
-    const width = quoted.getBoundingClientRect().width
+    if (!container || !measure) return
+    const style = getComputedStyle(container)
+    measure.textContent = language.t("settings.search.empty", { query: "" })
+    // Measure the available query space independently of its current truncated text.
+    const width =
+      container.clientWidth -
+      parseFloat(style.paddingInlineStart) -
+      parseFloat(style.paddingInlineEnd) -
+      measure.getBoundingClientRect().width
     const fits = (query: string) => {
       measure!.textContent = text(query)
       return measure!.getBoundingClientRect().width <= width
@@ -40,21 +47,22 @@ export function SettingsSearchEmpty(props: { query: string }) {
 
   createEffect(update)
   onMount(() => {
-    if (!quoted || !measure) return
+    if (!container || !measure) return
     // The measuring text also observes font changes that do not resize the available space.
-    createResizeObserver([quoted, measure], update)
+    createResizeObserver([container, measure], update)
   })
 
   return (
     <>
       <div
+        ref={container}
         class="settings-search-empty"
         role="status"
         aria-label={language.t("settings.search.empty", { query: text(props.query) })}
       >
         {language.rich("settings.search.empty", {
           query: (
-            <span ref={quoted} class="settings-search-empty-quoted">
+            <span class="settings-search-empty-quoted">
               <bdi dir="auto">{text(state.query)}</bdi>
             </span>
           ),

packages/app/src/settings/search.css

@@ -15,11 +15,12 @@
   visibility: hidden;
 }
 
-.settings-search [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
+:is(.settings-search, .settings-projects-search) [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
   color: var(--v2-icon-icon-faint);
+  cursor: default;
 }
 
-.settings-search
+:is(.settings-search, .settings-projects-search)
   [data-slot="text-input-v2-icon-button"][data-variant="clear"]:is(:hover, :active, :focus-visible):not(:disabled) {
   background: transparent;
   color: var(--v2-icon-icon-base);
@@ -37,19 +38,20 @@
   background: var(--v2-overlay-simple-overlay-hover);
 }
 
-.settings-search [data-slot="text-input-v2-input"][data-overflow-start="true"] {
+:is(.settings-search, .settings-projects-search) [data-slot="text-input-v2-input"][data-overflow-start="true"] {
   --mask-start: 16px;
 }
 
-.settings-search [data-slot="text-input-v2-input"][data-overflow-end="true"] {
+:is(.settings-search, .settings-projects-search) [data-slot="text-input-v2-input"][data-overflow-end="true"] {
   --mask-end: 16px;
 }
 
-.settings-search [data-slot="text-input-v2-input"]:dir(rtl) {
+:is(.settings-search, .settings-projects-search) [data-slot="text-input-v2-input"]:dir(rtl) {
   --mask-direction: to left;
 }
 
-.settings-search [data-slot="text-input-v2-input"]:is([data-overflow-start="true"], [data-overflow-end="true"]) {
+:is(.settings-search, .settings-projects-search)
+  [data-slot="text-input-v2-input"]:is([data-overflow-start="true"], [data-overflow-end="true"]) {
   mask-image: linear-gradient(
     var(--mask-direction, to right),
     transparent,

packages/app/src/settings/servers/inventory.ts

@@ -7,14 +7,18 @@ import { sshName, type SshItem } from "@/servers/ssh/types"
 import type { ServerCtx } from "@/runtime/server/runtime"
 import { pathKey } from "@/workspaces/path-key"
 
-export function settingsProjects(context: ServerCtx) {
+export function settingsProjects(context: {
+  projects: Pick<ServerCtx["projects"], "list" | "closed" | "resolve">
+  sync: { data: Pick<ServerCtx["sync"]["data"], "project"> }
+}) {
   const tracked = context.projects.list()
   const paths = new Set(tracked.map((project) => pathKey(project.worktree)))
+  const closed = new Set(context.projects.closed().map(pathKey))
   return [
     ...tracked,
     ...context.sync.data.project
-      .filter((project) => !paths.has(pathKey(project.worktree)))
-      .map((project) => ({ ...project, expanded: false })),
+      .filter((project) => !paths.has(pathKey(project.worktree)) && !closed.has(pathKey(project.worktree)))
+      .map((project) => context.projects.resolve({ worktree: project.worktree, expanded: false })),
   ]
 }
 

packages/app/src/settings/settings.css

@@ -803,6 +803,78 @@
   padding-inline-end: 28px;
 }
 
+.settings-projects-search [data-component="text-input-v2"] {
+  height: 36px;
+  background: color-mix(in oklab, var(--v2-background-bg-layer-02) 60%, transparent);
+  box-shadow: none;
+}
+
+.settings-projects-search [data-component="text-input-v2"]:is(:hover, :focus-within):not([data-disabled]) {
+  background: var(--v2-background-bg-layer-02);
+}
+
+.settings-projects-search [data-slot="text-input-v2-input"] {
+  padding-inline-end: 0;
+}
+
+.settings-projects-search [data-slot="text-input-v2-leading-icon"] {
+  padding-inline-start: 16px;
+}
+
+.settings-projects-search [data-slot="text-input-v2-value"] {
+  gap: 12px;
+}
+
+.settings-projects-search [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
+  margin-inline-end: -4px;
+}
+
+.settings-projects-empty {
+  width: 60%;
+  margin-inline: auto;
+}
+
+.settings-projects-empty .settings-search-empty {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+.settings-projects-empty .settings-search-empty-quoted {
+  flex: 0 1 auto;
+}
+
+.settings-project-row {
+  position: relative;
+  margin-inline: 1px;
+  border-radius: 8px;
+  background: var(--v2-background-bg-layer-01);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+  transition: background-color 120ms;
+}
+
+.settings-project-row:hover {
+  background: var(--v2-background-bg-layer-02);
+}
+
+.settings-project-row-content {
+  display: flex;
+  width: 100%;
+  min-height: 73px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 16px;
+  border-radius: inherit;
+  text-align: start;
+}
+
+.settings-project-row-name {
+  font-size: 13px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
+  color: var(--v2-text-text-base);
+}
+
 .settings-tab-search-clear {
   position: absolute;
   top: 50%;

packages/app/src/settings/shell.tsx

@@ -294,8 +294,6 @@ function RootSettings() {
             <Tabs.Content value="projects" class="settings-panel">
               <SettingsProjects
                 server={server}
-                active={surface.view().tab === "projects"}
-                autofocus={!surface.search.state.selected}
                 onOpenProject={(project) =>
                   surface.openProject({
                     server: ServerConnection.key(server),
@@ -378,7 +376,6 @@ function ServerSettings(props: { entry: SettingsServer }) {
             <Tabs.Content value="projects" class="settings-panel">
               <SettingsProjects
                 server={server}
-                active={surface.view().tab === "projects"}
                 onOpenProject={(project) =>
                   surface.openProject({
                     server: props.entry.key,