fix: enable nav commands only once

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>

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)

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>

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>