zoeissleeping
f6dc4c1ee9
This commit adds message editing as a feature. To accomplish this, the settings dialog was refactored into a singleton and now the message edit and settings use the singleton where appropriate.
97 lines
3.6 KiB
Vue
97 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import GeneralSettings from '~/components/Settings/GeneralSettings.vue';
|
|
import ProviderSettings from '~/components/Settings/ProviderSettings.vue';
|
|
import ProviderSidebar from '~/components/Settings/ProviderSidebar.vue';
|
|
import SystemAssistants from '~/components/Settings/SystemAssistants.vue';
|
|
import AppearanceSettings from '~/components/Settings/AppearanceSettings.vue';
|
|
import AIServiceProvider from '~/components/Settings/AIServiceProvider.vue';
|
|
|
|
const { providers } = useModels();
|
|
|
|
const PAGES_CONFIG = {
|
|
general: {
|
|
label: 'General',
|
|
icon: 'mynaui:cog-four',
|
|
component: GeneralSettings
|
|
},
|
|
appearance: {
|
|
label: 'Appearance',
|
|
icon: 'tabler:palette',
|
|
component: AppearanceSettings
|
|
},
|
|
providers: {
|
|
label: 'AI Providers',
|
|
icon: 'mynaui:api',
|
|
component: ProviderSettings,
|
|
sidebar: ProviderSidebar
|
|
},
|
|
systemAssistants: {
|
|
label: 'System Assistants',
|
|
icon: 'mynaui:sparkles',
|
|
component: SystemAssistants
|
|
},
|
|
} as const;
|
|
|
|
const { currentPage, pageParams, setPage, close } = useSettings();
|
|
|
|
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;
|
|
|
|
// 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) {
|
|
component = AIServiceProvider;
|
|
const providerId = pageParams.value[0];
|
|
const provider = providers.value!.find(p => p.id === providerId);
|
|
label = provider ? provider.name : 'Unknown Provider';
|
|
}
|
|
|
|
return {
|
|
...config,
|
|
label,
|
|
component,
|
|
params: pageParams.value,
|
|
} as {
|
|
label: string;
|
|
icon: string;
|
|
component: Component;
|
|
sidebar?: Component;
|
|
params: string[];
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<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" />
|
|
|
|
<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']">
|
|
<div class="flex items-center gap-2 max-w-full flex-1">
|
|
<Icon :name="config.icon" class="w-5 h-5" />
|
|
{{ config.label }}
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- DYNAMIC CONTENT -->
|
|
<main
|
|
class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-lg border-[var(--color-border)]">
|
|
<header class="flex items-center justify-between pl-2 pb-2 pt-2 ">
|
|
<h2 class="text-lg font-semibold m-0 capitalize">{{ runtimePage.label }}</h2>
|
|
<button
|
|
class="hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"
|
|
@click="close">
|
|
<Icon name="mynaui:x-solid" />
|
|
</button>
|
|
</header>
|
|
<component @navigate="setPage" :is="runtimePage.component" />
|
|
</main>
|
|
</div>
|
|
</template>
|