@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/DashboardTour.tsx

@@ -0,0 +1,435 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { createPortal } from "react-dom";
+import { markDashboardTourCompleted } from "@/lib/dashboardTourStorage";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import { tbVioletTextSm } from "@/lib/translucentButtonClasses";
+
+/** Ancres CSS, dans l’ordre des étapes (parcours « spotlight » / coach marks). */
+const BASE_STEP_SELECTORS = [
+  "#dashboard-tour-anchor-intro",
+  "#dashboard-tour-anchor-column-hints",
+  "#dashboard-col-sessions",
+  "#dashboard-col-tasks",
+  "#dashboard-col-tags",
+  "#dashboard-tour-anchor-app-toolbar",
+  "#dashboard-tour-anchor-user-storage",
+] 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";
+
+/** 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 HOLE_PADDING_PX = 10;
+const TOOLTIP_MAX_W = 360;
+const VIEW_MARGIN = 12;
+const TOOLTIP_GAP = 12;
+
+type HoleRect = { top: number; left: number; width: number; height: number };
+
+type TipPlacement = "below" | "above" | "right" | "left";
+
+function tooltipIntersectsHole(
+  tip: { top: number; left: number; width: number; height: number },
+  hole: HoleRect
+): boolean {
+  return !(
+    tip.left + tip.width <= hole.left ||
+    hole.left + hole.width <= tip.left ||
+    tip.top + tip.height <= hole.top ||
+    hole.top + hole.height <= tip.top
+  );
+}
+
+function clampTipPosition(
+  top: number,
+  left: number,
+  ph: number,
+  wTip: number,
+  vw: number,
+  vh: number
+): { top: number; left: number } {
+  return {
+    top: Math.max(VIEW_MARGIN, Math.min(top, vh - ph - VIEW_MARGIN)),
+    left: Math.max(VIEW_MARGIN, Math.min(left, vw - wTip - VIEW_MARGIN)),
+  };
+}
+
+/** Calcule une position du panneau qui évite de recouvrir le trou (ex. colonne Sessions étroite). */
+function computeTooltipPosition(
+  hole: HoleRect,
+  vw: number,
+  vh: number,
+  wTip: number,
+  ph: number,
+  placementPriority: readonly TipPlacement[]
+): { top: number; left: number } {
+  const g = TOOLTIP_GAP;
+  const cx = hole.left + hole.width / 2 - wTip / 2;
+  const cy = hole.top + hole.height / 2 - ph / 2;
+
+  const variants: Record<TipPlacement, { top: number; left: number }> = {
+    below: { top: hole.top + hole.height + g, left: cx },
+    above: { top: hole.top - g - ph, left: cx },
+    right: { top: cy, left: hole.left + hole.width + g },
+    left: { top: cy, left: hole.left - g - wTip },
+  };
+
+  for (const key of placementPriority) {
+    const raw = variants[key];
+    const p = clampTipPosition(raw.top, raw.left, ph, wTip, vw, vh);
+    if (!tooltipIntersectsHole({ ...p, width: wTip, height: ph }, hole)) {
+      return p;
+    }
+  }
+
+  const fallback = clampTipPosition(variants.below.top, variants.below.left, ph, wTip, vw, vh);
+  return fallback;
+}
+
+function useEscapeDismiss(open: boolean, onDismiss: () => void) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onDismiss();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onDismiss]);
+}
+
+function expandRect(r: DOMRect, pad: number): HoleRect {
+  return {
+    top: r.top - pad,
+    left: r.left - pad,
+    width: r.width + 2 * pad,
+    height: r.height + 2 * pad,
+  };
+}
+
+export function DashboardTour({
+  open,
+  onOpenChange,
+  dt,
+  kronoFocusTourStep = false,
+  gitIdentityBannerTourStep = false,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dt: DashboardStrings;
+  /** Étape KronoFocus : ancre présente seulement si le minuteur est affiché dans l’en-tête. */
+  kronoFocusTourStep?: boolean;
+  /** Dernière étape : bannière « configurer l’identité Git » (ancre présente seulement si la bannière est affichée). */
+  gitIdentityBannerTourStep?: boolean;
+}) {
+  const [step, setStep] = useState(0);
+  const [hole, setHole] = useState<HoleRect | null>(null);
+  const [tipStyle, setTipStyle] = useState<CSSProperties>({});
+  const panelRef = useRef<HTMLDivElement>(null);
+  const primaryBtnRef = useRef<HTMLButtonElement>(null);
+
+  const selectors = useMemo((): string[] => {
+    const out: string[] = [...BASE_STEP_SELECTORS];
+    if (kronoFocusTourStep) {
+      out.push(KRONO_FOCUS_HEADER_TOUR_SELECTOR);
+    }
+    if (gitIdentityBannerTourStep) {
+      out.push(GIT_IDENTITY_BANNER_TOUR_SELECTOR);
+    }
+    return out;
+  }, [kronoFocusTourStep, gitIdentityBannerTourStep]);
+
+  const steps = useMemo(() => {
+    const base: { title: string; body: string }[] = [
+      { title: dt.tourStep1Title, body: dt.tourStep1Body },
+      { title: dt.tourStep2Title, body: dt.tourStep2Body },
+      { title: dt.tourStep3Title, body: dt.tourStep3Body },
+      { title: dt.tourStep4Title, body: dt.tourStep4Body },
+      { title: dt.tourStep5Title, body: dt.tourStep5Body },
+      { title: dt.tourStep6Title, body: dt.tourStep6Body },
+      { title: dt.tourStep7Title, body: dt.tourStep7Body },
+    ];
+    if (kronoFocusTourStep) {
+      base.push({ title: dt.tourStep8Title, body: dt.tourStep8Body });
+    }
+    if (gitIdentityBannerTourStep) {
+      base.push({ title: dt.tourStep9Title, body: dt.tourStep9Body });
+    }
+    return base;
+  }, [dt, kronoFocusTourStep, gitIdentityBannerTourStep]);
+
+  const total = steps.length;
+  const last = step >= total - 1;
+  const current = steps[step] ?? steps[0];
+  const selector = selectors[Math.min(step, selectors.length - 1)];
+
+  useEffect(() => {
+    if (open) {
+      setStep(0);
+    }
+  }, [open]);
+
+  const finish = useCallback(() => {
+    markDashboardTourCompleted();
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  useEscapeDismiss(open, finish);
+
+  const updateHoleFromDom = useCallback(() => {
+    if (!open) {
+      setHole(null);
+      return;
+    }
+    const el = document.querySelector(selector);
+    if (!el || !(el instanceof HTMLElement)) {
+      setHole(null);
+      return;
+    }
+    setHole(expandRect(el.getBoundingClientRect(), HOLE_PADDING_PX));
+  }, [open, selector]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setHole(null);
+      return;
+    }
+    const el = document.querySelector(selector);
+    if (el instanceof HTMLElement) {
+      el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "auto" });
+    }
+    updateHoleFromDom();
+    const raf = requestAnimationFrame(updateHoleFromDom);
+    window.addEventListener("scroll", updateHoleFromDom, true);
+    window.addEventListener("resize", updateHoleFromDom);
+    const observed = el instanceof HTMLElement ? el : null;
+    const ro =
+      observed && typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => updateHoleFromDom())
+        : null;
+    if (observed && ro) {
+      ro.observe(observed);
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", updateHoleFromDom, true);
+      window.removeEventListener("resize", updateHoleFromDom);
+      ro?.disconnect();
+    };
+  }, [open, selector, step, updateHoleFromDom]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    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) {
+      setTipStyle({
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: w,
+        maxWidth: "calc(100vw - 2rem)",
+        zIndex: 212,
+      });
+      return;
+    }
+
+    const place = (): void => {
+      const panel = panelRef.current;
+      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);
+      setTipStyle({
+        position: "fixed",
+        top,
+        left,
+        transform: undefined,
+        width: w,
+        maxWidth: undefined,
+        zIndex: 212,
+      });
+    };
+
+    place();
+    const raf = globalThis.requestAnimationFrame(place);
+    return () => globalThis.cancelAnimationFrame(raf);
+  }, [open, hole, step, current.title, current.body]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const t = window.setTimeout(() => primaryBtnRef.current?.focus(), 80);
+    return () => window.clearTimeout(t);
+  }, [open, step]);
+
+  if (!open) {
+    return null;
+  }
+
+  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";
+
+  const vw = typeof window !== "undefined" ? window.innerWidth : 0;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 0;
+
+  const fullBackdrop = !hole ? (
+    <div className="fixed inset-0 z-[210] bg-black/55" aria-hidden />
+  ) : null;
+
+  const dimPanels =
+    hole && vw > 0 && vh > 0
+      ? (() => {
+          const { top: t, left: l, width: w, height: h } = hole;
+          const topH = Math.max(0, t);
+          const bottomTop = t + h;
+          const bottomH = Math.max(0, vh - bottomTop);
+          const leftW = Math.max(0, l);
+          const rightLeft = l + w;
+          const rightW = Math.max(0, vw - rightLeft);
+          return (
+            <>
+              <div
+                className="fixed bg-black/55"
+                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 }}
+                aria-hidden
+              />
+              <div
+                className="fixed bg-black/55"
+                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 }}
+                aria-hidden
+              />
+              <div
+                className="pointer-events-none fixed rounded-xl border-2 border-violet-500 shadow-[0_0_0_1px_rgba(139,92,246,0.35)] dark:border-violet-400 dark:shadow-[0_0_0_1px_rgba(167,139,250,0.35)]"
+                style={{
+                  top: t,
+                  left: l,
+                  width: w,
+                  height: h,
+                  zIndex: 211,
+                }}
+                aria-hidden
+              />
+            </>
+          );
+        })()
+      : null;
+
+  const node = createPortal(
+    <>
+      {fullBackdrop}
+      {dimPanels}
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dashboard-tour-title"
+        aria-describedby="dashboard-tour-body"
+        className="rounded-xl border border-zinc-300 bg-white shadow-2xl dark:border-zinc-600 dark:bg-zinc-900"
+        style={tipStyle}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-zinc-200 px-4 py-3 dark:border-zinc-700">
+          <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">
+            {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>
+          {kronoFocusTourStep && step === BASE_STEP_SELECTORS.length ? (
+            <p className="mt-3 text-sm leading-relaxed">
+              <a
+                href={dt.tourStep8LearnMoreUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-violet-700 underline decoration-violet-400/80 underline-offset-2 hover:text-violet-900 dark:text-violet-300 dark:decoration-violet-500/60 dark:hover:text-violet-200"
+                aria-label={dt.tourStep8LearnMoreAriaLabel}
+              >
+                {dt.tourStep8LearnMoreLabel}
+              </a>
+            </p>
+          ) : null}
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-zinc-200 px-4 py-3 dark:border-zinc-700">
+          <div className="flex gap-1.5" role="presentation" aria-hidden>
+            {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"}`}
+              />
+            ))}
+          </div>
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            <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}
+            >
+              {dt.tourSkipBtn}
+            </button>
+            {step > 0 ? (
+              <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}>
+                {dt.tourDoneBtn}
+              </button>
+            ) : (
+              <button
+                ref={primaryBtnRef}
+                type="button"
+                className={tbVioletTextSm}
+                onClick={() => setStep((s) => Math.min(total - 1, s + 1))}
+              >
+                {dt.tourNextBtn}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+
+  return node;
+}

package/components/dashboard/DeferredDescriptionPopoverWrap.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Fragment, type ReactNode } from "react";
+import { useDescriptionPopoverAfterMs } from "./useDescriptionPopoverAfterMs";
+
+/**
+ * Texte ou pastille : définition en popover après 3 s (survol / focus), si {@link description} est non vide.
+ */
+export function DeferredDescriptionPopoverWrap({
+  description,
+  chipClassName,
+  children,
+}: {
+  description?: string | null;
+  chipClassName?: string;
+  children: ReactNode;
+}) {
+  const { hasDescription, triggerProps, popoverLayer, anchorWrapperProps } =
+    useDescriptionPopoverAfterMs(description);
+
+  const chipMerged = [chipClassName, hasDescription ? "cursor-help select-none" : ""]
+    .filter(Boolean)
+    .join(" ");
+
+  if (!hasDescription) {
+    return <span className={chipMerged}>{children}</span>;
+  }
+
+  return (
+    <Fragment>
+      <span className="relative inline-flex max-w-full" {...anchorWrapperProps}>
+        <span className={chipMerged} {...triggerProps}>
+          {children}
+        </span>
+      </span>
+      {popoverLayer}
+    </Fragment>
+  );
+}

package/components/dashboard/DeleteSessionModal.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import { tbModalDanger } from "@/lib/translucentButtonClasses";
+
+export function DeleteSessionModal({
+  open,
+  sessionLabel,
+  moveTargets,
+  t,
+  onClose,
+  onConfirm,
+}: {
+  open: boolean;
+  sessionLabel: string;
+  moveTargets: { id: string; label: string }[];
+  t: DashboardStrings;
+  onClose: () => void;
+  onConfirm: (opts: { moveTasksToSessionId?: string }) => void | Promise<void>;
+}) {
+  const [mode, setMode] = useState<"discard" | "move">("discard");
+  const [targetId, setTargetId] = useState("");
+
+  /** Stable key so parent re-renders (new array reference) don’t reset the select. */
+  const moveTargetIdsKey = [...moveTargets]
+    .map((x) => x.id)
+    .sort((a, b) => a.localeCompare(b))
+    .join("\0");
+
+  useEffect(() => {
+    if (!open) {
+      setMode("discard");
+      setTargetId("");
+      return;
+    }
+    setMode("discard");
+    setTargetId(moveTargets[0]?.id ?? "");
+    // `moveTargets` omitted on purpose: only `moveTargetIdsKey` (stable across reference churn) should reset the form.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, moveTargetIdsKey]);
+
+  if (!open) {
+    return null;
+  }
+
+  const canSubmit = mode === "discard" || (mode === "move" && targetId !== "");
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="del-session-title"
+    >
+      <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">
+        <h2 id="del-session-title" className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          {t.sessionDeleteTitle}
+        </h2>
+        <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+          <span className="font-medium text-zinc-800 dark:text-zinc-300">{sessionLabel}</span>
+          {" — "}
+          {t.sessionDeleteIntro}
+        </p>
+        <div className="mt-4 space-y-3">
+          <label className="flex cursor-pointer items-start gap-2 text-sm text-zinc-800 dark:text-zinc-200">
+            <input
+              type="radio"
+              name="delMode"
+              checked={mode === "discard"}
+              onChange={() => setMode("discard")}
+              className="mt-1"
+            />
+            <span>{t.sessionDeleteDiscardTasks}</span>
+          </label>
+          <label className="flex cursor-pointer items-start gap-2 text-sm text-zinc-800 dark:text-zinc-200">
+            <input
+              type="radio"
+              name="delMode"
+              checked={mode === "move"}
+              onChange={() => setMode("move")}
+              className="mt-1"
+            />
+            <span>{t.sessionDeleteMoveTasks}</span>
+          </label>
+          {mode === "move" ? (
+            <div className="ml-6">
+              <label className="block text-xs font-medium uppercase text-zinc-500 dark:text-zinc-500">
+                {t.sessionDeleteTargetLabel}
+              </label>
+              <select
+                className="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+                value={targetId}
+                onChange={(e) => setTargetId(e.target.value)}
+              >
+                <option value="">{t.sessionDeleteTargetPlaceholder}</option>
+                {moveTargets.map((x) => (
+                  <option key={x.id} value={x.id}>
+                    {x.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : null}
+        </div>
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-zinc-300 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            onClick={onClose}
+          >
+            {t.sessionDeleteCancelBtn}
+          </button>
+          <button
+            type="button"
+            disabled={!canSubmit}
+            className={tbModalDanger}
+            onClick={() =>
+              void onConfirm({
+                moveTasksToSessionId: mode === "move" ? targetId : undefined,
+              })
+            }
+          >
+            {t.sessionDeleteConfirmBtn}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/DescriptionTooltipPortaled.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { CSSProperties } from "react";
+
+/** Bulle de définition pour le hook `useDescriptionPopoverAfterMs` (contenu portail). */
+export function DescriptionTooltipPortaled({
+  domId,
+  style,
+  text,
+  onPointerEnter,
+  onPointerLeave,
+}: {
+  domId: string;
+  style: CSSProperties;
+  text: string;
+  onPointerEnter: () => void;
+  onPointerLeave: () => void;
+}) {
+  return (
+    <div
+      id={domId}
+      role="tooltip"
+      style={style}
+      className="pointer-events-auto whitespace-pre-line rounded-lg border border-zinc-600 bg-zinc-900 p-2.5 text-left text-[0.7rem] leading-snug text-zinc-200 shadow-lg dark:bg-zinc-950"
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+    >
+      {text}
+    </div>
+  );
+}