guide users to add api key before enabling models

eslint.config.js

@@ -20,7 +20,16 @@ export default ts.config(
 		languageOptions: {
 			globals: { ...globals.browser, ...globals.node },
 		},
-		rules: { 'no-undef': 'off' },
+		rules: {
+			'no-undef': 'off',
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					varsIgnorePattern: '^_',
+					argsIgnorePattern: '^_',
+				},
+			],
+		},
 	},
 	{
 		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],

src/lib/cache/cached-query.svelte.ts

@@ -80,7 +80,7 @@ export function invalidateQuery(query: FunctionReference<'query'>, queryArgs?: u
 	globalCache.delete(key);
 }
 
-export function invalidateQueriesMatching(pattern: string | RegExp): void {
+export function invalidateQueriesMatching(_pattern: string | RegExp): void {
 	// Note: This is a simplified implementation
 	// In a real implementation, you'd need to track all cache keys
 	console.warn(

src/routes/account/api-keys/provider-card.svelte

@@ -61,7 +61,7 @@
 
 <Card.Root>
 	<Card.Header>
-		<Card.Title>
+		<Card.Title id={provider}>
 			<KeyIcon class="inline size-4" />
 			{meta.title}
 		</Card.Title>

src/routes/account/models/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { api } from '$lib/backend/convex/_generated/api';
 	import { useCachedQuery } from '$lib/cache/cached-query.svelte';
+	import { Button } from '$lib/components/ui/button';
 	import { session } from '$lib/state/session.svelte';
 	import { Provider } from '$lib/types.js';
+	import { cn } from '$lib/utils/utils';
 	import ModelCard from './model-card.svelte';
 
 	let { data } = $props();
@@ -10,6 +12,15 @@
 	const enabledModels = useCachedQuery(api.user_enabled_models.get_enabled, {
 		user_id: session.current?.user.id ?? '',
 	});
+
+	const openRouterKeyQuery = useCachedQuery(api.user_keys.get, {
+		user_id: session.current?.user.id ?? '',
+		provider: Provider.OpenRouter,
+	});
+
+	const hasOpenRouterKey = $derived(
+		openRouterKeyQuery.data !== undefined && openRouterKeyQuery.data !== ''
+	);
 </script>
 
 <svelte:head>
@@ -22,8 +33,27 @@
 </h2>
 
 <div class="mt-8 flex flex-col gap-4">
-	{#each data.openRouterModels as model (model.id)}
-		{@const enabled = enabledModels.data?.[`${Provider.OpenRouter}:${model.id}`] !== undefined}
-		<ModelCard provider={Provider.OpenRouter} {model} {enabled} />
-	{/each}
+	<div>
+		<h3 class="text-lg font-bold">OpenRouter</h3>
+		<p class="text-muted-foreground text-sm">Easy access to over 400 models.</p>
+	</div>
+	<div class="relative">
+		<div
+			class={cn('flex flex-col gap-4 overflow-hidden', {
+				'pointer-events-none max-h-96 mask-b-from-0% mask-b-to-80%': !hasOpenRouterKey,
+			})}
+		>
+			{#each data.openRouterModels as model (model.id)}
+				{@const enabled = enabledModels.data?.[`${Provider.OpenRouter}:${model.id}`] !== undefined}
+				<ModelCard provider={Provider.OpenRouter} {model} {enabled} />
+			{/each}
+		</div>
+		{#if !hasOpenRouterKey}
+			<div
+				class="absolute bottom-10 left-0 z-10 flex w-full place-items-center justify-center gap-2"
+			>
+				<Button href="/account/api-keys#openrouter" class="w-fit">Add API Key</Button>
+			</div>
+		{/if}
+	</div>
 </div>