Add site settings management and admin config pages

Introduces a new site settings model, Svelte store, and API endpoints for managing site configuration and modules. Adds admin pages for site configuration and module management, updates Navbar and layout to use dynamic site name and favicon, and enhances Sidebar with nested admin navigation. Removes the old admin landing page and redirects /admin to /admin/users.

Author: maxijabase

src/lib/components/Navbar.svelte

@@ -1,21 +1,29 @@
-<script>
-  // @ts-nocheck
+<script lang="ts">
   import UserMenu from '../../routes/utils/widgets/UserMenu.svelte';
   import { Avatar, Button, DarkMode, NavBrand, NavHamburger, Navbar, P, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { steamStore } from '$lib/stores/steamStore';
   import { goto } from '$app/navigation';
   import { onMount } from 'svelte';
   import { regionStore } from '$lib/stores/regionStore';
+  import { siteSettingsStore, loadSiteSettings } from '$lib/stores/siteSettingsStore';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
 
-  /** @type {{fluid?: boolean, drawerHidden?: boolean, list?: boolean}} */
-  let { fluid = true, drawerHidden = $bindable(false), list = false } = $props();
+  interface Props {
+    fluid?: boolean;
+    drawerHidden?: boolean;
+    list?: boolean;
+  }
+
+  let { fluid = true, drawerHidden = $bindable(false), list = false }: Props = $props();
 
   let loading = $state(true);
   let currentRegion = $state('ar');
   let regionDropOpen = $state(false);
 
   onMount(() => {
+    // Load site settings
+    loadSiteSettings();
+
     const unsubscribe = steamStore.subscribe((value) => {
       if (value !== undefined) {
         loading = false;
@@ -40,8 +48,8 @@
   <NavContainer class="mb-px mt-px px-1" {fluid}>
     <NavHamburger onClick={() => (drawerHidden = !drawerHidden)} class="m-0 me-3 md:block lg:hidden" />
     <NavBrand href="/" class={list ? 'w-40' : 'lg:w-60'}>
-      <img src="/images/favicon.png" class="me-2.5 h-6 sm:h-8" alt="Flowbite Logo" />
-      <span class="ml-px self-center whitespace-nowrap text-xl font-semibold dark:text-white sm:text-2xl"> Electric Panel </span>
+      <img src={$siteSettingsStore?.faviconPath || '/images/favicon.png'} class="me-2.5 h-6 sm:h-8" alt="Site Logo" />
+      <span class="ml-px self-center whitespace-nowrap text-xl font-semibold dark:text-white sm:text-2xl"> {$siteSettingsStore?.siteName || 'Electric Panel'} </span>
     </NavBrand>
     <!-- Region selector -->
     <div class="ms-auto flex items-center gap-2 text-gray-500 dark:text-gray-400 sm:order-2">

src/lib/components/Sidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { Sidebar, SidebarDropdownWrapper, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
-  import { AngleDownOutline, AngleUpOutline, ChartOutline, SearchOutline, CogOutline, HomeOutline } from 'flowbite-svelte-icons';
+  import { AngleDownOutline, AngleUpOutline, ChartOutline, SearchOutline, CogOutline, HomeOutline, UsersGroupOutline, GridOutline } from 'flowbite-svelte-icons';
   import MgeOutline from '$lib/components/icons/MgeOutline.svelte';
   import LeaderboardOutline from '$lib/components/icons/LeaderboardOutline.svelte';
   import GamesOutline from '$lib/components/icons/GamesOutline.svelte';
@@ -43,7 +43,16 @@
     href: '/whois'
   };
 
-  const adminItem: NavItem = { name: 'Admin', href: '/admin', icon: CogOutline };
+  const adminItem: NavItem = {
+    name: 'Admin',
+    icon: CogOutline,
+    href: '#',
+    children: [
+      { name: 'Users', href: '/admin/users', icon: UsersGroupOutline },
+      { name: 'Site Configuration', href: '/admin/config', icon: CogOutline },
+      { name: 'Modules', href: '/admin/modules', icon: GridOutline }
+    ]
+  };
 
   let mgeItem = $derived({
     name: 'MGE',
@@ -104,11 +113,24 @@
         {/each}
         {#if showAdmin}
           <li class="my-2 border-t border-gray-200 dark:border-gray-700"></li>
-          <SidebarItem label={adminItem.name} href={adminItem.href} spanClass="ml-3" class={styles.item}>
+          <SidebarDropdownWrapper label={adminItem.name} class="pr-3">
             <svelte:fragment slot="icon">
               <adminItem.icon class={styles.icon} />
             </svelte:fragment>
-          </SidebarItem>
+            <svelte:fragment slot="arrowdown">
+              <AngleDownOutline strokeWidth="3.3" size="sm" />
+            </svelte:fragment>
+            <svelte:fragment slot="arrowup">
+              <AngleUpOutline strokeWidth="3.3" size="sm" />
+            </svelte:fragment>
+            {#each adminItem.children ?? [] as child}
+              <SidebarItem label={child.name} href={child.href} spanClass="ml-3" class={`${styles.item} pl-9`}>
+                <svelte:fragment slot="icon">
+                  <child.icon class={styles.icon} />
+                </svelte:fragment>
+              </SidebarItem>
+            {/each}
+          </SidebarDropdownWrapper>
         {/if}
       </SidebarGroup>
     </nav>

src/lib/models/siteSettings.ts

@@ -0,0 +1,58 @@
+import mongoose from 'mongoose';
+
+interface ISiteSettings {
+  siteName: string;
+  siteDescription?: string;
+  faviconPath?: string;
+  enabledRegions: string[];
+  enabledModules: {
+    mge: boolean;
+    whois: boolean;
+    tf2pickup: boolean;
+  };
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const SiteSettingsSchema = new mongoose.Schema<ISiteSettings>({
+  siteName: {
+    type: String,
+    required: true,
+    default: 'Electric Panel'
+  },
+  siteDescription: {
+    type: String,
+    default: ''
+  },
+  faviconPath: {
+    type: String,
+    default: '/images/favicon.png'
+  },
+  enabledRegions: {
+    type: [String],
+    default: ['ar', 'br']
+  },
+  enabledModules: {
+    mge: {
+      type: Boolean,
+      default: true
+    },
+    whois: {
+      type: Boolean,
+      default: true
+    },
+    tf2pickup: {
+      type: Boolean,
+      default: false
+    }
+  }
+}, {
+  timestamps: true
+});
+
+// Ensure only one settings document exists
+SiteSettingsSchema.index({}, { unique: true });
+
+export const SiteSettings = mongoose.model<ISiteSettings>('SiteSettings', SiteSettingsSchema);
+
+export type { ISiteSettings };

src/lib/stores/siteSettingsStore.ts

@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+
+interface SiteSettings {
+  siteName: string;
+  siteDescription: string;
+  faviconPath: string;
+  enabledRegions: string[];
+  enabledModules: {
+    mge: boolean;
+    whois: boolean;
+    tf2pickup: boolean;
+  };
+}
+
+const defaultSettings: SiteSettings = {
+  siteName: 'Electric Panel',
+  siteDescription: '',
+  faviconPath: '/images/favicon.png',
+  enabledRegions: ['ar', 'br'],
+  enabledModules: {
+    mge: true,
+    whois: true,
+    tf2pickup: false
+  }
+};
+
+export const siteSettingsStore = writable<SiteSettings>(defaultSettings);
+
+// Function to load settings from API
+export async function loadSiteSettings() {
+  try {
+    const response = await fetch('/api/admin/settings');
+    const result = await response.json();
+    
+    if (response.ok) {
+      siteSettingsStore.set(result);
+    }
+  } catch (error) {
+    console.error('Error loading site settings:', error);
+  }
+}
+
+// Function to update settings
+export function updateSiteSettings(settings: Partial<SiteSettings>) {
+  siteSettingsStore.update(current => ({
+    ...current,
+    ...settings
+  }));
+}

src/routes/+layout.svelte

@@ -1,19 +1,43 @@
-<script>
+<script lang="ts">
   import '../app.pcss';
   import '/node_modules/flag-icons/css/flag-icons.min.css';
   import Navbar from '../lib/components/Navbar.svelte';
   import Sidebar from '../lib/components/Sidebar.svelte';
   let drawerHidden = $state(false);
   import { onMount } from 'svelte';
   import { steamStore } from '$lib/stores/steamStore';
+  import { siteSettingsStore, loadSiteSettings } from '$lib/stores/siteSettingsStore';
 
-  /** @type {{data: any, children?: import('svelte').Snippet}} */
-  let { data, children } = $props();
+  interface Props {
+    data: any;
+    children?: import('svelte').Snippet;
+  }
+
+  let { data, children }: Props = $props();
 
   onMount(() => {
     if (data.user) {
       steamStore.set(data.user);
     }
+    // Load site settings
+    loadSiteSettings();
+  });
+
+  // Update favicon when settings change
+  $effect(() => {
+    if (typeof window !== 'undefined' && $siteSettingsStore?.faviconPath) {
+      const link = document.querySelector('link[rel="icon"]') as HTMLLinkElement;
+      if (link) {
+        link.href = $siteSettingsStore.faviconPath;
+      }
+    }
+  });
+
+  // Update page title when settings change
+  $effect(() => {
+    if (typeof window !== 'undefined' && $siteSettingsStore?.siteName) {
+      document.title = $siteSettingsStore.siteName;
+    }
   });
 </script>
 

src/routes/admin/+page.server.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+  throw redirect(302, '/admin/users');
+};