@nightkatana/kronosys-app 1.0.0-beta.21 → 1.0.0-beta.22

package/components/dashboard/AppShellRouteNav.tsx

@@ -12,23 +12,27 @@ import {
   Logs,
   Pause,
   Play,
+  ScrollText,
   Settings,
 } from "lucide-react";
 import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 import { PLANNED_BOUNDARY_ATTENTION_EVENT } from "@/lib/plannedBoundaryAttention";
+import type { AppShellRouteNavLabelBundle } from "@/lib/reportingStrings";
+import {
+  appShellToolbarDashboardPulseChromeClass,
+  appShellToolbarGlobalPauseResumeHighlightClass,
+  appShellToolbarIconActiveClass,
+  appShellToolbarIconLinkClass,
+  appShellToolbarRibbonGroupClass,
+} from "@/lib/appShellToolbarChrome";
 
-const iconLinkClass =
-  "inline-flex size-10 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 transition hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800/80 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800";
-
-const iconActiveClass =
-  "inline-flex size-10 items-center justify-center rounded-lg border border-violet-400/70 bg-violet-100/90 text-violet-950 dark:border-violet-600/60 dark:bg-violet-950/40 dark:text-violet-100";
-
-const dashboardPulseChromeClass =
-  "ring-2 ring-amber-400/85 motion-safe:animate-pulse shadow-[0_0_14px_rgba(251,191,36,0.35)] dark:ring-amber-300/80";
-
-/** Anneau autour du bouton pause globale lorsque la reprise est disponible (pause active). */
+const iconLinkClass = appShellToolbarIconLinkClass;
+const iconActiveClass = appShellToolbarIconActiveClass;
+const dashboardPulseChromeClass = appShellToolbarDashboardPulseChromeClass;
+const ribbonGroupClass = appShellToolbarRibbonGroupClass;
 const globalPauseResumeHighlightClass =
-  "ring-2 ring-amber-500/90 ring-offset-2 ring-offset-zinc-100 shadow-[0_0_18px_rgba(245,158,11,0.42)] dark:ring-amber-400/85 dark:ring-offset-zinc-900 dark:shadow-[0_0_20px_rgba(251,191,36,0.28)]";
+  appShellToolbarGlobalPauseResumeHighlightClass;
+const iconButtonDisabledNativeClass = `${iconLinkClass} disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45`;
 
 type GlobalPauseControlProps = Readonly<{
   active: boolean;
@@ -85,19 +89,9 @@ function AppShellGlobalPauseButton({
   );
 }
 
-export type AppShellRouteNavLabels = {
-  dashboard: string;
-  reporting: string;
-  settings: string;
-  logs?: string;
-  /** Guide d’utilisation in-app. */
-  guide: string;
-  /** Détails d’implémentation (documentation technique maintenue). */
-  implementation?: string;
+export type AppShellRouteNavLabels = AppShellRouteNavLabelBundle & {
   /** Libellé infobulle / `aria-label` pour l’icône « licences » (page licences uniquement). */
   licenses?: string;
-  /** Infobulle lorsque l’icône tableau de bord pulse (rappel conflit minuteurs). */
-  dashboardAttentionHint?: string;
 };
 
 export type AppShellRouteNavCurrent =
@@ -107,7 +101,8 @@ export type AppShellRouteNavCurrent =
   | "logs"
   | "licenses"
   | "guide"
-  | "implementation";
+  | "implementation"
+  | "changelog";
 
 type Props = Readonly<{
   current: AppShellRouteNavCurrent;
@@ -119,8 +114,6 @@ type Props = Readonly<{
   dashboardSessionId?: string | null;
   globalPauseControl?: GlobalPauseControlProps;
   ganttControl?: { label: string; onPress: () => void };
-  /** Réserve l’emplacement du bouton pause globale (tableau de bord) pour éviter les sauts. */
-  reserveGlobalPauseSlot?: boolean;
 }>;
 
 export function AppShellRouteNav({
@@ -131,9 +124,9 @@ export function AppShellRouteNav({
   dashboardSessionId,
   globalPauseControl,
   ganttControl,
-  reserveGlobalPauseSlot,
 }: Props) {
-  const wrapClass = className ?? "flex flex-wrap items-center gap-1.5";
+  const wrapClass =
+    className ?? "flex shrink-0 flex-nowrap items-center gap-2.5";
   const dash = (path: string) =>
     withDashboardSessionParam(path, dashboardSessionId);
 
@@ -192,156 +185,138 @@ export function AppShellRouteNav({
     ? `${dashboardBaseNavClass} ${dashboardPulseChromeClass}`
     : dashboardBaseNavClass;
 
+  const implLabel = labels.implementation?.trim() ?? "";
+
   return (
     <nav className={wrapClass} aria-label={navAriaLabel}>
-      {current === "dashboard" ? (
-        <span
-          className={dashboardNavClass}
-          title={dashboardPulseTitle}
-          aria-label={dashboardPulseTitle}
-          aria-current="page"
-        >
-          <LayoutDashboard
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </span>
-      ) : (
-        <Link
-          href={dash("/")}
-          className={dashboardNavClass}
-          title={dashboardPulseTitle}
-          aria-label={dashboardPulseTitle}
-        >
-          <LayoutDashboard
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </Link>
-      )}
-
-      {current === "reporting" ? (
-        <span
-          className={iconActiveClass}
-          title={labels.reporting}
-          aria-label={labels.reporting}
-          aria-current="page"
-        >
-          <BarChart3
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </span>
-      ) : (
-        <Link
-          href={dash("/reporting")}
-          className={iconLinkClass}
-          title={labels.reporting}
-          aria-label={labels.reporting}
-        >
-          <BarChart3
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </Link>
-      )}
+      <div
+        role="group"
+        aria-label={labels.navGroupAppAria}
+        className={ribbonGroupClass}
+      >
+        {current === "dashboard" ? (
+          <span
+            className={dashboardNavClass}
+            title={dashboardPulseTitle}
+            aria-label={dashboardPulseTitle}
+            aria-current="page"
+          >
+            <LayoutDashboard
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </span>
+        ) : (
+          <Link
+            href={dash("/")}
+            className={dashboardNavClass}
+            title={dashboardPulseTitle}
+            aria-label={dashboardPulseTitle}
+          >
+            <LayoutDashboard
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </Link>
+        )}
 
-      {current === "settings" ? (
-        <span
-          className={iconActiveClass}
-          title={labels.settings}
-          aria-label={labels.settings}
-          aria-current="page"
-        >
-          <Settings
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </span>
-      ) : (
-        <Link
-          href={dash("/settings")}
-          className={iconLinkClass}
-          title={labels.settings}
-          aria-label={labels.settings}
-        >
-          <Settings
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </Link>
-      )}
-      {current === "logs" ? (
-        <span
-          className={iconActiveClass}
-          title={logsTitle}
-          aria-label={logsTitle}
-          aria-current="page"
-        >
-          <Logs size={20} strokeWidth={2} className="shrink-0" aria-hidden />
-        </span>
-      ) : (
-        <Link
-          href={dash("/logs")}
-          className={iconLinkClass}
-          title={logsTitle}
-          aria-label={logsTitle}
-        >
-          <Logs size={20} strokeWidth={2} className="shrink-0" aria-hidden />
-        </Link>
-      )}
+        {current === "reporting" ? (
+          <span
+            className={iconActiveClass}
+            title={labels.reporting}
+            aria-label={labels.reporting}
+            aria-current="page"
+          >
+            <BarChart3
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </span>
+        ) : (
+          <Link
+            href={dash("/reporting")}
+            className={iconLinkClass}
+            title={labels.reporting}
+            aria-label={labels.reporting}
+          >
+            <BarChart3
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </Link>
+        )}
 
-      {current === "guide" ? (
-        <span
-          className={iconActiveClass}
-          title={labels.guide}
-          aria-label={labels.guide}
-          aria-current="page"
-        >
-          <BookOpen
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </span>
-      ) : (
-        <Link
-          href={dash("/guide")}
-          className={iconLinkClass}
-          title={labels.guide}
-          aria-label={labels.guide}
-        >
-          <BookOpen
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </Link>
-      )}
+        {current === "settings" ? (
+          <span
+            className={iconActiveClass}
+            title={labels.settings}
+            aria-label={labels.settings}
+            aria-current="page"
+          >
+            <Settings
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </span>
+        ) : (
+          <Link
+            href={dash("/settings")}
+            className={iconLinkClass}
+            title={labels.settings}
+            aria-label={labels.settings}
+          >
+            <Settings
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </Link>
+        )}
+        {current === "logs" ? (
+          <span
+            className={iconActiveClass}
+            title={logsTitle}
+            aria-label={logsTitle}
+            aria-current="page"
+          >
+            <Logs size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+          </span>
+        ) : (
+          <Link
+            href={dash("/logs")}
+            className={iconLinkClass}
+            title={logsTitle}
+            aria-label={logsTitle}
+          >
+            <Logs size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+          </Link>
+        )}
+      </div>
 
-      {labels.implementation ? (
-        current === "implementation" ? (
+      <div
+        role="group"
+        aria-label={labels.navGroupDocsAria}
+        className={ribbonGroupClass}
+      >
+        {current === "guide" ? (
           <span
             className={iconActiveClass}
-            title={labels.implementation}
-            aria-label={labels.implementation}
+            title={labels.guide}
+            aria-label={labels.guide}
             aria-current="page"
           >
-            <FileCode2
+            <BookOpen
               size={20}
               strokeWidth={2}
               className="shrink-0"
@@ -350,57 +325,209 @@ export function AppShellRouteNav({
           </span>
         ) : (
           <Link
-            href={dash("/implementation")}
+            href={dash("/guide")}
             className={iconLinkClass}
-            title={labels.implementation}
-            aria-label={labels.implementation}
+            title={labels.guide}
+            aria-label={labels.guide}
           >
-            <FileCode2
+            <BookOpen
               size={20}
               strokeWidth={2}
               className="shrink-0"
               aria-hidden
             />
           </Link>
-        )
-      ) : null}
+        )}
 
-      {current === "licenses" ? (
-        <span
-          className={iconActiveClass}
-          title={licensesTitle}
-          aria-label={licensesTitle}
-          aria-current="page"
-        >
-          <FileText
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
-          />
-        </span>
-      ) : null}
-      {ganttControl ? (
-        <button
-          type="button"
-          onClick={ganttControl.onPress}
-          className={iconLinkClass}
-          title={ganttControl.label}
-          aria-label={ganttControl.label}
-        >
-          <LayoutGrid
-            size={20}
-            strokeWidth={2}
-            className="shrink-0"
-            aria-hidden
+        {(() => {
+          const changelogLabel = labels.changelog?.trim() ?? "";
+          const changelogDisabled = changelogLabel.length === 0;
+          if (changelogDisabled) {
+            return (
+              <button
+                type="button"
+                disabled
+                className={iconButtonDisabledNativeClass}
+                title={labels.navChangelogUnavailableTooltip}
+                aria-label={labels.navChangelogUnavailableTooltip}
+              >
+                <ScrollText
+                  size={20}
+                  strokeWidth={2}
+                  className="shrink-0"
+                  aria-hidden
+                />
+              </button>
+            );
+          }
+          return current === "changelog" ? (
+            <span
+              className={iconActiveClass}
+              title={changelogLabel}
+              aria-label={changelogLabel}
+              aria-current="page"
+            >
+              <ScrollText
+                size={20}
+                strokeWidth={2}
+                className="shrink-0"
+                aria-hidden
+              />
+            </span>
+          ) : (
+            <Link
+              href={dash("/changelog")}
+              className={iconLinkClass}
+              title={changelogLabel}
+              aria-label={changelogLabel}
+            >
+              <ScrollText
+                size={20}
+                strokeWidth={2}
+                className="shrink-0"
+                aria-hidden
+              />
+            </Link>
+          );
+        })()}
+
+        {implLabel ? (
+          current === "implementation" ? (
+            <span
+              className={iconActiveClass}
+              title={implLabel}
+              aria-label={implLabel}
+              aria-current="page"
+            >
+              <FileCode2
+                size={20}
+                strokeWidth={2}
+                className="shrink-0"
+                aria-hidden
+              />
+            </span>
+          ) : (
+            <Link
+              href={dash("/implementation")}
+              className={iconLinkClass}
+              title={implLabel}
+              aria-label={implLabel}
+            >
+              <FileCode2
+                size={20}
+                strokeWidth={2}
+                className="shrink-0"
+                aria-hidden
+              />
+            </Link>
+          )
+        ) : (
+          <button
+            type="button"
+            disabled
+            className={iconButtonDisabledNativeClass}
+            title={labels.navImplementationUnavailableTooltip}
+            aria-label={labels.navImplementationUnavailableTooltip}
+          >
+            <FileCode2
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </button>
+        )}
+      </div>
+
+      <div
+        role="group"
+        aria-label={labels.navGroupToolsAria}
+        className={ribbonGroupClass}
+      >
+        {ganttControl ? (
+          <button
+            type="button"
+            onClick={ganttControl.onPress}
+            className={iconLinkClass}
+            title={ganttControl.label}
+            aria-label={ganttControl.label}
+          >
+            <LayoutGrid
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </button>
+        ) : (
+          <button
+            type="button"
+            disabled
+            className={iconButtonDisabledNativeClass}
+            title={labels.navGanttDashboardOnlyTooltip}
+            aria-label={`${labels.navGanttButtonLabel}. ${labels.navGanttDashboardOnlyTooltip}`}
+          >
+            <LayoutGrid
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </button>
+        )}
+        {globalPauseControl ? (
+          <AppShellGlobalPauseButton control={globalPauseControl} />
+        ) : (
+          <AppShellGlobalPauseButton
+            control={{
+              active: false,
+              label: labels.navGlobalPauseButtonLabel,
+              disabled: true,
+              disabledTooltip:
+                current === "dashboard"
+                  ? labels.navGlobalPauseNoSessionContextTooltip
+                  : labels.navGlobalPauseDashboardOnlyTooltip,
+              onPress: () => {},
+            }}
           />
-        </button>
-      ) : null}
-      {globalPauseControl ? (
-        <AppShellGlobalPauseButton control={globalPauseControl} />
-      ) : reserveGlobalPauseSlot ? (
-        <span className="inline-flex size-10 shrink-0" aria-hidden />
-      ) : null}
+        )}
+      </div>
+
+      <div
+        role="group"
+        aria-label={labels.navGroupLegalAria}
+        className={ribbonGroupClass}
+      >
+        {current === "licenses" ? (
+          <span
+            className={iconActiveClass}
+            title={licensesTitle}
+            aria-label={licensesTitle}
+            aria-current="page"
+          >
+            <FileText
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </span>
+        ) : (
+          <Link
+            href={dash("/licenses")}
+            className={iconLinkClass}
+            title={licensesTitle}
+            aria-label={licensesTitle}
+          >
+            <FileText
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </Link>
+        )}
+      </div>
     </nav>
   );
 }