@nightkatana/kronosys-app 1.0.0-beta.0

package/app/guide/page.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { Suspense, useMemo, useState, type ReactNode } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+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 { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { UserGuideBodyText } from "@/components/dashboard/UserGuideBodyText";
+import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
+import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
+import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { reportingNav, reportingStrings } from "@/lib/reportingStrings";
+import { sectionSearchHaystack, userGuideBundle } from "@/lib/userGuideCopy";
+
+type LiveShape = { language?: string };
+
+function filterSections(query: string, sections: ReturnType<typeof userGuideBundle>["sections"]): number[] {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) {
+    return sections.map((_, i) => i);
+  }
+  return sections
+    .map((s, i) => ({ i, h: sectionSearchHaystack(s) }))
+    .filter((x) => x.h.includes(q))
+    .map((x) => x.i);
+}
+
+function GuideContent() {
+  const searchParams = useSearchParams();
+  const dashboardSessionNavId = searchParams.get("session");
+  const { payload, refresh } = useKronosysPayload();
+  const [q, setQ] = useState("");
+
+  const live = payload?.current as LiveShape | undefined;
+  const lang: Lang = live?.language === "fr" ? "fr" : "en";
+  const t = reportingStrings(lang);
+  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 postLang = async (next: Lang) => {
+    await postKronosysAction({ type: "setLanguage", lang: next });
+    await refresh();
+  };
+
+  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"
+        : "mt-2 list-inside list-disc space-y-1.5 pl-0.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300";
+    const Tag = listType === "ol" ? "ol" : "ul";
+    return (
+      <Tag className={listClass}>
+        {lines.map((line, bIdx) => (
+          <li key={`${idPrefix}-b${bIdx}`}>
+            <UserGuideBodyText line={line} sessionId={dashboardSessionNavId} />
+          </li>
+        ))}
+      </Tag>
+    );
+  };
+
+  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="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
+                href={withDashboardSessionParam("/", dashboardSessionNavId)}
+                className="text-xl font-semibold tracking-tight text-zinc-900 hover:text-violet-700 dark:text-zinc-100 dark:hover:text-violet-300"
+              >
+                Kronosys
+              </Link>
+              <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>
+                <BookOpen className="size-5" strokeWidth={2} />
+              </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>
+              <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+                ·
+              </span>
+              <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <AppShellRouteNav
+              current="guide"
+              labels={nav}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={dashboardSessionNavId}
+            />
+            <ThemeToggle lang={lang} />
+            <PageRefreshButton
+              title={dt.pageRefreshTitle}
+              ariaLabel={dt.pageRefreshAriaLabel}
+              inlineMessages={{
+                loading: dt.pageRefreshProgressLabel,
+                success: dt.pageRefreshDoneToast,
+                error: dt.pageRefreshFailedToast,
+              }}
+              onRefresh={async () => {
+                return await refresh({ routerInvalidate: true });
+              }}
+            />
+            <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)}
+            />
+          </div>
+        </div>
+      </header>
+
+      <main
+        className="mx-auto w-full max-w-[100rem] px-4 pb-16 pt-5 sm:px-8 sm:pt-6 lg:px-12"
+        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} />
+        </p>
+        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">{bundle.lastUpdated}</p>
+
+        <form
+          onSubmit={(e) => e.preventDefault()}
+          className="sticky top-0 z-20 mt-6 -mx-4 border-b border-zinc-200/80 bg-zinc-100/95 px-4 py-3 backdrop-blur-sm sm:-mx-8 sm:px-8 dark:border-zinc-700/80 dark:bg-zinc-900/95"
+          role="search"
+        >
+          <label className="flex flex-col gap-2 sm:flex-row sm:items-center">
+            <span className="sr-only">{bundle.searchAriaLabel}</span>
+            <div className="relative min-w-0 flex-1">
+              <Search
+                className="pointer-events-none absolute top-1/2 left-3 z-[1] size-4 -translate-y-1/2 text-violet-600/80 dark:text-violet-300/80"
+                aria-hidden
+                strokeWidth={2}
+              />
+              <input
+                type="search"
+                className="w-full rounded-lg border border-zinc-300 bg-white py-2.5 pr-9 pl-10 text-sm text-zinc-900 shadow-sm transition placeholder:text-zinc-400 focus:border-violet-500/70 focus:ring-2 focus:ring-violet-500/25 focus:outline-none dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-violet-500/60"
+                placeholder={bundle.searchPlaceholder}
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                autoComplete="off"
+                id="ug-search"
+                aria-label={bundle.searchAriaLabel}
+              />
+              {q ? (
+                <button
+                  type="button"
+                  onClick={() => setQ("")}
+                  className="absolute top-1/2 right-2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md border border-zinc-300/80 bg-white text-zinc-600 transition hover:border-violet-500/50 hover:text-violet-800 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-300 dark:hover:border-violet-500/40 dark:hover:text-violet-100"
+                  title={t.resetAllFilters}
+                  aria-label={t.resetAllFilters}
+                >
+                  <X className="size-4" strokeWidth={2} />
+                </button>
+              ) : null}
+            </div>
+            <p className="shrink-0 text-xs text-zinc-500 dark:text-zinc-400">
+              {q.trim() ? `${visible.length} / ${bundle.sections.length}` : "—"}
+            </p>
+          </label>
+        </form>
+
+        {visible.length === 0 && q.trim() ? (
+          <output className="mt-8 block text-sm text-zinc-500 dark:text-zinc-400" aria-live="polite">
+            {bundle.searchNoResults}
+          </output>
+        ) : null}
+
+        <div className="mt-6 flex flex-col gap-10 lg:flex-row lg:items-start lg:gap-12">
+          {visible.length > 0 && (
+            <nav
+              className="w-full max-w-sm shrink-0 scroll-mt-6 rounded-xl border border-zinc-200 bg-white/90 p-4 text-sm text-zinc-800 shadow-sm dark:border-zinc-600/80 dark:bg-zinc-800/50 dark:text-zinc-200 lg:sticky lg:top-36"
+              aria-label={bundle.tocNavAria}
+            >
+              <p className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                {bundle.tocHeading}
+              </p>
+              <ul className="mt-2 space-y-0.5">
+                {visible.map((idx) => {
+                  const s = bundle.sections[idx];
+                  return (
+                    <li key={s.id}>
+                      <a
+                        href={`#${s.id}`}
+                        onClick={() => {
+                          if (q.trim()) {
+                            setQ("");
+                          }
+                        }}
+                        className="block rounded-md border border-transparent py-1.5 pl-0 pr-0 text-violet-800 no-underline transition hover:border-violet-300/80 hover:bg-violet-100/30 hover:underline dark:text-violet-200/95 dark:hover:border-violet-600/40 dark:hover:bg-violet-950/20"
+                      >
+                        {s.title}
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            </nav>
+          )}
+
+          <div className="min-w-0 flex-1 space-y-10">
+            {visible.map((idx) => {
+              const s = bundle.sections[idx]!;
+              return (
+                <article
+                  key={s.id}
+                  id={s.id}
+                  className="scroll-mt-40 rounded-xl border border-zinc-200/90 bg-white/80 p-5 text-zinc-800 shadow-sm dark:border-zinc-600/50 dark:bg-zinc-800/30 dark:text-zinc-200 sm:p-6"
+                >
+                  <h2 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+                    {s.title}
+                  </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>
+                    ))}
+                    {s.steps && s.steps.length > 0 ? (
+                      <div>
+                        <h3 className="pt-1 text-sm font-semibold text-zinc-800 dark:text-zinc-200">
+                          {s.stepsTitle ?? bundle.defaultStepBlockTitle}
+                        </h3>
+                        {bulletList(s.steps, `${s.id}-st`, "ol")}
+                      </div>
+                    ) : null}
+                    {s.options && s.options.length > 0 ? (
+                      <div>
+                        <h3 className="pt-1 text-sm font-semibold text-zinc-800 dark:text-zinc-200">
+                          {s.optionsTitle ?? bundle.defaultOptionsBlockTitle}
+                        </h3>
+                        {bulletList(s.options, `${s.id}-op`, "ul")}
+                      </div>
+                    ) : null}
+                  </div>
+                  {s.bullets && s.bullets.length > 0 ? bulletList(s.bullets, s.id) : null}
+                </article>
+              );
+            })}
+          </div>
+        </div>
+      </main>
+      <ScrollToTopFab ariaLabel={t.scrollToTopAria} />
+    </div>
+  );
+}
+
+export default function GuidePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-zinc-100 px-6 py-10 text-sm text-zinc-500 dark:bg-zinc-900">
+          Kronosys…
+        </div>
+      }
+    >
+      <GuideContent />
+    </Suspense>
+  );
+}

package/app/layout.tsx

@@ -0,0 +1,77 @@
+import type { Metadata, Viewport } from "next";
+import { Geist_Mono, Rubik } from "next/font/google";
+import { PwaRegister } from "@/components/PwaRegister";
+import { SiteLegalFooter } from "@/components/SiteLegalFooter";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import { KronosysPackageVersionProvider } from "@/components/KronosysPackageVersionProvider";
+import { DashboardToastProvider } from "@/components/dashboard/DashboardToastProvider";
+import { KronosysPayloadProvider } from "@/components/KronosysPayloadProvider";
+import { AppShellLiveSessionDrawer } from "@/components/dashboard/AppShellLiveSessionDrawer";
+import { readKronosysPackageVersion } from "@/lib/readKronosysPackageVersion";
+import { getThemeBootstrapScript } from "@/lib/theme";
+import "./globals.css";
+
+const rubik = Rubik({
+  variable: "--font-rubik",
+  subsets: ["latin", "latin-ext"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Kronosys — Tableau de bord",
+  description:
+    "Kronosys : sessions, tâches, KronoFocus — application web locale (Next.js + SQLite).",
+  applicationName: "Kronosys Dashboard",
+  icons: {
+    icon: [{ url: "/icon-192.png", sizes: "192x192", type: "image/png" }, { url: "/icon-512.png", sizes: "512x512", type: "image/png" }],
+    apple: [{ url: "/apple-icon.png", sizes: "180x180", type: "image/png" }],
+  },
+  appleWebApp: {
+    capable: true,
+    title: "Kronosys",
+    statusBarStyle: "black-translucent",
+  },
+  formatDetection: {
+    telephone: false,
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: "#18181b",
+  colorScheme: "dark light",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const kronosysPackageVersion = readKronosysPackageVersion();
+  return (
+    <html
+      lang="fr"
+      className={`${rubik.variable} ${geistMono.variable} h-full scroll-smooth antialiased`}
+      suppressHydrationWarning
+    >
+      <body className="flex min-h-full flex-col font-sans">
+        <script dangerouslySetInnerHTML={{ __html: getThemeBootstrapScript() }} />
+        <ThemeProvider>
+          <KronosysPackageVersionProvider version={kronosysPackageVersion}>
+            <DashboardToastProvider>
+              <KronosysPayloadProvider>
+                <PwaRegister />
+                <div className="flex min-h-full flex-1 flex-col">{children}</div>
+                <AppShellLiveSessionDrawer />
+                <SiteLegalFooter />
+              </KronosysPayloadProvider>
+            </DashboardToastProvider>
+          </KronosysPackageVersionProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/app/licenses/layout.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Licences — Kronosys",
+  description:
+    "Licence MIT de Kronosys, logiciels tiers du tableau de bord (Next.js, React, etc.) et mentions de polices (OFL).",
+};
+
+export default function LicensesLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return children;
+}

package/app/licenses/page.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { Suspense, useMemo } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+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 { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { appShellHeaderClassName, appShellHeaderToolRowClassName } from "@/lib/appShellHeaderClasses";
+import { reportingNav } from "@/lib/reportingStrings";
+import {
+  DASHBOARD_DEV_THIRD_PARTY,
+  DASHBOARD_THIRD_PARTY,
+  KRONOSYS_MIT_LICENSE_BODY,
+  licensesCopy,
+  type LicensesLang,
+} from "@/lib/licensesCopy";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+
+function LicensesBody() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const dashboardSessionNavId = searchParams.get("session");
+  const lang: LicensesLang = searchParams.get("lang") === "en" ? "en" : "fr";
+  const c = useMemo(() => licensesCopy(lang), [lang]);
+  const nav = reportingNav(lang as Lang);
+  const dt = dashboardStrings(lang as Lang);
+
+  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="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
+                href={withDashboardSessionParam("/", dashboardSessionNavId)}
+                className="text-xl font-semibold tracking-tight text-zinc-900 hover:text-violet-700 dark:text-zinc-100 dark:hover:text-violet-300"
+              >
+                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>
+            </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>
+              <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+                ·
+              </span>
+              <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5 text-sm">
+            <AppShellRouteNav
+              current="licenses"
+              labels={{ ...nav, licenses: c.title }}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={dashboardSessionNavId}
+            />
+            <ThemeToggle lang={lang} />
+            <PageRefreshButton
+              title={dt.pageRefreshTitle}
+              ariaLabel={dt.pageRefreshAriaLabel}
+              inlineMessages={{
+                loading: dt.pageRefreshProgressLabel,
+                success: dt.pageRefreshDoneToast,
+                error: dt.pageRefreshFailedToast,
+              }}
+              onRefresh={() => {
+                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>
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-3xl px-5 py-8 pb-16 sm:px-8 lg:px-10">
+        <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">
+            {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>
+
+          <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>
+        </section>
+
+        <section className="mt-10" aria-labelledby="lic-third">
+          <h2 id="lic-third" className="text-base font-semibold text-zinc-200">
+            {c.thirdPartySectionTitle}
+          </h2>
+          <div className="mt-4 overflow-x-auto rounded-lg border border-zinc-800">
+            <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>
+                </tr>
+              </thead>
+              <tbody>
+                {DASHBOARD_THIRD_PARTY.map((row) => (
+                  <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">
+                      <a
+                        href={row.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sky-400/90 underline-offset-2 hover:underline"
+                      >
+                        {row.url.replace(/^https:\/\//, "")}
+                      </a>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section className="mt-10" aria-labelledby="lic-dev">
+          <h2 id="lic-dev" className="text-base font-semibold text-zinc-200">
+            {c.devThirdPartySectionTitle}
+          </h2>
+          <div className="mt-4 overflow-x-auto rounded-lg border border-zinc-800">
+            <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>
+                </tr>
+              </thead>
+              <tbody>
+                {DASHBOARD_DEV_THIRD_PARTY.map((row) => (
+                  <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">
+                      <a
+                        href={row.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sky-400/90 underline-offset-2 hover:underline"
+                      >
+                        {row.url.replace(/^https:\/\//, "")}
+                      </a>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section className="mt-10" aria-labelledby="lic-fonts">
+          <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>
+          <ul className="mt-3 list-inside list-disc text-sm text-zinc-400">
+            <li>
+              <a
+                href="https://scripts.sil.org/OFL"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sky-400/90 underline-offset-2 hover:underline"
+              >
+                SIL Open Font License 1.1
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://fonts.google.com/specimen/Rubik"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sky-400/90 underline-offset-2 hover:underline"
+              >
+                Rubik (Google Fonts)
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://vercel.com/font"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sky-400/90 underline-offset-2 hover:underline"
+              >
+                Geist (Vercel)
+              </a>
+            </li>
+          </ul>
+        </section>
+
+        <section className="mt-10" aria-labelledby="lic-ext">
+          <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>
+        </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"} />
+    </div>
+  );
+}
+
+export default function LicensesPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-zinc-100 px-6 py-10 text-sm text-zinc-500 dark:bg-zinc-900">
+          Kronosys…
+        </div>
+      }
+    >
+      <LicensesBody />
+    </Suspense>
+  );
+}

package/app/manifest.ts

@@ -0,0 +1,32 @@
+import type { MetadataRoute } from "next";
+
+/** PWA : installation « Application » dans Chrome, Edge, Brave, etc. */
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Kronosys — Tableau de bord",
+    short_name: "Kronosys",
+    description:
+      "Tableau de bord local Kronosys — sessions, tâches et rapports via l’application web Next.js.",
+    start_url: "/",
+    scope: "/",
+    display: "standalone",
+    orientation: "any",
+    background_color: "#18181b",
+    theme_color: "#18181b",
+    categories: ["productivity", "developer"],
+    icons: [
+      {
+        src: "/icon-192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/icon-512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+    ],
+  };
+}