♻️ 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/composables/useModels.ts

@@ -1,68 +1,78 @@
-import { schema } from '#triplit/schema';
+// // composables/useModels.ts
 import type { Entity } from '@triplit/client';
+import type schema from '#triplit/schema';
 
-export type ModelWithProvider = Entity<typeof schema, 'models'> & {
-    provider: Entity<typeof schema, 'providers'>;
-};
+type Provider = Entity<typeof schema, 'providers'>;
+type Model = Entity<typeof schema, 'models'>;
 
-export type ProviderWithModels = Entity<typeof schema, 'providers'> & {
-    models: Entity<typeof schema, 'models'>[];
-};
+export interface ModelWithProvider extends Model {
+    provider: Provider;
+}
 
-export const useModels = async () => {
-    const nuxtApp = useNuxtApp() as any;
+export interface ProviderWithModels extends Provider {
+    models: Model[];
+}
 
-    if (!nuxtApp._modelsSubscription) {
-        if (!nuxtApp._modelsPromise) {
-            const triplit = useTriplitClient();
+export const useModels = () => {
+    const nuxtApp = useNuxtApp();
+    const triplit = useTriplitClient();
 
-            const providersQuery = triplit
-                .query('providers')
-                .Include('models');
-
-            const start = Date.now();
-            nuxtApp._modelsPromise = useQuery('providers', triplit, providersQuery).then((sub) => {
-                nuxtApp._modelsSubscription = sub;
-                console.log("fetching providers took", Date.now() - start);
-                return sub;
-            });
-        }
-        await nuxtApp._modelsPromise;
+    if (!nuxtApp._modelsState) {
+        nuxtApp._modelsState = {
+            providers: shallowRef([]),
+            isReady: ref(false)
+        };
     }
 
-    const { results: providers } = nuxtApp._modelsSubscription;
 
-    if (!nuxtApp._allModels) {
-        nuxtApp._allModels = computed<ModelWithProvider[]>(() => {
-            if (!providers.value) return [];
+    const state = nuxtApp._modelsState as {
+        providers: Ref<ProviderWithModels[]>;
+        initPromise: Promise<void> | null;
+    };
 
-            const list: ModelWithProvider[] = [];
+    const init = () => {
+        if (state.initPromise) return;
 
-            for (const provider of (providers.value as ProviderWithModels[])) {
-                if (!provider.enabled) continue;
+        state.initPromise = (async () => {
+            const query = triplit.query('providers').Include('models');
 
-                for (const model of provider.models) {
-                    if (!model.enabled) continue;
+            const { results } = await useQuery('providers', triplit, query)
+            watch(results, (newProviders) => {
+                state.providers.value = newProviders as unknown as ProviderWithModels[] || [];
+            }, { immediate: true, flush: 'sync' });
+        })();
+    };
 
-                    list.push({
-                        ...model,
-                        provider
-                    } as unknown as ModelWithProvider);
-                }
+    const allModels = computed<ModelWithProvider[]>(() => {
+        const result: ModelWithProvider[] = [];
+        for (const provider of state.providers.value) {
+            if (!provider.enabled) continue;
+            for (const model of provider.models || []) {
+                if (!model.enabled) continue;
+                result.push({ ...model, provider });
             }
-            return list;
-        });
-    }
+        }
+        return result;
+    });
 
-    const getFirstAvailableModel = (): ModelWithProvider | null => {
-        if (nuxtApp._allModels.value.length === 0) return null;
-        return nuxtApp._allModels.value[0]!;
+    const getModel = (id: string): ModelWithProvider | undefined => {
+        return allModels.value.find((model) => model.id === id);
+    };
+
+    const getProvider = (id: string): ProviderWithModels | undefined => {
+        return state.providers.value.find((provider) => provider.id === id);
+    };
+
+    const getFirstAvailableModel = () => {
+        return allModels.value[0] ?? null;
     };
 
     return {
-        providers: providers as Ref<ProviderWithModels[]>,
-        allModels: nuxtApp._allModels as ComputedRef<ModelWithProvider[]>,
-        getFirstAvailableModel,
-        unsubscribe: () => { },
+        init,
+        providers: state.providers,
+        allModels,
+        getModel,
+        getProvider,
+        getFirstAvailableModel
     };
-};
+};