enh: admin models

src/lib/components/admin/Settings/Models.svelte

@@ -40,6 +40,10 @@
 	import Eye from '$lib/components/icons/Eye.svelte';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { goto } from '$app/navigation';
+	import { DropdownMenu } from 'bits-ui';
+	import { flyAndScale } from '$lib/utils/transitions';
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import AdminViewSelector from './Models/AdminViewSelector.svelte';
 
 	let shiftKey = false;
 
@@ -58,21 +62,43 @@
 	let showConfigModal = false;
 	let showManageModal = false;
 
+	let viewOption = ''; // '' = All, 'enabled', 'disabled', 'visible', 'hidden'
+
 	$: if (models) {
 		filteredModels = models
 			.filter((m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase()))
+			.filter((m) => {
+				if (viewOption === 'enabled') return m?.is_active ?? true;
+				if (viewOption === 'disabled') return !(m?.is_active ?? true);
+				if (viewOption === 'visible') return !(m?.meta?.hidden ?? false);
+				if (viewOption === 'hidden') return m?.meta?.hidden === true;
+				return true; // All
+			})
 			.sort((a, b) => {
-				// // Check if either model is inactive and push them to the bottom
-				// if ((a.is_active ?? true) !== (b.is_active ?? true)) {
-				// 	return (b.is_active ?? true) - (a.is_active ?? true);
-				// }
-				// If both models' active states are the same, sort alphabetically
 				return (a?.name ?? a?.id ?? '').localeCompare(b?.name ?? b?.id ?? '');
 			});
 	}
 
 	let searchValue = '';
 
+	const enableAllHandler = async () => {
+		const modelsToEnable = filteredModels.filter((m) => !(m.is_active ?? true));
+		// Optimistic UI update
+		modelsToEnable.forEach((m) => (m.is_active = true));
+		models = models;
+		// Sync with server
+		await Promise.all(modelsToEnable.map((model) => toggleModelById(localStorage.token, model.id)));
+	};
+
+	const disableAllHandler = async () => {
+		const modelsToDisable = filteredModels.filter((m) => m.is_active ?? true);
+		// Optimistic UI update
+		modelsToDisable.forEach((m) => (m.is_active = false));
+		models = models;
+		// Sync with server
+		await Promise.all(modelsToDisable.map((model) => toggleModelById(localStorage.token, model.id)));
+	};
+
 	const downloadModels = async (models) => {
 		let blob = new Blob([JSON.stringify(models)], {
 			type: 'application/json'
@@ -308,8 +334,12 @@
 					</Tooltip>
 				</div>
 			</div>
+		</div>
 
-			<div class=" flex flex-1 items-center w-full space-x-2">
+		<div
+			class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
+		>
+			<div class="px-3.5 flex flex-1 items-center w-full space-x-2 py-0.5 pb-2">
 				<div class="flex flex-1 items-center">
 					<div class=" self-center ml-1 mr-3">
 						<Search className="size-3.5" />
@@ -333,156 +363,215 @@
 					{/if}
 				</div>
 			</div>
-		</div>
 
-		<div class=" my-2 mb-5" id="model-list">
+			<div class="px-3 flex w-full items-center bg-transparent overflow-x-auto scrollbar-none">
-			{#if models.length > 0}
+				<div
-				{#each filteredModels as model, modelIdx (`${model.id}-${modelIdx}`)}
+					class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent whitespace-nowrap"
-					<div
+				>
-						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition {model
+					<AdminViewSelector bind:value={viewOption} />
-							?.meta?.hidden
+				</div>
-							? 'opacity-50 dark:opacity-50'
+
-							: ''}"
+				<div class="flex-1"></div>
-						id="model-item-{model.id}"
+
-					>
+				<Dropdown>
+					<Tooltip content={$i18n.t('Actions')}>
 						<button
-							class=" flex flex-1 text-left space-x-3.5 cursor-pointer w-full"
+							class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
 							type="button"
-							on:click={() => {
-								selectedModelId = model.id;
-							}}
 						>
-							<div class=" self-center w-8">
+							<EllipsisHorizontal className="size-4" />
-								<div
-									class=" rounded-full object-cover {(model?.is_active ?? true)
-										? ''
-										: 'opacity-50 dark:opacity-50'} "
-								>
-									<img
-										src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}`}
-										alt="modelfile profile"
-										class=" rounded-full w-full h-auto object-cover"
-									/>
-								</div>
-							</div>
-
-							<div class=" flex-1 self-center {(model?.is_active ?? true) ? '' : 'text-gray-500'}">
-								<Tooltip
-									content={marked.parse(
-										!!model?.meta?.description
-											? model?.meta?.description
-											: model?.ollama?.digest
-												? `${model?.ollama?.digest} **(${model?.ollama?.modified_at})**`
-												: model.id
-									)}
-									className=" w-fit"
-									placement="top-start"
-								>
-									<div class="  font-semibold line-clamp-1">{model.name}</div>
-								</Tooltip>
-								<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1 text-gray-500">
-									<span class=" line-clamp-1">
-										{!!model?.meta?.description
-											? model?.meta?.description
-											: model?.ollama?.digest
-												? `${model.id} (${model?.ollama?.digest})`
-												: model.id}
-									</span>
-								</div>
-							</div>
 						</button>
-						<div class="flex flex-row gap-0.5 items-center self-center">
+					</Tooltip>
-							{#if shiftKey}
+
-								<Tooltip content={model?.meta?.hidden ? $i18n.t('Show') : $i18n.t('Hide')}>
+					<div slot="content">
+						<DropdownMenu.Content
+							class="w-full max-w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
+							sideOffset={-2}
+							side="bottom"
+							align="end"
+							transition={flyAndScale}
+						>
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+								on:click={() => {
+									enableAllHandler();
+								}}
+							>
+								<Eye className="size-4" />
+								<div class="flex items-center">{$i18n.t('Enable All')}</div>
+							</DropdownMenu.Item>
+
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+								on:click={() => {
+									disableAllHandler();
+								}}
+							>
+								<EyeSlash className="size-4" />
+								<div class="flex items-center">{$i18n.t('Disable All')}</div>
+							</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</div>
+				</Dropdown>
+			</div>
+
+			<div class="px-3 my-2" id="model-list">
+				{#if filteredModels.length > 0}
+					{#each filteredModels as model, modelIdx (`${model.id}-${modelIdx}`)}
+						<div
+							class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition {model
+								?.meta?.hidden
+								? 'opacity-50 dark:opacity-50'
+								: ''}"
+							id="model-item-{model.id}"
+						>
+							<button
+								class=" flex flex-1 text-left space-x-3.5 cursor-pointer w-full"
+								type="button"
+								on:click={() => {
+									selectedModelId = model.id;
+								}}
+							>
+								<div class=" self-center w-8">
+									<div
+										class=" rounded-full object-cover {(model?.is_active ?? true)
+											? ''
+											: 'opacity-50 dark:opacity-50'} "
+									>
+										<img
+											src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}`}
+											alt="modelfile profile"
+											class=" rounded-full w-full h-auto object-cover"
+										/>
+									</div>
+								</div>
+
+								<div
+									class=" flex-1 self-center {(model?.is_active ?? true) ? '' : 'text-gray-500'}"
+								>
+									<Tooltip
+										content={marked.parse(
+											!!model?.meta?.description
+												? model?.meta?.description
+												: model?.ollama?.digest
+													? `${model?.ollama?.digest} **(${model?.ollama?.modified_at})**`
+													: model.id
+										)}
+										className=" w-fit"
+										placement="top-start"
+									>
+										<div class="  font-semibold line-clamp-1">{model.name}</div>
+									</Tooltip>
+									<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1 text-gray-500">
+										<span class=" line-clamp-1">
+											{!!model?.meta?.description
+												? model?.meta?.description
+												: model?.ollama?.digest
+													? `${model.id} (${model?.ollama?.digest})`
+													: model.id}
+										</span>
+									</div>
+								</div>
+							</button>
+							<div class="flex flex-row gap-0.5 items-center self-center">
+								{#if shiftKey}
+									<Tooltip content={model?.meta?.hidden ? $i18n.t('Show') : $i18n.t('Hide')}>
+										<button
+											class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+											type="button"
+											on:click={() => {
+												hideModelHandler(model);
+											}}
+										>
+											{#if model?.meta?.hidden}
+												<EyeSlash />
+											{:else}
+												<Eye />
+											{/if}
+										</button>
+									</Tooltip>
+								{:else}
 									<button
 										class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 										type="button"
 										on:click={() => {
-											hideModelHandler(model);
+											selectedModelId = model.id;
 										}}
 									>
-										{#if model?.meta?.hidden}
+										<svg
-											<EyeSlash />
+											xmlns="http://www.w3.org/2000/svg"
-										{:else}
+											fill="none"
-											<Eye />
+											viewBox="0 0 24 24"
-										{/if}
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+											/>
+										</svg>
 									</button>
-								</Tooltip>
-							{:else}
-								<button
-									class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-									type="button"
-									on:click={() => {
-										selectedModelId = model.id;
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
-										/>
-									</svg>
-								</button>
 
-								<ModelMenu
+									<ModelMenu
-									user={$user}
+										user={$user}
-									{model}
+										{model}
-									exportHandler={() => {
+										exportHandler={() => {
-										exportModelHandler(model);
+											exportModelHandler(model);
-									}}
+										}}
-									hideHandler={() => {
+										hideHandler={() => {
-										hideModelHandler(model);
+											hideModelHandler(model);
-									}}
+										}}
-									pinModelHandler={() => {
+										pinModelHandler={() => {
-										pinModelHandler(model.id);
+											pinModelHandler(model.id);
-									}}
+										}}
-									copyLinkHandler={() => {
+										copyLinkHandler={() => {
-										copyLinkHandler(model);
+											copyLinkHandler(model);
-									}}
+										}}
-									cloneHandler={() => {
+										cloneHandler={() => {
-										cloneHandler(model);
+											cloneHandler(model);
-									}}
+										}}
-									onClose={() => {}}
+										onClose={() => {}}
-								>
-									<button
-										class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-										type="button"
 									>
-										<EllipsisHorizontal className="size-5" />
+										<button
-									</button>
+											class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								</ModelMenu>
+											type="button"
+										>
+											<EllipsisHorizontal className="size-5" />
+										</button>
+									</ModelMenu>
 
-								<div class="ml-1">
+									<div class="ml-1">
-									<Tooltip
+										<Tooltip
-										content={(model?.is_active ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}
+											content={(model?.is_active ?? true)
-									>
+												? $i18n.t('Enabled')
-										<Switch
+												: $i18n.t('Disabled')}
-											bind:state={model.is_active}
+										>
-											on:change={async () => {
+											<Switch
-												toggleModelHandler(model);
+												bind:state={model.is_active}
-											}}
+												on:change={async () => {
-										/>
+													toggleModelHandler(model);
-									</Tooltip>
+												}}
-								</div>
+											/>
-							{/if}
+										</Tooltip>
+									</div>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
+						<div class="max-w-md text-center">
+							<div class=" text-3xl mb-3">😕</div>
+							<div class=" text-lg font-medium mb-1">{$i18n.t('No models found')}</div>
+							<div class=" text-gray-500 text-center text-xs">
+								{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
+							</div>
 						</div>
 					</div>
-				{/each}
+				{/if}
-			{:else}
+			</div>
-				<div class="flex flex-col items-center justify-center w-full h-20">
-					<div class="text-gray-500 dark:text-gray-400 text-xs">
-						{$i18n.t('No models found')}
-					</div>
-				</div>
-			{/if}
 		</div>
 
 		{#if $user?.role === 'admin'}

src/lib/components/admin/Settings/Models/AdminViewSelector.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Select } from 'bits-ui';
+	import { getContext } from 'svelte';
+
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let value = '';
+	export let placeholder = $i18n.t('Select view');
+	export let onChange: (value: string) => void = () => {};
+
+	const items = [
+		{ value: '', label: $i18n.t('All') },
+		{ value: 'enabled', label: $i18n.t('Enabled') },
+		{ value: 'disabled', label: $i18n.t('Disabled') },
+		{ value: 'visible', label: $i18n.t('Visible') },
+		{ value: 'hidden', label: $i18n.t('Hidden') }
+	];
+</script>
+
+<Select.Root
+	selected={items.find((item) => item.value === value)}
+	{items}
+	onSelectedChange={(selectedItem) => {
+		value = selectedItem.value;
+		onChange(value);
+	}}
+>
+	<Select.Trigger
+		class="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl"
+		aria-label={placeholder}
+	>
+		<Select.Value
+			class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
+			{placeholder}
+		/>
+		<ChevronDown className="size-3.5" strokeWidth="2.5" />
+	</Select.Trigger>
+
+	<Select.Content
+		class="rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
+		sameWidth={false}
+		align="start"
+	>
+		{#each items as item}
+			<Select.Item
+				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				value={item.value}
+				label={item.label}
+			>
+				{item.label}
+
+				{#if value === item.value}
+					<div class="ml-auto">
+						<Check />
+					</div>
+				{/if}
+			</Select.Item>
+		{/each}
+	</Select.Content>
+</Select.Root>