♻️ refactor: optimize state management, switch to @tanstack/vue-virtual, and improve performance

- Centralize `useAgents` and `useModels` state within the Nuxt app context to prevent data leaks and improve initialization.
- Migrate virtualization from `vue-virtual-scroller` to `@tanstack/vue-virtual` with new `RowVirtualizerFixed` and `RowVirtualizerDynamic` components.
- Upgrade Nuxt to v4.3.1 and remove `@vue-macros/nuxt`.
- Replace `big.js` with an optimized custom `lshDecimal` string manipulation logic for pricing calculations in the provider API.
- Implement automatic focus redirection in `ChatInput` to capture standard keyboard input.
- Refactor Sidenav and Settings components to utilize virtualization for long lists (topics, agents, models).
- Enhance theme colors and mobile experience. More work to come on both of these.

app/components/Settings/AIServiceProvider.vue

@@ -4,12 +4,13 @@ import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/
 import { providerBaseUrls, type Model } from '~/types/model';
 import { useSettings } from '~/composables/useSettings';
 import ModelItem from './ModelItem.vue';
-// @ts-ignore
-import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
+import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
 const triplit = useTriplitClient();
 
 const { pageParams } = useSettings();
-const { providers, unsubscribe: unsubscribeModels } = await useModels();
+const { providers } = useModels();
+
+const scrollContainerRef = ref<HTMLDivElement | null>(null);
 
 const provider = computed(() => {
     if (pageParams.value.length === 0) return null;
@@ -29,9 +30,16 @@ const modelSearch = ref('');
 
 watch(pageParams, () => {
     if (pageParams.value.length === 0) return;
+    console.log(scrollContainerRef.value);
     apiKey.value = provider.value?.config.apiKey ?? '';
     apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';
     modelSearch.value = '';
+
+    nextTick(() => {
+        if (scrollContainerRef.value) {
+            scrollContainerRef.value.scrollTo({ top: 0, behavior: 'instant' });
+        }
+    });
 })
 
 const decryptApiKey = async () => {
@@ -142,7 +150,8 @@ const fetchModels = async () => {
         }
 
         // delete models that are not in the API response and are not custom models
-        const apiModelIds = new Set(existingModelsMap.values().map((m: any) => m.externalId));
+        const apiModelIds = new Set(modelsData.models.values().map((m: any) => m.id));
+        console.log("apiModelIds", apiModelIds);
         const toDelete = (provider.value?.models || []).filter((m: any) =>
             !m.isCustom && !apiModelIds.has(m.externalId)
         );
@@ -177,15 +186,13 @@ const disabledModels = computed(() =>
         .sort(sortByReleaseDate)
 )
 
-onUnmounted(() => {
-    unsubscribeModels?.();
-});
-
 defineEmits(['navigate']);
 </script>
 
 <template>
-    <div class="flex flex-col gap-4 mt-4" v-if="provider">
+    <div ref="scrollContainerRef"
+        class="flex flex-col gap-4 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]"
+        v-if="provider">
         <div class="flex flex-row justify-between gap-16">
             <label class="whitespace-nowrap" for="provider-api-key">Enabled</label>
             <Slider :checked="provider.enabled" @click.stop="toggleProvider()" />
@@ -208,7 +215,7 @@ defineEmits(['navigate']);
         <div class="flex flex-row justify-between gap-16">
             <label class="whitespace-nowrap" for="provider-api-key">API Proxy URL</label>
             <div class="text-sm font-mono flex flex-row rounded-md bg-[var(--bg-container)] items-center gap-1 w-7/10">
-                <input :placeholder="providerBaseUrls[provider!.type] ?? ''"
+                <input :placeholder="provider.type ? providerBaseUrls[provider.type] ?? '' : ''"
                     class="placeholder:text-[var(--text-tertiary)] w-full px-2 py-1 bg-transparent" type="text"
                     id="provider-proxy-url" :value="apiProxyUrl"
                     @input="updateProxyUrl(($event.target! as HTMLInputElement).value)" />
@@ -266,37 +273,24 @@ defineEmits(['navigate']);
                         Enabled
                     </span>
                     <div class="flex flex-col gap-1">
-                        <DynamicScroller class="scroller" page-mode :min-item-size="64" :buffer="640"
-                            :items="enabledModels" key-field="id">
-                            <template v-slot="{ item: model, index, active }">
-                                <DynamicScrollerItem :item="model" :active="active" :size-dependencies="[
-                                    model.name,
-                                    model.externalId,
-                                    modelSearch
-                                ]" :data-index="index">
-                                    <ModelItem :model="model" />
-                                </DynamicScrollerItem>
+                        <RowVirtualizerDynamic :items="enabledModels" key-field="id"
+                            :scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
+                            <template v-slot="{ item: model }">
+                                <ModelItem :model="model" />
                             </template>
-                        </DynamicScroller>
+                        </RowVirtualizerDynamic>
+                    </div>
 
-                        <span v-if="disabledModels.length > 0" class="text-sm text-[var(--text-secondary)]">
-                            Disabled
-                        </span>
-                        <div class="flex flex-col gap-1">
-                            <DynamicScroller class="scroller" page-mode :min-item-size="64" :buffer="640"
-                                :items="disabledModels" key-field="id">
-                                <template v-slot="{ item: model, index, active }">
-                                    <DynamicScrollerItem :item="model" :active="active" :size-dependencies="[
-                                        model.name,
-                                        model.externalId,
-                                        model.cost,
-                                        modelSearch
-                                    ]" :data-index="index">
-                                        <ModelItem :model="model" />
-                                    </DynamicScrollerItem>
-                                </template>
-                            </DynamicScroller>
-                        </div>
+                    <span v-if="disabledModels.length > 0" class="text-sm text-[var(--text-secondary)]">
+                        Disabled
+                    </span>
+                    <div class="flex flex-col gap-1">
+                        <RowVirtualizerDynamic :items="disabledModels" key-field="id"
+                            :scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
+                            <template v-slot="{ item: model }">
+                                <ModelItem :model="model" />
+                            </template>
+                        </RowVirtualizerDynamic>
                     </div>
                 </div>
             </ClientOnly>