fix: missing transitions to useDialog

app/components/Dialog/QuickSwitcher.vue

@@ -117,7 +117,7 @@ onMounted(() => { inputRef.value?.focus(); });
 
 <template>
     <div
-        class="flex flex-col w-[55vw] max-h-[60vh] bg-[var(--color-bg-elevated)] rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
+        class="flex flex-col w-[100vw] max-w-4xl max-h-[60vh] bg-[var(--color-bg-elevated)] rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
         <!-- Search -->
         <div class="p-4 border-b border-[var(--color-border)]">
             <input ref="inputRef" v-model="query" type="text" role="combobox" aria-autocomplete="list"

app/components/Sidenav/Header.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { DropdownItem } from '~/types/dropdown';
 import { assert } from '~~/utils/assert';
 
 const triplit = useTriplitClient();
@@ -19,7 +18,7 @@ watch(user, () => {
     cachedUser.value = user.value;
 })
 
-const { toggle: toggleSettings } = useSettings();
+const { openDialog } = useDialog();
 
 const { isHovered } = useSidenavContext();
 
@@ -63,7 +62,7 @@ useClickOutside(dropdownRef, () => {
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
             <div v-if="dropdownOpen"
                 class="w-full top-full text-sm mt-1 absolute z-50 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
-                <button @click="dropdownOpen = false; toggleSettings()"
+                <button @click="dropdownOpen = false; openDialog(DialogType.Settings)"
                     class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                     <span class="i-mynaui-cog-four text-4.5"></span>
                     <span>Settings</span>

app/composables/useSettings.ts

@@ -1,15 +1,8 @@
 export const useSettings = () => {
-    const open = useState<boolean>('settings:open', () => false);
     const currentPage = useState('settings-page', () => 'general');
     const pageParams = useState('settings-params', () => [] as string[]);
 
-    const toggle = () => {
-        open.value = !open.value;
-    };
-
     const setPage = (id: string, params?: string | string[]) => {
-        if (open.value === false) toggle();
-
         currentPage.value = id;
         if (params) {
             if (typeof params === 'string') {
@@ -21,10 +14,5 @@ export const useSettings = () => {
         }
     };
 
-    const close = () => {
-        open.value = false;
-        currentPage.value = 'page1';
-    };
-
-    return { open, currentPage, pageParams, toggle, setPage, close };
+    return { open, currentPage, pageParams, setPage };
 };