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

package/components/dashboard/SessionListPanel.tsx

@@ -1,15 +1,39 @@
 "use client";
 
-import { Archive, Circle, ExternalLink, Loader2, Square, Trash2, UploadCloud } from "lucide-react";
-import { sessionTaskCountNoun, type DashboardStrings, type Lang } from "@/lib/dashboardCopy";
-import { DEFAULT_DASHBOARD_TIME_ZONE, isValidIanaTimeZone } from "@/lib/dashboardTimeZone";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import {
+  Archive,
+  Circle,
+  ExternalLink,
+  FileText,
+  LayoutGrid,
+  Loader2,
+  Square,
+  Trash2,
+  UploadCloud,
+} from "lucide-react";
+import {
+  sessionTaskCountNoun,
+  type DashboardStrings,
+  type Lang,
+} from "@/lib/dashboardCopy";
+import {
+  DEFAULT_DASHBOARD_TIME_ZONE,
+  isValidIanaTimeZone,
+} from "@/lib/dashboardTimeZone";
 import { formatIsoInstantShort } from "@/lib/formatIsoShort";
-import { sessionWallClockMinutes, type LooseSession } from "@/lib/reportingAggregate";
+import {
+  sessionWallClockMinutes,
+  type LooseSession,
+} from "@/lib/reportingAggregate";
 import { formatDuration } from "@/lib/taskParsing";
+import { isOpenSessionDisplayPlanned } from "@/lib/temporalDisplayPlanned";
 
 export type SessionListEntry = {
   sessionId: string;
   sessionName?: string;
+  sessionNote?: string;
   savedAt?: string;
   /** Horodatage immuable de création de la session ; repli : `startAt` pour les anciennes données. */
   createdAt?: string | null;
@@ -33,12 +57,14 @@ function taskCount(s: SessionListEntry): number {
     Array.isArray(s.activeTasks) && s.activeTasks.length > 0
       ? s.activeTasks.length
       : s.activeTask
-        ? 1
-        : 0;
+      ? 1
+      : 0;
   return listed + nActive;
 }
 
-function sessionMongoPushState(sess: SessionListEntry): "never" | "synced" | "dirty" {
+function sessionMongoPushState(
+  sess: SessionListEntry,
+): "never" | "synced" | "dirty" {
   const saved = sess.savedAt ?? "";
   const lastPush = sess.mongoLastPushedSavedAt;
   if (!lastPush) {
@@ -80,6 +106,16 @@ export function SessionListPanel({
   onPushSessionToMongo,
   pushingSessionId = null,
   sessionDurationAlertThresholdMinutes,
+  onOpenSessionGantt,
+  sessionRowExitAnimateId = null,
+  onSessionRowExitAnimationDone,
+  /** Pendant la sortie « fin de session live », conserve le badge live sur l’instantané. */
+  liveChromeExitSessionId = null,
+  /** Pendant la sortie « fin de session », garde la ligne en tête (le tri global ne la ramène pas plus bas). */
+  sortPinSessionId = null,
+  /** Détails session (carte latérale) rendus sous la ligne plutôt qu’au-dessus de la liste. */
+  sessionDetailInline,
+  forcePageScroll = false,
 }: {
   sessions: SessionListEntry[];
   lang: Lang;
@@ -106,13 +142,113 @@ export function SessionListPanel({
   pushingSessionId?: string | null;
   /** Minutes murales : durée affichée en alerte si ≥ seuil (même réglage que le panneau session). */
   sessionDurationAlertThresholdMinutes?: number;
+  /** Ouvre la vue Gantt pour la session de cette ligne (historique, archives ou live). */
+  onOpenSessionGantt?: (sessionId: string) => void;
+  /** Ligne en cours d’animation de disparition (archivage ou fin de session live). */
+  sessionRowExitAnimateId?: string | null;
+  /** Appelé une fois l’animation terminée (libère l’instantané côté parent). */
+  onSessionRowExitAnimationDone?: () => void;
+  liveChromeExitSessionId?: string | null;
+  sortPinSessionId?: string | null;
+  sessionDetailInline?: {
+    sessionId: string;
+    content: ReactNode;
+  } | null;
+  /** Quand vrai, laisse la page scroller (pas de scroll interne forcé). */
+  forcePageScroll?: boolean;
 }) {
-  const sorted = sortSessions(sessions);
+  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,
+  );
+  const [detailVisibleSessionId, setDetailVisibleSessionId] = useState<
+    string | null
+  >(null);
+  const [detailEnterSessionId, setDetailEnterSessionId] = useState<
+    string | null
+  >(null);
+  const [listNowMs, setListNowMs] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!sessionRowExitAnimateId) {
+      setExitStyleSessionId(null);
+      return;
+    }
+
+    let raf1 = 0;
+    let raf2 = 0;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        setExitStyleSessionId(sessionRowExitAnimateId);
+      });
+    });
+
+    const exitMs = 320;
+    const doneTimer = globalThis.setTimeout(() => {
+      sessionRowExitDoneRef.current?.();
+      setExitStyleSessionId(null);
+    }, exitMs);
+
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      clearTimeout(doneTimer);
+    };
+  }, [sessionRowExitAnimateId]);
+
+  useEffect(() => {
+    const id = globalThis.setInterval(() => setListNowMs(Date.now()), 1000);
+    return () => globalThis.clearInterval(id);
+  }, []);
+
+  useEffect(() => {
+    const targetId =
+      typeof sessionDetailInline?.sessionId === "string" &&
+      sessionDetailInline.sessionId.trim() !== ""
+        ? sessionDetailInline.sessionId
+        : null;
+    if (!targetId) {
+      setDetailVisibleSessionId(null);
+      setDetailEnterSessionId(null);
+      return;
+    }
+    setDetailVisibleSessionId(targetId);
+    setDetailEnterSessionId(null);
+    let raf1 = 0;
+    let raf2 = 0;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setDetailEnterSessionId(targetId));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [sessionDetailInline?.sessionId]);
+
+  const sorted = useMemo(() => {
+    const pin = sortPinSessionId?.trim();
+    if (!pin) {
+      return sortSessions(sessions);
+    }
+    const pinned = sessions.find((s) => s.sessionId === pin);
+    const rest = sessions.filter((s) => s.sessionId !== pin);
+    if (!pinned) {
+      return sortSessions(sessions);
+    }
+    return [pinned, ...sortSessions(rest)];
+  }, [sessions, sortPinSessionId]);
   const archivesLabel =
-    archivedCount > 0 ? `${t.archivesModalTitle} (${archivedCount})` : t.archivesModalTitle;
+    archivedCount > 0
+      ? `${t.archivesModalTitle} (${archivedCount})`
+      : t.archivesModalTitle;
 
   return (
-    <aside className="flex h-min min-w-0 max-w-full max-h-[calc(100vh-8rem)] flex-col rounded-xl border border-zinc-200 bg-white/90 shadow-sm dark:border-zinc-800 dark:bg-zinc-800/50 dark:shadow-none xl:z-0">
+    <aside className="flex h-full min-h-0 min-w-0 max-w-full flex-1 flex-col rounded-xl border border-zinc-200 bg-white/90 shadow-sm dark:border-zinc-800 dark:bg-zinc-800/50 dark:shadow-none xl:z-0">
       <div className="flex flex-wrap items-center justify-end gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
         {onOpenArchives ? (
           <button
@@ -122,7 +258,12 @@ export function SessionListPanel({
             aria-label={archivesLabel}
             title={archivesLabel}
           >
-            <Archive size={18} strokeWidth={1.75} className="text-zinc-600 dark:text-zinc-300" aria-hidden />
+            <Archive
+              size={18}
+              strokeWidth={1.75}
+              className="text-zinc-600 dark:text-zinc-300"
+              aria-hidden
+            />
             {archivedCount > 0 ? (
               <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-violet-600 px-0.5 text-[0.6rem] font-semibold leading-none text-white">
                 {archivedCount > 99 ? "99+" : archivedCount}
@@ -134,29 +275,73 @@ export function SessionListPanel({
         )}
       </div>
 
-      <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-3 pr-4" aria-label={t.sessionsListAriaLabel}>
+      <nav
+        className={`min-h-0 flex-1 px-3 py-3 pr-4 ${
+          forcePageScroll
+            ? "overflow-visible"
+            : "overflow-y-auto overscroll-contain"
+        }`}
+        aria-label={t.sessionsListAriaLabel}
+      >
         <ul className="space-y-1.5">
           {sorted.map((sess) => {
             const id = sess.sessionId;
-            const isLive = id === liveSessionId;
+            const isLiveRow =
+              typeof liveSessionId === "string" && id === liveSessionId;
+            const showLiveChrome =
+              isLiveRow ||
+              (typeof liveChromeExitSessionId === "string" &&
+                liveChromeExitSessionId === id);
             const isSelected = id === selectedSessionId;
             const n = taskCount(sess);
+            const hasAssociatedTasks = n > 0;
             const tz =
-              displayTimeZone.trim() && isValidIanaTimeZone(displayTimeZone.trim())
+              displayTimeZone.trim() &&
+              isValidIanaTimeZone(displayTimeZone.trim())
                 ? displayTimeZone.trim()
                 : DEFAULT_DASHBOARD_TIME_ZONE;
-            const createdIso = (sess.createdAt?.trim() || sess.startAt?.trim() || sess.savedAt?.trim() || "").trim();
-            const createdLabel = formatIsoInstantShort(createdIso, lang, tz, use24HourClock);
-            const label = sess.sessionName?.trim() || (createdLabel ? `${id.slice(0, 8)} · ${createdLabel}` : id.slice(0, 8));
-            const startIso = (sess.startAt?.trim() || sess.savedAt?.trim() || "").trim();
-            const startLabel = formatIsoInstantShort(startIso, lang, tz, use24HourClock) ?? "—";
+            const createdIso = (
+              sess.createdAt?.trim() ||
+              sess.startAt?.trim() ||
+              sess.savedAt?.trim() ||
+              ""
+            ).trim();
+            const createdLabel = formatIsoInstantShort(
+              createdIso,
+              lang,
+              tz,
+              use24HourClock,
+            );
+            const label =
+              sess.sessionName?.trim() ||
+              (createdLabel
+                ? `${id.slice(0, 8)} · ${createdLabel}`
+                : id.slice(0, 8));
+            const startIso = (
+              sess.startAt?.trim() ||
+              sess.savedAt?.trim() ||
+              ""
+            ).trim();
+            const startLabel =
+              formatIsoInstantShort(startIso, lang, tz, use24HourClock) ?? "—";
             const hasEnd =
               typeof sess.endAt === "string" && sess.endAt.trim() !== "";
             const endLabel = hasEnd
-              ? formatIsoInstantShort(sess.endAt!.trim(), lang, tz, use24HourClock) ?? "—"
+              ? formatIsoInstantShort(
+                  sess.endAt!.trim(),
+                  lang,
+                  tz,
+                  use24HourClock,
+                ) ?? "—"
               : null;
 
             const taskNoun = sessionTaskCountNoun(n, t, lang);
+            const noteRaw =
+              typeof sess.sessionNote === "string"
+                ? sess.sessionNote.trim()
+                : "";
+            const notePreview = noteRaw.replaceAll(/\s+/g, " ");
+            const hasSessionNote = notePreview.length > 0;
             const wallMins = sessionWallClockMinutes(sess as LooseSession);
             const durationLabel = wallMins > 0 ? formatDuration(wallMins) : "—";
             const thresholdMin =
@@ -166,31 +351,62 @@ export function SessionListPanel({
                 : null;
             const durationAlert =
               thresholdMin !== null && wallMins > 0 && wallMins >= thresholdMin;
-            const thresholdHours = thresholdMin !== null ? Math.round(thresholdMin / 60) : 0;
+            const thresholdHours =
+              thresholdMin !== null ? Math.round(thresholdMin / 60) : 0;
             const durationTitle = durationAlert
-              ? t.sessionListWallDurationAlertTooltip.replace("{hours}", String(thresholdHours))
+              ? t.sessionListWallDurationAlertTooltip.replace(
+                  "{hours}",
+                  String(thresholdHours),
+                )
               : t.sessionListWallDurationTitle;
             const mongoState = sessionMongoPushState(sess);
             const mongoTitle =
               mongoState === "synced"
                 ? t.sessionMongoPushSyncedTitle
                 : mongoState === "dirty"
-                  ? t.sessionMongoPushDirtyTitle
-                  : t.sessionMongoPushNeverTitle;
+                ? t.sessionMongoPushDirtyTitle
+                : t.sessionMongoPushNeverTitle;
             const mongoIconClass =
               mongoState === "synced"
                 ? "text-emerald-400/95"
                 : mongoState === "dirty"
-                  ? "text-amber-400/95"
-                  : "text-zinc-500";
-
+                ? "text-amber-400/95"
+                : "text-zinc-500";
+            const livePlanned =
+              showLiveChrome &&
+              isOpenSessionDisplayPlanned(
+                { startAt: sess.startAt, endAt: sess.endAt },
+                listNowMs,
+              );
+            const rowHasExpandedDetail =
+              detailVisibleSessionId === id &&
+              sessionDetailInline?.sessionId === id;
+            const isExitAnimatingRow = exitStyleSessionId === id;
             return (
-              <li key={id} id={`kronosys-session-${id}`} className="scroll-mt-20">
+              <li
+                key={id}
+                id={`kronosys-session-${id}`}
+                className={`scroll-mt-20 overflow-hidden transition-[max-height,margin-top] duration-300 ease-out motion-reduce:transition-none ${
+                  isExitAnimatingRow
+                    ? "pointer-events-none max-h-0 -mt-1.5"
+                    : rowHasExpandedDetail
+                    ? "max-h-[160rem]"
+                    : "max-h-[28rem]"
+                }`}
+              >
                 <div
-                  className={`grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-1.5 gap-y-1 rounded-lg px-3.5 py-3 transition-colors ${
+                  className={`grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-1.5 gap-y-1 rounded-lg px-3.5 py-3 transition-[opacity,transform,box-shadow,background-color] duration-300 ease-out motion-reduce:transition-none ${
+                    isExitAnimatingRow
+                      ? "pointer-events-none opacity-0 translate-x-2 scale-[0.98]"
+                      : ""
+                  } ${
                     isSelected
                       ? "bg-violet-500/15 ring-1 ring-violet-500/45 dark:bg-violet-600/20 dark:ring-violet-500/50"
-                      : "hover:bg-zinc-100/90 dark:hover:bg-zinc-800/80"
+                      : livePlanned
+                      ? "bg-sky-50/80 hover:bg-sky-100/85 dark:bg-sky-950/25 dark:hover:bg-sky-950/40"
+                      : hasAssociatedTasks
+                      ? "bg-emerald-50/75 hover:bg-emerald-100/80 dark:bg-emerald-950/20 dark:hover:bg-emerald-950/35"
+                      : "bg-zinc-100/65 hover:bg-zinc-100/90 dark:bg-zinc-900/30 dark:hover:bg-zinc-800/80"
                   }`}
                 >
                   <button
@@ -199,28 +415,36 @@ export function SessionListPanel({
                     className="group col-start-1 row-start-1 row-span-2 flex min-w-0 flex-col gap-0.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-violet-500/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900 rounded-md -mx-1 px-1 -my-0.5 py-0.5"
                   >
                     <span className="flex min-w-0 items-center gap-2 text-sm font-medium text-zinc-800 group-hover:text-zinc-950 dark:text-zinc-100 dark:group-hover:text-white">
-                      {isLive && (
+                      {showLiveChrome ? (
                         <Circle
-                          className="shrink-0 fill-emerald-400 text-emerald-400"
+                          className={
+                            livePlanned
+                              ? "shrink-0 fill-sky-500 text-sky-500"
+                              : "shrink-0 fill-emerald-400 text-emerald-400"
+                          }
                           size={10}
                           aria-hidden
                         />
-                      )}
+                      ) : null}
                       <span className="truncate">{label}</span>
-                      {isLive && (
+                      {showLiveChrome && !livePlanned ? (
                         <span className="shrink-0 rounded bg-emerald-100 px-1.5 py-0 text-[0.6rem] font-bold uppercase tracking-wide text-emerald-900 ring-1 ring-emerald-600/20 dark:bg-emerald-900/50 dark:text-emerald-300 dark:ring-0">
                           {t.sessionLiveBadge}
                         </span>
-                      )}
+                      ) : null}
                     </span>
                     <span className="flex min-w-0 flex-col gap-0.5 text-[0.7rem] leading-snug text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-400">
                       <span className="min-w-0 break-words">
-                        <span className="text-zinc-600 dark:text-zinc-500">{t.sessionListStartedPrefix}</span>{" "}
+                        <span className="text-zinc-600 dark:text-zinc-500">
+                          {t.sessionListStartedPrefix}
+                        </span>{" "}
                         {startLabel}
                       </span>
                       {endLabel !== null ? (
                         <span className="min-w-0 break-words">
-                          <span className="text-zinc-600 dark:text-zinc-500">{t.sessionListEndedPrefix}</span>{" "}
+                          <span className="text-zinc-600 dark:text-zinc-500">
+                            {t.sessionListEndedPrefix}
+                          </span>{" "}
                           {endLabel}
                         </span>
                       ) : null}
@@ -228,16 +452,34 @@ export function SessionListPanel({
                         <span>
                           {n} {taskNoun}
                         </span>
-                        <span className="text-zinc-400 dark:text-zinc-600"> · </span>
+                        <span className="text-zinc-400 dark:text-zinc-600">
+                          {" "}
+                          ·{" "}
+                        </span>
                         <span
                           className={`inline tabular-nums ${
-                            durationAlert ? "kronosys-session-duration-alert font-semibold" : ""
+                            durationAlert
+                              ? "kronosys-session-duration-alert font-semibold"
+                              : ""
                           }`}
                           title={durationTitle}
                         >
                           {durationLabel}
                         </span>
                       </span>
+                      {hasSessionNote ? (
+                        <span
+                          className="mt-0.5 inline-flex min-w-0 items-center gap-1 text-zinc-500 dark:text-zinc-400"
+                          title={notePreview}
+                        >
+                          <FileText
+                            size={12}
+                            className="shrink-0"
+                            aria-hidden
+                          />
+                          <span className="truncate">{notePreview}</span>
+                        </span>
+                      ) : null}
                     </span>
                   </button>
                   <div className="col-start-2 row-start-2 flex shrink-0 items-center gap-0.5 self-center">
@@ -260,11 +502,14 @@ export function SessionListPanel({
                             aria-label={t.sessionMongoPushBusy}
                           />
                         ) : (
-                          <UploadCloud size={sessionRowActionIconSize} aria-hidden />
+                          <UploadCloud
+                            size={sessionRowActionIconSize}
+                            aria-hidden
+                          />
                         )}
                       </button>
                     ) : null}
-                    {isLive && onEndLiveSession ? (
+                    {isLiveRow && onEndLiveSession ? (
                       <button
                         type="button"
                         className={`${sessionRowActionBase} text-zinc-500 hover:text-rose-600 dark:hover:text-rose-300`}
@@ -275,6 +520,23 @@ export function SessionListPanel({
                         <Square size={sessionRowActionIconSize} aria-hidden />
                       </button>
                     ) : null}
+                    {onOpenSessionGantt ? (
+                      <button
+                        type="button"
+                        className={`${sessionRowActionBase} text-zinc-500 hover:text-violet-700 dark:hover:text-violet-300`}
+                        title={t.tasksTimelineGanttOpenBtn}
+                        aria-label={t.sessionListOpenGanttAria}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onOpenSessionGantt(id);
+                        }}
+                      >
+                        <LayoutGrid
+                          size={sessionRowActionIconSize}
+                          aria-hidden
+                        />
+                      </button>
+                    ) : null}
                     {onOpenSessionInNewTab ? (
                       <button
                         type="button"
@@ -283,10 +545,15 @@ export function SessionListPanel({
                         aria-label={t.openSessionInNewTab}
                         onClick={() => onOpenSessionInNewTab(id)}
                       >
-                        <ExternalLink size={sessionRowActionIconSize} aria-hidden />
+                        <ExternalLink
+                          size={sessionRowActionIconSize}
+                          aria-hidden
+                        />
                       </button>
                     ) : null}
-                    {onArchiveSession && !isLive ? (
+                    {onArchiveSession &&
+                    !isLiveRow &&
+                    liveChromeExitSessionId !== id ? (
                       <button
                         type="button"
                         className={`${sessionRowActionBase} text-zinc-500 hover:text-amber-700 dark:hover:text-amber-200/90`}
@@ -297,7 +564,9 @@ export function SessionListPanel({
                         <Archive size={sessionRowActionIconSize} aria-hidden />
                       </button>
                     ) : null}
-                    {onDeleteSession && !isLive ? (
+                    {onDeleteSession &&
+                    !isLiveRow &&
+                    liveChromeExitSessionId !== id ? (
                       <button
                         type="button"
                         className={`${sessionRowActionBase} text-zinc-500 hover:text-red-600 dark:hover:text-red-300`}
@@ -310,6 +579,20 @@ export function SessionListPanel({
                     ) : null}
                   </div>
                 </div>
+                {detailVisibleSessionId === id &&
+                sessionDetailInline?.sessionId === id ? (
+                  <section
+                    id={`kronosys-session-${id}-metrics`}
+                    className={`overflow-hidden border-t transition-[max-height,opacity,margin-top,padding-top,border-color] duration-300 ease-out motion-reduce:transition-none ${
+                      detailEnterSessionId === id
+                        ? "mt-2 max-h-[80rem] border-zinc-200/90 pt-3 pr-1 opacity-100 dark:border-zinc-700/70"
+                        : "mt-0 max-h-0 border-transparent pt-0 opacity-0"
+                    }`}
+                    aria-label={t.selectedSessionSidebarTitle}
+                  >
+                    {sessionDetailInline.content}
+                  </section>
+                ) : null}
               </li>
             );
           })}