@k2b/cloud 0.43.0 → 0.44.0

package/src/ssr/AppBadge.tsx

@@ -18,6 +18,20 @@ export const useAppBadgeDescription = (input: () => { endpoint?: string; appId?:
  * takes layout space, so appearing, growing to "99+", or clearing moves
  * nothing. Decorative: the link carries the description.
  */
+/**
+ * The count on a phone bar item: the rail's count, laid over the tab icon's corner, and its description for screen
+ * readers after the item's label.
+ */
+export function TabBarAppBadge(props: { endpoint?: string; appId?: string }) {
+  const description = useAppBadgeDescription(() => props);
+  return (
+    <Show when={description()}>
+      <AppBadge endpoint={props.endpoint} appId={props.appId} />
+      <span class="sr-only">, {description()}</span>
+    </Show>
+  );
+}
+
 export function AppBadge(props: { endpoint?: string; appId?: string }) {
   const count = () => appBadgeCount(props);
   return (

package/src/ssr/AppLaunchpadPanel.tsx

@@ -42,7 +42,7 @@ const appIconPalette: readonly [AppIconPaletteEntry, ...AppIconPaletteEntry[]] =
   { from: "#7c3aed" },
   { from: "#d97706" },
   { from: "#e11d48" },
-  { from: "#0891b2" },
+  { from: "#c026d3" },
   { from: "#52525b" },
 ];
 

package/src/ssr/CloudShell.island.tsx

@@ -1,6 +1,8 @@
 import { TabBar, useLocale } from "@k2b/ui";
 import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
 import { isServer, Portal } from "solid-js/web";
+import { TabBarAppBadge } from "./AppBadge";
+import { appBadgeCount } from "./app-badges";
 import { AppLaunchpadButton, setAppLaunchpadContext } from "./app-launchpad";
 import GlobalSearchTrigger from "./GlobalSearchTrigger";
 import LayoutBreadcrumbs from "./LayoutBreadcrumbs";
@@ -35,8 +37,9 @@ export default function CloudShell(props: CloudShellProps) {
 /**
  * The phone bar's live copy, mounted with the rail's island so the shell adds no island instance. It renders nothing
  * while the server's bar is current, so mounting moves and refocuses nothing. When the saved rail preferences or the
- * URL (a fragment, Back and Forward, an in-page navigation) change what the bar shows, it renders the new bar into the
- * bar's row, and CSS hides the server's.
+ * URL (a fragment, Back and Forward, an in-page navigation) change what the bar shows, or an app in it has a count,
+ * it renders the new bar into the bar's row, and CSS hides the server's. Counts, like the rail's, exist only in the
+ * browser.
  */
 function BarNavigation(props: { currentPath: string }) {
   if (isServer) return null;
@@ -51,6 +54,12 @@ function BarNavigation(props: { currentPath: string }) {
     phoneBarItems(projectRailNavigation(data.apps, rail, locale()), path, { label: t().home, path: data.home ?? "/" });
   const served = JSON.stringify(itemsFor(initial, props.currentPath));
   const items = createMemo(() => itemsFor(settings(), currentPath()));
+  const counted = () => items().some((item) => item.counted && appBadgeCount(item.counted) > 0);
+  const live = createMemo(() =>
+    items().map((item) =>
+      item.counted ? { ...item, badge: <TabBarAppBadge endpoint={item.counted.endpoint} appId={item.counted.appId} /> } : item,
+    ),
+  );
   onMount(() => {
     const sync = () => setSettings(readRailContext()?.settings ?? initial);
     const syncLocation = () => setCurrentPath(`${window.location.pathname}${window.location.search}${window.location.hash}`);
@@ -76,10 +85,22 @@ function BarNavigation(props: { currentPath: string }) {
   });
   const row = document.querySelector<HTMLElement>(".cloud-tab-bar__row");
   if (!row) return null;
+  // Swapping bars keeps a focused link: the bar that takes over focuses the same destination, once CSS shows it.
+  const [shown, setShown] = createSignal(false);
+  const focusIn = (selector: string, tab: string) =>
+    [...row.querySelectorAll<HTMLElement>(`${selector} a[data-tab]`)].find((link) => link.dataset.tab === tab)?.focus();
+  createEffect(() => {
+    const next = counted() || JSON.stringify(items()) !== served;
+    if (next === shown()) return;
+    const focused = document.activeElement;
+    const tab = focused instanceof HTMLElement && row.contains(focused) ? focused.dataset.tab : undefined;
+    setShown(next);
+    if (tab) queueMicrotask(() => focusIn(next ? ".cloud-tab-bar__live" : ".k2b-tab-bar:not(.cloud-tab-bar__live)", tab));
+  });
   return (
-    <Show when={JSON.stringify(items()) !== served}>
+    <Show when={shown()}>
       <Portal mount={row}>
-        <TabBar variant="floating" class="cloud-tab-bar__live" label={t().apps} items={items()} />
+        <TabBar variant="floating" class="cloud-tab-bar__live" label={t().apps} items={live()} />
       </Portal>
     </Show>
   );

package/src/ssr/Layout.tsx

@@ -14,6 +14,7 @@ import { isAppSessionActor } from "../server/actor";
 import { getLocale } from "../server/locale";
 import { getDateConfig } from "../server/time";
 import { dates, resolveHomePath } from "../shared";
+import { publicCloudOrigin } from "../shared/app-url";
 import { readThemePreferenceFromCookieHeader } from "../shared/theme";
 import AnnouncementBanners from "./AnnouncementBanners";
 import { appAppearanceStyle, resolveCurrentApp } from "./app-appearance";
@@ -258,7 +259,9 @@ export default function Layout(props: LayoutProps) {
   const panel: ShellData["panel"] = providers.length
     ? { providers, provider: panelState.provider ?? providers[0]?.id, context: pageContext, consent: c.get("panelConsent") }
     : undefined;
+  const cloudOrigin = settings?.app?.url ? publicCloudOrigin(settings.app.url) : undefined;
   const shellData: ShellData = {
+    ...(cloudOrigin ? { cloudOrigin } : {}),
     ...(panel ? { panel } : {}),
     platform: keyboardPlatform(c.req.raw.headers.get("User-Agent") ?? ""),
     ...(viewHelp.length ? { help: viewHelp } : {}),
@@ -294,6 +297,7 @@ export default function Layout(props: LayoutProps) {
           apps: allApps,
           legalLinks,
           searchLinks,
+          cloudOrigin: shellData.cloudOrigin,
           home: shellData.home,
           profile: shellData.profile,
           announcements: user ? (announcements?.latestAnnouncementVersion ?? null) : null,
@@ -325,12 +329,10 @@ export default function Layout(props: LayoutProps) {
               <AppWorkspace.LayoutStateProvider state={workspaceLayout}>{props.children}</AppWorkspace.LayoutStateProvider>
             </main>
           </PageTrailProvider>
-          {/* Focus pages carry shell data only for their panel providers. */}
-          {panel && (
-            <ShellDataProvider data={{ panel, platform: shellData.platform, theme, apps: [], legalLinks: [], searchLinks: {} }}>
-              <PanelSlot panel={panel} state={{ ...panelState, open: false }} platform={shellData.platform} />
-            </ShellDataProvider>
-          )}
+          {/* Focus pages also expose the canonical origin to their islands. */}
+          <ShellDataProvider data={{ cloudOrigin, panel, platform: shellData.platform, theme, apps: [], legalLinks: [], searchLinks: {} }}>
+            {panel && <PanelSlot panel={panel} state={{ ...panelState, open: false }} platform={shellData.platform} />}
+          </ShellDataProvider>
           <div data-print-fallback="">
             <p>{t.printFallbackTitle}</p>
             <p>{props.printHint ?? t.printFallbackHint}</p>

package/src/ssr/PwaLayout.tsx

@@ -7,6 +7,7 @@ import { pwaBuild } from "../contracts/pwa-builds";
 import { getLocale } from "../server/locale";
 import { visiblePwaParts } from "./app-navigation";
 import type { LayoutContext } from "./layout-context";
+import PwaPartCount from "./PwaPartCount.island";
 import PwaRuntime from "./PwaRuntime.island";
 import { pwaMessages } from "./pwa-messages";
 import { getDisplayRuntimeContext } from "./runtime";
@@ -62,12 +63,24 @@ export default function PwaLayout(props: PwaLayoutProps) {
   const ownBuild = pwaBuild(buildMetadata);
   const coreBuild = registeredPwaBuilds().core;
   const builds = { ...(owner && ownBuild ? { [owner]: ownBuild } : {}), ...(coreBuild ? { core: coreBuild } : {}) };
+  // A part's badge calls for attention in the sidebar and on its tab; without one, its summary's count stays quiet in
+  // the sidebar. One watcher reads every route of the page.
+  const countRoutes = [...new Set(parts.flatMap((part) => [part.pwa.badge, part.pwa.summary].filter((path) => path !== undefined)))];
+  const badge = (part: (typeof parts)[number]) =>
+    part.pwa.badge ? <PwaPartCount endpoint={part.pwa.badge} endpoints={countRoutes} attention /> : undefined;
   const tabs = parts.slice(0, TAB_PARTS);
   const currentTab = tabs.find((part) => path === part.pwa.href || path.startsWith(`${part.pwa.href}/`));
   // Start is titled with the installation's name; a part's first page carries the part's name.
   const items: TabBarItem[] = [
     { id: "start", label: t.start, title: cloud, icon: "ti ti-home", href: PWA_SCOPE, current: !currentTab },
-    ...tabs.map((part) => ({ id: part.id, label: part.name, icon: part.icon, href: part.pwa.href, current: part === currentTab })),
+    ...tabs.map((part) => ({
+      id: part.id,
+      label: part.name,
+      icon: part.icon,
+      href: part.pwa.href,
+      current: part === currentTab,
+      badge: badge(part),
+    })),
   ];
   // The sidebar names the installation itself, so Start is titled Start there; Settings is a destination of its own.
   const settingsHref = `${PWA_SCOPE}settings`;
@@ -87,6 +100,8 @@ export default function PwaLayout(props: PwaLayoutProps) {
             icon: part.icon,
             href: part.pwa.href,
             current: part === currentPart,
+            badge: badge(part),
+            count: part.pwa.summary ? <PwaPartCount endpoint={part.pwa.summary} endpoints={countRoutes} /> : undefined,
           })),
         },
       ]}

package/src/ssr/PwaPartCount.island.tsx

@@ -0,0 +1,23 @@
+import { AppWorkspace } from "@k2b/ui";
+import { onCleanup, onMount, Show } from "solid-js";
+import { appBadgeCount, watchAppBadges } from "./app-badges";
+
+export type PwaPartCountProps = {
+  /** This part's `pwa.badge` or, without one, its `pwa.summary` route. */
+  endpoint: string;
+  /** Every count route of the page; the first count on a page reads them all, once a minute like the web's. */
+  endpoints: string[];
+  /** A badge calls for attention, such as unread messages; a summary's count stays quiet beside the label. */
+  attention?: boolean;
+};
+
+/** The count of a part in the Cloud app's sidebar and tab bar; nothing at zero. */
+export default function PwaPartCount(props: PwaPartCountProps) {
+  onMount(() => onCleanup(watchAppBadges(props.endpoints)));
+  const count = () => appBadgeCount({ endpoint: props.endpoint });
+  return (
+    <Show when={props.attention} fallback={<Show when={count() > 0}>{count() > 99 ? "99+" : count()}</Show>}>
+      <AppWorkspace.SidebarItemStatus unread={count()} />
+    </Show>
+  );
+}

package/src/ssr/SettingsSaveOutcome.tsx

@@ -0,0 +1,58 @@
+import { i18n } from "@k2b/stdlib";
+import { Button, InlineGuidance, useLocale } from "@k2b/ui";
+import { Show } from "solid-js";
+import type { SettingsDraftOutcome } from "./settings-draft";
+
+const messages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      notSaved: "Not saved.",
+      notSavedKeep: "The previous values still apply. Your changes stay here.",
+      unknownOutcome: "The connection broke while saving.",
+      unknownOutcomeKeep: "Whether the new values apply is open. Cloud does not save again on its own.",
+      checkNow: "Check current state",
+      retry: "Try again",
+    },
+    de: {
+      notSaved: "Nicht gespeichert.",
+      notSavedKeep: "Es gelten weiter die alten Werte. Deine Änderungen bleiben hier stehen.",
+      unknownOutcome: "Die Verbindung brach beim Speichern ab.",
+      unknownOutcomeKeep: "Ob die neuen Werte gelten, ist offen. Cloud speichert nicht von selbst noch einmal.",
+      checkNow: "Stand jetzt prüfen",
+      retry: "Erneut versuchen",
+    },
+  },
+});
+
+export const checkSettingsSaveOutcomeMessages = () => messages.check();
+
+/**
+ * What became of the last save when it did not succeed, above the form: not saved with the reason and a retry, or an
+ * unclear outcome with a way to check the current state instead of saving twice.
+ */
+export default function SettingsSaveOutcome(props: { outcome: SettingsDraftOutcome | null; onRetry: () => void }) {
+  const locale = useLocale();
+  const t = () => messages.resolve([locale()]).t;
+  return (
+    <Show when={props.outcome}>
+      {(outcome) =>
+        outcome().kind === "failed" ? (
+          <InlineGuidance tone="danger" icon="ti ti-alert-triangle">
+            <b>{t().notSaved}</b> {outcome().message} {t().notSavedKeep}{" "}
+            <Button type="button" variant="ghost" size="xs" onClick={props.onRetry}>
+              {t().retry}
+            </Button>
+          </InlineGuidance>
+        ) : (
+          <InlineGuidance tone="warning" icon="ti ti-help-circle">
+            <b>{t().unknownOutcome}</b> {t().unknownOutcomeKeep}{" "}
+            <Button type="button" variant="ghost" size="xs" onClick={() => window.location.reload()}>
+              {t().checkNow}
+            </Button>
+          </InlineGuidance>
+        )
+      }
+    </Show>
+  );
+}

package/src/ssr/SettingsSaveStatus.island.tsx

@@ -0,0 +1,16 @@
+import { SaveStatus } from "@k2b/ui";
+import { settingsSaveControls } from "./settings-draft";
+
+/** Status, Discard and Save in the head of a form level. Until the form registers, it shows "Saved" with both buttons disabled. */
+export default function SettingsSaveStatus() {
+  const controls = settingsSaveControls;
+  return (
+    <SaveStatus
+      state={() => controls()?.state ?? "saved"}
+      savedAt={() => controls()?.savedAt}
+      invalidCount={() => controls()?.invalidCount ?? 1}
+      onSave={() => controls()?.save()}
+      onDiscard={() => controls()?.discard()}
+    />
+  );
+}