fix: dropdown settings buttons | fix: improve model selector

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
+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>
+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>