@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/ThemeToggle.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
+
+describe("ThemeToggle", () => {
+  it("bascule le thème au clic", async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeProvider>
+        <ThemeToggle lang="fr" />
+      </ThemeProvider>
+    );
+    const btn = screen.getByRole("button");
+    await waitFor(() => {
+      expect((btn as HTMLButtonElement).disabled).toBe(false);
+    });
+    const before = btn.getAttribute("aria-label");
+    await user.click(btn);
+    const after = btn.getAttribute("aria-label");
+    expect(before).toBeTruthy();
+    expect(after).toBeTruthy();
+    expect(before).not.toBe(after);
+  });
+});

package/components/dashboard/ThemeToggle.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useKronosysTheme } from "@/components/ThemeProvider";
+
+export function ThemeToggle({
+  lang,
+  className = "",
+}: {
+  lang: "en" | "fr";
+  className?: string;
+}) {
+  const { theme, toggleTheme, mounted } = useKronosysTheme();
+  const isDark = theme === "dark";
+  const aria =
+    lang === "fr"
+      ? isDark
+        ? "Passer au thème clair"
+        : "Passer au thème foncé"
+      : isDark
+        ? "Switch to light theme"
+        : "Switch to dark theme";
+
+  return (
+    <button
+      type="button"
+      className={`inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700 ${className}`}
+      aria-label={aria}
+      title={aria}
+      onClick={() => toggleTheme()}
+      disabled={!mounted}
+    >
+      {isDark ? <Sun size={20} aria-hidden /> : <Moon size={20} aria-hidden />}
+    </button>
+  );
+}

package/components/dashboard/UserGuideBodyText.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+
+/** Liens internes de type `[libellé](/path#ancre)` dans le texte du guide. */
+const INTERNAL_LINK = /\[([^\]]+)\]\((\/[^)]+)\)/g;
+
+const linkClassName =
+  "font-medium text-violet-700 underline decoration-violet-500/50 underline-offset-2 hover:text-violet-900 dark:text-violet-300 dark:hover:text-violet-100";
+
+function renderBoldFragment(s: string, keyPrefix: string): ReactNode[] {
+  const segs = s.split("**");
+  return segs.map((seg, i) =>
+    i % 2 === 1 ? (
+      <strong key={`${keyPrefix}-b${i}`}>{seg}</strong>
+    ) : (
+      <span key={`${keyPrefix}-b${i}`}>{seg}</span>
+    )
+  );
+}
+
+type Props = Readonly<{
+  line: string;
+  /** Conserve `?session=` comme les autres liens de l’appli. */
+  sessionId?: string | null;
+}>;
+
+/**
+ * Applique le gras `**` par paires et les liens internes `[texte](/chemin#ancre)`.
+ */
+export function UserGuideBodyText({ line, sessionId }: Props): ReactNode {
+  const matches = [...line.matchAll(INTERNAL_LINK)];
+  if (matches.length === 0) {
+    return <>{renderBoldFragment(line, "u0")}</>;
+  }
+  const out: ReactNode[] = [];
+  let pos = 0;
+  let k = 0;
+  for (const m of matches) {
+    if (m.index! > pos) {
+      out.push(...renderBoldFragment(line.slice(pos, m.index), `u${k++}`));
+    }
+    const rawHref = m[2];
+    const safe = rawHref.startsWith("/") && !rawHref.startsWith("//");
+    if (safe) {
+      const li = k++;
+      const href = withDashboardSessionParam(rawHref, sessionId ?? null);
+      out.push(
+        <Link key={`a${li}`} href={href} className={linkClassName}>
+          {renderBoldFragment(m[1], `in${li}`)}
+        </Link>
+      );
+    } else {
+      out.push(<span key={`raw${k}`}>{m[0]}</span>);
+    }
+    pos = m.index! + m[0].length;
+  }
+  if (pos < line.length) {
+    out.push(...renderBoldFragment(line.slice(pos), `u${k++}`));
+  }
+  return <>{out}</>;
+}

package/components/dashboard/WorkspaceGitRepoCard.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { ExternalLink, GitBranch } from "lucide-react";
+import { DashboardCollapsibleSection } from "@/components/dashboard/DashboardCollapsibleSection";
+import { InlineMetricHelpTrigger } from "@/components/dashboard/InlineMetricHelpTrigger";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import { openPlainTextInNewTab } from "@/lib/openPlainTextInNewTab";
+import type { GitRepoStatisticsPayload } from "@/lib/kronosysApi";
+
+function StatCell({
+  label,
+  value,
+  helpAria,
+  helpBody,
+}: {
+  label: string;
+  value: string | number;
+  helpAria: string;
+  helpBody: string;
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-zinc-100/80 px-3 py-2 dark:border-zinc-800/80 dark:bg-zinc-950/40">
+      <div className="flex min-h-5 items-center gap-0.5">
+        <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+          {label}
+        </span>
+        <InlineMetricHelpTrigger ariaLabel={helpAria} body={helpBody} />
+      </div>
+      <div className="mt-0.5 tabular-nums text-lg font-semibold text-zinc-900 dark:text-zinc-100">{value}</div>
+    </div>
+  );
+}
+
+export function WorkspaceGitRepoCard({
+  git,
+  t,
+  lang,
+}: {
+  git: GitRepoStatisticsPayload | undefined;
+  t: DashboardStrings;
+  lang: Lang;
+}) {
+  if (!git?.isGitRepo) {
+    return (
+      <DashboardCollapsibleSection
+        sectionAriaLabel={t.gitRepoCardTitle}
+        title={
+          <span className="flex items-center gap-2 text-sm font-semibold text-zinc-800 dark:text-zinc-200">
+            <GitBranch className="text-sky-400/90" size={18} aria-hidden />
+            {t.gitRepoCardTitle}
+          </span>
+        }
+      >
+        <p className="text-sm text-zinc-500">{t.gitRepoNotARepo}</p>
+      </DashboardCollapsibleSection>
+    );
+  }
+
+  const branch = git.currentBranch ?? "—";
+  const locals = git.localBranchCount ?? 0;
+  const remotes = git.remoteBranchCount ?? 0;
+  const onHead = git.commitsOnHead ?? 0;
+  const allRefs = git.commitsAllRefs;
+  const stashes = git.stashCount ?? 0;
+  const graph = git.logGraphLines ?? [];
+  const paths = git.trackedPathsSample ?? [];
+
+  return (
+    <DashboardCollapsibleSection
+      sectionAriaLabel={t.gitRepoCardTitle}
+      title={
+        <span className="flex flex-wrap items-center gap-2 text-sm font-semibold text-zinc-800 dark:text-zinc-200">
+          <GitBranch className="text-sky-400/90" size={18} aria-hidden />
+          {t.gitRepoCardTitle}
+        </span>
+      }
+      headerTrailing={<InlineMetricHelpTrigger ariaLabel={t.gitRepoCardHelpAria} body={t.gitRepoCardHelpBody} />}
+    >
+      <p className="text-xs text-zinc-500 dark:text-zinc-500">
+        <span className="font-medium text-zinc-600 dark:text-zinc-400">{t.gitRepoCurrentBranchLabel}</span>{" "}
+        <span className="font-mono text-zinc-800 dark:text-zinc-200">{branch}</span>
+      </p>
+
+      <div className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        <StatCell
+          label={t.gitRepoBranchesLocalLabel}
+          value={locals}
+          helpAria={t.gitRepoBranchesLocalHelpAria}
+          helpBody={t.gitRepoBranchesLocalHelpBody}
+        />
+        <StatCell
+          label={t.gitRepoBranchesRemoteLabel}
+          value={remotes}
+          helpAria={t.gitRepoBranchesRemoteHelpAria}
+          helpBody={t.gitRepoBranchesRemoteHelpBody}
+        />
+        <StatCell
+          label={t.gitRepoCommitsHeadLabel}
+          value={onHead}
+          helpAria={t.gitRepoCommitsHeadHelpAria}
+          helpBody={t.gitRepoCommitsHeadHelpBody}
+        />
+        <StatCell
+          label={t.gitRepoCommitsAllLabel}
+          value={typeof allRefs === "number" ? allRefs : "—"}
+          helpAria={t.gitRepoCommitsAllHelpAria}
+          helpBody={t.gitRepoCommitsAllHelpBody}
+        />
+        <StatCell
+          label={t.gitRepoStashesLabel}
+          value={stashes}
+          helpAria={t.gitRepoStashesHelpAria}
+          helpBody={t.gitRepoStashesHelpBody}
+        />
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-2">
+        <div>
+          <div className="mb-1 flex min-h-5 flex-wrap items-center gap-x-0.5 gap-y-0">
+            <span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">{t.gitRepoGraphTitle}</span>
+            <InlineMetricHelpTrigger ariaLabel={t.gitRepoGraphHelpAria} body={t.gitRepoGraphHelpBody} />
+          </div>
+          {graph.length > 0 ? (
+            <p className="mb-1.5 text-[0.65rem] leading-snug text-zinc-500">{t.gitRepoGraphPreviewNote}</p>
+          ) : null}
+          {graph.length === 0 ? (
+            <p className="text-sm text-zinc-500">{t.gitRepoGraphEmpty}</p>
+          ) : (
+            <button
+              type="button"
+              title={t.gitRepoGraphOpenFullTitle}
+              aria-label={t.gitRepoGraphOpenFullAria}
+              onClick={() =>
+                openPlainTextInNewTab({
+                  documentTitle: t.gitRepoGraphDetailDocTitle,
+                  heading: t.gitRepoGraphTitle,
+                  body: graph.join("\n"),
+                  lang,
+                })
+              }
+              className="group relative max-h-28 w-full cursor-pointer overflow-auto rounded-lg border border-zinc-200 bg-zinc-100/90 p-2 text-left text-[0.6rem] leading-snug text-zinc-700 transition-colors hover:border-zinc-400 hover:bg-zinc-200/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-zinc-800/80 dark:bg-zinc-950/60 dark:text-zinc-300 dark:hover:border-zinc-600/90 dark:hover:bg-zinc-950/80 dark:focus-visible:ring-offset-zinc-950"
+            >
+              <ExternalLink
+                className="pointer-events-none absolute top-1.5 right-1.5 z-10 text-zinc-500 opacity-70 group-hover:text-sky-600 group-hover:opacity-100 dark:group-hover:text-sky-400/90"
+                size={12}
+                strokeWidth={2}
+                aria-hidden
+              />
+              <pre className="pointer-events-none m-0 whitespace-pre wrap-normal pr-5 font-mono">{graph.join("\n")}</pre>
+            </button>
+          )}
+        </div>
+        <div>
+          <div className="mb-1 flex min-h-5 flex-wrap items-center gap-x-0.5 gap-y-0">
+            <span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">{t.gitRepoTreeTitle}</span>
+            <InlineMetricHelpTrigger ariaLabel={t.gitRepoTreeHelpAria} body={t.gitRepoTreeHelpBody} />
+          </div>
+          {paths.length > 0 ? (
+            <p className="mb-1.5 text-[0.65rem] leading-snug text-zinc-500">{t.gitRepoTreePreviewNote}</p>
+          ) : null}
+          {paths.length === 0 ? (
+            <p className="text-sm text-zinc-500">{t.gitRepoTreeEmpty}</p>
+          ) : (
+            <button
+              type="button"
+              title={t.gitRepoTreeOpenFullTitle}
+              aria-label={t.gitRepoTreeOpenFullAria}
+              onClick={() =>
+                openPlainTextInNewTab({
+                  documentTitle: t.gitRepoTreeDetailDocTitle,
+                  heading: t.gitRepoTreeTitle,
+                  body: paths.join("\n"),
+                  lang,
+                })
+              }
+              className="group relative max-h-28 w-full cursor-pointer overflow-auto rounded-lg border border-zinc-200 bg-zinc-100/90 p-2 text-left text-[0.6rem] leading-snug text-zinc-700 transition-colors hover:border-zinc-400 hover:bg-zinc-200/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-zinc-800/80 dark:bg-zinc-950/60 dark:text-zinc-300 dark:hover:border-zinc-600/90 dark:hover:bg-zinc-950/80 dark:focus-visible:ring-offset-zinc-950"
+            >
+              <ExternalLink
+                className="pointer-events-none absolute top-1.5 right-1.5 z-10 text-zinc-500 opacity-70 group-hover:text-sky-600 group-hover:opacity-100 dark:group-hover:text-sky-400/90"
+                size={12}
+                strokeWidth={2}
+                aria-hidden
+              />
+              <pre className="pointer-events-none m-0 whitespace-pre font-mono pr-5">{paths.join("\n")}</pre>
+            </button>
+          )}
+        </div>
+      </div>
+    </DashboardCollapsibleSection>
+  );
+}

package/components/dashboard/taskFieldStyles.ts

@@ -0,0 +1,139 @@
+/**
+ * Styles communs : champs plus hauts (~+50 %), texte ~+30 % (text-lg vs text-sm),
+ * padding généreux et leading-relaxed pour éviter l’effet serré.
+ */
+export const TASK_BODY_INPUT_CLASS =
+  "min-h-[3rem] w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3.5 py-3.5 text-lg leading-relaxed text-zinc-100 outline-none placeholder:text-zinc-600 ring-violet-500/30 focus:ring-2";
+
+/** Champ « nouvelle tâche » : ligne de saisie sans encadré (soulignement seulement), texte blanc. */
+export const TASK_FOCUS_LAUNCHER_INPUT_CLASS =
+  "min-h-[2.75rem] w-full border-0 border-b border-zinc-400 bg-transparent px-0 py-2 text-xl leading-relaxed text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-zinc-600 focus:ring-0 rounded-none dark:border-zinc-600 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-zinc-200";
+
+/** Même champ en rangée avec les boutons (minuteur, démarrer) : hauteur h-10, `flex-1` sans `w-full`. */
+export const TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS =
+  "h-10 min-h-10 min-w-0 flex-1 border-0 border-b border-zinc-400 bg-transparent px-0 text-xl leading-snug text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-zinc-600 focus:ring-0 rounded-none dark:border-zinc-600 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-zinc-200";
+
+/**
+ * Déclencheur date-heure (tâche passée, popover thémée) : violet / zinc comme le reste du tableau de bord.
+ */
+export const TASK_PAST_DATETIME_TRIGGER_CLASS =
+  "h-9 w-auto min-w-[8.5rem] max-w-[13rem] shrink-0 rounded-lg border border-violet-500/45 bg-violet-500/10 px-2 py-1 font-mono text-xs tabular-nums text-zinc-800 shadow-none outline-none transition-[border-color,background-color,box-shadow] [color-scheme:light] focus-visible:border-violet-500/75 focus-visible:bg-violet-500/15 focus-visible:ring-2 focus-visible:ring-violet-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)] dark:border-violet-400/40 dark:bg-violet-600/18 dark:text-zinc-100 dark:[color-scheme:dark] dark:focus-visible:border-violet-400/60 dark:focus-visible:bg-violet-600/26 dark:focus-visible:ring-violet-400/25 dark:focus-visible:ring-offset-[var(--background)]";
+
+/** Titre tâche en session (lecture) : volontairement plus petit que le champ « nouvelle tâche ». */
+export const TASK_ACTIVE_TITLE_READ_CLASS =
+  "text-base font-medium leading-snug [scrollbar-width:thin]";
+
+/** Édition du titre de la tâche active (même ligne / hauteur que la rangée d’actions). */
+export const TASK_ACTIVE_TITLE_EDIT_INPUT_CLASS =
+  "h-10 w-full min-w-0 border-0 border-b border-zinc-400 bg-transparent px-0 text-base font-medium leading-snug text-zinc-900 outline-none ring-0 placeholder:text-zinc-500 focus:border-zinc-600 focus:ring-0 rounded-none dark:border-zinc-500 dark:text-white dark:placeholder:text-zinc-600 dark:focus:border-zinc-200";
+
+/** Édition du titre de tâche (bordure violette). */
+export const TASK_TITLE_EDIT_INPUT_CLASS =
+  "min-h-[3rem] w-full rounded-lg border border-violet-500/50 bg-zinc-950 px-3.5 py-3.5 text-lg leading-relaxed text-zinc-100 outline-none focus:ring-2 focus:ring-violet-500";
+
+/** Sous-tâche : champ d’édition dans la ligne (aligné sur la ligne titre). */
+export const TASK_SUBTASK_ROW_INPUT_CLASS =
+  "h-10 w-full min-w-0 border-0 border-b border-violet-500/70 bg-transparent px-0 text-base font-medium leading-snug text-zinc-900 outline-none ring-0 placeholder:text-zinc-500 focus:border-violet-500 focus:ring-0 rounded-none dark:text-zinc-100 dark:placeholder:text-zinc-600 dark:focus:border-violet-400";
+
+/** Nouvelle sous-tâche (ligne d’ajout). */
+export const TASK_SUBTASK_NEW_INPUT_CLASS =
+  "min-h-[3rem] min-w-0 flex-1 rounded-lg border border-zinc-700 bg-zinc-950 px-3.5 py-3.5 text-lg leading-relaxed text-zinc-100 outline-none focus:ring-2 focus:ring-violet-500/50";
+
+/** Nouvelle sous-tâche : même principe que la ligne de titre (soulignement, Entrée pour valider). */
+export const TASK_SUBTASK_NEW_INLINE_CLASS =
+  "min-h-10 w-full border-0 border-b border-zinc-400/90 bg-transparent px-0 py-2 text-base font-medium leading-snug text-zinc-900 outline-none placeholder:text-zinc-500 focus:border-zinc-600 focus:ring-0 rounded-none dark:border-zinc-600/80 dark:text-zinc-100 dark:placeholder:text-zinc-600 dark:focus:border-zinc-400";
+
+/** Hauteur commune pastilles / suggestions tag (~30px, +50 % vs 20px). */
+export const TAG_ROW_MIN_H = "min-h-[1.875rem]";
+
+/** Pastille d’étiquette (lecture seule ou cliquable). */
+export const TAG_CHIP_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-zinc-300 bg-zinc-100 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-zinc-800 dark:border-zinc-600/65 dark:bg-zinc-800/55 dark:text-zinc-400`;
+
+/** Étiquette appliquée à la tâche en cours (liste sous le titre, tâche active). */
+export const TAG_CHIP_APPLIED_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-emerald-500/45 bg-emerald-50 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-emerald-900 shadow-[0_0_12px_rgba(16,185,129,0.08)] dark:border-emerald-500/55 dark:bg-emerald-950/45 dark:text-emerald-200 dark:shadow-[0_0_12px_rgba(16,185,129,0.12)]`;
+
+/** Pastille avec suppression (édition). */
+export const TAG_CHIP_REMOVABLE_CLASS = `${TAG_CHIP_CLASS} !cursor-pointer hover:border-zinc-400 hover:bg-zinc-200/90 hover:text-zinc-950 dark:hover:border-zinc-500 dark:hover:bg-zinc-700/45 dark:hover:text-zinc-200`;
+
+/** Même style « allumé » pour l’édition avec suppression. */
+export const TAG_CHIP_APPLIED_REMOVABLE_CLASS = `${TAG_CHIP_APPLIED_CLASS} !cursor-pointer hover:border-emerald-600/55 hover:bg-emerald-100 dark:hover:border-emerald-400/70 dark:hover:bg-emerald-900/40`;
+
+/**
+ * Étiquette de portée projet (`projet#local`, souvent implicite via `@projet#…` dans le titre) :
+ * même famille verte que {@link TAG_CHIP_APPLIED_CLASS}, sans fond — lecture seule.
+ */
+export const TAG_CHIP_APPLIED_SCOPED_READONLY_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-emerald-600/55 bg-transparent px-2.5 py-1 text-[0.94rem] font-medium leading-none text-emerald-800 dark:border-emerald-500/60 dark:bg-transparent dark:text-emerald-300`;
+
+/** Variante interactive du style portée projet (sélecteur d’étiquettes). */
+export const TAG_CHIP_APPLIED_SCOPED_TOGGLE_CLASS = `${TAG_CHIP_APPLIED_SCOPED_READONLY_CLASS} !cursor-pointer transition-colors hover:border-emerald-700/65 hover:bg-emerald-500/10 dark:hover:border-emerald-400/75 dark:hover:bg-emerald-400/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`;
+
+/** Ligne sous le titre : pastilles d’étiquettes. */
+export const TASK_TAGS_ROW_CLASS =
+  "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1.5 [&>*]:max-w-full";
+
+/** Suggestion d’étiquette enregistrée (même échelle que les pastilles). */
+export const TAG_SUGGEST_CHIP_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-pointer select-none rounded border border-zinc-300 bg-zinc-100 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-zinc-700 hover:border-emerald-500/50 hover:bg-emerald-50 hover:text-emerald-900 dark:border-zinc-600/50 dark:bg-zinc-800/40 dark:text-zinc-400 dark:hover:border-emerald-700/50 dark:hover:bg-emerald-950/35 dark:hover:text-emerald-200/90`;
+
+/** Suggestion de projet enregistré (`@nom`) : même rendu « éteint » que les tags tant que le projet n’est pas appliqué. */
+export const PROJECT_SUGGEST_CHIP_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-pointer select-none rounded border border-zinc-300 bg-zinc-100 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-zinc-700 hover:border-sky-500/50 hover:bg-sky-50 hover:text-sky-900 dark:border-zinc-600/50 dark:bg-zinc-800/40 dark:text-zinc-400 dark:hover:border-sky-700/50 dark:hover:bg-sky-950/35 dark:hover:text-sky-200/90`;
+
+/** Pastille projet appliquée (ligne sous le titre). */
+export const PROJECT_CHIP_APPLIED_CLASS = `inline-flex items-center gap-1 ${TAG_ROW_MIN_H} cursor-default select-none rounded border border-sky-500/50 bg-sky-50 px-2.5 py-1 text-[0.94rem] font-medium leading-none text-sky-900 dark:border-sky-500/55 dark:bg-sky-950/40 dark:text-sky-100`;
+
+// --- Rendu « texte » (tâches : sans boîtes type pastille) ----------------------------------------
+
+/** Étiquette affichée sur une tâche, lecture seule. */
+export const TAG_INLINE_APPLIED_READONLY =
+  "text-[0.9375rem] font-medium text-emerald-800 dark:text-emerald-200";
+
+/** Étiquette de portée projet sur une tâche, lecture seule. */
+export const TAG_INLINE_APPLIED_SCOPED_READONLY =
+  "text-[0.9375rem] font-medium text-emerald-800 border-b border-dotted border-emerald-500/55 dark:text-emerald-200";
+
+/** Étiquette de portée projet sur une tâche, retirable. */
+export const TAG_INLINE_APPLIED_SCOPED_REMOVABLE =
+  "inline-flex cursor-pointer items-baseline gap-1 rounded px-0.5 text-[0.9375rem] font-medium text-emerald-800 border-b border-dotted border-emerald-500/55 transition-colors hover:bg-emerald-500/10 dark:text-emerald-200 dark:hover:bg-emerald-400/10";
+
+/** Étiquette appliquée retirable (édition). */
+export const TAG_INLINE_APPLIED_REMOVABLE =
+  "inline-flex cursor-pointer items-baseline gap-1 rounded px-0.5 text-[0.9375rem] font-medium text-emerald-800 transition-colors hover:bg-emerald-500/10 dark:text-emerald-200 dark:hover:bg-emerald-400/10";
+
+/** Étiquette hors variante « applied » (lecture seule). */
+export const TAG_INLINE_NEUTRAL_READONLY =
+  "text-[0.9375rem] font-medium text-zinc-700 dark:text-zinc-300";
+
+/** Étiquette hors variante « applied », retirable. */
+export const TAG_INLINE_NEUTRAL_REMOVABLE =
+  "inline-flex cursor-pointer items-baseline gap-1 rounded px-0.5 text-[0.9375rem] font-medium text-zinc-700 transition-colors hover:bg-zinc-500/10 dark:text-zinc-300 dark:hover:bg-zinc-600/20";
+
+/** Raccourci étiquette inactif (ligne de suggestions). */
+export const TAG_INLINE_SUGGEST =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-medium text-zinc-600 transition-colors hover:text-violet-700 dark:text-zinc-400 dark:hover:text-violet-300";
+
+/** Raccourci étiquette actif. */
+export const TAG_INLINE_SUGGEST_SELECTED =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-semibold text-emerald-800 underline decoration-emerald-500/80 decoration-2 underline-offset-4 dark:text-emerald-200";
+
+/** Raccourci étiquette actif, portée projet (`projet#code`). */
+export const TAG_INLINE_SUGGEST_SCOPED_SELECTED =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-semibold text-emerald-800 border-b-2 border-dotted border-emerald-600 dark:text-emerald-200";
+
+/** Projet appliqué en style texte (ex. légendes compactes hors carte tâche). */
+export const PROJECT_INLINE_APPLIED =
+  "text-[0.9375rem] font-semibold text-sky-900 dark:text-sky-100";
+
+/** Raccourci projet inactif. */
+export const PROJECT_INLINE_SUGGEST =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-medium text-zinc-600 transition-colors hover:text-sky-800 dark:text-zinc-400 dark:hover:text-sky-200";
+
+/** Raccourci projet actif. */
+export const PROJECT_INLINE_SUGGEST_SELECTED =
+  "shrink-0 rounded-sm px-0.5 py-0.5 text-left text-[0.9375rem] font-semibold text-sky-900 underline decoration-sky-500/80 decoration-2 underline-offset-4 dark:text-sky-100";
+
+/**
+ * Champ d’ajout rapide `#` / `@` à côté des étiquettes : même taille et graisse que
+ * {@link TAG_INLINE_APPLIED_READONLY}, interligne confortable (`leading-relaxed`), fond discret
+ * proche de la teinte des étiquettes appliquées.
+ */
+export const TAG_PROJECT_INLINE_ADD_INPUT_CLASS =
+  "box-border min-h-9 min-w-[5.5rem] w-full max-w-full rounded-md border border-zinc-300/85 bg-emerald-50/35 px-2 py-1.5 text-[0.9375rem] font-medium leading-relaxed text-zinc-800 shadow-sm outline-none placeholder:font-normal placeholder:text-zinc-400 focus-visible:border-emerald-500/55 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-emerald-500/25 dark:border-zinc-600 dark:bg-emerald-950/20 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus-visible:border-emerald-500/50 dark:focus-visible:bg-zinc-950 dark:focus-visible:ring-emerald-400/20";

package/components/dashboard/useAnchoredFloatingPortalStyle.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useLayoutEffect, useState, type CSSProperties, type RefObject } from "react";
+
+const VIEW_MARGIN = 10;
+const GAP_PX = 4;
+
+export type AnchoredFloatingAlign = "start" | "end";
+
+/**
+ * Position `fixed` pour un panneau en portail (évite le clip des ancêtres `overflow-*`
+ * et les barres de défilement sur les rangées scrollables).
+ */
+export function useAnchoredFloatingPortalStyle(
+  open: boolean,
+  triggerRef: RefObject<HTMLElement | null>,
+  panelRef: RefObject<HTMLElement | null>,
+  opts: { align: AnchoredFloatingAlign; maxWidthRem: number }
+): CSSProperties | undefined {
+  const [style, setStyle] = useState<CSSProperties | undefined>(undefined);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setStyle(undefined);
+      return;
+    }
+
+    const apply = () => {
+      const trig = triggerRef.current;
+      if (!trig) {
+        return;
+      }
+      const r = trig.getBoundingClientRect();
+      const vw = globalThis.innerWidth;
+      const vh = globalThis.innerHeight;
+      const w = Math.min(opts.maxWidthRem * 16, vw - 2 * VIEW_MARGIN);
+      let left = opts.align === "end" ? r.right - w : r.left;
+      left = Math.max(VIEW_MARGIN, Math.min(left, vw - w - VIEW_MARGIN));
+      let top = r.bottom + GAP_PX;
+      const panel = panelRef.current;
+      if (panel) {
+        const ph = panel.getBoundingClientRect().height;
+        if (top + ph > vh - VIEW_MARGIN) {
+          top = Math.max(VIEW_MARGIN, r.top - GAP_PX - ph);
+        }
+      }
+      if (top < VIEW_MARGIN) {
+        top = VIEW_MARGIN;
+      }
+      setStyle({
+        position: "fixed",
+        top,
+        left,
+        width: w,
+        zIndex: 80,
+      });
+    };
+
+    apply();
+    const raf = requestAnimationFrame(apply);
+    globalThis.addEventListener("scroll", apply, true);
+    globalThis.addEventListener("resize", apply);
+    return () => {
+      cancelAnimationFrame(raf);
+      globalThis.removeEventListener("scroll", apply, true);
+      globalThis.removeEventListener("resize", apply);
+    };
+  }, [open, opts.align, opts.maxWidthRem, triggerRef, panelRef]);
+
+  return open ? style : undefined;
+}