Add custom site title feature with database migration

src/app/app.vue

@@ -19,6 +19,12 @@ toast.setToast(toastRef);
 // make sure to fetch release early
 useGlobalStore();
 
+// Fetch site title from general configuration with a key for refreshing
+const { data: generalConfig } = await useFetch('/api/admin/general', { key: 'site-title' });
+
+// Compute the title with fallback
+const siteTitle = computed(() => generalConfig.value?.siteTitle || 'WireGuard');
+
 useHead({
   bodyAttrs: {
     class: 'bg-gray-50 dark:bg-neutral-800',
@@ -52,6 +58,6 @@ useHead({
       content: 'black-translucent',
     },
   ],
-  title: 'WireGuard',
+  title: siteTitle,
 });
 </script>

src/app/pages/admin/general.vue

@@ -1,6 +1,14 @@
 <template>
   <main v-if="data">
     <FormElement @submit.prevent="submit">
+      <FormGroup>
+        <FormNullTextField
+          id="site-title"
+          v-model="data.siteTitle"
+          label="Site Title"
+          description="Custom title for browser tabs. Leave empty to use the default 'WireGuard' title."
+        />
+      </FormGroup>
       <FormGroup>
         <FormNumberField
           id="session"

src/i18n/locales/en.json

@@ -137,6 +137,8 @@
   },
   "admin": {
     "general": {
+      "siteTitle": "Site Title",
+      "siteTitleDesc": "Custom title for the web interface",
       "sessionTimeout": "Session Timeout",
       "sessionTimeoutDesc": "Session duration for Remember Me (seconds)",
       "metrics": "Metrics",

src/server/database/migrations/0002_add_site_title.sql

@@ -0,0 +1 @@
+ALTER TABLE general_table ADD COLUMN site_title text;

src/server/database/migrations/meta/_journal.json

@@ -15,6 +15,13 @@
       "when": 1748427001203,
       "tag": "0001_classy_the_stranger",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "6",
+      "when": 1748427002000,
+      "tag": "0002_add_site_title",
+      "breakpoints": true
     }
   ]
 }

src/server/database/repositories/general/schema.ts

@@ -12,6 +12,8 @@ export const general = sqliteTable('general_table', {
   metricsPrometheus: int('metrics_prometheus', { mode: 'boolean' }).notNull(),
   metricsJson: int('metrics_json', { mode: 'boolean' }).notNull(),
   metricsPassword: text('metrics_password'),
+  
+  siteTitle: text('site_title'),
 
   createdAt: text('created_at')
     .notNull()

src/server/database/repositories/general/service.ts

@@ -36,6 +36,7 @@ function createPreparedStatement(db: DBType) {
           metricsPrometheus: true,
           metricsJson: true,
           metricsPassword: true,
+          siteTitle: true,
         },
       })
       .prepare(),

src/server/database/repositories/general/types.ts

@@ -13,11 +13,17 @@ const metricsPassword = z
   .min(1, { message: t('zod.general.metricsPassword') })
   .nullable();
 
+const siteTitle = z
+  .string({ message: 'Site Title' })
+  .nullable();
+
+
 export const GeneralUpdateSchema = z.object({
   sessionTimeout: sessionTimeout,
   metricsPrometheus: metricsEnabled,
   metricsJson: metricsEnabled,
   metricsPassword: metricsPassword,
+  siteTitle: siteTitle,
 });
 
 export type GeneralUpdateType = z.infer<typeof GeneralUpdateSchema>;