feat(menu): priority-sorted menu groups, user-menu items, sidebar appearance toggle

Every main_menu entry moves from numeric group (1/2/3) to string-based group + group_label + priority. Groups now carry their own i18n label and child entries are sorted by an explicit priority field instead of config-array order, so module-contributed menu items can slot into any existing group at any position.

BootstrapController merges module-registered menu items into main_menu (previously they lived in a separate module_menu response key) and introduces a user_menu response key for items modules want to place in the avatar dropdown. The global store follows suit: moduleMenu becomes userMenu, menuGroups is a computed that sorts by priority, and hasActiveModules drops out.

New admin Appearance setting page with a single toggle for whether sidebar group labels render — so instances that prefer a compact sidebar can hide the Documents/Administration/Modules headings without losing the grouping itself. CompanyLayout watches route meta and re-bootstraps when the admin-mode flag flips so the sidebar repaints with the right menu on navigation across the admin boundary.

Test suites updated: module menu merging is asserted against main_menu (name: 'module-{slug}') rather than the old module_menu response; HelloWorldIntegrationTest verifies the schema translation path; CompanyModulesIndexTest covers the display_name attachment.

resources/scripts/stores/global.store.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import groupBy from 'lodash/groupBy'
 import { bootstrapService } from '@/scripts/api/services/bootstrap.service'
-import type { MenuItem, ModuleMenuItem, BootstrapResponse } from '@/scripts/api/services/bootstrap.service'
+import type { MenuItem, BootstrapResponse } from '@/scripts/api/services/bootstrap.service'
 import { settingService } from '@/scripts/api/services/setting.service'
 import type {
   DateFormat,
@@ -25,7 +25,7 @@ export const useGlobalStore = defineStore('global', () => {
   const config = ref<Record<string, unknown> | null>(null)
   const globalSettings = ref<Record<string, string> | null>(null)
 
-  const timeZones = ref<string[]>([])
+  const timeZones = ref<Array<{ key: string; value: string }>>([])
   const dateFormats = ref<DateFormat[]>([])
   const timeFormats = ref<TimeFormat[]>([])
   const currencies = ref<Currency[]>([])
@@ -35,8 +35,7 @@ export const useGlobalStore = defineStore('global', () => {
 
   const mainMenu = ref<MenuItem[]>([])
   const settingMenu = ref<MenuItem[]>([])
-  const moduleMenu = ref<ModuleMenuItem[]>([])
-
+  const userMenu = ref<Array<{ title: string; link: string; icon: string; name: string }>>([])
   const isAppLoaded = ref<boolean>(false)
   const isSidebarOpen = ref<boolean>(false)
   const isSidebarCollapsed = ref<boolean>(localStore.getBoolean('sidebarCollapsed'))
@@ -46,11 +45,13 @@ export const useGlobalStore = defineStore('global', () => {
 
   // Getters
   const menuGroups = computed<MenuItem[][]>(() => {
-    return Object.values(groupBy(mainMenu.value, 'group'))
+    const sorted = [...mainMenu.value].sort((a, b) => (a.priority ?? 100) - (b.priority ?? 100))
+    const groups = groupBy(sorted, 'group')
+    return Object.values(groups).sort(
+      (a, b) => (a[0]?.priority ?? 100) - (b[0]?.priority ?? 100)
+    )
   })
 
-  const hasActiveModules = computed<boolean>(() => moduleMenu.value.length > 0)
-
   // Actions
   async function bootstrap(options?: { adminMode?: boolean }): Promise<BootstrapResponse> {
     const companyStore = useCompanyStore()
@@ -62,7 +63,7 @@ export const useGlobalStore = defineStore('global', () => {
 
       mainMenu.value = response.main_menu
       settingMenu.value = response.setting_menu
-      moduleMenu.value = response.module_menu ?? []
+      userMenu.value = response.user_menu ?? []
 
       config.value = response.config
       globalSettings.value = response.global_settings
@@ -196,7 +197,7 @@ export const useGlobalStore = defineStore('global', () => {
     }
   }
 
-  async function fetchTimeZones(): Promise<string[]> {
+  async function fetchTimeZones(): Promise<Array<{ key: string; value: string }>> {
     if (timeZones.value.length) {
       return timeZones.value
     }
@@ -290,7 +291,7 @@ export const useGlobalStore = defineStore('global', () => {
     fiscalYears,
     mainMenu,
     settingMenu,
-    moduleMenu,
+    userMenu,
     isAppLoaded,
     isSidebarOpen,
     isSidebarCollapsed,
@@ -298,7 +299,6 @@ export const useGlobalStore = defineStore('global', () => {
     downloadReport,
     // Getters
     menuGroups,
-    hasActiveModules,
     // Actions
     bootstrap,
     fetchCurrencies,