refactor(command): use dialog (#352)

app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 setupPageHeader()
 await setupI18n()
+provideGlobalCommands()
 
 // We want to trigger rerendering the page when account changes
 const key = computed(() => `${currentServer.value}:${currentUser.value?.account.id || ''}`)

components/command/CommandPanel.vue

@@ -1,31 +1,21 @@
 <script setup lang="ts">
 import type { CommandScope, QueryIndexedCommand } from '@/composables/command'
 
-const isMac = useIsMac()
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
 const registry = useCommandRegistry()
 
 const inputEl = $ref<HTMLInputElement>()
 const resultEl = $ref<HTMLDivElement>()
 
-let show = $ref(false)
-let scopes = $ref<CommandScope[]>([])
-let input = $ref('')
+const scopes = $ref<CommandScope[]>([])
+let input = $(commandPanelInput)
 
-// listen to ctrl+/ on windows/linux or cmd+/ on mac
-useEventListener('keydown', async (e: KeyboardEvent) => {
-  if (e.key === '/' && (isMac.value ? e.metaKey : e.ctrlKey)) {
-    e.preventDefault()
-    show = true
-    scopes = []
-    input = '>'
-    await nextTick()
+onMounted(() => {
   inputEl?.focus()
-  }
 })
-onKeyStroke('Escape', (e) => {
-  e.preventDefault()
-  show = false
-}, { target: document })
 
 const commandMode = $computed(() => input.startsWith('>'))
 const result = $computed(() => commandMode
@@ -42,7 +32,7 @@ const findItemEl = (index: number) =>
 const onCommandActivate = (item: QueryIndexedCommand) => {
   if (item.onActivate) {
     item.onActivate()
-    show = false
+    emit('close')
   }
   else if (item.onComplete) {
     scopes.push(item.onComplete())
@@ -137,36 +127,7 @@ const onKeyDown = (e: KeyboardEvent) => {
 </script>
 
 <template>
-  <!-- Overlay -->
-  <Transition
-    enter-active-class="transition duration-200 ease-out"
-    enter-from-class="transform opacity-0"
-    enter-to-class="transform opacity-100"
-    leave-active-class="transition duration-100 ease-in"
-    leave-from-class="transform opacity-100"
-    leave-to-class="transform opacity-0"
-  >
-    <div
-      v-if="show"
-      class="z-100 fixed inset-0 opacity-70 bg-base"
-      @click="show = false"
-    />
-  </Transition>
-
-  <!-- Panel -->
-  <Transition
-    enter-active-class="transition duration-65 ease-out"
-    enter-from-class="transform scale-95"
-    enter-to-class="transform scale-100"
-    leave-active-class="transition duration-100 ease-in"
-    leave-from-class="transform scale-100"
-    leave-to-class="transform scale-95"
-  >
-    <div v-if="show" class="z-100 fixed inset-0 grid place-items-center pointer-events-none">
-      <div
-        class="flex flex-col w-50vw h-50vh rounded-md bg-base shadow-lg pointer-events-auto"
-        border="1 base"
-      >
+  <div class="flex flex-col w-50vw max-w-180 h-50vh max-h-120">
     <!-- Input -->
     <label class="flex mx-3 my-1 items-center">
       <div mx-1 i-ri:search-line />
@@ -248,6 +209,4 @@ const onKeyDown = (e: KeyboardEvent) => {
       <CommandKey name="Ctrl+/" /> to activate command mode.
     </div>
   </div>
-    </div>
-  </Transition>
 </template>

components/command/CommandRoot.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-provideGlobalCommands()
-</script>
-
-<template>
-  <CommandPanel />
-</template>

components/modal/ModalContainer.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
 import {
+  isCommandPanelOpen,
   isEditHistoryDialogOpen,
   isMediaPreviewOpen,
   isPreviewHelpOpen,
   isPublishDialogOpen,
   isSigninDialogOpen,
 } from '~/composables/dialog'
+
+const isMac = useIsMac()
+
+// TODO: temporary, await for keybind system
+// listen to ctrl+/ on windows/linux or cmd+/ on mac
+useEventListener('keydown', (e: KeyboardEvent) => {
+  if (e.key === '/' && (isMac.value ? e.metaKey : e.ctrlKey)) {
+    e.preventDefault()
+    openCommandPanel(true)
+  }
+})
 </script>
 
 <template>
@@ -30,4 +42,7 @@ import {
   <ModalDialog v-model="isEditHistoryDialogOpen">
     <StatusEditPreview :edit="statusEdit" />
   </ModalDialog>
+  <ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
+    <CommandPanel @close="closeCommandPanel()" />
+  </ModalDialog>
 </template>

composables/command.ts

@@ -281,7 +281,7 @@ export const provideGlobalCommands = () => {
     visible: () => users.value.length > 1,
 
     name: () => t('action.switch_account'),
-    description: t('command.switch_account_desc'),
+    description: () => t('command.switch_account_desc'),
     icon: 'i-ri:user-shared-line',
 
     onComplete: () => ({

composables/dialog.ts

@@ -8,6 +8,8 @@ export const mediaPreviewIndex = ref(0)
 export const statusEdit = ref<StatusEdit>()
 export const dialogDraftKey = ref<string>()
 
+export const commandPanelInput = ref('')
+
 export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, !process.mock)
 export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
 
@@ -16,6 +18,7 @@ export const isPublishDialogOpen = ref(false)
 export const isMediaPreviewOpen = ref(false)
 export const isEditHistoryDialogOpen = ref(false)
 export const isPreviewHelpOpen = ref(isFirstVisit.value)
+export const isCommandPanelOpen = ref(false)
 
 export const toggleZenMode = useToggle(isZenMode)
 
@@ -72,3 +75,12 @@ export function openPreviewHelp() {
 export function closePreviewHelp() {
   isPreviewHelpOpen.value = false
 }
+
+export function openCommandPanel(isCommandMode = false) {
+  commandPanelInput.value = isCommandMode ? '>' : ''
+  isCommandPanelOpen.value = true
+}
+
+export function closeCommandPanel() {
+  isCommandPanelOpen.value = false
+}

layouts/default.vue

@@ -51,6 +51,5 @@
       </aside>
     </main>
     <ModalContainer />
-    <CommandRoot />
   </div>
 </template>