@valentinkolb/cloud 0.3.1 → 0.5.0

package/src/ssr/AdminSidebar.tsx

@@ -1,34 +1,113 @@
 import type { RuntimeContext } from "./runtime";
 
 type AdminLink = { href: string; icon: string; label: string };
+type AdminGroup = { label: string; links: AdminLink[] };
 
-const buildAdminLinks = (
-  apps: readonly RuntimeContext["apps"][number][]
-): AdminLink[] => [
-  { href: "/admin", icon: "ti-dashboard", label: "Overview" },
-  { href: "/admin/gateway", icon: "ti-route-scan", label: "Apps & Gateway" },
-  ...apps
-    .filter((app) => !!app.adminHref && app.adminHref !== "/admin/gateway")
+const settingsLinks: AdminLink[] = [
+  { href: "/admin/settings?tab=general", icon: "ti-app-window", label: "General" },
+  { href: "/admin/settings?tab=user", icon: "ti-users", label: "User Management" },
+  { href: "/admin/settings?tab=freeipa", icon: "ti-building-fortress", label: "FreeIPA" },
+  { href: "/admin/settings?tab=mail", icon: "ti-mail", label: "Mail" },
+  { href: "/admin/settings?tab=email-templates", icon: "ti-template", label: "Email Templates" },
+  { href: "/admin/settings?tab=security", icon: "ti-shield-lock", label: "Security" },
+  { href: "/admin/settings?tab=legal", icon: "ti-file-text", label: "Legal" },
+];
+
+const staticGroups: AdminGroup[] = [
+  {
+    label: "Gateway",
+    links: [
+      { href: "/admin/gateway/apps", icon: "ti-apps", label: "Apps" },
+      { href: "/admin/gateway/routes", icon: "ti-route", label: "Routes" },
+    ],
+  },
+  {
+    label: "Observability",
+    links: [
+      { href: "/admin/observability/logs", icon: "ti-list-details", label: "Logs" },
+      { href: "/admin/observability/telemetry", icon: "ti-chart-line", label: "Telemetry" },
+      { href: "/admin/observability/metrics", icon: "ti-plug", label: "Metrics" },
+      { href: "/admin/observability/postgres", icon: "ti-database", label: "Postgres" },
+      { href: "/admin/observability/redis", icon: "ti-database", label: "Redis" },
+      { href: "/admin/observability/alerts", icon: "ti-webhook", label: "Webhooks" },
+      { href: "/admin/observability/notifications", icon: "ti-bell", label: "Notifications" },
+    ],
+  },
+  { label: "Settings", links: settingsLinks },
+];
+
+const consoleAdminHrefs = new Set([
+  "/admin/gateway",
+  "/admin/gateway/apps",
+  "/admin/gateway/routes",
+  "/admin/observability/logs",
+  "/admin/observability/telemetry",
+  "/admin/observability/metrics",
+  "/admin/observability/data",
+  "/admin/observability/postgres",
+  "/admin/observability/redis",
+  "/admin/observability/alerts",
+  "/admin/observability/notifications",
+  "/admin/settings",
+]);
+
+const buildAdminGroups = (apps: readonly RuntimeContext["apps"][number][]): AdminGroup[] => {
+  const appLinks = apps
+    .filter((app) => !!app.adminHref && !consoleAdminHrefs.has(app.adminHref))
     .map((app) => ({
       href: app.adminHref!,
       icon: app.icon.replace(/^ti\s+/, ""),
       label: app.name,
-    })),
-];
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label));
+
+  return [
+    {
+      label: "General",
+      links: [
+        { href: "/admin", icon: "ti-dashboard", label: "Overview" },
+        { href: "/admin/announcements", icon: "ti-speakerphone", label: "Announcements" },
+      ],
+    },
+    ...staticGroups,
+    ...(appLinks.length > 0 ? [{ label: "App Admin", links: appLinks }] : []),
+  ];
+};
 
-function isActive(pathname: string, href: string): boolean {
-  if (href === "/admin") return pathname === "/admin";
-  return pathname.startsWith(href);
+function isActive(currentPath: string, href: string): boolean {
+  const current = new URL(`http://admin.local${currentPath}`);
+  const target = new URL(`http://admin.local${href}`);
+  if (target.pathname === "/admin") return current.pathname === "/admin";
+  if (target.pathname === "/admin/settings") {
+    return current.pathname === "/admin/settings" && current.searchParams.get("tab") === target.searchParams.get("tab");
+  }
+  return current.pathname === target.pathname || current.pathname.startsWith(`${target.pathname}/`);
 }
 
-export default function AdminSidebar({
-  pathname,
-  apps,
-}: {
-  pathname: string;
-  apps: readonly RuntimeContext["apps"][number][];
-}) {
-  const adminLinks = buildAdminLinks(apps);
+const MobileLink = (props: { currentPath: string; link: AdminLink }) => (
+  <a
+    href={props.link.href}
+    class={`sidebar-item-mobile ${
+      isActive(props.currentPath, props.link.href)
+        ? "border-blue-500/35 bg-blue-50/70 text-blue-700 dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
+        : ""
+    }`}
+    aria-current={isActive(props.currentPath, props.link.href) ? "page" : undefined}
+  >
+    <i class={`ti ${props.link.icon}`} />
+    {props.link.label}
+  </a>
+);
+
+const DesktopLink = (props: { currentPath: string; link: AdminLink }) => (
+  <a href={props.link.href} class={`sidebar-item ${isActive(props.currentPath, props.link.href) ? "sidebar-item-active" : ""}`}>
+    <i class={`ti ${props.link.icon} text-sm`} />
+    <span>{props.link.label}</span>
+  </a>
+);
+
+export default function AdminSidebar({ currentPath, apps }: { currentPath: string; apps: readonly RuntimeContext["apps"][number][] }) {
+  const groups = buildAdminGroups(apps);
 
   return (
     <>
@@ -44,28 +123,20 @@ export default function AdminSidebar({
             </span>
           </summary>
           <div class="sidebar-mobile-actions">
-            {adminLinks.map((link) => (
-              <a
-                href={link.href}
-                class={`sidebar-item-mobile ${
-                  isActive(pathname, link.href)
-                    ? "border-blue-500/35 bg-blue-50/70 text-blue-700 dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
-                    : ""
-                }`}
-                aria-current={
-                  isActive(pathname, link.href) ? "page" : undefined
-                }
-              >
-                <i class={`ti ${link.icon}`} />
-                {link.label}
-              </a>
+            {groups.map((group) => (
+              <section class="sidebar-group">
+                <p class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-dimmed">{group.label}</p>
+                {group.links.map((link) => (
+                  <MobileLink currentPath={currentPath} link={link} />
+                ))}
+              </section>
             ))}
           </div>
         </details>
       </nav>
 
       <aside class="sidebar-container">
-        <div class="paper flex h-full min-h-0 flex-col gap-4 p-4">
+        <div class="paper flex h-full min-h-0 flex-col gap-4 p-3">
           <div class="flex items-center gap-3">
             <div class="sidebar-header-icon bg-zinc-600 dark:bg-zinc-700">
               <i class="ti ti-settings text-xs" />
@@ -74,19 +145,14 @@ export default function AdminSidebar({
           </div>
 
           <div class="sidebar-body">
-            <section class="sidebar-group">
-              {adminLinks.map((link) => (
-                <a
-                  href={link.href}
-                  class={`sidebar-item ${
-                    isActive(pathname, link.href) ? "sidebar-item-active" : ""
-                  }`}
-                >
-                  <i class={`ti ${link.icon} text-sm`} />
-                  <span>{link.label}</span>
-                </a>
-              ))}
-            </section>
+            {groups.map((group) => (
+              <section class="sidebar-group">
+                <p class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-dimmed">{group.label}</p>
+                {group.links.map((link) => (
+                  <DesktopLink currentPath={currentPath} link={link} />
+                ))}
+              </section>
+            ))}
           </div>
         </div>
       </aside>

package/src/ssr/AppLaunchpad.island.tsx

@@ -0,0 +1,176 @@
+import { createEffect, For, Show } from "solid-js";
+import { prompts } from "../ui";
+
+export type AppLaunchpadApp = {
+  id: string;
+  iconClass: string;
+  label: string;
+  href: string;
+  description?: string;
+};
+
+export type AppLaunchpadLegalLink = {
+  label: string;
+  href: string;
+  icon?: string;
+};
+
+type AppLaunchpadContext = {
+  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" },
+];
+
+declare global {
+  interface Window {
+    __cloudAppLaunchpad?: AppLaunchpadContext;
+    cloud?: {
+      openAppLaunchpad?: () => void;
+    };
+  }
+}
+
+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 = (id: string) => {
+  const tone = paletteForId(id);
+  return `--app-icon-color:${tone.from}`;
+};
+
+const readEmbeddedContext = (): AppLaunchpadContext | undefined => {
+  if (typeof document === "undefined") return undefined;
+  const element = document.getElementById("cloud-app-launchpad-data");
+  const text = element?.textContent;
+  if (!text) return undefined;
+
+  try {
+    const parsed = JSON.parse(text) as Partial<AppLaunchpadContext>;
+    if (!Array.isArray(parsed.apps)) return undefined;
+    return {
+      apps: parsed.apps,
+      legalLinks: Array.isArray(parsed.legalLinks) ? parsed.legalLinks : [],
+    };
+  } catch {
+    return undefined;
+  }
+};
+
+const AppLaunchpadPanel = (props: AppLaunchpadContext) => (
+  <div class="launchpad-panel mx-auto max-h-[min(86vh,calc(100dvh-1.5rem))] w-[calc(100vw-1.5rem)] max-w-[calc(100vw-1.5rem)] overflow-y-auto overscroll-contain p-4 text-primary sm:w-fit sm:p-6 md:p-7 dark:text-white">
+    <div class="flex flex-wrap justify-center gap-x-4 gap-y-4 sm:gap-x-7 sm:gap-y-6">
+      <For each={props.apps}>
+        {(app) => (
+          <a
+            href={app.href}
+            class="group flex w-[4.75rem] min-w-0 flex-col items-center gap-1.5 rounded-2xl p-1 text-center outline-none focus-visible:ring-2 focus-visible:ring-white/60 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.id)}
+            >
+              <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={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}>
+          {(link) => (
+            <a 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>
+  </div>
+);
+
+export function setAppLaunchpadContext(apps: AppLaunchpadApp[], legalLinks: AppLaunchpadLegalLink[] = []) {
+  if (typeof window === "undefined") return;
+  window.__cloudAppLaunchpad = { apps, legalLinks };
+  window.cloud ??= {};
+  window.cloud.openAppLaunchpad = () => {
+    openAppLaunchpad();
+  };
+}
+
+export function openAppLaunchpad(apps?: AppLaunchpadApp[], legalLinks?: AppLaunchpadLegalLink[]) {
+  if (typeof window === "undefined") return;
+  const context = apps ? { apps, legalLinks: legalLinks ?? [] } : (window.__cloudAppLaunchpad ?? readEmbeddedContext());
+  if (!context || context.apps.length === 0) return;
+  window.__cloudAppLaunchpad = context;
+  void prompts.dialog<void>(() => <AppLaunchpadPanel apps={context.apps} legalLinks={context.legalLinks} />, {
+    surface: "bare",
+    header: false,
+    size: "large",
+  });
+}
+
+export function AppLaunchpadProvider(props: AppLaunchpadContext) {
+  createEffect(() => {
+    setAppLaunchpadContext(props.apps, props.legalLinks);
+  });
+
+  return <span class="hidden" data-cloud-app-launchpad-provider />;
+}
+
+export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail" | "header" | "menu"; label?: string }) {
+  const open = () => openAppLaunchpad(props.apps, props.legalLinks);
+
+  if (props.variant === "rail") {
+    return (
+      <button type="button" class="rail-item" title={props.label ?? "Apps"} aria-label={props.label ?? "Open apps"} onClick={open}>
+        <i class="ti ti-grid-dots text-base" />
+      </button>
+    );
+  }
+
+  if (props.variant === "header") {
+    return (
+      <button type="button" class="icon-btn inline items-center justify-center" aria-label={props.label ?? "Open apps"} onClick={open}>
+        <i class="ti ti-grid-dots text-lg" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      class="flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-white/30 dark:hover:bg-white/10 text-zinc-700 dark:text-zinc-300"
+      onClick={open}
+    >
+      <i class="ti ti-grid-dots" />
+      <span>{props.label ?? "Apps"}</span>
+    </button>
+  );
+}
+
+export function AppLaunchpad(props: AppLaunchpadContext & { variant?: "provider" | "rail" | "header" | "menu"; label?: string }) {
+  if (!props.variant || props.variant === "provider") {
+    return <AppLaunchpadProvider apps={props.apps} legalLinks={props.legalLinks} />;
+  }
+
+  return <AppLaunchpadButton apps={props.apps} legalLinks={props.legalLinks} variant={props.variant} label={props.label} />;
+}
+
+export default AppLaunchpad;

package/src/ssr/Footer.island.tsx

@@ -1,5 +1,5 @@
 import { createSignal, For, Show } from "solid-js";
-import { cookies } from "@valentinkolb/stdlib/browser";
+import { getCurrentThemePreference, setThemePreference } from "../shared/theme";
 
 type FooterProps = {
   isLoggedIn: boolean;
@@ -13,16 +13,11 @@ type FooterProps = {
 };
 
 export default function Footer(props: FooterProps) {
-  const [theme, setTheme] = createSignal(
-    typeof document !== "undefined" ? (document.documentElement.classList.contains("dark") ? "dark" : "light") : "dark",
-  );
+  const [theme, setTheme] = createSignal(getCurrentThemePreference());
 
   const toggleTheme = () => {
     const newTheme = theme() === "dark" ? "light" : "dark";
-    document.documentElement.classList.remove("dark", "light");
-    document.documentElement.classList.add(newTheme);
-    cookies.writeCookie("theme", newTheme);
-    setTheme(newTheme);
+    setTheme(setThemePreference(newTheme));
   };
 
   return (

package/src/ssr/GlobalAnnouncements.island.tsx

@@ -0,0 +1,141 @@
+import { createSignal, For, Show } from "solid-js";
+import {
+  ANNOUNCEMENTS_COOKIE,
+  ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS,
+  type AnnouncementCookieState,
+  type AnnouncementDisplayEntry,
+  mergeAnnouncementCookieState,
+  serializeAnnouncementCookieState,
+} from "../contracts/announcements";
+import MarkdownView from "../ui/misc/MarkdownView";
+
+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`;
+};
+
+const toneClass = (tone: AnnouncementDisplayEntry["tone"]) => {
+  if (tone === "success")
+    return "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-100";
+  if (tone === "warning")
+    return "border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100";
+  if (tone === "danger") return "border-red-200 bg-red-50 text-red-950 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-100";
+  return "border-blue-200 bg-blue-50 text-blue-950 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-100";
+};
+
+const toneIcon = (tone: AnnouncementDisplayEntry["tone"]) => {
+  if (tone === "success") return "ti ti-circle-check";
+  if (tone === "warning") return "ti ti-alert-triangle";
+  if (tone === "danger") return "ti ti-alert-circle";
+  return "ti ti-info-circle";
+};
+
+export default function GlobalAnnouncements(props: Props) {
+  const [cookieState, setCookieState] = createSignal(props.cookieState);
+  const [banners, setBanners] = createSignal(props.banners);
+  const [modalOpen, setModalOpen] = createSignal(props.announcements.length > 0);
+
+  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);
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <Show when={banners().length > 0}>
+        <div class="mx-2 flex flex-col gap-1 pb-1 md:ml-0 md:mr-1.5">
+          <For each={banners()}>
+            {(banner) => (
+              <section
+                class={`flex max-h-[min(40vh,14rem)] items-start gap-2 rounded-lg border px-3 py-2 text-xs shadow-sm ${toneClass(banner.tone)}`}
+              >
+                <i class={`${toneIcon(banner.tone)} mt-0.5 shrink-0`} />
+                <div class="min-h-0 min-w-0 flex-1">
+                  <p class="font-semibold">{banner.title}</p>
+                  <MarkdownView
+                    html={banner.bodyHtml}
+                    smallHeadings
+                    class="mt-1 max-h-36 overflow-y-auto overscroll-contain pr-1 [&_p]:my-0"
+                  />
+                </div>
+                <button
+                  type="button"
+                  class="ml-auto inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md opacity-70 hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10"
+                  aria-label="Dismiss banner"
+                  onClick={() => dismissBanner(banner.version)}
+                >
+                  <i class="ti ti-x" />
+                </button>
+              </section>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={modalOpen()}>
+        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-3 backdrop-blur-sm">
+          <section class="flex max-h-[86vh] w-[min(96vw,42rem)] min-h-0 flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white text-zinc-900 shadow-2xl dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100">
+            <header class="flex shrink-0 items-center gap-3 border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
+              <i class="ti ti-speakerphone text-base text-blue-500" />
+              <div class="min-w-0">
+                <p class="font-semibold">Announcements</p>
+                <p class="text-xs text-dimmed">Latest platform updates</p>
+              </div>
+              <button type="button" class="icon-btn ml-auto" aria-label="Close announcements" onClick={closeAnnouncements}>
+                <i class="ti ti-x" />
+              </button>
+            </header>
+            <main class="min-h-0 flex-1 overflow-y-auto p-4">
+              <div class="flex flex-col gap-4">
+                <For each={props.announcements}>
+                  {(entry) => (
+                    <article class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
+                      <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(undefined, {
+                              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 html={entry.bodyHtml} />
+                    </article>
+                  )}
+                </For>
+              </div>
+            </main>
+            <footer class="flex shrink-0 justify-end border-t border-zinc-200 bg-white/95 p-3 dark:border-zinc-800 dark:bg-zinc-950/95">
+              <button type="button" class="btn-primary btn-sm" onClick={closeAnnouncements}>
+                Got it
+              </button>
+            </footer>
+          </section>
+        </div>
+      </Show>
+    </>
+  );
+}