refactor: useUserSettings uses global state to reduce db calls

app/components/Attachment/Display.vue

@@ -4,7 +4,7 @@ const props = defineProps<{
         id: string;
         name: string;
         mimeType: string;
-        status: 'pending' | 'uploaded';
+        status?: 'pending' | 'uploaded';
         url: string;
     }
 }>();

app/components/ChatInput.vue

@@ -93,8 +93,6 @@ const handleSubmit = () => {
         return;
     }
 
-    console.log(inputValue.value);
-
     if (inputValue.value.content.trim() || inputValue.value.fileIds.length > 0) {
         emit('submit', inputValue.value, selectedModel.value);
         inputValue.value = { content: '', fileIds: [] };

app/components/Dialog/QuickSwitcher.vue

@@ -75,7 +75,6 @@ const handleKeyDown = (e: KeyboardEvent) => {
 
     // 60% of the window height aka 60vh
     const itemsPerPage = Math.floor(((window.innerHeight * 0.6) - (inputRef.value?.parentElement?.clientHeight || 0)) / 42);
-    console.log(itemsPerPage);
 
     switch (e.key) {
         case 'ArrowDown':

app/components/Dropdown.vue

@@ -29,10 +29,6 @@ const toggle = () => (isOpen.value = !isOpen.value);
 const close = () => (isOpen.value = false);
 
 defineExpose({ close });
-
-onMounted(() => {
-    console.log(triggerRef.value);
-})
 </script>
 
 <template>

app/components/FileSelector.vue

@@ -75,8 +75,6 @@ const handleFileChange = (e: Event) => {
     const inputFiles = (e.target! as HTMLInputElement).files;
     if (inputFiles === null) return;
 
-    console.log(inputFiles);
-
     rawFiles.value = [...inputFiles].map(file => ({
         name: file.name,
         type: file.type,

app/components/Settings/AIServiceProvider.vue

@@ -2,7 +2,6 @@
 import { sortByReleaseDate } from '~/utils/sort';
 import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/utils/crypto';
 import { providerBaseUrls, type Model } from '~/types/model';
-import { useSettings } from '~/composables/useSettings';
 import ModelItem from './ModelItem.vue';
 import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
 const triplit = useTriplitClient();

app/components/Settings/AppearanceSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { colorScheme, settings, updateSettings } = await useUserSettings();
+const { colorScheme, settings, updateSettings } = useUserSettings();
 
 const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
 const neutrals = ['zinc', 'slate', 'obsidian'];

app/components/Settings/GeneralSettings.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+const props = defineProps<{
+    params?: string;
+}>();
+
 defineEmits(['navigate']);
 </script>
 

app/components/Settings/ProviderSettings.vue

@@ -5,6 +5,10 @@ import { providerIcons } from '~/utils/model-mapping';
 const triplit = useTriplitClient();
 const { providers } = useModels();
 
+const props = defineProps<{
+    params?: string;
+}>();
+
 if (providers.value === undefined) throw new Error('Providers not loaded');
 
 // TODO: sometimes this code can create duplicate providers

app/components/Settings/SystemAssistants.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import type { ModelWithProvider } from '~/composables/useModels';
 
-const { providers, allModels } = await useModels();
-const { settings, updateSettings } = await useUserSettings();
+const props = defineProps<{
+    params?: string;
+}>();
+
+const { providers, allModels } = useModels();
+const { settings, updateSettings } = useUserSettings();
 
 const toggle = async (key: string) => {
     const current = (settings.value.systemAssistants as any)[key];

app/components/ThemeSwitcher.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 
 type Theme = 'light' | 'dark' | 'system';
 
-const { updateSettings, settings } = await useUserSettings();
+const { updateSettings, settings } = useUserSettings();
 
 const selectTheme = (colorScheme: Theme) => {
     updateSettings({ appearance: { colorScheme } });