@k2b/cloud 0.6.0-rc.0 → 0.7.0

package/src/ssr/AppLaunchpadPanel.tsx

@@ -0,0 +1,181 @@
+import type { CloudTheme } from "../shared/theme";
+import { MobileProfileActions } from "./MobileProfileActions";
+import { Dynamic } from "solid-js/web";
+import { platformMessages } from "./platform-messages";
+import { IconButton, ScrollArea, TextInput, useLocale } from "@k2b/ui";
+import { createSignal, For, Show, type JSX } from "solid-js";
+import { documentNavigate } from "@k2b/ssr/nav";
+import { openRailEditor } from "./RailEditor";
+import { readRailContext } from "./rail-context";
+import { railMessages } from "./rail-messages";
+import { projectRailNavigation } from "./rail-navigation";
+
+export type AppLaunchpadApp = {
+  id: string;
+  iconClass: string;
+  label: string;
+  href: string;
+  description?: string;
+  accent?: string;
+};
+
+export type AppLaunchpadLegalLink = {
+  label: string;
+  href: string;
+  icon?: string;
+};
+
+export type AppLaunchpadContext = {
+  profile?: { name: string; theme: CloudTheme };
+  apps: AppLaunchpadApp[];
+  legalLinks: AppLaunchpadLegalLink[];
+};
+
+type AppIconPaletteEntry = { from: string };
+
+const appIconPalette: readonly [AppIconPaletteEntry, ...AppIconPaletteEntry[]] = [
+  { from: "#2563eb" },
+  { from: "#059669" },
+  { from: "#7c3aed" },
+  { from: "#d97706" },
+  { from: "#e11d48" },
+  { from: "#0891b2" },
+  { from: "#52525b" },
+];
+
+const paletteForId = (id: string) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) hash = (hash + id.charCodeAt(i)) % appIconPalette.length;
+  return appIconPalette[hash] ?? appIconPalette[0];
+};
+
+const appIconStyle = (app: AppLaunchpadApp) => {
+  const tone = /^#[0-9a-f]{6}$/i.test(app.accent ?? "") ? app.accent! : paletteForId(app.id).from;
+  return `--app-icon-color:${tone}`;
+};
+
+export const AppLaunchpadPanel = (
+  props: AppLaunchpadContext & { close: () => void; beforeSelect?: () => Promise<boolean>; surface?: "panel" | "sheet" },
+) => {
+  const locale = useLocale();
+  const t = () => railMessages.resolve([locale()]).t;
+  const rail = readRailContext();
+  const [query, setQuery] = createSignal("");
+  const messages = () => platformMessages.resolve([locale()]).t;
+  const matches = (label: string, description = "") =>
+    `${label} ${description}`.toLocaleLowerCase(locale()).includes(query().trim().toLocaleLowerCase(locale()));
+  const apps = () => props.apps.filter((app) => matches(app.label, app.description));
+  const shortcuts = () =>
+    (rail ? projectRailNavigation(rail.apps, rail.settings, locale()).shortcuts : []).filter((shortcut) => matches(shortcut.label));
+  const follow: JSX.EventHandler<HTMLAnchorElement, MouseEvent> = (event) => {
+    if (!props.beforeSelect || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    const href = event.currentTarget.href;
+    void props.beforeSelect().then((allowed) => {
+      if (allowed) documentNavigate(href);
+    });
+  };
+  return (
+    <Dynamic
+      component={props.surface === "sheet" ? "div" : ScrollArea}
+      class={
+        props.surface === "sheet"
+          ? "cloud-mobile-apps"
+          : "launchpad-panel mx-auto max-h-[min(86vh,var(--ui-dialog-available-height))] w-[var(--ui-dialog-available-width)] max-w-[var(--ui-dialog-available-width)] overscroll-contain p-4 text-primary sm:w-fit sm:p-6 md:p-7 dark:text-white"
+      }
+    >
+      <div class="launchpad-tools">
+        <Show when={props.surface === "sheet"}>
+          <TextInput
+            value={query}
+            onValueChange={setQuery}
+            icon="ti ti-search"
+            clearable
+            placeholder={messages().findApps}
+            aria-label={messages().findApps}
+          />
+        </Show>
+        <Show when={rail}>
+          <div class="launchpad-customize mb-2 flex justify-end">
+            <IconButton
+              variant="ghost"
+              size="sm"
+              label={t().customize}
+              tooltip={t().customize}
+              tooltipDelay={0}
+              onClick={async () => {
+                if (props.beforeSelect) {
+                  if (!(await props.beforeSelect())) return;
+                } else props.close();
+                openRailEditor(locale());
+              }}
+            >
+              <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
+            </IconButton>
+          </div>
+        </Show>
+      </div>
+      <Show when={shortcuts().length > 0}>
+        <section class="mb-5" aria-label={t().shortcuts}>
+          <div class="flex flex-wrap justify-center gap-3">
+            <For each={shortcuts()}>
+              {(shortcut) => (
+                <a
+                  onClick={follow}
+                  href={shortcut.href}
+                  class="group flex w-16 min-w-0 flex-col items-center gap-1 rounded-lg p-1 text-center focus-ui"
+                >
+                  <span class="grid h-9 w-9 place-items-center rounded-xl bg-[var(--ui-hover)] text-lg transition-colors group-hover:bg-[var(--ui-active)]">
+                    <i class={shortcut.iconClass} aria-hidden="true" />
+                  </span>
+                  <span class="max-w-full truncate text-[11px] font-medium text-primary dark:text-white">{shortcut.label}</span>
+                </a>
+              )}
+            </For>
+          </div>
+        </section>
+      </Show>
+      <div class="launchpad-apps-grid flex flex-wrap justify-center gap-x-4 gap-y-4 sm:gap-x-7 sm:gap-y-6">
+        <For each={apps()}>
+          {(app) => (
+            <a
+              onClick={follow}
+              href={app.href}
+              class="launchpad-app group flex w-[4.75rem] min-w-0 flex-col items-center gap-1.5 rounded-2xl p-1 text-center focus-ui sm:w-[6.25rem] sm:gap-2 sm:p-2"
+            >
+              <span
+                class="app-icon grid h-12 w-12 place-items-center rounded-[0.95rem] text-[1.25rem] sm:h-16 sm:w-16 sm:rounded-[1.25rem] sm:text-[1.7rem]"
+                style={appIconStyle(app)}
+              >
+                <i class={app.iconClass} />
+              </span>
+              <span class="max-w-full truncate text-[11px] font-medium text-primary sm:text-xs dark:text-white">{app.label}</span>
+            </a>
+          )}
+        </For>
+      </div>
+      <Show when={!apps().length && !shortcuts().length}>
+        <p class="py-6 text-center text-dimmed">{messages().noAppsFound}</p>
+      </Show>
+      <Show when={props.surface === "sheet" && props.profile && props.beforeSelect}>
+        <MobileProfileActions profile={props.profile!} beforeSelect={props.beforeSelect!} />
+      </Show>
+      <Show when={props.legalLinks.length > 0}>
+        <div class="mt-7 flex flex-wrap justify-center text-[11px] text-dimmed dark:text-white/56">
+          <For each={props.legalLinks.filter((link) => !(props.surface === "sheet" && props.profile && link.href === "/me"))}>
+            {(link) => (
+              <a
+                onClick={follow}
+                href={link.href}
+                class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:text-primary dark:hover:text-white"
+              >
+                <i class={link.icon ?? "ti ti-file-text"} />
+                {link.label}
+              </a>
+            )}
+          </For>
+        </div>
+      </Show>
+    </Dynamic>
+  );
+};

package/src/ssr/BrowserPushRegistration.island.tsx

@@ -0,0 +1,12 @@
+import { onMount } from "solid-js";
+import { browserNotificationClient } from "../browser/notifications";
+
+export default function BrowserPushRegistration() {
+  onMount(() => {
+    void browserNotificationClient.refreshExisting().catch((error) => {
+      console.warn("[notifications] Failed to refresh the browser endpoint", error);
+    });
+  });
+
+  return null;
+}

package/src/ssr/GlobalSearchDialog.tsx

@@ -1,35 +1,182 @@
-import { dialogCore, useLocale } from "@k2b/ui";
+import { type DialogRender, dialogCore, toast, useLocale } from "@k2b/ui";
+import { query } from "@k2b/stdlib/solid";
+import { resolveCommand } from "../capabilities/client";
+import { COMMANDS_CHANGED, collectContextAwareCommands } from "../browser/command-bridge";
+import { contextCommandsWithShortcuts } from "../browser/command-shortcuts";
+import { openCommand, runContextAwareCommand } from "../browser/commands";
+import { loadSearchCommands, type PaletteCommand } from "../browser/search-commands";
+import { createEffect, createSignal, For, onCleanup, onMount } from "solid-js";
 import type { SearchItem } from "../api/search/schemas";
 import CloudResourceSearch from "../browser/CloudResourceSearch";
-import { type GlobalSearchHelpApp, openGlobalSearchHelpDialog } from "./GlobalSearchHelpDialog";
+import type { NavigationSearchItem } from "../browser/navigation-search";
+import { resourceSearchDialogOptions } from "../browser/resource-search-dialog";
+import { resourceSearchMessages } from "../browser/resource-search-messages";
+import { type GlobalSearchOptions, requestSearchNavigation } from "../browser/search-bridge";
+import { attachSpotlightPosition } from "../browser/spotlight-position";
 
 type GlobalSearchDialogProps = {
+  request?: GlobalSearchOptions;
   close: () => void;
-  helpApps: GlobalSearchHelpApp[];
+  context?: Parameters<DialogRender<void>>[1];
+  searchLinks?: NavigationSearchItem[];
+  searchResources?: boolean;
 };
 
 export default function GlobalSearchDialog(props: GlobalSearchDialogProps) {
   const locale = useLocale();
-  const openHelp = () => {
+  const messages = () => resourceSearchMessages.resolve([locale()]).t;
+  const [contextCommands, setContextCommands] = createSignal<PaletteCommand[]>([]);
+  const updateContextCommands = () => setContextCommands(contextCommandsWithShortcuts().map((command) => ({ ...command, context: true })));
+  const commandsQuery = query.create({
+    source: locale,
+    enabled: () => props.searchResources !== false,
+    load: (locale, { abortSignal }) => loadSearchCommands(locale, abortSignal),
+  });
+  onMount(() => {
+    window.addEventListener(COMMANDS_CHANGED, updateContextCommands);
+    updateContextCommands();
+    onCleanup(() => window.removeEventListener(COMMANDS_CHANGED, updateContextCommands));
+  });
+  const runCommand = async (command: PaletteCommand, newTab: boolean) => {
+    if (navigating()) return;
+    // Check live ownership once more; a background panel may have closed since rendering.
+    if (
+      command.context &&
+      !collectContextAwareCommands().some((current) => current.id === command.id && current.action === command.action)
+    ) {
+      updateContextCommands();
+      toast.error(messages().commandUnavailable);
+      return;
+    }
+    const target = command.action;
+    if (typeof target !== "function" && "search" in target) {
+      if (!newTab) await runContextAwareCommand(command);
+      return;
+    }
+    setNavigating(true);
+    setNavigationError(false);
+    if (newTab && typeof target !== "function") {
+      // Reserve synchronously inside the user gesture; never lose it to popup blocking.
+      const tab = window.open("about:blank", "_blank");
+      if (tab) tab.opener = null;
+      try {
+        if (!tab) throw new Error("Popup blocked");
+        const result = await resolveCommand(target.command, target.input, target.options);
+        if (!result.ok) throw new Error(result.error.message);
+        tab.location.replace(result.data.href);
+      } catch {
+        tab?.close();
+        if (active) setNavigationError(true);
+      } finally {
+        if (active) setNavigating(false);
+      }
+      return;
+    }
     props.close();
-    queueMicrotask(() => openGlobalSearchHelpDialog(props.helpApps, locale()));
+    try {
+      if (command.context) await runContextAwareCommand(command);
+      else if (typeof target === "function") await target();
+      else await openCommand(target.command, target.input, target.options);
+    } catch (error) {
+      toast.error(error instanceof Error && error.message ? error.message : messages().commandFailed);
+    }
   };
-
-  const openItem = (item: SearchItem) => {
-    props.close();
-    window.location.href = item.href;
+  let host!: HTMLDivElement;
+  onMount(() => {
+    if (props.context) onCleanup(attachSpotlightPosition(host, props.context, messages));
+  });
+  const openInNewTab = (item: SearchItem) => {
+    window.open(item.href, "_blank", "noopener,noreferrer");
   };
-
-  return <CloudResourceSearch helpApps={props.helpApps} onHelp={openHelp} onSelect={openItem} />;
+  const [navigating, setNavigating] = createSignal(false);
+  const [navigationError, setNavigationError] = createSignal(false);
+  createEffect(() => {
+    props.request;
+    setNavigationError(false);
+  });
+  let active = true;
+  onCleanup(() => {
+    active = false;
+  });
+  const openItem = async (item: SearchItem) => {
+    if (navigating()) return;
+    setNavigating(true);
+    setNavigationError(false);
+    try {
+      const handled = await requestSearchNavigation({
+        href: item.href,
+        ...(item.ref.type === "cloud.navigation" ? {} : { ref: item.ref }),
+      });
+      if (!active) return;
+      props.close();
+      if (!handled) window.location.assign(item.href);
+    } catch {
+      if (active) setNavigationError(true);
+    } finally {
+      if (active) setNavigating(false);
+    }
+  };
+  return (
+    <div ref={host} class="cloud-global-search">
+      <CloudResourceSearch
+        commands={[
+          ...contextCommands(),
+          ...(commandsQuery.data() ?? []).filter((command) => !contextCommands().some((context) => context.id === command.id)),
+        ]}
+        commandsLoading={commandsQuery.loading()}
+        commandsError={Boolean(commandsQuery.error())}
+        onCommand={props.searchResources === false ? undefined : (command, newTab) => void runCommand(command, newTab)}
+        request={props.request}
+        disabled={navigating()}
+        navigationError={navigationError() ? messages().navigationFailed : undefined}
+        navigationItems={props.searchLinks}
+        searchResources={props.searchResources}
+        onClose={props.close}
+        onSelect={(item) => void openItem(item)}
+        onOpenInNewTab={openInNewTab}
+      />
+      <For each={["top", "right", "bottom", "left"]}>{(edge) => <div aria-hidden="true" data-search-grip={edge} />}</For>
+    </div>
+  );
 }
 
-export const openGlobalSearchDialog = (helpApps: GlobalSearchHelpApp[] = []) => {
-  if (dialogCore.isOpen()) return;
-
-  void dialogCore.open<void>((close) => <GlobalSearchDialog close={close} helpApps={helpApps} />, {
-    panelClassName:
-      "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 m-0 h-[var(--spotlight-dialog-height)] w-[min(var(--ui-dialog-available-width),72rem)] [--spotlight-dialog-height:min(50vh,var(--ui-dialog-available-height))] overflow-hidden overscroll-y-contain rounded-2xl border-0 bg-white/92 p-0 text-zinc-900 shadow-xl ring-1 ring-inset ring-zinc-300/60 backdrop:bg-black/35 backdrop:backdrop-blur-sm dark:bg-zinc-950/92 dark:text-zinc-100 dark:ring-zinc-700/60 [@media(min-height:1100px)]:[--spotlight-dialog-height:min(33vh,var(--ui-dialog-available-height))]",
-    contentClassName: "h-full min-h-0",
-    initialFocus: "none",
-  });
+/** Owned by the layout island; neither dialog state nor callbacks cross SSR props. */
+export const createGlobalSearchHost = (searchLinks: () => NavigationSearchItem[], searchResources = true) => {
+  const [request, setRequest] = createSignal<GlobalSearchOptions>({});
+  let controller: AbortController | undefined;
+  return {
+    open: (options: GlobalSearchOptions) => {
+      setRequest({ ...options });
+      if (controller) {
+        document.querySelector<HTMLInputElement>(".cloud-global-search input[role=combobox]")?.focus();
+        return;
+      }
+      const current = new AbortController();
+      controller = current;
+      const locale = document.documentElement.lang || "en";
+      void dialogCore
+        .open<void>(
+          (close, context) => (
+            <GlobalSearchDialog
+              request={request()}
+              searchLinks={searchLinks()}
+              searchResources={searchResources}
+              close={close}
+              context={context}
+            />
+          ),
+          { ...resourceSearchDialogOptions(resourceSearchMessages.resolve([locale]).t.searchCloudResources), signal: current.signal },
+        )
+        .catch(() => {
+          toast.error(resourceSearchMessages.resolve([locale]).t.searchFailed);
+        })
+        .finally(() => {
+          if (controller === current) controller = undefined;
+        });
+    },
+    dispose: () => {
+      controller?.abort();
+      controller = undefined;
+    },
+  };
 };

package/src/ssr/GlobalSearchTrigger.island.tsx

@@ -1,38 +1,54 @@
-import { hotkeys } from "@k2b/stdlib/solid";
+import { registerContextAwareCommand, runContextAwareCommand } from "../browser/commands";
+import { attachCommandShortcuts } from "../browser/command-shortcuts";
 import { IconButton, Tooltip, useLocale } from "@k2b/ui";
-import { openGlobalSearchDialog } from "./GlobalSearchDialog";
-import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+import { createEffect, onCleanup, onMount } from "solid-js";
+import type { NavigationSearchItem } from "../browser/navigation-search";
+import { openGlobalSearch } from "../browser/search";
+import { registerGlobalSearchHost } from "../browser/search-bridge";
+import { createGlobalSearchHost } from "./GlobalSearchDialog";
 import { platformMessages } from "./platform-messages";
 
 type GlobalSearchTriggerProps = {
-  variant: "header" | "rail";
+  variant: "header" | "rail" | "host";
   class?: string;
-  registerHotkey?: boolean;
-  searchHelpApps?: GlobalSearchHelpApp[];
+  registerCommand?: boolean;
+  searchLinks?: NavigationSearchItem[];
+  searchResources?: boolean;
 };
 
 /** Opens the spotlight-style global search dialog from nav/header trigger points. */
 export default function GlobalSearchTrigger(props: GlobalSearchTriggerProps) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
-  const searchHelpApps = props.searchHelpApps ?? [];
 
-  if (props.registerHotkey) {
-    hotkeys.create(() => ({
-      "mod+k": {
-        label: t().openGlobalSearch,
-        desc: t().globalSearchDescription,
-        run: () => openGlobalSearchDialog(searchHelpApps),
-      },
-    }));
+  if (props.registerCommand) {
+    const host = createGlobalSearchHost(() => props.searchLinks ?? [], props.searchResources);
+    onMount(() => {
+      onCleanup(registerGlobalSearchHost(host.open, host.dispose));
+    });
+    onMount(() => onCleanup(attachCommandShortcuts((command) => void runContextAwareCommand(command))));
+    createEffect(() =>
+      onCleanup(
+        registerContextAwareCommand({
+          id: "cloud.search",
+          title: t().openGlobalSearch,
+          description: t().globalSearchDescription,
+          icon: "ti ti-search",
+          shortcut: "mod+k",
+          action: { search: {} },
+        }),
+      ),
+    );
   }
 
+  if (props.variant === "host") return null;
+
   if (props.variant === "rail")
     return (
       <Tooltip.Trigger
         type="button"
         class={`rail-item text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/15 dark:hover:text-blue-300 ${props.class ?? ""}`}
-        onClick={() => openGlobalSearchDialog(searchHelpApps)}
+        onClick={() => openGlobalSearch()}
         aria-label={t().openGlobalSearch}
         placement="right"
         delay={0}
@@ -43,12 +59,7 @@ export default function GlobalSearchTrigger(props: GlobalSearchTriggerProps) {
     );
 
   return (
-    <IconButton
-      class={props.class}
-      onClick={() => openGlobalSearchDialog(searchHelpApps)}
-      label={t().openGlobalSearch}
-      title={t().searchShortcut}
-    >
+    <IconButton class={props.class} onClick={() => openGlobalSearch()} label={t().openGlobalSearch} title={t().searchShortcut}>
       <i class="ti ti-search text-base" />
     </IconButton>
   );

package/src/ssr/Layout.tsx

@@ -1,3 +1,5 @@
+import { getLayoutHelp } from "./help";
+import { navigationSearchItems } from "../browser/navigation-search";
 import type { DateContext } from "@k2b/stdlib";
 import { AppWorkspace, appWorkspaceLayoutStyle, LocaleProvider, NoticeCard } from "@k2b/ui";
 import type { JSX } from "solid-js/jsx-runtime";
@@ -7,13 +9,13 @@ import { defaultRailPreferences } from "../contracts/rail-preferences";
 import { hasRole, type User } from "../contracts/shared";
 import { getLocale } from "../server/locale";
 import { getDateConfig } from "../server/time";
-import { dates, resolveHelpManifest } from "../shared";
+import { dates } from "../shared";
 import { readThemeFromCookieHeader } from "../shared/theme";
 import type { AppLaunchpadApp } from "./AppLaunchpad.island";
 import AppWorkspaceController from "./AppWorkspaceController.island";
 import { appAppearanceStyle, resolveCurrentApp } from "./app-appearance";
 import { visibleNavigationApps } from "./app-navigation";
-import BrowserNotifications from "./BrowserNotifications.island";
+import BrowserPushRegistration from "./BrowserPushRegistration.island";
 import GlobalAnnouncements from "./GlobalAnnouncements.island";
 import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
 import LayoutFooter from "./LayoutFooter";
@@ -155,7 +157,7 @@ export default function Layout(props: LayoutProps) {
   const user = c.get("user");
   const pathname = new URL(c.req.raw.url).pathname;
   const currentApp = resolveCurrentApp(runtime.apps, pathname);
-  const registeredHelp = currentApp?.help ? resolveHelpManifest(currentApp.help, lang) : undefined;
+  const registeredHelp = getLayoutHelp(c);
   const workspaceLayout = resolveAppWorkspaceLayoutForSidebar(
     readAppWorkspaceLayoutCookie(cookie, currentApp?.id),
     workspaceSidebarCollapsible,
@@ -170,6 +172,10 @@ export default function Layout(props: LayoutProps) {
     description: app.description,
     accent: app.accent,
   }));
+  const searchLinks = navigationSearchItems(
+    runtime.apps,
+    allApps.map((app) => app.id),
+  );
   const searchHelpApps: GlobalSearchHelpApp[] = runtime.apps
     .filter((app) => (app.searchTags?.length ?? 0) > 0)
     .map((app) => ({
@@ -203,7 +209,7 @@ export default function Layout(props: LayoutProps) {
     user?.avatarHash && user.id
       ? `/api/accounts/users/${encodeURIComponent(user.id)}/avatar?rev=${encodeURIComponent(user.avatarHash)}`
       : undefined;
-  const mainLayoutClass = fullPage || fullWidth ? "flex flex-col" : "md:overflow-auto";
+  const mainLayoutClass = fullPage || fullWidth ? "flex flex-col" : "lg:overflow-auto";
   const canvasStyle =
     [appAppearanceStyle(currentApp?.appearance), appWorkspaceLayoutStyle(workspaceLayout), focusMode && flushCanvas ? "padding:0" : ""]
       .filter(Boolean)
@@ -215,6 +221,7 @@ export default function Layout(props: LayoutProps) {
           class="cloud-app-canvas flex h-dvh w-full overflow-hidden"
           style={canvasStyle}
           data-app-id={currentApp?.id}
+          data-layout-full-page="true"
           data-workspace-sidebar-collapsed={workspaceLayout?.sidebarCollapsed ? "true" : undefined}
         >
           <TimezoneCookie />
@@ -229,16 +236,17 @@ export default function Layout(props: LayoutProps) {
   return (
     <LocaleProvider locale={lang}>
       <div
-        class={`cloud-app-canvas relative flex w-full ${fullPage ? "h-dvh overflow-hidden" : "min-h-screen md:h-screen md:overflow-hidden"}`}
+        class={`cloud-app-canvas relative flex w-full ${fullPage ? "h-dvh overflow-hidden" : "min-h-screen lg:h-screen lg:overflow-hidden"}`}
         style={canvasStyle}
         data-app-id={currentApp?.id}
+        data-layout-full-page={fullPage ? "true" : undefined}
         data-layout-authenticated={showRail ? "true" : undefined}
         data-workspace-sidebar-collapsed={workspaceLayout?.sidebarCollapsed ? "true" : undefined}
       >
         <TimezoneCookie />
         {registeredHelp && <RegisteredHelpDocuments documents={registeredHelp.documents} pageBase={registeredHelp.pageBase} />}
         <AppWorkspaceController appId={currentApp?.id} />
-        {user && <BrowserNotifications userId={user.id} />}
+        {user && <BrowserPushRegistration />}
         {showRail && (
           <LayoutRail
             accent={currentApp?.appearance?.accent}
@@ -253,11 +261,13 @@ export default function Layout(props: LayoutProps) {
             profileAvatarSrc={profileAvatarSrc}
             profileName={profileName}
             searchHelpApps={searchHelpApps}
+            searchLinks={searchLinks}
             theme={theme}
           />
         )}
         <div class="layout-shell-content flex min-h-0 min-w-0 flex-1 flex-col">
           <LayoutHeader
+            appLabel={currentApp?.name ?? (pathname.startsWith("/admin") ? t.admin : undefined)}
             accent={currentApp?.appearance?.accent}
             authenticated={showRail}
             breadcrumbs={breadcrumbs}
@@ -268,6 +278,7 @@ export default function Layout(props: LayoutProps) {
             profileAvatarSrc={profileAvatarSrc}
             profileName={profileName}
             searchHelpApps={searchHelpApps}
+            searchLinks={searchLinks}
             signInLabel={t.signIn}
             theme={theme}
           />

package/src/ssr/LayoutBreadcrumbs.island.tsx

@@ -3,12 +3,10 @@ import { LAYOUT_UPDATE_EVENT, type LayoutBreadcrumb, type LayoutUpdate } from ".
 
 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) => {
@@ -21,10 +19,10 @@ export default function LayoutBreadcrumbs(props: Props) {
   });
 
   return (
-    <nav class="flex items-center gap-1 sm:gap-2 min-w-0 text-sm md:text-xs">
-      <For each={visibleBreadcrumbs()}>
+    <nav class="flex items-center gap-1 sm:gap-2 min-w-0 text-xs">
+      <For each={breadcrumbs()}>
         {(crumb, i) => {
-          const isLast = () => i() === visibleBreadcrumbs().length - 1;
+          const isLast = () => i() === breadcrumbs().length - 1;
           return (
             <>
               {i() > 0 && <span class="text-zinc-400 dark:text-zinc-600 text-xs">/</span>}

package/src/ssr/LayoutFooter.tsx

@@ -5,7 +5,7 @@ type LayoutFooterProps = {
 
 export default function LayoutFooter(props: LayoutFooterProps) {
   return (
-    <footer class="hidden shrink-0 flex-wrap items-center justify-center gap-x-4 gap-y-1 px-3 py-2 text-xs text-dimmed md:flex">
+    <footer class="hidden shrink-0 flex-wrap items-center justify-center gap-x-4 gap-y-1 px-3 py-2 text-xs text-dimmed lg:flex">
       {props.legalLinks.map((link) => (
         <a href={link.href} class="flex items-center gap-1 transition-colors hover:text-primary">
           {link.icon && <i class={`${link.icon} text-xs`} />}