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

fix(app): show tab close button properly (#29523)

Browse Source
This commit is contained in:
Brendan Allan
2026-05-27 06:36:04 +00:00
committed by GitHub
parent 34b1045a01
commit f195c952fc
1 changed files with 3 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/titlebar.tsx
+3 -5
View File
@@ -490,7 +490,6 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
project={projectForSession(tab.info, projects(), projectByID())} project={projectForSession(tab.info, projects(), projectByID())}
directory={tab.dir} directory={tab.dir}
onClose={() => tabsStoreActions.removeTab(tab.href)} onClose={() => tabsStoreActions.removeTab(tab.href)}
hideClose={tabsEnriched().length < 2}
/> />
</> </>
)} )}
@@ -737,14 +736,13 @@ function TabNavItem(props: {
title: string title: string
project?: LocalProject project?: LocalProject
directory: string directory: string
hideClose?: boolean
onClose: () => void onClose: () => void
}) { }) {
const match = useMatch(() => props.href) const match = useMatch(() => props.href)
const isActive = () => !!match() const isActive = () => !!match()
return ( return (
<div <div
class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] pl-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]" class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
data-active={isActive()} data-active={isActive()}
> >
<a <a
@@ -755,7 +753,7 @@ function TabNavItem(props: {
<span class="text-clip leading-5">{props.title}</span> <span class="text-clip leading-5">{props.title}</span>
</a> </a>
<div class="absolute right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2"> <div class="absolute not-group-hover:not-group-data-[active=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
<div <div
class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)" class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
style={{ style={{
@@ -766,7 +764,7 @@ function TabNavItem(props: {
<IconButtonV2 <IconButtonV2
size="small" size="small"
variant="ghost-muted" variant="ghost-muted"
class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100" class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100 z-10"
onClick={props.onClose} onClick={props.onClose}
icon={<IconV2 name="xmark-small" />} icon={<IconV2 name="xmark-small" />}
/> />