@podosoft/podokit 1.4.2 → 1.6.0

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

@@ -11,9 +11,12 @@
   import { deviceLabel } from "#lib/device-label.js";
   import { toast } from "svelte-sonner";
   import { api } from "#lib/api.js";
+  import { listAccountSessions, revokeAccountSession, type AccountSession } from "#lib/account-sessions.js";
+  import { KeysetPages } from "#lib/admin/sessions.js";
   import { getI18n, fmt, formatDateTime } from "#lib/i18n/index.js";
   import { untrack } from "svelte";
   import type { SessionUser } from "../../app.d.ts";
+  import ImpersonationBanner from "./impersonation-banner.svelte";
   import UserAvatar from "./user-avatar.svelte";
   import {
     ApiError,
@@ -31,7 +34,13 @@
     accountPath = "/account",
     returnPath = "/",
   }: {
-    data: { user: SessionUser; currentSessionId: string | null; capabilities: Capabilities };
+    data: {
+      user: SessionUser;
+      currentSessionId: string | null;
+      capabilities: Capabilities;
+      /** Set by the /account load while an administrator acts as this user. */
+      showImpersonationBanner?: boolean;
+    };
     accountPath?: string;
     returnPath?: string;
   } = $props();
@@ -392,28 +401,34 @@
     await goto("/login", { invalidateAll: true });
   }
 
-  // Sessions — this user's own devices
-  /** better-auth's code for "this session is older than `session.freshAge`". */
+  // Sessions — this user's own devices. The API pages them, because Better Auth's
+  // /list-sessions returns at most 100 and could leave out the current one.
+  /** Better Auth's code for "this session is older than `session.freshAge`". */
   const SESSION_NOT_FRESH = "SESSION_NOT_FRESH";
-  type Session = { id: string; token: string; userAgent?: string | null; ipAddress?: string | null; createdAt: string | Date };
+  type Session = AccountSession & { current: boolean };
   const PAGE_SIZE = DEFAULT_PAGE_SIZE;
+  // The API pages newest first by keyset, so the order is fixed rather than sortable.
+  const sessionsSort: SortState = { key: "createdAt", dir: "desc" };
+  const sessionPages = new KeysetPages();
   let sessions = $state<Session[]>([]);
+  let sessionsTotal = $state(0);
+  let sessionsPagerTotal = $state(0);
   let sessionsPage = $state(1);
-  let sessionsSort = $state<SortState | null>(null);
   let busy = $state(false);
+  let latestSessionsRequest = 0;
   const sessionsColumns: DataTableColumn<Session>[] = [
-    { key: "userAgent", label: i18n.t.sessions.device, sortable: true, value: (s) => deviceLabel(s.userAgent) ?? s.userAgent ?? "" },
-    { key: "ipAddress", label: i18n.t.sessions.ip, sortable: true, value: (s) => s.ipAddress ?? "" },
-    { key: "createdAt", label: i18n.t.sessions.since, sortable: true, value: (s) => new Date(s.createdAt).getTime() },
+    { key: "userAgent", label: i18n.t.sessions.device },
+    { key: "ipAddress", label: i18n.t.sessions.ip },
+    { key: "createdAt", label: i18n.t.sessions.since },
     { key: "status", label: i18n.t.sessions.status },
     { key: "actions", label: "", class: "w-10" },
   ];
   /**
    * True when the session is too old to list sessions.
    *
-   * better-auth guards `/list-sessions` (and `/unlink-account`) with its freshness
-   * middleware, and `session.freshAge` defaults to 24 hours. So for anyone who signed
-   * in yesterday — which is most people, most of the time — this call returns 403
+   * The API keeps better-auth's freshness rule for listing sessions, and
+   * `session.freshAge` defaults to 24 hours. So for anyone who signed in yesterday —
+   * which is most people, most of the time — the list answers 403
    * `SESSION_NOT_FRESH`. It is not a failure to report as one: the tab has to say what
    * happened and what to do, or it is a blank table under an untranslated toast.
    */
@@ -423,32 +438,45 @@
     await api.auth.signOut();
     await goto("/login", { invalidateAll: true });
   }
-  async function loadSessions(): Promise<void> {
-    const { data: res, error } = await api.auth.listSessions();
-    if (error?.code === SESSION_NOT_FRESH) {
-      // Explained in the panel below, not thrown at the corner of the screen.
-      sessionsStale = true;
-      sessions = [];
-      return;
+  /** Loads one page; the current session leads the first. A newer request supersedes any in flight. */
+  async function loadSessions(target = 1): Promise<void> {
+    if (target === 1) sessionPages.reset();
+    const cursor = sessionPages.cursorFor(target);
+    if (cursor === undefined) return;
+    const request = ++latestSessionsRequest;
+    try {
+      const result = await listAccountSessions(api, { limit: PAGE_SIZE, cursor });
+      if (request !== latestSessionsRequest) return;
+      // A revoke can empty the last page; show the one before it instead.
+      if (result.items.length === 0 && target > 1) return loadSessions(target - 1);
+      sessionsStale = false;
+      sessionPages.record(target, result.nextCursor);
+      const others = result.items.map((s) => ({ ...s, current: false }));
+      sessions = target === 1 && result.current ? [{ ...result.current, current: true }, ...others] : others;
+      sessionsTotal = result.total;
+      sessionsPagerTotal = sessionPages.pagerTotal(result.total - (result.current ? 1 : 0), PAGE_SIZE);
+      sessionsPage = target;
+    } catch (error) {
+      if (request !== latestSessionsRequest) return;
+      if (error instanceof ApiError && error.code === SESSION_NOT_FRESH) {
+        // Explained in the panel below, not thrown at the corner of the screen.
+        sessionsStale = true;
+        sessions = [];
+        return;
+      }
+      toast.error(i18n.t.sessions.loadFailed);
     }
-    sessionsStale = false;
-    if (error) return void toast.error(error.message ?? i18n.t.sessions.loadFailed);
-    // Current session first (users expect it on top; also keeps it on page 1),
-    // then newest to oldest.
-    sessions = ((res ?? []) as Session[]).sort((a, b) => {
-      if (a.id === data.currentSessionId) return -1;
-      if (b.id === data.currentSessionId) return 1;
-      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-    });
   }
-  async function revoke(token: string): Promise<void> {
+  async function revoke(id: string): Promise<void> {
     busy = true;
-    const { error } = await api.auth.revokeSession({ token });
-    busy = false;
-    if (error) toast.error(error.message ?? i18n.t.sessions.revokeFailed);
-    else {
+    try {
+      await revokeAccountSession(api, id);
       toast.success(i18n.t.sessions.revoked);
-      await loadSessions();
+      await loadSessions(sessionsPage);
+    } catch {
+      toast.error(i18n.t.sessions.revokeFailed);
+    } finally {
+      busy = false;
     }
   }
   async function signOutOthers(): Promise<void> {
@@ -531,6 +559,9 @@
 </script>
 
 <div class="flex flex-col gap-6">
+  {#if data.showImpersonationBanner}
+    <ImpersonationBanner email={data.user.email} class="rounded-md" />
+  {/if}
   <h1 class="text-2xl font-semibold">{i18n.t.account.title}</h1>
 
   <div class="flex flex-col gap-6 lg:flex-row">
@@ -824,7 +855,7 @@
         <Card.Root>
           <Card.Header class="flex flex-row items-center justify-between gap-2">
             <Card.Title>{i18n.t.sessions.title}</Card.Title>
-            <Button variant="outline" size="sm" disabled={busy || sessionsStale || sessions.length <= 1} onclick={signOutOthers}>{i18n.t.sessions.signOutOthers}</Button>
+            <Button variant="outline" size="sm" disabled={busy || sessionsStale || sessionsTotal <= 1} onclick={signOutOthers}>{i18n.t.sessions.signOutOthers}</Button>
           </Card.Header>
           <Card.Content>
             {#if sessionsStale}
@@ -843,20 +874,23 @@
               columns={sessionsColumns}
               rows={sessions}
               getKey={(s) => s.id}
-              bind:sort={sessionsSort}
+              sort={sessionsSort}
+              manualSort
+              manualPagination
               bind:page={sessionsPage}
               perPage={PAGE_SIZE}
-              label={fmt(i18n.t.sessions.total, { count: sessions.length })}
+              total={sessionsPagerTotal}
+              label={fmt(i18n.t.sessions.total, { count: sessionsTotal })}
               empty={i18n.t.sessions.empty}
+              onChange={(state) => void loadSessions(state.page)}
             >
               {#snippet row(s)}
-                {@const isCurrent = s.id === data.currentSessionId}
                 <Table.Cell class="max-w-xs truncate" title={s.userAgent ?? ""}>{deviceLabel(s.userAgent) ?? s.userAgent ?? i18n.t.sessions.unknown}</Table.Cell>
                 <Table.Cell class="text-muted-foreground">{s.ipAddress ?? "—"}</Table.Cell>
                 <Table.Cell class="text-muted-foreground">{formatDateTime(s.createdAt)}</Table.Cell>
-                <Table.Cell>{#if isCurrent}<Badge>{i18n.t.sessions.current}</Badge>{/if}</Table.Cell>
+                <Table.Cell>{#if s.current}<Badge>{i18n.t.sessions.current}</Badge>{/if}</Table.Cell>
                 <Table.Cell>
-                  <Button variant="ghost" size="sm" disabled={busy || isCurrent} onclick={() => revoke(s.token)}>{i18n.t.sessions.revoke}</Button>
+                  <Button variant="ghost" size="sm" disabled={busy || s.current} onclick={() => revoke(s.id)}>{i18n.t.sessions.revoke}</Button>
                 </Table.Cell>
               {/snippet}
             </DataTable>

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

@@ -2,36 +2,15 @@
   import { page } from "$app/state";
   import * as Sidebar from "#lib/components/ui/sidebar/index.js";
   import SidebarUserMenu from "./sidebar-user-menu.svelte";
-  import LayoutDashboardIcon from "@lucide/svelte/icons/layout-dashboard";
-  import UsersIcon from "@lucide/svelte/icons/users";
-  import MonitorSmartphoneIcon from "@lucide/svelte/icons/monitor-smartphone";
-  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/index.js";
-  import { moduleNavEntries, type AdminNavEntry } from "#lib/admin/registry.svelte.js";
+  import { adminNavEntries } from "#lib/admin/nav.js";
   import type { SessionUser } from "../../app.d.ts";
 
   let { user, capabilities }: { user: SessionUser; capabilities?: { auditLog?: boolean; organization?: boolean } } = $props();
   const i18n = getI18n();
 
-  type NavItem = AdminNavEntry;
-  const items = $derived<NavItem[]>([
-    { 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", label: (t) => t.nav.organizations, icon: Building2Icon, adminOnly: true } as NavItem]
-      : []),
-    ...(capabilities?.auditLog
-      ? [{ href: "/admin/audit", label: (t) => t.nav.audit, icon: ScrollTextIcon, adminOnly: true } as NavItem]
-      : []),
-    // 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"));
+  const visible = $derived(adminNavEntries(capabilities, user.role));
 </script>
 
 <Sidebar.Root collapsible="icon">

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

@@ -1,10 +1,14 @@
 <script lang="ts" module>
+  import type { Snippet } from "svelte";
   import { cn } from "#lib/utils.js";
 
   export type DataTableBreakpoint = "sm" | "md" | "lg" | "xl";
   export type DataTableColumn<Row> = {
     key: string;
     label: string;
+    // Header content in place of the label and sort button, such as a
+    // select-all checkbox. Give it its own accessible name.
+    head?: Snippet;
     sortable?: boolean;
     class?: string;
     hideBelow?: DataTableBreakpoint;
@@ -37,7 +41,6 @@
 </script>
 
 <script lang="ts" generics="Row">
-  import type { Snippet } from "svelte";
   import { Button } from "#lib/components/ui/button/index.js";
   import * as Table from "#lib/components/ui/table/index.js";
   import TablePagination from "#lib/components/table-pagination.svelte";
@@ -132,7 +135,9 @@
             class={getDataTableColumnClass(col)}
             aria-sort={sort?.key === col.key ? (sort.dir === "asc" ? "ascending" : "descending") : undefined}
           >
-            {#if col.sortable}
+            {#if col.head}
+              {@render col.head()}
+            {:else if col.sortable}
               <Button variant="ghost" size="sm" class="-mx-2 h-auto gap-1 px-2 py-1 font-medium" onclick={() => toggle(col)}>
                 {col.label}
                 {#if sort?.key === col.key}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/data-table.test.ts

@@ -0,0 +1,30 @@
+import { createRawSnippet } from "svelte";
+import { render } from "svelte/server";
+import { describe, expect, it } from "vitest";
+import DataTable, { type DataTableColumn, type DataTableRowContext } from "./data-table.svelte";
+
+type Row = { name: string };
+
+const row = createRawSnippet<[Row, DataTableRowContext]>((item) => ({
+  render: () => `<td>${item().name}</td><td></td>`,
+}));
+
+describe("DataTable", () => {
+  it("renders a column's header snippet in place of its label and sort button", () => {
+    const head = createRawSnippet(() => ({ render: () => '<input type="checkbox" aria-label="Select all rows">' }));
+    const columns: DataTableColumn<Row>[] = [
+      { key: "name", label: "Name", sortable: true },
+      { key: "selected", label: "Selected", head, sortable: true },
+    ];
+
+    const { body } = render(DataTable<Row>, { props: { columns, rows: [{ name: "Ada" }], row, perPage: 0 } });
+
+    const headers = body.match(/<th\b[\s\S]*?<\/th>/g) ?? [];
+    expect(headers).toHaveLength(2);
+    expect(headers[0]).toContain("Name");
+    expect(headers[0]).toContain("<button");
+    expect(headers[1]).toContain('aria-label="Select all rows"');
+    expect(headers[1]).not.toContain("Selected");
+    expect(headers[1]).not.toContain("<button");
+  });
+});

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

@@ -3,9 +3,10 @@
   import { api } from "#lib/api.js";
   import { Button } from "#lib/components/ui/button/index.js";
   import { getI18n } from "#lib/i18n/index.js";
+  import { cn } from "#lib/utils.js";
   import { toast } from "svelte-sonner";
 
-  let { email }: { email: string } = $props();
+  let { email, class: className }: { email: string; class?: string } = $props();
   const i18n = getI18n();
 
   async function stopImpersonating(): Promise<void> {
@@ -18,7 +19,7 @@
   }
 </script>
 
-<div class="bg-primary text-primary-foreground flex items-center justify-between gap-2 px-4 py-2 text-sm">
+<div class={cn("bg-primary text-primary-foreground flex items-center justify-between gap-2 px-4 py-2 text-sm", className)}>
   <span>{i18n.t.users.impersonatingAs.replace("{email}", email)}</span>
   <Button variant="secondary" size="sm" onclick={stopImpersonating}>{i18n.t.users.stopImpersonating}</Button>
 </div>

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import type { Capabilities } from "@podosoft/podokit-api-client";
+  import { toast } from "svelte-sonner";
+  import { appFlagCards } from "#lib/admin/app-flag-settings.js";
+  import { api } from "#lib/api.js";
+  import { Badge } from "#lib/components/ui/badge/index.js";
+  import * as Card from "#lib/components/ui/card/index.js";
+  import { Switch } from "#lib/components/ui/switch/index.js";
+  import { getI18n } from "#lib/i18n/index.js";
+
+  // The application's flags from app-flags.ts. They share the feature-flag
+  // endpoint, so saving needs an administrator and applies at once, like the
+  // switches on the Authentication tab.
+  const i18n = getI18n();
+  const cards = $derived(appFlagCards(i18n.t, page.data.capabilities as Capabilities | undefined));
+  let saving = $state(false);
+
+  async function toggle(flag: string, next: boolean): Promise<void> {
+    saving = true;
+    try {
+      await api.put("/account/settings", { [flag]: next });
+      await invalidateAll();
+      toast.success(i18n.t.settings.saved);
+    } catch {
+      toast.error(i18n.t.settings.saveFailed);
+    }
+    saving = false;
+  }
+</script>
+
+<section class="flex flex-col gap-3">
+  <div>
+    <h2 class="text-lg font-semibold">{i18n.t.settings.appFlags.title}</h2>
+    <p class="text-muted-foreground text-sm">{i18n.t.settings.appFlags.subtitle}</p>
+  </div>
+  <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    {#each cards as card (card.flag)}
+      <Card.Root class="flex min-h-[8.5rem] flex-col gap-2 p-4" data-app-flag={card.flag}>
+        <div class="flex items-start justify-between gap-3">
+          <span class="font-medium break-words">{card.name}</span>
+          <Switch
+            aria-label={card.name}
+            checked={card.on}
+            disabled={saving || !card.available}
+            onCheckedChange={(value) => toggle(card.flag, value === true)}
+            class="shrink-0"
+          />
+        </div>
+        <p class="text-muted-foreground flex-1 text-sm">{card.description}</p>
+        <div class="mt-auto flex items-center gap-2 pt-1">
+          <Badge variant={card.on ? "secondary" : "outline"} class="max-w-full gap-1.5">
+            <span class={`size-1.5 shrink-0 rounded-full ${card.on ? "bg-green-500" : "bg-muted-foreground/40"}`}></span>
+            <span class="truncate">
+              {card.available
+                ? card.on ? i18n.t.settings.enabled : i18n.t.settings.disabled
+                : i18n.t.settings.appFlags.unavailable}
+            </span>
+          </Badge>
+        </div>
+      </Card.Root>
+    {/each}
+  </div>
+</section>

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

@@ -2,6 +2,7 @@
   import { goto } from "$app/navigation";
   import * as DropdownMenu from "#lib/components/ui/dropdown-menu/index.js";
   import * as Sidebar from "#lib/components/ui/sidebar/index.js";
+  import AccountMenu from "./account-menu.svelte";
   import UserAvatar from "./user-avatar.svelte";
   import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
   import LogOutIcon from "@lucide/svelte/icons/log-out";
@@ -12,6 +13,10 @@
 
   let { user }: { user: SessionUser } = $props();
   const i18n = getI18n();
+  // Outside a Sidebar.Provider, such as in an application's own shell, the
+  // sidebar menu parts have no state to read, so the same identity block and
+  // actions come from the shell-independent AccountMenu instead.
+  const inSidebar = (Sidebar.useSidebar() as ReturnType<typeof Sidebar.useSidebar> | undefined) !== undefined;
 
   async function signOut(): Promise<void> {
     await api.auth.signOut();
@@ -19,26 +24,30 @@
   }
 </script>
 
-<Sidebar.Menu>
-  <Sidebar.MenuItem>
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger data-testid="sidebar-user-menu">
-        {#snippet child({ props })}
-          <Sidebar.MenuButton {...props} size="lg" class="data-[state=open]:bg-sidebar-accent">
-            <UserAvatar {user} class="size-8" />
-            <div class="flex flex-col text-left text-sm leading-tight">
-              <span class="truncate font-medium">{user.name}</span>
-              <span class="text-muted-foreground truncate text-xs">{user.email}</span>
-            </div>
-            <ChevronsUpDownIcon class="ml-auto size-4" />
-          </Sidebar.MenuButton>
-        {/snippet}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="end" side="top" class="w-56">
-        <DropdownMenu.Item onSelect={() => goto("/account")}><UserIcon class="mr-2 size-4" /> {i18n.t.nav.account}</DropdownMenu.Item>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item onSelect={signOut}><LogOutIcon class="mr-2 size-4" /> {i18n.t.nav.signOut}</DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  </Sidebar.MenuItem>
-</Sidebar.Menu>
+{#if inSidebar}
+  <Sidebar.Menu>
+    <Sidebar.MenuItem>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger data-testid="sidebar-user-menu">
+          {#snippet child({ props })}
+            <Sidebar.MenuButton {...props} size="lg" class="data-[state=open]:bg-sidebar-accent">
+              <UserAvatar {user} class="size-8" />
+              <div class="flex flex-col text-left text-sm leading-tight">
+                <span class="truncate font-medium">{user.name}</span>
+                <span class="text-muted-foreground truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDownIcon class="ml-auto size-4" />
+            </Sidebar.MenuButton>
+          {/snippet}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" side="top" class="w-56">
+          <DropdownMenu.Item onSelect={() => goto("/account")}><UserIcon class="mr-2 size-4" /> {i18n.t.nav.account}</DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item onSelect={signOut}><LogOutIcon class="mr-2 size-4" /> {i18n.t.nav.signOut}</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Sidebar.MenuItem>
+  </Sidebar.Menu>
+{:else}
+  <AccountMenu {user} variant="identity" side="top" />
+{/if}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/sidebar-user-menu.test.ts

@@ -0,0 +1,27 @@
+import { render } from "svelte/server";
+import { describe, expect, it, vi } from "vitest";
+import SidebarUserMenu from "./sidebar-user-menu.svelte";
+
+vi.mock("$app/state", () => ({
+  page: {
+    url: new URL("http://localhost/projects"),
+    data: {
+      locale: "en",
+      messages: { nav: { account: "Account", signOut: "Sign out" }, common: { appName: "Admin" } },
+    },
+  },
+}));
+vi.mock("$app/navigation", () => ({ goto: vi.fn(), invalidateAll: vi.fn() }));
+
+describe("SidebarUserMenu", () => {
+  it("renders the account menu in a shell without a sidebar", () => {
+    const user = { id: "user-1", name: "Ada Lovelace", email: "ada@example.com", role: "user" };
+
+    const { body } = render(SidebarUserMenu, { props: { user } });
+
+    expect(body).toContain('data-testid="account-menu"');
+    expect(body).not.toContain('data-testid="sidebar-user-menu"');
+    expect(body).toContain("Ada Lovelace");
+    expect(body).toContain("ada@example.com");
+  });
+});

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

@@ -11,7 +11,10 @@
 </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">
+  <footer
+    class="text-muted-foreground flex flex-col items-center gap-1 px-4 py-6 text-center text-sm"
+    data-testid="site-footer"
+  >
     {#if s.footerText}
       <p>{s.footerText}</p>
     {/if}

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

@@ -44,7 +44,9 @@
   {/if}
 </svelte:head>
 
-<ModeWatcher />
+<!-- `.light` on <html> in light mode lets component libraries that follow a `.dark`
+     or `.light` class, and fall back to the OS setting otherwise, match the theme. -->
+<ModeWatcher lightClassNames={["light"]} />
 <SessionIdleTimeout timeoutMinutes={sessionIdleTimeoutMinutes} />
 <!-- podokit:begin:site-runtime-components -->
 <!-- podokit:end:site-runtime-components -->

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

@@ -86,7 +86,9 @@
       {:else}
         <Label class="text-sm" for="toolbar-search">{searchFields[0].label}</Label>
       {/if}
-      <Input id="toolbar-search" bind:value={search} placeholder={searchPlaceholder} class="max-w-xs flex-1" />
+      <!-- The minimum width makes a narrow row wrap the input to its own line
+           instead of squeezing it next to the field select. -->
+      <Input id="toolbar-search" bind:value={search} placeholder={searchPlaceholder} class="min-w-48 max-w-xs flex-1" />
       <Button type="submit">{searchButton}</Button>
     </form>
   {/if}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/i18n/catalogs/admin-dashboard/en.json

@@ -293,6 +293,12 @@
     "manage": "Manage",
     "saved": "Setting updated",
     "saveFailed": "Failed to update setting",
+    "appFlags": {
+      "tab": "Application",
+      "title": "Application settings",
+      "subtitle": "Turn this application's own features on or off. Changes apply immediately.",
+      "unavailable": "Not available"
+    },
     "emailPassword": "Email & password",
     "emailPasswordDesc": "Sign in with an email address and password.",
     "emailVerification": "Email verification",

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/i18n/catalogs/admin-dashboard/ko.json

@@ -293,6 +293,12 @@
     "manage": "관리",
     "saved": "설정을 변경했습니다",
     "saveFailed": "설정 변경에 실패했습니다",
+    "appFlags": {
+      "tab": "애플리케이션",
+      "title": "애플리케이션 설정",
+      "subtitle": "이 애플리케이션의 기능을 켜거나 끕니다. 변경 사항은 바로 적용됩니다.",
+      "unavailable": "사용할 수 없음"
+    },
     "emailPassword": "이메일·비밀번호",
     "emailPasswordDesc": "이메일과 비밀번호로 로그인.",
     "emailVerification": "이메일 인증",

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

@@ -0,0 +1,11 @@
+import type { Handle } from "@sveltejs/kit/hooks";
+
+/**
+ * Application-owned request hook. The managed hooks.server.ts runs it for every
+ * request after PodoKit has loaded the runtime context, so `event.locals` already
+ * holds the site settings, the signed-in user, the session, and the locale. Change
+ * `event.locals`, add response headers, or answer a request yourself here instead
+ * of editing hooks.server.ts. Combine several handles with `sequence` from
+ * "@sveltejs/kit/hooks". PodoKit creates this file once and never overwrites it.
+ */
+export const appHandle: Handle = ({ event, resolve }) => resolve(event);

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/server/non-indexable-paths.ts

@@ -0,0 +1,8 @@
+/**
+ * Application-owned path prefixes whose responses carry
+ * `X-Robots-Tag: noindex, nofollow`, in addition to the admin, account, sign-in,
+ * and API paths PodoKit already lists in search-indexing.ts. A listed path also
+ * covers its subpaths ("/app" covers "/app/projects/1"); "/" covers only the
+ * landing page. PodoKit creates this file once and never overwrites it.
+ */
+export const APP_NON_INDEXABLE_PATHS: readonly string[] = [];

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/server/search-indexing.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it, vi } from "vitest";
+import { applySearchIndexingHeaders, shouldPreventSearchIndexing } from "./search-indexing";
+
+// Stands in for the application's own list in the app-owned non-indexable-paths.ts.
+vi.mock("./non-indexable-paths", () => ({ APP_NON_INDEXABLE_PATHS: ["/", "/projects"] }));
+
+describe("search indexing", () => {
+  it("keeps PodoKit's private paths out of search results", () => {
+    expect(shouldPreventSearchIndexing("/admin/users")).toBe(true);
+    expect(shouldPreventSearchIndexing("/account")).toBe(true);
+    expect(shouldPreventSearchIndexing("/api/site/settings")).toBe(true);
+  });
+
+  it("adds the application's prefixes and their subpaths", () => {
+    expect(shouldPreventSearchIndexing("/projects")).toBe(true);
+    expect(shouldPreventSearchIndexing("/projects/a/b")).toBe(true);
+    expect(shouldPreventSearchIndexing("/projects-archive")).toBe(false);
+  });
+
+  it("treats a listed root as the landing page only", () => {
+    expect(shouldPreventSearchIndexing("/")).toBe(true);
+    expect(shouldPreventSearchIndexing("/pricing")).toBe(false);
+  });
+
+  it("sets the header only on non-indexable responses", () => {
+    expect(applySearchIndexingHeaders(new Response("ok"), "/projects/1").headers.get("x-robots-tag")).toBe(
+      "noindex, nofollow",
+    );
+    expect(applySearchIndexingHeaders(new Response("ok"), "/pricing").headers.has("x-robots-tag")).toBe(false);
+  });
+});

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/server/search-indexing.ts

@@ -1,3 +1,5 @@
+import { APP_NON_INDEXABLE_PATHS } from "./non-indexable-paths";
+
 const NON_INDEXABLE_PATH_PREFIXES = [
   "/api",
   "/admin",
@@ -12,7 +14,9 @@ const NON_INDEXABLE_PATH_PREFIXES = [
   "/oauth2",
   "/accept-invitation",
   "/maintenance",
-] as const;
+  // Application prefixes from the app-owned non-indexable-paths.ts.
+  ...APP_NON_INDEXABLE_PATHS,
+];
 
 function matchesPathPrefix(pathname: string, prefix: string): boolean {
   return pathname === prefix || pathname.startsWith(`${prefix}/`);

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

@@ -294,7 +294,7 @@
   </div>
 
   <Tabs.Root value="general">
-    <Tabs.List>
+    <Tabs.List class="h-auto max-w-full flex-wrap justify-start">
       <Tabs.Trigger value="general">{i18n.t.general.tab}</Tabs.Trigger>
       <Tabs.Trigger value="appearance">{i18n.t.general.appearanceTitle}</Tabs.Trigger>
       <Tabs.Trigger value="auth">{i18n.t.settings.tab}</Tabs.Trigger>

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

@@ -6,6 +6,7 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
   await loadProtectedLayout({ locals, fetch });
   return {
     ...(await loadAccountData(locals, fetch)),
-    impersonating: Boolean(locals.session?.impersonatedBy),
+    // Rendered by the managed AccountPage, so an owned page never has to change for it.
+    showImpersonationBanner: Boolean(locals.session?.impersonatedBy),
   };
 };