@hgdc/ui 0.65.0 → 0.66.1

package/dist/app-shell.js

@@ -44,7 +44,7 @@ export function AppShell({ product, organization, productRail: productRailOption
     const [menuOpen, setMenuOpen] = useState(false);
     const preference = useProductBarPreference();
     // Relu chez Account seulement par un produit passé aux deux vues (il donne `view`, ADR 0014).
-    useProductBarSync(productRailOption === undefined && viewOption !== undefined);
+    useProductBarSync(productRailOption !== false);
     const productRail = productRailOption ?? (viewOption === undefined || productBarShown(viewOption, preference));
     const [navLevel, setNavLevel] = useState("tabs");
     useToggleShortcut();
@@ -102,7 +102,7 @@ export function AppShell({ product, organization, productRail: productRailOption
     useAssistantShortcut(assistant);
     const otherView = viewOption === undefined ? null : _jsx(OtherViewLink, { product: product, view: viewOption });
     // Dans la barre de Basalte, seul Réglages reste au-dessus du compte : le reste passe dans son menu.
-    const footer = (_jsxs(_Fragment, { children: [account !== undefined ? sidebarFooter : null, productRail && project ? (_jsx("div", { className: "px-3 pb-1", children: _jsxs("a", { href: project.settingsHref, className: SIDEBAR_ITEM, children: [_jsx(HugeiconsIcon, { icon: Settings02Icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: "R\u00E9glages du projet" })] }) })) : null, _jsx(ShellCommonLinks, { links: productRail ? { ...(links?.settings ? { settings: links.settings } : {}), status: false } : (links ?? {}), statusPageUrl: statusPageUrl, otherView: productRail ? null : otherView }), account ?? sidebarFooter] }));
+    const footer = (_jsxs(_Fragment, { children: [account !== undefined ? sidebarFooter : null, productRail && project ? (_jsx("div", { className: "pb-1", children: _jsxs("a", { href: project.settingsHref, className: SIDEBAR_ITEM, children: [_jsx(HugeiconsIcon, { icon: Settings02Icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: "R\u00E9glages du projet" })] }) })) : null, _jsx(ShellCommonLinks, { links: productRail ? { ...(links?.settings ? { settings: links.settings } : {}), status: false } : (links ?? {}), statusPageUrl: statusPageUrl, otherView: productRail ? null : otherView }), account ?? sidebarFooter] }));
     const menuLinks = productRail
         ? {
             documentation: links?.documentation,

package/dist/module-bar-store.d.ts

@@ -1,9 +1,11 @@
 import { type ModuleWord } from "./modules.ts";
 /**
- * L'ordre et le choix des modules de la barre, propres à chaque personne. Sous `app.hgdc.ch`, toutes
- * les consoles partagent la même origine, donc le même réglage.
+ * L'ordre et le choix des modules de la barre, propres à chaque personne : Account les garde
+ * (`product-bar.ts`), et chaque origine en retient la dernière valeur, pour s'afficher sans attendre.
  */
 export declare const MODULE_BAR_KEY = "hgdc-shell:modules";
 export declare function saveModuleBar(order: ReadonlyArray<ModuleWord>): void;
+/** L'ordre retenu dans cette origine, lu hors de React. */
+export declare function storedModuleBar(): ReadonlyArray<ModuleWord>;
 /** L'ordre retenu ; celui par défaut au rendu serveur. */
 export declare function useModuleBar(): ReadonlyArray<ModuleWord>;

package/dist/module-bar-store.js

@@ -1,8 +1,8 @@
 import { useSyncExternalStore } from "react";
 import { DEFAULT_MODULE_BAR, parseModuleBar } from "./modules.js";
 /**
- * L'ordre et le choix des modules de la barre, propres à chaque personne. Sous `app.hgdc.ch`, toutes
- * les consoles partagent la même origine, donc le même réglage.
+ * L'ordre et le choix des modules de la barre, propres à chaque personne : Account les garde
+ * (`product-bar.ts`), et chaque origine en retient la dernière valeur, pour s'afficher sans attendre.
  */
 export const MODULE_BAR_KEY = "hgdc-shell:modules";
 const EVENT = "hgdc-module-bar";
@@ -50,6 +50,10 @@ export function saveModuleBar(order) {
     }
     window.dispatchEvent(new Event(EVENT));
 }
+/** L'ordre retenu dans cette origine, lu hors de React. */
+export function storedModuleBar() {
+    return read();
+}
 /** L'ordre retenu ; celui par défaut au rendu serveur. */
 export function useModuleBar() {
     return useSyncExternalStore(subscribe, read, () => DEFAULT_MODULE_BAR);

package/dist/module-bar.js

@@ -11,6 +11,7 @@ import { useState, useSyncExternalStore } from "react";
 import { Button } from "./button.js";
 import { cn } from "./cn.js";
 import { saveModuleBar, useModuleBar } from "./module-bar-store.js";
+import { pushModuleBar } from "./product-bar.js";
 import { hiddenModules, moduleByWord, moveModule, shownModules } from "./modules.js";
 import { ProductBadge } from "./product-badge.js";
 import { PRODUCT_PRERENDER_ATTRIBUTE } from "./product-switch.js";
@@ -86,6 +87,7 @@ export function ShellNavigation({ product, nav, accountHref, level, onLevelChang
     const { products, account } = shellProductEntries({ current: product, accountHref, pageOrigin });
     return (_jsxs("div", { "data-slot": "shell-navigation", className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { "data-slot": "shell-manager", className: "shrink-0 px-3 pt-1", children: [_jsx("ul", { children: _jsx(ShellEntryLink, { entry: account, icon: UserGroupIcon }) }), _jsx("div", { "aria-hidden": true, className: "mx-2 mt-2 h-px bg-foreground/8" })] }), level === "modules" ? (_jsx(ModuleList, { entries: products, order: shownModules(order, product).filter((word) => !projectModules || word === product || projectModules.includes(word)), onOpenCurrent: () => onLevelChange("tabs"), onCustomize: () => onLevelChange("edit") })) : level === "edit" ? (_jsx(ModuleBarEditor, { order: order, onSave: (next) => {
                     saveModuleBar(next);
+                    void pushModuleBar(next);
                     onLevelChange("modules");
                 }, onCancel: () => onLevelChange("modules") })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "shrink-0 px-3 pt-2", children: [_jsx("ul", { children: _jsx(SidebarNavBack, { label: "Retour aux modules", keepMenuOpen: true, render: _jsx("button", { type: "button", className: "w-full", onClick: () => onLevelChange("modules") }) }) }), _jsxs("div", { "data-slot": "shell-module-title", className: "flex min-h-9 items-center gap-2.5 px-3 text-sm font-semibold lg:text-shell-foreground lg:rail:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-[1.125rem] shrink-0" }), _jsx("span", { className: "truncate font-heading", children: familyProductName(product) })] })] }), nav] }))] }));
 }

package/dist/product-bar.d.ts

@@ -1,4 +1,5 @@
 import type { ProductView } from "./addresses.ts";
+import { type ModuleWord } from "./modules.ts";
 /**
  * Réglage « Barre des produits » (ADR 0014 de la famille), choisi dans Account :
  * - `auto` : la barre sous `app.hgdc.ch`, pas sur `<mot>.hgdc.ch` ;
@@ -13,7 +14,7 @@ export type ProductBarPreference = "auto" | "always" | "never";
 export declare const PRODUCT_BAR_PREFERENCES: ReadonlyArray<ProductBarPreference>;
 /** Libellés du réglage, dans l'ordre d'affichage. */
 export declare const PRODUCT_BAR_LABELS: Readonly<Record<ProductBarPreference, string>>;
-/** Lecture du réglage chez Account : `{ productBar }`, rien d'autre. */
+/** Réglages chez Account : `{ productBar, moduleBar }`, rien d'autre. */
 export declare const ACCOUNT_PREFERENCES_URL = "https://account.hgdc.ch/api/preferences";
 /** Valeur reçue (Account, stockage) : un réglage connu, sinon `auto`. */
 export declare function parseProductBar(value: unknown): ProductBarPreference;
@@ -25,5 +26,11 @@ export declare function rememberProductBar(preference: ProductBarPreference): vo
 export declare function useProductBarPreference(): ProductBarPreference;
 /** Relit le réglage chez Account une fois par chargement de page ; une erreur garde la dernière valeur. */
 export declare function syncProductBar(fetchImpl?: typeof fetch): Promise<void>;
+/**
+ * Enregistre la barre des modules chez Account, pour la retrouver sur un autre appareil. Un échec n'est
+ * pas signalé : la barre reste réglée dans cette origine, et repart au prochain chargement.
+ * `keepalive` : un clic sur un autre module recharge la page, l'envoi doit y survivre.
+ */
+export declare function pushModuleBar(order: ReadonlyArray<ModuleWord>, fetchImpl?: typeof fetch): Promise<void>;
 /** À monter une fois (la coque le fait) : relecture du réglage après l'hydratation. */
 export declare function useProductBarSync(enabled?: boolean): void;

package/dist/product-bar.js

@@ -1,4 +1,6 @@
 import { useEffect, useSyncExternalStore } from "react";
+import { saveModuleBar, storedModuleBar } from "./module-bar-store.js";
+import { parseModuleBar } from "./modules.js";
 export const PRODUCT_BAR_PREFERENCES = ["auto", "always", "never"];
 /** Libellés du réglage, dans l'ordre d'affichage. */
 export const PRODUCT_BAR_LABELS = {
@@ -6,10 +8,12 @@ export const PRODUCT_BAR_LABELS = {
     always: "Toujours",
     never: "Jamais",
 };
-/** Lecture du réglage chez Account : `{ productBar }`, rien d'autre. */
+/** Réglages chez Account : `{ productBar, moduleBar }`, rien d'autre. */
 export const ACCOUNT_PREFERENCES_URL = "https://account.hgdc.ch/api/preferences";
 const STORAGE_KEY = "hgdc-product-bar";
 const EVENT = "hgdc-product-bar";
+/** Présent tant qu'Account n'a pas confirmé la barre des modules réglée ici : elle ne doit pas être écrasée. */
+const MODULE_BAR_UNSENT_KEY = "hgdc-shell:modules-unsent";
 /** Valeur reçue (Account, stockage) : un réglage connu, sinon `auto`. */
 export function parseProductBar(value) {
     return PRODUCT_BAR_PREFERENCES.includes(value) ? value : "auto";
@@ -62,13 +66,69 @@ export async function syncProductBar(fetchImpl = fetch) {
         if (!response.ok)
             return;
         const body = await response.json();
-        if (typeof body === "object" && body !== null && "productBar" in body)
+        if (typeof body !== "object" || body === null)
+            return;
+        if ("productBar" in body)
             rememberProductBar(parseProductBar(body.productBar));
+        if (moduleBarUnsent()) {
+            await pushModuleBar(storedModuleBar(), fetchImpl);
+            return;
+        }
+        // Absente : la personne n'a encore rien réglé, cette origine garde ce qu'elle a.
+        if ("moduleBar" in body) {
+            const order = parseModuleBar(body.moduleBar);
+            if (order)
+                saveModuleBar(order);
+        }
     }
     catch {
         // Account injoignable ou hors ligne : rien ne change.
     }
 }
+function moduleBarUnsent() {
+    try {
+        return window.localStorage.getItem(MODULE_BAR_UNSENT_KEY) !== null;
+    }
+    catch {
+        return false;
+    }
+}
+function markModuleBarUnsent(unsent) {
+    try {
+        if (unsent)
+            window.localStorage.setItem(MODULE_BAR_UNSENT_KEY, "1");
+        else
+            window.localStorage.removeItem(MODULE_BAR_UNSENT_KEY);
+    }
+    catch {
+        // Stockage bloqué : la prochaine relecture reprendra la valeur d'Account.
+    }
+}
+/**
+ * Enregistre la barre des modules chez Account, pour la retrouver sur un autre appareil. Un échec n'est
+ * pas signalé : la barre reste réglée dans cette origine, et repart au prochain chargement.
+ * `keepalive` : un clic sur un autre module recharge la page, l'envoi doit y survivre.
+ */
+export async function pushModuleBar(order, fetchImpl = fetch) {
+    // Account n'accepte que les consoles de `hgdc.ch` : en local, en test, rien à envoyer.
+    if (!window.location.hostname.endsWith(".hgdc.ch"))
+        return;
+    markModuleBarUnsent(true);
+    try {
+        const response = await fetchImpl(ACCOUNT_PREFERENCES_URL, {
+            method: "PUT",
+            credentials: "include",
+            keepalive: true,
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ moduleBar: order }),
+        });
+        if (response.ok)
+            markModuleBarUnsent(false);
+    }
+    catch {
+        // Account injoignable ou hors ligne.
+    }
+}
 let synced = false;
 /** À monter une fois (la coque le fait) : relecture du réglage après l'hydratation. */
 export function useProductBarSync(enabled = true) {

package/dist/products.js

@@ -106,7 +106,8 @@ export function isProductOpen(item) {
 export function productMenuEntries(options = {}) {
     const current = options.current?.toLowerCase();
     const { manager, others } = managerFirst(options.catalog ?? HGDC_PRODUCTS);
-    const head = manager && options.accountHref ? { ...manager, entryHref: options.accountHref } : manager;
+    const local = localManagerHref(options.accountHref);
+    const head = manager && local ? { ...manager, entryHref: local } : manager;
     return [...(head ? [head] : []), ...others.filter(isProductOpen)].map((item) => ({
         name: item.name,
         href: item.entryHref,
@@ -159,12 +160,20 @@ export function shellProductEntries(options = {}) {
     };
     const { manager, others } = managerFirst(options.catalog ?? HGDC_PRODUCTS);
     const head = manager ?? HGDC_MANAGER;
+    const local = localManagerHref(options.accountHref);
     return {
         products: others.filter(isProductOpen).map((item) => entry(item, item.entryHref, true)),
-        account: entry(head, options.accountHref ?? head.entryHref, options.accountHref === undefined),
+        account: entry(head, local ?? head.entryHref, local === undefined),
     };
 }
 /** Manager du catalogue, s'il y est, sorti des autres produits : il prend la place d'Account en tête. */
+/**
+ * L'adresse reçue, seulement pour un Manager local : les consoles passent aussi l'adresse d'Account en
+ * production, et `account.hgdc.ch` redirige vers ID, pas vers Manager.
+ */
+function localManagerHref(accountHref) {
+    return accountHref?.startsWith("https://account.hgdc.ch") ? undefined : accountHref;
+}
 function managerFirst(catalog) {
     const manager = catalog.find((item) => item.badge === "manager" && isProductOpen(item));
     return { manager, others: catalog.filter((item) => item !== manager) };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.65.0",
+  "version": "0.66.1",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",