@nightkatana/kronosys-app 1.0.0-beta.13 → 1.0.0-beta.14

package/app/licenses/page.tsx

@@ -8,8 +8,16 @@ 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 { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
-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 { LanguageMenu } from "@/components/dashboard/LanguageMenu";
 import { reportingNav } from "@/lib/reportingStrings";
 import {
   DASHBOARD_DEV_THIRD_PARTY,
@@ -23,6 +31,7 @@ import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 function LicensesBody() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { payload } = useKronosysPayload();
   const dashboardSessionNavId = searchParams.get("session");
   const lang: LicensesLang = searchParams.get("lang") === "en" ? "en" : "fr";
   const c = useMemo(() => licensesCopy(lang), [lang]);
@@ -32,7 +41,7 @@ function LicensesBody() {
   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
@@ -42,7 +51,9 @@ function LicensesBody() {
                 Kronosys
               </Link>
               <span className="text-zinc-400 dark:text-zinc-600">/</span>
-              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">{c.title}</span>
+              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">
+                {c.title}
+              </span>
             </div>
             <p className="flex flex-wrap items-center gap-x-2 text-xs font-medium leading-snug text-zinc-500 dark:text-zinc-400">
               <span>{dt.brandTagline}</span>
@@ -52,14 +63,19 @@ function LicensesBody() {
               <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
             </p>
           </div>
-          <div className="flex flex-wrap items-center gap-1.5 text-sm">
+          <AppShellHeaderSessionMeta payload={payload} dt={dt} />
+        </div>
+        <div className="flex w-full justify-end">
+          <div className={appShellHeaderToolbarClassName}>
+            <AppShellCommandCenterPlaceholder />
             <AppShellRouteNav
               current="licenses"
               labels={{ ...nav, licenses: c.title }}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
+              reserveGlobalPauseSlot
             />
-            <ThemeToggle lang={lang} />
+            <ThemeToggle lang={lang as Lang} />
             <PageRefreshButton
               title={dt.pageRefreshTitle}
               ariaLabel={dt.pageRefreshAriaLabel}
@@ -72,21 +88,28 @@ function LicensesBody() {
                 router.refresh();
               }}
             />
-            <span className="hidden h-4 w-px bg-zinc-300 dark:bg-zinc-700 sm:inline-block" aria-hidden />
-            <Link
-              href={withDashboardSessionParam("/licenses", dashboardSessionNavId)}
-              className={`rounded-md px-3 py-1.5 ${lang === "fr" ? "border border-violet-600/60 bg-violet-950/40 text-violet-100" : "border border-zinc-700 bg-zinc-900 text-zinc-200 hover:border-zinc-500"}`}
-              hrefLang="fr"
-            >
-              Français
-            </Link>
-            <Link
-              href={withDashboardSessionParam("/licenses?lang=en", dashboardSessionNavId)}
-              className={`rounded-md px-3 py-1.5 ${lang === "en" ? "border border-violet-600/60 bg-violet-950/40 text-violet-100" : "border border-zinc-700 bg-zinc-900 text-zinc-200 hover:border-zinc-500"}`}
-              hrefLang="en"
-            >
-              English
-            </Link>
+            <LanguageMenu
+              lang={lang as Lang}
+              labelEn="English"
+              labelFr="Français"
+              menuHeading={lang === "fr" ? "Langue" : "Language"}
+              triggerAriaLabel={
+                lang === "fr" ? "Langue de l’interface" : "Interface language"
+              }
+              onSelect={(next) => {
+                const path =
+                  next === "en"
+                    ? withDashboardSessionParam(
+                        "/licenses?lang=en",
+                        dashboardSessionNavId,
+                      )
+                    : withDashboardSessionParam(
+                        "/licenses",
+                        dashboardSessionNavId,
+                      );
+                router.push(path);
+              }}
+            />
           </div>
         </div>
       </header>
@@ -95,13 +118,22 @@ function LicensesBody() {
         <p className="text-sm leading-relaxed text-zinc-400">{c.intro}</p>
 
         <section className="mt-10" aria-labelledby="lic-kronosys-product">
-          <h2 id="lic-kronosys-product" className="text-base font-semibold text-zinc-200">
+          <h2
+            id="lic-kronosys-product"
+            className="text-base font-semibold text-zinc-200"
+          >
             {c.kronosysSectionTitle}
           </h2>
-          <p className="mt-2 text-sm leading-relaxed text-zinc-400">{c.kronosysProduct}</p>
-          <p className="mt-2 text-sm font-medium text-zinc-300">{c.copyrightLine}</p>
+          <p className="mt-2 text-sm leading-relaxed text-zinc-400">
+            {c.kronosysProduct}
+          </p>
+          <p className="mt-2 text-sm font-medium text-zinc-300">
+            {c.copyrightLine}
+          </p>
 
-          <h3 className="mt-6 text-sm font-semibold uppercase tracking-wide text-zinc-500">{c.mitHeading}</h3>
+          <h3 className="mt-6 text-sm font-semibold uppercase tracking-wide text-zinc-500">
+            {c.mitHeading}
+          </h3>
           <pre className="mt-3 overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-900/60 p-4 text-xs leading-relaxed whitespace-pre-wrap text-zinc-300">
             {KRONOSYS_MIT_LICENSE_BODY}
           </pre>
@@ -115,16 +147,27 @@ function LicensesBody() {
             <table className="w-full min-w-[20rem] text-left text-sm">
               <thead className="border-b border-zinc-800 bg-zinc-900/50 text-xs uppercase text-zinc-500">
                 <tr>
-                  <th className="px-3 py-2 font-medium">{c.thirdPartyColName}</th>
-                  <th className="px-3 py-2 font-medium">{c.thirdPartyColLicense}</th>
-                  <th className="px-3 py-2 font-medium">{c.thirdPartyColLink}</th>
+                  <th className="px-3 py-2 font-medium">
+                    {c.thirdPartyColName}
+                  </th>
+                  <th className="px-3 py-2 font-medium">
+                    {c.thirdPartyColLicense}
+                  </th>
+                  <th className="px-3 py-2 font-medium">
+                    {c.thirdPartyColLink}
+                  </th>
                 </tr>
               </thead>
               <tbody>
                 {DASHBOARD_THIRD_PARTY.map((row) => (
-                  <tr key={row.name} className="border-b border-zinc-800/80 last:border-0">
+                  <tr
+                    key={row.name}
+                    className="border-b border-zinc-800/80 last:border-0"
+                  >
                     <td className="px-3 py-2.5 text-zinc-200">{row.name}</td>
-                    <td className="px-3 py-2.5 font-mono text-xs text-zinc-400">{row.license}</td>
+                    <td className="px-3 py-2.5 font-mono text-xs text-zinc-400">
+                      {row.license}
+                    </td>
                     <td className="px-3 py-2.5">
                       <a
                         href={row.url}
@@ -150,16 +193,27 @@ function LicensesBody() {
             <table className="w-full min-w-[20rem] text-left text-sm">
               <thead className="border-b border-zinc-800 bg-zinc-900/50 text-xs uppercase text-zinc-500">
                 <tr>
-                  <th className="px-3 py-2 font-medium">{c.thirdPartyColName}</th>
-                  <th className="px-3 py-2 font-medium">{c.thirdPartyColLicense}</th>
-                  <th className="px-3 py-2 font-medium">{c.thirdPartyColLink}</th>
+                  <th className="px-3 py-2 font-medium">
+                    {c.thirdPartyColName}
+                  </th>
+                  <th className="px-3 py-2 font-medium">
+                    {c.thirdPartyColLicense}
+                  </th>
+                  <th className="px-3 py-2 font-medium">
+                    {c.thirdPartyColLink}
+                  </th>
                 </tr>
               </thead>
               <tbody>
                 {DASHBOARD_DEV_THIRD_PARTY.map((row) => (
-                  <tr key={row.name} className="border-b border-zinc-800/80 last:border-0">
+                  <tr
+                    key={row.name}
+                    className="border-b border-zinc-800/80 last:border-0"
+                  >
                     <td className="px-3 py-2.5 text-zinc-200">{row.name}</td>
-                    <td className="px-3 py-2.5 font-mono text-xs text-zinc-400">{row.license}</td>
+                    <td className="px-3 py-2.5 font-mono text-xs text-zinc-400">
+                      {row.license}
+                    </td>
                     <td className="px-3 py-2.5">
                       <a
                         href={row.url}
@@ -181,7 +235,9 @@ function LicensesBody() {
           <h2 id="lic-fonts" className="text-base font-semibold text-zinc-200">
             {c.fontsSectionTitle}
           </h2>
-          <p className="mt-2 text-sm leading-relaxed text-zinc-400">{c.fontsBody}</p>
+          <p className="mt-2 text-sm leading-relaxed text-zinc-400">
+            {c.fontsBody}
+          </p>
           <ul className="mt-3 list-inside list-disc text-sm text-zinc-400">
             <li>
               <a
@@ -220,13 +276,17 @@ function LicensesBody() {
           <h2 id="lic-ext" className="text-base font-semibold text-zinc-200">
             {c.extensionSectionTitle}
           </h2>
-          <p className="mt-2 text-sm leading-relaxed text-zinc-400">{c.extensionNote}</p>
+          <p className="mt-2 text-sm leading-relaxed text-zinc-400">
+            {c.extensionNote}
+          </p>
         </section>
 
         <p className="mt-8 text-xs text-zinc-600">{c.disclaimer}</p>
       </main>
 
-      <ScrollToTopFab ariaLabel={lang === "fr" ? "Retour en haut de la page" : "Back to top"} />
+      <ScrollToTopFab
+        ariaLabel={lang === "fr" ? "Retour en haut de la page" : "Back to top"}
+      />
     </div>
   );
 }