starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-10-26 00:03:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compact Add Project host selector

Browse Source 
Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
Jinwoo-H
2026-06-11 14:29:30 -07:00
co-authored by Orca
parent 9276707b84
commit 9e1e86fb01
1 changed files with 68 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/sidebar/AddRepoHostSelector.tsx
+68 -79
View File
@@ -51,93 +51,82 @@ export function AddRepoHostSelector({
if (!selectedHost) {
return null
}
const selectedHealthLabel = getSidebarHostHealthLabel(selectedHost.health)
return (
<div className="space-y-1">
<div className="flex items-center justify-between gap-3">
<span className="text-[11px] font-medium text-muted-foreground">
{translate('auto.components.sidebar.AddRepoHostSelector.host', 'Host')}
</span>
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button
type="button"
variant="outline"
role="combobox"
aria-expanded={open}
className="h-10 min-w-56 justify-between px-3 text-xs font-normal"
>
<span className="min-w-0 flex flex-col items-start leading-tight">
<span className="max-w-40 truncate">{selectedHost.label}</span>
{selectedHost.health !== 'local' && (
<span
title={getHostStatusDetail(selectedHost)}
<div className="flex items-center gap-2 text-xs">
<span className="font-medium text-muted-foreground">
{translate('auto.components.sidebar.AddRepoHostSelector.host', 'Host')}
</span>
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button
type="button"
variant="ghost"
role="combobox"
aria-expanded={open}
className="h-7 min-w-0 max-w-[18rem] gap-1.5 rounded-md border border-border bg-muted/30 px-2 text-xs font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
>
<span className="min-w-0 truncate">{selectedHost.label}</span>
{selectedHost.health !== 'local' ? (
<span
title={getHostStatusDetail(selectedHost)}
className="shrink-0 text-[11px] font-normal text-muted-foreground"
>
{getSidebarHostHealthLabel(selectedHost.health)}
</span>
) : null}
<ChevronsUpDown className="size-3.5 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
align="start"
className="w-[min(340px,calc(100vw-1rem))] min-w-[var(--radix-popover-trigger-width)] p-0"
>
<Command>
<CommandList>
{hosts.map((host) => {
const selected = host.id === selectedHostId
const disabled = !canSelectAddRepoHost(host)
return (
<CommandItem
key={host.id}
value={`${host.label} ${host.detail}`}
disabled={disabled}
onSelect={() => {
if (disabled) {
return
}
onSelectHost(host.id)
onOpenChange(false)
}}
className={cn(
'max-w-40 truncate text-[10px]',
selectedHost.health === 'available'
? 'text-muted-foreground'
: 'text-destructive'
'items-start gap-2 px-3 py-2 text-xs',
disabled && 'cursor-not-allowed opacity-55'
)}
>
{selectedHealthLabel}
</span>
)}
</span>
<ChevronsUpDown className="size-3.5 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
align="end"
className="w-[min(340px,calc(100vw-1rem))] min-w-[var(--radix-popover-trigger-width)] p-0"
>
<Command>
<CommandList>
{hosts.map((host) => {
const selected = host.id === selectedHostId
const disabled = !canSelectAddRepoHost(host)
return (
<CommandItem
key={host.id}
value={`${host.label} ${host.detail}`}
disabled={disabled}
onSelect={() => {
if (disabled) {
return
}
onSelectHost(host.id)
onOpenChange(false)
}}
<Check
className={cn(
'items-start gap-2 px-3 py-2 text-xs',
disabled && 'cursor-not-allowed opacity-55'
'mt-0.5 size-3 text-muted-foreground',
selected ? 'opacity-70' : 'opacity-0'
)}
>
<Check
className={cn(
'mt-0.5 size-3 text-muted-foreground',
selected ? 'opacity-70' : 'opacity-0'
)}
/>
<span className="min-w-0 flex-1">
<span className="flex min-w-0 items-center gap-2">
<span className="truncate font-medium">{host.label}</span>
<span className="shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
{getHostKindLabel(host)}
</span>
</span>
<span className="mt-0.5 block truncate text-[11px] text-muted-foreground">
{getHostStatusDetail(host)}
/>
<span className="min-w-0 flex-1">
<span className="flex min-w-0 items-center gap-2">
<span className="truncate font-medium">{host.label}</span>
<span className="shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
{getHostKindLabel(host)}
</span>
</span>
</CommandItem>
)
})}
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
<span className="mt-0.5 block truncate text-[11px] text-muted-foreground">
{getHostStatusDetail(host)}
</span>
</span>
</CommandItem>
)
})}
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
)
}