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

package/components/dashboard/LanguageMenu.tsx

@@ -3,6 +3,10 @@
 import { useEffect, useId, useRef, useState } from "react";
 import { Check, ChevronDown, Globe } from "lucide-react";
 import type { Lang } from "@/lib/dashboardCopy";
+import {
+  appShellToolbarRaisedLangTriggerClosedClass,
+  appShellToolbarRaisedLangTriggerOpenClass,
+} from "@/lib/appShellToolbarChrome";
 
 const LANGS: Lang[] = ["en", "fr"];
 
@@ -55,22 +59,29 @@ export function LanguageMenu({
     <div className="relative inline-flex shrink-0" ref={rootRef}>
       <button
         type="button"
-        className={`inline-flex h-10 min-h-10 shrink-0 items-center gap-2 rounded-lg border px-2.5 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45 sm:px-3 ${
+        className={
           open
-            ? "border-violet-500/50 bg-violet-50 text-zinc-900 shadow-[0_0_0_1px_rgba(139,92,246,0.12)] dark:bg-zinc-800/90 dark:text-zinc-100"
-            : "border-zinc-300 bg-white text-zinc-800 hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800/60"
-        }`}
+            ? appShellToolbarRaisedLangTriggerOpenClass
+            : appShellToolbarRaisedLangTriggerClosedClass
+        }
         aria-label={triggerAriaLabel}
         aria-haspopup="menu"
         aria-expanded={open ? "true" : "false"}
         aria-controls={menuId}
         onClick={() => setOpen((o) => !o)}
       >
-        <Globe size={18} className="shrink-0 text-violet-600 dark:text-violet-400/90" strokeWidth={1.75} aria-hidden />
+        <Globe
+          size={18}
+          className="shrink-0 text-violet-600 dark:text-violet-400/90"
+          strokeWidth={1.75}
+          aria-hidden
+        />
         <span className="max-w-36 truncate font-medium">{currentLabel}</span>
         <ChevronDown
           size={18}
-          className={`shrink-0 text-zinc-600 transition-transform duration-200 dark:text-zinc-500 ${open ? "rotate-180" : ""}`}
+          className={`shrink-0 text-zinc-600 transition-transform duration-200 dark:text-zinc-500 ${
+            open ? "rotate-180" : ""
+          }`}
           strokeWidth={2}
           aria-hidden
         />
@@ -108,7 +119,12 @@ export function LanguageMenu({
                 >
                   <span className="font-medium">{labelFor(code)}</span>
                   {selected ? (
-                    <Check size={16} className="shrink-0 text-violet-600 dark:text-violet-400" strokeWidth={2.5} aria-hidden />
+                    <Check
+                      size={16}
+                      className="shrink-0 text-violet-600 dark:text-violet-400"
+                      strokeWidth={2.5}
+                      aria-hidden
+                    />
                   ) : (
                     <span className="h-4 w-4 shrink-0" aria-hidden />
                   )}

package/components/dashboard/PageRefreshButton.tsx

@@ -2,6 +2,9 @@
 
 import { Loader2, RotateCw } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { appShellToolbarIconLinkClass } from "@/lib/appShellToolbarChrome";
+import { useAnchoredFloatingPortalStyle } from "@/components/dashboard/useAnchoredFloatingPortalStyle";
 
 export type PageRefreshInlineMessages = {
   loading: string;
@@ -30,7 +33,11 @@ export function PageRefreshButton({
 }) {
   const [loading, setLoading] = useState(false);
   const [bannerPhase, setBannerPhase] = useState<BannerPhase>("idle");
-  const clearBannerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const bannerRef = useRef<HTMLDivElement>(null);
+  const clearBannerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
 
   useEffect(
     () => () => {
@@ -38,7 +45,7 @@ export function PageRefreshButton({
         clearTimeout(clearBannerTimerRef.current);
       }
     },
-    []
+    [],
   );
 
   const scheduleBannerClear = () => {
@@ -92,18 +99,28 @@ export function PageRefreshButton({
     }
   }
 
-  const showBanner = Boolean(inlineMessages) && bannerPhase !== "idle" && bannerLabel;
+  const showBanner = Boolean(
+    inlineMessages && bannerPhase !== "idle" && bannerLabel,
+  );
 
   const bannerCls =
     bannerPhase === "loading" || bannerPhase === "success"
       ? "border border-emerald-400/60 bg-emerald-50 text-emerald-950 shadow-sm dark:border-emerald-500/45 dark:bg-emerald-950/75 dark:text-emerald-50"
       : "border border-amber-400/60 bg-amber-50 text-amber-950 shadow-sm dark:border-amber-600/40 dark:bg-amber-950/70 dark:text-amber-100";
 
+  const bannerStyle = useAnchoredFloatingPortalStyle(
+    showBanner,
+    buttonRef,
+    bannerRef,
+    { align: "end", maxWidthRem: 32 },
+  );
+
   return (
-    <div className="relative inline-flex flex-col items-end">
+    <>
       <button
+        ref={buttonRef}
         type="button"
-        className={`inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800 ${className}`}
+        className={`${appShellToolbarIconLinkClass} disabled:cursor-wait disabled:opacity-50 ${className}`}
         onClick={() => void handleRefresh()}
         disabled={loading}
         title={title}
@@ -111,20 +128,29 @@ export function PageRefreshButton({
         aria-busy={loading ? "true" : "false"}
       >
         {loading ? (
-          <Loader2 size={18} className="animate-spin text-violet-600 dark:text-violet-400" aria-hidden />
+          <Loader2
+            size={18}
+            className="animate-spin text-violet-600 dark:text-violet-400"
+            aria-hidden
+          />
         ) : (
           <RotateCw size={18} aria-hidden />
         )}
       </button>
-      {showBanner && (
-        <div
-          role="status"
-          aria-live="polite"
-          className={`pointer-events-none absolute right-0 top-full z-[70] mt-1.5 w-max max-w-[min(calc(100vw-2rem),32rem)] whitespace-normal rounded-md px-2.5 py-1.5 text-right text-[0.8125rem] font-medium leading-snug ${bannerCls}`}
-        >
-          {bannerLabel}
-        </div>
-      )}
-    </div>
+      {showBanner && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={bannerRef}
+              role="status"
+              aria-live="polite"
+              style={bannerStyle}
+              className={`pointer-events-none whitespace-normal rounded-md px-2.5 py-1.5 text-right text-[0.8125rem] font-medium leading-snug ${bannerCls}`}
+            >
+              {bannerLabel}
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
   );
 }

package/components/dashboard/ReportingTour.tsx

@@ -19,6 +19,7 @@ const FILTERS_SELECTOR = "#report-filters";
 const KPI_SELECTOR = "#report-summary-kpis";
 const CHART_SELECTOR = "#report-chart-sessions";
 const TAG_TIME_SELECTOR = "#report-tag-time";
+const PROJECT_SECTION_SELECTOR = "#report-projects";
 /** Conteneur principal (contenu + sommaire) : repère stable sur tous les écrans. */
 const TOC_LAYOUT_SELECTOR = "#reporting-tour-anchor-toc-layout";
 
@@ -57,11 +58,14 @@ function expandRect(r: DOMRect, pad: number): HoleRect {
 export function ReportingTour({
   open,
   onOpenChange,
+  onStepChange,
   dt,
   hasReportingChartData,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** When the spotlight step changes (tour open), parent can sync tabs / layout. */
+  onStepChange?: (stepIndex: number) => void;
   dt: DashboardStrings;
   /** Inclut les étapes graphiques et temps par étiquette (sinon elles sont omises). */
   hasReportingChartData: boolean;
@@ -82,9 +86,16 @@ export function ReportingTour({
     if (hasReportingChartData) {
       s.push(
         { title: dt.reportingTourStep4Title, body: dt.reportingTourStep4Body },
-        { title: dt.reportingTourStep5Title, body: dt.reportingTourStep5Body },
+        {
+          title: dt.reportingTourStep5aTitle,
+          body: dt.reportingTourStep5aBody,
+        },
+        {
+          title: dt.reportingTourStep5bTitle,
+          body: dt.reportingTourStep5bBody,
+        },
       );
-      sel.push(CHART_SELECTOR, TAG_TIME_SELECTOR);
+      sel.push(CHART_SELECTOR, TAG_TIME_SELECTOR, PROJECT_SECTION_SELECTOR);
     }
     s.push({
       title: dt.reportingTourStep6Title,
@@ -105,6 +116,13 @@ export function ReportingTour({
     }
   }, [open]);
 
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    onStepChange?.(step);
+  }, [open, step, onStepChange]);
+
   const finish = useCallback(
     (reason: "skip" | "done" | "escape") => {
       void postKronosysAction({

package/components/dashboard/SessionListPanel.tsx

@@ -158,10 +158,6 @@ export function SessionListPanel({
   forcePageScroll?: boolean;
 }) {
   const sessionRowExitDoneRef = useRef<(() => void) | undefined>(undefined);
-  useLayoutEffect(() => {
-    sessionRowExitDoneRef.current = onSessionRowExitAnimationDone;
-  }, [onSessionRowExitAnimationDone]);
-
   /** Double frame pour garantir une transition depuis l’état initial. */
   const [exitStyleSessionId, setExitStyleSessionId] = useState<string | null>(
     null,
@@ -174,6 +170,10 @@ export function SessionListPanel({
   >(null);
   const [listNowMs, setListNowMs] = useState(() => Date.now());
 
+  useLayoutEffect(() => {
+    sessionRowExitDoneRef.current = onSessionRowExitAnimationDone;
+  }, [onSessionRowExitAnimationDone]);
+
   useEffect(() => {
     if (!sessionRowExitAnimateId) {
       setExitStyleSessionId(null);

package/components/dashboard/ThemeToggle.tsx

@@ -2,6 +2,7 @@
 
 import { Moon, Sun } from "lucide-react";
 import { useKronosysTheme } from "@/components/ThemeProvider";
+import { appShellToolbarIconLinkClass } from "@/lib/appShellToolbarChrome";
 
 export function ThemeToggle({
   lang,
@@ -18,13 +19,13 @@ export function ThemeToggle({
         ? "Passer au thème clair"
         : "Passer au thème foncé"
       : isDark
-        ? "Switch to light theme"
-        : "Switch to dark theme";
+      ? "Switch to light theme"
+      : "Switch to dark theme";
 
   return (
     <button
       type="button"
-      className={`inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700 ${className}`}
+      className={`${appShellToolbarIconLinkClass} disabled:cursor-wait disabled:opacity-50 ${className}`}
       aria-label={aria}
       title={aria}
       onClick={() => toggleTheme()}

package/components/dashboard/useAnchoredFloatingPortalStyle.ts

@@ -5,7 +5,7 @@ import { useLayoutEffect, useState, type CSSProperties, type RefObject } from "r
 const VIEW_MARGIN = 10;
 const GAP_PX = 4;
 
-export type AnchoredFloatingAlign = "start" | "end";
+export type AnchoredFloatingAlign = "start" | "end" | "center";
 
 /**
  * Position `fixed` pour un panneau en portail (évite le clip des ancêtres `overflow-*`
@@ -34,7 +34,14 @@ export function useAnchoredFloatingPortalStyle(
       const vw = globalThis.innerWidth;
       const vh = globalThis.innerHeight;
       const w = Math.min(opts.maxWidthRem * 16, vw - 2 * VIEW_MARGIN);
-      let left = opts.align === "end" ? r.right - w : r.left;
+      let left: number;
+      if (opts.align === "end") {
+        left = r.right - w;
+      } else if (opts.align === "center") {
+        left = r.left + r.width / 2 - w / 2;
+      } else {
+        left = r.left;
+      }
       left = Math.max(VIEW_MARGIN, Math.min(left, vw - w - VIEW_MARGIN));
       let top = r.bottom + GAP_PX;
       const panel = panelRef.current;

package/components/dashboard/useKronoFocusLiveSeconds.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 /**
  * Affiche les secondes restantes du KronoFocus en phase « running » à partir de
@@ -8,6 +8,8 @@ import { useLayoutEffect, useState } from "react";
  * entre deux réponses API. Sans échéance (données héritées), on retombe sur `serverSecs`.
  *
  * `Date.now()` vit dans un effet pour respecter react-hooks/purity (pas d’horloge en rendu).
+ * `useEffect` (et non `useLayoutEffect`) évite une mise à jour d’état synchrone pendant la phase layout,
+ * source d’avertissements avec React 19 lorsque le parent / Suspense n’a pas fini de monter.
  */
 export function useKronoFocusLiveSeconds(
   serverSecs: number,
@@ -16,7 +18,7 @@ export function useKronoFocusLiveSeconds(
 ): number {
   const [fromDeadlineSecs, setFromDeadlineSecs] = useState<number | null>(null);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (status !== "running" || typeof deadlineMs !== "number" || !Number.isFinite(deadlineMs)) {
       setFromDeadlineSecs(null);
       return;

package/lib/appShellHeaderClasses.ts

@@ -18,8 +18,27 @@ export const appShellHeaderTitleMetaRowClassName =
   "mb-3 flex w-full flex-col gap-3 sm:mb-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6";
 
 /**
- * Barre d’actions à droite : même empilement que le tableau de bord (recherche / raccourcis,
- * navigation, thème, rafraîchissement, langue) pour éviter les décalages entre routes.
+ * Rangée d’outils : conteneur pleine largeur. Aucun défilement horizontal — si la fenêtre est plus
+ * étroite que le bloc regroupé, ses segments passent à la ligne (voir `*ClusterClassName`).
  */
 export const appShellHeaderToolbarClassName =
-  "flex min-h-10 shrink-0 flex-wrap items-center justify-end gap-1.5";
+  "flex w-full min-w-0 shrink-0";
+
+/**
+ * Bloc regroupé occupant toute la largeur disponible : horloge, KronoFocus, recherche, navigation,
+ * utilitaires. Le centrage horizontal est porté par le cluster lui-même afin que chaque rangée soit
+ * centrée, qu’il y en ait une seule ou plusieurs après basculement (`flex-wrap`).
+ */
+export const appShellHeaderToolbarClusterClassName =
+  "flex w-full min-w-0 flex-wrap items-center justify-center gap-2";
+
+/** Segment gauche du cluster (horloge, KronoFocus, commandes). */
+export const appShellHeaderToolbarLeadingClassName =
+  "flex min-w-0 shrink-0 flex-row flex-nowrap items-center gap-2";
+
+/** Navigation (icônes de routes) au sein du cluster. */
+export const appShellHeaderToolbarNavClassName = "relative shrink-0";
+
+/** Segment droit du cluster (thème, langue, etc.). */
+export const appShellHeaderToolbarTrailingClassName =
+  "flex shrink-0 flex-row flex-nowrap items-center gap-2";

package/lib/appShellToolbarChrome.ts

@@ -0,0 +1,112 @@
+/**
+ * Styles « ruban » de l’en-tête : alvéole (tray) et boutons en relief alignés sur
+ * {@link AppShellRouteNav}.
+ */
+
+/** Alvéole : groupe de contrôles dans un creux (`py` = espacement vertical intérieur). */
+export const appShellToolbarRibbonGroupClass =
+  "inline-flex shrink-0 flex-nowrap items-center gap-x-2 rounded-lg border border-zinc-300/60 bg-zinc-200/50 px-1.5 py-2 " +
+  "shadow-[inset_0_2px_6px_rgba(15,23,42,0.1),inset_0_1px_2px_rgba(15,23,42,0.06),inset_0_-1px_0_rgba(255,255,255,0.35)] " +
+  "dark:border-zinc-800 dark:bg-zinc-950/65 " +
+  "dark:shadow-[inset_0_2px_10px_rgba(0,0,0,0.65),inset_0_1px_0_rgba(255,255,255,0.05)]";
+
+/** Variante alvéole large (ex. KronoFocus en-tête) : même respiration verticale. */
+export const appShellToolbarRibbonTrayWideClass =
+  "inline-flex min-h-0 min-w-0 max-w-full shrink-0 flex-nowrap items-center gap-x-2 overflow-x-auto rounded-lg border border-zinc-300/60 bg-zinc-200/50 px-1.5 py-2 " +
+  "shadow-[inset_0_2px_6px_rgba(15,23,42,0.1),inset_0_1px_2px_rgba(15,23,42,0.06),inset_0_-1px_0_rgba(255,255,255,0.35)] " +
+  "dark:border-zinc-800 dark:bg-zinc-950/65 " +
+  "dark:shadow-[inset_0_2px_10px_rgba(0,0,0,0.65),inset_0_1px_0_rgba(255,255,255,0.05)]";
+
+/** Cellule relief h10 (libellé de phase, compteur) : même chrome que les boutons icône. */
+export const appShellToolbarInsetCellH10Class =
+  "inline-flex h-10 min-h-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300/90 bg-gradient-to-b from-white to-zinc-100 " +
+  "shadow-[0_1px_2px_rgba(15,23,42,0.12),0_2px_3px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.9)] " +
+  "dark:border-zinc-500/85 dark:from-zinc-600 dark:to-zinc-800 " +
+  "dark:shadow-[0_1px_2px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.14)]";
+
+/** Variante cliquable (compteur KronoFocus, etc.). */
+export const appShellToolbarInsetCellH10ButtonClass =
+  `${appShellToolbarInsetCellH10Class} ` +
+  "cursor-pointer outline-none transition hover:border-zinc-400 hover:from-zinc-50 hover:to-zinc-100 hover:shadow-[0_2px_4px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.95)] " +
+  "active:translate-y-px active:shadow-[inset_0_2px_3px_rgba(15,23,42,0.1)] " +
+  "dark:hover:border-zinc-400 dark:hover:from-zinc-600 dark:hover:to-zinc-800 dark:active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.45)] " +
+  "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500/55";
+
+export const appShellToolbarIconLinkClass =
+  "inline-flex size-10 items-center justify-center rounded-lg border border-zinc-300/90 bg-gradient-to-b from-white to-zinc-100 text-zinc-700 " +
+  "shadow-[0_1px_2px_rgba(15,23,42,0.12),0_2px_3px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.9)] " +
+  "transition hover:border-zinc-400 hover:from-zinc-50 hover:to-zinc-100 hover:shadow-[0_2px_4px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.95)] " +
+  "active:translate-y-px active:shadow-[inset_0_2px_3px_rgba(15,23,42,0.1)] " +
+  "dark:border-zinc-500/85 dark:from-zinc-600 dark:to-zinc-800 dark:text-zinc-100 " +
+  "dark:shadow-[0_1px_2px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.14)] " +
+  "dark:hover:border-zinc-400 dark:hover:from-zinc-600 dark:hover:to-zinc-800 " +
+  "dark:active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.45)] " +
+  "outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45";
+
+export const appShellToolbarIconActiveClass =
+  "inline-flex size-10 items-center justify-center rounded-lg border border-violet-400/85 " +
+  "bg-gradient-to-b from-violet-100 to-violet-200/95 text-violet-950 " +
+  "shadow-[0_1px_2px_rgba(91,33,182,0.18),0_2px_3px_rgba(91,33,182,0.08),inset_0_1px_0_rgba(255,255,255,0.65)] " +
+  "dark:border-violet-500/55 dark:from-violet-950/50 dark:to-violet-950/75 dark:text-violet-100 " +
+  "dark:shadow-[0_1px_3px_rgba(0,0,0,0.55),inset_0_1px_0_rgba(255,255,255,0.1)] " +
+  "outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45";
+
+/** Anneau autour du bouton pause globale lorsque la reprise est disponible (pause active). */
+export const appShellToolbarGlobalPauseResumeHighlightClass =
+  "ring-1 ring-amber-500/90 ring-offset-1 ring-offset-zinc-200 shadow-[0_0_12px_rgba(245,158,11,0.38)] dark:ring-amber-400/85 dark:ring-offset-zinc-950 dark:shadow-[0_0_16px_rgba(251,191,36,0.26)]";
+
+export const appShellToolbarDashboardPulseChromeClass =
+  "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";
+
+const raisedPadInteractive =
+  "rounded-lg border border-zinc-300/90 bg-gradient-to-b from-white to-zinc-100 text-zinc-700 " +
+  "shadow-[0_1px_2px_rgba(15,23,42,0.12),0_2px_3px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.9)] " +
+  "transition hover:border-zinc-400 hover:from-zinc-50 hover:to-zinc-100 hover:shadow-[0_2px_4px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.95)] " +
+  "active:translate-y-px active:shadow-[inset_0_2px_3px_rgba(15,23,42,0.1)] " +
+  "dark:border-zinc-500/85 dark:from-zinc-600 dark:to-zinc-800 dark:text-zinc-100 " +
+  "dark:shadow-[0_1px_2px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.14)] " +
+  "dark:hover:border-zinc-400 dark:hover:from-zinc-600 dark:hover:to-zinc-800 " +
+  "dark:active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.45)] " +
+  "outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45";
+
+/** Déclencheur large (recherche, horloge murale) : même relief que les icônes. */
+export const appShellToolbarRaisedWideTriggerClass =
+  "inline-flex h-10 shrink-0 items-center " + raisedPadInteractive;
+
+/** Menu langue fermé : relief + texte. */
+export const appShellToolbarRaisedLangTriggerClosedClass =
+  "inline-flex h-10 min-h-10 shrink-0 items-center gap-2 rounded-lg border border-zinc-300/90 bg-gradient-to-b from-white to-zinc-100 px-2.5 text-sm text-zinc-800 outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45 " +
+  "shadow-[0_1px_2px_rgba(15,23,42,0.12),0_2px_3px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.9)] " +
+  "transition hover:border-zinc-400 hover:from-zinc-50 hover:to-zinc-100 hover:shadow-[0_2px_4px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.95)] " +
+  "active:translate-y-px active:shadow-[inset_0_2px_3px_rgba(15,23,42,0.1)] " +
+  "dark:border-zinc-500/85 dark:from-zinc-600 dark:to-zinc-800 dark:text-zinc-200 " +
+  "dark:shadow-[0_1px_2px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.14)] " +
+  "dark:hover:border-zinc-400 dark:hover:from-zinc-600 dark:hover:to-zinc-800 " +
+  "dark:active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.45)] sm:px-3";
+
+/** Menu langue ouvert : état actif type ruban. */
+export const appShellToolbarRaisedLangTriggerOpenClass =
+  "inline-flex h-10 min-h-10 shrink-0 items-center gap-2 rounded-lg border border-violet-400/85 bg-gradient-to-b from-violet-100 to-violet-200/95 px-2.5 text-sm text-zinc-900 outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45 " +
+  "shadow-[0_1px_2px_rgba(91,33,182,0.18),0_2px_3px_rgba(91,33,182,0.08),inset_0_1px_0_rgba(255,255,255,0.65),0_0_0_1px_rgba(139,92,246,0.12)] " +
+  "dark:border-violet-500/55 dark:from-violet-950/50 dark:to-violet-950/75 dark:text-zinc-100 " +
+  "dark:shadow-[0_1px_3px_rgba(0,0,0,0.55),inset_0_1px_0_rgba(255,255,255,0.1)] sm:px-3";
+
+/** Contrôle carré 40×40 (même gabarit que la navigation). */
+export const appShellToolbarRaisedMdSquareClass =
+  "inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-zinc-300/90 bg-gradient-to-b from-white to-zinc-100 p-0 leading-none text-zinc-700 outline-none " +
+  "shadow-[0_1px_2px_rgba(15,23,42,0.12),0_2px_3px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.9)] " +
+  "transition hover:border-zinc-400 hover:from-zinc-50 hover:to-zinc-100 " +
+  "active:translate-y-px active:shadow-[inset_0_2px_3px_rgba(15,23,42,0.1)] " +
+  "dark:border-zinc-500/85 dark:from-zinc-600 dark:to-zinc-800 dark:text-zinc-100 " +
+  "dark:shadow-[0_1px_2px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.14)] " +
+  "dark:hover:border-zinc-400 dark:hover:from-zinc-600 dark:hover:to-zinc-800 " +
+  "dark:active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.45)] " +
+  "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500/55";
+
+export const appShellToolbarRaisedMdSquareNeutralTextClass =
+  appShellToolbarRaisedMdSquareClass +
+  " hover:text-zinc-900 dark:hover:text-zinc-50 disabled:pointer-events-none disabled:opacity-45 disabled:cursor-not-allowed";
+
+export const appShellToolbarRaisedMdSquareAccentTextClass =
+  appShellToolbarRaisedMdSquareClass +
+  " text-violet-800 hover:from-violet-50 hover:to-violet-100/90 dark:text-violet-200 dark:hover:from-violet-950/40 dark:hover:to-violet-900/50 disabled:pointer-events-none disabled:opacity-45 disabled:cursor-not-allowed";

package/lib/appShellToolbarDeferredIntents.ts

@@ -0,0 +1,112 @@
+const KEY_SCROLL = "kronosys_deferred_scroll_v1";
+const KEY_TODAY_GANTT = "kronosys_deferred_today_gantt_v1";
+const KEY_NEW_SESSION = "kronosys_deferred_new_session_v1";
+const KEY_SESSION_LIST_FOCUS = "kronosys_deferred_session_list_focus_v1";
+const KEY_TASK_FOCUS = "kronosys_deferred_task_focus_v1";
+const KEY_TEMPLATE_DRAFT = "kronosys_deferred_task_template_draft_v1";
+
+export type AppShellDeferredScrollTarget =
+  | "sessions"
+  | "tasks"
+  | "tags";
+
+function write(key: string, value: string) {
+  try {
+    globalThis.sessionStorage?.setItem(key, value);
+  } catch {
+    // ignore
+  }
+}
+
+function read(key: string): string | null {
+  try {
+    return globalThis.sessionStorage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function remove(key: string) {
+  try {
+    globalThis.sessionStorage?.removeItem(key);
+  } catch {
+    // ignore
+  }
+}
+
+export function stashAppShellDeferredScroll(target: AppShellDeferredScrollTarget) {
+  write(KEY_SCROLL, target);
+}
+
+export function consumeAppShellDeferredScroll():
+  | AppShellDeferredScrollTarget
+  | null {
+  const v = read(KEY_SCROLL);
+  remove(KEY_SCROLL);
+  if (v === "sessions" || v === "tasks" || v === "tags") {
+    return v;
+  }
+  return null;
+}
+
+export function stashAppShellDeferredTodayGantt() {
+  write(KEY_TODAY_GANTT, "1");
+}
+
+export function consumeAppShellDeferredTodayGantt(): boolean {
+  const v = read(KEY_TODAY_GANTT);
+  remove(KEY_TODAY_GANTT);
+  return v === "1";
+}
+
+export function stashAppShellDeferredNewSession() {
+  write(KEY_NEW_SESSION, "1");
+}
+
+export function consumeAppShellDeferredNewSession(): boolean {
+  const v = read(KEY_NEW_SESSION);
+  remove(KEY_NEW_SESSION);
+  return v === "1";
+}
+
+export function stashAppShellDeferredSessionListFocus(sessionId: string) {
+  const id = sessionId.trim();
+  if (id) {
+    write(KEY_SESSION_LIST_FOCUS, id);
+  }
+}
+
+export function consumeAppShellDeferredSessionListFocus(): string | null {
+  const v = read(KEY_SESSION_LIST_FOCUS);
+  remove(KEY_SESSION_LIST_FOCUS);
+  const t = v?.trim() ?? "";
+  return t !== "" ? t : null;
+}
+
+export function stashAppShellDeferredTaskFocus(taskId: string) {
+  const id = taskId.trim();
+  if (id) {
+    write(KEY_TASK_FOCUS, id);
+  }
+}
+
+export function consumeAppShellDeferredTaskFocus(): string | null {
+  const v = read(KEY_TASK_FOCUS);
+  remove(KEY_TASK_FOCUS);
+  const t = v?.trim() ?? "";
+  return t !== "" ? t : null;
+}
+
+export function stashAppShellDeferredTaskTemplateDraft(draftLine: string) {
+  const d = draftLine.trim();
+  if (d) {
+    write(KEY_TEMPLATE_DRAFT, d);
+  }
+}
+
+export function consumeAppShellDeferredTaskTemplateDraft(): string | null {
+  const v = read(KEY_TEMPLATE_DRAFT);
+  remove(KEY_TEMPLATE_DRAFT);
+  const t = v?.trim() ?? "";
+  return t !== "" ? t : null;
+}

package/lib/appShellToolbarSessionSlices.ts

@@ -0,0 +1,67 @@
+import type { SessionListEntry } from "@/components/dashboard/SessionListPanel";
+import type { KronosysUpdatePayload } from "@/lib/kronosysApi";
+import { mergeLiveSessionIntoHistory } from "@/lib/sessionListMerge";
+import {
+  resolveUrlSession,
+  type UrlSessionLiveShape,
+} from "@/lib/dashboardUrlSession";
+
+/**
+ * Découpe payload + `?session=` comme le tableau de bord (session inspectée vs live) pour la recherche
+ * et la navigation d’en-tête partagée.
+ */
+export function computeToolbarSessionSlices(
+  payload: KronosysUpdatePayload | null,
+  sessionUrlParam: string | null,
+): {
+  live: UrlSessionLiveShape | undefined;
+  history: SessionListEntry[];
+  historyArchived: SessionListEntry[];
+  sessionCurrent: Record<string, unknown> | undefined;
+} {
+  const live = payload?.current as UrlSessionLiveShape | undefined;
+  const historyArchived = (payload?.historyArchived ||
+    []) as SessionListEntry[];
+  const history = !payload
+    ? ([] as SessionListEntry[])
+    : mergeLiveSessionIntoHistory(
+        (payload.history || []) as SessionListEntry[],
+        live as never,
+      );
+
+  const inspectingId = payload?.inspectingSessionId as
+    | string
+    | null
+    | undefined;
+  const urlResolution = resolveUrlSession(
+    sessionUrlParam,
+    payload,
+    live,
+    history,
+    historyArchived,
+  );
+  const isDetachedUrlTab = urlResolution.mode === "ok";
+  const liveSid =
+    typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+  const urlSessionFocusId =
+    urlResolution.mode === "ok" ? urlResolution.id.trim() : "";
+  const columnArchiveId =
+    isDetachedUrlTab && urlSessionFocusId !== liveSid
+      ? urlSessionFocusId
+      : typeof inspectingId === "string" && inspectingId.trim() !== ""
+        ? inspectingId.trim()
+        : null;
+
+  const viewingSession = columnArchiveId
+    ? (history.find((s) => s.sessionId === columnArchiveId) ||
+        historyArchived.find((s) => s.sessionId === columnArchiveId)) as
+        | Record<string, unknown>
+        | undefined
+    : undefined;
+
+  const sessionCurrent = (viewingSession ?? live) as
+    | Record<string, unknown>
+    | undefined;
+
+  return { live, history, historyArchived, sessionCurrent };
+}