From 07adee7431a2d93f804bf02b40c42ad1375aa5fe Mon Sep 17 00:00:00 2001
From: HugoRCD <hugo.richard@epitech.eu>
Date: Wed, 26 Feb 2025 21:42:00 +0100
Subject: [PATCH] Handle submenu and add more commands

---
 apps/shelve/app/components/team/Manager.vue   |  62 +++-
 apps/shelve/app/composables/useAppCommands.ts | 291 +++++++++++++++---
 .../app/composables/useCommandPalette.ts      |   5 +-
 packages/types/src/Command.ts                 |  11 +-
 4 files changed, 322 insertions(+), 47 deletions(-)

diff --git a/apps/shelve/app/components/team/Manager.vue b/apps/shelve/app/components/team/Manager.vue
index 403d7bd7..5984946f 100644
--- a/apps/shelve/app/components/team/Manager.vue
+++ b/apps/shelve/app/components/team/Manager.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { Team } from '@types'
+import type { CommandItem } from '@types'
 
 const isSearchActive = defineModel<boolean>({ required: false })
 const search = defineModel<string>('search', { required: false })
 const selectedIndex = defineModel<number>('selectedIndex', { required: false, default: 0 })
 
 // Command palette setup
-const { commandGroups, createTeamFromSearch, version, currentTeam } = useAppCommands()
+const { commandGroups, createTeamFromSearch, version, subMenuState, deactivateSubMenu } = useAppCommands()
 
 const {
   scrollContainerRef,
@@ -21,6 +21,7 @@ const {
     isSearchActive.value = false
     search.value = ''
     selectedIndex.value = 0
+    deactivateSubMenu()
   }
 })
 
@@ -51,6 +52,15 @@ defineShortcuts({
         navigateDown()
       }
     }
+  },
+  backspace: {
+    usingInput: true,
+    handler: () => {
+      if (isSearchActive.value && subMenuState.active) {
+        deactivateSubMenu()
+        selectedIndex.value = 0
+      }
+    }
   }
 })
 
@@ -72,8 +82,17 @@ watch(selectedIndex, (newIndex) => {
 watch(isSearchActive, (newValue) => {
   if (newValue && scrollContainerRef.value) {
     scrollContainerRef.value.scrollTop = 0
+    deactivateSubMenu()
   }
 })
+
+function playAction(item: CommandItem) {
+  item.action()
+  if (!item.hasSubmenu) {
+    isSearchActive.value = false
+    search.value = ''
+  }
+}
 </script>
 
 <template>
@@ -108,10 +127,21 @@ watch(isSearchActive, (newValue) => {
 
           <template v-else>
             <div v-for="(group, groupIndex) in filteredCommandGroups" :key="group.id" class="command-group">
-              <div class="p-3 pb-1">
+              <div class="p-3 pb-1 flex items-center justify-between">
                 <span class="text-sm font-semibold text-(--ui-text-muted)">
                   {{ group.label }}
                 </span>
+
+                <!-- Back button for submenus -->
+                <button
+                  v-if="group.backAction"
+                  class="text-xs text-(--ui-text-muted) flex items-center gap-1 hover:text-(--ui-text-highlighted)"
+                  @click="group.backAction()"
+                >
+                  <UIcon name="lucide:arrow-left" class="size-3" />
+                  <span>Back</span>
+                </button>
+
                 <Separator />
               </div>
 
@@ -122,9 +152,10 @@ watch(isSearchActive, (newValue) => {
                   class="command-item"
                   :class="{
                     'active': item.active,
+                    'has-submenu': item.hasSubmenu,
                     'selected': selectedIndex === getItemGlobalIndex(groupIndex, itemIndex)
                   }"
-                  @click="item.action(); isSearchActive = false; search = ''"
+                  @click="playAction(item)"
                 >
                   <div v-if="item.isAvatar" class="flex-shrink-0">
                     <UAvatar :src="item.icon" size="sm" :alt="item.label" />
@@ -140,7 +171,16 @@ watch(isSearchActive, (newValue) => {
                     </span>
                   </div>
 
-                  <UIcon v-if="item.active" name="lucide:check" class="size-4 text-(--ui-text-highlighted)" />
+                  <UIcon
+                    v-if="item.hasSubmenu"
+                    name="lucide:chevron-right"
+                    class="size-4 text-(--ui-text-highlighted)"
+                  />
+                  <UIcon
+                    v-else-if="item.active"
+                    name="lucide:check"
+                    class="size-4 text-(--ui-text-highlighted)"
+                  />
                 </div>
               </div>
             </div>
@@ -170,6 +210,10 @@ watch(isSearchActive, (newValue) => {
                 <UKbd value="Esc" variant="subtle" />
                 <span class="shortcut-label">to close</span>
               </div>
+              <div v-if="subMenuState.active" class="space-x-1">
+                <UKbd value="Backspace" variant="subtle" />
+                <span class="shortcut-label">to go back</span>
+              </div>
             </div>
           </div>
         </div>
@@ -197,4 +241,12 @@ watch(isSearchActive, (newValue) => {
 .command-item.selected.active {
   @apply bg-(--ui-bg-accented)/70;
 }
+
+.command-item.has-submenu {
+  @apply pr-2;
+}
+
+.command-item.has-submenu:hover {
+  @apply bg-(--ui-bg-muted)/70;
+}
 </style>
diff --git a/apps/shelve/app/composables/useAppCommands.ts b/apps/shelve/app/composables/useAppCommands.ts
index 53fdd569..4bb839fa 100644
--- a/apps/shelve/app/composables/useAppCommands.ts
+++ b/apps/shelve/app/composables/useAppCommands.ts
@@ -1,4 +1,4 @@
-import type { CommandGroup, CommandItem } from '@types'
+import type { CommandGroup, CommandItem, SubMenuState } from '@types'
 
 export function useAppCommands() {
   const teams = useTeams()
@@ -7,13 +7,36 @@ export function useAppCommands() {
   const defaultTeamSlug = useCookie<string>('defaultTeamSlug')
   const _currentTeam = useTeam()
   const { selectTeam, createTeam } = useTeamsService()
+  const route = useRoute()
+
+  // Submenu state
+  const subMenuState = reactive<SubMenuState>({
+    active: false,
+    parentId: '',
+    title: '',
+    items: []
+  })
+
+  const activateSubMenu = (parentId: string, title: string, items: CommandItem[]) => {
+    subMenuState.active = true
+    subMenuState.parentId = parentId
+    subMenuState.title = title
+    subMenuState.items = items
+  }
+
+  const deactivateSubMenu = () => {
+    subMenuState.active = false
+    subMenuState.parentId = ''
+    subMenuState.title = ''
+    subMenuState.items = []
+  }
 
   const currentTeam = computed(() =>
     _currentTeam.value ?? teams.value.find((team) => team.slug === defaultTeamSlug.value)
   )
 
-  // Theme commands
-  const themeCommands = ref<CommandItem[]>([
+  // Theme commands - fully reactive
+  const themeCommands = computed<CommandItem[]>(() => [
     {
       id: 'theme-light',
       label: 'Light Mode',
@@ -23,7 +46,7 @@ export function useAppCommands() {
         colorMode.preference = 'light'
       },
       keywords: ['light', 'theme', 'mode', 'day', 'bright'],
-      active: computed(() => colorMode.preference === 'light').value
+      active: colorMode.preference === 'light'
     },
     {
       id: 'theme-dark',
@@ -34,41 +57,153 @@ export function useAppCommands() {
         colorMode.preference = 'dark'
       },
       keywords: ['dark', 'theme', 'mode', 'night', 'black'],
-      active: computed(() => colorMode.preference === 'dark').value
+      active: colorMode.preference === 'dark'
+    },
+    {
+      id: 'theme-system',
+      label: 'System Theme',
+      icon: 'lucide:laptop',
+      description: 'Use system preference',
+      action: () => {
+        colorMode.preference = 'system'
+      },
+      keywords: ['system', 'theme', 'auto', 'default'],
+      active: colorMode.preference === 'system'
     }
   ])
 
-  // Navigation commands
-  const navigationCommands = ref<CommandItem[]>([
+  // Settings submenu items
+  const settingsSubMenuItems = computed<CommandItem[]>(() => [
+    {
+      id: 'settings-user',
+      label: 'User Settings',
+      icon: 'lucide:user-cog',
+      description: 'Manage your user account settings',
+      action: () => {
+        navigateTo('/user/settings')
+      },
+      keywords: ['user', 'account', 'settings', 'preferences'],
+      active: route.path === '/user/settings'
+    },
+    {
+      id: 'settings-team',
+      label: 'Team Settings',
+      icon: 'lucide:users-cog',
+      description: 'Manage team settings',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/settings`)
+      },
+      keywords: ['team', 'organization', 'settings', 'preferences'],
+      active: route.path.includes('/settings') && !route.path.includes('/user/settings')
+    },
+    {
+      id: 'settings-billing',
+      label: 'Billing',
+      icon: 'lucide:credit-card',
+      description: 'Manage billing and subscription',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/settings/billing`)
+      },
+      keywords: ['billing', 'payment', 'subscription', 'plan'],
+      active: route.path.includes('/settings/billing')
+    },
+    {
+      id: 'settings-api',
+      label: 'API Keys',
+      icon: 'lucide:key',
+      description: 'Manage API keys',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/settings/api-keys`)
+      },
+      keywords: ['api', 'keys', 'tokens', 'access'],
+      active: route.path.includes('/settings/api-keys')
+    }
+  ])
+
+  // Environment submenu items
+  const environmentSubMenuItems = computed<CommandItem[]>(() => [
+    {
+      id: 'env-list',
+      label: 'All Environments',
+      icon: 'lucide:layers',
+      description: 'View all environments',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/environments`)
+      },
+      keywords: ['environments', 'all', 'list'],
+      active: route.path === `/${currentTeam.value?.slug}/environments`
+    },
+    {
+      id: 'env-create',
+      label: 'Create Environment',
+      icon: 'lucide:plus-circle',
+      description: 'Create a new environment',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/environments/new`)
+      },
+      keywords: ['environment', 'create', 'new', 'add'],
+      active: route.path === `/${currentTeam.value?.slug}/environments/new`
+    },
+    {
+      id: 'env-production',
+      label: 'Production Environment',
+      icon: 'lucide:globe',
+      description: 'View production environment',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/environments/production`)
+      },
+      keywords: ['environment', 'production', 'live'],
+      active: route.path.includes('/environments/production')
+    },
+    {
+      id: 'env-staging',
+      label: 'Staging Environment',
+      icon: 'lucide:flask-conical',
+      description: 'View staging environment',
+      action: () => {
+        navigateTo(`/${currentTeam.value?.slug}/environments/staging`)
+      },
+      keywords: ['environment', 'staging', 'test'],
+      active: route.path.includes('/environments/staging')
+    }
+  ])
+
+  // Navigation commands with submenus
+  const navigationCommands = computed<CommandItem[]>(() => [
     {
       id: 'nav-home',
-      label: 'Go to Dashboard',
+      label: 'Dashboard',
       icon: 'lucide:layout-dashboard',
-      description: 'Navigate to the dashboard',
+      description: 'Go to your dashboard',
       action: () => {
-        navigateTo(`/${defaultTeamSlug.value}`)
+        navigateTo(`/${currentTeam.value?.slug}`)
       },
       keywords: ['home', 'dashboard', 'main'],
+      active: route.path === `/${currentTeam.value?.slug}`
     },
     {
       id: 'nav-environments',
       label: 'Environments',
       icon: 'lucide:cloud',
-      description: 'Navigate to the environments page',
+      description: 'Manage environments',
       action: () => {
-        navigateTo(`/${defaultTeamSlug.value}/environments`)
+        activateSubMenu('nav-environments', 'Environments', environmentSubMenuItems.value)
       },
       keywords: ['environments', 'projects', 'variables'],
+      active: route.path.includes('/environments'),
+      hasSubmenu: true
     },
     {
       id: 'nav-settings',
       label: 'Settings',
       icon: 'lucide:settings',
-      description: 'Open settings page',
+      description: 'Manage settings',
       action: () => {
-        navigateTo('/user/settings')
+        activateSubMenu('nav-settings', 'Settings', settingsSubMenuItems.value)
       },
       keywords: ['settings', 'preferences', 'config'],
+      active: route.path.includes('/settings'),
+      hasSubmenu: true
     },
     {
       id: 'nav-profile',
@@ -79,10 +214,11 @@ export function useAppCommands() {
         navigateTo('/user/profile')
       },
       keywords: ['profile', 'account', 'user'],
+      active: route.path === '/user/profile'
     },
   ])
 
-  // Team commands
+  // Team commands - reactive
   const teamCommands = computed<CommandItem[]>(() => {
     return teams.value.map(team => ({
       id: `team-${team.id}`,
@@ -96,44 +232,117 @@ export function useAppCommands() {
     }))
   })
 
-  // Other commands
-  const otherCommands = computed(() => [
+  // Help & Support commands
+  const helpCommands = computed<CommandItem[]>(() => [
     {
-      id: 'issues',
-      label: 'Issues',
+      id: 'help-docs',
+      label: 'Documentation',
+      icon: 'lucide:book-open',
+      description: 'Read the documentation',
+      action: () => {
+        window.open('https://shelve.cloud/docs/getting-started', '_blank')
+      },
+      keywords: ['docs', 'help', 'documentation', 'guide'],
+    },
+    {
+      id: 'help-issues',
+      label: 'Report Issue',
       icon: 'lucide:bug',
-      description: 'Open issues page',
+      description: 'Report a bug or issue',
       action: () => {
-        open('https://github.com/hugorcd/shelve/issues')
+        window.open('https://github.com/hugorcd/shelve/issues', '_blank')
       },
-      keywords: ['issues', 'bug', 'report'],
+      keywords: ['issues', 'bug', 'report', 'problem'],
     },
+    {
+      id: 'help-feedback',
+      label: 'Send Feedback',
+      icon: 'lucide:message-square',
+      description: 'Send feedback or suggestions',
+      action: () => {
+        window.open('mailto:contact@shelve.cloud', '_blank')
+      },
+      keywords: ['feedback', 'suggestion', 'contact'],
+    }
   ])
 
-  // Group all commands
-  const commandGroups = computed<CommandGroup[]>(() => [
+  // Utility commands
+  const utilityCommands = computed<CommandItem[]>(() => [
     {
-      id: 'teams',
-      label: 'Teams',
-      items: teamCommands.value
-    },
-    {
-      id: 'navigation',
-      label: 'Navigation',
-      items: navigationCommands.value
+      id: 'util-clipboard',
+      label: 'Copy Team ID',
+      icon: 'lucide:clipboard-copy',
+      description: 'Copy current team ID to clipboard',
+      action: () => {
+        if (currentTeam.value?.id) {
+          copyToClipboard(currentTeam.value.id.toString())
+        }
+      },
+      keywords: ['copy', 'clipboard', 'team', 'id'],
     },
     {
-      id: 'theme',
-      label: 'Theme',
-      items: themeCommands.value
+      id: 'util-version',
+      label: `Version: ${version}`,
+      icon: 'lucide:info',
+      description: 'Current application version',
+      keywords: ['version', 'app', 'info'],
     },
     {
-      id: 'other',
-      label: 'Other',
-      items: otherCommands.value
-    },
+      id: 'util-logout',
+      label: 'Log Out',
+      icon: 'lucide:log-out',
+      description: 'Sign out of your account',
+      action: async () => {
+        await useLogout()
+      },
+      keywords: ['logout', 'signout', 'exit'],
+    }
   ])
 
+  // Group all commands
+  const commandGroups = computed<CommandGroup[]>(() => {
+    // If submenu is active, only show that
+    if (subMenuState.active) {
+      return [
+        {
+          id: `submenu-${subMenuState.parentId}`,
+          label: subMenuState.title,
+          items: subMenuState.items,
+          backAction: deactivateSubMenu
+        }
+      ]
+    }
+
+    // Otherwise show all command groups
+    return [
+      {
+        id: 'teams',
+        label: 'Teams',
+        items: teamCommands.value
+      },
+      {
+        id: 'navigation',
+        label: 'Navigation',
+        items: navigationCommands.value
+      },
+      {
+        id: 'theme',
+        label: 'Theme',
+        items: themeCommands.value
+      },
+      {
+        id: 'help',
+        label: 'Help & Support',
+        items: helpCommands.value
+      },
+      {
+        id: 'utility',
+        label: 'Utilities',
+        items: utilityCommands.value
+      }
+    ]
+  })
+
   // Helper function to create a team
   const createTeamFromSearch = async (teamName: string) => {
     if (!teamName) return
@@ -144,6 +353,8 @@ export function useAppCommands() {
     commandGroups,
     createTeamFromSearch,
     version,
-    currentTeam
+    currentTeam,
+    subMenuState,
+    deactivateSubMenu
   }
 }
diff --git a/apps/shelve/app/composables/useCommandPalette.ts b/apps/shelve/app/composables/useCommandPalette.ts
index 333c20a8..3452c8e6 100644
--- a/apps/shelve/app/composables/useCommandPalette.ts
+++ b/apps/shelve/app/composables/useCommandPalette.ts
@@ -96,7 +96,9 @@ export function useCommandPalette(
       const item = allFilteredItems.value[selectedIndex.value]
       if (item?.action) {
         await item.action()
-        if (options.onClose) {
+
+        // Only close if it's not a submenu item
+        if (!item.hasSubmenu && options.onClose) {
           options.onClose()
         }
       }
@@ -115,6 +117,7 @@ export function useCommandPalette(
 
   // Reset scroll when command groups change
   watch(commandGroups, () => {
+    selectedIndex.value = 0
     nextTick(() => {
       if (scrollContainerRef.value) {
         scrollContainerRef.value.scrollTop = 0
diff --git a/packages/types/src/Command.ts b/packages/types/src/Command.ts
index 3aeac249..afc3ce53 100644
--- a/packages/types/src/Command.ts
+++ b/packages/types/src/Command.ts
@@ -4,17 +4,26 @@ export interface CommandItem {
   icon: string
   isAvatar?: boolean
   description?: string
-  action: () => void | Promise<void>
+  action?: () => void | Promise<void>
   keywords?: string[]
   active?: boolean
+  hasSubmenu?: boolean
 }
 
 export interface CommandGroup {
   id: string
   label: string
   items: CommandItem[]
+  backAction?: () => void
 }
 
 export interface CommandProviderOptions {
   onClose?: () => void
 }
+
+export interface SubMenuState {
+  active: boolean
+  parentId: string
+  title: string
+  items: CommandItem[]
+}