From 1054e556e814c9fb2172c8b69f41364e32d1f3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 30 Dec 2022 03:31:29 +0800
Subject: [PATCH] fix: enable nav commands only once

---
 components/nav/NavSide.vue              | 21 ++++++++++++---------
 components/nav/NavSideItem.vue          |  4 ++++
 components/settings/SettingsNavItem.vue | 19 +++++++++----------
 layouts/default.vue                     |  2 +-
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index d0212c48..76756e64 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+const { command } = defineProps<{
+  command?: boolean
+}>()
 const { notifications } = useNotifications()
 </script>
 
 <template>
   <nav sm:px3 sm:py4 flex="~ col gap2" text-size-base leading-normal md:text-lg>
-    <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only />
-    <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only>
+    <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
+    <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
       <template #icon>
         <div flex relative>
           <div class="i-ri:notification-4-line" md:text-size-inherit text-xl />
@@ -17,13 +20,13 @@ const { notifications } = useNotifications()
     </NavSideItem>
 
     <!-- Use Search for small screens once the right sidebar is collapsed -->
-    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden />
-    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" />
+    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" />
 
-    <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " />
-    <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" />
-    <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only />
-    <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only />
-    <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only />
+    <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" />
+    <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" />
+    <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
+    <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" />
+    <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only :command="command" />
   </nav>
 </template>
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 64249591..97ab525e 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { warn } from 'vue'
+
 const props = withDefaults(defineProps<{
   text?: string
   icon: string
   to: string | Record<string, string>
   userOnly?: boolean
+  command?: boolean
 }>(), {
   userOnly: false,
 })
@@ -20,6 +23,7 @@ useCommand({
 
   name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
   icon: () => props.icon,
+  visible: () => props.command,
 
   onActivate() {
     router.push(props.to)
diff --git a/components/settings/SettingsNavItem.vue b/components/settings/SettingsNavItem.vue
index 74ac04dd..9189db80 100644
--- a/components/settings/SettingsNavItem.vue
+++ b/components/settings/SettingsNavItem.vue
@@ -8,18 +8,17 @@ const props = defineProps<{
 
 const router = useRouter()
 
-if (props.command) {
-  useCommand({
-    scope: 'Settings',
+useCommand({
+  scope: 'Settings',
 
-    name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
-    icon: () => props.icon || '',
+  name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
+  icon: () => props.icon || '',
+  visible: () => props.command,
 
-    onActivate() {
-      router.push(props.to)
-    },
-  })
-}
+  onActivate() {
+    router.push(props.to)
+  },
+})
 </script>
 
 <template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 466e335f..390b767b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,7 +13,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
             <NavTitle mt4 mb2 lg:mx-3 />
             <div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
               <div flex flex-col>
-                <NavSide />
+                <NavSide command />
                 <PublishButton m="y5 xa" lg:m="r5 l3" lg:rtl-m="l5 r3" />
               </div>
               <div v-if="isMastoInitialised" flex flex-col>