feat: add message editing

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.
2026-02-24 16:37:21 +00:00
parent fc5aedcedd
commit f6dc4c1ee9
8 changed files with 259 additions and 136 deletions
@@ -0,0 +1,96 @@
+<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>