feat(app): dismiss recent home projects

packages/app/src/pages/home/home-projects-view.tsx

@@ -36,6 +36,7 @@ export type HomeProjectsViewProps = {
   projectsForServer: (server: ServerConnection.Any) => LocalProject[]
   recentForServer: (server: ServerConnection.Any) => LocalProject[]
   showRecentForServer: (server: ServerConnection.Any) => boolean
+  onDismissRecent: (server: ServerConnection.Any) => void
   homedirForServer: (server: ServerConnection.Any) => string
   collapsed: (server: ServerConnection.Any) => boolean
   canDefaultServer: boolean
@@ -115,7 +116,7 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
                     {...contextMenuProps}
                     server={props.servers[0]}
                     projects={props.projects}
-                    items={props.recentForServer(props.servers[0])}
+                    items={props.showRecentForServer(props.servers[0]) ? props.recentForServer(props.servers[0]) : []}
                   />
                 }
               >
@@ -132,7 +133,7 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
                 const healthy = () => !!props.serverHealth(item)?.healthy
                 const hasProjects = () => projects().length > 0
                 const showRecent = () => props.showRecentForServer(item)
-                const hasChildren = () => hasProjects() || recent().length > 0
+                const hasChildren = () => hasProjects() || (showRecent() && recent().length > 0)
                 const collapsed = () => props.collapsed(item)
                 return (
                   <div class="flex min-w-0 flex-col gap-1">
@@ -155,7 +156,7 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
                             {...contextMenuProps}
                             server={item}
                             projects={projects()}
-                            items={recent()}
+                            items={showRecent() ? recent() : []}
                           />
                         }
                       >
@@ -435,8 +436,19 @@ function HomeProjectEmpty(
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
       </HomeProjectNavButton>
       <Show when={props.items.length > 0}>
-        <div class="mt-3 flex h-7 min-w-0 shrink-0 items-center pl-1.5 pr-3">
+        <div class="group/recent relative mt-3 flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-1">
           <div class="text-v2-text-text-faint [font-weight:530]">{props.language.t("home.recentlyClosed")}</div>
+          <TooltipV2 placement="bottom" value={props.language.t("common.dismiss")}>
+            <IconButtonV2
+              data-action="home-dismiss-recent-projects"
+              class="opacity-0 group-hover/recent:opacity-100 focus-visible:opacity-100"
+              variant="ghost-muted"
+              size="small"
+              icon={<IconV2 name="close" />}
+              aria-label={props.language.t("common.dismiss")}
+              onClick={() => props.onDismissRecent(props.server)}
+            />
+          </TooltipV2>
         </div>
         <For each={props.items}>
           {(project) => <HomeSuggestedProjectRow {...props} project={project} server={props.server} />}

packages/app/src/pages/home/home-projects.tsx

@@ -2,11 +2,14 @@ import type { HomeProjectsController } from "./home-projects-controller"
 import { HomeProjectsView } from "./home-projects-view"
 import type { HomeScrollController } from "./home-scroll-controller"
 import { ServerConnection } from "@/context/servers"
+import { createStore } from "solid-js/store"
 
 export function HomeProjects(props: { projects: HomeProjectsController; scroll: HomeScrollController }) {
   const recentMode = new Map<ServerConnection.Key, boolean>()
+  const [dismissedRecent, setDismissedRecent] = createStore({} as Record<string, boolean>)
   const showRecentForServer = (server: ServerConnection.Any) => {
     const key = ServerConnection.key(server)
+    if (dismissedRecent[key]) return false
     if (recentMode.get(key)) return true
     if (props.projects.server.projects(server).length > 0) return false
     recentMode.set(key, true)
@@ -23,6 +26,7 @@ export function HomeProjects(props: { projects: HomeProjectsController; scroll:
       projectsForServer={props.projects.server.projects}
       recentForServer={props.projects.project.recentForServer}
       showRecentForServer={showRecentForServer}
+      onDismissRecent={(server) => setDismissedRecent(ServerConnection.key(server), true)}
       homedirForServer={props.projects.project.homedirForServer}
       collapsed={props.projects.server.collapsed}
       canDefaultServer={props.projects.server.canDefault()}