lmin/zmo-cli
1
0
Fork 0
Code Issues Pull Requests Actions 77 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aarav Sareen
2026-06-03 05:23:18 +00:00
committed by GitHub
parent 1111fdc3a5
commit 2538c0d083
2 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/pages/home.tsx
+25 -23
View File
@@ -447,21 +447,23 @@ function HomeProjectList(props: {
</button> </button>
} }
> >
<For each={props.projects}> <div class="flex min-w-0 flex-col gap-1">
{(project) => ( <For each={props.projects}>
<HomeProjectRow {(project) => (
project={project} <HomeProjectRow
selected={props.selected === project.worktree} project={project}
unseenCount={props.unseenCount(project)} selected={props.selected === project.worktree}
selectProject={props.selectProject} unseenCount={props.unseenCount(project)}
openNewSession={props.openNewSession} selectProject={props.selectProject}
editProject={props.editProject} openNewSession={props.openNewSession}
closeProject={props.closeProject} editProject={props.editProject}
clearNotifications={props.clearNotifications} closeProject={props.closeProject}
language={props.language} clearNotifications={props.clearNotifications}
/> language={props.language}
)} />
</For> )}
</For>
</div>
</Show> </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" 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} 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 <MenuV2
gutter={4} gutter={4}
modal={false} modal={false}
@@ -528,14 +538,6 @@ function HomeProjectRow(props: {
</MenuV2.Content> </MenuV2.Content>
</MenuV2.Portal> </MenuV2.Portal>
</MenuV2> </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>
</div> </div>
) )
packages/ui/src/v2/components/menu-v2.css
+12 -12
View File
@@ -6,9 +6,9 @@
padding: 2px; padding: 2px;
min-width: 160px; min-width: 160px;
background: var(--background-bg-layer-01); background: var(--v2-background-bg-layer-01);
border-radius: 6px; border-radius: 6px;
box-shadow: var(--elevation-floating); box-shadow: var(--v2-elevation-floating);
outline: none; outline: none;
@@ -25,14 +25,14 @@
} }
[data-component="menu-v2-item"] { [data-component="menu-v2-item"] {
--menu-v2-fg: var(--text-text-base); --menu-v2-fg: var(--v2-text-text-base);
--menu-v2-fg-muted: var(--text-text-faint); --menu-v2-fg-muted: var(--v2-text-text-faint);
--menu-v2-fg-subtle: var(--text-text-muted); --menu-v2-fg-subtle: var(--v2-text-text-muted);
--menu-v2-icon: var(--icon-icon-base); --menu-v2-icon: var(--v2-icon-icon-base);
--menu-v2-accent: var(--text-text-accent); --menu-v2-accent: var(--v2-text-text-accent);
--menu-v2-badge-bg: var(--background-bg-layer-02); --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
--menu-v2-badge-border: var(--border-border-base); --menu-v2-badge-border: var(--v2-border-border-base);
--menu-v2-hover: var(--overlay-simple-overlay-hover); --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -151,7 +151,7 @@
height: 1px; height: 1px;
width: calc(100% + 4px); width: calc(100% + 4px);
margin: 2px -2px; margin: 2px -2px;
background: var(--border-border-muted); background: var(--v2-border-border-muted);
border: none; border: none;
} }
@@ -166,7 +166,7 @@
font-weight: 530; font-weight: 530;
line-height: 100%; line-height: 100%;
letter-spacing: 0.05px; letter-spacing: 0.05px;
color: var(--text-text-faint); color: var(--v2-text-text-faint);
user-select: none; user-select: none;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }