AI-admin: katalog add-form på egen rad slik at den ikke klippes

- «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>
This commit is contained in:
vegard 2026-03-16 07:05:54 +01:00
parent 2d17a632cd
commit 7c81e80742

View file

@ -865,36 +865,35 @@
<span class="cat-col-price">{formatPrice(model.prompt_price_per_m)}</span> <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-price">{formatPrice(model.completion_price_per_m)}</span>
<span class="cat-col-add"> <span class="cat-col-add">
{#if addingFromCatalog === model.id} <button
{@const modelKeys = availableKeysForModel(model)} class="toggle-btn"
<div class="catalog-add-form"> onclick={() => { addingFromCatalog = addingFromCatalog === model.id ? null : model.id; catalogAddAlias = ''; catalogAddKey = ''; }}
<select bind:value={catalogAddAlias}> >{addingFromCatalog === model.id ? '&#x2717;' : 'Legg til &rarr;'}</button>
<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}
</span> </span>
</div> </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} {/each}
</div> </div>
{/if} {/if}
@ -1546,15 +1545,25 @@
padding: 0.15rem 0.25rem; padding: 0.15rem 0.25rem;
} }
.catalog-add-form { .catalog-add-row {
display: flex; display: flex;
gap: 0.25rem; gap: 0.5rem;
align-items: center; align-items: center;
padding: 0.5rem 0.75rem;
background: #1a1d2e;
border-left: 3px solid #4ade80;
font-size: 0.8rem;
} }
.catalog-add-form select { .catalog-add-row select {
font-size: 0.7rem; font-size: 0.75rem;
padding: 0.15rem 0.25rem; padding: 0.2rem 0.3rem;
}
.catalog-add-label {
color: #8b92a5;
white-space: nowrap;
font-size: 0.75rem;
} }
/* Alias table */ /* Alias table */