@xenide-io/the-old-ui-theme 0.9.13 → 0.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/suite-integration-picker.test.tsx

@@ -46,6 +46,39 @@ describe("SuiteIntegrationPicker", () => {
     expect(screen.queryByText("Linear")).not.toBeInTheDocument();
   });
 
+  it("filters to bridge-capable apps when Shelly Bridge only is on", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SuiteIntegrationPicker
+        open
+        items={[
+          {
+            id: "bridged",
+            label: "Bridged app",
+            description: "Can bridge into Tides",
+            bridgeTargets: ["tides"],
+          },
+          {
+            id: "shelly-only",
+            label: "Shelly only app",
+            description: "AI only",
+          },
+        ]}
+        onClose={vi.fn()}
+        onConnect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Bridged app")).toBeInTheDocument();
+    expect(screen.getByText("Shelly only app")).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText("Shelly Bridge only"));
+
+    expect(screen.getByText("Bridged app")).toBeInTheDocument();
+    expect(screen.queryByText("Shelly only app")).not.toBeInTheDocument();
+  });
+
   it("shows auth tags and passes the selected method to the connector", async () => {
     const user = userEvent.setup();
     const onConnect = vi.fn();
@@ -59,6 +92,7 @@ describe("SuiteIntegrationPicker", () => {
             label: "Mixed provider",
             description: "Supports multiple connection methods",
             categories: ["calendar", "email"],
+            bridgeTargets: ["turtletime", "tides"],
             authSchemes: ["OAUTH2", "API_KEY"],
           },
         ]}
@@ -69,8 +103,8 @@ describe("SuiteIntegrationPicker", () => {
 
     expect(screen.getByText("OAuth 2.0")).toBeInTheDocument();
     expect(screen.getByText("API key")).toBeInTheDocument();
-    expect(screen.getByLabelText("Works with TurtleTime")).toBeInTheDocument();
-    expect(screen.getByLabelText("Works with Tides")).toBeInTheDocument();
+    expect(screen.getByTitle("Bridge in TurtleTime")).toBeInTheDocument();
+    expect(screen.getByTitle("Bridge in Tides")).toBeInTheDocument();
 
     await user.click(screen.getByRole("button", { name: "Connect" }));
     await user.click(screen.getByRole("button", { name: /API key Select/ }));

package/src/suite/components/suite-integration-picker.tsx

@@ -10,6 +10,7 @@ import {
   type ReactNode,
 } from "react";
 import {
+  Bridge3d,
   EvPlug as Plug,
   Filter,
   NavArrowDown,
@@ -18,8 +19,6 @@ import {
   Xmark,
 } from "iconoir-react";
 import { Button, Input, Modal } from "@/components/ui";
-import { SUITE_APPS, SUITE_APP_MAP, type SuiteAppSlug } from "@/suite/lib/apps";
-import { SuiteAppIcon } from "@/suite/icons";
 
 export interface SuiteIntegrationPickerItem {
   id: string;
@@ -27,6 +26,8 @@ export interface SuiteIntegrationPickerItem {
   description: string;
   icon?: ReactNode;
   categories?: string[];
+  /** Product apps this toolkit can actually bridge. Empty means Shelly AI only. */
+  bridgeTargets?: string[];
   authSchemes?: string[];
   connecting?: boolean;
   unavailableReason?: string;
@@ -63,6 +64,13 @@ export interface SuiteIntegrationPickerProps {
   category?: string;
   categories?: string[];
   onCategoryChange?: (value: string) => void;
+  /**
+   * When provided, the "Shelly Bridge only" filter is controlled by the caller
+   * (so it can refetch a bridge-filtered catalogue server-side). When omitted,
+   * the picker filters the loaded items locally.
+   */
+  bridgeOnly?: boolean;
+  onBridgeOnlyChange?: (value: boolean) => void;
   onClose: () => void;
   onConnect: (
     item: SuiteIntegrationPickerItem,
@@ -87,7 +95,7 @@ function IntegrationSkeletonCard() {
       aria-hidden="true"
     >
       <div className="flex items-start gap-3">
-        <div className="h-10 w-10 shrink-0 rounded-lg bg-ph-muted" />
+        <div className="h-8 w-8 shrink-0 rounded-md bg-ph-muted" />
         <div className="min-w-0 flex-1 space-y-2 pt-1">
           <div className="h-4 w-3/5 rounded bg-ph-muted" />
           <div className="h-3 w-full rounded bg-ph-muted" />
@@ -128,46 +136,28 @@ function authSchemesFor(item: SuiteIntegrationPickerItem) {
   );
 }
 
-/**
- * Which ShellStack apps put a connected integration to work, per the deep
- * integration plan: calendar/mail feed TurtleTime time entries and Tides
- * tasks, code/chat/ticketing feed Tides tasks and Kraken runbooks, docs and
- * knowledge sources feed Kraken, CRM/finance feed the Portal. Unmapped
- * categories default to Kraken's authorised-source search.
- */
-const CATEGORY_APP_AFFINITY: Record<string, readonly SuiteAppSlug[]> = {
-  calendar: ["turtletime", "tides"],
-  email: ["turtletime", "tides"],
-  code: ["tides", "kraken"],
-  chat: ["tides", "kraken"],
-  documents: ["kraken"],
-  notes: ["kraken"],
-  knowledge: ["kraken"],
-  file_storage: ["kraken"],
-  crm: ["shellstack", "tides"],
-  finance: ["shellstack", "tides"],
-  payment: ["shellstack", "tides"],
-  monitoring: ["tides", "kraken"],
-  design: ["tides", "kraken"],
-  support: ["tides", "shellstack"],
-  ticketing: ["tides", "kraken"],
+const BRIDGE_MARK: Record<string, { src: string; name: string }> = {
+  turtletime: { src: "/turtletime-icon.svg", name: "TurtleTime" },
+  tides: { src: "/tides-icon.svg", name: "Tides" },
+  kraken: { src: "/kraken-icon.svg", name: "Kraken" },
 };
 
-const DEFAULT_APP_AFFINITY: readonly SuiteAppSlug[] = ["tides", "kraken"];
-
 export function suiteAppsForIntegration(
-  categories: readonly string[] | undefined,
-): SuiteAppSlug[] {
-  const apps = new Set<SuiteAppSlug>();
-  for (const category of categories ?? []) {
-    for (const app of CATEGORY_APP_AFFINITY[category.trim().toLowerCase()] ??
-      []) {
-      apps.add(app);
-    }
+  itemOrCategories:
+    | { bridgeTargets?: readonly string[] }
+    | readonly string[]
+    | undefined,
+): string[] {
+  if (
+    !itemOrCategories ||
+    Array.isArray(itemOrCategories) ||
+    !("bridgeTargets" in itemOrCategories)
+  ) {
+    return [];
   }
-  return apps.size > 0
-    ? SUITE_APPS.filter((app) => apps.has(app.slug)).map((app) => app.slug)
-    : [...DEFAULT_APP_AFFINITY];
+  const explicit = itemOrCategories.bridgeTargets;
+  if (!Array.isArray(explicit)) return [];
+  return explicit.filter((app): app is string => app in BRIDGE_MARK);
 }
 
 export function SuiteIntegrationPicker({
@@ -184,6 +174,8 @@ export function SuiteIntegrationPicker({
   category: controlledCategory,
   categories: controlledCategories,
   onCategoryChange,
+  bridgeOnly: controlledBridgeOnly,
+  onBridgeOnlyChange,
   onClose,
   onConnect,
   onFetchAuthFields,
@@ -197,6 +189,7 @@ export function SuiteIntegrationPicker({
   const [categoryQuery, setCategoryQuery] = useState("");
   const [categoryMenuOpen, setCategoryMenuOpen] = useState(false);
   const [expanded, setExpanded] = useState<string | null>(null);
+  const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState(false);
   const categoryMenuRef = useRef<HTMLDivElement>(null);
   const categoryTriggerRef = useRef<HTMLButtonElement>(null);
   const categorySearchRef = useRef<HTMLInputElement>(null);
@@ -207,6 +200,7 @@ export function SuiteIntegrationPicker({
   const scrollViewportRef = useRef<HTMLDivElement>(null);
   const loadMoreSentinelRef = useRef<HTMLDivElement>(null);
   const loadMoreInFlightRef = useRef(false);
+  const sentinelVisibleRef = useRef(false);
   const authRequestRef = useRef(0);
   const [methodItem, setMethodItem] =
     useState<SuiteIntegrationPickerItem | null>(null);
@@ -234,11 +228,16 @@ export function SuiteIntegrationPicker({
   const categories = controlledCategories ?? itemCategories;
   const activeSearch = controlledSearch ?? query;
   const activeCategory = controlledCategory ?? category;
+  const bridgeOnly = controlledBridgeOnly ?? bridgeOnlyInternal;
+  const setBridgeOnly = (value: boolean) => {
+    setBridgeOnlyInternal(value);
+    onBridgeOnlyChange?.(value);
+  };
   const categoryLabel = (value: string) =>
     value
       .replace(/[-_]/g, " ")
       .replace(/\b\w/g, (letter) => letter.toUpperCase());
-  const filtered =
+  const catalogItems =
     onSearchChange || onCategoryChange
       ? items
       : items.filter((item) => {
@@ -250,6 +249,10 @@ export function SuiteIntegrationPicker({
               (item.categories ?? []).includes(activeCategory))
           );
         });
+  const filtered =
+    bridgeOnly && controlledBridgeOnly === undefined
+      ? catalogItems.filter((item) => (item.bridgeTargets ?? []).length > 0)
+      : catalogItems;
   const visibleCategories = categories.filter((value) =>
     categoryLabel(value)
       .toLowerCase()
@@ -480,27 +483,37 @@ export function SuiteIntegrationPicker({
   useEffect(() => {
     const root = scrollViewportRef.current;
     const sentinel = loadMoreSentinelRef.current;
-    if (
-      !open ||
-      !root ||
-      !sentinel ||
-      !hasMore ||
-      !onEndReached ||
-      loading ||
-      catalogLoading ||
-      loadingMore
-    ) {
+    if (!open || !root || !sentinel) {
+      sentinelVisibleRef.current = false;
       return;
     }
 
     const observer = new IntersectionObserver(
       ([entry]) => {
-        if (!entry.isIntersecting || loadMoreInFlightRef.current) return;
+        // Only auto-load on the rising edge of the sentinel becoming visible.
+        // Without this, shrinking the list (search / category / Shelly Bridge
+        // only) leaves the sentinel pinned in view and each re-armed observer
+        // fires again, chain-loading the whole catalog page after page.
+        if (!entry.isIntersecting) {
+          sentinelVisibleRef.current = false;
+          return;
+        }
+        if (sentinelVisibleRef.current) return;
+        sentinelVisibleRef.current = true;
+        if (
+          loadMoreInFlightRef.current ||
+          !hasMore ||
+          !onEndReached ||
+          loading ||
+          catalogLoading ||
+          loadingMore
+        ) {
+          return;
+        }
         loadMoreInFlightRef.current = true;
-        observer.unobserve(entry.target);
         onEndReached();
       },
-      { root, rootMargin: "0px 0px 80px", threshold: 0 },
+      { root, rootMargin: "0px 0px 120px", threshold: 0 },
     );
 
     observer.observe(sentinel);
@@ -524,6 +537,24 @@ export function SuiteIntegrationPicker({
               {connectionError}
             </p>
           ) : null}
+          <label
+            className="inline-flex w-fit cursor-pointer items-center gap-2 text-sm text-ph-ink"
+            data-test={`${dataTest}-bridge-only`}
+          >
+            <input
+              type="checkbox"
+              role="switch"
+              className="ph-toggle"
+              checked={bridgeOnly}
+              onChange={(event) => setBridgeOnly(event.target.checked)}
+              aria-label="Shelly Bridge only"
+            />
+            <Bridge3d
+              className="h-4 w-4 shrink-0 text-ph-subtle"
+              aria-hidden
+            />
+            <span>Shelly Bridge only</span>
+          </label>
           <div className="grid gap-4 md:grid-cols-2">
             <div className="relative">
               <Search
@@ -652,6 +683,8 @@ export function SuiteIntegrationPicker({
                   const isExpanded = expanded === item.id;
                   const longDescription =
                     item.description.length > DESCRIPTION_LIMIT;
+                  const bridgeApps = suiteAppsForIntegration(item);
+                  const schemes = authSchemesFor(item);
                   const text =
                     isExpanded || !longDescription
                       ? item.description
@@ -671,9 +704,9 @@ export function SuiteIntegrationPicker({
                         aria-expanded={isExpanded}
                       >
                         <span className="flex items-start gap-3">
-                          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink">
+                          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-ph-muted text-ph-ink">
                             {item.icon ?? (
-                              <Plug className="h-5 w-5" aria-hidden />
+                              <Plug className="h-4 w-4" aria-hidden />
                             )}
                           </span>
                           <span className="min-w-0">
@@ -696,34 +729,33 @@ export function SuiteIntegrationPicker({
                           </span>
                         </span>
                       </button>
-                      {suiteAppsForIntegration(item.categories).length > 0 ? (
+                      {bridgeApps.length > 0 ? (
                         <div
                           className="mt-3 flex flex-wrap items-center gap-1.5"
-                          aria-label="Works with ShellStack apps"
+                          aria-label="Bridges into ShellStack apps"
                         >
-                          {suiteAppsForIntegration(item.categories).map(
-                            (app) => (
-                              <span
+                          {bridgeApps.map((app) => {
+                            const mark = BRIDGE_MARK[app];
+                            if (!mark) return null;
+                            return (
+                              <img
                                 key={app}
+                                src={mark.src}
+                                alt=""
+                                title={`Bridge in ${mark.name}`}
+                                className="h-5 w-5"
                                 data-test={`${dataTest}-${item.id}-app-${app}`}
-                              >
-                                <SuiteAppIcon
-                                  app={app}
-                                  size={16}
-                                  label={`Works with ${SUITE_APP_MAP[app].name}`}
-                                  className="rounded-[4px]"
-                                />
-                              </span>
-                            ),
-                          )}
+                              />
+                            );
+                          })}
                         </div>
                       ) : null}
-                      {authSchemesFor(item).length > 0 ? (
+                      {schemes.length > 0 ? (
                         <div
                           className="mt-3 flex flex-wrap gap-1.5"
                           aria-label="Connection methods"
                         >
-                          {authSchemesFor(item).map((scheme) => (
+                          {schemes.map((scheme) => (
                             <span
                               key={scheme}
                               className="rounded-full border border-ph-border bg-ph-muted px-2 py-1 text-[0.6875rem] font-medium text-ph-subtle"

package/src/suite/components/suite-notification-bell.test.tsx

@@ -5,6 +5,7 @@ vi.mock("next/navigation", () => ({
   useRouter: () => ({ push: vi.fn() }),
 }));
 
+import { SuiteNotificationsProvider } from "../lib/suite-notifications";
 import { SuiteNotificationBell } from "./suite-notification-bell";
 
 afterEach(() => {
@@ -14,21 +15,24 @@ afterEach(() => {
 describe("SuiteNotificationBell", () => {
   it("anchors the unread badge close to the bell glyph", async () => {
     render(
-      <SuiteNotificationBell
+      <SuiteNotificationsProvider
         fetchNotifications={async () => ({
           notifications: [],
           unread_count: 12,
         })}
         markRead={async () => undefined}
         markAllRead={async () => undefined}
-        dropdownMenu={({ trigger, "aria-label": label, children }) => (
-          <div aria-label={label}>
-            {trigger}
-            {children}
-          </div>
-        )}
         cacheKey={null}
-      />,
+      >
+        <SuiteNotificationBell
+          dropdownMenu={({ trigger, "aria-label": label, children }) => (
+            <div aria-label={label}>
+              {trigger}
+              {children}
+            </div>
+          )}
+        />
+      </SuiteNotificationsProvider>,
     );
 
     const badge = await waitFor(() => {

package/src/suite/components/suite-notification-bell.tsx

@@ -1,36 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { Bell } from "iconoir-react";
 
 import type { SuiteDropdownMenuComponent } from "../lib/injected";
-import {
-  resolveSuiteNotificationHref,
-  suiteAppBaseUrl,
-  suiteAppSlugForNotificationSource,
-} from "../lib/apps";
+import { useSuiteNotifications } from "../lib/suite-notifications";
 
-const POLL_MS = 60_000;
-
-/** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
-export interface SuiteNotification {
-  id: string;
-  title: string;
-  body: string;
-  href: string;
-  kind: string;
-  source_app: string;
-  read_at: string | null;
-  created_at: string;
-  workspace: string | null;
-  organisation: string | null;
-}
-
-export interface SuiteNotificationsResponse {
-  notifications: SuiteNotification[];
-  unread_count: number;
-}
+export type {
+  SuiteNotification,
+  SuiteNotificationsResponse,
+} from "../lib/suite-notifications";
 
 function timeAgo(iso: string): string {
   const then = new Date(iso).getTime();
@@ -44,155 +22,30 @@ function timeAgo(iso: string): string {
   return `${Math.round(hrs / 24)}d ago`;
 }
 
+/**
+ * Presentational notification bell. State, polling, caching and navigation
+ * live in SuiteNotificationsProvider — this just renders the shared context
+ * and forwards user intent back to it.
+ */
 export function SuiteNotificationBell({
-  fetchNotifications,
-  markRead,
-  markAllRead,
   dropdownMenu: DropdownMenu,
-  cacheKey = "suite-notifications-cache",
   dataTest = "suite-notifications",
   triggerId,
   triggerDataTest,
 }: {
-  fetchNotifications: () => Promise<SuiteNotificationsResponse>;
-  markRead: (id: string) => Promise<unknown>;
-  markAllRead: () => Promise<unknown>;
   dropdownMenu: SuiteDropdownMenuComponent;
-  /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
-  cacheKey?: string | null;
   dataTest?: string;
   triggerId?: string;
   triggerDataTest?: string;
 }) {
-  const router = useRouter();
-  const [open, setOpen] = useState(false);
-  const [items, setItems] = useState<SuiteNotification[]>([]);
-  const [unread, setUnread] = useState(0);
-
-  const load = useCallback(async () => {
-    try {
-      const data = await fetchNotifications();
-      setItems(data.notifications);
-      setUnread(data.unread_count);
-      // Stale-while-revalidate: keep last inbox for instant paint next visit.
-      if (cacheKey) {
-        try {
-          sessionStorage.setItem(
-            cacheKey,
-            JSON.stringify({
-              notifications: data.notifications,
-              unread_count: data.unread_count,
-            }),
-          );
-        } catch {
-          // ignore quota / private mode
-        }
-      }
-    } catch {
-      // Non-critical chrome — never surface bell errors to the user.
-    }
-  }, [fetchNotifications, cacheKey]);
-
-  useEffect(() => {
-    if (cacheKey) {
-      queueMicrotask(() => {
-        try {
-          const raw = sessionStorage.getItem(cacheKey);
-          if (raw) {
-            const cached = JSON.parse(raw) as {
-              notifications?: SuiteNotification[];
-              unread_count?: number;
-            };
-            if (Array.isArray(cached.notifications)) {
-              setItems(cached.notifications);
-              setUnread(cached.unread_count ?? 0);
-            }
-          }
-        } catch {
-          // ignore
-        }
-      });
-    }
-    const kick = window.setTimeout(() => void load(), 0);
-    const id = window.setInterval(() => void load(), POLL_MS);
-    return () => {
-      window.clearTimeout(kick);
-      window.clearInterval(id);
-    };
-  }, [load, cacheKey]);
-
-  const onOpenChange = useCallback(
-    (next: boolean) => {
-      setOpen(next);
-      if (next) void load();
-    },
-    [load],
-  );
-
-  const openItem = useCallback(
-    async (n: SuiteNotification) => {
-      setOpen(false);
-      if (!n.read_at) {
-        setItems((prev) =>
-          prev.map((i) =>
-            i.id === n.id ? { ...i, read_at: new Date().toISOString() } : i,
-          ),
-        );
-        setUnread((u) => Math.max(0, u - 1));
-        try {
-          await markRead(n.id);
-        } catch {
-          // ignore
-        }
-      }
-      const target = resolveSuiteNotificationHref(n.href, n.source_app);
-      if (!target) return;
-      if (/^https?:\/\//i.test(target)) {
-        try {
-          const url = new URL(target);
-          const sourceApp = suiteAppSlugForNotificationSource(n.source_app);
-          const path = `${url.pathname}${url.search}${url.hash}`;
-          if (url.origin === window.location.origin) {
-            router.push(path);
-            return;
-          }
-          if (sourceApp && sourceApp !== "shellstack") {
-            const sourceOrigin = new URL(suiteAppBaseUrl(sourceApp)).origin;
-            if (url.origin === sourceOrigin) {
-              const launchUrl = new URL(
-                `/launch/${sourceApp}`,
-                suiteAppBaseUrl("shellstack"),
-              );
-              launchUrl.searchParams.set("next", path);
-              window.location.assign(launchUrl.toString());
-              return;
-            }
-          }
-        } catch {
-          // Fall through to the original external link.
-        }
-        window.location.assign(target);
-        return;
-      }
-      router.push(target);
-    },
-    [router, markRead],
-  );
-
-  const markAll = useCallback(async () => {
-    setItems((prev) =>
-      prev.map((i) => ({
-        ...i,
-        read_at: i.read_at ?? new Date().toISOString(),
-      })),
-    );
-    setUnread(0);
-    try {
-      await markAllRead();
-    } catch {
-      // ignore
-    }
-  }, [markAllRead]);
+  const {
+    notifications,
+    unreadCount: unread,
+    open,
+    setOpen,
+    select,
+    markAllRead,
+  } = useSuiteNotifications();
 
   return (
     <DropdownMenu
@@ -204,7 +57,7 @@ export function SuiteNotificationBell({
       align="end"
       panelClassName="w-80 overflow-hidden p-0"
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={setOpen}
       trigger={
         <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
           <span className="relative inline-flex h-5 w-5">
@@ -225,7 +78,7 @@ export function SuiteNotificationBell({
             type="button"
             id={`${dataTest}-mark-all`}
             data-test={`${dataTest}-mark-all`}
-            onClick={markAll}
+            onClick={markAllRead}
             className="text-xs font-medium text-ph-brand hover:underline"
           >
             Mark all read
@@ -233,17 +86,17 @@ export function SuiteNotificationBell({
         ) : null}
       </div>
       <div className="max-h-80 overflow-y-auto py-1">
-        {items.length === 0 ? (
+        {notifications.length === 0 ? (
           <p className="px-3 py-6 text-center text-sm text-ph-mutedtext">
             You&apos;re all caught up.
           </p>
         ) : (
-          items.map((n) => (
+          notifications.map((n) => (
             <button
               key={n.id}
               id={`${dataTest}-item-${n.id}`}
               data-test={`${dataTest}-item-${n.id}`}
-              onClick={() => void openItem(n)}
+              onClick={() => select(n)}
               className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
             >
               <span className="flex items-center gap-2">