feat(frontend): restructure account settings components and add GitHub App and SMTP settings

Author: Lasim

…omponents/settings/AccountSidebarNav.vue …components/account/AccountSidebarNav.vueservices/frontend/src/components/settings/AccountSidebarNav.vue renamed to services/frontend/src/components/account/AccountSidebarNav.vue services/frontend/src/components/settings/AccountSidebarNav.vue renamed to services/frontend/src/components/account/AccountSidebarNav.vue

@@ -1,5 +1,5 @@
 import type { Component } from 'vue'
-import type { GlobalSettingGroup, Setting } from '@/components/settings/GlobalSettingsSidebarNav.vue'
+import type { GlobalSettingGroup, Setting } from '@/components/globalSettings/GlobalSettingsSidebarNav.vue'
 
 export interface SettingsComponentProps {
   group: GlobalSettingGroup

…omponents/settings/GitHubAppSettings.vue …nts/globalSettings/GitHubAppSettings.vueservices/frontend/src/components/settings/GitHubAppSettings.vue renamed to services/frontend/src/components/globalSettings/GitHubAppSettings.vue services/frontend/src/components/settings/GitHubAppSettings.vue renamed to services/frontend/src/components/globalSettings/GitHubAppSettings.vue

@@ -1,5 +1,5 @@
 import { ref, computed, watch } from 'vue'
-import type { Setting } from '@/components/settings/GlobalSettingsSidebarNav.vue'
+import type { Setting } from '@/components/globalSettings/GlobalSettingsSidebarNav.vue'
 import { getEnv } from '@/utils/env'
 
 export interface FormValues {

…ts/settings/GlobalSettingsSidebarNav.vue …balSettings/GlobalSettingsSidebarNav.vueservices/frontend/src/components/settings/GlobalSettingsSidebarNav.vue renamed to services/frontend/src/components/globalSettings/GlobalSettingsSidebarNav.vue services/frontend/src/components/settings/GlobalSettingsSidebarNav.vue renamed to services/frontend/src/components/globalSettings/GlobalSettingsSidebarNav.vue

@@ -12,7 +12,7 @@ import { PluginManager } from './plugin-system/plugin-manager'
 import { loadPlugins } from './plugins'
 import ExtensionPoint from './components/ExtensionPoint.vue'
 import type { EventBusEvents } from './composables/useEventBus'
-import { registerSettingsComponents } from './components/settings'
+import { registerSettingsComponents } from './components/globalSettings'
 
 const app = createApp(App)
 const pinia = createPinia()

…src/components/settings/SmtpSettings.vue …mponents/globalSettings/SmtpSettings.vueservices/frontend/src/components/settings/SmtpSettings.vue renamed to services/frontend/src/components/globalSettings/SmtpSettings.vue services/frontend/src/components/settings/SmtpSettings.vue renamed to services/frontend/src/components/globalSettings/SmtpSettings.vue

@@ -150,12 +150,13 @@ const routes = [
     children: [
       {
         path: 'settings',
-        redirect: '/admin/settings/global'
+        name: 'AdminSettingsIndex',
+        component: () => import('../views/admin/settings/index.vue'),
       },
       {
-        path: 'settings/:groupId',
+        path: 'settings/:type',
         name: 'AdminSettings',
-        component: () => import('../views/admin/GlobalSettings.vue'),
+        component: () => import('../views/admin/settings/[type].vue'),
       },
       {
         path: 'users',

…rontend/src/components/settings/index.ts …d/src/components/globalSettings/index.tsservices/frontend/src/components/settings/index.ts renamed to services/frontend/src/components/globalSettings/index.ts services/frontend/src/components/settings/index.ts renamed to services/frontend/src/components/globalSettings/index.ts

@@ -4,10 +4,13 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
-import GlobalSettingsSidebarNav, { type GlobalSettingGroup } from '@/components/settings/GlobalSettingsSidebarNav.vue'
+import GlobalSettingsSidebarNav, { type GlobalSettingGroup, type Setting } from '@/components/globalSettings/GlobalSettingsSidebarNav.vue'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import { getEnv } from '@/utils/env'
-
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
 import {
   Card,
   CardContent,
@@ -24,7 +27,6 @@ const settingGroups = ref<GlobalSettingGroup[]>([])
 const isLoading = ref(true)
 const error = ref<string | null>(null)
 
-
 const apiUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL') || '' // Fallback to empty string if not set
 
 // Placeholder for the actual API call
@@ -69,7 +71,7 @@ onMounted(async () => {
 })
 
 const currentGroupId = computed(() => {
-  const groupId = route.params.groupId as string | undefined;
+  const groupId = route.params.type as string | undefined;
   return groupId;
 })
 
@@ -123,13 +125,6 @@ function handleConnectionTested(result: { success: boolean; message: string }) {
   // Connection test results are handled by individual components
 }
 
-// For editable form
-import { type Setting } from '@/components/settings/GlobalSettingsSidebarNav.vue' // Import Setting interface
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-
 // Reactive form values
 const formValues = ref<Record<string, string | number | boolean>>({})
 
@@ -161,8 +156,6 @@ function createInitialValues(settings: Setting[]) {
   return values
 }
 
-
-
 // Watch for group changes and set form values
 watch(() => selectedGroup.value, (newGroup) => {
   if (newGroup?.settings) {
@@ -222,8 +215,6 @@ async function handleSubmit(event: Event) {
       throw new Error(errorData.error || errorData.message || `${t('globalSettings.errors.saveSettings')}: ${response.statusText} (status: ${response.status})`)
     }
 
-
-     
     const result = await response.json()
 
     if (!result.success) {
@@ -265,13 +256,11 @@ async function handleSubmit(event: Event) {
     console.error('Failed to save settings:', err)
   }
 }
-
 </script>
 
 <template>
   <DashboardLayout :title="t('globalSettings.title')">
     <div class="hidden space-y-6 pb-16 md:block">
-
       <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
         <aside class="lg:w-1/5">
           <GlobalSettingsSidebarNav :groups="settingGroups" />
@@ -281,7 +270,6 @@ async function handleSubmit(event: Event) {
           <div v-if="isLoading" class="text-muted-foreground">{{ t('globalSettings.loading') }}</div>
           <div v-else-if="error" class="text-red-500">{{ t('globalSettings.errors.loadSettings') }}: {{ error }}</div>
 
-
           <div v-else-if="selectedGroup" class="space-y-6">
             <!-- Custom Component -->
             <component
@@ -355,7 +343,6 @@ async function handleSubmit(event: Event) {
             </Card>
           </div>
 
-
           <div v-else-if="!currentGroupId && settingGroups.length > 0">
             <p class="text-muted-foreground">{{ t('globalSettings.form.selectCategory') }}</p>
           </div>