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

package/app/guide/page.tsx

@@ -7,7 +7,14 @@ import { BookOpen, Search, X } from "lucide-react";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import { postKronosysAction } from "@/lib/kronosysApi";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
-import { appShellHeaderClassName, appShellHeaderToolRowClassName } from "@/lib/appShellHeaderClasses";
+import {
+  appShellHeaderClassName,
+  appShellHeaderTitleMetaRowClassName,
+  appShellHeaderToolbarClassName,
+} from "@/lib/appShellHeaderClasses";
+import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
+import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
 import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
 import { UserGuideBodyText } from "@/components/dashboard/UserGuideBodyText";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
@@ -21,7 +28,10 @@ import { sectionSearchHaystack, userGuideBundle } from "@/lib/userGuideCopy";
 
 type LiveShape = { language?: string };
 
-function filterSections(query: string, sections: ReturnType<typeof userGuideBundle>["sections"]): number[] {
+function filterSections(
+  query: string,
+  sections: ReturnType<typeof userGuideBundle>["sections"],
+): number[] {
   const q = query.trim().toLowerCase();
   if (q.length === 0) {
     return sections.map((_, i) => i);
@@ -44,14 +54,21 @@ function GuideContent() {
   const nav = useMemo(() => reportingNav(lang), [lang]);
   const dt = dashboardStrings(lang);
   const bundle = useMemo(() => userGuideBundle(lang), [lang]);
-  const visible = useMemo(() => filterSections(q, bundle.sections), [q, bundle.sections]);
+  const visible = useMemo(
+    () => filterSections(q, bundle.sections),
+    [q, bundle.sections],
+  );
 
   const postLang = async (next: Lang) => {
     await postKronosysAction({ type: "setLanguage", lang: next });
     await refresh();
   };
 
-  const bulletList = (lines: string[], idPrefix: string, listType: "ul" | "ol" = "ul"): ReactNode => {
+  const bulletList = (
+    lines: string[],
+    idPrefix: string,
+    listType: "ul" | "ol" = "ul",
+  ): ReactNode => {
     const listClass =
       listType === "ol"
         ? "mt-2 list-inside list-decimal space-y-1.5 pl-0.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300"
@@ -71,7 +88,7 @@ function GuideContent() {
   return (
     <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
       <header className={appShellHeaderClassName}>
-        <div className={appShellHeaderToolRowClassName}>
+        <div className={appShellHeaderTitleMetaRowClassName}>
           <div className="flex min-w-0 flex-col gap-1">
             <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
               <Link
@@ -83,8 +100,13 @@ function GuideContent() {
               <span className="text-zinc-400 dark:text-zinc-600" aria-hidden>
                 /
               </span>
-              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">{bundle.pageTitle}</span>
-              <span className="inline-flex items-center text-violet-500 dark:text-violet-400" aria-hidden>
+              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">
+                {bundle.pageTitle}
+              </span>
+              <span
+                className="inline-flex items-center text-violet-500 dark:text-violet-400"
+                aria-hidden
+              >
                 <BookOpen className="size-5" strokeWidth={2} />
               </span>
             </div>
@@ -96,12 +118,18 @@ function GuideContent() {
               <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
             </p>
           </div>
-          <div className="flex flex-wrap items-center gap-1.5">
+          <AppShellHeaderSessionMeta payload={payload} dt={dt} />
+        </div>
+        <div className="flex w-full justify-end">
+          <div className={appShellHeaderToolbarClassName}>
+            <AppShellHeaderWallClock lang={lang} dt={dt} />
+            <AppShellCommandCenterPlaceholder />
             <AppShellRouteNav
               current="guide"
               labels={nav}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
+              reserveGlobalPauseSlot
             />
             <ThemeToggle lang={lang} />
             <PageRefreshButton
@@ -121,7 +149,9 @@ function GuideContent() {
               labelEn="English"
               labelFr="Français"
               menuHeading={lang === "fr" ? "Langue" : "Language"}
-              triggerAriaLabel={lang === "fr" ? "Langue de l’interface" : "Interface language"}
+              triggerAriaLabel={
+                lang === "fr" ? "Langue de l’interface" : "Interface language"
+              }
               onSelect={(next) => void postLang(next)}
             />
           </div>
@@ -133,9 +163,14 @@ function GuideContent() {
         data-user-guide-scrolled=""
       >
         <p className="max-w-3xl text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
-          <UserGuideBodyText line={bundle.pageSubtitle} sessionId={dashboardSessionNavId} />
+          <UserGuideBodyText
+            line={bundle.pageSubtitle}
+            sessionId={dashboardSessionNavId}
+          />
+        </p>
+        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
+          {bundle.lastUpdated}
         </p>
-        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">{bundle.lastUpdated}</p>
 
         <form
           onSubmit={(e) => e.preventDefault()}
@@ -179,7 +214,10 @@ function GuideContent() {
         </form>
 
         {visible.length === 0 && q.trim() ? (
-          <output className="mt-8 block text-sm text-zinc-500 dark:text-zinc-400" aria-live="polite">
+          <output
+            className="mt-8 block text-sm text-zinc-500 dark:text-zinc-400"
+            aria-live="polite"
+          >
             {bundle.searchNoResults}
           </output>
         ) : null}
@@ -230,8 +268,14 @@ function GuideContent() {
                   </h2>
                   <div className="mt-3 space-y-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
                     {s.paragraphs.map((p, pIdx) => (
-                      <p key={`${s.id}-p${pIdx}`} className="[&:not(:first-of-type)]:pt-0.5">
-                        <UserGuideBodyText line={p} sessionId={dashboardSessionNavId} />
+                      <p
+                        key={`${s.id}-p${pIdx}`}
+                        className="[&:not(:first-of-type)]:pt-0.5"
+                      >
+                        <UserGuideBodyText
+                          line={p}
+                          sessionId={dashboardSessionNavId}
+                        />
                       </p>
                     ))}
                     {s.steps && s.steps.length > 0 ? (
@@ -251,7 +295,9 @@ function GuideContent() {
                       </div>
                     ) : null}
                   </div>
-                  {s.bullets && s.bullets.length > 0 ? bulletList(s.bullets, s.id) : null}
+                  {s.bullets && s.bullets.length > 0
+                    ? bulletList(s.bullets, s.id)
+                    : null}
                 </article>
               );
             })}