feat: replace settings with a full page

app/components/Sidenav/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { DialogType } from '~/composables/useDialog';
-
 const { close: closeSidebar, open, sidebarWidth, resize, saveWidth } = useSidebar();
 const route = useRoute();
 
@@ -37,8 +35,6 @@ const onFocusOut = (e: FocusEvent) => {
     }
 };
 
-const { openDialog } = useDialog();
-
 const onResizeStart = (event: MouseEvent) => {
     isResizing.value = true;
     startX.value = event.clientX;
@@ -97,8 +93,18 @@ const navKind = computed(() => {
     if (route.path === '/') return 'home';
     if (route.path.startsWith('/agent/')) return 'agent';
     if (route.path === '/resources') return 'resources';
+    if (route.path.startsWith('/settings')) return 'settings';
     return null;
 });
+
+// remember where the user was so the settings back button can return there
+const settingsReturnTo = useState('settings:returnTo', () => '/');
+
+watch(() => route.fullPath, (path) => {
+    if (!path.startsWith('/settings')) {
+        settingsReturnTo.value = path;
+    }
+}, { immediate: true });
 </script>
 
 <template>
@@ -126,6 +132,7 @@ const navKind = computed(() => {
                         <SidenavHeader v-if="navKind === 'home'" />
                         <SidenavHeaderResources v-else-if="navKind === 'resources'" />
                         <SidenavHeaderAgent v-else-if="navKind === 'agent'" />
+                        <SidenavHeaderSettings v-else-if="navKind === 'settings'" />
 
                         <div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
                             <div :class="[
@@ -158,15 +165,18 @@ const navKind = computed(() => {
                     <SidenavNavHome v-if="navKind === 'home'" />
                     <SidenavNavAgent v-else-if="navKind === 'agent'" />
                     <SidenavNavResources v-else-if="navKind === 'resources'" />
+                    <SidenavNavSettings v-else-if="navKind === 'settings'" />
                 </div>
 
                 <div class="flex justify-between pt-2 z-25 bg-[var(--bg-base)] pb-2">
                     <div class="flex">
                         <Tooltip :hotkey="['ctrl', ',']">
-                            <button @click="openDialog(DialogType.Settings)"
-                                class="flex items-center justify-center h-9 w-9 md:h-7 md:w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
+                            <NuxtLink to="/settings" aria-label="Settings" :class="[
+                                'flex items-center justify-center h-9 w-9 md:h-7 md:w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors active:text-[var(--text-primary)]',
+                                navKind === 'settings' ? 'text-[var(--text-primary)] bg-[var(--color-hover)]' : 'text-[var(--text-secondary)]',
+                            ]">
                                 <span class="i-mynaui-cog-four text-6 md:text-5"></span>
-                            </button>
+                            </NuxtLink>
                         </Tooltip>
                     </div>