feat(app): polish home projects list UI (#30436)

packages/app/src/pages/home.tsx

@@ -447,21 +447,23 @@ function HomeProjectList(props: {
         </button>
       }
     >
-      <For each={props.projects}>
-        {(project) => (
-          <HomeProjectRow
-            project={project}
-            selected={props.selected === project.worktree}
-            unseenCount={props.unseenCount(project)}
-            selectProject={props.selectProject}
-            openNewSession={props.openNewSession}
-            editProject={props.editProject}
-            closeProject={props.closeProject}
-            clearNotifications={props.clearNotifications}
-            language={props.language}
-          />
-        )}
-      </For>
+      <div class="flex min-w-0 flex-col gap-1">
+        <For each={props.projects}>
+          {(project) => (
+            <HomeProjectRow
+              project={project}
+              selected={props.selected === project.worktree}
+              unseenCount={props.unseenCount(project)}
+              selectProject={props.selectProject}
+              openNewSession={props.openNewSession}
+              editProject={props.editProject}
+              closeProject={props.closeProject}
+              clearNotifications={props.clearNotifications}
+              language={props.language}
+            />
+          )}
+        </For>
+      </div>
     </Show>
   )
 }
@@ -495,6 +497,14 @@ function HomeProjectRow(props: {
         class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
         data-menu={state.menuOpen}
       >
+        <IconButtonV2
+          data-action="home-project-new-session"
+          variant="ghost-muted"
+          size="small"
+          icon={<IconV2 name="edit" />}
+          aria-label={props.language.t("command.session.new")}
+          onClick={() => props.openNewSession(props.project.worktree)}
+        />
         <MenuV2
           gutter={4}
           modal={false}
@@ -528,14 +538,6 @@ function HomeProjectRow(props: {
             </MenuV2.Content>
           </MenuV2.Portal>
         </MenuV2>
-        <IconButtonV2
-          data-action="home-project-new-session"
-          variant="ghost-muted"
-          size="small"
-          icon={<IconV2 name="edit" />}
-          aria-label={props.language.t("command.session.new")}
-          onClick={() => props.openNewSession(props.project.worktree)}
-        />
       </div>
     </div>
   )

packages/ui/src/v2/components/menu-v2.css

@@ -6,9 +6,9 @@
   padding: 2px;
   min-width: 160px;
 
-  background: var(--background-bg-layer-01);
+  background: var(--v2-background-bg-layer-01);
   border-radius: 6px;
-  box-shadow: var(--elevation-floating);
+  box-shadow: var(--v2-elevation-floating);
 
   outline: none;
 
@@ -25,14 +25,14 @@
 }
 
 [data-component="menu-v2-item"] {
-  --menu-v2-fg: var(--text-text-base);
-  --menu-v2-fg-muted: var(--text-text-faint);
-  --menu-v2-fg-subtle: var(--text-text-muted);
-  --menu-v2-icon: var(--icon-icon-base);
-  --menu-v2-accent: var(--text-text-accent);
-  --menu-v2-badge-bg: var(--background-bg-layer-02);
-  --menu-v2-badge-border: var(--border-border-base);
-  --menu-v2-hover: var(--overlay-simple-overlay-hover);
+  --menu-v2-fg: var(--v2-text-text-base);
+  --menu-v2-fg-muted: var(--v2-text-text-faint);
+  --menu-v2-fg-subtle: var(--v2-text-text-muted);
+  --menu-v2-icon: var(--v2-icon-icon-base);
+  --menu-v2-accent: var(--v2-text-text-accent);
+  --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
+  --menu-v2-badge-border: var(--v2-border-border-base);
+  --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -151,7 +151,7 @@
   height: 1px;
   width: calc(100% + 4px);
   margin: 2px -2px;
-  background: var(--border-border-muted);
+  background: var(--v2-border-border-muted);
   border: none;
 }
 
@@ -166,7 +166,7 @@
   font-weight: 530;
   line-height: 100%;
   letter-spacing: 0.05px;
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
   user-select: none;
   font-variant-numeric: tabular-nums;
 }