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>