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

package/app/settings/page.tsx

@@ -36,11 +36,13 @@ import { settingsCopy, type SettingsCopy } from "@/lib/settingsCopy";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
-import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
 import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
 import { workspaceFolderPathStrings } from "@/lib/legacyEditorPayloadKeys";
 import { showWorkspaceFoldersEmptyMessage } from "@/lib/usageProfile";
 import { readDashboardUse24HourClockFromCfg } from "@/lib/dashboardClockFormat";
@@ -54,7 +56,7 @@ import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
 import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
-import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import { SettingsTagsProjectsSection } from "@/components/dashboard/SettingsTagsProjectsSection";
 import { SettingsTour } from "@/components/dashboard/SettingsTour";
 import { resetGitIdentityBannerDismissed } from "@/lib/dashboardGitIdentityBannerStorage";
@@ -1040,6 +1042,14 @@ function SettingsPageContent() {
     return await refresh({ routerInvalidate: true, preserveForm: true });
   }, [refresh]);
 
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true, preserveForm: true });
+    },
+    [refresh],
+  );
+
   const restoreDashboardColumnHintsPreference = useCallback(() => {
     writeDashboardColumnHintsDismissed(false);
     writeDashboardColumnHintsClosed(false);
@@ -1263,6 +1273,7 @@ function SettingsPageContent() {
         type: "updateKronosysSettings",
         settings: {
           ...formRest,
+          dashboardShowKronoFocusInHeader: true,
           workspaceLocExcludedDirectoryNames: splitLinesToWorkspaceLocDirs(
             workspaceLocExcludedDirsText,
           ),
@@ -1651,40 +1662,61 @@ function SettingsPageContent() {
           </div>
           <AppShellHeaderSessionMeta payload={payload} dt={dt} />
         </div>
-        <div className="flex w-full justify-end">
-          <div className={appShellHeaderToolbarClassName}>
-            <AppShellHeaderWallClock lang={lang} dt={dt} />
-            <AppShellCommandCenterPlaceholder />
-            <AppShellRouteNav
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={handleManualRefresh}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
               current="settings"
               labels={nav}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
-              reserveGlobalPauseSlot
-            />
-            <ThemeToggle lang={lang} />
-            <PageRefreshButton
-              title={dt.pageRefreshTitle}
-              ariaLabel={dt.pageRefreshAriaLabel}
-              inlineMessages={{
-                loading: dt.pageRefreshProgressLabel,
-                success: dt.pageRefreshDoneToast,
-                error: dt.pageRefreshFailedToast,
-              }}
-              onRefresh={handleManualRefresh}
-            />
-            <LanguageMenu
               lang={lang}
-              labelEn="English"
-              labelFr="Français"
-              menuHeading={lang === "fr" ? "Langue" : "Language"}
-              triggerAriaLabel={
-                lang === "fr" ? "Langue de l’interface" : "Interface language"
-              }
-              onSelect={(next) => void postLang(next)}
+              dt={dt}
             />
-          </div>
-        </div>
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <ThemeToggle lang={lang} />
+              <PageRefreshButton
+                title={dt.pageRefreshTitle}
+                ariaLabel={dt.pageRefreshAriaLabel}
+                inlineMessages={{
+                  loading: dt.pageRefreshProgressLabel,
+                  success: dt.pageRefreshDoneToast,
+                  error: dt.pageRefreshFailedToast,
+                }}
+                onRefresh={handleManualRefresh}
+              />
+              <LanguageMenu
+                lang={lang}
+                labelEn="English"
+                labelFr="Français"
+                menuHeading={lang === "fr" ? "Langue" : "Language"}
+                triggerAriaLabel={
+                  lang === "fr" ? "Langue de l’interface" : "Interface language"
+                }
+                onSelect={(next) => void postLang(next)}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <main className="mx-auto w-full max-w-[1920px] px-5 py-8 sm:px-8 lg:px-10 xl:px-12 2xl:px-14">
@@ -2305,19 +2337,9 @@ function SettingsPageContent() {
                 <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                   {s.sectionKronoFocus}
                 </h2>
-                <Field
-                  label={s.kronoFocusShowInHeader}
-                  description={s.kronoFocusShowInHeaderDesc}
-                >
-                  <SettingsCheckbox
-                    checked={form.dashboardShowKronoFocusInHeader}
-                    onChange={(v) =>
-                      update("dashboardShowKronoFocusInHeader", v)
-                    }
-                    disabled={formLocked}
-                    ariaLabel={s.kronoFocusShowInHeader}
-                  />
-                </Field>
+                <p className="mb-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+                  {s.kronoFocusHeaderPinnedNote}
+                </p>
                 <Field
                   label={s.kronoFocusShowInTaskOps}
                   description={s.kronoFocusShowInTaskOpsDesc}

package/components/KronosysPayloadProvider.tsx

@@ -12,7 +12,10 @@ import {
 } from "react";
 import { useRouter } from "next/navigation";
 
-import { fetchKronosysState, type KronosysUpdatePayload } from "@/lib/kronosysApi";
+import {
+  fetchKronosysState,
+  type KronosysUpdatePayload,
+} from "@/lib/kronosysApi";
 
 export type KronosysPayloadContextValue = {
   payload: KronosysUpdatePayload | null;
@@ -27,7 +30,8 @@ export type KronosysPayloadContextValue = {
   getLatestPayload: () => KronosysUpdatePayload | null;
 };
 
-const KronosysPayloadContext = createContext<KronosysPayloadContextValue | null>(null);
+const KronosysPayloadContext =
+  createContext<KronosysPayloadContextValue | null>(null);
 
 export function KronosysPayloadProvider({ children }: { children: ReactNode }) {
   const router = useRouter();
@@ -80,9 +84,13 @@ export function KronosysPayloadProvider({ children }: { children: ReactNode }) {
       timer = setTimeout(() => void pollState(), delay);
     };
 
-    void pollState();
+    /** Différer le premier fetch après le commit pour éviter les courses avec Suspense / enfants (React 19). */
+    const kickoff = globalThis.setTimeout(() => {
+      void pollState();
+    }, 0);
     return () => {
       cancelled = true;
+      globalThis.clearTimeout(kickoff);
       if (timer) {
         clearTimeout(timer);
       }
@@ -99,13 +107,19 @@ export function KronosysPayloadProvider({ children }: { children: ReactNode }) {
     [payload, error, refresh, getLatestPayload],
   );
 
-  return <KronosysPayloadContext.Provider value={value}>{children}</KronosysPayloadContext.Provider>;
+  return (
+    <KronosysPayloadContext.Provider value={value}>
+      {children}
+    </KronosysPayloadContext.Provider>
+  );
 }
 
 export function useKronosysPayload(): KronosysPayloadContextValue {
   const v = useContext(KronosysPayloadContext);
   if (!v) {
-    throw new Error("useKronosysPayload doit être utilisé sous KronosysPayloadProvider.");
+    throw new Error(
+      "useKronosysPayload doit être utilisé sous KronosysPayloadProvider.",
+    );
   }
   return v;
 }

package/components/dashboard/AppShellHeaderKronoFocus.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useCallback, type ComponentProps } from "react";
+import { KronoFocusPanel } from "@/components/dashboard/KronoFocusPanel";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+
+type LiveForHeader = {
+  archived?: boolean;
+  kronoFocus?: ComponentProps<typeof KronoFocusPanel>["kronoFocus"];
+  activeTasks?: Array<{ id?: string }>;
+  activeTask?: { id?: string };
+};
+
+export function AppShellHeaderKronoFocus({
+  payload,
+  dt,
+  post,
+  viewingArchive = false,
+  tourDomId,
+  className = "flex min-w-0 max-w-[min(100vw-12rem,40rem)] shrink-0 items-center",
+}: Readonly<{
+  payload: unknown;
+  dt: DashboardStrings;
+  post: (body: Record<string, unknown>) => Promise<void>;
+  /** Tableau de bord : consultation d’une session archivée tout en pilotant la session live. */
+  viewingArchive?: boolean;
+  tourDomId?: string;
+  className?: string;
+}>) {
+  const noopPost = useCallback(async (_body: Record<string, unknown>) => {},
+  []);
+
+  const live = (payload as { current?: LiveForHeader } | null | undefined)
+    ?.current;
+
+  if (!payload || !live) {
+    return (
+      <div
+        id={tourDomId}
+        className={`${className} opacity-85`}
+        aria-busy="true"
+        aria-label={dt.appShellHeaderKronoFocusLoadingAria}
+      >
+        <KronoFocusPanel
+          variant="headerBar"
+          kronoFocus={undefined}
+          liveActiveTaskIds={undefined}
+          t={dt}
+          post={noopPost}
+          viewingArchive={false}
+        />
+      </div>
+    );
+  }
+
+  let liveActiveTaskIds: string[] | undefined;
+  if (Array.isArray(live.activeTasks) && live.activeTasks.length > 0) {
+    const ids = live.activeTasks
+      .map((t) => t.id)
+      .filter((id): id is string => typeof id === "string" && id.length > 0);
+    liveActiveTaskIds = ids.length > 0 ? ids : undefined;
+  } else if (live.activeTask?.id) {
+    liveActiveTaskIds = [live.activeTask.id];
+  }
+
+  return (
+    <div id={tourDomId} className={className}>
+      <KronoFocusPanel
+        variant="headerBar"
+        kronoFocus={live.kronoFocus}
+        liveActiveTaskIds={liveActiveTaskIds}
+        t={dt}
+        post={post}
+        viewingArchive={viewingArchive}
+      />
+    </div>
+  );
+}

package/components/dashboard/AppShellHeaderToolbarLayout.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import {
+  appShellHeaderToolbarClassName,
+  appShellHeaderToolbarClusterClassName,
+  appShellHeaderToolbarLeadingClassName,
+  appShellHeaderToolbarNavClassName,
+  appShellHeaderToolbarTrailingClassName,
+} from "@/lib/appShellHeaderClasses";
+
+type AppShellHeaderToolbarLayoutProps = Readonly<{
+  id?: string;
+  leading: ReactNode;
+  nav: ReactNode;
+  trailing: ReactNode;
+}>;
+
+/**
+ * Toute la barre d’outils (leading + nav + trailing) est rendue comme **un seul bloc** centré
+ * horizontalement dans la rangée ; défilement horizontal si la fenêtre est plus étroite que le bloc.
+ */
+export function AppShellHeaderToolbarLayout({
+  id,
+  leading,
+  nav,
+  trailing,
+}: AppShellHeaderToolbarLayoutProps) {
+  return (
+    <div id={id} className={appShellHeaderToolbarClassName}>
+      <div className={appShellHeaderToolbarClusterClassName}>
+        <div className={appShellHeaderToolbarLeadingClassName}>{leading}</div>
+        <div className={appShellHeaderToolbarNavClassName}>{nav}</div>
+        <div className={appShellHeaderToolbarTrailingClassName}>{trailing}</div>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/AppShellHeaderUtilityRibbon.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { appShellToolbarRibbonGroupClass } from "@/lib/appShellToolbarChrome";
+
+export function AppShellHeaderUtilityRibbon({
+  ariaLabel,
+  children,
+}: Readonly<{ ariaLabel: string; children: ReactNode }>) {
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={appShellToolbarRibbonGroupClass}
+    >
+      {children}
+    </div>
+  );
+}

package/components/dashboard/AppShellHeaderWallClock.tsx

@@ -5,6 +5,10 @@ import { useEffect, useMemo, useState } from "react";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
 import { formatAppShellWallClock } from "@/lib/formatAppShellWallClock";
+import {
+  appShellToolbarRaisedWideTriggerClass,
+  appShellToolbarRibbonGroupClass,
+} from "@/lib/appShellToolbarChrome";
 
 export function AppShellHeaderWallClock({
   lang,
@@ -33,22 +37,24 @@ export function AppShellHeaderWallClock({
     .replace("{datetime}", ariaDatetime);
 
   return (
-    <time
-      suppressHydrationWarning
-      dateTime={now ? now.toISOString() : ""}
-      className="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2.5 font-mono text-sm tabular-nums text-zinc-800 shadow-sm dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-100"
-      title={aria}
-      aria-label={aria}
-    >
-      <Clock
-        size={16}
-        strokeWidth={2}
-        className="shrink-0 text-zinc-500 dark:text-zinc-400"
-        aria-hidden
-      />
-      <span className="whitespace-nowrap" suppressHydrationWarning>
-        {now ? display : "--:--:--"}
-      </span>
-    </time>
+    <div className={appShellToolbarRibbonGroupClass}>
+      <time
+        suppressHydrationWarning
+        dateTime={now ? now.toISOString() : ""}
+        className={`${appShellToolbarRaisedWideTriggerClass} gap-1.5 px-2.5 font-mono text-sm tabular-nums text-zinc-800 dark:text-zinc-100`}
+        title={aria}
+        aria-label={aria}
+      >
+        <Clock
+          size={16}
+          strokeWidth={2}
+          className="shrink-0 text-zinc-500 dark:text-zinc-400"
+          aria-hidden
+        />
+        <span className="whitespace-nowrap" suppressHydrationWarning>
+          {now ? display : "--:--:--"}
+        </span>
+      </time>
+    </div>
   );
 }