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

package/components/dashboard/DashboardSimpleModal.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { useEffect, useId, useState, type ReactNode } from "react";
+import { X } from "lucide-react";
 import { tbModalDanger, tbModalPrimary } from "@/lib/translucentButtonClasses";
 
+const MODAL_FADE_MS = 150;
+
 function useEscapeClose(open: boolean, onClose: () => void) {
   useEffect(() => {
     if (!open) {
@@ -18,6 +21,27 @@ function useEscapeClose(open: boolean, onClose: () => void) {
   }, [open, onClose]);
 }
 
+function useModalPresence(open: boolean) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [visible, setVisible] = useState(open);
+
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      const frame = globalThis.requestAnimationFrame(() => setVisible(true));
+      return () => globalThis.cancelAnimationFrame(frame);
+    }
+    setVisible(false);
+    const timeout = globalThis.setTimeout(
+      () => setShouldRender(false),
+      MODAL_FADE_MS,
+    );
+    return () => globalThis.clearTimeout(timeout);
+  }, [open]);
+
+  return { shouldRender, visible };
+}
+
 /** Message seul, bouton OK (remplace `alert()`). */
 export function DashboardAlertModal({
   open,
@@ -35,37 +59,47 @@ export function DashboardAlertModal({
   const titleId = useId();
   const messageId = useId();
   useEscapeClose(open, onClose);
+  const { shouldRender, visible } = useModalPresence(open);
 
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4 transition-opacity duration-150 ease-out motion-reduce:transition-none ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
       role="alertdialog"
       aria-modal="true"
       aria-labelledby={title ? titleId : messageId}
       aria-describedby={title ? messageId : undefined}
     >
-      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+      <div
+        className={`max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl transition-all duration-150 ease-out motion-reduce:transition-none dark:border-zinc-700 dark:bg-zinc-900 ${
+          visible
+            ? "translate-y-0 scale-100 opacity-100"
+            : "translate-y-1 scale-[0.985] opacity-0"
+        }`}
+      >
         {title ? (
-          <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          <h2
+            id={titleId}
+            className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"
+          >
             {title}
           </h2>
         ) : null}
         <p
           id={messageId}
-          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${title ? "mt-3" : ""}`}
+          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${
+            title ? "mt-3" : ""
+          }`}
         >
           {message}
         </p>
         <div className="mt-6 flex justify-end">
-          <button
-            type="button"
-            className={tbModalPrimary}
-            onClick={onClose}
-          >
+          <button type="button" className={tbModalPrimary} onClick={onClose}>
             {okLabel}
           </button>
         </div>
@@ -125,6 +159,7 @@ export function DashboardConfirmModal({
   const messageId = useId();
   const typeFieldId = useId();
   const [typeDraft, setTypeDraft] = useState("");
+  const { shouldRender, visible } = useModalPresence(open);
   useEscapeClose(open, () => {
     if (pending) {
       return;
@@ -138,30 +173,44 @@ export function DashboardConfirmModal({
     }
   }, [open]);
 
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
 
   const typedOk = !typeToConfirm || typeDraft === typeToConfirm.expected;
-  const confirmClass = confirmVariant === "danger" ? tbModalDanger : tbModalPrimary;
+  const confirmClass =
+    confirmVariant === "danger" ? tbModalDanger : tbModalPrimary;
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4 transition-opacity duration-150 ease-out motion-reduce:transition-none ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? titleId : messageId}
       aria-describedby={title ? messageId : undefined}
     >
-      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+      <div
+        className={`max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl transition-all duration-150 ease-out motion-reduce:transition-none dark:border-zinc-700 dark:bg-zinc-900 ${
+          visible
+            ? "translate-y-0 scale-100 opacity-100"
+            : "translate-y-1 scale-[0.985] opacity-0"
+        }`}
+      >
         {title ? (
-          <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          <h2
+            id={titleId}
+            className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"
+          >
             {title}
           </h2>
         ) : null}
         <p
           id={messageId}
-          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${title ? "mt-3" : ""}`}
+          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${
+            title ? "mt-3" : ""
+          }`}
         >
           {message}
         </p>
@@ -180,8 +229,13 @@ export function DashboardConfirmModal({
         {extra ? <div className="mt-4">{extra}</div> : null}
         {typeToConfirm ? (
           <div className="mt-4 space-y-2">
-            <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{typeToConfirm.instruction}</p>
-            <label htmlFor={typeFieldId} className="block text-xs font-semibold uppercase tracking-wide text-zinc-500">
+            <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+              {typeToConfirm.instruction}
+            </p>
+            <label
+              htmlFor={typeFieldId}
+              className="block text-xs font-semibold uppercase tracking-wide text-zinc-500"
+            >
               {typeToConfirm.label}
             </label>
             <input
@@ -265,30 +319,45 @@ export function DashboardTriActionModal({
   const titleId = useId();
   const messageId = useId();
   useEscapeClose(open, onDismiss);
+  const { shouldRender, visible } = useModalPresence(open);
 
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
 
-  const primaryClass = primaryVariant === "danger" ? tbModalDanger : tbModalPrimary;
+  const primaryClass =
+    primaryVariant === "danger" ? tbModalDanger : tbModalPrimary;
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4 transition-opacity duration-150 ease-out motion-reduce:transition-none ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? titleId : messageId}
       aria-describedby={title ? messageId : undefined}
     >
-      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+      <div
+        className={`max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl transition-all duration-150 ease-out motion-reduce:transition-none dark:border-zinc-700 dark:bg-zinc-900 ${
+          visible
+            ? "translate-y-0 scale-100 opacity-100"
+            : "translate-y-1 scale-[0.985] opacity-0"
+        }`}
+      >
         {title ? (
-          <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          <h2
+            id={titleId}
+            className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"
+          >
             {title}
           </h2>
         ) : null}
         <p
           id={messageId}
-          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${title ? "mt-3" : ""}`}
+          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${
+            title ? "mt-3" : ""
+          }`}
         >
           {message}
         </p>
@@ -327,7 +396,11 @@ export function DashboardTriActionModal({
           >
             {secondaryLabel}
           </button>
-          <button type="button" className={primaryClass} onClick={() => void onPrimary()}>
+          <button
+            type="button"
+            className={primaryClass}
+            onClick={() => void onPrimary()}
+          >
             {primaryLabel}
           </button>
         </div>
@@ -335,3 +408,73 @@ export function DashboardTriActionModal({
     </div>
   );
 }
+
+/** Contenu libre scrollable (formulaire, aide longue, carte session) — fermeture ×, Escape, clic fond. */
+export function DashboardPanelModal({
+  open,
+  title,
+  onClose,
+  closeAriaLabel,
+  children,
+}: {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  closeAriaLabel: string;
+  children: ReactNode;
+}) {
+  const titleId = useId();
+  useEscapeClose(open, onClose);
+  const { shouldRender, visible } = useModalPresence(open);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`fixed inset-0 z-[98] overflow-y-auto overscroll-y-contain bg-black/55 px-3 pt-[max(5.25rem,env(safe-area-inset-top,0px)+3.25rem)] pb-6 transition-opacity duration-150 ease-out motion-reduce:transition-none sm:px-4 sm:pb-8 sm:pt-28 ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div className="mx-auto w-full max-w-6xl pb-1">
+        <div
+          className={`flex max-h-[min(42dvh,22rem)] w-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl transition-all duration-150 ease-out motion-reduce:transition-none dark:border-zinc-700 dark:bg-zinc-900 sm:max-h-[min(46dvh,26rem)] md:max-h-[min(50dvh,28rem)] ${
+            visible
+              ? "translate-y-0 scale-100 opacity-100"
+              : "translate-y-1 scale-[0.99] opacity-0"
+          }`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="flex shrink-0 items-center justify-between gap-3 border-b border-zinc-200 px-3 py-2.5 dark:border-zinc-700 sm:px-4 sm:py-3">
+            <h2
+              id={titleId}
+              className="min-w-0 text-sm font-semibold tracking-tight text-zinc-900 sm:text-base dark:text-zinc-100"
+            >
+              {title}
+            </h2>
+            <button
+              type="button"
+              className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-transparent text-zinc-500 transition hover:border-zinc-300 hover:bg-zinc-100 hover:text-zinc-800 dark:hover:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+              aria-label={closeAriaLabel}
+              onClick={onClose}
+            >
+              <X size={20} strokeWidth={2.25} aria-hidden />
+            </button>
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/DashboardTour.tsx

@@ -10,6 +10,7 @@ import {
   type CSSProperties,
 } from "react";
 import { createPortal } from "react-dom";
+import { postKronosysAction } from "@/lib/kronosysApi";
 import { markDashboardTourCompleted } from "@/lib/dashboardTourStorage";
 import type { DashboardStrings } from "@/lib/dashboardCopy";
 import { tbVioletTextSm } from "@/lib/translucentButtonClasses";
@@ -26,10 +27,12 @@ const BASE_STEP_SELECTORS = [
 ] as const;
 
 /** Même id que le conteneur du minuteur KronoFocus dans l’en-tête (si affiché). */
-const KRONO_FOCUS_HEADER_TOUR_SELECTOR = "#dashboard-tour-anchor-kronoFocus-header";
+const KRONO_FOCUS_HEADER_TOUR_SELECTOR =
+  "#dashboard-tour-anchor-kronoFocus-header";
 
 /** Même id que le conteneur de la bannière identité Git sur la page tableau de bord. */
-const GIT_IDENTITY_BANNER_TOUR_SELECTOR = "#dashboard-tour-anchor-git-identity-banner";
+const GIT_IDENTITY_BANNER_TOUR_SELECTOR =
+  "#dashboard-tour-anchor-git-identity-banner";
 
 const HOLE_PADDING_PX = 10;
 const TOOLTIP_MAX_W = 360;
@@ -42,7 +45,7 @@ type TipPlacement = "below" | "above" | "right" | "left";
 
 function tooltipIntersectsHole(
   tip: { top: number; left: number; width: number; height: number },
-  hole: HoleRect
+  hole: HoleRect,
 ): boolean {
   return !(
     tip.left + tip.width <= hole.left ||
@@ -58,7 +61,7 @@ function clampTipPosition(
   ph: number,
   wTip: number,
   vw: number,
-  vh: number
+  vh: number,
 ): { top: number; left: number } {
   return {
     top: Math.max(VIEW_MARGIN, Math.min(top, vh - ph - VIEW_MARGIN)),
@@ -73,7 +76,7 @@ function computeTooltipPosition(
   vh: number,
   wTip: number,
   ph: number,
-  placementPriority: readonly TipPlacement[]
+  placementPriority: readonly TipPlacement[],
 ): { top: number; left: number } {
   const g = TOOLTIP_GAP;
   const cx = hole.left + hole.width / 2 - wTip / 2;
@@ -94,7 +97,14 @@ function computeTooltipPosition(
     }
   }
 
-  const fallback = clampTipPosition(variants.below.top, variants.below.left, ph, wTip, vw, vh);
+  const fallback = clampTipPosition(
+    variants.below.top,
+    variants.below.left,
+    ph,
+    wTip,
+    vw,
+    vh,
+  );
   return fallback;
 }
 
@@ -185,12 +195,22 @@ export function DashboardTour({
     }
   }, [open]);
 
-  const finish = useCallback(() => {
-    markDashboardTourCompleted();
-    onOpenChange(false);
-  }, [onOpenChange]);
+  const finish = useCallback(
+    (reason: "skip" | "done" | "escape") => {
+      void postKronosysAction({
+        type: "tourInteraction",
+        tour: "dashboard_spotlight",
+        action: reason,
+        stepIndex: step,
+        stepTotal: total,
+      }).catch(() => undefined);
+      markDashboardTourCompleted();
+      onOpenChange(false);
+    },
+    [onOpenChange, step, total],
+  );
 
-  useEscapeDismiss(open, finish);
+  useEscapeDismiss(open, () => finish("escape"));
 
   const updateHoleFromDom = useCallback(() => {
     if (!open) {
@@ -212,7 +232,11 @@ export function DashboardTour({
     }
     const el = document.querySelector(selector);
     if (el instanceof HTMLElement) {
-      el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "auto" });
+      el.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "auto",
+      });
     }
     updateHoleFromDom();
     const raf = requestAnimationFrame(updateHoleFromDom);
@@ -238,8 +262,14 @@ export function DashboardTour({
     if (!open) {
       return;
     }
-    const vw = typeof globalThis.window !== "undefined" ? globalThis.window.innerWidth : 1024;
-    const vh = typeof globalThis.window !== "undefined" ? globalThis.window.innerHeight : 768;
+    const vw =
+      typeof globalThis.window !== "undefined"
+        ? globalThis.window.innerWidth
+        : 1024;
+    const vh =
+      typeof globalThis.window !== "undefined"
+        ? globalThis.window.innerHeight
+        : 768;
     const w = Math.min(TOOLTIP_MAX_W, vw - 2 * VIEW_MARGIN);
 
     if (!hole) {
@@ -260,8 +290,17 @@ export function DashboardTour({
       const ph = panel?.getBoundingClientRect().height ?? 220;
       /** Étape « Sessions » : colonne étroite à gauche — placer le panneau à droite en priorité pour ne pas masquer le trou. */
       const placementPriority: readonly TipPlacement[] =
-        step === 2 ? ["right", "below", "above", "left"] : ["below", "above", "right", "left"];
-      const { top, left } = computeTooltipPosition(hole, vw, vh, w, ph, placementPriority);
+        step === 2
+          ? ["right", "below", "above", "left"]
+          : ["below", "above", "right", "left"];
+      const { top, left } = computeTooltipPosition(
+        hole,
+        vw,
+        vh,
+        w,
+        ph,
+        placementPriority,
+      );
       setTipStyle({
         position: "fixed",
         top,
@@ -290,7 +329,9 @@ export function DashboardTour({
     return null;
   }
 
-  const progressLabel = dt.tourProgressLabel.replace("{n}", String(step + 1)).replace("{total}", String(total));
+  const progressLabel = dt.tourProgressLabel
+    .replace("{n}", String(step + 1))
+    .replace("{total}", String(total));
 
   const secondaryBtn =
     "rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-800 transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700";
@@ -316,22 +357,46 @@ export function DashboardTour({
             <>
               <div
                 className="fixed bg-black/55"
-                style={{ top: 0, left: 0, width: vw, height: topH, zIndex: 210 }}
+                style={{
+                  top: 0,
+                  left: 0,
+                  width: vw,
+                  height: topH,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
                 className="fixed bg-black/55"
-                style={{ top: bottomTop, left: 0, width: vw, height: bottomH, zIndex: 210 }}
+                style={{
+                  top: bottomTop,
+                  left: 0,
+                  width: vw,
+                  height: bottomH,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
                 className="fixed bg-black/55"
-                style={{ top: t, left: 0, width: leftW, height: h, zIndex: 210 }}
+                style={{
+                  top: t,
+                  left: 0,
+                  width: leftW,
+                  height: h,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
                 className="fixed bg-black/55"
-                style={{ top: t, left: rightLeft, width: rightW, height: h, zIndex: 210 }}
+                style={{
+                  top: t,
+                  left: rightLeft,
+                  width: rightW,
+                  height: h,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
@@ -368,12 +433,20 @@ export function DashboardTour({
           <p className="text-xs font-medium uppercase tracking-wide text-violet-600 dark:text-violet-300">
             {progressLabel}
           </p>
-          <h2 id="dashboard-tour-title" className="mt-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
+          <h2
+            id="dashboard-tour-title"
+            className="mt-1 text-base font-semibold text-zinc-900 dark:text-zinc-100"
+          >
             {current.title}
           </h2>
         </div>
-        <div id="dashboard-tour-body" className="max-h-[min(42vh,18rem)] overflow-y-auto px-4 py-3">
-          <p className="whitespace-pre-wrap text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">{current.body}</p>
+        <div
+          id="dashboard-tour-body"
+          className="max-h-[min(42vh,18rem)] overflow-y-auto px-4 py-3"
+        >
+          <p className="whitespace-pre-wrap text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
+            {current.body}
+          </p>
           {kronoFocusTourStep && step === BASE_STEP_SELECTORS.length ? (
             <p className="mt-3 text-sm leading-relaxed">
               <a
@@ -393,7 +466,11 @@ export function DashboardTour({
             {steps.map((_, i) => (
               <span
                 key={i}
-                className={`h-2 w-2 rounded-full ${i === step ? "bg-violet-500 dark:bg-violet-400" : "bg-zinc-300 dark:bg-zinc-600"}`}
+                className={`h-2 w-2 rounded-full ${
+                  i === step
+                    ? "bg-violet-500 dark:bg-violet-400"
+                    : "bg-zinc-300 dark:bg-zinc-600"
+                }`}
               />
             ))}
           </div>
@@ -401,17 +478,26 @@ export function DashboardTour({
             <button
               type="button"
               className="text-sm text-zinc-500 underline-offset-2 hover:text-zinc-800 hover:underline dark:text-zinc-400 dark:hover:text-zinc-200"
-              onClick={finish}
+              onClick={() => finish("skip")}
             >
               {dt.tourSkipBtn}
             </button>
             {step > 0 ? (
-              <button type="button" className={secondaryBtn} onClick={() => setStep((s) => Math.max(0, s - 1))}>
+              <button
+                type="button"
+                className={secondaryBtn}
+                onClick={() => setStep((s) => Math.max(0, s - 1))}
+              >
                 {dt.tourBackBtn}
               </button>
             ) : null}
             {last ? (
-              <button ref={primaryBtnRef} type="button" className={tbVioletTextSm} onClick={finish}>
+              <button
+                ref={primaryBtnRef}
+                type="button"
+                className={tbVioletTextSm}
+                onClick={() => finish("done")}
+              >
                 {dt.tourDoneBtn}
               </button>
             ) : (
@@ -428,7 +514,7 @@ export function DashboardTour({
         </div>
       </div>
     </>,
-    document.body
+    document.body,
   );
 
   return node;