feat: quick switcher

app/components/Dialog/index.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import Textbox from './Textbox.vue';
 import Settings from './Settings.vue';
+import QuickSwitcher from './QuickSwitcher.vue';
 
 import { DialogType } from '~/composables/useDialog';
 
 const { open, page, data, close, confirm, openDialog } = useDialog();
 const { addShortcut } = useKeyboardShortcuts();
 
-const unbindShortcut = addShortcut(['ctrl', ','], () => {
+const unbindSettingsShortcut = addShortcut(['ctrl', ','], (event) => {
+    event.preventDefault();
+    event.stopPropagation();
     openDialog(DialogType.Settings);
 });
 
+const unbindQuickSwitcherShortcut = addShortcut(['ctrl', 'k'], (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    openDialog(DialogType.QuickSwitcher);
+});
+
 const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
         close();
@@ -29,7 +38,8 @@ onUnmounted(() => {
     if (open.value) {
         document.body.removeEventListener('keydown', handleKeyDown);
     }
-    unbindShortcut();
+    unbindSettingsShortcut();
+    unbindQuickSwitcherShortcut();
 });
 </script>
 
@@ -44,12 +54,14 @@ onUnmounted(() => {
         enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
         enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
         <div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
-            <div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)]
-        overflow-hidden flex max-h-[90vh]">
+            <div
+                class="absolute max-w-6xl bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
                 <KeepAlive>
                     <Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
 
                     <Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
+
+                    <QuickSwitcher v-else-if="page === DialogType.QuickSwitcher" @close="close" />
                 </KeepAlive>
             </div>
         </div>