@k2b/cloud 0.32.0 → 0.34.0

package/src/ssr/rail-context.ts

@@ -1,26 +1,22 @@
 import type { RailPreferences, RailSnapshot } from "../contracts/rail-preferences";
 import type { RailApp } from "./rail-navigation";
+import { readShellData } from "./shell-data";
 
 export type RailContext = { apps: RailApp[]; settings: RailSnapshot };
 export const RAIL_PREFERENCES_EVENT = "cloud:rail-preferences";
 
 export const readRailContext = (): RailContext | undefined => {
-  if (typeof document === "undefined") return undefined;
-  const text = document.getElementById("cloud-rail-data")?.textContent;
-  if (!text) return undefined;
-  // Framework-generated, escaped SSR data; never loaded from localStorage. The server validates the snapshot when
-  // it reads it, so the shell does not load the schemas on every page.
-  const value: RailContext = JSON.parse(text);
-  return { apps: value.apps, settings: value.settings };
+  const data = readShellData();
+  return data?.rail ? { apps: data.apps, settings: data.rail } : undefined;
 };
 
 export const publishRailPreferences = (settings: RailPreferences) => {
-  const context = readRailContext();
-  const element = document.getElementById("cloud-rail-data");
-  if (context && element)
+  const data = readShellData();
+  const element = document.getElementById("cloud-shell-data");
+  if (data?.rail && element)
     element.textContent = JSON.stringify({
-      ...context,
-      settings: { ...settings, managedShortcuts: context.settings.managedShortcuts },
+      ...data,
+      rail: { ...settings, managedShortcuts: data.rail.managedShortcuts },
     }).replace(/</g, "\\u003c");
   window.dispatchEvent(new CustomEvent(RAIL_PREFERENCES_EVENT));
 };

package/src/ssr/rail-navigation.ts

@@ -1,4 +1,5 @@
 import type { RailPreferences, RailSnapshot } from "../contracts/rail-preferences";
+import { helpPageAppId } from "./layout-help-url";
 
 export type RailApp = {
   id: string;
@@ -55,6 +56,8 @@ export const projectRailNavigation = (apps: readonly RailApp[], settings: RailSn
 /** `currentPath` is the route as `pathname + search`; an absolute URL is accepted but never required. */
 export const railLinkActive = (link: RailLink, currentPath: string): boolean => {
   const current = new URL(currentPath, "https://cloud.invalid");
+  const helpAppId = helpPageAppId(current.pathname);
+  if (helpAppId && link.appId) return link.appId === helpAppId;
   const target = new URL(link.match, current);
   if (target.origin !== current.origin) return false;
   if (link.exact) return target.pathname === current.pathname && target.search === current.search && target.hash === current.hash;

package/src/ssr/shell-data.tsx

@@ -0,0 +1,48 @@
+import { createContext, type JSX, useContext } from "solid-js";
+import type { AppSearchLink } from "../contracts/app";
+import type { RailSnapshot } from "../contracts/rail-preferences";
+import type { CloudThemePreference } from "../shared/theme";
+import type { AppLaunchpadLegalLink } from "./app-launchpad";
+import type { RailApp } from "./rail-navigation";
+
+export type ShellData = {
+  /** The authorized navigation catalog, sorted for the request locale: the rail, the app grid and the phone menu show it. */
+  apps: RailApp[];
+  /** Signed-in pages: the person's rail preferences. */
+  rail?: RailSnapshot;
+  legalLinks: AppLaunchpadLegalLink[];
+  /** Signed-in pages: the person, for the profile menu and the phone menu's profile actions. */
+  profile?: { name: string; avatarSrc?: string; appHref?: string };
+  theme: CloudThemePreference;
+  /** The current app's accent, for the Help dialog and the phone menu, which open outside the app canvas. */
+  accent?: string;
+  /** The search destinations of each app in `apps`, by app id in registry order; the search host expands them into rows. */
+  searchLinks: Record<string, readonly AppSearchLink[]>;
+  /** The current app, for links inside its Help. */
+  appId?: string;
+};
+
+const ShellDataContext = createContext<() => ShellData>();
+
+export function ShellDataProvider(props: { data: ShellData; children: JSX.Element }) {
+  return (
+    <ShellDataContext.Provider value={() => props.data}>
+      <script id="cloud-shell-data" type="application/json" innerHTML={JSON.stringify(props.data).replace(/</g, "\\u003c")} />
+      {props.children}
+    </ShellDataContext.Provider>
+  );
+}
+
+export function readShellData(): ShellData | undefined {
+  if (typeof document === "undefined") return undefined;
+  const text = document.getElementById("cloud-shell-data")?.textContent;
+  if (!text) return undefined;
+  // Framework-generated, escaped SSR data; never loaded from localStorage. The server validates the rail snapshot when
+  // it reads it, so the shell does not load the schemas on every page.
+  const data: ShellData = JSON.parse(text);
+  return data;
+}
+
+export function useShellData(): ShellData | undefined {
+  return useContext(ShellDataContext)?.() ?? readShellData();
+}

package/src/ssr/timezone-cookie.ts

@@ -0,0 +1,22 @@
+import { cookies } from "@k2b/stdlib/browser";
+import { TIMEZONE_COOKIE } from "../shared/time";
+
+/**
+ * Stores the browser's timezone for server-rendered times. With `reload`, a
+ * changed timezone reloads the page once, so it shows times in that zone.
+ */
+export const syncTimezoneCookie = (reload: boolean) => {
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const current = cookies.readCookie(TIMEZONE_COOKIE);
+  if (!timeZone || current === timeZone) return;
+  cookies.writeCookie(TIMEZONE_COOKIE, timeZone);
+  if (!reload) return;
+  try {
+    if (sessionStorage.getItem("cloud.timezone.reload") !== timeZone) {
+      sessionStorage.setItem("cloud.timezone.reload", timeZone);
+      window.location.reload();
+    }
+  } catch {
+    // Cookie persistence still succeeds; the next navigation will render with the browser timezone.
+  }
+};

package/src/ssr/workspace-navigation.ts

@@ -1,4 +1,4 @@
-import { createNavigation, type NavigationController, type NavigationItem } from "@k2b/ui";
+import { type AppWorkspaceSidebarSwitcherProps, createNavigation, type NavigationController, type NavigationItem } from "@k2b/ui";
 import { createEffect, onCleanup, onMount } from "solid-js";
 
 export type WorkspaceNavigationState = { navigation: NavigationController; label: string; owner: Element };
@@ -44,6 +44,28 @@ function validItems(value: unknown): value is NavigationItem[] {
   );
 }
 
+function readSwitcher(value: unknown): AppWorkspaceSidebarSwitcherProps | undefined {
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("currentId" in value) ||
+    typeof value.currentId !== "string" ||
+    !("label" in value) ||
+    typeof value.label !== "string" ||
+    !("icon" in value) ||
+    typeof value.icon !== "string" ||
+    !("switchLabel" in value) ||
+    typeof value.switchLabel !== "string"
+  )
+    return;
+  const description = "description" in value ? value.description : undefined;
+  const color = "color" in value ? value.color : undefined;
+  if (description !== undefined && typeof description !== "string") return;
+  if (color !== undefined && typeof color !== "string") return;
+  // The snapshot carries only the head; options and actions wait for the owning island.
+  return { currentId: value.currentId, label: value.label, icon: value.icon, switchLabel: value.switchLabel, description, color };
+}
+
 export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined {
   if (typeof window === "undefined") return;
   const current = window.__cloudWorkspaceNavigation;
@@ -67,10 +89,11 @@ export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined
         ...(item.inlineActions ? { inlineActions: item.inlineActions.map((action) => ({ ...action, disabled: true })) } : {}),
       }));
     const items = links(value.items);
+    const switcher = "switcher" in value ? readSwitcher(value.switcher) : undefined;
     return {
       owner,
       label: "label" in value && typeof value.label === "string" ? value.label : "",
-      navigation: createNavigation({ items: () => items }),
+      navigation: createNavigation({ items: () => items, ...(switcher ? { switcher: () => switcher } : {}) }),
     };
   } catch {
     return;

package/src/styles/effects.css

@@ -345,12 +345,22 @@
   background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 10%, var(--ui-surface-muted));
 }
 
+/* The reader's layout steps follow its own width: a dialog, a full page, or
+   an app's embedded reader, never the window. */
+.help-article {
+  container: help-article / inline-size;
+}
+
+.help-article-toc[data-empty] {
+  visibility: hidden;
+}
+
 .help-article-layout {
   display: grid;
   grid-template-columns: minmax(10rem, 13rem) minmax(0, 52rem);
   justify-content: center;
   align-items: start;
-  gap: clamp(2rem, 4vw, 4rem);
+  gap: clamp(2rem, 4cqi, 4rem);
 }
 
 .help-article-copy {
@@ -892,7 +902,7 @@
   border: 0;
 }
 
-@media (max-width: 72rem) {
+@container help-article (max-width: 56rem) {
   .help-article-layout {
     grid-template-columns: 3.25rem minmax(0, 52rem);
     gap: 2rem;
@@ -919,7 +929,7 @@
   }
 }
 
-@media (max-width: 48rem) {
+@container help-article (max-width: 40rem) {
   .help-article-layout {
     grid-template-columns: minmax(0, 1fr);
     gap: 1.5rem;

package/src/styles/global.css

@@ -303,6 +303,10 @@ solid-island {
      so short and long pages keep the same width. Full-page surfaces own their
      inner scrolling. */
   html:has(.cloud-app-canvas:not([data-layout-full-page])) { scrollbar-gutter: stable; }
+  /* A page that scrolls its content in a ScrollArea grows with it here, so
+     the area does not scroll and reserves no second gutter beside the
+     document's. From md, `main` bounds its height and it scrolls. */
+  .cloud-app-canvas:not([data-layout-full-page]) .layout-content-main > .k2b-scroll-area { scrollbar-gutter: auto; }
   .cloud-app-canvas > .layout-shell-content { gap: 0; }
   .cloud-app-canvas .layout-header {
     border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border);
@@ -316,26 +320,60 @@ solid-island {
 
 }
 
+/* Card: the outermost workspace is the app card, so it gets the card's radius
+   and frame also when it is flat. Its sidebar and content round their corners
+   with that radius and clip what they show. A workspace that is `main`'s own
+   child fills `main` and scrolls inside itself, so `main` neither scrolls nor
+   clips: it keeps no scrollbar gutter beside the card, the card keeps the
+   shell spacing on every side, and its frame shadow shows in that spacing. A
+   workspace nested in other page content leaves `main` the page scroller. For
+   signed-in people, the flush range below removes the frame again; it comes
+   later at equal specificity. */
+@media (min-width: 768px) {
+  .cloud-app-canvas .layout-content-main:has(> .k2b-app-workspace, > :is(solid-island, solid-client) > .k2b-app-workspace) {
+    overflow: visible;
+    scrollbar-gutter: auto;
+  }
+  .cloud-app-canvas .layout-content-main .k2b-app-workspace[data-flat="true"]:not(.k2b-app-workspace *) {
+    --k2b-workspace-radius: var(--k2b-radius-dialog);
+    box-shadow: var(--k2b-shadow-frame);
+  }
+  .dark .cloud-app-canvas .layout-content-main .k2b-app-workspace[data-flat="true"]:not(.k2b-app-workspace *) {
+    border-color: var(--k2b-border);
+  }
+}
+
 /* Flush: the app area is one opaque surface from the rail to the window's
    edges, without padding, radius, shadow, or border. The rail keeps the app
    canvas, so the change of surface alone separates the two; no line does. The
    outermost workspace and the notices above it lose their frame, so nothing
-   draws a box inside the app area. */
+   draws a box inside the app area.
+   The rail and the app area reach the window's edges also where the installed
+   app reports safe areas, such as the status bar and the home indicator. Their
+   own surfaces fill the insets, and their content stays inside them. */
 @media (min-width: 768px) and (max-width: 1535px) {
   .cloud-app-canvas[data-layout-authenticated] {
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+    padding: 0;
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-rail {
-    width: 3rem;
+    width: calc(3rem + env(safe-area-inset-left, 0px));
     margin-inline-start: 0;
-    padding-bottom: var(--ui-space-shell);
+    padding: env(safe-area-inset-top, 0px) 0 calc(var(--ui-space-shell) + env(safe-area-inset-bottom, 0px))
+      env(safe-area-inset-left, 0px);
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content {
     gap: 0;
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
     background: var(--k2b-surface);
   }
+  /* A regular page scrolls `main`, so its end clears the home indicator. A
+     workspace reaches the bottom edge and clears it inside its own surfaces. */
+  .cloud-app-canvas[data-layout-authenticated] .layout-content-main:not(:has(.k2b-app-workspace)) {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
   .cloud-app-canvas[data-layout-authenticated] .layout-content-main .k2b-app-workspace:not(.k2b-app-workspace *) {
     --k2b-workspace-radius: 0px;
+    --k2b-workspace-inset-bottom: env(safe-area-inset-bottom, 0px);
     border: 0;
     box-shadow: none;
   }
@@ -376,4 +414,4 @@ solid-island {
   width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.3;
 }
 .cloud-mobile-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border-top: 1px solid var(--ui-border); padding-top: 1rem; }
-.cloud-mobile-profile :is(a, button) { min-height: 2.75rem; white-space: normal; text-align: start; justify-content: flex-start; }
+.cloud-mobile-profile > :is(a, button) { min-height: 2.75rem; white-space: normal; text-align: start; justify-content: flex-start; }

package/src/styles/input.css

@@ -38,10 +38,6 @@ button[disabled],
     @apply text-white;
   }
 
-  input[type="checkbox"]:hover {
-    transform: var(--ui-check-hover-transform);
-  }
-
   input[type="checkbox"]:focus {
     @apply outline-none;
   }
@@ -53,8 +49,4 @@ button[disabled],
   input[type="checkbox"]:disabled {
     @apply opacity-50 cursor-not-allowed;
   }
-
-  input[type="checkbox"]:disabled:hover {
-    transform: none;
-  }
 }

package/src/styles/tokens.css

@@ -38,7 +38,6 @@
   --ui-check-surface: var(--ui-field);
   --ui-check-border: var(--ui-border-strong);
   --ui-check-shadow: none;
-  --ui-check-hover-transform: none;
   --ui-data-header: var(--ui-surface-subtle);
   --ui-data-divider: var(--ui-border);
   --ui-data-row-divider: color-mix(in srgb, var(--ui-border) 72%, transparent);
@@ -165,7 +164,6 @@
   --ui-check-surface: var(--ui-field);
   --ui-check-border: var(--ui-border-strong);
   --ui-check-shadow: none;
-  --ui-check-hover-transform: none;
   --ui-data-row-hover: rgb(255 255 255 / 0.045);
   --ui-data-column-hover: rgb(255 255 255 / 0.018);
   --ui-dropdown-menu-surface: var(--ui-surface-raised);

package/src/styles/utilities-navigation.css

@@ -932,6 +932,16 @@
   }
 }
 
+/* Reserves the width of the longest appearance label, so cycling never resizes the button. */
+.cloud-theme-cycle__label { display: inline-grid; justify-items: start; }
+.cloud-theme-cycle__label::before { content: attr(data-reserve-a); }
+.cloud-theme-cycle__label::after { content: attr(data-reserve-b); }
+.cloud-theme-cycle__label::before, .cloud-theme-cycle__label::after { height: 0; overflow: hidden; visibility: hidden; }
+
+@media (width < 48rem) {
+  .cloud-theme-cycle__label[data-compact] { display: none; }
+}
+
 /* MinimalLayout stacks the page content and its footer in a column at least
    one viewport tall, so the footer ends a short page and follows a long one.
    Content that should fill the remaining height grows with flex-1. */

package/src/workflows/language/compiler.ts

@@ -292,7 +292,7 @@ const compileSteps = (
     if (hasOwn(step, "switch")) {
       validateExactKeys(step, ["switch", "cases", "default"], stepPath, context);
       if (!Array.isArray(step.cases) || step.cases.length === 0) {
-        addDiagnostic(context, "switch.cases", "switch requires at least one case", [...stepPath, "cases"]);
+        addDiagnostic(context, "switch.cases", "switch cases must be a non-empty list of { when, do } entries", [...stepPath, "cases"]);
         return;
       }
       const cases: Array<{ when: WorkflowJsonValue; steps: WorkflowIrStep[] }> = [];

package/src/ssr/AppWorkspaceController.island.tsx

@@ -1,21 +0,0 @@
-import { installAppWorkspaceController, serializeAppWorkspaceLayoutState } from "@k2b/ui";
-import { onCleanup, onMount } from "solid-js";
-import { appWorkspaceCookieName, readAppWorkspaceLayoutCookie } from "../_internal/app-workspace-state";
-
-const writeLayoutCookie = (appId: string | null | undefined, state: Parameters<typeof serializeAppWorkspaceLayoutState>[0]) => {
-  if (!appId) return;
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${appWorkspaceCookieName(appId)}=${serializeAppWorkspaceLayoutState(state)}; Path=/; Max-Age=31536000; SameSite=Lax${secure}`;
-};
-
-export default function AppWorkspaceController(props: { appId?: string | null }) {
-  let dispose = () => {};
-  onMount(() => {
-    dispose = installAppWorkspaceController({
-      readState: () => readAppWorkspaceLayoutCookie(document.cookie, props.appId),
-      writeState: (state) => writeLayoutCookie(props.appId, state),
-    });
-  });
-  onCleanup(() => dispose());
-  return null;
-}

package/src/ssr/BrowserPushRegistration.island.tsx

@@ -1,12 +0,0 @@
-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/GlobalAnnouncements.island.tsx

@@ -1,117 +0,0 @@
-import { Button, dialogCore, IconButton, MarkdownView, NoticeCard, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
-import { createSignal, For, onMount, Show } from "solid-js";
-import {
-  ANNOUNCEMENTS_COOKIE,
-  ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS,
-  type AnnouncementCookieState,
-  mergeAnnouncementCookieState,
-  serializeAnnouncementCookieState,
-} from "../contracts/announcement-cookie";
-import type { AnnouncementDisplayEntry } from "../contracts/announcements";
-import { platformMessages } from "./platform-messages";
-
-type Props = {
-  banners: AnnouncementDisplayEntry[];
-  announcements: AnnouncementDisplayEntry[];
-  latestAnnouncementVersion: number;
-  cookieState: AnnouncementCookieState;
-};
-
-const writeCookieState = (state: AnnouncementCookieState) => {
-  document.cookie = `${ANNOUNCEMENTS_COOKIE}=${serializeAnnouncementCookieState(state)}; Path=/; Max-Age=${ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS}; SameSite=Lax`;
-};
-
-export default function GlobalAnnouncements(props: Props) {
-  const locale = useLocale();
-  const t = () => platformMessages.resolve([locale()]).t;
-  const [cookieState, setCookieState] = createSignal(props.cookieState);
-  const [banners, setBanners] = createSignal(props.banners);
-
-  const dismissBanner = (version: number) => {
-    const next = mergeAnnouncementCookieState(cookieState(), { dismissedBannerVersions: [version] });
-    setCookieState(next);
-    writeCookieState(next);
-    setBanners((items) => items.filter((item) => item.version !== version));
-  };
-
-  const closeAnnouncements = () => {
-    const next = mergeAnnouncementCookieState(cookieState(), {
-      seenAnnouncementVersion: props.latestAnnouncementVersion,
-    });
-    setCookieState(next);
-    writeCookieState(next);
-  };
-
-  onMount(() => {
-    if (props.announcements.length === 0) return;
-
-    void dialogCore
-      .open<void>(
-        (close) => (
-          <PanelDialog>
-            <PanelDialog.Header
-              title={t().announcements}
-              subtitle={t().latestPlatformUpdates}
-              icon="ti ti-speakerphone text-blue-500"
-              close={() => close()}
-            />
-            <PanelDialog.Body>
-              <For each={props.announcements}>
-                {(entry) => (
-                  <article class="panel-dialog-section rounded-[var(--ui-radius-surface)] p-4">
-                    <div class="mb-3 flex items-start justify-between gap-3">
-                      <div class="min-w-0">
-                        <h2 class="text-base font-semibold text-primary">{entry.title}</h2>
-                        <p class="mt-0.5 text-xs text-dimmed">
-                          {new Date(entry.publishedAt).toLocaleDateString(locale(), {
-                            year: "numeric",
-                            month: "short",
-                            day: "numeric",
-                          })}
-                        </p>
-                      </div>
-                      <span class="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium text-dimmed dark:bg-zinc-800">
-                        v{entry.version}
-                      </span>
-                    </div>
-                    <MarkdownView trustedHtml={entry.bodyHtml} />
-                  </article>
-                )}
-              </For>
-            </PanelDialog.Body>
-            <PanelDialog.Footer>
-              <span />
-              <Button size="sm" onClick={() => close()}>
-                {t().gotIt}
-              </Button>
-            </PanelDialog.Footer>
-          </PanelDialog>
-        ),
-        panelDialogOptions,
-      )
-      .then(closeAnnouncements);
-  });
-
-  return (
-    <Show when={banners().length > 0}>
-      <div class="flex shrink-0 flex-col gap-1">
-        <For each={banners()}>
-          {(banner) => (
-            <div class="cloud-announcement">
-              <NoticeCard tone={banner.tone} title={banner.title}>
-                <MarkdownView
-                  trustedHtml={banner.bodyHtml}
-                  headingScale="compact"
-                  class="-mx-2 max-h-36 overflow-y-auto overscroll-contain pl-2 pr-3 [&_p]:my-0"
-                />
-              </NoticeCard>
-              <IconButton size="sm" label={t().dismissBanner} onClick={() => dismissBanner(banner.version)}>
-                <i class="ti ti-x" aria-hidden="true" />
-              </IconButton>
-            </div>
-          )}
-        </For>
-      </div>
-    </Show>
-  );
-}

package/src/ssr/GlobalSearchHelpDialog.tsx

@@ -1,104 +0,0 @@
-import { prompts, ScrollArea, useLocale } from "@k2b/ui";
-import { createMemo, For, Show } from "solid-js";
-import { platformMessages } from "./platform-messages";
-
-export type GlobalSearchHelpApp = {
-  appId: string;
-  appName: string;
-  appIcon: string;
-  tags: string[];
-  help?: string;
-  tagHelp?: Array<{ tag: string; help: string }>;
-};
-
-type GlobalSearchHelpDialogProps = { apps: GlobalSearchHelpApp[] };
-
-export default function GlobalSearchHelpDialog(props: GlobalSearchHelpDialogProps) {
-  const locale = useLocale();
-  const t = () => platformMessages.resolve([locale()]).t;
-  const apps = createMemo(() =>
-    props.apps
-      .filter((app) => app.tags.length > 0)
-      .map((app) => ({
-        ...app,
-        help: app.help?.trim() || undefined,
-        tags: [...new Set(app.tags.map((tag) => tag.toLowerCase()))].sort(),
-        tagHelp: [...new Map((app.tagHelp ?? []).map((entry) => [entry.tag.trim().toLowerCase(), entry.help.trim()])).entries()]
-          .filter(([tag, help]) => tag.length > 0 && help.length > 0)
-          .map(([tag, help]) => ({ tag, help })),
-      }))
-      .sort((a, b) => a.appName.localeCompare(b.appName)),
-  );
-
-  return (
-    <div class="flex max-h-[min(42rem,var(--ui-dialog-available-height))] min-h-0 flex-col gap-4 text-zinc-900 dark:text-zinc-100">
-      <div class="flex items-start justify-between gap-3">
-        <div>
-          <p class="text-sm text-dimmed">{t().searchTagsDescription({ tag: "#tag" })}</p>
-        </div>
-      </div>
-
-      <ScrollArea class="min-h-0 flex-1 pr-1">
-        <div class="flex flex-col gap-2">
-          <For each={apps()}>
-            {(app) => (
-              <section class="rounded-lg ring-1 ring-inset ring-zinc-200 dark:ring-zinc-800 p-3 bg-zinc-50/50 dark:bg-zinc-900/35">
-                <header class="flex items-center gap-2 text-sm">
-                  <i class={app.appIcon} />
-                  <span>{app.appName}</span>
-                </header>
-                <Show when={app.help}>
-                  <p class="mt-1 text-xs text-dimmed">{app.help}</p>
-                </Show>
-                <Show
-                  when={(app.tagHelp?.length ?? 0) > 0}
-                  fallback={
-                    <p class="mt-1 text-xs text-dimmed">
-                      {t().tags}:{" "}
-                      <For each={app.tags}>
-                        {(tag, index) => (
-                          <>
-                            <code>#{tag}</code>
-                            <Show when={index() < app.tags.length - 1}>, </Show>
-                          </>
-                        )}
-                      </For>
-                    </p>
-                  }
-                >
-                  <div class="mt-2 space-y-1 text-xs">
-                    <For each={app.tagHelp}>
-                      {(entry) => (
-                        <div class="grid grid-cols-[6rem_minmax(0,1fr)] gap-2">
-                          <code>#{entry.tag}</code>
-                          <span class="text-dimmed">{entry.help}</span>
-                        </div>
-                      )}
-                    </For>
-                  </div>
-                </Show>
-              </section>
-            )}
-          </For>
-          <Show when={apps().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">
-              {t().noAppSearchTags}
-            </div>
-          </Show>
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}
-
-export const openGlobalSearchHelpDialog = (
-  apps: GlobalSearchHelpApp[],
-  locale = typeof document === "undefined" ? "en" : document.documentElement.lang || "en",
-) => {
-  const t = platformMessages.resolve([locale]).t;
-  void prompts.dialog<void>(() => <GlobalSearchHelpDialog apps={apps} />, {
-    title: t.searchTags,
-    icon: "ti ti-help-circle",
-    size: "large",
-  });
-};