Refactor model icons and badges layout
Browse filesMoved tool and multimodal support icons out of a nested flex container for cleaner layout and removed duplicate code. This improves readability and maintainability of the model badges section.
- src/routes/models/+page.svelte +16 -18
src/routes/models/+page.svelte
CHANGED
|
@@ -141,6 +141,22 @@
|
|
| 141 |
|
| 142 |
<!-- Icons and badges -->
|
| 143 |
<div class="flex flex-shrink-0 items-center gap-1.5">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 144 |
<button
|
| 145 |
type="button"
|
| 146 |
title="Model settings"
|
|
@@ -154,24 +170,6 @@
|
|
| 154 |
>
|
| 155 |
<LucideSettings class="size-3 sm:size-3.5" />
|
| 156 |
</button>
|
| 157 |
-
<div class="flex items-center gap-1.5">
|
| 158 |
-
{#if $settings.toolsOverrides?.[model.id] ?? (model as { supportsTools?: boolean }).supportsTools}
|
| 159 |
-
<div
|
| 160 |
-
title="This model supports tool calling (functions)."
|
| 161 |
-
class="rounded-md bg-purple-50 p-1.5 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400"
|
| 162 |
-
>
|
| 163 |
-
<LucideHammer class="size-3 sm:size-3.5" />
|
| 164 |
-
</div>
|
| 165 |
-
{/if}
|
| 166 |
-
{#if $settings.multimodalOverrides?.[model.id] ?? model.multimodal}
|
| 167 |
-
<div
|
| 168 |
-
title="This model is multimodal and supports image inputs natively."
|
| 169 |
-
class="rounded-md bg-blue-50 p-1.5 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
|
| 170 |
-
>
|
| 171 |
-
<LucideImage class="size-3 sm:size-3.5" />
|
| 172 |
-
</div>
|
| 173 |
-
{/if}
|
| 174 |
-
</div>
|
| 175 |
{#if isActive}
|
| 176 |
<span
|
| 177 |
class="rounded-full bg-black px-2.5 py-1 text-xs font-bold text-white shadow-md dark:bg-white dark:text-black"
|
|
|
|
| 141 |
|
| 142 |
<!-- Icons and badges -->
|
| 143 |
<div class="flex flex-shrink-0 items-center gap-1.5">
|
| 144 |
+
{#if $settings.toolsOverrides?.[model.id] ?? (model as { supportsTools?: boolean }).supportsTools}
|
| 145 |
+
<div
|
| 146 |
+
title="This model supports tool calling (functions)."
|
| 147 |
+
class="rounded-md bg-purple-50 p-1.5 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400"
|
| 148 |
+
>
|
| 149 |
+
<LucideHammer class="size-3 sm:size-3.5" />
|
| 150 |
+
</div>
|
| 151 |
+
{/if}
|
| 152 |
+
{#if $settings.multimodalOverrides?.[model.id] ?? model.multimodal}
|
| 153 |
+
<div
|
| 154 |
+
title="This model is multimodal and supports image inputs natively."
|
| 155 |
+
class="rounded-md bg-blue-50 p-1.5 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
|
| 156 |
+
>
|
| 157 |
+
<LucideImage class="size-3 sm:size-3.5" />
|
| 158 |
+
</div>
|
| 159 |
+
{/if}
|
| 160 |
<button
|
| 161 |
type="button"
|
| 162 |
title="Model settings"
|
|
|
|
| 170 |
>
|
| 171 |
<LucideSettings class="size-3 sm:size-3.5" />
|
| 172 |
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 173 |
{#if isActive}
|
| 174 |
<span
|
| 175 |
class="rounded-full bg-black px-2.5 py-1 text-xs font-bold text-white shadow-md dark:bg-white dark:text-black"
|