prevent interaction when elements are masked out

This commit is contained in:
Aidan Bleser 2025-06-16 06:18:40 -05:00
parent 8f0b8676fc
commit d5dbab44fa
2 changed files with 5 additions and 4 deletions

View file

@ -45,7 +45,7 @@
>
{#each data.openRouterModels as model (model.id)}
{@const enabled = enabledModels.data?.[`${Provider.OpenRouter}:${model.id}`] !== undefined}
<ModelCard provider={Provider.OpenRouter} {model} {enabled} />
<ModelCard provider={Provider.OpenRouter} {model} {enabled} disabled={!hasOpenRouterKey} />
{/each}
</div>
{#if !hasOpenRouterKey}

View file

@ -17,9 +17,10 @@
provider: Provider;
model: Model;
enabled?: boolean;
disabled?: boolean;
};
let { provider, model, enabled = false }: Props = $props();
let { provider, model, enabled = false, disabled = false }: Props = $props();
const client = useConvexClient();
@ -58,8 +59,7 @@
<Card.Header>
<div class="flex items-center justify-between">
<Card.Title>{model.name}</Card.Title>
<!-- TODO: make this actually work -->
<Switch bind:value={() => enabled, toggleEnabled} />
<Switch bind:value={() => enabled, toggleEnabled} {disabled} />
</div>
<Card.Description
>{showMore ? fullDescription : (shortDescription ?? fullDescription)}</Card.Description
@ -69,6 +69,7 @@
type="button"
class="text-muted-foreground w-fit text-start text-xs"
onclick={() => (showMore = !showMore)}
{disabled}
>
{showMore ? 'Show less' : 'Show more'}
</button>