From 7c81e80742fa61eddfd3461862ad3299c0f8fb32 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Mon, 16 Mar 2026 07:05:54 +0100
Subject: [PATCH] =?UTF-8?q?AI-admin:=20katalog=20add-form=20p=C3=A5=20egen?=
 =?UTF-8?q?=20rad=20slik=20at=20den=20ikke=20klippes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- «Legg til»-formen vises nå som egen rad under modellen med grønn kant
- Alias + nøkkel-dropdowns og bekreft-knapp har god plass
- Erstatter den sammenpressede inline-formen som ble klippet i smal kolonne

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/routes/server-admin/ai/+page.svelte | 75 ++++++++++++---------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/web/src/routes/server-admin/ai/+page.svelte b/web/src/routes/server-admin/ai/+page.svelte
index f4b76f9..fcab35b 100644
--- a/web/src/routes/server-admin/ai/+page.svelte
+++ b/web/src/routes/server-admin/ai/+page.svelte
@@ -865,36 +865,35 @@
 										<span class="cat-col-price">{formatPrice(model.prompt_price_per_m)}</span>
 										<span class="cat-col-price">{formatPrice(model.completion_price_per_m)}</span>
 										<span class="cat-col-add">
-											{#if addingFromCatalog === model.id}
-												{@const modelKeys = availableKeysForModel(model)}
-												<div class="catalog-add-form">
-													<select bind:value={catalogAddAlias}>
-														<option value="">Alias...</option>
-														{#each aliases as a}
-															<option value={a.id}>{a.alias}</option>
-														{/each}
-													</select>
-													<select bind:value={catalogAddKey}>
-														<option value="">Nøkkel...</option>
-														{#each modelKeys as k}
-															<option value={k.name}>{k.label}</option>
-														{/each}
-													</select>
-													<button
-														class="add-btn"
-														disabled={!catalogAddAlias || !catalogAddKey}
-														onclick={() => addFromCatalog(model, catalogAddAlias, catalogAddKey)}
-													>OK</button>
-													<button class="toggle-btn" onclick={() => { addingFromCatalog = null; }}>&#x2717;</button>
-												</div>
-											{:else}
-												<button
-													class="toggle-btn"
-													onclick={() => { addingFromCatalog = model.id; catalogAddAlias = ''; catalogAddKey = ''; }}
-												>Legg til &rarr;</button>
-											{/if}
+											<button
+												class="toggle-btn"
+												onclick={() => { addingFromCatalog = addingFromCatalog === model.id ? null : model.id; catalogAddAlias = ''; catalogAddKey = ''; }}
+											>{addingFromCatalog === model.id ? '&#x2717;' : 'Legg til &rarr;'}</button>
 										</span>
 									</div>
+									{#if addingFromCatalog === model.id}
+										{@const modelKeys = availableKeysForModel(model)}
+										<div class="catalog-add-row">
+											<span class="catalog-add-label">Legg til <strong>{model.name}</strong>:</span>
+											<select bind:value={catalogAddAlias}>
+												<option value="">Velg alias...</option>
+												{#each aliases as a}
+													<option value={a.id}>{a.alias}</option>
+												{/each}
+											</select>
+											<select bind:value={catalogAddKey}>
+												<option value="">Velg nøkkel...</option>
+												{#each modelKeys as k}
+													<option value={k.name}>{k.label}{k.is_enabled ? '' : ' (av)'}</option>
+												{/each}
+											</select>
+											<button
+												class="add-btn"
+												disabled={!catalogAddAlias || !catalogAddKey}
+												onclick={() => addFromCatalog(model, catalogAddAlias, catalogAddKey)}
+											>Legg til</button>
+										</div>
+									{/if}
 								{/each}
 							</div>
 						{/if}
@@ -1546,15 +1545,25 @@
 		padding: 0.15rem 0.25rem;
 	}
 
-	.catalog-add-form {
+	.catalog-add-row {
 		display: flex;
-		gap: 0.25rem;
+		gap: 0.5rem;
 		align-items: center;
+		padding: 0.5rem 0.75rem;
+		background: #1a1d2e;
+		border-left: 3px solid #4ade80;
+		font-size: 0.8rem;
 	}
 
-	.catalog-add-form select {
-		font-size: 0.7rem;
-		padding: 0.15rem 0.25rem;
+	.catalog-add-row select {
+		font-size: 0.75rem;
+		padding: 0.2rem 0.3rem;
+	}
+
+	.catalog-add-label {
+		color: #8b92a5;
+		white-space: nowrap;
+		font-size: 0.75rem;
 	}
 
 	/* Alias table */