feat: enhance DashboardLayout and GlobalSettings components with improved sidebar and layout adjustments

Author: JasonKrik

services/frontend/src/components/DashboardLayout.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { StyleValue } from 'vue'
-import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar' // Assuming SidebarTrigger might be needed
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
+import { Separator } from '@/components/ui/separator'
 import AppSidebar from '@/components/AppSidebar.vue'
 
 interface Props {
@@ -28,15 +29,17 @@ const sidebarStyle = computed(() => ({
 <template>
   <SidebarProvider :default-open="defaultOpen" :style="sidebarStyle">
     <AppSidebar variant="inset" />
-    <SidebarInset>
+    <SidebarInset class="px-5">
       <!-- SiteHeader equivalent -->
       <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
         <div class="flex items-center gap-2 px-4">
           <SidebarTrigger class="-ml-1" />
           <h1 class="text-lg font-semibold md:text-xl">{{ props.title }}</h1>
         </div>
       </header>
-      
+
+      <Separator class="my-6" />
+
       <!-- Content area -->
       <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
         <slot />
@@ -76,7 +79,7 @@ const sidebarStyle = computed(() => ({
     border-radius: 0.75rem;
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   }
-  
+
   /* Ensure the sidebar spacer works */
   .group\/sidebar-wrapper .group.peer {
     flex-shrink: 0;

services/frontend/src/components/settings/GlobalSettingsSidebarNav.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, RouterLink } from 'vue-router'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button' // Adjusted path assuming shadcn/ui components are in @/components/ui
 
@@ -31,7 +31,7 @@ const props = defineProps<{
   groups: GlobalSettingGroup[]
 }>()
 
-const $route = useRoute()
+const route = useRoute()
 
 const sidebarNavItems = computed((): NavItem[] => {
   return props.groups.map(group => ({
@@ -50,15 +50,16 @@ const sidebarNavItems = computed((): NavItem[] => {
     <Button
       v-for="item in sidebarNavItems"
       :key="item.title"
-      as="router-link"
-      :to="item.href"
+      as-child
       variant="ghost"
       :class="cn(
         'w-full text-left justify-start',
-        $route.path === item.href && 'bg-muted hover:bg-muted',
+        route.path === item.href && 'bg-muted hover:bg-muted',
       )"
     >
-      {{ item.title }}
+      <RouterLink :to="item.href">
+        {{ item.title }}
+      </RouterLink>
     </Button>
   </nav>
 </template>

services/frontend/src/views/GlobalSettings.vue

@@ -2,12 +2,11 @@
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Separator } from '@/components/ui/separator' // Adjusted path
 import GlobalSettingsSidebarNav, { type GlobalSettingGroup } from '@/components/settings/GlobalSettingsSidebarNav.vue'
-import DashboardLayout from '@/components/DashboardLayout.vue' // Reinstated
+import DashboardLayout from '@/components/DashboardLayout.vue'
 import { getEnv } from '@/utils/env'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { CheckCircle2Icon, XIcon } from 'lucide-vue-next' // Added XIcon
+import { CheckCircle2Icon, XIcon } from 'lucide-vue-next'
 
 const { t } = useI18n()
 const route = useRoute()
@@ -212,7 +211,7 @@ async function handleSaveChanges() {
 
 <template>
   <DashboardLayout :title="t('globalSettings.title')">
-    <div class="hidden space-y-6 p-10 pb-16 md:block">
+    <div class="hidden space-y-6 pb-16 md:block">
       <Alert v-if="showSuccessAlert" variant="default" class="mb-4 border-green-500 bg-green-50 text-green-700 relative">
         <CheckCircle2Icon class="h-5 w-5 text-green-600" />
         <AlertTitle class="font-semibold text-green-800">{{ t('globalSettings.alerts.successTitle') }}</AlertTitle>
@@ -230,15 +229,7 @@ async function handleSaveChanges() {
         </Button>
       </Alert>
 
-      <div class="space-y-0.5">
-        <h2 class="text-2xl font-bold tracking-tight">
-        {{ t('globalSettings.title') }}
-      </h2>
-      <p class="text-muted-foreground">
-        {{ t('globalSettings.description') }}
-      </p>
-    </div>
-    <Separator class="my-6" />
+
     <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
       <aside class="-mx-4 lg:w-1/5">
         <GlobalSettingsSidebarNav :groups="settingGroups" />
@@ -255,7 +246,6 @@ async function handleSaveChanges() {
               {{ selectedGroup.description }}
             </p>
           </div>
-          <Separator />
           <form v-if="editableSettings.length > 0" class="space-y-6" @submit.prevent="handleSaveChanges">
             <div v-for="(setting, index) in editableSettings" :key="setting.key" class="space-y-2">
               <Label :for="`setting-${setting.key}`">{{ setting.description || setting.key }}</Label>