@podosoft/podokit 1.5.0 → 1.6.1

package/dist/templates/fullstack/tests/playwright.extensions.ts

@@ -1,17 +1,40 @@
 import { existsSync } from "node:fs";
 import { createRequire } from "node:module";
 import { join } from "node:path";
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { FullConfig, PlaywrightTestConfig } from "@playwright/test";
 
 type Projects = NonNullable<PlaywrightTestConfig["projects"]>;
+type Project = Projects[number];
 
 const requireFromTests = createRequire(__filename);
 
+// A test that changes state the other tests rely on, such as a server-wide
+// setting or the profile of a seeded account, takes the `@exclusive` tag:
+//
+//   test("maintenance mode holds visitors back", { tag: "@exclusive" }, async ({ page }) => { ... });
+//
+// Playwright matches project grep patterns against the title path followed by
+// the test's tags, separated by spaces.
+const TAGGED = /(?:^|\s)@exclusive(?=\s|$)/;
+const UNTAGGED = /^(?![\s\S]*(?:^|\s)@exclusive(?=\s|$))/;
+const EVERY_FILE = /.*/;
+
+/**
+ * One of the two Playwright runs `run-e2e.ts` makes with more than one worker:
+ * `shared` runs the tests not tagged `@exclusive`, `exclusive` the tagged ones.
+ */
+export type E2ePhase = "shared" | "exclusive";
+
 function projectName(project: unknown): string | null {
   if (typeof project !== "object" || project === null || !("name" in project)) return null;
   return typeof project.name === "string" && project.name.length > 0 ? project.name : null;
 }
 
+function patterns(value: Project["grepInvert"]): RegExp[] {
+  if (value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
 /**
  * Merge application-owned Playwright projects into PodoKit's managed config.
  * The optional CommonJS file stays owned so applications can add devices and
@@ -42,3 +65,128 @@ export function loadPlaywrightProjects(coreProjects: Projects): Projects {
 
   return loaded as Projects;
 }
+
+/** The number of Playwright workers: `E2E_WORKERS`, or 1 when it is unset. */
+export function e2eWorkers(value = process.env.E2E_WORKERS): number {
+  if (value === undefined || value.trim() === "") return 1;
+  const workers = Number(value);
+  if (!Number.isInteger(workers) || workers < 1) {
+    throw new Error(`E2E_WORKERS must be a whole number of at least 1, got "${value}".`);
+  }
+  return workers;
+}
+
+/** The run `run-e2e.ts` started, from `E2E_PHASE`, or undefined for a single run. */
+export function e2ePhase(value = process.env.E2E_PHASE): E2ePhase | undefined {
+  if (value === undefined || value === "") return undefined;
+  if (value === "shared" || value === "exclusive") return value;
+  throw new Error(`E2E_PHASE must be "shared" or "exclusive", got "${value}".`);
+}
+
+/**
+ * Workers and output folders for this Playwright run. The exclusive phase runs
+ * on one worker and keeps its results and HTML report in `exclusive/` folders,
+ * because each run empties its own.
+ */
+export function e2eRunSettings(
+  phase = e2ePhase(),
+  workers = e2eWorkers(),
+): { phase: E2ePhase | undefined; workers: number; outputDir: string; reportFolder: string } {
+  return phase === "exclusive"
+    ? { phase, workers: 1, outputDir: "test-results/exclusive", reportFolder: "playwright-report/exclusive" }
+    : { phase, workers, outputDir: "test-results", reportFolder: "playwright-report" };
+}
+
+/**
+ * The Playwright runs for `run-e2e.ts` with these command-line arguments. One
+ * worker needs a single run. With more workers, the tests not tagged
+ * `@exclusive` run first and the tagged ones second, in a run of their own that
+ * starts even when the first one failed. Either run may find no tests: a filter
+ * can select tests of one kind only, and an app may have no exclusive tests.
+ */
+export function e2eRuns(args: string[], workers = e2eWorkers()): Array<{ phase?: E2ePhase; args: string[] }> {
+  if (workers === 1) return [{ args }];
+  return [
+    { phase: "shared", args: args.length > 0 ? ["--pass-with-no-tests", ...args] : args },
+    { phase: "exclusive", args: ["--pass-with-no-tests", ...args] },
+  ];
+}
+
+/**
+ * Splits each test project into one that skips tests tagged `@exclusive` and an
+ * `<name>-exclusive` twin that runs only them on one worker. Projects that
+ * another project depends on, or that tear one down, are setup and cleanup
+ * projects and stay as they are.
+ *
+ * With one worker no ordering is needed. With more, `run-e2e.ts` runs
+ * Playwright twice: in the `shared` phase the twins find no tests, and in the
+ * `exclusive` phase, on one worker, the other test projects find none. A single
+ * run with more than one worker (no phase) makes the twins depend on every
+ * other test project, and each twin on the one before it, so an exclusive test
+ * still never runs alongside another test; but there a failing test skips every
+ * twin after it, and a filter that selects exclusive tests runs all other tests
+ * first.
+ */
+export function withExclusivePhase(projects: Projects, workers: number, phase?: E2ePhase): Projects {
+  const support = new Set(
+    projects.flatMap((project) => [...(project.dependencies ?? []), ...(project.teardown ? [project.teardown] : [])]),
+  );
+  const tested = projects.filter((project) => !support.has(projectName(project) ?? ""));
+  const shared = new Map(
+    tested.map((project) => [
+      project,
+      {
+        ...project,
+        grepInvert: [...patterns(project.grepInvert), TAGGED],
+        ...(phase === "exclusive" ? { testIgnore: EVERY_FILE } : {}),
+      },
+    ]),
+  );
+
+  const chained = workers > 1 && phase === undefined;
+  let before = [...shared.values()].map((project) => projectName(project) ?? "");
+  const twins = tested.map((project) => {
+    const name = `${projectName(project) ?? ""}-exclusive`;
+    const twin: Project = {
+      ...project,
+      name,
+      grepInvert: [...patterns(project.grepInvert), UNTAGGED],
+      workers: 1,
+      dependencies: chained ? [...(project.dependencies ?? []), ...before] : project.dependencies,
+      ...(phase === "shared" ? { testIgnore: EVERY_FILE } : {}),
+    };
+    before = [name];
+    return twin;
+  });
+
+  const result = [...projects.map((project) => shared.get(project) ?? project), ...twins];
+  const names = new Set<string>();
+  for (const project of result) {
+    const name = projectName(project) ?? "";
+    if (names.has(name)) throw new Error(`Duplicate Playwright project name: ${name}`);
+    names.add(name);
+  }
+  return result;
+}
+
+/**
+ * Global setup: refuses more workers than `E2E_WORKERS` allows for. `--workers`
+ * changes the count after the projects were built, so with it the exclusive
+ * twins would run alongside the other tests. Warns when more than one worker
+ * runs without `run-e2e.ts`, where a failing test skips the exclusive tests.
+ */
+export default function checkWorkers(config: FullConfig, warn = console.warn): void {
+  if (config.workers > 1 && e2eWorkers() === 1) {
+    throw new Error(
+      `Set the worker count with E2E_WORKERS=${config.workers} instead of --workers. ` +
+        "Tests tagged @exclusive run after the others only when E2E_WORKERS is above 1.",
+    );
+  }
+  if (config.workers > 1 && e2ePhase() === undefined) {
+    warn(
+      "E2E_WORKERS is above 1 in a single Playwright run: a failing test makes Playwright skip " +
+        "the tests tagged @exclusive. Run the suite with `bun run test:e2e` (run-e2e.ts), which " +
+        "runs them in a second run instead.",
+    );
+  }
+}

package/dist/templates/fullstack/tests/run-e2e.ts

@@ -0,0 +1,28 @@
+import { spawnSync } from "node:child_process";
+import { e2eRuns } from "./playwright.extensions";
+
+// Runs the suite with the arguments it is given, such as `--grep` or a file.
+// With E2E_WORKERS above 1, Playwright runs twice: the tests not tagged
+// @exclusive on that many workers, then the tagged ones on one worker. The
+// second run starts even when the first one failed, so a failing test cannot
+// hide the exclusive tests, and the exit code is that of the first failed run.
+const runs = e2eRuns(process.argv.slice(2));
+let status = 0;
+for (const run of runs) {
+  if (run.phase) {
+    console.log(
+      run.phase === "shared"
+        ? "\nRunning the tests not tagged @exclusive\n"
+        : "\nRunning the tests tagged @exclusive on one worker (report: playwright-report/exclusive)\n",
+    );
+  }
+  const result = spawnSync("bunx", ["playwright", "test", ...run.args], {
+    stdio: "inherit",
+    env: run.phase ? { ...process.env, E2E_PHASE: run.phase } : process.env,
+  });
+  if (result.error) throw result.error;
+  // Playwright exits with 130 when it is interrupted: stop instead of starting the next run.
+  if (result.signal !== null || result.status === 130) process.exit(result.status ?? 130);
+  if (status === 0) status = result.status ?? 1;
+}
+process.exit(status);

package/dist/templates/fullstack/tests/ui/smoke.ui.spec.ts

@@ -1,9 +1,10 @@
 import { expect, test } from "@playwright/test";
+import { paths } from "../helpers/paths";
 
-// Module-agnostic: the app responds at "/" (a page or a redirect to it).
+// Module-agnostic: the app's first screen responds (a page or a redirect to it)
+// and renders. Its locator comes from tests/helpers/app-paths.ts.
 test("app is reachable @smoke", async ({ page }) => {
-  const res = await page.goto("/");
+  const res = await page.goto(paths.home);
   expect(res?.status()).toBeLessThan(400);
-  await expect(page.locator("main")).toBeVisible();
-  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
+  await expect(paths.homeReady(page)).toBeVisible();
 });

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

@@ -1,5 +1,6 @@
 import { ApiError } from "@podosoft/podokit-api-client";
 import type { RequestEvent } from "@sveltejs/kit";
+import type { Handle } from "@sveltejs/kit/hooks";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { BackendUnavailableError } from "#lib/server/api.js";
 import { handle } from "./hooks.server";
@@ -14,12 +15,18 @@ const client = vi.hoisted(() => ({
   getSession: vi.fn<() => Promise<SessionResult>>(),
 }));
 
+// Stands in for the application's own hook in the app-owned app-hooks.ts.
+const appHook = vi.hoisted(() => ({
+  handle: vi.fn<Handle>(({ event, resolve }) => resolve(event)),
+}));
+vi.mock("#lib/server/app-hooks.js", () => ({ appHandle: appHook.handle }));
+
 vi.mock("#lib/server/api.js", async (importOriginal) => ({
   ...(await importOriginal<typeof import("#lib/server/api.js")>()),
   serverApiClient: () => ({ get: client.get, auth: { getSession: client.getSession } }),
 }));
 
-const resolve = vi.fn(async (): Promise<Response> => new Response("ok"));
+const resolve = vi.fn(async (_event: RequestEvent): Promise<Response> => new Response("ok"));
 
 function requestEvent(pathname: string, cookies: Record<string, string> = {}): RequestEvent {
   return {
@@ -40,6 +47,7 @@ describe("handle", () => {
     client.get.mockReset();
     client.getSession.mockReset();
     resolve.mockClear();
+    appHook.handle.mockClear();
   });
 
   it("requests the session without waiting for site settings", async () => {
@@ -144,4 +152,32 @@ describe("handle", () => {
     expect(client.getSession).not.toHaveBeenCalled();
     expect(resolve).toHaveBeenCalledTimes(1);
   });
+
+  it("runs the application hook with the loaded runtime context", async () => {
+    client.get.mockResolvedValue({ locale: null });
+    client.getSession.mockResolvedValue(signedIn);
+    let seenUser: unknown;
+    appHook.handle.mockImplementationOnce(({ event, resolve: next }) => {
+      seenUser = event.locals.user;
+      event.locals.user = { id: "local", email: "local@localhost", name: "Local", role: "admin" };
+      return next(event);
+    });
+    const event = requestEvent("/account");
+
+    const response = await handle({ event, resolve });
+
+    expect(seenUser).toEqual({ id: "user-1" });
+    expect(resolve).toHaveBeenCalledTimes(1);
+    expect(resolve.mock.calls[0]?.[0].locals.user).toMatchObject({ id: "local", role: "admin" });
+    expect(response.headers.get("x-robots-tag")).toBe("noindex, nofollow");
+  });
+
+  it("lets the application hook answer a request itself", async () => {
+    appHook.handle.mockImplementationOnce(() => new Response("teapot", { status: 418 }));
+
+    const response = await handle({ event: requestEvent("/api/site/settings"), resolve });
+
+    expect(response.status).toBe(418);
+    expect(resolve).not.toHaveBeenCalled();
+  });
 });

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

@@ -3,6 +3,7 @@ import type { Handle } from "@sveltejs/kit/hooks";
 import { building } from "$app/env";
 import { routes } from "$app/manifest";
 import { serverApiClient } from "#lib/server/api.js";
+import { appHandle } from "#lib/server/app-hooks.js";
 import { resolveLocale } from "#lib/i18n/messages.js";
 import { applySearchIndexingHeaders } from "#lib/server/search-indexing.js";
 import { isPublicPath } from "#lib/server/guards.js";
@@ -91,12 +92,20 @@ export const handle: Handle = async ({ event, resolve }) => {
   } else {
     setEmptyRuntimeContext(event);
   }
-  const response = await resolve(event, {
-    transformPageChunk: ({ html }) =>
-      html.replace(
-        /(<html\b[^>]*?\slang=)(["'])[^"']*\2/i,
-        `$1"${event.locals.locale}"`,
-      ),
+  // The application's own hook from the app-owned app-hooks.ts runs next, with
+  // the runtime context loaded. Its page transform runs before the language one.
+  const response = await appHandle({
+    event,
+    resolve: (appEvent, options) =>
+      resolve(appEvent, {
+        ...options,
+        transformPageChunk: async ({ html, done }) => {
+          const transformed = options?.transformPageChunk
+            ? ((await options.transformPageChunk({ html, done })) ?? "")
+            : html;
+          return transformed.replace(/(<html\b[^>]*?\slang=)(["'])[^"']*\2/i, `$1"${event.locals.locale}"`);
+        },
+      }),
   });
   return applySearchIndexingHeaders(response, event.url.pathname);
 };

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/admin/app-flag-settings.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it, vi } from "vitest";
+import type { Messages } from "#lib/i18n/messages.js";
+import { appFlagCards } from "./app-flag-settings";
+
+// Stands in for the application's own list in the app-owned app-flags.ts.
+vi.mock("./app-flags", () => ({
+  APP_FLAG_SETTINGS: [
+    { flag: "reportsEnabled", label: () => "Reports", description: () => "Show the reports page." },
+    { flag: "betaSearch", label: () => "Beta search" },
+  ],
+}));
+
+const t = {} as Messages;
+
+describe("application flag settings", () => {
+  it("shows each listed flag with the value the API reports", () => {
+    expect(appFlagCards(t, { appFlags: { reportsEnabled: true, betaSearch: false, hidden: true } })).toEqual([
+      { flag: "reportsEnabled", name: "Reports", description: "Show the reports page.", available: true, on: true },
+      { flag: "betaSearch", name: "Beta search", description: "", available: true, on: false },
+    ]);
+  });
+
+  it("marks a flag the API does not report as unavailable", () => {
+    expect(appFlagCards(t, { appFlags: { reportsEnabled: false } })[1]).toMatchObject({
+      flag: "betaSearch",
+      available: false,
+      on: false,
+    });
+    expect(appFlagCards(t, undefined).every((card) => !card.available)).toBe(true);
+  });
+});

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

@@ -0,0 +1,31 @@
+import type { Capabilities } from "@podosoft/podokit-api-client";
+import type { Messages } from "#lib/i18n/messages.js";
+import { APP_FLAG_SETTINGS } from "./app-flags";
+import type { AppFlagSetting } from "./registry.svelte.js";
+
+export type AppFlagCard = {
+  flag: string;
+  name: string;
+  description: string;
+  /** False when the API does not report the flag, for example a name missing from APP_FLAG_DEFAULTS. */
+  available: boolean;
+  on: boolean;
+};
+
+/** One card per listed flag, with the value `GET /account/capabilities` reports in `appFlags`. */
+export function appFlagCards(
+  t: Messages,
+  capabilities: Pick<Capabilities, "appFlags"> | undefined,
+  settings: readonly AppFlagSetting[] = APP_FLAG_SETTINGS,
+): AppFlagCard[] {
+  return settings.map(({ flag, label, description }) => {
+    const value = capabilities?.appFlags?.[flag];
+    return {
+      flag,
+      name: label(t),
+      description: description?.(t) ?? "",
+      available: typeof value === "boolean",
+      on: value === true,
+    };
+  });
+}

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

@@ -0,0 +1,12 @@
+import type { AppFlagSetting } from "./registry.svelte.js";
+
+/**
+ * Application flags the admin Settings page shows, one switch each, on an
+ * Application tab after PodoKit's tabs. `flag` is a key of `APP_FLAG_DEFAULTS`
+ * in the API's owned `apps/api/src/settings/app-flags.ts`; the label and
+ * description come from the app-owned `i18n/catalogs/app/*.json`, for example
+ * `{ flag: "reportsEnabled", label: (t) => t.reports.flag, description: (t) => t.reports.flagDescription }`.
+ * The tab is hidden while the list is empty. PodoKit creates this file once and
+ * never overwrites it.
+ */
+export const APP_FLAG_SETTINGS: readonly AppFlagSetting[] = [];

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

@@ -0,0 +1,11 @@
+import type { AdminNavEntry } from "./registry.svelte.js";
+
+/**
+ * Application-owned admin sidebar entries. The sidebar shows them after PodoKit's
+ * own pages and before module entries and Settings, for example
+ * `{ href: "/admin/reports", label: (t) => t.reports.nav, icon: ChartColumnIcon, adminOnly: true }`
+ * with the label in the app-owned `i18n/catalogs/app/*.json` and the icon from
+ * `@lucide/svelte/icons/*`. `adminOnly` hides an entry from other roles.
+ * PodoKit creates this file once and never overwrites it.
+ */
+export const APP_ADMIN_NAV: readonly AdminNavEntry[] = [];

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

@@ -0,0 +1,53 @@
+import FileTextIcon from "@lucide/svelte/icons/file-text";
+import { describe, expect, it, vi } from "vitest";
+import { adminNavEntries } from "./nav";
+
+// Stands in for the application's own entries in the app-owned app-nav.ts.
+vi.mock("./app-nav", async () => {
+  const { default: icon } = await import("@lucide/svelte/icons/file-text");
+  return {
+    APP_ADMIN_NAV: [
+      { href: "/admin/specs", label: () => "Specs", icon, adminOnly: true },
+      { href: "/admin/help", label: () => "Help", icon },
+    ],
+  };
+});
+
+// Stands in for the entries installed modules add to registry.svelte.ts, so the
+// expected order does not depend on which modules an application installs.
+vi.mock("./registry.svelte.js", async () => {
+  const { default: icon } = await import("@lucide/svelte/icons/newspaper");
+  return {
+    moduleNavEntries: [
+      { href: "/admin/blog", label: () => "Blog", icon, adminOnly: true },
+      { href: "/admin/reports", label: () => "Reports", icon },
+    ],
+  };
+});
+
+describe("admin navigation", () => {
+  it("places the application's entries, then module entries, before Settings", () => {
+    const hrefs = adminNavEntries({ auditLog: true }, "admin").map((entry) => entry.href);
+
+    expect(hrefs).toEqual([
+      "/admin",
+      "/admin/users",
+      "/admin/sessions",
+      "/admin/audit",
+      "/admin/specs",
+      "/admin/help",
+      "/admin/blog",
+      "/admin/reports",
+      "/admin/settings",
+    ]);
+    expect(adminNavEntries(undefined, "admin").find((entry) => entry.href === "/admin/specs")?.icon).toBe(
+      FileTextIcon,
+    );
+  });
+
+  it("hides admin-only application and module entries from other roles", () => {
+    const hrefs = adminNavEntries(undefined, "moderator").map((entry) => entry.href);
+
+    expect(hrefs).toEqual(["/admin", "/admin/help", "/admin/reports"]);
+  });
+});

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

@@ -0,0 +1,35 @@
+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 { APP_ADMIN_NAV } from "./app-nav";
+import { moduleNavEntries, type AdminNavEntry } from "./registry.svelte.js";
+
+export type AdminNavCapabilities = { auditLog?: boolean; organization?: boolean };
+
+/**
+ * The admin sidebar entries a user may open: PodoKit's pages, the application's
+ * entries from the app-owned app-nav.ts, module entries, then Settings.
+ */
+export function adminNavEntries(
+  capabilities: AdminNavCapabilities | undefined,
+  role: string | null | undefined,
+): AdminNavEntry[] {
+  const entries: AdminNavEntry[] = [
+    { 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 } satisfies AdminNavEntry]
+      : []),
+    ...(capabilities?.auditLog
+      ? [{ href: "/admin/audit", label: (t) => t.nav.audit, icon: ScrollTextIcon, adminOnly: true } satisfies AdminNavEntry]
+      : []),
+    ...APP_ADMIN_NAV,
+    ...moduleNavEntries,
+    { href: "/admin/settings", label: (t) => t.nav.settings, icon: SettingsIcon, adminOnly: true },
+  ];
+  return entries.filter((entry) => !entry.adminOnly || role === "admin");
+}

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

@@ -1,5 +1,7 @@
 import type { Component } from "svelte";
+import AppFlagsSettings from "#lib/components/settings/app-flags-settings.svelte";
 import type { Messages } from "#lib/i18n/messages.js";
+import { APP_FLAG_SETTINGS } from "./app-flags";
 // Modules import their nav-entry icons here.
 // podokit:begin:admin-nav-imports
 // podokit:end:admin-nav-imports
@@ -26,6 +28,15 @@ export type AdminSettingsSection = {
   component: Component;
 };
 
+/** A switch on the Settings page's Application tab for one of the API's
+ *  application flags; see the app-owned app-flags.ts. */
+export type AppFlagSetting = {
+  /** The key in APP_FLAG_DEFAULTS (apps/api/src/settings/app-flags.ts). */
+  flag: string;
+  label: (t: Messages) => string;
+  description?: (t: Messages) => string;
+};
+
 export const moduleNavEntries: AdminNavEntry[] = [
   // podokit:begin:admin-nav-entries
   // podokit:end:admin-nav-entries
@@ -34,4 +45,8 @@ export const moduleNavEntries: AdminNavEntry[] = [
 export const moduleSettingsSections: AdminSettingsSection[] = [
   // podokit:begin:admin-settings
   // podokit:end:admin-settings
+  // The application's flags, after every module tab, when app-flags.ts lists any.
+  ...(APP_FLAG_SETTINGS.length > 0
+    ? [{ value: "application", label: (t: Messages) => t.settings.appFlags.tab, component: AppFlagsSettings }]
+    : []),
 ];

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

@@ -16,6 +16,7 @@
   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,
@@ -33,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();
@@ -552,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">

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}