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

package/components/dashboard/TaskTimelineGanttModal.tsx

@@ -0,0 +1,601 @@
+"use client";
+
+import { useEffect, useId, useMemo, useState } from "react";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import { formatIsoInstantShort } from "@/lib/formatIsoShort";
+import {
+  formatDuration,
+  formatProjectDisplay,
+  formatWallDurationMs,
+  taskTitleForDisplay,
+} from "@/lib/taskParsing";
+import type { TaskTimelineGanttRow } from "@/lib/taskTimelineGantt";
+import {
+  DEFAULT_DASHBOARD_TIME_ZONE,
+  isValidIanaTimeZone,
+} from "@/lib/dashboardTimeZone";
+
+export type { TaskTimelineGanttRow } from "@/lib/taskTimelineGantt";
+
+const FILL_BG: readonly string[] = [
+  "bg-violet-500/85 dark:bg-violet-500/75",
+  "bg-emerald-500/85 dark:bg-emerald-500/75",
+  "bg-amber-500/85 dark:bg-amber-500/75",
+  "bg-sky-500/85 dark:bg-sky-500/75",
+  "bg-rose-500/85 dark:bg-rose-500/75",
+  "bg-fuchsia-500/80 dark:bg-fuchsia-500/70",
+];
+
+function fillClassForId(id: string): string {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) {
+    h = (h * 31 + id.charCodeAt(i)) >>> 0;
+  }
+  return FILL_BG[h % FILL_BG.length] ?? FILL_BG[0];
+}
+
+const GAP_STRIPES =
+  "bg-[repeating-linear-gradient(-45deg,theme(colors.zinc.200),theme(colors.zinc.200)_5px,theme(colors.zinc.100)_5px,theme(colors.zinc.100)_10px)] dark:bg-[repeating-linear-gradient(-45deg,theme(colors.zinc.700),theme(colors.zinc.700)_5px,theme(colors.zinc.800)_5px,theme(colors.zinc.800)_10px)]";
+
+const HOUR_MS = 60 * 60 * 1000;
+const THIRTY_MS = 30 * 60 * 1000;
+const PX_PER_MINUTE = 3;
+const MIN_TRACK_PX = 520;
+
+function useEscapeClose(open: boolean, onClose: () => void) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+}
+
+function clampPct(n: number): number {
+  if (!Number.isFinite(n)) {
+    return 0;
+  }
+  return Math.min(100, Math.max(0, n));
+}
+
+function formatAxisTickLabel(
+  ms: number,
+  tier: "major" | "half" | "minor",
+  lang: Lang,
+  displayTimeZone: string,
+  use24HourClock: boolean,
+): string {
+  const iso = new Date(ms).toISOString();
+  if (tier === "major") {
+    return (
+      formatIsoInstantShort(iso, lang, displayTimeZone, use24HourClock) ?? ""
+    );
+  }
+  const tz =
+    displayTimeZone.trim() && isValidIanaTimeZone(displayTimeZone.trim())
+      ? displayTimeZone.trim()
+      : DEFAULT_DASHBOARD_TIME_ZONE;
+  const opts: Intl.DateTimeFormatOptions = {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: !use24HourClock,
+  };
+  if (tz) {
+    opts.timeZone = tz;
+  }
+  return new Intl.DateTimeFormat(
+    lang === "fr" ? "fr-CA" : "en-CA",
+    opts,
+  ).format(new Date(ms));
+}
+
+type AxisTick = { ms: number; tier: "major" | "half" | "minor"; label: string };
+
+function buildAxisTicks(
+  windowStartMs: number,
+  windowEndMs: number,
+  spanMs: number,
+  lang: Lang,
+  displayTimeZone: string,
+  use24HourClock: boolean,
+): AxisTick[] {
+  if (!Number.isFinite(spanMs) || spanMs <= 0) {
+    return [];
+  }
+  const out: AxisTick[] = [];
+  const firstTickMs = Math.floor(windowStartMs / THIRTY_MS) * THIRTY_MS;
+  for (let t = firstTickMs; t <= windowEndMs + 1; t += THIRTY_MS) {
+    const tier: AxisTick["tier"] = t % HOUR_MS === 0 ? "major" : "half";
+    if (t > windowEndMs + 1) {
+      break;
+    }
+    const label = formatAxisTickLabel(
+      t,
+      tier,
+      lang,
+      displayTimeZone,
+      use24HourClock,
+    );
+    out.push({ ms: t, tier, label });
+  }
+  return out;
+}
+
+function barTooltipText(
+  r: TaskTimelineGanttRow,
+  effEndMs: number,
+  t: DashboardStrings,
+  lang: Lang,
+  displayTimeZone: string,
+  use24HourClock: boolean,
+): string {
+  const wallMs = Math.max(0, effEndMs - r.startMs);
+  const endIso = formatIsoInstantShort(
+    new Date(effEndMs).toISOString(),
+    lang,
+    displayTimeZone,
+    use24HourClock,
+  );
+  const timerMs =
+    r.timerDurationMs !== null && Number.isFinite(r.timerDurationMs)
+      ? r.timerDurationMs
+      : null;
+  const timerStr =
+    timerMs !== null
+      ? formatWallDurationMs(timerMs)
+      : t.tasksTimelineGanttTooltipTimerUnknown;
+  const wallStr = formatWallDurationMs(wallMs);
+  return [
+    `${t.tasksTimelineGanttTooltipStart}: ${r.startLabel}`,
+    `${t.tasksTimelineGanttTooltipEnd}: ${endIso ?? r.endLabel}`,
+    `${t.tasksTimelineGanttTooltipTimer}: ${timerStr}`,
+    `${t.tasksTimelineGanttTooltipWall}: ${wallStr}`,
+  ].join("\n");
+}
+
+export function TaskTimelineGanttModal({
+  open,
+  onClose,
+  lang,
+  displayTimeZone,
+  use24HourClock,
+  t,
+  title,
+  description,
+  rows,
+  sessionStartMs,
+  sessionEndMs,
+}: {
+  open: boolean;
+  onClose: () => void;
+  lang: Lang;
+  displayTimeZone: string;
+  use24HourClock: boolean;
+  t: DashboardStrings;
+  title?: string;
+  description?: string;
+  rows: TaskTimelineGanttRow[];
+  sessionStartMs: number | null;
+  sessionEndMs: number | null;
+}) {
+  const titleId = useId();
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEscapeClose(open, onClose);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setNowMs(Date.now());
+    const id = globalThis.setInterval(() => {
+      setNowMs(Date.now());
+    }, 1000);
+    return () => globalThis.clearInterval(id);
+  }, [open]);
+
+  const durationTotals = useMemo(() => {
+    let productive = 0;
+    let personal = 0;
+    for (const r of rows) {
+      const ms =
+        r.timerDurationMs !== null && Number.isFinite(r.timerDurationMs)
+          ? Math.max(0, r.timerDurationMs)
+          : 0;
+      if (ms <= 0) {
+        continue;
+      }
+      if (r.personalProject) {
+        personal += ms;
+      } else {
+        productive += ms;
+      }
+    }
+    return { productive, personal };
+  }, [rows]);
+
+  const { windowStartMs, windowEndMs, spanMs, trackWidthPx } = useMemo(() => {
+    if (rows.length === 0) {
+      return {
+        windowStartMs: 0,
+        windowEndMs: 0,
+        spanMs: 1,
+        trackWidthPx: MIN_TRACK_PX,
+      };
+    }
+
+    const taskStarts = rows.map((r) => r.startMs);
+    const minTaskStart = Math.min(...taskStarts);
+
+    let ws: number;
+    if (sessionStartMs !== null) {
+      ws = sessionStartMs;
+    } else {
+      ws = minTaskStart;
+    }
+
+    let we = nowMs;
+    if (sessionEndMs !== null) {
+      we = Math.max(we, sessionEndMs);
+    }
+    for (const r of rows) {
+      const effEnd = typeof r.endMs === "number" ? r.endMs : nowMs;
+      we = Math.max(we, effEnd);
+    }
+    we = Math.max(we, ws + 60_000);
+    const alignedWindowStart = Math.floor(ws / THIRTY_MS) * THIRTY_MS;
+    let alignedWindowEnd = Math.ceil(we / THIRTY_MS) * THIRTY_MS;
+    if (alignedWindowEnd <= alignedWindowStart) {
+      alignedWindowEnd = alignedWindowStart + THIRTY_MS;
+    }
+    const span = Math.max(alignedWindowEnd - alignedWindowStart, THIRTY_MS);
+    const spanMin = span / 60000;
+    const trackWidthPx = Math.max(MIN_TRACK_PX, spanMin * PX_PER_MINUTE);
+
+    return {
+      windowStartMs: alignedWindowStart,
+      windowEndMs: alignedWindowEnd,
+      spanMs: span,
+      trackWidthPx,
+    };
+  }, [rows, sessionStartMs, sessionEndMs, nowMs]);
+
+  const axisTicks = useMemo(
+    () =>
+      rows.length === 0
+        ? ([] as AxisTick[])
+        : buildAxisTicks(
+            windowStartMs,
+            windowEndMs,
+            spanMs,
+            lang,
+            displayTimeZone,
+            use24HourClock,
+          ),
+    [
+      rows.length,
+      windowStartMs,
+      windowEndMs,
+      spanMs,
+      lang,
+      displayTimeZone,
+      use24HourClock,
+    ],
+  );
+
+  const sessionOriginLabel = useMemo(
+    () =>
+      formatIsoInstantShort(
+        new Date(windowStartMs).toISOString(),
+        lang,
+        displayTimeZone,
+        use24HourClock,
+      ),
+    [windowStartMs, lang, displayTimeZone, use24HourClock],
+  );
+
+  const sessionEndLabel = useMemo(
+    () =>
+      formatIsoInstantShort(
+        new Date(windowEndMs).toISOString(),
+        lang,
+        displayTimeZone,
+        use24HourClock,
+      ),
+    [windowEndMs, lang, displayTimeZone, use24HourClock],
+  );
+
+  const axisBorderClass = (tier: AxisTick["tier"]) => {
+    if (tier === "major") {
+      return "border-l-[1.5px] border-zinc-400 dark:border-zinc-500";
+    }
+    if (tier === "half") {
+      return "border-l border-zinc-400/85 dark:border-zinc-500/70";
+    }
+    return "border-l border-zinc-300/75 dark:border-zinc-600/55";
+  };
+
+  const axisLabelClass = (tier: AxisTick["tier"]) => {
+    if (tier === "major") {
+      return "max-w-[10rem] truncate text-[0.62rem] font-medium leading-none text-zinc-600 dark:text-zinc-300";
+    }
+    if (tier === "half") {
+      return "max-w-[6rem] truncate text-[0.58rem] leading-none text-zinc-500 dark:text-zinc-400";
+    }
+    return "max-w-[5rem] truncate text-[0.54rem] leading-none text-zinc-400/95 dark:text-zinc-500";
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  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={titleId}
+      onClick={onClose}
+    >
+      <div
+        className="flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700/80">
+          <h2
+            id={titleId}
+            className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"
+          >
+            {title ?? t.tasksTimelineGanttTitle}
+          </h2>
+          <p className="mt-1.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+            {description ?? t.tasksTimelineGanttDescription}
+          </p>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-hidden px-5 py-4">
+          {rows.length === 0 ? (
+            <p className="text-sm text-zinc-500">{t.tasksTimelineEmpty}</p>
+          ) : (
+            <div className="flex max-h-[min(70vh,540px)] min-h-[240px] flex-col gap-0 overflow-hidden">
+              <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+                <div className="flex min-w-0">
+                  <div className="flex w-[min(13rem,32vw)] shrink-0 flex-col border-r border-zinc-200 bg-white pr-2 dark:border-zinc-700/80 dark:bg-zinc-900">
+                    <div className="h-10 shrink-0" aria-hidden />
+                    {rows.map((r) => (
+                      <div
+                        key={`label-${r.id}`}
+                        className="flex min-h-11 items-start gap-2 border-b border-zinc-100 py-1.5 dark:border-zinc-800/90"
+                      >
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-left text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                            {taskTitleForDisplay(r.name)}
+                          </p>
+                          {typeof r.project === "string" && r.project.trim() ? (
+                            <p className="mt-0.5 truncate text-left text-[0.65rem] text-zinc-500 dark:text-zinc-400">
+                              {formatProjectDisplay(r.project, {
+                                personal: r.personalProject === true,
+                              })}
+                            </p>
+                          ) : null}
+                        </div>
+                        {r.durationLabel ? (
+                          <span className="shrink-0 rounded-full border border-zinc-500/40 px-1.5 py-0.5 text-[0.6rem] tabular-nums text-zinc-500 dark:text-zinc-400">
+                            {r.durationLabel}
+                          </span>
+                        ) : null}
+                      </div>
+                    ))}
+                    <div className="h-10 shrink-0" aria-hidden />
+                  </div>
+
+                  <div className="min-w-0 flex-1 overflow-x-auto">
+                    <div
+                      className="flex flex-col"
+                      style={{ width: `${trackWidthPx}px`, minWidth: "100%" }}
+                    >
+                      <div className="sticky top-0 z-[1] h-10 shrink-0 border-b border-zinc-200 bg-white dark:border-zinc-700/80 dark:bg-zinc-900">
+                        <div className="relative h-full">
+                          {axisTicks.map((tick) => {
+                            const leftPct = clampPct(
+                              ((tick.ms - windowStartMs) / spanMs) * 100,
+                            );
+                            return (
+                              <div
+                                key={`top-${tick.ms}`}
+                                className={`absolute top-0 bottom-0 ${axisBorderClass(
+                                  tick.tier,
+                                )}`}
+                                style={{ left: `${leftPct}%` }}
+                              >
+                                <span
+                                  className={`absolute left-0.5 top-1 whitespace-nowrap ${axisLabelClass(
+                                    tick.tier,
+                                  )}`}
+                                >
+                                  {tick.label}
+                                </span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+
+                      {rows.map((r) => {
+                        const effEnd =
+                          typeof r.endMs === "number" ? r.endMs : nowMs;
+                        const clipStart = Math.max(r.startMs, windowStartMs);
+                        const clipEnd = Math.min(effEnd, windowEndMs);
+                        const fillClass = r.personalProject
+                          ? "bg-rose-500/85 dark:bg-rose-500/75"
+                          : fillClassForId(r.id);
+                        const left = clampPct(
+                          ((clipStart - windowStartMs) / spanMs) * 100,
+                        );
+                        const width = clampPct(
+                          ((clipEnd - clipStart) / spanMs) * 100,
+                        );
+                        const barW = Math.max(
+                          width,
+                          clipEnd > clipStart ? 0.2 : 0,
+                        );
+                        const right = left + barW;
+                        const tip =
+                          clipEnd > clipStart
+                            ? barTooltipText(
+                                r,
+                                effEnd,
+                                t,
+                                lang,
+                                displayTimeZone,
+                                use24HourClock,
+                              )
+                            : "";
+
+                        return (
+                          <div
+                            key={`row-${r.id}`}
+                            className="relative min-h-11 shrink-0 border-b border-zinc-100 dark:border-zinc-800/90"
+                          >
+                            <div
+                              className={`absolute inset-0 ${GAP_STRIPES}`}
+                              aria-hidden
+                            />
+                            <div
+                              className={`absolute top-0 bottom-0 ${fillClass} z-[4] cursor-default rounded-sm shadow-sm ring-1 ring-black/5 dark:ring-white/10`}
+                              style={{
+                                left: `${left}%`,
+                                width: `${barW}%`,
+                                minWidth:
+                                  clipEnd > clipStart && barW > 0 ? "4px" : 0,
+                                opacity: clipEnd > clipStart ? 0.92 : 0,
+                                pointerEvents:
+                                  clipEnd > clipStart ? "auto" : "none",
+                              }}
+                              title={tip || undefined}
+                              aria-hidden={clipEnd <= clipStart}
+                            />
+                            <div
+                              className={`pointer-events-none absolute inset-0 z-[2] ${GAP_STRIPES}`}
+                              style={{
+                                clipPath: `polygon(0% 0%, ${left}% 0%, ${left}% 100%, 0% 100%)`,
+                              }}
+                              aria-hidden
+                            />
+                            <div
+                              className={`pointer-events-none absolute inset-0 z-[2] ${GAP_STRIPES}`}
+                              style={{
+                                clipPath: `polygon(${right}% 0%, 100% 0%, 100% 100%, ${right}% 100%)`,
+                              }}
+                              aria-hidden
+                            />
+                          </div>
+                        );
+                      })}
+
+                      <div className="h-10 shrink-0 border-t border-zinc-200 bg-white dark:border-zinc-700/80 dark:bg-zinc-900">
+                        <div className="relative h-full">
+                          {axisTicks.map((tick) => {
+                            const leftPct = clampPct(
+                              ((tick.ms - windowStartMs) / spanMs) * 100,
+                            );
+                            return (
+                              <div
+                                key={`bottom-${tick.ms}`}
+                                className={`absolute top-0 bottom-0 ${axisBorderClass(
+                                  tick.tier,
+                                )}`}
+                                style={{ left: `${leftPct}%` }}
+                              >
+                                <span
+                                  className={`absolute bottom-1 left-0.5 whitespace-nowrap ${axisLabelClass(
+                                    tick.tier,
+                                  )}`}
+                                >
+                                  {tick.label}
+                                </span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 border-t border-zinc-200 pt-2 text-xs text-zinc-600 dark:border-zinc-700/80 dark:text-zinc-400">
+                <span>
+                  {t.tasksTimelineGanttSummaryProductive.replace(
+                    "{duration}",
+                    formatDuration(durationTotals.productive / 60000),
+                  )}
+                </span>
+                <span>
+                  {t.tasksTimelineGanttSummaryPersonal.replace(
+                    "{duration}",
+                    formatDuration(durationTotals.personal / 60000),
+                  )}
+                </span>
+              </div>
+
+              <div className="mt-2 flex flex-wrap justify-between gap-2 border-t border-zinc-200 pt-2 text-[0.65rem] text-zinc-500 dark:border-zinc-700/80 dark:text-zinc-500">
+                <span>
+                  <span className="font-semibold uppercase tracking-wide">
+                    {t.tasksTimelineGanttWindowStartLabel}
+                  </span>{" "}
+                  <span className="font-mono tabular-nums text-zinc-700 dark:text-zinc-300">
+                    {sessionOriginLabel}
+                  </span>
+                </span>
+                <span>
+                  <span className="font-semibold uppercase tracking-wide">
+                    {t.tasksTimelineGanttWindowEndLabel}
+                  </span>{" "}
+                  <span className="font-mono tabular-nums text-zinc-700 dark:text-zinc-300">
+                    {sessionEndLabel}
+                  </span>
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-zinc-200 px-5 py-4 dark:border-zinc-700/80">
+          <div className="flex flex-wrap items-center gap-3">
+            <span
+              className={`inline-block size-3 shrink-0 rounded-sm ${FILL_BG[0]}`}
+            />
+            <span className="text-xs text-zinc-600 dark:text-zinc-400">
+              {t.tasksTimelineGanttLegendProductive}
+            </span>
+            <span className="inline-block size-3 shrink-0 rounded-sm bg-rose-500/85 dark:bg-rose-500/75" />
+            <span className="text-xs text-zinc-600 dark:text-zinc-400">
+              {t.tasksTimelineGanttLegendPersonal}
+            </span>
+            <span
+              className={`inline-block h-3 w-8 shrink-0 rounded-sm ${GAP_STRIPES} ring-1 ring-zinc-300/80 dark:ring-zinc-600/80`}
+            />
+            <span className="text-xs text-zinc-600 dark:text-zinc-400">
+              {t.tasksTimelineGanttLegendGap}
+            </span>
+          </div>
+          <div className="mt-4 flex justify-end">
+            <button
+              type="button"
+              className="rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm text-zinc-800 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
+              onClick={onClose}
+            >
+              {t.tasksTimelineGanttCloseBtn}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/taskFieldStyles.ts

@@ -14,10 +14,11 @@ export const TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS =
   "h-10 min-h-10 min-w-0 flex-1 border-0 border-b border-zinc-400 bg-transparent px-0 text-xl leading-snug text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-zinc-600 focus:ring-0 rounded-none dark:border-zinc-600 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-zinc-200";
 
 /**
- * Déclencheur date-heure (tâche passée, popover thémée) : violet / zinc comme le reste du tableau de bord.
+ * Déclencheur date-heure : même ton que les libellés « début » / « fin » (zinc-500), sans encadré ;
+ * l’icône calendrier ouvre le popover (thème du calendrier inchangé).
  */
 export const TASK_PAST_DATETIME_TRIGGER_CLASS =
-  "h-9 w-auto min-w-[8.5rem] max-w-[13rem] shrink-0 rounded-lg border border-violet-500/45 bg-violet-500/10 px-2 py-1 font-mono text-xs tabular-nums text-zinc-800 shadow-none outline-none transition-[border-color,background-color,box-shadow] [color-scheme:light] focus-visible:border-violet-500/75 focus-visible:bg-violet-500/15 focus-visible:ring-2 focus-visible:ring-violet-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)] dark:border-violet-400/40 dark:bg-violet-600/18 dark:text-zinc-100 dark:[color-scheme:dark] dark:focus-visible:border-violet-400/60 dark:focus-visible:bg-violet-600/26 dark:focus-visible:ring-violet-400/25 dark:focus-visible:ring-offset-[var(--background)]";
+  "group/datetime-trigger inline-flex min-h-0 w-auto min-w-0 max-w-[13rem] shrink-0 cursor-pointer items-center gap-1 border-0 bg-transparent p-0 font-mono text-xs tabular-nums shadow-none outline-none transition-[opacity,color] [color-scheme:light] hover:opacity-90 focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-zinc-400/45 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)] dark:[color-scheme:dark] dark:focus-visible:ring-zinc-500/40 dark:focus-visible:ring-offset-[var(--background)]";
 
 /** Titre tâche en session (lecture) : volontairement plus petit que le champ « nouvelle tâche ». */
 export const TASK_ACTIVE_TITLE_READ_CLASS =
@@ -77,8 +78,23 @@ export const TAG_SUGGEST_CHIP_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_
 /** Suggestion de projet enregistré (`@nom`) : même rendu « éteint » que les tags tant que le projet n’est pas appliqué. */
 export const PROJECT_SUGGEST_CHIP_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-pointer select-none rounded border border-zinc-300 bg-zinc-100 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-zinc-700 hover:border-sky-500/50 hover:bg-sky-50 hover:text-sky-900 dark:border-zinc-600/50 dark:bg-zinc-800/40 dark:text-zinc-400 dark:hover:border-sky-700/50 dark:hover:bg-sky-950/35 dark:hover:text-sky-200/90`;
 
-/** Pastille projet appliquée (ligne sous le titre). */
-export const PROJECT_CHIP_APPLIED_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-sky-500/50 bg-sky-50 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-sky-900 dark:border-sky-500/55 dark:bg-sky-950/40 dark:text-sky-100`;
+/** Pastille projet travail appliquée (`@`) — teinte ciel. */
+export const PROJECT_CHIP_APPLIED_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-sky-500/50 bg-sky-50 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-sky-950 dark:border-sky-500/55 dark:bg-sky-950/40 dark:text-sky-100`;
+
+/** Pastille projet personnel appliquée (`!`) — teinte rose, distincte des projets `@`. */
+export const PROJECT_CHIP_APPLIED_PERSONAL_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-rose-500/50 bg-rose-50 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-rose-950 dark:border-rose-500/55 dark:bg-rose-950/40 dark:text-rose-100`;
+
+/** Raccourci projet personnel inactif (suggestions). */
+export const PROJECT_INLINE_SUGGEST_PERSONAL =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-medium text-zinc-600 transition-colors hover:text-rose-800 dark:text-zinc-400 dark:hover:text-rose-200";
+
+/** Raccourci projet personnel actif. */
+export const PROJECT_INLINE_SUGGEST_PERSONAL_SELECTED =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-semibold text-rose-900 underline decoration-rose-500/80 decoration-2 underline-offset-4 dark:text-rose-100";
+
+/** Projet personnel appliqué en style texte. */
+export const PROJECT_INLINE_APPLIED_PERSONAL =
+  "text-[0.9375rem] font-semibold text-rose-900 dark:text-rose-100";
 
 // --- Rendu « texte » (tâches : sans boîtes type pastille) ----------------------------------------