@podosoft/podokit 0.5.1 → 0.7.0

package/dist/templates/modules/admin-dashboard/files/apps/api/src/site-settings/site-settings.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from "@nestjs/common";
+import { InjectRepository } from "@nestjs/typeorm";
+import { Repository } from "typeorm";
+import { AppSetting } from "../settings/app-setting.entity";
+import { StorageService } from "../storage/storage.service";
+
+/** Public, admin-editable site settings (name, description, favicon, …). Stored
+ *  as `site.*` string keys in the shared `app_setting` table; the favicon binary
+ *  lives in object storage (MinIO/S3) and is served from a stable endpoint. */
+
+const PREFIX = "site.";
+const FAVICON_KEY = "site/favicon"; // object-storage key
+
+/** Keys exposed publicly (read by every page for title/branding). */
+export const PUBLIC_SITE_KEYS = [
+  "name",
+  "description",
+  "supportEmail",
+  "footerText",
+  "brandColor",
+  "termsUrl",
+  "privacyUrl",
+  "locale",
+  "timezone",
+  "maintenanceMode",
+  "allowSignup",
+] as const;
+
+export interface SiteFavicon {
+  body: Buffer;
+  contentType: string;
+}
+
+@Injectable()
+export class SiteSettingsService {
+  constructor(
+    @InjectRepository(AppSetting) private readonly repo: Repository<AppSetting>,
+    private readonly storage: StorageService,
+  ) {}
+
+  /** All `site.*` values as a plain map (keys without the prefix). */
+  async getAll(): Promise<Record<string, string>> {
+    const rows = await this.repo.find();
+    const out: Record<string, string> = {};
+    for (const row of rows) {
+      if (row.key.startsWith(PREFIX)) out[row.key.slice(PREFIX.length)] = row.value;
+    }
+    return out;
+  }
+
+  async get(key: string): Promise<string | null> {
+    const row = await this.repo.findOne({ where: { key: PREFIX + key } });
+    return row?.value ?? null;
+  }
+
+  /** Upsert several site settings at once. Returns the full updated map. */
+  async setMany(update: Record<string, string>): Promise<Record<string, string>> {
+    for (const [key, value] of Object.entries(update)) {
+      await this.repo.upsert({ key: PREFIX + key, value }, ["key"]);
+    }
+    return this.getAll();
+  }
+
+  /** Store an uploaded favicon in object storage and record its metadata. */
+  async setFavicon(body: Buffer, contentType: string): Promise<void> {
+    await this.storage.put(FAVICON_KEY, body, contentType);
+    await this.setMany({ faviconContentType: contentType, faviconUpdatedAt: `${Date.now()}` });
+  }
+
+  async getFavicon(): Promise<SiteFavicon | null> {
+    const contentType = await this.get("faviconContentType");
+    if (!contentType) return null;
+    try {
+      return { body: await this.storage.get(FAVICON_KEY), contentType };
+    } catch {
+      return null;
+    }
+  }
+
+  /** Cache-busting version token so the browser refetches the favicon after a change. */
+  async faviconVersion(): Promise<string | null> {
+    return this.get("faviconUpdatedAt");
+  }
+}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/app.d.ts

@@ -1,4 +1,5 @@
 import type { Locale } from "$lib/i18n/messages";
+import type { SiteSettings } from "$lib/site.svelte";
 
 export type SessionUser = {
   id: string;
@@ -19,6 +20,7 @@ declare global {
       user: SessionUser | null;
       session: { id: string; impersonatedBy?: string | null } | null;
       locale: Locale;
+      site: SiteSettings | null;
     }
   }
 }

package/dist/templates/modules/admin-dashboard/files/apps/web/src/hooks.server.ts

@@ -1,9 +1,20 @@
 import type { Handle } from "@sveltejs/kit";
 import { serverApiClient } from "$lib/server/api";
 import { resolveLocale } from "$lib/i18n/messages";
+import type { SiteSettings } from "$lib/site.svelte";
 
 export const handle: Handle = async ({ event, resolve }) => {
-  event.locals.locale = resolveLocale(event.cookies.get("locale"));
+  // Public site settings (branding, locale/timezone defaults, maintenance, …),
+  // loaded once here and reused by the layout load. A visitor with no locale
+  // cookie falls back to the admin-configured site locale, then the app default.
+  let site: SiteSettings | null = null;
+  try {
+    site = await serverApiClient(event).get<SiteSettings>("/site/settings");
+  } catch {
+    site = null;
+  }
+  event.locals.site = site;
+  event.locals.locale = resolveLocale(event.cookies.get("locale") ?? site?.locale ?? undefined);
   try {
     const { data } = await serverApiClient(event).auth.getSession();
     event.locals.user = (data?.user as App.Locals["user"]) ?? null;

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

@@ -0,0 +1,37 @@
+import type { Component } from "svelte";
+import type { Messages } from "$lib/i18n/messages";
+// Modules import their nav-entry icons here.
+// podokit:begin:admin-nav-imports
+// podokit:end:admin-nav-imports
+
+// Module-driven admin menu registry. Modules append their sidebar nav entries and
+// settings tabs at the markers below via `podo add` injection, so the admin menu
+// grows and shrinks with the installed module set — no edits to app-sidebar or
+// the settings page. Empty until a module registers.
+
+/** A sidebar nav entry contributed by a module: a link, a label resolved from the
+ *  current locale (from the module's own i18n block), and an icon. */
+export type AdminNavEntry = {
+  href: string;
+  label: (t: Messages) => string;
+  icon: Component;
+  adminOnly?: boolean;
+};
+
+/** A settings tab contributed by a module: a tab value, a label resolved from the
+ *  current locale, and the panel component. */
+export type AdminSettingsSection = {
+  value: string;
+  label: (t: Messages) => string;
+  component: Component;
+};
+
+export const moduleNavEntries: AdminNavEntry[] = [
+  // podokit:begin:admin-nav-entries
+  // podokit:end:admin-nav-entries
+];
+
+export const moduleSettingsSections: AdminSettingsSection[] = [
+  // podokit:begin:admin-settings
+  // podokit:end:admin-settings
+];

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/app-sidebar.svelte

@@ -8,26 +8,28 @@
   import ScrollTextIcon from "@lucide/svelte/icons/scroll-text";
   import Building2Icon from "@lucide/svelte/icons/building-2";
   import SettingsIcon from "@lucide/svelte/icons/settings";
+  import HouseIcon from "@lucide/svelte/icons/house";
   import { getI18n } from "$lib/i18n";
+  import { moduleNavEntries, type AdminNavEntry } from "$lib/admin/registry.svelte";
   import type { SessionUser } from "../../app.d.ts";
-  import type { Messages } from "$lib/i18n/messages";
-  import type { Component } from "svelte";
 
   let { user, capabilities }: { user: SessionUser; capabilities?: { auditLog?: boolean; organization?: boolean } } = $props();
   const i18n = getI18n();
 
-  type NavItem = { href: string; key: keyof Messages["nav"]; icon: Component; adminOnly?: boolean };
+  type NavItem = AdminNavEntry;
   const items = $derived<NavItem[]>([
-    { href: "/admin", key: "overview", icon: LayoutDashboardIcon },
-    { href: "/admin/users", key: "users", icon: UsersIcon, adminOnly: true },
-    { href: "/admin/sessions", key: "sessions", icon: MonitorSmartphoneIcon, adminOnly: true },
+    { href: "/admin", label: (t) => t.nav.overview, icon: LayoutDashboardIcon },
+    { href: "/admin/users", label: (t) => t.nav.users, icon: UsersIcon, adminOnly: true },
+    { href: "/admin/sessions", label: (t) => t.nav.sessions, icon: MonitorSmartphoneIcon, adminOnly: true },
     ...(capabilities?.organization
-      ? [{ href: "/admin/organizations", key: "organizations", icon: Building2Icon, adminOnly: true } as NavItem]
+      ? [{ href: "/admin/organizations", label: (t) => t.nav.organizations, icon: Building2Icon, adminOnly: true } as NavItem]
       : []),
     ...(capabilities?.auditLog
-      ? [{ href: "/admin/audit", key: "audit", icon: ScrollTextIcon, adminOnly: true } as NavItem]
+      ? [{ href: "/admin/audit", label: (t) => t.nav.audit, icon: ScrollTextIcon, adminOnly: true } as NavItem]
       : []),
-    { href: "/admin/settings", key: "settings", icon: SettingsIcon, adminOnly: true },
+    // Module-contributed entries (present only for installed modules).
+    ...moduleNavEntries,
+    { href: "/admin/settings", label: (t) => t.nav.settings, icon: SettingsIcon, adminOnly: true },
   ]);
   const visible = $derived(items.filter((item) => !item.adminOnly || user.role === "admin"));
 </script>
@@ -46,11 +48,11 @@
       <Sidebar.Menu>
         {#each visible as item (item.href)}
           <Sidebar.MenuItem>
-            <Sidebar.MenuButton isActive={page.url.pathname === item.href} tooltipContent={i18n.t.nav[item.key]}>
+            <Sidebar.MenuButton isActive={page.url.pathname === item.href} tooltipContent={item.label(i18n.t)}>
               {#snippet child({ props })}
                 <a href={item.href} {...props}>
                   <item.icon />
-                  <span>{i18n.t.nav[item.key]}</span>
+                  <span>{item.label(i18n.t)}</span>
                 </a>
               {/snippet}
             </Sidebar.MenuButton>
@@ -60,6 +62,18 @@
     </Sidebar.Group>
   </Sidebar.Content>
   <Sidebar.Footer>
+    <Sidebar.Menu>
+      <Sidebar.MenuItem>
+        <Sidebar.MenuButton tooltipContent={i18n.t.nav.home}>
+          {#snippet child({ props })}
+            <a href="/" {...props}>
+              <HouseIcon />
+              <span>{i18n.t.nav.home}</span>
+            </a>
+          {/snippet}
+        </Sidebar.MenuButton>
+      </Sidebar.MenuItem>
+    </Sidebar.Menu>
     <SidebarUserMenu {user} />
   </Sidebar.Footer>
 </Sidebar.Root>

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  // Public site footer: renders the admin-configured footer text and links
+  // (support email, terms, privacy). Each element only shows when its value is
+  // set in Settings, so an unconfigured site has no empty footer.
+  import { site } from "$lib/site.svelte";
+  import { getI18n } from "$lib/i18n";
+
+  const i18n = getI18n();
+  const s = $derived(site.value);
+  const hasLinks = $derived(Boolean(s.supportEmail || s.termsUrl || s.privacyUrl));
+</script>
+
+{#if s.footerText || hasLinks}
+  <footer class="text-muted-foreground flex flex-col items-center gap-1 px-4 py-6 text-center text-sm">
+    {#if s.footerText}
+      <p>{s.footerText}</p>
+    {/if}
+    {#if hasLinks}
+      <nav class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+        {#if s.supportEmail}
+          <a href={`mailto:${s.supportEmail}`} class="hover:text-foreground hover:underline">{i18n.t.footer.support}</a>
+        {/if}
+        {#if s.termsUrl}
+          <a href={s.termsUrl} class="hover:text-foreground hover:underline">{i18n.t.footer.terms}</a>
+        {/if}
+        {#if s.privacyUrl}
+          <a href={s.privacyUrl} class="hover:text-foreground hover:underline">{i18n.t.footer.privacy}</a>
+        {/if}
+      </nav>
+    {/if}
+  </footer>
+{/if}

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).",
@@ -285,6 +307,9 @@ const en = {
     verified: "Verified",
     unverified: "Unverified",
   },
+  // Modules add their i18n blocks here.
+  // podokit:begin:messages-en
+  // podokit:end:messages-en
 };
 
 export type Messages = typeof en;
@@ -292,6 +317,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 +367,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 +400,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: "환경변수로 설정되어 시작 시 적용됩니다(읽기 전용).",
@@ -566,6 +613,9 @@ const ko: Messages = {
     verified: "인증됨",
     unverified: "미인증",
   },
+  // Modules add their i18n blocks here.
+  // podokit:begin:messages-ko
+  // podokit:end:messages-ko
 };
 
 export const messages: Record<Locale, Messages> = { en, ko };

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,9 @@
   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 { moduleSettingsSections } from "$lib/admin/registry.svelte";
   import { toast } from "svelte-sonner";
   import { api } from "$lib/api";
   import { getI18n } from "$lib/i18n";
@@ -220,19 +223,41 @@
     <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>
+      {#each moduleSettingsSections as s (s.value)}
+        <Tabs.Trigger value={s.value}>{s.label(i18n.t)}</Tabs.Trigger>
+      {/each}
+    </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>
+
+    {#each moduleSettingsSections as s (s.value)}
+      <Tabs.Content value={s.value} class="mt-6">
+        <s.component />
+      </Tabs.Content>
+    {/each}
+  </Tabs.Root>
 </div>
 
 <!-- Social login: manage every provider (list ⇄ add/edit form) in one dialog -->