@creezio/shell-ui 0.22.0

package/ui/data-table.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { Button } from "./primitives/button";
+import { Input } from "./primitives/input";
+
+type DataTableProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  searchPlaceholder?: string;
+  initialPageSize?: number;
+};
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchPlaceholder = "Rechercher…",
+  initialPageSize = 25,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [globalFilter, setGlobalFilter] = useState("");
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize: initialPageSize } },
+  });
+
+  return (
+    <div className="space-y-3">
+      <Input
+        value={globalFilter ?? ""}
+        onChange={(e) => setGlobalFilter(e.target.value)}
+        placeholder={searchPlaceholder}
+        className="max-w-sm"
+      />
+      <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white">
+        <table className="w-full text-sm">
+          <thead className="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
+            {table.getHeaderGroups().map((hg) => (
+              <tr key={hg.id}>
+                {hg.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className="cursor-pointer px-4 py-3 font-medium select-none"
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                    {{ asc: " ↑", desc: " ↓" }[header.column.getIsSorted() as string] ?? null}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <tr key={row.id} className="border-t border-slate-100 hover:bg-slate-50/80">
+                  {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id} className="px-4 py-3 align-middle">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={columns.length} className="px-4 py-10 text-center text-slate-500">
+                  Aucun résultat
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="flex items-center justify-between text-sm text-slate-500">
+        <span>
+          {table.getFilteredRowModel().rows.length} ligne(s) — page{" "}
+          {table.getState().pagination.pageIndex + 1} / {table.getPageCount() || 1}
+        </span>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Précédent
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Suivant
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/desktop/auth-window-chrome.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Chrome fenêtre frameless sur les écrans hors workspace (login, setup,
+ * server-cockpit, …). Sans ça, Windows n’a plus de min/max/close (la
+ * titlebar vit uniquement dans WorkspaceTabBar).
+ */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { WindowChromeControls } from "../workspace/window-chrome-controls";
+import { cn } from "@creezio/shell-ui";
+
+export function AuthWindowChrome({
+  children,
+  variant = "light",
+}: {
+  children: ReactNode;
+  /** `dark` = cockpit serveur (#0b1020). */
+  variant?: "light" | "dark";
+}) {
+  const [chrome, setChrome] = useState(false);
+
+  useEffect(() => {
+    setChrome(Boolean(getShellDesktopApi()?.customWindowChrome));
+    // Belt-and-suspenders : pas de FAB Electron topmost hors session.
+    void getShellDesktopApi()?.setAssistantChrome?.("hidden");
+  }, []);
+
+  return (
+    <>
+      {chrome ? (
+        <div
+          className={cn(
+            "fixed inset-x-0 top-0 z-[100] flex h-10 items-stretch border-b backdrop-blur-sm",
+            variant === "dark"
+              ? "border-white/10 bg-[#0b1020]/95"
+              : "border-slate-200/80 bg-slate-100/95",
+          )}
+          role="banner"
+          aria-label="Barre de titre"
+        >
+          <div className={`${getShellUiBrand().titlebarDragClass} min-w-0 flex-1 self-stretch`} />
+          <WindowChromeControls tone={variant === "dark" ? "dark" : "light"} />
+        </div>
+      ) : null}
+      <div className={chrome ? "pt-10" : undefined}>{children}</div>
+    </>
+  );
+}

package/ui/desktop/desktop-bridge.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { getShellDesktopApi } from "@creezio/shell-ui";
+
+/**
+ * Pont desktop global (monté dans WorkspaceRoot, no-op en web).
+ *
+ * Écoute les ouvertures d’onglet **site externe** depuis le process principal
+ * Electron (`onExternalTabOpened` / alias déprécié `onSupplierTabOpened`)
+ * → active l’onglet workspace correspondant.
+ */
+
+import { useEffect, useRef } from "react";
+import {
+  useTabWorkspaceOptional,
+  openExternalSiteFromWorkspace,
+  type OpenExternalSiteOpts,
+} from "../workspace/tab-workspace-host";
+
+const DEFAULT_EXTERNAL_SITE_TITLE = "Site externe";
+
+function titleFromInfo(url: string, rawTitle?: string): string {
+  const t = (rawTitle || "").trim();
+  if (t) return t;
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return DEFAULT_EXTERNAL_SITE_TITLE;
+  }
+}
+
+function resolveOpenFn(workspace: any): ((opts: OpenExternalSiteOpts) => void) | null {
+  if (!workspace) return null;
+  return workspace.openExternalSite ?? workspace.openSupplierSite ?? null;
+}
+
+export function DesktopBridge() {
+  const workspace = useTabWorkspaceOptional();
+  const openRef = useRef(resolveOpenFn(workspace));
+  const readyRef = useRef(Boolean(workspace?.ready));
+  const pendingRef = useRef<OpenExternalSiteOpts[]>([]);
+  openRef.current = resolveOpenFn(workspace);
+  readyRef.current = Boolean(workspace?.ready);
+
+  useEffect(() => {
+    const open = resolveOpenFn(workspace);
+    if (!workspace?.ready || !open) return;
+    const pending = pendingRef.current;
+    if (!pending.length) return;
+    pendingRef.current = [];
+    for (const opts of pending) open(opts);
+  }, [workspace?.ready, workspace]);
+
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    // SoT : onExternalTabOpened ; alias déprécié onSupplierTabOpened
+    const subscribe =
+      api?.onExternalTabOpened ?? api?.onSupplierTabOpened;
+    if (!subscribe) return;
+    return subscribe((info: {
+      siteId?: number;
+      /** @deprecated → siteId */
+      fournisseurId?: number;
+      url: string;
+      title?: string;
+      tabId?: string;
+      electronTabId?: string;
+    }) => {
+      const opts: OpenExternalSiteOpts = {
+        siteId: info.siteId ?? info.fournisseurId ?? 0,
+        url: info.url,
+        title: titleFromInfo(info.url, info.title),
+        electronTabId: info.electronTabId ?? info.tabId,
+      };
+      if (readyRef.current && openRef.current) {
+        openRef.current(opts);
+      } else {
+        pendingRef.current.push(opts);
+      }
+    });
+  }, []);
+
+  return null;
+}
+
+/** @deprecated — préférer openExternalSiteFromWorkspace */
+export { openExternalSiteFromWorkspace };

package/ui/desktop/external-site-slot.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+/**
+ * Slot content-area pour un onglet site externe.
+ *
+ * Le DOM reste vide : le vrai contenu est une WebContentsView Electron posee
+ * exactement sur ce rectangle (sidebar + tab bar + assistant restent hors
+ * bounds). Un ResizeObserver reporte {x,y,width,height} au main process.
+ *
+ * Pendant un chargement intentionnel (premier open / nouvelle URL utilisateur),
+ * la vue native est masquee et ce slot affiche un spinner. Les navigations SPA
+ * internes mettent a jour l'URL workspace sans rappeler openTab.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { getShellDesktopApi, isSameTabDocument } from "@creezio/shell-ui";
+import { usePaneActive } from "../workspace/keep-alive";
+import { useTabWorkspace } from "../workspace/tab-workspace-context";
+import type { DesktopContentRect, DesktopTabLoadState } from "../desktop-types";
+
+function readRect(el: HTMLElement): DesktopContentRect {
+  const r = el.getBoundingClientRect();
+  return {
+    x: Math.round(r.x),
+    y: Math.round(r.y),
+    width: Math.max(1, Math.round(r.width)),
+    height: Math.max(1, Math.round(r.height)),
+  };
+}
+
+export type ExternalSiteSlotPhase = "idle" | "loading" | "ready" | "error";
+
+/** @deprecated Use ExternalSiteSlotPhase. */
+export type SupplierSlotPhase = ExternalSiteSlotPhase;
+
+/** Pure : derive l'UI du slot depuis les events IPC load-state. */
+export function reduceExternalSiteLoadState(
+  current: ExternalSiteSlotPhase,
+  ev: Pick<DesktopTabLoadState, "state">,
+): ExternalSiteSlotPhase {
+  if (ev.state === "loading") return "loading";
+  if (ev.state === "ready") return "ready";
+  if (ev.state === "error") return "error";
+  return current;
+}
+
+/** @deprecated Use reduceExternalSiteLoadState. */
+export const reduceSupplierLoadState = reduceExternalSiteLoadState;
+
+export function ExternalSiteSlot({
+  siteId: siteIdProp,
+  initialUrl,
+}: {
+  /** Id de partition (number ou string numérique depuis la route). */
+  siteId: number | string;
+  /** URL de secours si l'onglet workspace n'a pas encore de meta.externalSite.url. */
+  initialUrl?: string;
+}) {
+  const siteIdParsed =
+    typeof siteIdProp === "number" ? siteIdProp : Number(siteIdProp);
+  const siteIdValid = Number.isFinite(siteIdParsed);
+  const siteId = siteIdValid ? siteIdParsed : -1;
+  const slotRef = useRef<HTMLDivElement>(null);
+  const paneActive = usePaneActive();
+  const workspace = useTabWorkspace();
+  const { tabs, setTabMeta } = workspace;
+  const patchExternalSiteTab =
+    workspace.patchExternalSiteTab ?? workspace.patchSupplierTab;
+  const href = `/site/${siteId}`;
+  const wsTab = tabs.find((t: any) => {
+    const external = t.externalSite;
+    const legacy = t.supplier;
+    return (
+      external?.siteId === siteId ||
+      legacy?.siteId === siteId ||
+      legacy?.fournisseurId === siteId ||
+      (t.href.split("?")[0] || "") === href
+    );
+  });
+  const externalMeta = wsTab?.externalSite ?? wsTab?.supplier;
+  const url = externalMeta?.url || initialUrl || "";
+  const electronTabId = externalMeta?.electronTabId;
+  /** Document deja ouvert / synchronise depuis Electron - bloque la boucle openTab. */
+  const documentUrlRef = useRef("");
+  const [phase, setPhase] = useState<ExternalSiteSlotPhase>(() =>
+    url ? "loading" : "idle",
+  );
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  // Ouvre / reutilise la WebContentsView (cookies partition conserves).
+  // Ne pas rappeler openTab quand l'URL change uniquement via sync SPA.
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api || !url || !/^https?:\/\//i.test(url)) {
+      setPhase(url ? "error" : "idle");
+      if (url) setErrorMsg("URL de site invalide.");
+      return;
+    }
+    if (isSameTabDocument(documentUrlRef.current, url)) {
+      return;
+    }
+    let cancelled = false;
+    if (!electronTabId) {
+      setPhase("loading");
+    }
+    setErrorMsg(null);
+    void api
+      .openTab(siteId, url)
+      .then((res: any) => {
+        if (cancelled) return;
+        const finalUrl = res.url || url;
+        documentUrlRef.current = finalUrl;
+        patchExternalSiteTab(siteId, {
+          electronTabId: res.tabId,
+          url: finalUrl,
+        });
+        if (res.loadState) {
+          setPhase((prev) =>
+            reduceExternalSiteLoadState(prev, { state: res.loadState }),
+          );
+          if (res.loadState === "error") {
+            setErrorMsg("Chargement impossible.");
+          } else if (res.loadState === "ready") {
+            setErrorMsg(null);
+          }
+        }
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return;
+        console.error("Ouverture du site externe impossible :", e);
+        setPhase("error");
+        setErrorMsg(
+          e instanceof Error ? e.message : "Impossible d'ouvrir le site.",
+        );
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [siteId, url, electronTabId, patchExternalSiteTab]);
+
+  // IPC load-state (spinner immediat jusqu'a ready / error).
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.onTabLoadState) return;
+    return api.onTabLoadState((ev: any) => {
+      const matchTab = Boolean(electronTabId && ev.tabId === electronTabId);
+      const eventSiteId = ev.siteId ?? ev.fournisseurId;
+      const matchSite = eventSiteId === siteId;
+      // Avant patch electronTabId : matcher sur siteId stable.
+      if (!matchTab && !matchSite) return;
+      setPhase((prev) => reduceExternalSiteLoadState(prev, ev));
+      if (ev.state === "error") {
+        setErrorMsg(ev.error || "Chargement impossible.");
+      } else if (ev.state === "ready") {
+        setErrorMsg(null);
+      }
+    });
+  }, [electronTabId, siteId]);
+
+  // Bounds + activation tant que la pane est active.
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    const el = slotRef.current;
+    if (!api || !el) return;
+    if (!paneActive) return;
+
+    let cancelled = false;
+    let activationInFlight = false;
+
+    const activateNative = async (rect: DesktopContentRect) => {
+      if (activationInFlight) return;
+      activationInFlight = true;
+      try {
+        if (electronTabId) {
+          const activated = await api.activateTab(electronTabId, rect);
+          if (!activated || activated.ok) return;
+        }
+
+        if (!api.activateSite || !url) return;
+        const restored = await api.activateSite(siteId, url, rect);
+        if (cancelled || !restored.ok || !restored.tabId) return;
+        const finalUrl = restored.url || url;
+        documentUrlRef.current = finalUrl;
+        patchExternalSiteTab(siteId, {
+          electronTabId: restored.tabId,
+          url: finalUrl,
+        });
+        if (restored.loadState) {
+          setPhase((prev) =>
+            reduceExternalSiteLoadState(prev, { state: restored.loadState }),
+          );
+        }
+      } catch (e) {
+        console.warn(
+          "Reactivation de l'onglet externe impossible :",
+          e instanceof Error ? e.message : e,
+        );
+      } finally {
+        activationInFlight = false;
+      }
+    };
+
+    void activateNative(readRect(el));
+
+    let raf = 0;
+    const report = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const rect = readRect(el);
+        void api.setContentRect(rect);
+        void activateNative(rect);
+      });
+    };
+
+    report();
+    const ro = new ResizeObserver(report);
+    ro.observe(el);
+    const main = el.closest("main");
+    if (main) ro.observe(main);
+    window.addEventListener("resize", report);
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      window.removeEventListener("resize", report);
+    };
+  }, [paneActive, electronTabId, siteId, url, patchExternalSiteTab]);
+
+  // Metadata UI (titre / URL live) - sans declencher de reload.
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api || !paneActive) return;
+    return api.onTabsChanged?.((list: any[]) => {
+      const t = list.find((x) => {
+        const eventSiteId = x.siteId ?? x.fournisseurId;
+        return x.tabId === electronTabId || eventSiteId === siteId;
+      });
+      if (!t) return;
+      if (t.url) {
+        documentUrlRef.current = t.url;
+      }
+      if (t.title) {
+        setTabMeta(href, { title: t.title, fullscreen: true, kind: "section" });
+      }
+      if (t.url || t.title) {
+        patchExternalSiteTab(siteId, {
+          ...(t.url ? { url: t.url } : {}),
+          ...(t.title ? { title: t.title } : {}),
+        });
+      }
+    });
+  }, [paneActive, electronTabId, siteId, href, setTabMeta, patchExternalSiteTab]);
+
+  if (!siteIdValid) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-slate-500">
+        Site invalide
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={slotRef}
+      data-creezio-site-slot
+      data-creezio-site-id={siteId}
+      data-creezio-site-phase={phase}
+      className="relative h-full min-h-0 w-full bg-slate-50"
+      aria-label="Site externe"
+      aria-busy={phase === "loading"}
+    >
+      {!url && (
+        <div className="flex h-full items-center justify-center p-8 text-center text-sm text-muted-foreground">
+          Aucune URL pour cet onglet.
+        </div>
+      )}
+      {url && phase === "loading" && (
+        <div
+          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-slate-50"
+          role="status"
+          aria-live="polite"
+        >
+          <Loader2 className="h-8 w-8 animate-spin text-slate-400" />
+          <p className="text-sm text-slate-500">Chargement du site...</p>
+        </div>
+      )}
+      {url && phase === "error" && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-slate-50 p-8 text-center">
+          <p className="text-sm font-medium text-slate-700">
+            Impossible d&apos;ouvrir cette page
+          </p>
+          <p className="max-w-md break-all text-xs text-slate-500">{url}</p>
+          {errorMsg ? (
+            <p className="max-w-md text-xs text-slate-500">{errorMsg}</p>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** @deprecated Use ExternalSiteSlot with siteId. */
+export function SupplierSiteSlot({
+  fournisseurId,
+  initialUrl,
+}: {
+  fournisseurId: number | string;
+  initialUrl?: string;
+}) {
+  return <ExternalSiteSlot siteId={fournisseurId} initialUrl={initialUrl} />;
+}

package/ui/desktop/external-site-surface.ts

@@ -0,0 +1,58 @@
+/**
+ * Commandes de surface native (WebContentsView) dérivées de l'onglet workspace.
+ * Pur / testable - pas d'Electron.
+ *
+ * Quitter un onglet site externe -> showCrm (masquer Chromium).
+ * Entrer / revenir sur un onglet site externe avec electronTabId -> activate.
+ */
+
+export type ExternalSiteSurfaceSignal =
+  | { type: "leave-external" }
+  | { type: "enter-external"; electronTabId?: string | null };
+
+export type ExternalSiteSurfaceCommand =
+  | { type: "show-crm" }
+  | { type: "activate"; tabId: string }
+  | { type: "noop" };
+
+/**
+ * Réduit le signal workspace -> commande IPC desktop.
+ * Symétrique : leave = showCrm, enter avec id = activate, enter sans id = noop
+ * (le slot ouvrira via openTab).
+ */
+export function reduceExternalSiteSurfaceCommand(
+  signal: ExternalSiteSurfaceSignal,
+): ExternalSiteSurfaceCommand {
+  if (signal.type === "leave-external") {
+    return { type: "show-crm" };
+  }
+  const id = String(signal.electronTabId || "").trim();
+  if (!id) return { type: "noop" };
+  return { type: "activate", tabId: id };
+}
+
+/**
+ * @deprecated Use ExternalSiteSurfaceSignal with leave-external/enter-external.
+ */
+export type SupplierSurfaceSignal =
+  | { type: "leave-supplier" }
+  | { type: "enter-supplier"; electronTabId?: string | null };
+
+/** @deprecated Use ExternalSiteSurfaceCommand. */
+export type SupplierSurfaceCommand = ExternalSiteSurfaceCommand;
+
+/** @deprecated Use reduceExternalSiteSurfaceCommand. */
+export function reduceSupplierSurfaceCommand(
+  signal: SupplierSurfaceSignal | ExternalSiteSurfaceSignal,
+): ExternalSiteSurfaceCommand {
+  if (signal.type === "leave-supplier") {
+    return reduceExternalSiteSurfaceCommand({ type: "leave-external" });
+  }
+  if (signal.type === "enter-supplier") {
+    return reduceExternalSiteSurfaceCommand({
+      type: "enter-external",
+      electronTabId: signal.electronTabId,
+    });
+  }
+  return reduceExternalSiteSurfaceCommand(signal);
+}