@valentinkolb/cloud 0.4.0 → 0.5.1

package/src/ssr/HotkeysHelpRail.island.tsx

@@ -1,80 +1,13 @@
-import { For, Show, createMemo } from "solid-js";
 import { hotkeys } from "@valentinkolb/stdlib/solid";
-import { prompts } from "../ui";
-import { openGlobalSearchHelpDialog, type GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
-
-const ShortcutsDialog = (props: { openSearchHelp: () => void }) => {
-  const entries = createMemo(() =>
-    [...hotkeys.entries()].sort((a, b) => {
-      const labelSort = a.label.localeCompare(b.label);
-      return labelSort !== 0 ? labelSort : a.keys.localeCompare(b.keys);
-    }),
-  );
-
-  return (
-    <div class="flex flex-col gap-3">
-      <p class="text-xs text-dimmed leading-relaxed">
-        Use these keyboard shortcuts to work faster. The list updates automatically depending on which app or view is currently open.
-      </p>
-      <p class="text-xs text-dimmed leading-relaxed">
-        Looking for the Spotlight/search{" "}
-        <button type="button" class="text-blue-500 hover:underline dark:text-blue-400" onClick={props.openSearchHelp}>
-          help
-        </button>
-      </p>
-
-      <div class="max-h-[60vh] overflow-y-auto pr-1">
-        <div class="flex flex-col gap-2">
-          <For each={entries()}>
-            {(entry) => (
-              <div class="rounded-lg ring-1 ring-inset ring-zinc-200 dark:ring-zinc-800 p-2.5 bg-zinc-50/50 dark:bg-zinc-900/35">
-                <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0">
-                    <p class="text-sm font-medium text-primary truncate">{entry.label}</p>
-                    <p class="text-xs text-dimmed mt-0.5">{entry.desc || "No description provided."}</p>
-                  </div>
-                  <div
-                    class="flex items-center gap-1.5 shrink-0"
-                    role="group"
-                    aria-label={entry.keysPretty.map((part) => part.ariaLabel).join(" + ")}
-                  >
-                    <For each={entry.keysPretty}>
-                      {(part) => (
-                        <kbd class="inline-flex min-w-6 justify-center px-1.5 py-1 rounded-md text-[11px] leading-none font-medium ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 bg-white dark:bg-zinc-900 text-primary">
-                          {part.key}
-                        </kbd>
-                      )}
-                    </For>
-                  </div>
-                </div>
-              </div>
-            )}
-          </For>
-          <Show when={entries().length === 0}>
-            <div class="rounded-lg ring-1 ring-inset ring-zinc-200 dark:ring-zinc-800 p-3 text-xs text-dimmed bg-zinc-50/50 dark:bg-zinc-900/35">
-              No shortcuts registered yet.
-            </div>
-          </Show>
-        </div>
-      </div>
-
-    </div>
-  );
-};
+import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+import { openLayoutHelpDialog } from "./LayoutHelp";
 
 /** Help action in rail nav: opens a modal with all currently registered hotkeys. */
 export default function HotkeysHelpRail(props: { searchHelpApps?: GlobalSearchHelpApp[] }) {
   const searchHelpApps = props.searchHelpApps ?? [];
 
   const openHelp = () => {
-    void prompts.dialog<void>((close) => <ShortcutsDialog openSearchHelp={() => {
-      close();
-      queueMicrotask(() => openGlobalSearchHelpDialog(searchHelpApps));
-    }} />, {
-      title: "Keyboard Shortcuts",
-      icon: "ti ti-keyboard",
-      size: "large",
-    });
+    openLayoutHelpDialog(searchHelpApps);
   };
 
   hotkeys.create(() => ({

package/src/ssr/Layout.tsx

@@ -1,22 +1,30 @@
-import { hasRole, type User } from "../contracts/shared";
 import type { JSX } from "solid-js/jsx-runtime";
-import NavMenu from "./NavMenu.island";
-import MoreAppsDropdown from "./MoreAppsDropdown.island";
-import ThemeToggleRail from "./ThemeToggleRail.island";
-import HotkeysHelpRail from "./HotkeysHelpRail.island";
-import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
-import Footer from "./Footer.island";
-import { dates } from "../shared";
-import { getRuntimeContext, type RuntimeContext } from "./runtime";
 import { resolveNavMatch } from "../contracts/app"; // ==========================
+import { hasRole, type User } from "../contracts/shared";
+import type { LayoutAnnouncementsState } from "../server/middleware/settings";
+import { dates } from "../shared";
+import { readThemeFromCookieHeader } from "../shared/theme";
+import type { LayoutBreadcrumb } from "../ui/layout";
+import AppLaunchpad, { type AppLaunchpadApp } from "./AppLaunchpad.island";
+import Footer from "./Footer.island";
+import GlobalAnnouncements from "./GlobalAnnouncements.island";
 import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
+import HotkeysHelpRail from "./HotkeysHelpRail.island";
+import LayoutBreadcrumbs from "./LayoutBreadcrumbs.island";
+import NavMenu from "./NavMenu.island";
+import { getRuntimeContext, type RuntimeContext } from "./runtime";
+import ThemeToggleRail from "./ThemeToggleRail.island";
+import TimezoneCookie from "./TimezoneCookie.island";
+
 // Types
-type Breadcrumb = { title: string; href?: string };
-type AppLink = { iconClass: string; label: string; href: string; match: string };
+type Breadcrumb = LayoutBreadcrumb;
+type AppLink = { id: string; iconClass: string; label: string; href: string; match: string; description?: string };
 type LayoutContext = {
   get(key: "user"): User | undefined;
   get(key: "page"): { theme?: "light" | "dark" };
   get(key: "runtime"): RuntimeContext;
+  get(key: "announcements"): LayoutAnnouncementsState | undefined;
   /**
    * Per-request settings snapshot (populated by snapshot middleware in
    * `_internal/define-app.ts`). Loose-typed at this layer so Layout can be
@@ -38,6 +46,8 @@ type LayoutProps = {
 function active(pathname: string, match: string): string {
   return pathname.startsWith(match) ? "active" : "";
 }
+const jsonScript = (value: unknown): string => JSON.stringify(value).replace(/</g, "\\u003c");
+
 function buildNavLinks(apps: RuntimeContext["apps"], user: User | undefined): { primary: AppLink[]; more: AppLink[] } {
   const links = apps
     .filter((app) => !!app.nav && app.nav.section !== "hidden")
@@ -59,15 +69,24 @@ function buildNavLinks(apps: RuntimeContext["apps"], user: User | undefined): {
       section: app.nav!.section,
       link: {
         iconClass: app.icon,
+        id: app.id,
         label: app.name,
         href: app.nav!.href,
         match: resolveNavMatch(app) ?? app.nav!.href.split("?")[0] ?? app.nav!.href,
+        description: app.description,
       } satisfies AppLink,
     }));
   const primary = links.filter((entry) => entry.section === "primary").map((entry) => entry.link);
   const more = links.filter((entry) => entry.section === "more").map((entry) => entry.link);
   if (user && hasRole(user, "admin")) {
-    more.push({ iconClass: "ti ti-settings", label: "Admin", href: "/admin", match: "/admin" });
+    more.push({
+      id: "admin",
+      iconClass: "ti ti-settings",
+      label: "Admin",
+      href: "/admin",
+      match: "/admin",
+      description: "Platform administration.",
+    });
   }
   return { primary, more };
 } // ==========================
@@ -81,9 +100,9 @@ function ProfileWarnings({ user }: { user: User }) {
   if (!user.sn) missing.push("last name");
   if (missing.length === 0) return null;
   return (
-      <a href="/me" class="flex items-center gap-2 text-xs info-block-warning no-underline mb-2 md:mb-1.5 mx-2 md:ml-0 md:mr-1.5">
-        <i class="ti ti-user-exclamation" /> <span>Your profile is incomplete: {missing.join(",")} not set.</span>
-      </a>
+    <a href="/me" class="flex items-center gap-2 text-xs info-block-warning no-underline mb-2 md:mb-1.5 mx-2 md:ml-0 md:mr-1.5">
+      <i class="ti ti-user-exclamation" /> <span>Your profile is incomplete: {missing.join(",")} not set.</span>
+    </a>
   );
 }
 function ExpiryWarnings({ user }: { user: User }) {
@@ -122,41 +141,23 @@ function ExpiryWarnings({ user }: { user: User }) {
   );
 } // ==========================
 // Sub-Components
-function BreadcrumbNav({ breadcrumbs }: { breadcrumbs: Breadcrumb[] }) {
-  return (
-    <nav class="flex items-center gap-1 sm:gap-2 min-w-0 text-sm md:text-xs">
-      {" "}
-      {breadcrumbs.map((crumb, i) => {
-        const isLast = i === breadcrumbs.length - 1;
-        return (
-          <>
-            {" "}
-            {i > 0 && <span class="text-zinc-400 dark:text-zinc-600 text-xs">/</span>}{" "}
-            {crumb.href && !isLast ? (
-              <a href={crumb.href} class="text-dimmed hover:text-primary truncate">
-                {" "}
-                {crumb.title}{" "}
-              </a>
-            ) : (
-              <span class="font-semibold text-primary truncate">{crumb.title}</span>
-            )}{" "}
-          </>
-        );
-      })}{" "}
-    </nav>
-  );
-} // ==========================
+// ==========================
 // Main Layout
 export default function Layout({ children, c, title, fullPage, fullWidth }: LayoutProps) {
   const runtime = getRuntimeContext(c);
   const cookie = c.req.raw.headers.get("Cookie") ?? "";
-  const themeMatch = cookie.match(/theme=([^;]+)/);
-  c.get("page").theme = themeMatch?.[1] === "dark" ? "dark" : "light";
+  c.get("page").theme = readThemeFromCookieHeader(cookie);
   const user = c.get("user");
   const pathname = new URL(c.req.raw.url).pathname;
   const { primary: primaryApps, more: moreApps } = buildNavLinks(runtime.apps, user);
   const allApps = [...primaryApps, ...moreApps];
-  const mobileApps = allApps.filter((app) => app.href !== "/admin");
+  const launchpadApps: AppLaunchpadApp[] = allApps.map((app) => ({
+    id: app.id,
+    iconClass: app.iconClass,
+    label: app.label,
+    href: app.href,
+    description: app.description,
+  }));
   const searchHelpApps: GlobalSearchHelpApp[] = runtime.apps
     .filter((app) => (app.searchTags?.length ?? 0) > 0)
     .map((app) => ({
@@ -169,6 +170,7 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
     }))
     .sort((a, b) => a.appName.localeCompare(b.appName));
   const settings = c.get("settings");
+  const announcements = c.get("announcements");
   const appName = settings?.app?.name || "Cloud";
   // Project the user record down to what NavMenu actually renders. Without
   // this, the full `User` (mail, ssh keys, phone, address, all group
@@ -185,13 +187,15 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
   // Aggregate legalLinks from every running app (last-wins on duplicate href).
   const legalLinks = (() => {
     const seen = new Map<string, { label: string; href: string; icon?: string }>();
+    if (user) seen.set("/me", { label: "Profile", href: "/me", icon: "ti ti-user-circle" });
     for (const app of runtime.apps) {
       for (const link of app.legalLinks ?? []) seen.set(link.href, { ...link });
     }
     return [...seen.values()];
   })();
   const page = c.get("page") as Record<string, unknown>;
-  if (!page.title) page.title = typeof title === "string" ? title : appName;
+  const pageTitle = typeof title === "string" ? title : (title?.at(-1)?.title ?? appName);
+  if (!page.title) page.title = pageTitle;
   const breadcrumbs: Breadcrumb[] = !title ? [{ title: appName }] : typeof title === "string" ? [{ title }] : title;
   const showRail =
     !!user; /* * Grid layout: * Rail mode: [rail | content] * No rail: [content] * * Rows: [header] [main] [footer?] * The rail spans rows 1+2 via grid-row, so logo aligns with the header. */
@@ -200,10 +204,14 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
     ? "grid-cols-1 md:grid-cols-[auto_1fr] grid-rows-[auto_1fr]"
     : `grid-cols-1 ${!fullPage ? "grid-rows-[auto_1fr_auto]" : "grid-rows-[auto_1fr]"}`;
   return (
-    <div
-      class={`grid min-h-screen w-screen relative md:h-screen md:overflow-hidden bg-zinc-50 dark:bg-zinc-950 ${gridClass}`}
-    >
-      {" "}
+    <div class={`grid min-h-screen w-screen relative md:h-screen md:overflow-hidden bg-zinc-50 dark:bg-zinc-950 ${gridClass}`}>
+      <TimezoneCookie />
+      {showRail && <AppLaunchpad apps={launchpadApps} legalLinks={legalLinks} />}
+      {showRail && (
+        <script id="cloud-app-launchpad-data" type="application/json">
+          {jsonScript({ apps: launchpadApps, legalLinks })}
+        </script>
+      )}{" "}
       {/* ── Rail: logo cell (row 1, col 1) — grid gives it the same height as the header ── */}{" "}
       {showRail && (
         <div class="hidden md:flex items-center justify-center w-12 bg-white/20 dark:bg-zinc-950/20">
@@ -241,24 +249,18 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
           {/* Breadcrumbs — desktop, rail mode only */}{" "}
           <div class="hidden md:flex items-center min-w-0">
             {" "}
-            <BreadcrumbNav breadcrumbs={breadcrumbs} />{" "}
+            <LayoutBreadcrumbs breadcrumbs={breadcrumbs} />{" "}
           </div>{" "}
           {/* Mobile breadcrumb */}{" "}
           <div class="md:hidden flex items-center min-w-0">
             {" "}
-            <BreadcrumbNav breadcrumbs={breadcrumbs.slice(-1)} />{" "}
+            <LayoutBreadcrumbs breadcrumbs={breadcrumbs} mobile />{" "}
           </div>{" "}
         </div>{" "}
         <div class="flex items-center shrink-0 gap-1">
           {user && (
-            <GlobalSearchTrigger
-              variant="header"
-              registerHotkey
-              class={showRail ? "md:hidden" : ""}
-              searchHelpApps={searchHelpApps}
-            />
-          )}
-          {" "}
+            <GlobalSearchTrigger variant="header" registerHotkey class={showRail ? "md:hidden" : ""} searchHelpApps={searchHelpApps} />
+          )}{" "}
           {/* Desktop: direct /me link with avatar (logged in) or NavMenu (not logged in) */}{" "}
           {user ? (
             <>
@@ -272,11 +274,13 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
               </a>{" "}
               <div class="md:hidden">
                 {" "}
-                <NavMenu user={navMenuUser} mobileApps={mobileApps} />{" "}
+                <div class="flex items-center gap-1">
+                  <AppLaunchpad apps={launchpadApps} legalLinks={legalLinks} variant="header" label="Open apps" />
+                </div>{" "}
               </div>{" "}
             </>
           ) : (
-            <NavMenu user={navMenuUser} mobileApps={mobileApps} />
+            <NavMenu user={navMenuUser} />
           )}{" "}
         </div>{" "}
       </header>{" "}
@@ -290,12 +294,10 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
               <i class={`${app.iconClass} text-base`} />{" "}
             </a>
           ))}{" "}
-          <MoreAppsDropdown apps={moreApps} legalLinks={legalLinks} />
+          <AppLaunchpad apps={launchpadApps} legalLinks={legalLinks} variant="rail" label="Open apps" />
           <div class="mt-auto pb-1 flex flex-col items-center gap-1">
             {" "}
-            <GlobalSearchTrigger variant="rail" searchHelpApps={searchHelpApps} />{" "}
-            {" "}
-            <HotkeysHelpRail searchHelpApps={searchHelpApps} />{" "}
+            <GlobalSearchTrigger variant="rail" searchHelpApps={searchHelpApps} /> <HotkeysHelpRail searchHelpApps={searchHelpApps} />{" "}
             <ThemeToggleRail />{" "}
           </div>{" "}
         </div>
@@ -303,10 +305,16 @@ export default function Layout({ children, c, title, fullPage, fullWidth }: Layo
       {/* ── Main content (row 2) ── */}{" "}
       <div class="flex flex-col min-h-0 min-w-0 bg-zinc-50 dark:bg-zinc-950">
         {" "}
+        {user && announcements && (
+          <GlobalAnnouncements
+            banners={announcements.banners}
+            announcements={announcements.announcements}
+            latestAnnouncementVersion={announcements.latestAnnouncementVersion}
+            cookieState={announcements.cookieState}
+          />
+        )}{" "}
         {user && <ProfileWarnings user={user} />} {user && <ExpiryWarnings user={user} />}{" "}
-        <main
-          class={`flex-1 min-h-0 ${contentPadding} ${fullPage || fullWidth ? "md:overflow-hidden flex flex-col" : "md:overflow-auto"}`}
-        >
+        <main class={`flex-1 min-h-0 ${contentPadding} ${fullPage || fullWidth ? "md:overflow-hidden flex flex-col" : "md:overflow-auto"}`}>
           {" "}
           {children}{" "}
         </main>{" "}

package/src/ssr/LayoutBreadcrumbs.island.tsx

@@ -0,0 +1,44 @@
+import { createSignal, For, onCleanup, onMount } from "solid-js";
+import { LAYOUT_UPDATE_EVENT, type LayoutBreadcrumb, type LayoutUpdate } from "../ui/layout";
+
+type Props = {
+  breadcrumbs: LayoutBreadcrumb[];
+  mobile?: boolean;
+};
+
+export default function LayoutBreadcrumbs(props: Props) {
+  const [breadcrumbs, setBreadcrumbs] = createSignal(props.breadcrumbs);
+  const visibleBreadcrumbs = () => (props.mobile ? breadcrumbs().slice(-1) : breadcrumbs());
+
+  onMount(() => {
+    const onUpdate = (event: Event) => {
+      const detail = (event as CustomEvent<LayoutUpdate>).detail;
+      if (detail.breadcrumbs) setBreadcrumbs(detail.breadcrumbs);
+    };
+
+    window.addEventListener(LAYOUT_UPDATE_EVENT, onUpdate);
+    onCleanup(() => window.removeEventListener(LAYOUT_UPDATE_EVENT, onUpdate));
+  });
+
+  return (
+    <nav class="flex items-center gap-1 sm:gap-2 min-w-0 text-sm md:text-xs">
+      <For each={visibleBreadcrumbs()}>
+        {(crumb, i) => {
+          const isLast = () => i() === visibleBreadcrumbs().length - 1;
+          return (
+            <>
+              {i() > 0 && <span class="text-zinc-400 dark:text-zinc-600 text-xs">/</span>}
+              {crumb.href && !isLast() ? (
+                <a href={crumb.href} class="text-dimmed hover:text-primary truncate">
+                  {crumb.title}
+                </a>
+              ) : (
+                <span class="font-semibold text-primary truncate">{crumb.title}</span>
+              )}
+            </>
+          );
+        }}
+      </For>
+    </nav>
+  );
+}

package/src/ssr/LayoutHelp.tsx

@@ -0,0 +1,266 @@
+import { children, createEffect, createMemo, createSignal, For, onCleanup, onMount, Show, type JSX } from "solid-js";
+import { hotkeys } from "@valentinkolb/stdlib/solid";
+import { prompts } from "../ui";
+import { openGlobalSearchHelpDialog, type GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+
+export type LayoutHelpTab = {
+  id: string;
+  title: string;
+  icon?: string;
+  description?: string;
+  order?: number;
+  children: JSX.Element;
+};
+
+export type LayoutHelpProps = LayoutHelpTab;
+
+const HELP_TABS_EVENT = "cloud:layout-help-tabs";
+const LAST_TAB_KEY = "cloud.layoutHelp.activeTab";
+
+declare global {
+  interface Window {
+    __cloudLayoutHelpTabs?: Map<string, LayoutHelpTab>;
+  }
+}
+
+const getRegistry = () => {
+  if (typeof window === "undefined") return null;
+  window.__cloudLayoutHelpTabs ??= new Map<string, LayoutHelpTab>();
+  return window.__cloudLayoutHelpTabs;
+};
+
+const emitTabsChanged = () => {
+  if (typeof window !== "undefined") window.dispatchEvent(new Event(HELP_TABS_EVENT));
+};
+
+const readLastTab = () => {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(LAST_TAB_KEY);
+  } catch {
+    return null;
+  }
+};
+
+const writeLastTab = (id: string) => {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(LAST_TAB_KEY, id);
+  } catch {
+    // Help still works if localStorage is blocked.
+  }
+};
+
+const registeredTabs = () => {
+  const registry = getRegistry();
+  if (!registry) return [];
+  return [...registry.values()].sort((a, b) => (a.order ?? 100) - (b.order ?? 100) || a.title.localeCompare(b.title));
+};
+
+const iconClass = (icon?: string) => (icon?.startsWith("ti ") ? icon : `ti ${icon ?? "ti-circle"}`);
+
+export function registerLayoutHelpTab(tab: LayoutHelpTab) {
+  const registry = getRegistry();
+  if (!registry) return () => {};
+  registry.set(tab.id, tab);
+  emitTabsChanged();
+  return () => {
+    if (registry.get(tab.id) === tab) {
+      registry.delete(tab.id);
+      emitTabsChanged();
+    }
+  };
+}
+
+export function LayoutHelp(props: LayoutHelpProps) {
+  const resolved = children(() => props.children);
+
+  onMount(() => {
+    const dispose = registerLayoutHelpTab({
+      id: props.id,
+      title: props.title,
+      icon: props.icon,
+      description: props.description,
+      order: props.order,
+      children: resolved(),
+    });
+    onCleanup(dispose);
+  });
+
+  return null;
+}
+
+const ShortcutsHelp = (props: { openSearchHelp: () => void }) => {
+  const entries = createMemo(() =>
+    [...hotkeys.entries()].sort((a, b) => {
+      const labelSort = a.label.localeCompare(b.label);
+      return labelSort !== 0 ? labelSort : a.keys.localeCompare(b.keys);
+    }),
+  );
+
+  return (
+    <div class="space-y-4">
+      <div class="info-block-info flex items-start gap-2 text-xs">
+        <i class="ti ti-info-circle mt-0.5 shrink-0" />
+        <span>Shortcuts change with the current app and view. This list updates automatically.</span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium text-blue-600 hover:bg-blue-50 dark:text-blue-300 dark:hover:bg-blue-950/40"
+        onClick={props.openSearchHelp}
+      >
+        <i class="ti ti-search text-sm" />
+        Show search help
+      </button>
+
+      <div class="flex flex-col gap-2">
+        <For each={entries()}>
+          {(entry) => (
+            <div class="rounded-lg bg-zinc-50/80 p-2.5 ring-1 ring-inset ring-zinc-200 dark:bg-zinc-900/45 dark:ring-zinc-800">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-medium text-primary">{entry.label}</p>
+                  <p class="mt-0.5 text-xs text-dimmed">{entry.desc || "No description provided."}</p>
+                </div>
+                <div class="flex shrink-0 items-center gap-1.5" role="group" aria-label={entry.keysPretty.map((part) => part.ariaLabel).join(" + ")}>
+                  <For each={entry.keysPretty}>
+                    {(part) => (
+                      <kbd class="inline-flex min-w-6 justify-center rounded-md bg-white px-1.5 py-1 text-[11px] font-medium leading-none text-primary ring-1 ring-inset ring-zinc-300 dark:bg-zinc-950 dark:ring-zinc-700">
+                        {part.key}
+                      </kbd>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+        <Show when={entries().length === 0}>
+          <div class="rounded-lg bg-zinc-50/80 p-3 text-xs text-dimmed ring-1 ring-inset ring-zinc-200 dark:bg-zinc-900/45 dark:ring-zinc-800">
+            No shortcuts registered yet.
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+const LayoutHelpDialog = (props: { close: () => void; searchHelpApps: GlobalSearchHelpApp[] }) => {
+  const [externalTabs, setExternalTabs] = createSignal(registeredTabs());
+  const allTabs = createMemo<LayoutHelpTab[]>(() => [
+    {
+      id: "shortcuts",
+      title: "Shortcuts",
+      icon: "ti ti-keyboard",
+      description: "Keyboard actions for the current page.",
+      order: 0,
+      children: (
+        <ShortcutsHelp
+          openSearchHelp={() => {
+            props.close();
+            queueMicrotask(() => openGlobalSearchHelpDialog(props.searchHelpApps));
+          }}
+        />
+      ),
+    },
+    ...externalTabs(),
+  ]);
+  const initialTab = () => {
+    const last = readLastTab();
+    return allTabs().some((tab) => tab.id === last) ? last! : (allTabs()[0]?.id ?? "shortcuts");
+  };
+  const [activeId, setActiveId] = createSignal(initialTab());
+
+  onMount(() => {
+    const update = () => setExternalTabs(registeredTabs());
+    window.addEventListener(HELP_TABS_EVENT, update);
+    update();
+    onCleanup(() => window.removeEventListener(HELP_TABS_EVENT, update));
+  });
+
+  createEffect(() => {
+    const tabs = allTabs();
+    if (!tabs.some((tab) => tab.id === activeId())) {
+      const last = readLastTab();
+      setActiveId(tabs.some((tab) => tab.id === last) ? last! : (tabs[0]?.id ?? "shortcuts"));
+    }
+  });
+
+  const selectTab = (id: string) => {
+    setActiveId(id);
+    writeLastTab(id);
+  };
+
+  return (
+    <div class="flex h-[min(90vh,52rem)] w-full flex-col gap-3">
+      <div class="paper flex items-center justify-between gap-4 px-5 py-4">
+        <div class="flex min-w-0 items-center gap-3">
+          <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white">
+            <i class="ti ti-help text-xl" />
+          </div>
+          <div class="min-w-0">
+            <h2 class="truncate text-lg font-semibold text-primary">Help</h2>
+            <p class="truncate text-sm text-dimmed">Shortcuts, app help, and guides.</p>
+          </div>
+        </div>
+        <button type="button" class="icon-btn ml-auto shrink-0" onClick={props.close} aria-label="Close help">
+          <i class="ti ti-x" />
+        </button>
+      </div>
+
+      <div class="grid min-h-0 flex-1 gap-3 md:grid-cols-[14rem_1fr]">
+        <nav class="paper flex gap-1 overflow-x-auto p-2 md:min-h-0 md:flex-col md:overflow-visible" aria-label="Help topics">
+          <For each={allTabs()}>
+            {(tab) => {
+              const active = () => tab.id === activeId();
+              return (
+                <button
+                  type="button"
+                  class={`flex min-w-40 items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition md:min-w-0 ${
+                    active()
+                      ? "bg-blue-50 text-blue-600 dark:bg-blue-950/45 dark:text-blue-300"
+                      : "text-dimmed hover:bg-zinc-100 hover:text-primary dark:hover:bg-zinc-900"
+                  }`}
+                  onClick={() => selectTab(tab.id)}
+                >
+                  <i class={`${iconClass(tab.icon)} shrink-0 text-base`} />
+                  <span class="min-w-0 flex-1 truncate">{tab.title}</span>
+                </button>
+              );
+            }}
+          </For>
+        </nav>
+
+        <section class="paper min-h-0 overflow-hidden">
+          <For each={allTabs()}>
+            {(tab) => (
+              <div class={`${tab.id === activeId() ? "block" : "hidden"} h-full overflow-y-auto px-5 py-5 pr-4`}>
+                <div class="mb-5 flex items-start gap-3">
+                  <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">
+                    <i class={`${iconClass(tab.icon)} text-lg`} />
+                  </div>
+                  <div class="min-w-0">
+                    <h3 class="text-base font-semibold text-primary">{tab.title}</h3>
+                    <Show when={tab.description}>
+                      <p class="mt-0.5 text-sm text-dimmed">{tab.description}</p>
+                    </Show>
+                  </div>
+                </div>
+                {tab.children}
+              </div>
+            )}
+          </For>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export function openLayoutHelpDialog(searchHelpApps: GlobalSearchHelpApp[] = []) {
+  void prompts.dialog<void>((close) => <LayoutHelpDialog close={close} searchHelpApps={searchHelpApps} />, {
+    surface: "bare",
+    header: false,
+    size: "wide",
+  });
+}