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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.13",
+  "version": "0.9.15",
   "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

@@ -1,10 +1,11 @@
-import { cleanup, render, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 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(() => {
@@ -44,4 +48,78 @@ describe("SuiteNotificationBell", () => {
     expect(badge.parentElement?.className).toContain("h-5");
     expect(badge.parentElement?.className).toContain("w-5");
   });
+
+  it("keeps each responsive bell dropdown open state independent", () => {
+    render(
+      <SuiteNotificationsProvider
+        fetchNotifications={async () => ({
+          notifications: [],
+          unread_count: 0,
+        })}
+        markRead={async () => undefined}
+        markAllRead={async () => undefined}
+        cacheKey={null}
+      >
+        <SuiteNotificationBell
+          dataTest="desktop-notifications"
+          dropdownMenu={({
+            trigger,
+            children,
+            open,
+            onOpenChange,
+            triggerId,
+          }) => (
+            <div>
+              <button
+                id={triggerId}
+                type="button"
+                onClick={() => onOpenChange?.(!open)}
+              >
+                {trigger}
+              </button>
+              {open ? (
+                <div data-test={`${triggerId}-panel`}>{children}</div>
+              ) : null}
+            </div>
+          )}
+        />
+        <SuiteNotificationBell
+          dataTest="mobile-notifications"
+          dropdownMenu={({
+            trigger,
+            children,
+            open,
+            onOpenChange,
+            triggerId,
+          }) => (
+            <div>
+              <button
+                id={triggerId}
+                type="button"
+                onClick={() => onOpenChange?.(!open)}
+              >
+                {trigger}
+              </button>
+              {open ? (
+                <div data-test={`${triggerId}-panel`}>{children}</div>
+              ) : null}
+            </div>
+          )}
+        />
+      </SuiteNotificationsProvider>,
+    );
+
+    fireEvent.click(document.getElementById("desktop-notifications-trigger")!);
+
+    expect(
+      document.querySelector(
+        '[data-test="desktop-notifications-trigger-panel"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      document.querySelector(
+        '[data-test="mobile-notifications-trigger-panel"]',
+      ),
+    ).toBeNull();
+  });
 });