salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

keep instance tab close buttons visible

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-03 00:09:07 +00:00
parent 11be314f63
commit 9e0fbd185d
3 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/ui/src/components/instance-tabs.tsx
View File

@@ -17,35 +17,37 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
return ( return (
<div class="tab-bar tab-bar-instance"> <div class="tab-bar tab-bar-instance">
<div class="tab-container" role="tablist"> <div class="tab-container" role="tablist">
<div class="flex items-center gap-1 overflow-x-auto"> <div class="tab-scroll flex items-center gap-3 overflow-x-auto w-full">
<For each={Array.from(props.instances.entries())}> <div class="flex items-center gap-1">
{([id, instance]) => ( <For each={Array.from(props.instances.entries())}>
<InstanceTab {([id, instance]) => (
instance={instance} <InstanceTab
active={id === props.activeInstanceId} instance={instance}
onSelect={() => props.onSelect(id)} active={id === props.activeInstanceId}
onClose={() => props.onClose(id)} onSelect={() => props.onSelect(id)}
/> onClose={() => props.onClose(id)}
)} />
</For>
<button
class="new-tab-button"
onClick={props.onNew}
title="New instance (Cmd/Ctrl+N)"
aria-label="New instance"
>
<Plus class="w-4 h-4" />
</button>
</div>
<Show when={Array.from(props.instances.entries()).length > 1}>
<div class="flex-shrink-0 ml-4">
<KeyboardHint
shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
Boolean,
)} )}
/> </For>
<button
class="new-tab-button"
onClick={props.onNew}
title="New instance (Cmd/Ctrl+N)"
aria-label="New instance"
>
<Plus class="w-4 h-4" />
</button>
</div> </div>
</Show> <Show when={Array.from(props.instances.entries()).length > 1}>
<div class="flex-shrink-0 ml-auto pl-4">
<KeyboardHint
shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
Boolean,
)}
/>
</div>
</Show>
</div>
</div> </div>
</div> </div>
) )

2
packages/ui/src/styles/panels.css
View File

@@ -52,7 +52,7 @@
} }
.tab-close { .tab-close {
@apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer; @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
} }
.tab-close:focus-visible { .tab-close:focus-visible {

2
packages/ui/src/styles/panels/tabs.css
View File

@@ -51,7 +51,7 @@
} }
.tab-close { .tab-close {
@apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer; @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
} }
.tab-close:focus-visible { .tab-close:focus-visible {