@k2b/cloud 0.28.0 → 0.29.0

package/src/ssr/AppLaunchpadPanel.tsx

@@ -3,6 +3,7 @@ import { IconButton, ScrollArea, TextInput, useLocale } from "@k2b/ui";
 import { createSignal, For, type JSX, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import type { CloudTheme } from "../shared/theme";
+import { AppBadge, useAppBadgeDescription } from "./AppBadge";
 import { MobileProfileActions } from "./MobileProfileActions";
 import { platformMessages } from "./platform-messages";
 import { openRailEditor } from "./RailEditor";
@@ -17,6 +18,8 @@ export type AppLaunchpadApp = {
   href: string;
   description?: string;
   accent?: string;
+  /** The app's `nav.badge` endpoint. */
+  badge?: string;
 };
 
 export type AppLaunchpadLegalLink = {
@@ -119,39 +122,57 @@ export const AppLaunchpadPanel = (
         <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>
-              )}
+              {(shortcut) => {
+                const badge = useAppBadgeDescription(() => shortcut.badge);
+                return (
+                  <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="relative 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" />
+                      <AppBadge endpoint={shortcut.badge} />
+                    </span>
+                    <span class="max-w-full truncate text-[11px] font-medium text-primary dark:text-white">
+                      {shortcut.label}
+                      <Show when={badge()}>
+                        <span class="sr-only">, {badge()}</span>
+                      </Show>
+                    </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)}
+          {(app) => {
+            const badge = useAppBadgeDescription(() => app.badge);
+            return (
+              <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"
               >
-                <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>
-          )}
+                <span
+                  class="app-icon relative 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} />
+                  <AppBadge endpoint={app.badge} />
+                </span>
+                <span class="max-w-full truncate text-[11px] font-medium text-primary sm:text-xs dark:text-white">
+                  {app.label}
+                  <Show when={badge()}>
+                    <span class="sr-only">, {badge()}</span>
+                  </Show>
+                </span>
+              </a>
+            );
+          }}
         </For>
       </div>
       <Show when={!apps().length && !shortcuts().length}>

package/src/ssr/IslandError.tsx

@@ -0,0 +1,33 @@
+import type { IslandErrorProps } from "@k2b/ssr";
+import { i18n } from "@k2b/stdlib";
+import { Button, Placeholder, useLocale } from "@k2b/ui";
+
+const messages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: { title: "This section could not be displayed.", retry: "Try again" },
+    de: { title: "Dieser Bereich konnte nicht angezeigt werden.", retry: "Erneut versuchen" },
+  },
+});
+
+/**
+ * Takes the place of an island or client component whose rendering failed.
+ * `defineApp` hands it to @k2b/ssr as `errorFallback`, so every island of every
+ * app gets it; the locale comes from `<html lang>`. "Try again" remounts the
+ * island with its original props.
+ */
+export default function IslandError(props: IslandErrorProps) {
+  const locale = useLocale();
+  const t = () => messages.resolve([locale()]).t;
+  return (
+    <Placeholder
+      state="error"
+      title={t().title}
+      action={
+        <Button variant="secondary" onClick={() => props.reset()}>
+          {t().retry}
+        </Button>
+      }
+    />
+  );
+}

package/src/ssr/Layout.tsx

@@ -61,6 +61,7 @@ function buildNavLinks(
       match: resolveNavMatch(app) ?? app.nav.href.split("?")[0] ?? app.nav.href,
       description: app.description,
       accent: app.appearance?.accent,
+      badge: app.nav.badge,
     } satisfies LayoutAppLink,
   }));
   const primary = links.filter((entry) => entry.section === "primary").map((entry) => entry.link);
@@ -75,6 +76,7 @@ function buildNavLinks(
       match: "/admin",
       description: t.platformAdministration,
       accent: undefined,
+      badge: undefined,
     });
   }
   return { primary, more };
@@ -166,6 +168,7 @@ export default function Layout(props: LayoutProps) {
     href: app.href,
     description: app.description,
     accent: app.accent,
+    badge: app.badge,
   }));
   const searchLinks = navigationSearchItems(
     runtime.apps,

package/src/ssr/LayoutHelp.tsx

@@ -95,11 +95,13 @@ const registerTopic = (topic: HelpTopic) => {
 /** Register an app's server-prepared Markdown manifest with the shared help UI. */
 export function LayoutHelpDocuments(props: LayoutHelpDocumentsProps) {
   onMount(() => {
-    window.__cloudLayoutHelpPageBase = props.pageBase;
+    // Cleanup runs while this unmounts, when a parent `<Show>` may already have dropped the props' source.
+    const pageBase = props.pageBase;
+    window.__cloudLayoutHelpPageBase = pageBase;
     const disposers = props.documents.map((document) => registerTopic({ ...document, kind: "document" }));
     onCleanup(() => {
       disposers.forEach((dispose) => dispose());
-      if (window.__cloudLayoutHelpPageBase === props.pageBase) delete window.__cloudLayoutHelpPageBase;
+      if (window.__cloudLayoutHelpPageBase === pageBase) delete window.__cloudLayoutHelpPageBase;
     });
   });
   return null;

package/src/ssr/RailApps.island.tsx

@@ -1,25 +1,29 @@
 import { ScrollArea, Tooltip, useLocale } from "@k2b/ui";
 import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import type { RailSnapshot } from "../contracts/rail-preferences";
+import { AppBadge, useAppBadgeDescription } from "./AppBadge";
 import { appAccentStyle } from "./app-appearance";
+import { watchAppBadges } from "./app-badges";
 import { RAIL_PREFERENCES_EVENT, readRailContext } from "./rail-context";
 import { projectRailNavigation, type RailApp, type RailLink, railLinkActive } from "./rail-navigation";
 
 function RailIcon(props: { link: RailLink; currentPath: string }) {
   let target: HTMLAnchorElement | undefined;
   const active = () => railLinkActive(props.link, props.currentPath);
+  const badge = useAppBadgeDescription(() => props.link.badge);
   return (
     <>
       <a
         ref={target}
         href={props.link.href}
-        class={`rail-item shrink-0 ${active() ? "rail-item-active" : ""}`}
-        aria-label={props.link.label}
+        class={`rail-item relative shrink-0 ${active() ? "rail-item-active" : ""}`}
+        aria-label={badge() ? `${props.link.label}, ${badge()}` : props.link.label}
         aria-current={active() ? "page" : undefined}
         style={appAccentStyle(props.link.accent)}
       >
         <i class={`${props.link.iconClass} text-base`} aria-hidden="true" />
         <span class="sr-only">{props.link.label}</span>
+        <AppBadge endpoint={props.link.badge} />
       </a>
       <Tooltip target={() => target} content={props.link.label} placement="right" delay={0} />
     </>
@@ -36,10 +40,13 @@ export default function RailApps(props: { apps: RailApp[]; settings: RailSnapsho
     const syncLocation = () => setCurrentPath(`${window.location.pathname}${window.location.search}${window.location.hash}`);
     sync();
     syncLocation();
+    // Every visible app, not only the rail's: the app grid shows the same counts.
+    const stopBadges = watchAppBadges(props.apps.flatMap((app) => (app.badge ? [app.badge] : [])));
     window.addEventListener(RAIL_PREFERENCES_EVENT, sync);
     window.addEventListener("popstate", syncLocation);
     window.addEventListener("hashchange", syncLocation);
     onCleanup(() => {
+      stopBadges();
       window.removeEventListener(RAIL_PREFERENCES_EVENT, sync);
       window.removeEventListener("popstate", syncLocation);
       window.removeEventListener("hashchange", syncLocation);

package/src/ssr/app-badges.ts

@@ -0,0 +1,93 @@
+import { createSignal } from "solid-js";
+import { APP_BADGES_REFRESH_EVENT } from "../browser/app-badges";
+
+/**
+ * Shortest time between two scheduled reads in one tab, and the longest one
+ * read may take. Badges are a hint to open an app, not a live view, so one
+ * read per minute keeps them current while someone works elsewhere without a
+ * steady stream of requests per tab.
+ */
+export const APP_BADGE_INTERVAL_MS = 60_000;
+
+// Keyed by endpoint, so a pinned app shortcut and the app's own entry share one
+// count. Only the browser ever writes it; server renders always see no badge.
+const [counts, setCounts] = createSignal<ReadonlyMap<string, number>>(new Map());
+
+/** The count for a declared `nav.badge` endpoint; 0 until the browser has read it. */
+export const appBadgeCount = (endpoint: string | undefined): number => (endpoint ? (counts().get(endpoint) ?? 0) : 0);
+
+/** A positive safe integer from an `AppNavBadge` body, else 0. */
+export const parseAppBadge = (body: unknown): number => {
+  if (typeof body !== "object" || body === null || !("count" in body)) return 0;
+  const count = body.count;
+  return typeof count === "number" && Number.isSafeInteger(count) && count > 0 ? count : 0;
+};
+
+const readBadge = async (endpoint: string, signal: AbortSignal): Promise<number> => {
+  try {
+    const response = await fetch(endpoint, { credentials: "same-origin", headers: { accept: "application/json" }, signal });
+    return response.status === 200 ? parseAppBadge(await response.json()) : 0;
+  } catch {
+    // An unreachable or failing app shows no badge rather than a stale one.
+    return 0;
+  }
+};
+
+let watching = false;
+
+/**
+ * Reads the badge endpoints after hydration, every interval while the tab is
+ * visible, when a hidden tab becomes visible again after the interval, and on
+ * `refreshAppBadges()`. A hidden tab sends nothing and keeps its schedule.
+ * Each endpoint has at most one read in flight, and its count shows as soon as
+ * that read settles, so a slow app delays only its own badge. A refresh while
+ * a read runs queues one more read after it instead of another request, and a
+ * read still running after the interval gives up. Returns a disposer.
+ */
+export const watchAppBadges = (endpoints: readonly string[]): (() => void) => {
+  const unique = [...new Set(endpoints)];
+  if (typeof window === "undefined" || unique.length === 0 || watching) return () => {};
+  watching = true;
+  const stopped = new AbortController();
+  // Endpoints with a read in flight, mapped to whether one more read waits for it.
+  const running = new Map<string, boolean>();
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let last = Number.NEGATIVE_INFINITY;
+
+  const read = (endpoint: string) => {
+    if (running.has(endpoint)) {
+      running.set(endpoint, true);
+      return;
+    }
+    running.set(endpoint, false);
+    void readBadge(endpoint, AbortSignal.any([stopped.signal, AbortSignal.timeout(APP_BADGE_INTERVAL_MS)])).then((count) => {
+      if (stopped.signal.aborted) return;
+      setCounts((previous) => new Map(previous).set(endpoint, count));
+      const queued = running.get(endpoint);
+      running.delete(endpoint);
+      if (queued && document.visibilityState !== "hidden") read(endpoint);
+    });
+  };
+  const refresh = () => {
+    // Leave the pending read in place, so the tab still reads on time once it is visible again.
+    if (document.visibilityState === "hidden") return;
+    clearTimeout(timer);
+    last = Date.now();
+    timer = setTimeout(refresh, APP_BADGE_INTERVAL_MS);
+    for (const endpoint of unique) read(endpoint);
+  };
+  const resume = () => {
+    if (document.visibilityState !== "hidden" && Date.now() - last >= APP_BADGE_INTERVAL_MS) refresh();
+  };
+
+  document.addEventListener("visibilitychange", resume);
+  window.addEventListener(APP_BADGES_REFRESH_EVENT, refresh);
+  refresh();
+  return () => {
+    watching = false;
+    clearTimeout(timer);
+    stopped.abort();
+    document.removeEventListener("visibilitychange", resume);
+    window.removeEventListener(APP_BADGES_REFRESH_EVENT, refresh);
+  };
+};

package/src/ssr/rail-messages.ts

@@ -32,6 +32,8 @@ export const railMessages = i18n.define({
       saveFailed: "Could not save app bar settings. Your edits are still here.",
       conflict: "The app bar changed in another editor. Cancel and reopen this editor to load the latest settings.",
       invalid: "Check shortcut titles, links and icons. Each app can be pinned once; settings must fit within 16 KiB.",
+      badge: ({ count }: { count: number }) => `${count} new`,
+      badgeMany: "more than 99 new",
     },
     de: {
       managed: "Von der Administration bereitgestellt",
@@ -63,6 +65,8 @@ export const railMessages = i18n.define({
       conflict:
         "Die App-Leiste wurde in einem anderen Editor geändert. Brich ab und öffne den Editor erneut, um den aktuellen Stand zu laden.",
       invalid: "Prüfe Titel, Links und Icons. Jede App kann einmal angeheftet werden; die Einstellungen dürfen höchstens 16 KiB belegen.",
+      badge: ({ count }) => `${count} neu`,
+      badgeMany: "mehr als 99 neu",
     },
   },
 });

package/src/ssr/rail-navigation.ts

@@ -9,6 +9,8 @@ export type RailApp = {
   defaultVisible: boolean;
   description?: string;
   accent?: string;
+  /** The app's `nav.badge` endpoint. */
+  badge?: string;
 };
 export type RailLink = Omit<RailApp, "defaultVisible"> & { exact?: boolean };
 

package/src/styles/effects.css

@@ -892,3 +892,26 @@ dialog:has(.launchpad-panel)::backdrop {
 .k2b-ui .ai-response-info__rows dd { min-width: 0; margin: 0; overflow: hidden; color: var(--k2b-text); text-align: end; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .k2b-ui .ai-response-info__tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--k2b-text-secondary); }
 .k2b-ui .ai-response-info__tools > li { display: inline-flex; align-items: center; gap: 0.375rem; }
+
+/* The image a step looked at: a small inset thumbnail whose box is fixed before the image loads, so nothing moves. */
+.k2b-ui .k2b-chat-activity .ai-step-image {
+  display: flex;
+  width: 12rem;
+  max-width: 100%;
+  height: 8rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  border-radius: var(--k2b-radius-control);
+  background: var(--ui-surface-muted);
+  box-shadow: var(--ui-control-recess);
+}
+
+.k2b-ui .k2b-chat-activity .ai-step-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}

package/src/styles/file-chooser.css

@@ -167,3 +167,28 @@
   gap: 0.5rem;
   margin-left: auto;
 }
+
+/* A saved file's progress, or the field for another name when its name is taken. Every row keeps the field's
+   height, so a conflict never moves the rows below. */
+.cloud-file-saver__slot {
+  display: flex;
+  align-items: center;
+  min-height: 2.25rem;
+}
+
+.cloud-file-saver__slot > .k2b-progress {
+  flex: 1 1 auto;
+}
+
+.cloud-file-saver__rename {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.cloud-file-saver__rename > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/src/styles/utilities-navigation.css

@@ -771,6 +771,47 @@
   box-shadow: none;
 }
 
+/* An app's count on its icon in the rail and the app grid. It is laid over the
+   icon's corner and never takes layout space, so a count appearing, growing to
+   "99+", or clearing moves nothing. The fill is the solid action colour, the
+   same as the sidebar's mention count. */
+.cloud-app-badge {
+  position: absolute;
+  top: 0;
+  right: -0.25rem;
+  box-sizing: border-box;
+  min-width: 0.875rem;
+  height: 0.875rem;
+  padding-inline: 0.1875rem;
+  border-radius: 999px;
+  color: #ffffff;
+  background: var(--k2b-action-solid);
+  font-size: 0.625rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 0.875rem;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.app-icon > .cloud-app-badge {
+  top: -0.375rem;
+  right: -0.375rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding-inline: 0.3125rem;
+  font-size: 0.6875rem;
+  line-height: 1.25rem;
+}
+
+@media (forced-colors: active) {
+  .cloud-app-badge {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
 .rail-item-active:hover {
   color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
   background: transparent;