feat: replace settings with a full page

2026-10-08 08:06:06 -05:00
parent 2b9f8d64d7
commit ff33e9c573
21 changed files with 503 additions and 245 deletions
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { providerIcons } from '~/utils/model-mapping';
+
+const { providers, updateProvider } = await useModels();
+
+if (providers.value === undefined) throw new Error('Providers not loaded');
+
+const toggleProvider = async (id: string) => {
+    const provider = providers.value!.find(p => p.id === id);
+    if (!provider) return;
+
+    await updateProvider(provider.id, {
+        enabled: !provider.enabled,
+    });
+};
+
+const openProvider = (id: string) => navigateTo(`/settings/providers/${id}`);
+</script>
+
+<template>
+    <div
+        class="flex flex-col gap-1 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
+        <h2 class="text-lg font-semibold flex items-center gap-2">
+            Enabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
+                {{providers?.filter(p => p.enabled).length}}
+            </span>
+        </h2>
+        <div
+            class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
+            <button @click="openProvider(p.id)" v-for="p in providers?.filter(p => p.enabled)"
+                :key="p.id"
+                class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] @hover:border-[var(--color-border-active)]">
+                <div class="flex flex-col flex-grow">
+                    <div class="flex items-center gap-2 mb-2">
+                        <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
+                            class="w-8 h-8 text-[var(--text-primary)]" />
+                        <h3 class="text-md font-semibold text-start case-capital">{{ p.name }}</h3>
+                    </div>
+                    <hr class="border-t border-[var(--color-border)]" />
+                </div>
+                <div class="flex items-center justify-end">
+                    <Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
+                </div>
+            </button>
+        </div>
+
+        <h2 class="text-lg font-semibold flex items-center gap-2">
+            Disabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
+                {{providers?.filter(p => !p.enabled).length}}
+            </span>
+        </h2>
+        <div
+            class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
+            <button @click="openProvider(p.id)" v-for="p in providers?.filter(p => !p.enabled)"
+                :key="p.id"
+                class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] @hover:border-[var(--color-border-active)]">
+                <div class="flex flex-col flex-grow">
+                    <div class="flex items-center gap-2 mb-2">
+                        <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
+                            class="w-8 h-8 text-[var(--text-primary)]" />
+                        <h3 class="text-md font-semibold text-start case-capital">{{ p.name }}</h3>
+                    </div>
+                    <hr class="border-t border-[var(--color-border)]" />
+                </div>
+                <div class="flex items-center justify-end">
+                    <Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
+                </div>
+            </button>
+        </div>
+    </div>
+</template>