♻️ 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>

app/components/Settings/AppearanceSettings.vue

@@ -22,7 +22,8 @@ defineEmits(['navigate']);
 </script>
 
 <template>
-    <div class="flex flex-col gap-6 mt-4">
+    <div
+        class="flex flex-col gap-6 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
         <div class="flex flex-row items-center justify-between gap-2">
             <h4 class="font-medium">Theme</h4>
             <div class="flex gap-2">

app/components/Settings/Dialog.vue

@@ -6,7 +6,7 @@ import SystemAssistants from './SystemAssistants.vue';
 import AppearanceSettings from './AppearanceSettings.vue';
 import AIServiceProvider from './AIServiceProvider.vue';
 
-const { providers, unsubscribe: unsubscribeModels } = await useModels();
+const { providers } = useModels();
 
 const PAGES_CONFIG = {
     general: {
@@ -81,7 +81,6 @@ onUnmounted(() => {
     if (open.value) {
         document.body.removeEventListener('keydown', handleKeyDown);
     }
-    unsubscribeModels?.();
 });
 </script>
 
@@ -114,8 +113,8 @@ onUnmounted(() => {
                 <!-- DYNAMIC CONTENT -->
                 <main class="flex-1 flex flex-col overflow-hidden">
                     <div
-                        class="flex flex-col flex-1 p-3 bg-[var(--bg-surface)] overflow-y-auto border rounded-lg border-[var(--color-border)]">
-                        <header class="flex items-center justify-between pl-2 pb-2 ">
+                        class="max-h-full h-full flex flex-col flex-1 px-3 bg-[var(--bg-surface)] border rounded-lg border-[var(--color-border)]">
+                        <header class="flex items-center justify-between pl-2 pb-2 pt-2 ">
                             <h2 class="text-lg font-semibold m-0 capitalize">{{ runtimePage.label }}</h2>
                             <button
                                 class="hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"

app/components/Settings/ModelItem.vue

@@ -1,7 +1,5 @@
-<script lang="ts" setup>
-const props = defineProps<{
-    model: ModelWithProvider;
-}>();
+<script setup lang="ts">
+const props = defineProps<{ model: ModelWithProvider; }>();
 </script>
 
 <template>

app/components/Settings/ProviderSettings.vue

@@ -3,7 +3,7 @@ import { Providers } from '~/types/model';
 import { providerIcons } from '~/utils/model-mapping';
 
 const triplit = useTriplitClient();
-const { providers, unsubscribe: unsubscribeModels } = await useModels();
+const { providers } = useModels();
 
 if (providers.value === undefined) throw new Error('Providers not loaded');
 
@@ -37,15 +37,12 @@ const toggleProvider = async (id: string) => {
     });
 };
 
-onUnmounted(() => {
-    unsubscribeModels?.();
-});
-
 defineEmits(['navigate']);
 </script>
 
 <template>
-    <div class="flex flex-col gap-1">
+    <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}}

app/components/Settings/ProviderSidebar.vue

@@ -2,17 +2,13 @@
 import { providerIcons } from '~/utils/model-mapping';
 
 const { pageParams } = useSettings();
-const { providers, unsubscribe: unsubscribeModels } = await useModels();
-
-onUnmounted(() => {
-    unsubscribeModels?.();
-});
+const { providers } = await useModels();
 
 defineEmits(['navigate']);
 </script>
 
 <template>
-    <div class="flex flex-col gap-1">
+    <div class="flex flex-col gap-1 overflow-auto">
         <button @click="$emit('navigate', 'general')"
             class="flex items-center gap-2 p-2 rounded-lg text-sm hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
             <Icon name="mynaui:chevron-left" class="text-4" /> Back to General

app/components/Settings/SystemAssistants.vue

@@ -39,7 +39,8 @@ defineEmits(['navigate']);
 </script>
 
 <template>
-    <div class="flex flex-col gap-4 flex-grow">
+    <div
+        class="flex flex-col gap-4 py-4 flex-grow overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
         <div class="flex flex-col" v-for="(systemAssistant, key) in settings.systemAssistants" :key="key">
             <label :for="`slider-${key}`" class="flex justify-between gap-4 items-center">
                 <h4 class="capitalize">{{ key }}</h4>