zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: useUserSettings uses global state to reduce db calls

Browse Source
This commit is contained in:
Zoe
2026-03-01 20:29:37 -06:00
parent e0914b684a
commit 5a35976ce0
18 changed files with 128 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
+1 -1
View File
@@ -2,7 +2,7 @@
import '~/assets/css/reset.css';
import '~/assets/css/base.css';
const { accent, neutral, hinting } = await useUserSettings();
const { accent, neutral, hinting } = useUserSettings();
// by default, disable hinting
if (Number.isNaN(Number(hinting.value))) hinting.value = '0';
app/components/Attachment/Display.vue
+1 -1
View File
@@ -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
-2
View File
@@ -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
-1
View File
@@ -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
-4
View File
@@ -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
-2
View File
@@ -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
-1
View File
@@ -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 -1
View File
@@ -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
+4
View File
@@ -1,4 +1,8 @@
<script setup lang="ts">
const props = defineProps<{
params?: string;
}>();
defineEmits(['navigate']);
</script>
app/components/Settings/ProviderSettings.vue
+4
View File
@@ -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
+6 -2
View File
@@ -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
+1 -1
View File
@@ -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 } });
app/composables/useChat.ts
+1 -1
View File
@@ -448,7 +448,7 @@ export const useChat = (agentId: string) => {
FailedToGenerate,
}
const autoRename = async (topicId: string, prompt: string): Promise<Result<string, AutoRenameError>> => {
const { settings } = await useUserSettings();
const { settings } = useUserSettings();
console.log(settings.value);
app/composables/useModels.ts
-1
View File
@@ -1,4 +1,3 @@
// // composables/useModels.ts
import type { Entity } from '@triplit/client';
import type schema from '#triplit/schema';
app/composables/useUserSettings.ts
+105 -106
View File
@@ -1,112 +1,109 @@
import { schema } from '#triplit/schema';
import { type Entity } from '@triplit/client';
import { computed, watch } from 'vue';
import { computed, watch, ref, type Ref } from 'vue';
// TODO: most of this code is generated by gemini 3 flash with fixups,
// but its still bad code, so I'm going to clean it up later
export const useUserSettings = async () => {
const { user, loggedIn } = useAuth();
type UserSettings = Entity<typeof schema, 'settings'>;
interface UserSettingsState {
accent: Ref<string>;
neutral: Ref<string>;
hinting: Ref<string>;
colorSchemePreference: Ref<'light' | 'dark' | 'system'>;
colorSchemeClass: Ref<'light' | 'dark' | undefined>;
remoteSettings: Ref<UserSettings | null>;
initPromise: Promise<void> | null;
}
export const useUserSettings = () => {
const nuxtApp = useNuxtApp();
const triplit = useTriplitClient();
const { user, loggedIn } = useAuth();
const accent = useState('theme:accent', () => 'violet');
const neutral = useState('theme:neutral', () => 'zinc');
const hinting = useState('theme:hinting', () => '0');
if (!nuxtApp._userSettingsState) {
nuxtApp._userSettingsState = {
accent: ref('violet'),
neutral: ref('zinc'),
hinting: ref('0'),
colorSchemePreference: ref<'light' | 'dark' | 'system'>('system'),
colorSchemeClass: ref<undefined | 'light' | 'dark'>(undefined),
remoteSettings: ref<UserSettings | null>(null),
initPromise: null,
} as UserSettingsState;
}
const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
preference: useState('theme:colorScheme', () => 'system' as 'light' | 'dark' | 'system'),
value: computed(() => {
if (colorScheme.preference.value === 'system') {
if (import.meta.client) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const state = nuxtApp._userSettingsState as UserSettingsState;
return prefersDark ? 'dark' : 'light';
const init = () => {
if (state.initPromise) return state.initPromise;
state.initPromise = (async () => {
const { results } = await useQuery('settings', triplit, triplit.query('settings'));
watch(results, (val) => {
if (val && val.length > 0) {
state.remoteSettings.value = val[0] as UserSettings;
} else {
state.remoteSettings.value = null;
}
}, { immediate: true, deep: true });
return 'dark';
}
watch(state.remoteSettings, (newSettings) => {
if (!newSettings?.appearance) return;
const { appearance } = newSettings;
return colorScheme.preference.value as 'light' | 'dark';
}),
class: ref<undefined | 'light' | 'dark'>(undefined)
}
if (appearance.colorScheme) {
state.colorSchemePreference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
}
if (appearance.accent) {
state.accent.value = appearance.accent;
}
if (appearance.neutral) {
state.neutral.value = appearance.neutral;
}
if (appearance.hinting !== undefined) {
state.hinting.value = String(appearance.hinting);
}
}, { immediate: true, deep: true });
let listeningToColorScheme = false;
const changeSystemColorScheme = (e: MediaQueryListEvent) => {
if (colorScheme.preference.value !== 'system') return;
colorScheme.class.value = e.matches ? 'dark' : 'light';
}
watch(colorScheme.preference, () => {
if (colorScheme.preference.value === 'system') {
if (import.meta.client) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (!listeningToColorScheme) {
listeningToColorScheme = true;
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeSystemColorScheme);
}
colorScheme.class.value = prefersDark ? 'dark' : 'light';
return;
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const update = () => {
if (state.colorSchemePreference.value === 'system') {
state.colorSchemeClass.value = mediaQuery.matches ? 'dark' : 'light';
} else {
state.colorSchemeClass.value = state.colorSchemePreference.value as 'dark' | 'light';
}
};
mediaQuery.addEventListener('change', update);
watch(state.colorSchemePreference, update, { immediate: true });
} else {
watch(state.colorSchemePreference, (pref) => {
state.colorSchemeClass.value = pref === 'system' ? 'dark' : (pref as 'dark' | 'light');
}, { immediate: true });
}
})();
if (listeningToColorScheme) {
listeningToColorScheme = false;
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeSystemColorScheme);
return state.initPromise;
};
const colorSchemeValue = computed(() => {
if (state.colorSchemePreference.value === 'system') {
if (import.meta.client) {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
// fallback to dark on the server
colorScheme.class.value = 'dark';
return;
return 'dark';
}
return state.colorSchemePreference.value as 'dark' | 'light';
});
colorScheme.class.value = colorScheme.preference.value as 'light' | 'dark';
}, { immediate: true });
const start = Date.now();
const remoteSettings = useState<Entity<typeof schema, 'settings'> | null>('user:settings', () => null);
const { results } = await useQuery('settings', triplit, triplit.query('settings'))
console.log("fetching settings took", Date.now() - start);
watch(results, (val) => {
if (!val) {
remoteSettings.value = null;
return;
}
remoteSettings.value = val[0] as any;
}, { immediate: true, deep: true })
watch(remoteSettings, (newSettings) => {
if (!newSettings?.appearance) return;
const { appearance } = newSettings;
if (appearance.colorScheme) {
colorScheme.preference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
}
if (appearance.accent) {
accent.value = appearance.accent;
}
if (appearance.neutral) {
neutral.value = appearance.neutral;
}
if (appearance.hinting !== undefined) {
hinting.value = String(appearance.hinting);
}
}, { immediate: true, deep: true });
// Effective settings with defaults for backwards compatibility
const settings = computed(() => {
const remote = remoteSettings.value;
const remote = state.remoteSettings.value;
return {
appearance: {
colorScheme: remote?.appearance?.colorScheme ?? colorScheme.preference.value,
accent: remote?.appearance?.accent ?? accent.value,
neutral: remote?.appearance?.neutral ?? neutral.value,
hinting: remote?.appearance?.hinting ?? Number(hinting.value),
colorScheme: remote?.appearance?.colorScheme ?? state.colorSchemePreference.value,
accent: remote?.appearance?.accent ?? state.accent.value,
neutral: remote?.appearance?.neutral ?? state.neutral.value,
hinting: remote?.appearance?.hinting ?? Number(state.hinting.value),
fontSize: remote?.appearance?.fontSize ?? 'medium',
},
systemAssistants: {
@@ -119,9 +116,6 @@ export const useUserSettings = async () => {
};
});
/**
* Update settings both locally and on the server
*/
const updateSettings = async (updates: {
appearance?: {
colorScheme?: 'light' | 'dark' | 'system';
@@ -139,23 +133,23 @@ export const useUserSettings = async () => {
};
}) => {
if (updates.appearance) {
if (updates.appearance.colorScheme) colorScheme.preference.value = updates.appearance.colorScheme;
if (updates.appearance.accent) accent.value = updates.appearance.accent;
if (updates.appearance.neutral) neutral.value = updates.appearance.neutral;
if (updates.appearance.hinting !== undefined) hinting.value = String(updates.appearance.hinting);
if (updates.appearance.colorScheme) state.colorSchemePreference.value = updates.appearance.colorScheme;
if (updates.appearance.accent) state.accent.value = updates.appearance.accent;
if (updates.appearance.neutral) state.neutral.value = updates.appearance.neutral;
if (updates.appearance.hinting !== undefined) state.hinting.value = String(updates.appearance.hinting);
}
if (!loggedIn.value || !user.value?.id) return;
const current = remoteSettings.value;
const current = state.remoteSettings.value;
if (!current) {
await triplit.insert('settings', {
userId: user.value.id,
appearance: {
colorScheme: colorScheme.preference.value,
accent: accent.value,
neutral: neutral.value,
hinting: Number(hinting.value),
colorScheme: state.colorSchemePreference.value,
accent: state.accent.value,
neutral: state.neutral.value,
hinting: Number(state.hinting.value),
...(updates.appearance || {})
},
systemAssistants: {
@@ -187,12 +181,17 @@ export const useUserSettings = async () => {
};
return {
init,
settings,
remoteSettings,
remoteSettings: state.remoteSettings,
updateSettings,
accent,
neutral,
hinting,
colorScheme
accent: state.accent,
neutral: state.neutral,
hinting: state.hinting,
colorScheme: {
preference: state.colorSchemePreference,
value: colorSchemeValue,
class: state.colorSchemeClass
}
};
};
app/layouts/auth.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
// TODO: when a user changes the color scheme and then signs in/up, the color
// scheme will not be updated in the user's settings.
const { colorScheme } = await useUserSettings();
const { colorScheme } = useUserSettings();
useHead({
htmlAttrs: {
app/layouts/default.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import Dialog from '~/components/Dialog/index.vue';
const { colorScheme } = await useUserSettings();
const { colorScheme } = useUserSettings();
const { toggle: toggleSidebar } = useSidebar();
const { addShortcut } = useKeyboardShortcuts();
app/plugins/global-data.ts
+2 -1
View File
@@ -3,7 +3,8 @@ export default defineNuxtPlugin(async () => {
// Warm up the caches
await Promise.all([
useAgents().init(),
useModels().init()
useModels().init(),
useUserSettings().init()
]);
console.log('Global data ready');