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

package/components/dashboard/AppShellRouteNav.tsx

@@ -1,8 +1,21 @@
 "use client";
 
 import Link from "next/link";
-import { BarChart3, BookOpen, FileText, LayoutDashboard, Settings } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  BarChart3,
+  BookOpen,
+  FileCode2,
+  FileText,
+  LayoutDashboard,
+  LayoutGrid,
+  Logs,
+  Pause,
+  Play,
+  Settings,
+} from "lucide-react";
 import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { PLANNED_BOUNDARY_ATTENTION_EVENT } from "@/lib/plannedBoundaryAttention";
 
 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";
@@ -10,17 +23,91 @@ const iconLinkClass =
 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 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)]";
+
+type GlobalPauseControlProps = Readonly<{
+  active: boolean;
+  label: string;
+  disabled?: boolean;
+  disabledTooltip?: string;
+  onPress: () => void;
+}>;
+
+function AppShellGlobalPauseButton({
+  control,
+}: Readonly<{ control: GlobalPauseControlProps }>) {
+  const gp = control;
+  const idlePause =
+    !gp.active &&
+    gp.disabled === true &&
+    typeof gp.disabledTooltip === "string" &&
+    gp.disabledTooltip.trim() !== "";
+  const aria =
+    idlePause && gp.disabledTooltip
+      ? `${gp.label}. ${gp.disabledTooltip}`
+      : gp.label;
+  return (
+    <button
+      type="button"
+      aria-disabled={idlePause}
+      tabIndex={idlePause ? -1 : 0}
+      onClick={() => {
+        if (idlePause) {
+          return;
+        }
+        gp.onPress();
+      }}
+      onKeyDown={(e) => {
+        if (
+          idlePause &&
+          (e.key === "Enter" || e.key === " " || e.code === "Space")
+        ) {
+          e.preventDefault();
+        }
+      }}
+      className={`${gp.active ? iconActiveClass : iconLinkClass}${
+        gp.active ? ` ${globalPauseResumeHighlightClass}` : ""
+      }${idlePause ? " cursor-not-allowed opacity-45" : ""}`}
+      title={idlePause ? gp.disabledTooltip : gp.label}
+      aria-label={aria}
+    >
+      {gp.active ? (
+        <Play size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+      ) : (
+        <Pause size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+      )}
+    </button>
+  );
+}
+
 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;
   /** 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 = "dashboard" | "reporting" | "settings" | "licenses" | "guide";
+export type AppShellRouteNavCurrent =
+  | "dashboard"
+  | "reporting"
+  | "settings"
+  | "logs"
+  | "licenses"
+  | "guide"
+  | "implementation";
 
 type Props = Readonly<{
   current: AppShellRouteNavCurrent;
@@ -30,6 +117,10 @@ type Props = Readonly<{
   className?: string;
   /** Identifiant de session du tableau de bord (`?session=`) à conserver sur les liens internes. */
   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({
@@ -38,52 +129,114 @@ export function AppShellRouteNav({
   navAriaLabel,
   className,
   dashboardSessionId,
+  globalPauseControl,
+  ganttControl,
+  reserveGlobalPauseSlot,
 }: Props) {
   const wrapClass = className ?? "flex flex-wrap items-center gap-1.5";
-  const dash = (path: string) => withDashboardSessionParam(path, dashboardSessionId);
+  const dash = (path: string) =>
+    withDashboardSessionParam(path, dashboardSessionId);
 
-  if (current === "dashboard") {
-    return (
-      <nav className={wrapClass} aria-label={navAriaLabel}>
-        <Link
-          href={dash("/guide")}
-          className={iconLinkClass}
-          title={labels.guide}
-          aria-label={labels.guide}
-        >
-          <BookOpen size={20} strokeWidth={2} className="shrink-0" aria-hidden />
-        </Link>
-        <Link
-          href={dash("/reporting")}
-          className={iconLinkClass}
-          title={labels.reporting}
-          aria-label={labels.reporting}
-        >
-          <BarChart3 size={20} strokeWidth={2} className="shrink-0" aria-hidden />
-        </Link>
-        <Link
-          href={dash("/settings")}
-          className={iconLinkClass}
-          title={labels.settings}
-          aria-label={labels.settings}
-        >
-          <Settings size={20} strokeWidth={2} className="shrink-0" aria-hidden />
-        </Link>
-      </nav>
+  const licensesTitle = labels.licenses ?? "Licenses";
+  const logsTitle = labels.logs ?? "Action logs";
+
+  const [docHidden, setDocHidden] = useState(false);
+  const [dashboardPulse, setDashboardPulse] = useState(false);
+
+  useEffect(() => {
+    const syncHidden = () =>
+      setDocHidden(
+        typeof document !== "undefined" &&
+          document.visibilityState === "hidden",
+      );
+    syncHidden();
+    document.addEventListener("visibilitychange", syncHidden);
+    return () => document.removeEventListener("visibilitychange", syncHidden);
+  }, []);
+
+  useEffect(() => {
+    const onAttention = () => setDashboardPulse(true);
+    globalThis.window.addEventListener(
+      PLANNED_BOUNDARY_ATTENTION_EVENT,
+      onAttention,
     );
-  }
+    return () =>
+      globalThis.window.removeEventListener(
+        PLANNED_BOUNDARY_ATTENTION_EVENT,
+        onAttention,
+      );
+  }, []);
 
-  const licensesTitle = labels.licenses ?? "Licenses";
+  useEffect(() => {
+    if (!dashboardPulse) {
+      return;
+    }
+    const t = globalThis.setTimeout(() => setDashboardPulse(false), 14000);
+    return () => globalThis.clearTimeout(t);
+  }, [dashboardPulse]);
+
+  const showDashboardPulse =
+    dashboardPulse &&
+    (current !== "dashboard" ||
+      (current === "dashboard" && docHidden === true));
+
+  const dashboardAttentionHint = labels.dashboardAttentionHint?.trim();
+  const dashboardPulseTitle =
+    showDashboardPulse && dashboardAttentionHint
+      ? `${labels.dashboard} — ${dashboardAttentionHint}`
+      : labels.dashboard;
+
+  const dashboardBaseNavClass =
+    current === "dashboard" ? iconActiveClass : iconLinkClass;
+  const dashboardNavClass = showDashboardPulse
+    ? `${dashboardBaseNavClass} ${dashboardPulseChromeClass}`
+    : dashboardBaseNavClass;
 
   return (
     <nav className={wrapClass} aria-label={navAriaLabel}>
-      <Link href={dash("/")} className={iconLinkClass} title={labels.dashboard} aria-label={labels.dashboard}>
-        <LayoutDashboard size={20} strokeWidth={2} className="shrink-0" aria-hidden />
-      </Link>
+      {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
+          className={iconActiveClass}
+          title={labels.reporting}
+          aria-label={labels.reporting}
+          aria-current="page"
+        >
+          <BarChart3
+            size={20}
+            strokeWidth={2}
+            className="shrink-0"
+            aria-hidden
+          />
         </span>
       ) : (
         <Link
@@ -92,13 +245,28 @@ export function AppShellRouteNav({
           title={labels.reporting}
           aria-label={labels.reporting}
         >
-          <BarChart3 size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+          <BarChart3
+            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
+          className={iconActiveClass}
+          title={labels.settings}
+          aria-label={labels.settings}
+          aria-current="page"
+        >
+          <Settings
+            size={20}
+            strokeWidth={2}
+            className="shrink-0"
+            aria-hidden
+          />
         </span>
       ) : (
         <Link
@@ -107,25 +275,132 @@ export function AppShellRouteNav({
           title={labels.settings}
           aria-label={labels.settings}
         >
-          <Settings size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+          <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 === "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
+          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
+          href={dash("/guide")}
+          className={iconLinkClass}
+          title={labels.guide}
+          aria-label={labels.guide}
+        >
+          <BookOpen
+            size={20}
+            strokeWidth={2}
+            className="shrink-0"
+            aria-hidden
+          />
         </Link>
       )}
 
+      {labels.implementation ? (
+        current === "implementation" ? (
+          <span
+            className={iconActiveClass}
+            title={labels.implementation}
+            aria-label={labels.implementation}
+            aria-current="page"
+          >
+            <FileCode2
+              size={20}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
+          </span>
+        ) : (
+          <Link
+            href={dash("/implementation")}
+            className={iconLinkClass}
+            title={labels.implementation}
+            aria-label={labels.implementation}
+          >
+            <FileCode2
+              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
+          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
+          />
+        </button>
+      ) : null}
+      {globalPauseControl ? (
+        <AppShellGlobalPauseButton control={globalPauseControl} />
+      ) : reserveGlobalPauseSlot ? (
+        <span className="inline-flex size-10 shrink-0" aria-hidden />
+      ) : null}
     </nav>
   );
 }

package/components/dashboard/DashboardPauseBackdrop.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+
+/**
+ * Voile plein écran (sous l’en-tête sticky du tableau de bord) lorsque la session live est en pause.
+ * L’en-tête reste au-dessus (z-50) pour permettre la reprise via la pause globale ou la navigation.
+ */
+export function DashboardPauseBackdrop({
+  variant,
+  dt,
+}: Readonly<{
+  variant: "global" | "session";
+  dt: DashboardStrings;
+}>) {
+  const title =
+    variant === "global"
+      ? dt.dashboardPauseBackdropTitleGlobal
+      : dt.dashboardPauseBackdropTitleSession;
+  const detail =
+    variant === "global"
+      ? dt.dashboardPauseBackdropDetailGlobal
+      : dt.dashboardPauseBackdropDetailSession;
+  const aria =
+    variant === "global"
+      ? dt.dashboardPauseBackdropAriaGlobal
+      : dt.dashboardPauseBackdropAriaSession;
+
+  return (
+    <div
+      className="fixed inset-0 z-40 flex items-center justify-center p-5 pt-20 sm:p-8 sm:pt-24"
+      role="status"
+      aria-live="polite"
+      aria-label={aria}
+    >
+      <div
+        className="absolute inset-0 bg-zinc-950/40 dark:bg-black/50"
+        aria-hidden
+      />
+      <div className="relative z-10 max-w-md rounded-2xl border border-amber-500/45 bg-[#120d0a]/95 px-5 py-5 text-center shadow-2xl backdrop-blur-[2px] dark:border-amber-600/40 sm:px-7 sm:py-6">
+        <p className="text-xs font-semibold uppercase tracking-wide text-amber-200/95">
+          {title}
+        </p>
+        <p className="mt-2.5 text-sm leading-snug text-amber-100/92">
+          {detail}
+        </p>
+      </div>
+    </div>
+  );
+}