From 7a375abfb7cc9baaa022eadfaedc687bc4936bc3 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 28 Sep 2026 10:46:36 +0200
Subject: [PATCH] ui : put the model filters in a carousel and give controls a
 pointer

The capability and modality toggles were two groups, and the toolbar had
grown to two rows at 1280px. They are one group now and the row scrolls
with the same carousel the settings header uses. An active toggle keeps
the app's gray instead of taking the primary fill. Tailwind v4 leaves
buttons on the default cursor, so pressable controls get the pointer back.

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 tools/ui/src/app.css                          | 23 ++++++
 .../ModelsManager/ModelsManagerFilters.svelte | 73 +++++++++----------
 2 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/tools/ui/src/app.css b/tools/ui/src/app.css
index f1b8ac7168..ccf13fbec3 100644
--- a/tools/ui/src/app.css
+++ b/tools/ui/src/app.css
@@ -10,6 +10,29 @@
 @custom-variant data-horizontal (&[data-orientation='horizontal']);
 @custom-variant data-vertical (&[data-orientation='vertical']);
 
+/*
+ * Tailwind v4 dropped the pointer cursor from buttons. Every control a user can
+ * press gets it back, and anything disabled keeps the cursor its own class asks for.
+ */
+@layer base {
+	button:not(:disabled),
+	[role='button']:not([data-disabled]),
+	[role='checkbox']:not([data-disabled]),
+	[role='combobox']:not([data-disabled]),
+	[role='menuitem']:not([data-disabled]),
+	[role='menuitemcheckbox']:not([data-disabled]),
+	[role='menuitemradio']:not([data-disabled]),
+	[role='option']:not([data-disabled]),
+	[role='radio']:not([data-disabled]),
+	[role='switch']:not([data-disabled]),
+	[role='tab']:not([data-disabled]),
+	label[for],
+	select,
+	summary {
+		cursor: pointer;
+	}
+}
+
 :root {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte
index 055de72200..e83e018dbe 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ModalityKey } from './utils';
 	import { Check, ChevronDown, Image, Lightbulb, Mic, Server, Video, Wrench } from '@lucide/svelte';
-	import { Logo } from '$lib/components/app';
+	import { Logo, ScrollCarousel } from '$lib/components/app';
 	import { BackendIcon } from '$lib/components/app/backends';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Select from '$lib/components/ui/select';
@@ -45,17 +45,33 @@
 		{ label: '256K or more', value: 262_144 },
 		{ label: '1M or more', value: 1_048_576 }
 	];
-	const CAPABILITIES: { icon: typeof Wrench; label: string; value: ModelCapability }[] = [
-		{ icon: Wrench, label: 'Tool use', value: ModelCapability.TOOL_USE },
-		{ icon: Lightbulb, label: 'Reasoning', value: ModelCapability.REASONING }
-	];
-	const MODALITIES: { icon: typeof Image; key: ModalityKey; label: string }[] = [
-		{ icon: Image, key: 'vision', label: 'Vision' },
-		{ icon: Video, key: 'video', label: 'Video' },
-		{ icon: Mic, key: 'audio', label: 'Audio' }
+	// one group for everything a model either has or does not: what it can do, and
+	// what it can accept
+	const TOGGLES: {
+		group: 'capability' | 'modality';
+		icon: typeof Wrench;
+		label: string;
+		value: string;
+	}[] = [
+		{ group: 'capability', icon: Wrench, label: 'Tool use', value: ModelCapability.TOOL_USE },
+		{ group: 'capability', icon: Lightbulb, label: 'Reasoning', value: ModelCapability.REASONING },
+		{ group: 'modality', icon: Image, label: 'Vision', value: 'vision' },
+		{ group: 'modality', icon: Video, label: 'Video', value: 'video' },
+		{ group: 'modality', icon: Mic, label: 'Audio', value: 'audio' }
 	];
 
-	const TOGGLE_ITEM_CLASS = 'bg-transparent! border-border/30! dark:border-border/20!';
+	// the group holds one flat list, so a change splits back into the two filters
+	function setToggles(values: string[]): void {
+		capabilities = values.filter(
+			(value) => TOGGLES.find((entry) => entry.value === value)?.group === 'capability'
+		) as ModelCapability[];
+		modalities = values.filter(
+			(value) => TOGGLES.find((entry) => entry.value === value)?.group === 'modality'
+		) as ModalityKey[];
+	}
+
+	const TOGGLE_ITEM_CLASS =
+		'bg-transparent! border-border/30! dark:border-border/20! data-[state=on]:bg-muted! data-[state=on]:text-foreground!';
 
 	// none selected means every provider, so the label names the selection
 	let providerLabel = $derived(
@@ -86,7 +102,7 @@
 	{/if}
 {/snippet}
 
-<div class="flex flex-wrap items-center gap-2">
+<ScrollCarousel alwaysShowArrows class="min-w-0 flex-1" gapSize="2" innerClass="items-center">
 	{#if backends.length > 1}
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger>
@@ -152,24 +168,6 @@
 		</Select.Content>
 	</Select.Root>
 
-	<ToggleGroup.Root
-		bind:value={capabilities}
-		class="bg-muted/60 dark:bg-muted/75"
-		type="multiple"
-		variant="outline"
-	>
-		{#each CAPABILITIES as capability (capability.value)}
-			<ToggleGroup.Item
-				aria-label={capability.label}
-				class={TOGGLE_ITEM_CLASS}
-				title={capability.label}
-				value={capability.value}
-			>
-				<capability.icon class="h-3.5 w-3.5" />
-			</ToggleGroup.Item>
-		{/each}
-	</ToggleGroup.Root>
-
 	<!-- a checkbox chip: the whole pill is the control, the box is its indicator -->
 	<Toggle
 		bind:pressed={draft}
@@ -179,7 +177,7 @@
 		<span
 			aria-hidden="true"
 			class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-shadow {draft
-				? 'border-primary bg-primary text-primary-foreground'
+				? 'border-border/30 bg-muted text-foreground dark:border-border/20 dark:bg-muted/75'
 				: 'border-input bg-background dark:bg-input/30'}"
 		>
 			{#if draft}
@@ -191,20 +189,21 @@
 	</Toggle>
 
 	<ToggleGroup.Root
-		bind:value={modalities}
 		class="bg-muted/60 dark:bg-muted/75"
+		onValueChange={setToggles}
 		type="multiple"
+		value={[...capabilities, ...modalities]}
 		variant="outline"
 	>
-		{#each MODALITIES as modality (modality.key)}
+		{#each TOGGLES as toggle (toggle.value)}
 			<ToggleGroup.Item
-				aria-label={modality.label}
+				aria-label={toggle.label}
 				class={TOGGLE_ITEM_CLASS}
-				title={modality.label}
-				value={modality.key}
+				title={toggle.label}
+				value={toggle.value}
 			>
-				<modality.icon class="h-3.5 w-3.5" />
+				<toggle.icon class="h-3.5 w-3.5" />
 			</ToggleGroup.Item>
 		{/each}
 	</ToggleGroup.Root>
-</div>
+</ScrollCarousel>