@podosoft/podokit 0.5.0 → 0.6.0

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/i18n/index.ts

@@ -1,4 +1,5 @@
 import { getContext, setContext } from "svelte";
+import { site } from "$lib/site.svelte";
 import type { Locale, Messages } from "./messages";
 
 const KEY = Symbol("i18n");
@@ -20,8 +21,20 @@ export function fmt(template: string, values: Record<string, string | number>):
   );
 }
 
-// Render a timestamp in the viewer's own locale and timezone (browser defaults),
-// so dates always match the user's regional settings. Used across all pages.
+// Render a timestamp in the site's configured timezone when an admin has set one
+// (Settings → General), otherwise in the viewer's own browser timezone. Used
+// across all pages.
 export function formatDateTime(value: string | Date): string {
-  return new Date(value).toLocaleString();
+  const date = new Date(value);
+  const timeZone = site.value.timezone || undefined;
+  if (timeZone) {
+    // A misconfigured timezone would throw a RangeError — fall back to the
+    // browser default rather than breaking the page.
+    try {
+      return date.toLocaleString(undefined, { timeZone });
+    } catch {
+      /* invalid timeZone — use the browser default below */
+    }
+  }
+  return date.toLocaleString();
 }

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/i18n/messages.ts

@@ -11,6 +11,8 @@ export const localeNames: Record<Locale, string> = {
 const en = {
   common: { appName: "Admin" },
   landing: { title: "Welcome", subtitle: "This is your app's home page. Replace it with your own content — the admin area lives under /admin.", openAdmin: "Open admin" },
+  footer: { support: "Support", terms: "Terms", privacy: "Privacy" },
+  maintenance: { title: "Under maintenance", subtitle: "The site is temporarily unavailable. Please check back soon.", adminHint: "Administrators can sign in to manage the site.", signIn: "Admin sign in" },
   language: { label: "Language" },
   toolbar: { filter: "Filter", search: "Search", searchButton: "Search", all: "All" },
   theme: { toggle: "Toggle theme", light: "Light", dark: "Dark", system: "System" },
@@ -59,7 +61,7 @@ const en = {
     resendVerification: "Resend verification email",
     emailNotVerified: "Verify your email before signing in.",
   },
-  nav: { overview: "Overview", users: "Users", sessions: "Sessions", organizations: "Organizations", audit: "Audit log", account: "Account", settings: "Settings", signOut: "Sign out" },
+  nav: { overview: "Overview", users: "Users", sessions: "Sessions", organizations: "Organizations", audit: "Audit log", account: "Account", settings: "Settings", home: "Back to home", signOut: "Sign out" },
   passkeys: {
     title: "Passkeys", subtitle: "Passwordless sign-in with your device (Face ID, fingerprint, security key).",
     name: "Name", namePlaceholder: "e.g. MacBook", add: "Add passkey", remove: "Remove", untitled: "Passkey",
@@ -92,7 +94,27 @@ const en = {
     createdTitle: "API key created", createdDesc: "Copy it now — you will not be able to see it again.",
     copy: "Copy", copied: "Copied to clipboard", done: "Done",
   },
+  general: {
+    tab: "General",
+    brandingTitle: "Branding", brandingDesc: "The site name and icon shown in the browser and across the app.",
+    siteName: "Site name", siteNamePlaceholder: "My App",
+    siteNameHint: "Used as the browser tab title and wherever the app name appears.",
+    favicon: "Browser icon (favicon)",
+    faviconHint: "SVG (recommended) or a square PNG 512×512, ≤ 1 MB. Applied to every page.",
+    iconSaved: "Icon updated.", iconError: "Failed to upload the icon.", iconTooBig: "Icon must be 1 MB or smaller.",
+    brandColor: "Brand color",
+    infoTitle: "Site info", infoDesc: "Optional details used in meta tags, the footer, and links.",
+    description: "Description", descriptionPlaceholder: "A short tagline for your site",
+    supportEmail: "Support email", footerText: "Footer text",
+    termsUrl: "Terms URL", privacyUrl: "Privacy URL",
+    locale: "Default language", timezone: "Default timezone",
+    opsTitle: "Operations",
+    maintenance: "Maintenance mode", maintenanceDesc: "Show a maintenance page to non-admins.",
+    allowSignup: "Allow public sign-up", allowSignupDesc: "Turn off to make the app invite-only.",
+    save: "Save changes", saving: "Saving…", saved: "General settings saved.", saveError: "Failed to save settings.",
+  },
   settings: {
+    tab: "Authentication",
     title: "Settings", subtitle: "Which authentication features are enabled, and how they are configured.",
     authFeaturesTitle: "Authentication features", authFeaturesSubtitle: "Toggle sign-in methods and security features. Changes apply immediately.",
     serverConfigTitle: "Server configuration", serverConfigSubtitle: "Set through environment variables and applied at startup (read-only).",
@@ -292,6 +314,8 @@ export type Messages = typeof en;
 const ko: Messages = {
   common: { appName: "관리자" },
   landing: { title: "환영합니다", subtitle: "앱의 홈 페이지입니다. 원하는 내용으로 교체하세요 — 관리자 기능은 /admin 에 있습니다.", openAdmin: "관리자 열기" },
+  footer: { support: "고객지원", terms: "이용약관", privacy: "개인정보처리방침" },
+  maintenance: { title: "점검 중", subtitle: "사이트를 일시적으로 사용할 수 없습니다. 잠시 후 다시 확인해 주세요.", adminHint: "관리자는 로그인하여 사이트를 관리할 수 있습니다.", signIn: "관리자 로그인" },
   language: { label: "언어" },
   toolbar: { filter: "필터", search: "검색", searchButton: "검색", all: "전체" },
   theme: { toggle: "테마 전환", light: "라이트", dark: "다크", system: "시스템" },
@@ -340,7 +364,7 @@ const ko: Messages = {
     emailNotVerified: "로그인 전에 이메일을 인증해 주세요.",
     resetFailed: "재설정에 실패했습니다",
   },
-  nav: { overview: "개요", users: "회원", sessions: "세션", organizations: "조직", audit: "감사 로그", account: "계정", settings: "설정", signOut: "로그아웃" },
+  nav: { overview: "개요", users: "회원", sessions: "세션", organizations: "조직", audit: "감사 로그", account: "계정", settings: "설정", home: "홈으로 돌아가기", signOut: "로그아웃" },
   passkeys: {
     title: "패스키", subtitle: "기기로 비밀번호 없이 로그인(Face ID, 지문, 보안 키).",
     name: "이름", namePlaceholder: "예: MacBook", add: "패스키 추가", remove: "삭제", untitled: "패스키",
@@ -373,7 +397,27 @@ const ko: Messages = {
     createdTitle: "API 키 생성됨", createdDesc: "지금 복사하세요 — 다시 볼 수 없습니다.",
     copy: "복사", copied: "클립보드에 복사됨", done: "완료",
   },
+  general: {
+    tab: "일반",
+    brandingTitle: "브랜딩", brandingDesc: "브라우저와 앱 전반에 표시되는 사이트 이름과 아이콘입니다.",
+    siteName: "사이트 이름", siteNamePlaceholder: "My App",
+    siteNameHint: "브라우저 탭 제목과 앱 이름이 쓰이는 곳에 사용됩니다.",
+    favicon: "브라우저 아이콘 (favicon)",
+    faviconHint: "SVG(권장) 또는 정사각 PNG 512×512, 1 MB 이하. 모든 페이지에 적용됩니다.",
+    iconSaved: "아이콘을 변경했습니다.", iconError: "아이콘 업로드에 실패했습니다.", iconTooBig: "아이콘은 1 MB 이하여야 합니다.",
+    brandColor: "브랜드 색상",
+    infoTitle: "사이트 정보", infoDesc: "메타 태그·푸터·링크에 쓰이는 선택 항목입니다.",
+    description: "설명", descriptionPlaceholder: "사이트를 한 줄로 소개",
+    supportEmail: "지원 이메일", footerText: "푸터 문구",
+    termsUrl: "약관 URL", privacyUrl: "개인정보 URL",
+    locale: "기본 언어", timezone: "기본 시간대",
+    opsTitle: "운영",
+    maintenance: "유지보수 모드", maintenanceDesc: "관리자 외 사용자에게 점검 페이지를 표시합니다.",
+    allowSignup: "공개 가입 허용", allowSignupDesc: "끄면 초대 전용으로 전환됩니다.",
+    save: "변경 저장", saving: "저장 중…", saved: "일반 설정을 저장했습니다.", saveError: "설정 저장에 실패했습니다.",
+  },
   settings: {
+    tab: "인증",
     title: "설정", subtitle: "활성화된 인증 기능과 구성 방법입니다.",
     authFeaturesTitle: "인증 기능", authFeaturesSubtitle: "로그인 수단과 보안 기능을 켜고 끕니다. 변경은 즉시 적용됩니다.",
     serverConfigTitle: "서버 구성", serverConfigSubtitle: "환경변수로 설정되어 시작 시 적용됩니다(읽기 전용).",

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/site.svelte.ts

@@ -0,0 +1,50 @@
+// Reactive site branding (name, favicon, …) shared between the layout (which
+// applies the browser title/favicon) and the admin general-settings form (which
+// updates it live). Initialised from the server load; patched after a save.
+export interface SiteSettings {
+  name: string | null;
+  description: string | null;
+  supportEmail: string | null;
+  footerText: string | null;
+  brandColor: string | null;
+  termsUrl: string | null;
+  privacyUrl: string | null;
+  locale: string | null;
+  timezone: string | null;
+  maintenanceMode: string | null;
+  allowSignup: string | null;
+  hasFavicon: boolean;
+  faviconVersion: string | null;
+}
+
+const empty: SiteSettings = {
+  name: null,
+  description: null,
+  supportEmail: null,
+  footerText: null,
+  brandColor: null,
+  termsUrl: null,
+  privacyUrl: null,
+  locale: null,
+  timezone: null,
+  maintenanceMode: null,
+  allowSignup: null,
+  hasFavicon: false,
+  faviconVersion: null,
+};
+
+let current = $state<SiteSettings>({ ...empty });
+
+export const site = {
+  get value(): SiteSettings {
+    return current;
+  },
+  /** Seed from the server load (idempotent). */
+  init(v: Partial<SiteSettings> | null | undefined): void {
+    if (v) current = { ...empty, ...v };
+  },
+  /** Merge in changes so the layout re-applies title/favicon immediately. */
+  patch(v: Partial<SiteSettings>): void {
+    current = { ...current, ...v };
+  },
+};

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(app)/admin/settings/+page.svelte

@@ -7,6 +7,8 @@
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
   import * as Dialog from "$lib/components/ui/dialog";
+  import * as Tabs from "$lib/components/ui/tabs";
+  import GeneralSettings from "./general-settings.svelte";
   import { toast } from "svelte-sonner";
   import { api } from "$lib/api";
   import { getI18n } from "$lib/i18n";
@@ -220,19 +222,32 @@
     <p class="text-muted-foreground text-sm">{i18n.t.settings.subtitle}</p>
   </div>
 
-  {#each sections as section (section.title)}
-    <section class="flex flex-col gap-3">
-      <div>
-        <h2 class="text-lg font-semibold">{section.title}</h2>
-        <p class="text-muted-foreground text-sm">{section.subtitle}</p>
-      </div>
-      <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        {#each section.items as item (item.key)}
-          {@render card(item)}
-        {/each}
-      </div>
-    </section>
-  {/each}
+  <Tabs.Root value="general">
+    <Tabs.List>
+      <Tabs.Trigger value="general">{i18n.t.general.tab}</Tabs.Trigger>
+      <Tabs.Trigger value="auth">{i18n.t.settings.tab}</Tabs.Trigger>
+    </Tabs.List>
+
+    <Tabs.Content value="general" class="mt-6">
+      <GeneralSettings />
+    </Tabs.Content>
+
+    <Tabs.Content value="auth" class="mt-6 flex flex-col gap-6">
+      {#each sections as section (section.title)}
+        <section class="flex flex-col gap-3">
+          <div>
+            <h2 class="text-lg font-semibold">{section.title}</h2>
+            <p class="text-muted-foreground text-sm">{section.subtitle}</p>
+          </div>
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {#each section.items as item (item.key)}
+              {@render card(item)}
+            {/each}
+          </div>
+        </section>
+      {/each}
+    </Tabs.Content>
+  </Tabs.Root>
 </div>
 
 <!-- Social login: manage every provider (list ⇄ add/edit form) in one dialog -->

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(app)/admin/settings/general-settings.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Button } from "$lib/components/ui/button";
+  import { Switch } from "$lib/components/ui/switch";
+  import * as Card from "$lib/components/ui/card";
+  import { toast } from "svelte-sonner";
+  import { api } from "$lib/api";
+  import { getI18n } from "$lib/i18n";
+  import { site, type SiteSettings } from "$lib/site.svelte";
+
+  const i18n = getI18n();
+  const t = $derived(i18n.t.general);
+
+  // Text fields, seeded from the current site settings.
+  const s = $derived(site.value);
+  let form = $state({
+    name: "",
+    description: "",
+    supportEmail: "",
+    footerText: "",
+    brandColor: "",
+    termsUrl: "",
+    privacyUrl: "",
+    locale: "",
+    timezone: "",
+  });
+  let maintenanceMode = $state(false);
+  let allowSignup = $state(true);
+  let seeded = $state(false);
+  $effect(() => {
+    if (seeded) return;
+    form = {
+      name: s.name ?? "",
+      description: s.description ?? "",
+      supportEmail: s.supportEmail ?? "",
+      footerText: s.footerText ?? "",
+      brandColor: s.brandColor ?? "",
+      termsUrl: s.termsUrl ?? "",
+      privacyUrl: s.privacyUrl ?? "",
+      locale: s.locale ?? "",
+      timezone: s.timezone ?? "",
+    };
+    maintenanceMode = s.maintenanceMode === "true";
+    allowSignup = s.allowSignup !== "false";
+    seeded = true;
+  });
+
+  let saving = $state(false);
+  async function save(): Promise<void> {
+    saving = true;
+    try {
+      const payload: Record<string, string> = {
+        ...form,
+        maintenanceMode: String(maintenanceMode),
+        allowSignup: String(allowSignup),
+      };
+      await api.put("/site/settings", payload);
+      site.patch(payload as Partial<SiteSettings>); // live: browser title updates now
+      toast.success(t.saved);
+    } catch {
+      toast.error(t.saveError);
+    } finally {
+      saving = false;
+    }
+  }
+
+  const ICON_TYPES = ".svg,.png,.ico";
+  let uploading = $state(false);
+  const faviconSrc = $derived(
+    s.hasFavicon ? `/api/site/favicon?v=${s.faviconVersion ?? ""}` : "/favicon.svg",
+  );
+  async function uploadFavicon(e: Event): Promise<void> {
+    const input = e.currentTarget as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    if (file.size > 1024 * 1024) {
+      toast.error(t.iconTooBig);
+      input.value = "";
+      return;
+    }
+    uploading = true;
+    try {
+      const body = new FormData();
+      body.append("file", file);
+      const res = await fetch("/api/site/favicon", { method: "POST", body });
+      if (!res.ok) throw new Error(String(res.status));
+      const { version } = (await res.json()) as { version: string | null };
+      site.patch({ hasFavicon: true, faviconVersion: version }); // live: favicon refetches
+      toast.success(t.iconSaved);
+    } catch {
+      toast.error(t.iconError);
+    } finally {
+      uploading = false;
+      input.value = "";
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-6">
+  <div class="grid items-start gap-6 lg:grid-cols-2">
+    <Card.Root>
+    <Card.Header>
+      <Card.Title>{t.brandingTitle}</Card.Title>
+      <Card.Description>{t.brandingDesc}</Card.Description>
+    </Card.Header>
+    <Card.Content class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1.5">
+        <Label for="site-name">{t.siteName}</Label>
+        <Input id="site-name" bind:value={form.name} placeholder={t.siteNamePlaceholder} />
+        <p class="text-muted-foreground text-xs">{t.siteNameHint}</p>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <Label>{t.favicon}</Label>
+        <div class="flex items-center gap-3">
+          <img src={faviconSrc} alt="favicon" class="bg-muted size-12 rounded-md border p-1" />
+          <div class="flex flex-col gap-1.5">
+            <input
+              type="file"
+              accept={ICON_TYPES}
+              disabled={uploading}
+              onchange={uploadFavicon}
+              class="text-sm file:mr-3 file:rounded-md file:border-0 file:bg-secondary file:px-3 file:py-1.5 file:text-sm"
+            />
+            <p class="text-muted-foreground text-xs">{t.faviconHint}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <Label for="brand-color">{t.brandColor}</Label>
+        <Input id="brand-color" bind:value={form.brandColor} placeholder="#6d28d9" />
+      </div>
+    </Card.Content>
+  </Card.Root>
+
+  <Card.Root class="lg:row-span-2">
+    <Card.Header>
+      <Card.Title>{t.infoTitle}</Card.Title>
+      <Card.Description>{t.infoDesc}</Card.Description>
+    </Card.Header>
+    <Card.Content class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1.5">
+        <Label for="site-desc">{t.description}</Label>
+        <Input id="site-desc" bind:value={form.description} placeholder={t.descriptionPlaceholder} />
+      </div>
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div class="flex flex-col gap-1.5">
+          <Label for="support-email">{t.supportEmail}</Label>
+          <Input id="support-email" type="email" bind:value={form.supportEmail} placeholder="support@example.com" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <Label for="footer">{t.footerText}</Label>
+          <Input id="footer" bind:value={form.footerText} placeholder="© 2026 Example" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <Label for="terms">{t.termsUrl}</Label>
+          <Input id="terms" bind:value={form.termsUrl} placeholder="/terms" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <Label for="privacy">{t.privacyUrl}</Label>
+          <Input id="privacy" bind:value={form.privacyUrl} placeholder="/privacy" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <Label for="locale">{t.locale}</Label>
+          <Input id="locale" bind:value={form.locale} placeholder="en" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <Label for="timezone">{t.timezone}</Label>
+          <Input id="timezone" bind:value={form.timezone} placeholder="UTC" />
+        </div>
+      </div>
+    </Card.Content>
+  </Card.Root>
+
+  <Card.Root>
+    <Card.Header>
+      <Card.Title>{t.opsTitle}</Card.Title>
+    </Card.Header>
+    <Card.Content class="flex flex-col gap-4">
+      <div class="flex items-center justify-between gap-4">
+        <div class="flex flex-col">
+          <Label>{t.maintenance}</Label>
+          <p class="text-muted-foreground text-sm">{t.maintenanceDesc}</p>
+        </div>
+        <Switch bind:checked={maintenanceMode} aria-label={t.maintenance} />
+      </div>
+      <div class="flex items-center justify-between gap-4">
+        <div class="flex flex-col">
+          <Label>{t.allowSignup}</Label>
+          <p class="text-muted-foreground text-sm">{t.allowSignupDesc}</p>
+        </div>
+        <Switch bind:checked={allowSignup} aria-label={t.allowSignup} />
+      </div>
+    </Card.Content>
+  </Card.Root>
+  </div>
+
+  <div>
+    <Button onclick={save} disabled={saving}>{saving ? t.saving : t.save}</Button>
+  </div>
+</div>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(auth)/+layout.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
   import LanguageSwitch from "$lib/components/language-switch.svelte";
+  import SiteFooter from "$lib/components/site-footer.svelte";
   let { children } = $props();
 </script>
 
-<div class="bg-muted/30 relative flex min-h-svh items-center justify-center p-6">
+<div class="bg-muted/30 relative flex min-h-svh flex-col p-6">
   <div class="absolute right-4 top-4">
     <LanguageSwitch />
   </div>
-  <div class="w-full max-w-sm">
-    {@render children()}
+  <div class="flex flex-1 items-center justify-center">
+    <div class="w-full max-w-sm">
+      {@render children()}
+    </div>
   </div>
+  <SiteFooter />
 </div>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(auth)/login/+page.svelte

@@ -8,11 +8,14 @@
   import * as Alert from "$lib/components/ui/alert";
   import { api } from "$lib/api";
   import { getI18n } from "$lib/i18n";
+  import { site } from "$lib/site.svelte";
 
   import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
   const i18n = getI18n();
+  // Hide the sign-up link when registration is closed from admin Settings.
+  const signupOpen = $derived(site.value.allowSignup !== "false");
   let email = $state("");
   let password = $state("");
   let error = $state<string | null>(null);
@@ -175,7 +178,9 @@
       </div>
     {/if}
   </Card.Content>
-  <Card.Footer class="justify-center">
-    <p class="text-muted-foreground text-sm">{i18n.t.auth.noAccount} <a href="/signup" class="text-foreground hover:underline">{i18n.t.auth.signUp}</a></p>
-  </Card.Footer>
+  {#if signupOpen}
+    <Card.Footer class="justify-center">
+      <p class="text-muted-foreground text-sm">{i18n.t.auth.noAccount} <a href="/signup" class="text-foreground hover:underline">{i18n.t.auth.signUp}</a></p>
+    </Card.Footer>
+  {/if}
 </Card.Root>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/+layout.server.ts

@@ -2,21 +2,41 @@ import type { LayoutServerLoad } from "./$types";
 import { redirect } from "@sveltejs/kit";
 
 // "/" is a public landing page. Auth pages send signed-in users to /admin, and
-// the admin area requires a session.
-const PUBLIC_PATHS = ["/", "/login", "/signup", "/forgot-password", "/reset-password"];
+// the admin area requires a session. /maintenance is public so it renders while
+// the rest of the site is held back.
+const PUBLIC_PATHS = ["/", "/login", "/signup", "/forgot-password", "/reset-password", "/maintenance"];
 const AUTH_PATHS = ["/login", "/signup", "/forgot-password", "/reset-password"];
 
 function isPublic(pathname: string): boolean {
   return PUBLIC_PATHS.some((path) => pathname === path || (path !== "/" && pathname.startsWith(`${path}/`)));
 }
 
-export const load: LayoutServerLoad = ({ locals, url }) => {
+export const load: LayoutServerLoad = async (event) => {
+  const { locals, url } = event;
   const { pathname } = url;
+  // Site settings were loaded once in hooks.server.ts.
+  const site = locals.site;
+  const isAdmin = locals.user?.role === "admin";
+
+  // Maintenance mode holds everyone but admins on a maintenance page. /login and
+  // /maintenance stay reachable so an admin can still sign in and turn it off.
+  const maintenance = site?.maintenanceMode === "true";
+  if (maintenance && !isAdmin && pathname !== "/maintenance" && pathname !== "/login") {
+    redirect(303, "/maintenance");
+  }
+  if (!maintenance && pathname === "/maintenance") {
+    redirect(303, "/");
+  }
+  // Registration closed from the admin Settings: send /signup back to /login.
+  if (site?.allowSignup === "false" && pathname === "/signup") {
+    redirect(303, "/login");
+  }
+
   if (locals.user && AUTH_PATHS.includes(pathname)) {
     redirect(303, "/admin");
   }
   if (!locals.user && !isPublic(pathname)) {
     redirect(303, `/login?redirect=${encodeURIComponent(pathname)}`);
   }
-  return { user: locals.user, locale: locals.locale };
+  return { user: locals.user, locale: locals.locale, site };
 };

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/+layout.svelte

@@ -3,6 +3,7 @@
   import { ModeWatcher } from "mode-watcher";
   import { setI18nContext } from "$lib/i18n";
   import { messages, resolveLocale } from "$lib/i18n/messages";
+  import { site } from "$lib/site.svelte";
 
   let { children, data } = $props();
   const locale = $derived(resolveLocale(data.locale));
@@ -14,7 +15,47 @@
       return locale;
     },
   });
+
+  // Seed the reactive site branding; the general-settings form patches it live.
+  $effect.pre(() => site.init(data.site));
+  // Prefer live store values (patched after a save); fall back to the server load
+  // so SSR renders the saved branding too. Empty falls back to the app.html default.
+  const branding = $derived({
+    name: site.value.name ?? data.site?.name ?? "",
+    description: site.value.description ?? data.site?.description ?? "",
+    brandColor: site.value.brandColor ?? data.site?.brandColor ?? "",
+    hasFavicon: site.value.hasFavicon || Boolean(data.site?.hasFavicon),
+    faviconVersion: site.value.faviconVersion ?? data.site?.faviconVersion ?? "",
+  });
+  // Apply the site name to the browser tab live (avoids a duplicate <title> vs
+  // the app.html default; the default project name stays as the SSR fallback).
+  $effect(() => {
+    if (branding.name) document.title = branding.name;
+  });
+  // Apply the brand color as the theme's primary accent live. Clearing it in
+  // Settings restores the stylesheet default (remove the inline override).
+  $effect(() => {
+    const root = document.documentElement;
+    if (branding.brandColor) {
+      root.style.setProperty("--primary", branding.brandColor);
+      root.style.setProperty("--sidebar-primary", branding.brandColor);
+      root.style.setProperty("--ring", branding.brandColor);
+    } else {
+      root.style.removeProperty("--primary");
+      root.style.removeProperty("--sidebar-primary");
+      root.style.removeProperty("--ring");
+    }
+  });
 </script>
 
+<svelte:head>
+  {#if branding.description}
+    <meta name="description" content={branding.description} />
+  {/if}
+  {#if branding.hasFavicon}
+    <link rel="icon" href={`/api/site/favicon?v=${branding.faviconVersion}`} />
+  {/if}
+</svelte:head>
+
 <ModeWatcher />
 {@render children()}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { Button } from "$lib/components/ui/button";
   import LanguageSwitch from "$lib/components/language-switch.svelte";
   import ThemeToggle from "$lib/components/theme-toggle.svelte";
+  import SiteFooter from "$lib/components/site-footer.svelte";
   import { getI18n } from "$lib/i18n";
 
   const i18n = getI18n();
@@ -19,4 +20,5 @@
     </div>
     <Button href="/admin">{i18n.t.landing.openAdmin}</Button>
   </main>
+  <SiteFooter />
 </div>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/maintenance/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  // Shown to non-admin visitors while maintenance mode is on (see +layout.server.ts).
+  // Admins are never redirected here and can sign in to turn it off.
+  import { Button } from "$lib/components/ui/button";
+  import LanguageSwitch from "$lib/components/language-switch.svelte";
+  import ThemeToggle from "$lib/components/theme-toggle.svelte";
+  import { getI18n } from "$lib/i18n";
+
+  const i18n = getI18n();
+</script>
+
+<div class="flex min-h-svh flex-col">
+  <header class="flex items-center justify-end gap-2 p-4">
+    <LanguageSwitch />
+    <ThemeToggle />
+  </header>
+  <main class="flex flex-1 flex-col items-center justify-center gap-6 px-4 text-center">
+    <div class="flex flex-col gap-3">
+      <h1 class="text-3xl font-semibold">{i18n.t.maintenance.title}</h1>
+      <p class="text-muted-foreground max-w-md">{i18n.t.maintenance.subtitle}</p>
+      <p class="text-muted-foreground text-sm">{i18n.t.maintenance.adminHint}</p>
+    </div>
+    <Button href="/login" variant="outline">{i18n.t.maintenance.signIn}</Button>
+  </main>
+</div>