feat: command palette (#200)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

components/nav/NavSide.vue

@@ -15,11 +15,18 @@ const { t } = useI18n()
       <NavSideItem :text="t('nav_side.conversations')" to="/conversations" icon="i-ri:at-line" />
       <NavSideItem :text="t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" />
       <NavSideItem :text="t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " />
-      <NavSideItem :to="getAccountPath(currentUser.account)" icon="i-ri:list-check-2-line">
+      <NavSideItem
+        :text="currentUser.account.displayName"
+        :to="getAccountPath(currentUser.account)"
+        icon="i-ri:account-circle-line"
+      >
         <template #icon>
           <AccountAvatar :account="currentUser.account" h="1.2em" />
         </template>
-        <ContentRich :content="getDisplayName(currentUser.account, { rich: true }) || t('nav_side.profile')" :emojis="currentUser.account.emojis" />
+        <ContentRich
+          :content="getDisplayName(currentUser.account, { rich: true }) || t('nav_side.profile')"
+          :emojis="currentUser.account.emojis"
+        />
       </NavSideItem>
     </template>
   </nav>

components/nav/NavSideItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   text?: string
   icon: string
   to: string
@@ -9,6 +9,19 @@ defineSlots<{
   icon: {}
   default: {}
 }>()
+
+const router = useRouter()
+
+useCommand({
+  scope: 'Navigation',
+
+  name: () => props.text ?? props.to,
+  icon: () => props.icon,
+
+  onActivate() {
+    router.push(props.to)
+  },
+})
 </script>
 
 <template>