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

fix: dropdown settings buttons | fix: improve model selector

Browse Source 
I should have split this into two commits, but I found the issue with the
settings buttons *after* I changed how the model selector worked, so its
all in this single commit.
This commit is contained in:
Zoe
2026-02-25 16:12:51 +00:00
parent f6dc4c1ee9
commit 62f1fe1c27
8 changed files with 157 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Dialog/Settings.vue
+17 -10
View File
@@ -32,19 +32,24 @@ const PAGES_CONFIG = {
},
} as const;
const { currentPage, pageParams, setPage, close } = useSettings();
const props = defineProps<{
page: keyof typeof PAGES_CONFIG;
params?: string;
}>();
const { close, setOptions } = useDialog();
const runtimePage = computed(() => {
// 1. Get the base config (e.g., 'providers' or 'general')
const config = PAGES_CONFIG[currentPage.value as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
const config = PAGES_CONFIG[props.page as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
// 2. Determine the actual component to show
let component = config.component;
let label = config.label as string;
if (currentPage.value === 'providers' && pageParams.value.length > 0) {
if (props.page === 'providers' && props.params) {
component = AIServiceProvider;
const providerId = pageParams.value[0];
const providerId = props.params;
const provider = providers.value!.find(p => p.id === providerId);
label = provider ? provider.name : 'Unknown Provider';
}
@@ -53,13 +58,13 @@ const runtimePage = computed(() => {
...config,
label,
component,
params: pageParams.value,
params: props.params,
} as {
label: string;
icon: string;
component: Component;
sidebar?: Component;
params: string[];
params: string;
};
});
</script>
@@ -68,10 +73,11 @@ const runtimePage = computed(() => {
<div class="p-2 flex w-full">
<nav class="w-64 flex flex-col gap-1 mr-2 overflow-y-auto">
<!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" @navigate="setPage" />
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar"
@navigate="(p: string, params?: string) => setOptions({ page: p, params })" :params="props.params" />
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setPage(id)"
:class="[currentPage === id ? 'bg-[var(--color-hover)]' : 'hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setOptions({ page: id })"
:class="[page === id ? 'bg-[var(--color-hover)]' : 'hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
<div class="flex items-center gap-2 max-w-full flex-1">
<Icon :name="config.icon" class="w-5 h-5" />
{{ config.label }}
@@ -90,7 +96,8 @@ const runtimePage = computed(() => {
<Icon name="mynaui:x-solid" />
</button>
</header>
<component @navigate="setPage" :is="runtimePage.component" />
<component @navigate="(p: string, params?: string) => setOptions({ page: p, params })"
:is="runtimePage.component" :params="props.params" />
</main>
</div>
</template>
app/components/Dialog/index.vue
+1 -1
View File
@@ -41,7 +41,7 @@ onUnmounted(() => {
<div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)]
overflow-hidden flex max-h-[90vh]">
<KeepAlive>
<Settings v-if="page === DialogType.Settings" />
<Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
<Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
</KeepAlive>
app/components/ModelSelector.vue
+111 -75
View File
@@ -5,25 +5,51 @@ import type schema from '#triplit/schema';
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
import { sortByReleaseDate } from '~/utils/sort';
const { setPage } = useSettings();
const { openDialog } = useDialog();
const { allModels } = await useModels();
const props = defineProps<{
providers: ProviderWithModels[];
}>();
const isOpen = ref(false);
const modelSelectorState = reactive({
open: false,
direction: 'up',
x: 0,
y: 0,
});
const selectedModel = defineModel<ModelWithProvider | null>();
const dropdownRef = ref<HTMLDivElement | null>(null);
const dropdownContentRef = ref<HTMLDivElement | null>(null);
const dropdownButton = ref<HTMLButtonElement | null>(null);
const searchInputRef = ref<HTMLInputElement | null>(null);
const dropdownDirection = ref<'up' | 'down'>('up');
const dropdownMaxHeight = ref<number | undefined>(undefined);
const navigatingWithKeyboard = ref(false);
const focusedOptionId = ref<string | null>(null);
const toggleDropdown = () => {
if (modelSelectorState.open) {
closeDropdown();
return;
}
const buttonRect = dropdownButton.value?.getBoundingClientRect();
if (!buttonRect) return;
modelSelectorState.x = buttonRect.left;
if (modelSelectorState.direction === 'up') {
const pageHeight = document.body.scrollHeight;
modelSelectorState.y = (pageHeight - buttonRect.top) + 6;
} else {
modelSelectorState.y = buttonRect.bottom - 6;
}
modelSelectorState.open = true;
setTimeout(() => {
document.body.addEventListener('click', closeDropdown);
});
}
const findContainer = (startingElement: HTMLElement): HTMLElement | null => {
let container: HTMLElement | null = startingElement;
while (container) {
@@ -48,10 +74,10 @@ const calculateDropdownPosition = () => {
const spaceBelow = containerRect.bottom - buttonRect.bottom;
if (spaceAbove > spaceBelow) {
dropdownDirection.value = 'up';
modelSelectorState.direction = 'up';
dropdownMaxHeight.value = Math.min(spaceAbove - 20, 460);
} else {
dropdownDirection.value = 'down';
modelSelectorState.direction = 'down';
dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460);
}
};
@@ -119,7 +145,7 @@ watch(() => props.providers, () => {
}
})
watch(isOpen, (open) => {
watch(() => modelSelectorState.open, (open) => {
if (open) {
calculateDropdownPosition();
nextTick(() => {
@@ -132,7 +158,9 @@ watch(isOpen, (open) => {
});
const closeDropdown = () => {
isOpen.value = false;
document.body.removeEventListener('click', closeDropdown);
modelSelectorState.open = false;
navigatingWithKeyboard.value = false;
};
@@ -186,88 +214,96 @@ const handleSearchKeyDown = (event: KeyboardEvent) => {
break;
}
};
useClickOutside(dropdownRef, closeDropdown);
</script>
<template>
<div ref="dropdownRef" class="relative">
<div role="button" @click="isOpen = !isOpen" ref="dropdownButton"
class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
:class="[
isOpen
? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
]">
<ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
:model-id="selectedModel.externalId" size="22" />
<span class="max-w-[150px] truncate">
{{ selectedModel ? selectedModel.name : 'Select a model' }}
</span>
<Icon name="mynaui:chevron-down" class="text-3.5 transition-transform duration-200"
:class="{ 'rotate-180': isOpen }" />
</div>
<div role="button" @click="toggleDropdown()" ref="dropdownButton"
class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
:class="[
modelSelectorState.open
? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
]">
<ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
:model-id="selectedModel.externalId" size="22" />
<span class="max-w-fulltruncate">
{{ selectedModel ? selectedModel.name : 'Select a model' }}
</span>
<Icon name="mynaui:chevron-down" class="text-3.5 transition-transform duration-200"
:class="{ 'rotate-180': modelSelectorState.open }" />
</div>
<Teleport to="body">
<Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1">
<div v-if="isOpen" ref="dropdownContentRef" role="listbox" aria-label="Select model"
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :class="[
dropdownDirection === 'up' ? 'bottom-full mb-2 origin-bottom' : 'top-full mt-2 origin-top',
]" :style="{ maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px', height: 'auto' }"
class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden z-50">
<div>
<div class="relative">
<Icon name="mynaui:search"
class="absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]" />
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
@keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
</div>
</div>
<div class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden">
<div v-if="filteredProviders.length === 0"
class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]">
No models found
<KeepAlive>
<div v-if="modelSelectorState.open" ref="dropdownContentRef" role="listbox" aria-label="Select model"
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :style="{
position: 'absolute',
top: modelSelectorState.direction === 'down' ? `${modelSelectorState.y}px` : '',
bottom: modelSelectorState.direction === 'up' ? `${modelSelectorState.y}px` : '',
left: `${modelSelectorState.x}px`,
maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px',
height: 'auto'
}"
class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden z-50"
:class="modelSelectorState.direction === 'up' ? 'transform-origin-bottom-center' : 'transform-origin-top-center'">
<div>
<div class="relative">
<Icon name="mynaui:search"
class="absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]" />
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
@keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
</div>
</div>
<div v-for="provider in filteredProviders" :key="provider.id" class="mb-2">
<div v-if="provider.models.filter(m => m.enabled).length > 0"
class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
{{ provider.name }}
<button @click="isOpen = true; setPage('providers', provider.id)"
class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:cog-four" class="text-4" />
</button>
<div
class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden">
<div v-if="filteredProviders.length === 0"
class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]">
No models found
</div>
<button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)"
:key="model.id" :id="`model-option-${model.id}`" role="option"
:aria-selected="focusedOptionId === model.id"
@click="selectModel(model, provider); isOpen = false"
class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150"
:class="{
'bg-[var(--color-hover)]': selectedModel?.id === model.id,
'ring-2 ring-inset ring-[var(--color-accent)]': focusedOptionId === model.id && navigatingWithKeyboard
}">
<ModelInfo :model="model" size="medium" />
<div v-for="provider in filteredProviders" :key="provider.id" class="mb-2">
<div v-if="provider.models.filter(m => m.enabled).length > 0"
class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
{{ provider.name }}
<button
@click="modelSelectorState.open = true; openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:cog-four" class="text-4" />
</button>
</div>
<button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)"
:key="model.id" :id="`model-option-${model.id}`" role="option"
:aria-selected="focusedOptionId === model.id"
@click="selectModel(model, provider); modelSelectorState.open = false"
class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150"
:class="{
'bg-[var(--color-hover)]': selectedModel?.id === model.id,
'ring-2 ring-inset ring-[var(--color-accent)]': focusedOptionId === model.id && navigatingWithKeyboard
}">
<ModelInfo :model="model" size="medium" />
</button>
</div>
</div>
<div class="p-1 border-t border-[var(--color-border)]">
<button
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
@click="modelSelectorState.open = false; openDialog(DialogType.Settings, undefined, { page: 'providers' });">
<Icon name="mynaui:cog-four" class="text-4.5" />
<span>Manage Providers</span>
<Icon name="mynaui:arrow-right" class="text-4 ml-auto" />
</button>
</div>
</div>
<div class="p-1 border-t border-[var(--color-border)]">
<button
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
@click="isOpen = false; setPage('providers');">
<Icon name="mynaui:cog-four" class="text-4.5" />
<span>Manage Providers</span>
<Icon name="mynaui:arrow-right" class="text-4 ml-auto" />
</button>
</div>
</div>
</KeepAlive>
</Transition>
</div>
</Teleport>
</template>
app/components/Settings/AIServiceProvider.vue
+8 -5
View File
@@ -7,14 +7,17 @@ import ModelItem from './ModelItem.vue';
import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
const triplit = useTriplitClient();
const { pageParams } = useSettings();
const props = defineProps<{
params?: string;
}>();
const { providers } = useModels();
const scrollContainerRef = ref<HTMLDivElement | null>(null);
const provider = computed(() => {
if (pageParams.value.length === 0) return null;
return providers.value!.find(p => p.id === pageParams.value[0]);
if (props.params === undefined) return null;
return providers.value!.find(p => p.id === props.params);
});
watch(provider, async () => {
@@ -28,8 +31,8 @@ const apiKey = ref('');
const apiProxyUrl = ref(provider.value?.config.apiProxyUrl ?? '');
const modelSearch = ref('');
watch(pageParams, () => {
if (pageParams.value.length === 0) return;
watch(() => props.params, () => {
if (props.params === undefined) return;
console.log(scrollContainerRef.value);
apiKey.value = provider.value?.config.apiKey ?? '';
apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';
app/components/Settings/ProviderSidebar.vue
+6 -4
View File
@@ -1,8 +1,10 @@
<script setup lang="ts">
import { providerIcons } from '~/utils/model-mapping';
const { pageParams } = useSettings();
const { providers } = await useModels();
defineProps<{
params?: string;
}>();
const { providers } = useModels();
defineEmits(['navigate']);
</script>
@@ -22,7 +24,7 @@ defineEmits(['navigate']);
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div>
<button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)"
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === pageParams[0] ? 'bg-[var(--color-hover)]' : '']">
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
<div class="flex items-center gap-2">
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
class="w-4 h-4 text-[var(--text-primary)]" />
@@ -34,7 +36,7 @@ defineEmits(['navigate']);
<button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
@click="$emit('navigate', 'providers', p.id)"
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === pageParams[0] ? 'bg-[var(--color-hover)]' : '']">
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
<div class="flex items-center gap-2">
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
class="w-4 h-4 text-[var(--text-primary)]" />