feat: command palette (#200)

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>
elk-zone · Nov 29, 2022 · 59802f0 · 59802f0
1 parent 07622e9
commit 59802f0
Show file tree

Hide file tree

Showing 22 changed files with 910 additions and 100 deletions.
diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-const { account } = defineProps<{
+const { account, command } = defineProps<{
   account: Account
+  command?: boolean
 }>()
 
 const isSelf = $computed(() => currentUser.value?.account.id === account.id)
+const enable = $computed(() => !isSelf && currentUser.value)
 let relationship = $(useRelationship(account))
 
 async function toggleFollow() {
@@ -18,11 +20,24 @@ async function toggleFollow() {
     relationship!.following = !relationship!.following
   }
 }
+
+useCommand({
+  scope: 'Actions',
+
+  order: -2,
+
+  visible: () => command && enable,
+
+  name: () => `${relationship?.following ? 'Unfollow' : 'Follow'} ${getShortHandle(account)}`,
+  icon: 'i-ri:star-line',
+
+  onActivate: () => toggleFollow(),
+})
 </script>
 
 <template>
   <button
-    v-if="!isSelf && currentUser"
+    v-if="enable"
     flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group btn-base
     :disabled="relationship?.requested"
     @click="toggleFollow"

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
@@ -3,6 +3,7 @@ import type { Account, Field } from 'masto'
 
 const { account } = defineProps<{
   account: Account
+  command?: boolean
 }>()
 
 const createdAt = $(useFormattedDateTime(() => account.createdAt, {
@@ -89,8 +90,8 @@ watchEffect(() => {
           </div>
         </div>
         <div absolute top="1/2" right-0 translate-y="-1/2" flex gap-2 items-center>
-          <AccountMoreButton :account="account" />
-          <AccountFollowButton :account="account" />
+          <AccountMoreButton :account="account" :command="command" />
+          <AccountFollowButton :account="account" :command="command" />
           <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
             <div rounded p2 group-hover="bg-rose/10">
               <div i-ri:bell-line />

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
@@ -3,6 +3,7 @@ import type { Account } from 'masto'
 
 const { account } = defineProps<{
   account: Account
+  command?: boolean
 }>()
 let relationship = $(useRelationship(account))
 
@@ -35,7 +36,7 @@ const toggleBlockDomain = async () => {
 </script>
 
 <template>
-  <CommonDropdown>
+  <CommonDropdown :eager-mount="command">
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
       <div rounded-5 p2 group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
@@ -44,73 +45,111 @@ const toggleBlockDomain = async () => {
 
     <template #popper>
       <NuxtLink :to="account.url" target="_blank">
-        <CommonDropdownItem icon="i-ri:arrow-right-up-line">
-          {{ $t('menu.open_in_original_site') }}
-        </CommonDropdownItem>
+        <CommonDropdownItem
+          :text="$t('menu.open_in_original_site')"
+          icon="i-ri:arrow-right-up-line"
+          :command="command"
+        />
       </NuxtLink>
 
       <template v-if="currentUser">
         <template v-if="!isSelf">
-          <CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)">
-            {{ $t('menu.mention_account', [`@${account.acct}`]) }}
-          </CommonDropdownItem>
-          <CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)">
-            {{ $t('menu.direct_message_account', [`@${account.acct}`]) }}
-          </CommonDropdownItem>
+          <CommonDropdownItem
+            :text="$t('menu.mention_account', [`@${account.acct}`])"
+            icon="i-ri:at-line"
+            :command="command"
+            @click="mentionUser(account)"
+          />
+          <CommonDropdownItem
+            :text="$t('menu.direct_message_account', [`@${account.acct}`])"
+            icon="i-ri:message-3-line"
+            :command="command"
+            @click="directMessageUser(account)"
+          />
 
-          <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute">
-            {{ $t('menu.mute_account', [`@${account.acct}`]) }}
-          </CommonDropdownItem>
-          <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute">
-            {{ $t('menu.unmute_account', [`@${account.acct}`]) }}
-          </CommonDropdownItem>
+          <CommonDropdownItem
+            v-if="!relationship?.muting"
+            :text="$t('menu.mute_account', [`@${account.acct}`])"
+            icon="i-ri:volume-up-fill"
+            :command="command"
+            @click="toggleMute"
+          />
+          <CommonDropdownItem
+            v-else
+            :text="$t('menu.unmute_account', [`@${account.acct}`])"
+            icon="i-ri:volume-mute-line"
+            :command="command"
+            @click="toggleMute"
+          />
 
-          <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser">
-            {{ $t('menu.block_account', [`@${account.acct}`]) }}
-          </CommonDropdownItem>
-          <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser">
-            {{ $t('menu.unblock_account', [`@${account.acct}`]) }}
-          </CommonDropdownItem>
+          <CommonDropdownItem
+            v-if="!relationship?.blocking"
+            :text="$t('menu.block_account', [`@${account.acct}`])"
+            icon="i-ri:forbid-2-line"
+            :command="command"
+            @click="toggleBlockUser"
+          />
+          <CommonDropdownItem
+            v-else
+            :text="$t('menu.unblock_account', [`@${account.acct}`])"
+            icon="i-ri:checkbox-circle-line"
+            :command="command"
+            @click="toggleBlockUser"
+          />
 
           <template v-if="getServerName(account) !== currentServer">
             <CommonDropdownItem
               v-if="!relationship?.domainBlocking"
+              :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
+              :command="command"
               @click="toggleBlockDomain"
-            >
-              {{ $t('menu.block_domain', [getServerName(account)]) }}
-            </CommonDropdownItem>
-            <CommonDropdownItem v-else icon="i-ri:restart-line" @click="toggleBlockDomain">
-              {{ $t('menu.unblock_domain', [getServerName(account)]) }}
-            </CommonDropdownItem>
+            />
+            <CommonDropdownItem
+              v-else
+              :text="$t('menu.unblock_domain', [getServerName(account)])"
+              icon="i-ri:restart-line"
+              :command="command"
+              @click="toggleBlockDomain"
+            />
           </template>
         </template>
 
         <template v-else>
           <NuxtLink to="/pinned">
-            <CommonDropdownItem icon="i-ri:pushpin-line">
-              Pinned
-            </CommonDropdownItem>
+            <CommonDropdownItem
+              text="Pinned"
+              icon="i-ri:pushpin-line"
+              :command="command"
+            />
           </NuxtLink>
           <NuxtLink to="/favourites">
-            <CommonDropdownItem icon="i-ri:heart-3-line">
-              Favourites
-            </CommonDropdownItem>
+            <CommonDropdownItem
+              text="Favourites"
+              icon="i-ri:heart-3-line"
+              :command="command"
+            />
           </NuxtLink>
           <NuxtLink to="/mutes">
-            <CommonDropdownItem icon="i-ri:volume-mute-line">
-              Muted users
-            </CommonDropdownItem>
+            <CommonDropdownItem
+              text="Muted users"
+              icon="i-ri:volume-mute-line"
+              :command="command"
+            />
           </NuxtLink>
           <NuxtLink to="/blocks">
-            <CommonDropdownItem icon="i-ri:forbid-2-line">
-              Blocked users
-            </CommonDropdownItem>
+            <CommonDropdownItem
+              text="Blocked users"
+              icon="i-ri:forbid-2-line"
+              :command="command"
+            />
           </NuxtLink>
           <NuxtLink to="/domain_blocks">
-            <CommonDropdownItem icon="i-ri:shut-down-line">
-              Blocked domains
-            </CommonDropdownItem>
+            <CommonDropdownItem
+              text="Blocked domains"
+              icon="i-ri:shut-down-line"
+              :command="command"
+            />
           </NuxtLink>
         </template>
       </template>

diff --git a/components/command/Key.vue b/components/command/Key.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string
+}>()
+
+const isMac = useIsMac()
+
+const keys = $computed(() => props.name.toLowerCase().split('+'))
+</script>
+
+<template>
+  <div class="flex items-center px-1">
+    <template v-for="(key, index) in keys" :key="key">
+      <div v-if="index > 0" class="inline-block px-.5">
+        +
+      </div>
+      <div
+        class="p-1 grid place-items-center rounded-lg shadow-sm"
+        text="xs secondary"
+        border="1 base"
+      >
+        <div v-if="key === 'enter'" i-material-symbols:keyboard-return-rounded />
+        <div v-else-if="key === 'meta' && isMac" i-material-symbols:keyboard-command-key />
+        <div v-else-if="key === 'meta' && !isMac" i-material-symbols:window-sharp />
+        <div v-else-if="key === 'alt' && isMac" i-material-symbols:keyboard-option-key-rounded />
+        <div v-else-if="key === 'arrowup'" i-ri:arrow-up-line />
+        <div v-else-if="key === 'arrowdown'" i-ri:arrow-down-line />
+        <div v-else-if="key === 'arrowleft'" i-ri:arrow-left-line />
+        <div v-else-if="key === 'arrowright'" i-ri:arrow-right-line />
+        <template v-else-if="key === 'escape'">
+          ESC
+        </template>
+        <div v-else :class="{ 'px-.5': key.length === 1 }">
+          {{ key[0].toUpperCase() + key.slice(1) }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>