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

package/app/page.tsx

@@ -18,12 +18,24 @@ import {
   type GitRepoStatisticsPayload,
   type KronosysUpdatePayload,
 } from "@/lib/kronosysApi";
+import {
+  resolveUrlSession,
+  type UrlSessionResolution,
+} from "@/lib/dashboardUrlSession";
+import {
+  consumeAppShellDeferredNewSession,
+  consumeAppShellDeferredScroll,
+  consumeAppShellDeferredSessionListFocus,
+  consumeAppShellDeferredTaskFocus,
+  consumeAppShellDeferredTaskTemplateDraft,
+  consumeAppShellDeferredTodayGantt,
+} from "@/lib/appShellToolbarDeferredIntents";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
 import { dashboardColumnTitleRowClassName } from "@/lib/dashboardColumnChrome";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
@@ -52,7 +64,8 @@ import {
   formatEndLiveSessionModalIntro,
   getEndLiveSessionWarningFlags,
 } from "@/lib/sessionEndWarnings";
-import { KronoFocusPanel } from "@/components/dashboard/KronoFocusPanel";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
 import { TaskFocusPanel } from "@/components/dashboard/TaskFocusPanel";
 import { DeleteSessionModal } from "@/components/dashboard/DeleteSessionModal";
 import {
@@ -70,7 +83,6 @@ import { SelectedSessionSidebarBlock } from "@/components/dashboard/SelectedSess
 import { DashboardPauseBackdrop } from "@/components/dashboard/DashboardPauseBackdrop";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
-import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
 import { DashboardColumnHintsBanner } from "@/components/dashboard/DashboardColumnHintsBanner";
 import {
   DashboardCommandCenter,
@@ -100,13 +112,9 @@ import {
   readDashboardTimeZoneFromCfg,
 } from "@/lib/dashboardTimeZone";
 import { NewSessionScopeModal } from "@/components/dashboard/NewSessionScopeModal";
-import { GlobalPauseConfirmModal } from "@/components/dashboard/GlobalPauseConfirmModal";
+import { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import { TaskTimelineGanttModal } from "@/components/dashboard/TaskTimelineGanttModal";
 import { useKronosysPackageVersion } from "@/components/KronosysPackageVersionProvider";
-import {
-  buildGlobalPauseActivationPreview,
-  isGlobalPauseActivationNoOp,
-} from "@/lib/globalPausePreview";
 
 type LiveTaskShape = {
   id: string;
@@ -172,37 +180,6 @@ type LiveShape = {
   codingSignalsByLanguage?: Array<[string, number]>;
 };
 
-type UrlSessionResolution =
-  | { mode: "none" }
-  | { mode: "loading" }
-  | { mode: "ok"; id: string }
-  | { mode: "invalid" };
-
-function resolveUrlSession(
-  urlParam: string | null,
-  payload: KronosysUpdatePayload | null,
-  live: LiveShape | undefined,
-  history: SessionListEntry[],
-  historyArchived: SessionListEntry[],
-): UrlSessionResolution {
-  if (!urlParam) {
-    return { mode: "none" };
-  }
-  if (!payload) {
-    return { mode: "loading" };
-  }
-  const liveSid =
-    typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
-  if (
-    (liveSid !== "" && urlParam === liveSid) ||
-    history.some((s) => s.sessionId === urlParam) ||
-    historyArchived.some((s) => s.sessionId === urlParam)
-  ) {
-    return { mode: "ok", id: urlParam };
-  }
-  return { mode: "invalid" };
-}
-
 function DashboardHome() {
   const searchParams = useSearchParams();
   const pathname = usePathname();
@@ -260,12 +237,14 @@ function DashboardHome() {
     useState(false);
   const [updateChangelogModalOpen, setUpdateChangelogModalOpen] =
     useState(false);
-  const [globalPauseConfirmOpen, setGlobalPauseConfirmOpen] = useState(false);
   const [ganttForSessionId, setGanttForSessionId] = useState<string | null>(
     null,
   );
   const [ganttModalOpen, setGanttModalOpen] = useState(false);
   const [todayGanttModalOpen, setTodayGanttModalOpen] = useState(false);
+  /** Langue affichée : état local mis à jour par le sélecteur initial, le menu ou la synchro post-visite. */
+  const [uiLang, setUiLang] = useState<Lang>("en");
+  const [langGateOpen, setLangGateOpen] = useState(false);
   const packageVersion = useKronosysPackageVersion();
 
   useEffect(() => {
@@ -471,9 +450,6 @@ function DashboardHome() {
 
   const hasPayload = Boolean(payload);
   const serverLang: Lang = live?.language === "fr" ? "fr" : "en";
-  /** Langue affichée : état local mis à jour par le sélecteur initial, le menu ou la synchro post-visite. */
-  const [uiLang, setUiLang] = useState<Lang>("en");
-  const [langGateOpen, setLangGateOpen] = useState(false);
 
   useLayoutEffect(() => {
     if (typeof window === "undefined") {
@@ -628,49 +604,6 @@ function DashboardHome() {
       "globalPauseContext" in live &&
       (live as { globalPauseContext?: unknown }).globalPauseContext,
   );
-  const globalPauseActivationPreview = useMemo(
-    () =>
-      live && typeof live === "object"
-        ? buildGlobalPauseActivationPreview(live as Record<string, unknown>)
-        : null,
-    [live],
-  );
-  const globalPauseNavDisabled = useMemo(
-    () =>
-      !globalPauseContextActive &&
-      globalPauseActivationPreview !== null &&
-      isGlobalPauseActivationNoOp(globalPauseActivationPreview),
-    [globalPauseContextActive, globalPauseActivationPreview],
-  );
-  const onGlobalPauseNavPress = useCallback(() => {
-    if (globalPauseContextActive) {
-      void post({ type: "toggleGlobalPauseContext" });
-      return;
-    }
-    if (globalPauseNavDisabled) {
-      return;
-    }
-    setGlobalPauseConfirmOpen(true);
-  }, [globalPauseContextActive, globalPauseNavDisabled, post]);
-  const confirmGlobalPauseActivation = useCallback(() => {
-    setGlobalPauseConfirmOpen(false);
-    void post({ type: "toggleGlobalPauseContext" });
-  }, [post]);
-  const cancelGlobalPauseConfirm = useCallback(() => {
-    setGlobalPauseConfirmOpen(false);
-  }, []);
-
-  useEffect(() => {
-    if (globalPauseContextActive) {
-      setGlobalPauseConfirmOpen(false);
-    }
-  }, [globalPauseContextActive]);
-
-  useEffect(() => {
-    if (!live) {
-      setGlobalPauseConfirmOpen(false);
-    }
-  }, [live]);
 
   const completeLangGate = useCallback(
     (next: Lang) => {
@@ -987,12 +920,6 @@ function DashboardHome() {
     return Math.round(clamped * 60);
   }, [payload?.cfg]);
 
-  const dashboardShowKronoFocusInHeader = useMemo(() => {
-    const raw = (payload?.cfg as Record<string, unknown> | undefined)
-      ?.dashboardShowKronoFocusInHeader;
-    return raw !== false;
-  }, [payload?.cfg]);
-
   const dashboardShowKronoFocusInTaskOps = useMemo(() => {
     const raw = (payload?.cfg as Record<string, unknown> | undefined)
       ?.dashboardShowKronoFocusInTaskOps;
@@ -1063,6 +990,59 @@ function DashboardHome() {
     setTodayGanttModalOpen(false);
   }, []);
 
+  useLayoutEffect(() => {
+    if (pathname !== "/") {
+      return;
+    }
+    const scroll = consumeAppShellDeferredScroll();
+    if (scroll === "sessions") {
+      document.getElementById("dashboard-col-sessions")?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    } else if (scroll === "tasks") {
+      document.getElementById("dashboard-col-tasks")?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    } else if (scroll === "tags") {
+      document.getElementById("dashboard-col-tags")?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+    const sessionListFocus = consumeAppShellDeferredSessionListFocus();
+    if (sessionListFocus) {
+      scrollToSessionInList(sessionListFocus);
+    }
+    if (consumeAppShellDeferredTodayGantt()) {
+      setTodayGanttModalOpen(true);
+    }
+    if (consumeAppShellDeferredNewSession()) {
+      setNewSessionModalOpen(true);
+    }
+    const taskFocus = consumeAppShellDeferredTaskFocus();
+    if (taskFocus) {
+      focusTasksColumnForSearch();
+      globalThis.requestAnimationFrame(() => {
+        scrollToTaskInPanel(taskFocus);
+      });
+    }
+    const templateDraft = consumeAppShellDeferredTaskTemplateDraft();
+    if (templateDraft) {
+      focusTaskLauncherInput();
+      globalThis.requestAnimationFrame(() => {
+        taskLauncherApplyDraftRef.current?.(templateDraft);
+      });
+    }
+  }, [
+    pathname,
+    focusTaskLauncherInput,
+    focusTasksColumnForSearch,
+    scrollToSessionInList,
+    scrollToTaskInPanel,
+  ]);
+
   const ganttResolvedSession = useMemo(():
     | SessionListEntry
     | LiveShape
@@ -1515,48 +1495,41 @@ function DashboardHome() {
             dt={dt}
           />
         </div>
-        <div className="grid w-full grid-cols-1 gap-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] xl:items-center xl:gap-x-6 xl:gap-y-0">
-          <div className="flex flex-wrap items-center justify-between gap-4 xl:contents">
-            <div
-              className="hidden min-w-0 xl:col-start-1 xl:row-start-1 xl:block"
-              aria-hidden
-            />
-            <div
-              id="dashboard-tour-anchor-app-toolbar"
-              className={`${appShellHeaderToolbarClassName} xl:col-start-3 xl:row-start-1 xl:justify-self-end`}
-            >
+        <AppShellHeaderToolbarLayout
+          id="dashboard-tour-anchor-app-toolbar"
+          leading={
+            <>
               <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postVoid}
+                viewingArchive={isInspecting}
+                tourDomId="dashboard-tour-anchor-kronoFocus-header"
+              />
               <DashboardCommandCenter
                 dt={dt}
                 handlers={commandHandlers}
                 searchItems={quickSearchItems}
                 toolbarDomId="dashboard-tour-command-center"
               />
-              <AppShellRouteNav
-                current="dashboard"
-                labels={nav}
-                navAriaLabel={dt.appShellRouteNavAria}
-                dashboardSessionId={selectedSessionId}
-                ganttControl={{
-                  label: dt.appShellRouteNavTodayGantt,
-                  onPress: openTodayGanttModal,
-                }}
-                reserveGlobalPauseSlot={!(live && live.archived !== true)}
-                globalPauseControl={
-                  live && live.archived !== true
-                    ? {
-                        active: globalPauseContextActive,
-                        label: globalPauseContextActive
-                          ? dt.appShellRouteNavGlobalResume
-                          : dt.appShellRouteNavGlobalPause,
-                        disabled: globalPauseNavDisabled,
-                        disabledTooltip:
-                          dt.appShellRouteNavGlobalPauseDisabledTooltip,
-                        onPress: onGlobalPauseNavPress,
-                      }
-                    : undefined
-                }
-              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
+              current="dashboard"
+              labels={nav}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={selectedSessionId}
+              lang={lang}
+              dt={dt}
+              onOpenTodayGantt={openTodayGanttModal}
+            />
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
               <ThemeToggle lang={lang} />
               <PageRefreshButton
                 title={dt.pageRefreshTitle}
@@ -1583,35 +1556,9 @@ function DashboardHome() {
                   void post({ type: "setLanguage", lang: next });
                 }}
               />
-            </div>
-          </div>
-          {payload && live && dashboardShowKronoFocusInHeader ? (
-            <div
-              id="dashboard-tour-anchor-kronoFocus-header"
-              className="min-w-0 w-full xl:col-start-2 xl:row-start-1 xl:flex xl:h-10 xl:w-max xl:max-w-[min(100vw-10rem,52rem)] xl:items-center xl:justify-self-center"
-            >
-              <KronoFocusPanel
-                variant="headerBar"
-                kronoFocus={live.kronoFocus}
-                liveActiveTaskIds={
-                  Array.isArray(live.activeTasks) && live.activeTasks.length > 0
-                    ? live.activeTasks
-                        .map((t) => t.id)
-                        .filter(
-                          (id): id is string =>
-                            typeof id === "string" && id.length > 0,
-                        )
-                    : live.activeTask?.id
-                    ? [live.activeTask.id]
-                    : undefined
-                }
-                t={dt}
-                post={postVoid}
-                viewingArchive={isInspecting}
-              />
-            </div>
-          ) : null}
-        </div>
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       {payload &&
@@ -1915,16 +1862,6 @@ function DashboardHome() {
             });
           }}
         />
-        <GlobalPauseConfirmModal
-          open={globalPauseConfirmOpen}
-          preview={globalPauseActivationPreview}
-          lang={lang}
-          displayTimeZone={dashboardDisplayTimeZone}
-          use24HourClock={dashboardUse24HourClock}
-          t={dt}
-          onCancel={cancelGlobalPauseConfirm}
-          onConfirm={confirmGlobalPauseActivation}
-        />
         <TaskTimelineGanttModal
           open={ganttModalOpen}
           onClose={closeGanttModal}
@@ -2146,9 +2083,7 @@ function DashboardHome() {
           open={tourOpen}
           onOpenChange={setTourOpen}
           dt={dt}
-          kronoFocusTourStep={Boolean(
-            payload && live && dashboardShowKronoFocusInHeader,
-          )}
+          kronoFocusTourStep={Boolean(payload && live)}
           gitIdentityBannerTourStep={showGitIdentityBanner}
         />
       </div>