From eb5c80776a859759ddac6a82b114c85b476764fe Mon Sep 17 00:00:00 2001
From: Pascal <admin@serveurperso.com>
Date: Sun, 15 Mar 2026 18:52:14 +0100
Subject: [PATCH] webui: add "Available models" section header in model list

---
 .../app/models/ModelsSelector.svelte          | 26 ++++++++++++++-----
 .../app/models/ModelsSelectorSheet.svelte     | 26 ++++++++++++++-----
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
index 6c05fee9df..14737f6472 100644
--- a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
@@ -166,6 +166,13 @@
 	let showModelDialog = $state(false);
 	let infoModelId = $state<string | null>(null);
 
+	// key of the first "available" (non-loaded, non-favourite) group
+	// used to render the "Available models" separator exactly once
+	let firstAvailableOrgKey = $derived.by(() => {
+		const g = groupedFilteredOptions.find((g) => !g.isLoadedGroup && !g.isFavouritesGroup);
+		return g ? (g.orgName ?? '') : null;
+	});
+
 	function handleInfoClick(modelName: string) {
 		infoModelId = modelName;
 		showModelDialog = true;
@@ -433,12 +440,19 @@
 									<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
 										Favourite models
 									</p>
-								{:else if group.orgName}
-									<p
-										class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
-									>
-										{group.orgName}
-									</p>
+								{:else}
+									{#if (group.orgName ?? '') === firstAvailableOrgKey}
+										<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
+											Available models
+										</p>
+									{/if}
+									{#if group.orgName}
+										<p
+											class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
+										>
+											{group.orgName}
+										</p>
+									{/if}
 								{/if}
 
 								{#each group.items as { option, flatIndex } (group.isLoadedGroup ? `loaded-${option.id}` : group.isFavouritesGroup ? `fav-${option.id}` : option.id)}
diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte
index 38d470ea4d..f54a548696 100644
--- a/tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte
@@ -154,6 +154,13 @@
 	let showModelDialog = $state(false);
 	let infoModelId = $state<string | null>(null);
 
+	// key of the first "available" (non-loaded, non-favourite) group
+	// used to render the "Available models" separator exactly once
+	let firstAvailableOrgKey = $derived.by(() => {
+		const g = groupedFilteredOptions.find((g) => !g.isLoadedGroup && !g.isFavouritesGroup);
+		return g ? (g.orgName ?? '') : null;
+	});
+
 	function handleInfoClick(modelName: string) {
 		infoModelId = modelName;
 		showModelDialog = true;
@@ -354,12 +361,19 @@
 									<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
 										Favourite models
 									</p>
-								{:else if group.orgName}
-									<p
-										class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
-									>
-										{group.orgName}
-									</p>
+								{:else}
+									{#if (group.orgName ?? '') === firstAvailableOrgKey}
+										<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
+											Available models
+										</p>
+									{/if}
+									{#if group.orgName}
+										<p
+											class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
+										>
+											{group.orgName}
+										</p>
+									{/if}
 								{/if}
 
 								{#each group.items as { option } (group.isLoadedGroup ? `loaded-${option.id}` : group.isFavouritesGroup ? `fav-${option.id}` : option.id)}