@podosoft/podokit 1.5.0 → 1.6.1

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/theme-toggle.svelte

@@ -13,7 +13,7 @@
 <DropdownMenu.Root>
   <DropdownMenu.Trigger>
     {#snippet child({ props })}
-      <Button {...props} variant="ghost" size="icon" aria-label={i18n.t.theme.toggle}>
+      <Button {...props} variant="ghost" size="icon" aria-label={i18n.t.theme.toggle} data-testid="theme-toggle">
         <SunIcon class="size-4 dark:hidden" />
         <MoonIcon class="hidden size-4 dark:block" />
       </Button>

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),
   };
 };

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import AccountPage from "#lib/components/account-page.svelte";
-  import ImpersonationBanner from "#lib/components/impersonation-banner.svelte";
   import LanguageSwitch from "#lib/components/language-switch.svelte";
   import SiteFooter from "#lib/components/site-footer.svelte";
   import ThemeToggle from "#lib/components/theme-toggle.svelte";
@@ -13,15 +12,12 @@
   let {
     data,
   }: {
-    data: { user: SessionUser; currentSessionId: string | null; capabilities: Capabilities; impersonating: boolean };
+    data: { user: SessionUser; currentSessionId: string | null; capabilities: Capabilities };
   } = $props();
   const i18n = getI18n();
 </script>
 
 <div class="flex min-h-svh flex-col">
-  {#if data.impersonating}
-    <ImpersonationBanner email={data.user.email} />
-  {/if}
   <header class="flex h-14 items-center gap-2 border-b px-4">
     <Button href="/" variant="ghost">{i18n.t.nav.home}</Button>
     <div class="flex-1"></div>

package/dist/templates/modules/admin-dashboard/files/dot-claude/skills/podokit-data-table/SKILL.md

@@ -38,6 +38,8 @@ put pagination outside the table.
 - Responsive columns: set `hideBelow` to `sm`, `md`, `lg`, or `xl`, then apply
   `cellClass(columnKey)` to the matching `Table.Cell`. Never repeat the
   responsive class by hand; the shared class keeps headers and cells aligned.
+- Header controls such as a select-all checkbox: pass a `head` snippet on the
+  column; it replaces the label and sort button. Give the control an aria-label.
 - Give each table an `ariaLabel` and scope Playwright locators to that table.
 - No footer needed: `perPage={0}`.
 - **Search & filters**: put the shared `table-toolbar.svelte` (`TableToolbar`)

package/dist/templates/modules/admin-dashboard/files/tests/api/audit.api.spec.ts

@@ -128,7 +128,7 @@ test("the audit log rejects bad paging parameters", async ({ playwright }) => {
 
 // Audit logging is a DB-backed on/off toggle (auth_config `server`, applied live).
 // Runs after the recording tests and restores the flag so nothing else is affected.
-test("audit logging honours the DB on/off toggle @smoke", async ({ playwright, disposableUsers }) => {
+test("audit logging honours the DB on/off toggle @smoke", { tag: "@exclusive" }, async ({ playwright, disposableUsers }) => {
   const admin = await signedIn(playwright, ADMIN);
   test.skip((await admin.get("/api/audit-logs")).status() === 404, "audit-log module not installed");
   const auditLog = async () => (await (await admin.get("/api/account/capabilities")).json()).auditLog as boolean;