From 59f09f3e6f6da9e1728247a05b69e8fe3401e0e1 Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Wed, 2 Sep 2026 12:40:30 +0200 Subject: [PATCH] ui : polish ModelId badges, reasoning panel and discover details Hide the ModelId badge and icon wrappers when empty, normalize its indentation, and tighten the reasoning panel and discover detail spacing. Assisted-by: pi:zai-org/GLM-5.3 --- .../lib/components/app/models/ModelId.svelte | 123 ++++++++++-------- .../app/models/ModelsSelectorDropdown.svelte | 2 +- .../ModelsSelectorReasoningPanel.svelte | 6 +- ...coverModelDetailsDownloadOptionsRow.svelte | 2 +- .../ModelsDiscoverModelDetailsReadme.svelte | 4 +- 5 files changed, 74 insertions(+), 63 deletions(-) diff --git a/tools/ui/src/lib/components/app/models/ModelId.svelte b/tools/ui/src/lib/components/app/models/ModelId.svelte index 341a807b04..6715eaf9e0 100644 --- a/tools/ui/src/lib/components/app/models/ModelId.svelte +++ b/tools/ui/src/lib/components/app/models/ModelId.svelte @@ -88,6 +88,15 @@ let primaryAlias = $derived(uniqueAliases.length === 1 ? uniqueAliases[0] : null); let displayName = $derived(primaryAlias ?? parsed.modelName ?? modelId); + + let hasBadges = $derived( + parsed.sidecar || + ((parsed.params || params) && !hideParameters) || + (parsed.quantization && !resolvedHideQuantization) || + primaryAlias || + uniqueAliases.length > 1 || + (uniqueTags.length > 0 && !resolvedHideTags) + ); {#if resolvedShowRaw} @@ -166,47 +175,49 @@ {/if} - - {#if parsed.sidecar} - - {parsed.sidecar} - - {/if} - - {#if (parsed.params || params) && !hideParameters} - - {parsed.params ?? params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''} - - {/if} - - {#each uniqueDraftSidecars as sidecar (sidecar)} - - {sidecar} - - {/each} - - {#if parsed.quantization && !resolvedHideQuantization} - - {parsed.quantization} - - {/if} - - {#if primaryAlias} - {#if primaryAlias !== parsed.modelName} - {parsed.modelName ?? modelId} + {#if hasBadges} + + {#if parsed.sidecar} + + {parsed.sidecar} + {/if} - {:else if uniqueAliases.length > 1} - {#each uniqueAliases as alias (alias)} - {alias} - {/each} - {/if} - {#if uniqueTags.length > 0 && !resolvedHideTags} - {#each uniqueTags as tag (tag)} - {tag} + {#if (parsed.params || params) && !hideParameters} + + {parsed.params ?? params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''} + + {/if} + + {#each uniqueDraftSidecars as sidecar (sidecar)} + + {sidecar} + {/each} - {/if} - + + {#if parsed.quantization && !resolvedHideQuantization} + + {parsed.quantization} + + {/if} + + {#if primaryAlias} + {#if primaryAlias !== parsed.modelName} + {parsed.modelName ?? modelId} + {/if} + {:else if uniqueAliases.length > 1} + {#each uniqueAliases as alias (alias)} + {alias} + {/each} + {/if} + + {#if uniqueTags.length > 0 && !resolvedHideTags} + {#each uniqueTags as tag (tag)} + {tag} + {/each} + {/if} + + {/if} {/snippet} - - {#if iconsOnNewLine}{@render capabilityIcons()}{/if} + {#if iconsOnNewLine || contextLength || sizeRange} + + {#if iconsOnNewLine}{@render capabilityIcons()}{/if} - {#if contextLength} - - + {#if contextLength} + + - {formatParameters(contextLength)} - - {/if} + {formatParameters(contextLength)} + + {/if} - {#if sizeRange} - - + {#if sizeRange} + + - {HuggingFaceService.formatSizeRange(sizeRange.min, sizeRange.max)} - - {/if} - + {HuggingFaceService.formatSizeRange(sizeRange.min, sizeRange.max)} + + {/if} + + {/if} {/if} diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte index 7b667e42bf..a94900cf9b 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte @@ -355,7 +355,7 @@ class={[ `inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`, !ms.isCurrentModelInCache - ? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400' + ? 'bg-red-400/10 text-red-400! hover:bg-red-400/20 hover:text-red-400' : forceForegroundText ? 'text-foreground' : ms.isHighlightedCurrentModelActive diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte index d0285a4390..005678a60e 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte @@ -20,7 +20,7 @@ through the `child` snippet to keep Collapsible.Trigger's native button. closeOnSelect keeps the menu open while the effort list is being used. --> {#snippet child({ props })} @@ -36,10 +36,10 @@ {/if} - + Reasoning - + {reasoning.currentEffort} diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte index 294ea1fa88..caf3932a12 100644 --- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte @@ -19,7 +19,7 @@ let draftMemGb = $derived(draftFile ? minMemoryTierGb(draftFile.size ?? 0) : null); -
+
{#if bitDepth === 99} Other diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte index 0d14b699a9..1fcd36dd96 100644 --- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte @@ -9,9 +9,7 @@ {#if readme} -
-

README

- +
{/if}