@hgdc/ui 0.64.0 → 0.65.0

package/dist/app-shell.d.ts

@@ -1,3 +1,4 @@
+import type { ModuleWord } from "./modules.ts";
 import { type ReactNode } from "react";
 import type { ProductView } from "./addresses.ts";
 import type { FamilyProduct } from "./family-svg.ts";
@@ -20,7 +21,7 @@ export type { AppShellAssistant } from "./shell-assistant.tsx";
  * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
  * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
  */
-export declare function AppShell({ product, organization, productRail: productRailOption, view: viewOption, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating, mainClassName, statusPage, }: {
+export declare function AppShell({ product, organization, productRail: productRailOption, view: viewOption, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating, mainClassName, statusPage, project, }: {
     /** Le produit affiché (`"host"`) : son nom au-dessus de ses onglets, « vous êtes ici » dans la liste des modules. */
     product: FamilyProduct;
     /**
@@ -101,4 +102,13 @@ export declare function AppShell({ product, organization, productRail: productRa
      * de test), ou `false` pour ne rien lire. L'accès « État du service » y mène.
      */
     statusPage?: string | false | undefined;
+    /**
+     * Le projet choisi en haut de page (`useShellProject`) : la liste des modules se limite aux siens, et
+     * « Réglages du projet » paraît en bas de la barre. Absent : tous les projets.
+     */
+    project?: {
+        name: string;
+        modules: ReadonlyArray<ModuleWord>;
+        settingsHref: string;
+    } | undefined;
 }): React.JSX.Element;

package/dist/app-shell.js

@@ -1,4 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Settings02Icon from "@hugeicons/core-free-icons/Settings02Icon";
+import { SIDEBAR_ITEM } from "./sidebar-nav.js";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Suspense, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
@@ -38,7 +40,7 @@ export { SidebarNavGroup } from "./sidebar-nav-group.js";
  * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
  * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
  */
-export function AppShell({ product, organization, productRail: productRailOption, view: viewOption, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating = false, mainClassName, statusPage, }) {
+export function AppShell({ product, organization, productRail: productRailOption, view: viewOption, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating = false, mainClassName, statusPage, project, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     const preference = useProductBarPreference();
     // Relu chez Account seulement par un produit passé aux deux vues (il donne `view`, ADR 0014).
@@ -100,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, _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: "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 menuLinks = productRail
         ? {
             documentation: links?.documentation,
@@ -108,6 +110,6 @@ export function AppShell({ product, organization, productRail: productRailOption
             otherView: viewOption === undefined ? undefined : otherViewMenuLink(product, viewOption),
         }
         : {};
-    const navigation = productRail ? (_jsx(ShellNavigation, { product: product, nav: nav, accountHref: accountHref, level: navLevel, onLevelChange: setNavLevel })) : (nav);
+    const navigation = productRail ? (_jsx(ShellNavigation, { product: product, nav: nav, accountHref: accountHref, level: navLevel, onLevelChange: setNavLevel, projectModules: project?.modules })) : (nav);
     return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ModuleBarShownContext, { value: productRail, children: _jsx(ShellMenuLinksContext, { value: menuLinks, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-module-bar": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:bg-shell", children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), _jsxs("aside", { ref: sidebarRef, "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [productRail ? (_jsx(ShellOrganizationHead, { organization: organization })) : (_jsxs(_Fragment, { children: [_jsx(SidebarHead, { product: product }), organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null] })), navigation, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: familyProductName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : null] }), _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, navigation, _jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)] empty:hidden", children: footer })] }) })] }) }) }) }) }) }));
 }

package/dist/module-bar.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import type { FamilyProduct } from "./family-svg.ts";
+import { type ModuleWord } from "./modules.ts";
 /** Ce que montre le milieu de la barre : les onglets du module ouvert, la liste des modules, ou son réglage. */
 export type ShellNavLevel = "tabs" | "modules" | "edit";
 /**
@@ -7,10 +8,12 @@ export type ShellNavLevel = "tabs" | "modules" | "edit";
  * ses onglets (`nav`) sous « Retour aux modules » ; un clic y affiche la liste sans rien recharger ;
  * un clic sur un autre module ouvre sa console, préchargée au survol sous la même origine.
  */
-export declare function ShellNavigation({ product, nav, accountHref, level, onLevelChange, }: {
+export declare function ShellNavigation({ product, nav, accountHref, level, onLevelChange, projectModules, }: {
     product: FamilyProduct;
     nav: ReactNode;
     accountHref?: string | undefined;
     level: ShellNavLevel;
     onLevelChange: (level: ShellNavLevel) => void;
+    /** Modules activés sur le projet choisi : la liste s'y limite. Absent : tous les projets. */
+    projectModules?: ReadonlyArray<ModuleWord> | undefined;
 }): React.JSX.Element;

package/dist/module-bar.js

@@ -80,11 +80,11 @@ function ModuleBarEditor({ order, onSave, onCancel, }) {
  * ses onglets (`nav`) sous « Retour aux modules » ; un clic y affiche la liste sans rien recharger ;
  * un clic sur un autre module ouvre sa console, préchargée au survol sous la même origine.
  */
-export function ShellNavigation({ product, nav, accountHref, level, onLevelChange, }) {
+export function ShellNavigation({ product, nav, accountHref, level, onLevelChange, projectModules, }) {
     const pageOrigin = usePageOrigin();
     const order = useModuleBar();
     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), onOpenCurrent: () => onLevelChange("tabs"), onCustomize: () => onLevelChange("edit") })) : level === "edit" ? (_jsx(ModuleBarEditor, { order: order, onSave: (next) => {
+    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);
                     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/shell-project.d.ts

@@ -0,0 +1,30 @@
+import type { ModuleWord } from "./modules.ts";
+export declare function saveShellProject(organizationId: string, projectId: string | null): void;
+/** L'identifiant du projet choisi ; `null` : tous les projets, et toujours au rendu serveur. */
+export declare function useShellProject(organizationId: string | null | undefined): string | null;
+/** Un projet commun, tel que le rend `listCoreProjects` de `@hgdc/auth/core`. */
+export type ShellCoreProject = {
+    id: string;
+    name: string;
+    modules: ReadonlyArray<string>;
+};
+/** Le projet choisi, s'il existe encore et si le module y est activé. Sinon : tous les projets. */
+export declare function activeCoreProject<Project extends ShellCoreProject>(projects: ReadonlyArray<Project> | undefined, activeId: string | null): Project | null;
+/** Ce que `project` d'`AppShell` attend pour le projet choisi. */
+export declare function shellProjectFrom(project: ShellCoreProject | null, settingsHref: string): {
+    name: string;
+    modules: ReadonlyArray<ModuleWord>;
+    settingsHref: string;
+} | undefined;
+/**
+ * Le sélecteur de projet de Basalte, dans `header` d'`AppShell`. Le choix vaut pour toutes les consoles.
+ * `onChange` : ce que le module fait en plus, par exemple ouvrir la page du projet. Rien à montrer
+ * tant que l'organisation n'a aucun projet.
+ */
+export declare function CoreProjectSwitcher({ organizationId, projects, createHref, onChange, }: {
+    organizationId: string;
+    projects: ReadonlyArray<ShellCoreProject> | undefined;
+    /** « Nouveau projet » : la page Projets de Manager. */
+    createHref?: string;
+    onChange?: (projectId: string | null) => void;
+}): React.JSX.Element | null;

package/dist/shell-project.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { ProjectSwitcher } from "./project-switcher.js";
+/**
+ * Le projet choisi en haut de page, le même dans toutes les consoles de Basalte : sous `app.hgdc.ch`,
+ * elles partagent l'origine, donc ce réglage. Une valeur par organisation : changer d'organisation
+ * ne garde pas le projet d'une autre. Propre à chaque personne et à chaque navigateur.
+ */
+const keyOf = (organizationId) => `hgdc-shell:project:${organizationId}`;
+const EVENT = "hgdc-shell-project";
+function subscribe(onChange) {
+    window.addEventListener(EVENT, onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+        window.removeEventListener(EVENT, onChange);
+        window.removeEventListener("storage", onChange);
+    };
+}
+export function saveShellProject(organizationId, projectId) {
+    try {
+        if (projectId === null)
+            window.localStorage.removeItem(keyOf(organizationId));
+        else
+            window.localStorage.setItem(keyOf(organizationId), projectId);
+    }
+    catch {
+        // Stockage bloqué : le choix vaut seulement pour cette page.
+    }
+    window.dispatchEvent(new Event(EVENT));
+}
+/** L'identifiant du projet choisi ; `null` : tous les projets, et toujours au rendu serveur. */
+export function useShellProject(organizationId) {
+    return useSyncExternalStore(subscribe, () => {
+        if (!organizationId)
+            return null;
+        try {
+            return window.localStorage.getItem(keyOf(organizationId));
+        }
+        catch {
+            return null;
+        }
+    }, () => null);
+}
+/** Le projet choisi, s'il existe encore et si le module y est activé. Sinon : tous les projets. */
+export function activeCoreProject(projects, activeId) {
+    return projects?.find((project) => project.id === activeId) ?? null;
+}
+/** Ce que `project` d'`AppShell` attend pour le projet choisi. */
+export function shellProjectFrom(project, settingsHref) {
+    if (!project)
+        return undefined;
+    return { name: project.name, modules: project.modules, settingsHref };
+}
+/**
+ * Le sélecteur de projet de Basalte, dans `header` d'`AppShell`. Le choix vaut pour toutes les consoles.
+ * `onChange` : ce que le module fait en plus, par exemple ouvrir la page du projet. Rien à montrer
+ * tant que l'organisation n'a aucun projet.
+ */
+export function CoreProjectSwitcher({ organizationId, projects, createHref, onChange, }) {
+    const activeId = useShellProject(organizationId);
+    if (projects !== undefined && projects.length === 0)
+        return null;
+    const known = activeCoreProject(projects, activeId);
+    const entries = projects?.map(({ id, name }) => ({ id, name }));
+    return (_jsx(ProjectSwitcher, { projects: entries, activeId: known?.id ?? null, ...(createHref ? { createHref } : {}), onSelect: (id) => {
+            saveShellProject(organizationId, id);
+            onChange?.(id);
+        } }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "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",