ui : switch the backend protocols with the tabs component

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte

@@ -2,7 +2,7 @@
 	import { SettingsBackends } from '$lib/components/app/backends';
 	import { Logo } from '$lib/components/app/misc';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import { cn } from '$lib/components/ui/utils';
+	import * as Tabs from '$lib/components/ui/tabs';
 	import type { BackendProtocol } from '$lib/types';
 
 	const PROTOCOL_TABS: Array<{ label: string; value: BackendProtocol }> = [
@@ -26,7 +26,9 @@
 </script>
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
-	<Dialog.Content class="md:max-h-[80vh]! md:w-[calc(100vw-4rem)]! md:max-w-164! flex flex-col">
+	<Dialog.Content
+		class="flex flex-col gap-2 md:max-h-[80vh]! md:w-[calc(100vw-4rem)]! md:max-w-164!"
+	>
 		<Dialog.Header>
 			<Dialog.Title class="flex items-center gap-2">
 				<Logo class="h-5 w-5" style="--size: 1.25rem" />
@@ -39,24 +41,22 @@
 			</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="mt-4 flex w-fit shrink-0 items-center gap-1 rounded-full bg-muted p-1">
-			{#each PROTOCOL_TABS as tab (tab.value)}
-				<button
-					aria-pressed={protocol === tab.value}
-					class={cn(
-						'cursor-pointer rounded-full px-3 py-1 text-xs font-medium transition-colors',
-						protocol === tab.value
-							? 'bg-background text-foreground shadow-sm'
-							: 'text-muted-foreground hover:text-foreground'
-					)}
-					onclick={() => (protocol = tab.value)}
-					type="button"
-				>
-					{tab.label}
-				</button>
-			{/each}
-		</div>
+		<Tabs.Root
+			class="min-h-0 flex-1"
+			onValueChange={(value) => (protocol = value as BackendProtocol)}
+			value={protocol}
+		>
+			<Tabs.List>
+				{#each PROTOCOL_TABS as tab (tab.value)}
+					<Tabs.Trigger value={tab.value}>{tab.label}</Tabs.Trigger>
+				{/each}
+			</Tabs.List>
 
-		<SettingsBackends class="mt-2 overflow-y-auto" {protocol} />
+			{#each PROTOCOL_TABS as tab (tab.value)}
+				<Tabs.Content class="min-h-0 flex-1 overflow-y-auto" value={tab.value}>
+					<SettingsBackends protocol={tab.value} />
+				</Tabs.Content>
+			{/each}
+		</Tabs.Root>
 	</Dialog.Content>
 </Dialog.Root>

tools/ui/src/lib/components/ui/tabs/index.ts

@@ -0,0 +1,18 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List, { type TabsListVariant, tabsListVariants } from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	tabsListVariants,
+	type TabsListVariant,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger
+};

tools/ui/src/lib/components/ui/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	class={cn('text-sm flex-1 outline-none', className)}
+	data-slot="tabs-content"
+	{...restProps}
+/>

tools/ui/src/lib/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const tabsListVariants = tv({
+		base: 'rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+		defaultVariants: {
+			variant: 'default'
+		},
+		variants: {
+			variant: {
+				default: 'bg-muted',
+				line: 'gap-1 bg-transparent'
+			}
+		}
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		variant = 'default',
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	class={cn(tabsListVariants({ variant }), className)}
+	data-slot="tabs-list"
+	data-variant={variant}
+	{...restProps}
+/>

tools/ui/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 relative inline-flex h-[calc(100%_-_1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
+		'data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground',
+		'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
+		className
+	)}
+	data-slot="tabs-trigger"
+	{...restProps}
+/>

tools/ui/src/lib/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		value = $bindable(''),
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	class={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}
+	data-slot="tabs"
+	{...restProps}
+/>