@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/SettingsTagsProjectsSection.tsx

@@ -0,0 +1,993 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { EyeOff, FolderKanban, Pin, PinOff, Play, Plus, RotateCcw, Save, Tags, Trash2 } from "lucide-react";
+import { postKronosysAction } from "@/lib/kronosysApi";
+import type { KronosysUpdatePayload } from "@/lib/kronosysApi";
+import type { Lang } from "@/lib/dashboardCopy";
+import type { SettingsCopy } from "@/lib/settingsCopy";
+import {
+  buildStartTaskFromDraft,
+  formatProjectDisplay,
+  formatTagDisplay,
+  normalizeProjectKey,
+  normalizeTagKey,
+  parseProjectScopedTag,
+} from "@/lib/taskParsing";
+import { DashboardConfirmModal, DashboardTriActionModal } from "./DashboardSimpleModal";
+import { useDashboardToast } from "@/components/dashboard/DashboardToastProvider";
+import { InlineMetricHelpTrigger } from "./InlineMetricHelpTrigger";
+import {
+  readConcurrentTaskStartPreference,
+  writeConcurrentTaskStartPreference,
+  type ConcurrentTaskStartPreference,
+} from "@/lib/concurrentTaskStartPreference";
+
+const TEXTAREA_CLASS =
+  "mt-1 w-full max-w-md rounded-lg border border-zinc-300 bg-white px-2.5 py-1.5 text-xs text-zinc-900 outline-none ring-violet-500/30 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100";
+
+const INLINE_INPUT_CLASS =
+  "w-full bg-transparent text-xs text-zinc-600 outline-none placeholder:text-zinc-400 focus:border-b focus:border-violet-500/50 dark:text-zinc-400 dark:placeholder:text-zinc-600 dark:focus:border-violet-400/50";
+
+const CARD_CLASS =
+  "scroll-mt-24 rounded-xl border border-zinc-200 bg-zinc-50/90 p-4 dark:border-zinc-800 dark:bg-zinc-900/40";
+
+const ICON_BTN =
+  "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 disabled:opacity-40 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800";
+
+const ICON_BTN_DANGER =
+  "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-red-700/55 bg-white text-red-800 shadow-sm transition hover:border-red-700 hover:bg-red-50 disabled:opacity-40 dark:border-red-800/55 dark:bg-red-950/30 dark:text-red-200 dark:hover:bg-red-950/50";
+
+const ICON_BTN_SAVE =
+  "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-violet-400 hover:bg-violet-50 hover:text-violet-900 disabled:opacity-40 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-200 dark:hover:border-violet-500/50 dark:hover:bg-violet-950/40 dark:hover:text-violet-100";
+
+const ICON_BTN_PRIMARY =
+  "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-violet-500/50 bg-violet-500/10 text-violet-800 shadow-sm transition hover:border-violet-500/75 hover:bg-violet-500/18 disabled:opacity-40 dark:border-violet-400/45 dark:bg-violet-600/20 dark:text-violet-100 dark:hover:border-violet-400/60 dark:hover:bg-violet-600/30";
+
+type LiveActiveTaskShape = { id: string; isDone?: boolean; manualTaskTimerPaused?: boolean };
+
+type CurrentSessionShape = {
+  sessionId?: string;
+  activeTasks?: LiveActiveTaskShape[];
+  activeTask?: LiveActiveTaskShape | null;
+};
+
+function runningTrackingTasks(live: CurrentSessionShape | null | undefined): LiveActiveTaskShape[] {
+  if (!live) {
+    return [];
+  }
+  const raw =
+    Array.isArray(live.activeTasks) && live.activeTasks.length > 0
+      ? live.activeTasks
+      : live.activeTask
+        ? [live.activeTask]
+        : [];
+  return raw.filter((t): t is LiveActiveTaskShape => !!t && !t.isDone && !t.manualTaskTimerPaused);
+}
+
+type ConfirmState =
+  | null
+  | { kind: "unpin"; tag: string }
+  | { kind: "exclude"; tag: string }
+  | { kind: "purgeTag"; tag: string; fromExcludedList?: boolean }
+  | { kind: "purgeProject"; name: string };
+
+type TagEditorRowProps = {
+  tag: string;
+  fieldId: string;
+  s: SettingsCopy;
+  disabled: boolean;
+  localTagDesc: Record<string, string>;
+  setLocalTagDesc: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  pinnedKeys: Set<string>;
+  post: (body: Record<string, unknown>) => Promise<void>;
+  setConfirm: (c: ConfirmState) => void;
+  onStartTrackedTask?: () => void;
+};
+
+function SettingsTagEditorRow({
+  tag,
+  fieldId,
+  s,
+  disabled,
+  localTagDesc,
+  setLocalTagDesc,
+  pinnedKeys,
+  post,
+  setConfirm,
+  onStartTrackedTask,
+}: TagEditorRowProps) {
+  const tagKey = normalizeTagKey(tag).toLowerCase();
+  const isPinned = pinnedKeys.has(tagKey);
+  return (
+    <li className="border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800/90">
+      <div className="flex flex-col gap-2.5">
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          <span className="font-mono text-sm text-zinc-900 dark:text-zinc-100">{formatTagDisplay(tag)}</span>
+          {isPinned ? (
+            <span className="rounded border border-violet-500/45 bg-violet-500/10 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-violet-800 dark:text-violet-200">
+              {s.tagBadgePinned}
+            </span>
+          ) : null}
+        </div>
+        <input
+          id={fieldId}
+          type="text"
+          className={INLINE_INPUT_CLASS}
+          value={localTagDesc[tagKey] ?? ""}
+          onChange={(e) => setLocalTagDesc((prev) => ({ ...prev, [tagKey]: e.target.value }))}
+          disabled={disabled}
+          placeholder={s.tagDescriptionLabel}
+          spellCheck
+        />
+        <div className="flex flex-wrap items-center gap-1.5">
+          {!isPinned ? (
+            <button
+              type="button"
+              className={ICON_BTN}
+              disabled={disabled}
+              title={s.tagPinBtn}
+              aria-label={s.tagPinBtn}
+              onClick={() => void post({ type: "addUserKnownTag", tag })}
+            >
+              <Pin size={16} strokeWidth={2} aria-hidden />
+            </button>
+          ) : (
+            <button
+              type="button"
+              className={ICON_BTN}
+              disabled={disabled}
+              title={s.tagUnpinBtn}
+              aria-label={s.tagUnpinBtn}
+              onClick={() => setConfirm({ kind: "unpin", tag })}
+            >
+              <PinOff size={16} strokeWidth={2} aria-hidden />
+            </button>
+          )}
+          <button
+            type="button"
+            className={ICON_BTN}
+            disabled={disabled}
+            title={s.tagExcludeBtn}
+            aria-label={s.tagExcludeBtn}
+            onClick={() => setConfirm({ kind: "exclude", tag })}
+          >
+            <EyeOff size={16} strokeWidth={2} aria-hidden />
+          </button>
+          <button
+            type="button"
+            className={ICON_BTN_DANGER}
+            disabled={disabled}
+            title={s.tagPurgeAriaLabel}
+            aria-label={s.tagPurgeAriaLabel}
+            onClick={() => setConfirm({ kind: "purgeTag", tag })}
+          >
+            <Trash2 size={16} strokeWidth={2} aria-hidden />
+          </button>
+          <button
+            type="button"
+            className={ICON_BTN_SAVE}
+            disabled={disabled}
+            title={s.descriptionSaveBtn}
+            aria-label={s.descriptionSaveBtn}
+            onClick={() =>
+              void post({
+                type: "setTagDescription",
+                tag,
+                description: localTagDesc[tagKey] ?? "",
+              })
+            }
+          >
+            <Save size={16} strokeWidth={2} aria-hidden />
+          </button>
+          {onStartTrackedTask ? (
+            <button
+              type="button"
+              className={ICON_BTN_PRIMARY}
+              disabled={disabled}
+              title={s.tagStartTrackedTaskBtn}
+              aria-label={s.tagStartTrackedTaskBtn}
+              onClick={() => void onStartTrackedTask()}
+            >
+              <Play size={16} strokeWidth={2} className="ml-0.5" fill="currentColor" aria-hidden />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export function SettingsTagsProjectsSection({
+  s,
+  lang: _lang,
+  payload,
+  saving,
+  refresh,
+  variant = "settings",
+}: {
+  s: SettingsCopy;
+  lang: Lang;
+  payload: KronosysUpdatePayload | null;
+  saving: boolean;
+  refresh: (options?: { preserveForm?: boolean; routerInvalidate?: boolean }) => Promise<boolean | void>;
+  /** `dashboard` : pas de titre de page ni bordure de section (colonne du tableau de bord). */
+  variant?: "settings" | "dashboard";
+}) {
+  void _lang;
+  const pid = variant === "dashboard" ? "dashboard" : "settings";
+  const showPageHeader = variant === "settings";
+  const [pinGlobalDraft, setPinGlobalDraft] = useState("");
+  /** Brouillon d’épingle Projet#code par clé de projet (minuscules). */
+  const [pinScopedByProject, setPinScopedByProject] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [confirm, setConfirm] = useState<ConfirmState>(null);
+  /** Colonne tableau de bord : onglets globaux / projets (paramètres : affichage continu inchangé). */
+  const [dashTagsTab, setDashTagsTab] = useState<"global" | "projects">("global");
+  const pendingStartRef = useRef<{ name: string; tags: string[]; project?: string } | null>(null);
+  const [trackingConflictOpen, setTrackingConflictOpen] = useState(false);
+  const [rememberConcurrentChoice, setRememberConcurrentChoice] = useState(false);
+  const { pushToast } = useDashboardToast();
+
+  const knownTags = (payload?.knownTags ?? []) as string[];
+  const knownProjects = (payload?.knownProjects ?? []) as string[];
+  const userKnownTags = (payload?.userKnownTags ?? []) as string[];
+  const excludedRaw = (payload?.excludedSuggestionTags ?? []) as string[];
+  const tagDescFromPayload = (payload?.tagDescriptions ?? {}) as Record<string, string>;
+  const projectDescFromPayload = (payload?.projectDescriptions ?? {}) as Record<string, string>;
+  const tagDescSerialized = JSON.stringify(tagDescFromPayload);
+  const projectDescSerialized = JSON.stringify(projectDescFromPayload);
+
+  const [localTagDesc, setLocalTagDesc] = useState<Record<string, string>>({});
+  const [localProjectDesc, setLocalProjectDesc] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    try {
+      setLocalTagDesc(JSON.parse(tagDescSerialized) as Record<string, string>);
+    } catch {
+      setLocalTagDesc({});
+    }
+  }, [tagDescSerialized]);
+
+  useEffect(() => {
+    try {
+      setLocalProjectDesc(JSON.parse(projectDescSerialized) as Record<string, string>);
+    } catch {
+      setLocalProjectDesc({});
+    }
+  }, [projectDescSerialized]);
+
+  const pinnedKeys = useMemo(
+    () => new Set(userKnownTags.map((t) => normalizeTagKey(t).toLowerCase())),
+    [userKnownTags]
+  );
+
+  const { globalKnownTags, scopedSections } = useMemo(() => {
+    const global: string[] = [];
+    const scopedMap = new Map<string, { tags: string[]; displayProject: string }>();
+    for (const tag of knownTags) {
+      const nk = normalizeTagKey(tag);
+      const scoped = parseProjectScopedTag(nk);
+      if (!scoped) {
+        global.push(tag);
+        continue;
+      }
+      const lk = scoped.projectKey.toLowerCase();
+      let entry = scopedMap.get(lk);
+      if (!entry) {
+        entry = { tags: [], displayProject: scoped.projectKey };
+        scopedMap.set(lk, entry);
+      }
+      const tkl = nk.toLowerCase();
+      if (!entry.tags.some((x) => normalizeTagKey(x).toLowerCase() === tkl)) {
+        entry.tags.push(tag);
+      }
+    }
+    for (const p of knownProjects) {
+      const lk = normalizeProjectKey(p).toLowerCase();
+      const entry = scopedMap.get(lk);
+      if (entry) {
+        entry.displayProject = normalizeProjectKey(p);
+      }
+    }
+    for (const [, entry] of scopedMap) {
+      entry.tags.sort((a, b) =>
+        normalizeTagKey(a).localeCompare(normalizeTagKey(b), undefined, { sensitivity: "base" })
+      );
+    }
+    global.sort((a, b) =>
+      normalizeTagKey(a).localeCompare(normalizeTagKey(b), undefined, { sensitivity: "base" })
+    );
+    const projectOrderLower: string[] = [];
+    const seen = new Set<string>();
+    for (const p of knownProjects) {
+      const lk = normalizeProjectKey(p).toLowerCase();
+      if (!seen.has(lk)) {
+        seen.add(lk);
+        projectOrderLower.push(lk);
+      }
+    }
+    for (const lk of [...scopedMap.keys()].sort((a, b) => a.localeCompare(b))) {
+      if (!seen.has(lk)) {
+        seen.add(lk);
+        projectOrderLower.push(lk);
+      }
+    }
+    const scopedSections = projectOrderLower.map((lk) => ({
+      projectLower: lk,
+      displayProject: scopedMap.get(lk)?.displayProject ?? lk,
+      tags: scopedMap.get(lk)?.tags ?? [],
+    }));
+    return { globalKnownTags: global, scopedSections };
+  }, [knownTags, knownProjects]);
+
+  const knownProjectLowerSet = useMemo(
+    () => new Set(knownProjects.map((p) => normalizeProjectKey(p).toLowerCase())),
+    [knownProjects]
+  );
+
+  const orphanScopedSections = useMemo(
+    () => scopedSections.filter((sec) => !knownProjectLowerSet.has(sec.projectLower)),
+    [scopedSections, knownProjectLowerSet]
+  );
+
+  const post = async (body: Record<string, unknown>) => {
+    setBusy(true);
+    try {
+      await postKronosysAction(body);
+      await refresh({ preserveForm: true });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const disabled = saving || busy;
+
+  const addPinGlobal = async () => {
+    const t = pinGlobalDraft.replace(/^#/, "").trim();
+    if (!t || parseProjectScopedTag(t)) {
+      return;
+    }
+    await post({ type: "addUserKnownTag", tag: t });
+    setPinGlobalDraft("");
+  };
+
+  const addPinScopedForProject = async (canonicalProject: string, projectLower: string) => {
+    const raw = (pinScopedByProject[projectLower] ?? "").replace(/^#/, "").trim();
+    if (!raw) {
+      return;
+    }
+    const parsed = parseProjectScopedTag(raw);
+    let tag: string;
+    if (parsed) {
+      if (normalizeProjectKey(parsed.projectKey).toLowerCase() !== projectLower) {
+        return;
+      }
+      tag = `${parsed.projectKey}#${parsed.localTag}`;
+    } else {
+      tag = `${normalizeProjectKey(canonicalProject)}#${raw}`;
+    }
+    if (!parseProjectScopedTag(tag)) {
+      return;
+    }
+    await post({ type: "addUserKnownTag", tag: normalizeTagKey(tag) });
+    setPinScopedByProject((prev) => ({ ...prev, [projectLower]: "" }));
+  };
+
+  const scopedPinDraftIsSubmittable = (projectLower: string) => {
+    const raw = (pinScopedByProject[projectLower] ?? "").replace(/^#/, "").trim();
+    if (!raw) {
+      return false;
+    }
+    const parsed = parseProjectScopedTag(raw);
+    if (parsed) {
+      return normalizeProjectKey(parsed.projectKey).toLowerCase() === projectLower;
+    }
+    return true;
+  };
+
+  const flushPendingStartTask = useCallback(async () => {
+    const draft = pendingStartRef.current;
+    if (!draft) {
+      return;
+    }
+    pendingStartRef.current = null;
+    setBusy(true);
+    try {
+      await postKronosysAction({
+        type: "startTask",
+        name: draft.name,
+        tags: draft.tags,
+        startKronoFocus: false,
+        ...(draft.project ? { project: draft.project } : {}),
+      });
+      await refresh({ preserveForm: true });
+    } finally {
+      setBusy(false);
+    }
+  }, [refresh]);
+
+  const resolveConflictAndStart = useCallback(
+    async (mode: ConcurrentTaskStartPreference, persistPreference: boolean) => {
+      const draft = pendingStartRef.current;
+      if (!draft) {
+        setTrackingConflictOpen(false);
+        return;
+      }
+      if (persistPreference) {
+        writeConcurrentTaskStartPreference(mode);
+      }
+      const live = payload?.current as CurrentSessionShape | undefined;
+      const running = runningTrackingTasks(live);
+      setBusy(true);
+      try {
+        if (mode !== "parallel") {
+          for (const t of running) {
+            if (mode === "pause") {
+              await postKronosysAction({ type: "setTaskTimerPaused", taskId: t.id, paused: true });
+            } else {
+              await postKronosysAction({ type: "finishTask", taskId: t.id, shouldCommit: false });
+            }
+          }
+        }
+        await postKronosysAction({
+          type: "startTask",
+          name: draft.name,
+          tags: draft.tags,
+          startKronoFocus: false,
+          ...(draft.project ? { project: draft.project } : {}),
+        });
+        pendingStartRef.current = null;
+        setTrackingConflictOpen(false);
+        setRememberConcurrentChoice(false);
+        await refresh({ preserveForm: true });
+      } finally {
+        setBusy(false);
+      }
+    },
+    [payload?.current, refresh]
+  );
+
+  const requestStartTask = useCallback(
+    async (draft: { name: string; tags: string[]; project?: string }) => {
+      const live = payload?.current as CurrentSessionShape | undefined;
+      if (!live?.sessionId?.trim()) {
+        pushToast(s.tagStartTaskAutoSessionToast);
+        await post({ type: "newSession", sessionScope: undefined });
+        pendingStartRef.current = draft;
+        await flushPendingStartTask();
+        return;
+      }
+      pendingStartRef.current = draft;
+      const running = runningTrackingTasks(live);
+      if (running.length > 0) {
+        const pref = readConcurrentTaskStartPreference();
+        if (pref === "pause") {
+          await resolveConflictAndStart("pause", false);
+          return;
+        }
+        if (pref === "finish") {
+          await resolveConflictAndStart("finish", false);
+          return;
+        }
+        if (pref === "parallel") {
+          await resolveConflictAndStart("parallel", false);
+          return;
+        }
+        setRememberConcurrentChoice(false);
+        setTrackingConflictOpen(true);
+      } else {
+        await flushPendingStartTask();
+      }
+    },
+    [payload?.current, flushPendingStartTask, resolveConflictAndStart, post, pushToast, s.tagStartTaskAutoSessionToast]
+  );
+
+  const requestStartFromTag = useCallback(
+    (tag: string) => {
+      const token = normalizeTagKey(tag);
+      const scoped = parseProjectScopedTag(token);
+      const projectForPicker = scoped ? scoped.projectKey : undefined;
+      const draft = buildStartTaskFromDraft("", [token], projectForPicker);
+      void requestStartTask(draft);
+    },
+    [requestStartTask]
+  );
+
+  const requestStartFromProject = useCallback(
+    (proj: string) => {
+      const draft = buildStartTaskFromDraft("", [], normalizeProjectKey(proj));
+      void requestStartTask(draft);
+    },
+    [requestStartTask]
+  );
+
+  const cancelTrackingConflict = useCallback(() => {
+    pendingStartRef.current = null;
+    setRememberConcurrentChoice(false);
+    setTrackingConflictOpen(false);
+  }, []);
+
+  const rootClass =
+    variant === "dashboard"
+      ? "space-y-5"
+      : "scroll-mt-24 space-y-6 border-b border-zinc-200 pb-10 dark:border-zinc-800";
+  const rootId = pid === "dashboard" ? "dashboard-tags-projects" : "settings-tags-projects";
+  const tagsByProjectScrollId =
+    variant === "settings" ? "settings-tags-by-project" : `${pid}-tags-by-project`;
+
+  const linkedTagsBlock = (
+    onStartFromTag: (tag: string) => void,
+    sec: { projectLower: string; displayProject: string; tags: string[] },
+    anchorSectionId: string | undefined,
+    canonicalProject: string,
+    opts?: { omitSectionTitle?: boolean }
+  ) => (
+    <div id={anchorSectionId} className="mt-4 border-t border-zinc-200 pt-4 dark:border-zinc-800">
+      {!opts?.omitSectionTitle ? (
+        <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+          {s.tocSubTagsByProject}
+        </h4>
+      ) : null}
+      <div className={`flex max-w-md flex-col gap-2 ${opts?.omitSectionTitle ? "" : "mt-3"}`}>
+        <label
+          className="block text-xs font-medium text-zinc-600 dark:text-zinc-400"
+          htmlFor={`${pid}-pin-scoped-${sec.projectLower}`}
+        >
+          {s.tagsPinScopedFieldLabel}
+        </label>
+        <input
+          id={`${pid}-pin-scoped-${sec.projectLower}`}
+          type="text"
+          className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none ring-violet-500/30 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+          value={pinScopedByProject[sec.projectLower] ?? ""}
+          onChange={(e) =>
+            setPinScopedByProject((prev) => ({ ...prev, [sec.projectLower]: e.target.value }))
+          }
+          placeholder={s.tagsPinScopedPlaceholder}
+          disabled={disabled}
+          autoComplete="off"
+          spellCheck={false}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              void addPinScopedForProject(canonicalProject, sec.projectLower);
+            }
+          }}
+        />
+        <div className="flex">
+          <button
+            type="button"
+            className={ICON_BTN_PRIMARY}
+            disabled={disabled || !scopedPinDraftIsSubmittable(sec.projectLower)}
+            title={s.tagsPinAddBtn}
+            aria-label={s.tagsPinAddBtn}
+            onClick={() => void addPinScopedForProject(canonicalProject, sec.projectLower)}
+          >
+            <Plus size={20} strokeWidth={2} aria-hidden />
+          </button>
+        </div>
+      </div>
+      {sec.tags.length === 0 ? (
+        <p className="mt-3 text-sm text-zinc-500">{s.tagsByProjectSubEmpty}</p>
+      ) : (
+        <ul
+          className="mt-3"
+          aria-label={`${s.tocSubTagsByProject} — ${formatProjectDisplay(sec.displayProject)}`}
+        >
+          {sec.tags.map((tag, tagIdx) => (
+            <SettingsTagEditorRow
+              key={`s-${sec.projectLower}-${normalizeTagKey(tag).toLowerCase()}`}
+              tag={tag}
+              fieldId={`${pid}-scoped-tag-desc-${sec.projectLower}-${tagIdx}`}
+              s={s}
+              disabled={disabled}
+              localTagDesc={localTagDesc}
+              setLocalTagDesc={setLocalTagDesc}
+              pinnedKeys={pinnedKeys}
+              post={post}
+              setConfirm={setConfirm}
+              onStartTrackedTask={() => void onStartFromTag(tag)}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+
+  return (
+    <section id={rootId} className={rootClass}>
+      {showPageHeader ? (
+        <>
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">{s.sectionTagsProjects}</h2>
+            <InlineMetricHelpTrigger
+              ariaLabel={s.tagsProjectsHelpAria}
+              body={s.tagsProjectsHelpBody}
+              preserveLineBreaks
+              panelClassName="w-[min(calc(100vw-2rem),26rem)]"
+            />
+          </div>
+          <p className="text-xs leading-relaxed text-zinc-600 dark:text-zinc-400">{s.tagsProjectsIntro}</p>
+        </>
+      ) : null}
+
+      {variant === "dashboard" ? (
+        <div
+          role="tablist"
+          aria-label={s.tagsProjectsTabsAriaLabel}
+          className="flex shrink-0 gap-1 rounded-lg border border-zinc-200 bg-zinc-100/90 p-1 dark:border-zinc-700 dark:bg-zinc-900/60"
+        >
+          <button
+            type="button"
+            role="tab"
+            id={`${pid}-tab-global`}
+            aria-selected={dashTagsTab === "global"}
+            aria-controls={`${pid}-tabpanel-global`}
+            aria-label={s.tagsProjectsTabGlobal}
+            title={s.tagsProjectsTabGlobal}
+            className={`inline-flex min-w-0 flex-1 items-center justify-center rounded-md px-2 py-2 transition sm:px-2.5 ${
+              dashTagsTab === "global"
+                ? "bg-white text-violet-700 shadow-sm dark:bg-zinc-800 dark:text-violet-300"
+                : "text-zinc-500 hover:bg-zinc-200/80 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/80 dark:hover:text-zinc-100"
+            }`}
+            onClick={() => setDashTagsTab("global")}
+          >
+            <Tags size={20} strokeWidth={2} aria-hidden className="shrink-0" />
+          </button>
+          <button
+            type="button"
+            role="tab"
+            id={`${pid}-tab-projects`}
+            aria-selected={dashTagsTab === "projects"}
+            aria-controls={`${pid}-tabpanel-projects`}
+            aria-label={s.tagsProjectsTabProjects}
+            title={s.tagsProjectsTabProjects}
+            className={`inline-flex min-w-0 flex-1 items-center justify-center rounded-md px-2 py-2 transition sm:px-2.5 ${
+              dashTagsTab === "projects"
+                ? "bg-white text-violet-700 shadow-sm dark:bg-zinc-800 dark:text-violet-300"
+                : "text-zinc-500 hover:bg-zinc-200/80 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/80 dark:hover:text-zinc-100"
+            }`}
+            onClick={() => setDashTagsTab("projects")}
+          >
+            <FolderKanban size={20} strokeWidth={2} aria-hidden className="shrink-0" />
+          </button>
+        </div>
+      ) : null}
+
+      <div
+        role={variant === "dashboard" ? "tabpanel" : undefined}
+        id={variant === "dashboard" ? `${pid}-tabpanel-global` : undefined}
+        aria-labelledby={variant === "dashboard" ? `${pid}-tab-global` : undefined}
+        hidden={variant === "dashboard" && dashTagsTab !== "global"}
+        className={variant === "dashboard" ? "space-y-5" : "contents"}
+      >
+      <div id={`${pid}-tags-global`} className={CARD_CLASS}>
+        <h3 className="text-sm font-medium text-zinc-800 dark:text-zinc-100">{s.tagsGlobalHeading}</h3>
+        <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">{s.tagsGlobalIntro}</p>
+        <div className="mt-3 flex max-w-md flex-col gap-2">
+          <label className="block text-xs font-medium text-zinc-600 dark:text-zinc-400" htmlFor={`${pid}-pin-global-tag`}>
+            {s.tagsPinFieldLabel}
+          </label>
+          <input
+            id={`${pid}-pin-global-tag`}
+            type="text"
+            className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none ring-violet-500/30 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+            value={pinGlobalDraft}
+            onChange={(e) => setPinGlobalDraft(e.target.value)}
+            placeholder={s.tagsPinPlaceholder}
+            disabled={disabled}
+            autoComplete="off"
+            spellCheck={false}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                void addPinGlobal();
+              }
+            }}
+          />
+          <div className="flex">
+            <button
+              type="button"
+              className={ICON_BTN_PRIMARY}
+              disabled={
+                disabled ||
+                !pinGlobalDraft.trim() ||
+                !!parseProjectScopedTag(pinGlobalDraft.replace(/^#/, "").trim())
+              }
+              title={s.tagsPinAddBtn}
+              aria-label={s.tagsPinAddBtn}
+              onClick={() => void addPinGlobal()}
+            >
+              <Plus size={20} strokeWidth={2} aria-hidden />
+            </button>
+          </div>
+        </div>
+
+        {globalKnownTags.length === 0 ? (
+          <p className="mt-4 text-sm text-zinc-500">{s.tagsEmptyGlobal}</p>
+        ) : (
+          <ul className="mt-4" aria-label={s.tagsGlobalHeading}>
+            {globalKnownTags.map((tag, tagIdx) => (
+              <SettingsTagEditorRow
+                key={`g-${normalizeTagKey(tag).toLowerCase()}`}
+                tag={tag}
+                fieldId={`${pid}-global-tag-desc-${tagIdx}`}
+                s={s}
+                disabled={disabled}
+                localTagDesc={localTagDesc}
+                setLocalTagDesc={setLocalTagDesc}
+                pinnedKeys={pinnedKeys}
+                post={post}
+                setConfirm={setConfirm}
+                onStartTrackedTask={() => void requestStartFromTag(tag)}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div id={`${pid}-tags-hidden`} className={CARD_CLASS}>
+        <h3 className="text-sm font-medium text-zinc-800 dark:text-zinc-100">{s.tagsHiddenHeading}</h3>
+        {excludedRaw.length === 0 ? (
+          <p className="mt-3 text-sm text-zinc-500">{s.hiddenTagsEmpty}</p>
+        ) : (
+          <ul className="mt-3">
+            {excludedRaw.map((key) => (
+              <li key={key} className="border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800/90">
+                <div className="flex flex-col gap-2">
+                  <span className="font-mono text-sm text-zinc-600 line-through decoration-zinc-500 dark:text-zinc-400">
+                    {formatTagDisplay(key)}
+                  </span>
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <button
+                      type="button"
+                      className={ICON_BTN}
+                      disabled={disabled}
+                      title={s.tagRestoreBtn}
+                      aria-label={s.tagRestoreBtn}
+                      onClick={() => void post({ type: "includeTagFromSuggestions", tag: key })}
+                    >
+                      <RotateCcw size={16} strokeWidth={2} aria-hidden />
+                    </button>
+                    <button
+                      type="button"
+                      className={ICON_BTN_DANGER}
+                      disabled={disabled}
+                      title={s.tagPurgeHiddenAriaLabel}
+                      aria-label={s.tagPurgeHiddenAriaLabel}
+                      onClick={() => setConfirm({ kind: "purgeTag", tag: key, fromExcludedList: true })}
+                    >
+                      <Trash2 size={16} strokeWidth={2} aria-hidden />
+                    </button>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      </div>
+
+      <div
+        role={variant === "dashboard" ? "tabpanel" : undefined}
+        id={variant === "dashboard" ? `${pid}-tabpanel-projects` : undefined}
+        aria-labelledby={variant === "dashboard" ? `${pid}-tab-projects` : undefined}
+        hidden={variant === "dashboard" && dashTagsTab !== "projects"}
+        className={variant === "dashboard" ? "space-y-5" : "contents"}
+      >
+      <div id={`${pid}-tags-saved-projects`} className={CARD_CLASS}>
+        <div className="flex flex-wrap items-center gap-2">
+          <h3 className="text-sm font-medium text-zinc-800 dark:text-zinc-100">{s.projectsHeading}</h3>
+          <InlineMetricHelpTrigger
+            ariaLabel={s.projectsHelpAria}
+            body={`${s.projectsIntro}\n\n${s.projectsHelpBody}`}
+            preserveLineBreaks
+            panelClassName="w-[min(calc(100vw-2rem),22rem)]"
+          />
+        </div>
+        {knownProjects.length === 0 && orphanScopedSections.length === 0 ? (
+          <p className="mt-4 text-sm text-zinc-500">{s.projectsEmpty}</p>
+        ) : null}
+        {knownProjects.length > 0 ? (
+          <ul className="mt-4">
+            {knownProjects.map((proj, projIdx) => {
+              const pk = normalizeProjectKey(proj).toLowerCase();
+              const projectDescFieldId = `${pid}-project-desc-${projIdx}`;
+              const sec =
+                scopedSections.find((x) => x.projectLower === pk) ?? {
+                  projectLower: pk,
+                  displayProject: proj,
+                  tags: [] as string[],
+                };
+              const linkedAnchorId = projIdx === 0 ? tagsByProjectScrollId : undefined;
+              return (
+                <li key={proj} className="border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800/90">
+                  <div className="flex flex-col gap-2.5">
+                    <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                      {formatProjectDisplay(proj)}
+                    </span>
+                    <input
+                      id={projectDescFieldId}
+                      type="text"
+                      className={INLINE_INPUT_CLASS}
+                      value={localProjectDesc[pk] ?? ""}
+                      onChange={(e) =>
+                        setLocalProjectDesc((prev) => ({ ...prev, [pk]: e.target.value }))
+                      }
+                      disabled={disabled}
+                      placeholder={s.projectDescriptionLabel}
+                      spellCheck
+                    />
+                    <div className="flex flex-wrap items-center gap-1.5">
+                        <button
+                          type="button"
+                          className={ICON_BTN_SAVE}
+                          disabled={disabled}
+                          title={s.descriptionSaveBtn}
+                          aria-label={s.descriptionSaveBtn}
+                          onClick={() =>
+                            void post({
+                              type: "setProjectDescription",
+                              name: proj,
+                              description: localProjectDesc[pk] ?? "",
+                            })
+                          }
+                        >
+                          <Save size={16} strokeWidth={2} aria-hidden />
+                        </button>
+                        <button
+                          type="button"
+                          className={ICON_BTN_DANGER}
+                          disabled={disabled}
+                          title={s.projectsRemoveBtn}
+                          aria-label={s.projectsRemoveBtn}
+                          onClick={() => setConfirm({ kind: "purgeProject", name: proj })}
+                        >
+                          <Trash2 size={16} strokeWidth={2} aria-hidden />
+                        </button>
+                        <button
+                          type="button"
+                          className={ICON_BTN_PRIMARY}
+                          disabled={disabled}
+                          title={s.tagStartTrackedTaskFromProjectBtn}
+                          aria-label={s.tagStartTrackedTaskFromProjectBtn}
+                          onClick={() => void requestStartFromProject(proj)}
+                        >
+                          <Play size={16} strokeWidth={2} className="ml-0.5" fill="currentColor" aria-hidden />
+                        </button>
+                    </div>
+                    {linkedTagsBlock(requestStartFromTag, sec, linkedAnchorId, proj)}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        ) : null}
+        {orphanScopedSections.length > 0 ? (
+          <div
+            className={`${knownProjects.length > 0 ? "mt-6 border-t border-zinc-200 pt-6 dark:border-zinc-800" : "mt-4"}`}
+          >
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <h3 className="text-sm font-medium text-zinc-800 dark:text-zinc-100">{s.tagsByProjectHeading}</h3>
+              <InlineMetricHelpTrigger
+                ariaLabel={s.tagsByProjectOrphanHelpAria}
+                body={s.tagsByProjectOrphanIntro}
+                panelClassName="w-[min(calc(100vw-2rem),26rem)]"
+              />
+            </div>
+            <div className="mt-4 space-y-6">
+              {orphanScopedSections.map((sec, orIdx) => (
+                <div
+                  key={sec.projectLower}
+                  className="rounded-lg border border-dashed border-zinc-300/90 bg-white/50 p-3 dark:border-zinc-600/80 dark:bg-zinc-950/35"
+                >
+                  <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                    {formatProjectDisplay(sec.displayProject)}
+                  </h4>
+                  {linkedTagsBlock(
+                    requestStartFromTag,
+                    sec,
+                    knownProjects.length === 0 && orIdx === 0 ? tagsByProjectScrollId : undefined,
+                    sec.displayProject,
+                    { omitSectionTitle: true }
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+      </div>
+
+      <DashboardConfirmModal
+        open={confirm?.kind === "unpin"}
+        message={s.tagUnpinConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const t = confirm?.kind === "unpin" ? confirm.tag : "";
+          setConfirm(null);
+          if (t) {
+            void post({ type: "removeUserKnownTag", tag: t });
+          }
+        }}
+      />
+      <DashboardConfirmModal
+        open={confirm?.kind === "exclude"}
+        message={s.tagExcludeConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        confirmVariant="danger"
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const t = confirm?.kind === "exclude" ? confirm.tag : "";
+          setConfirm(null);
+          if (t) {
+            void post({ type: "excludeTagFromSuggestions", tag: t });
+          }
+        }}
+      />
+      <DashboardConfirmModal
+        open={confirm?.kind === "purgeTag"}
+        message={
+          confirm?.kind === "purgeTag" && confirm.fromExcludedList ? s.tagPurgeHiddenConfirm : s.tagPurgeConfirm
+        }
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        confirmVariant="danger"
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          if (confirm?.kind !== "purgeTag") {
+            setConfirm(null);
+            return;
+          }
+          const { tag: t, fromExcludedList } = confirm;
+          setConfirm(null);
+          if (t) {
+            void post({
+              type: "purgeTagMetadata",
+              tag: t,
+              ...(fromExcludedList ? { fromExcludedList: true } : {}),
+            });
+          }
+        }}
+      />
+      <DashboardConfirmModal
+        open={confirm?.kind === "purgeProject"}
+        message={s.projectRemoveConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        confirmVariant="danger"
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const n = confirm?.kind === "purgeProject" ? confirm.name : "";
+          setConfirm(null);
+          if (n) {
+            void post({ type: "purgeProjectMetadata", name: n });
+          }
+        }}
+      />
+      <DashboardTriActionModal
+        open={trackingConflictOpen}
+        title={s.tagStartTaskConflictTitle}
+        message={s.tagStartTaskConflictMessage}
+        dismissLabel={s.dialogCancelBtn}
+        tertiaryLabel={s.tagStartTaskConflictParallelBtn}
+        secondaryLabel={s.tagStartTaskConflictPauseBtn}
+        primaryLabel={s.tagStartTaskConflictFinishBtn}
+        primaryVariant="danger"
+        dismissCheckbox={{
+          label: s.tagStartTaskConflictDontShowAgain,
+          checked: rememberConcurrentChoice,
+          onChange: setRememberConcurrentChoice,
+        }}
+        onDismiss={cancelTrackingConflict}
+        onTertiary={() => void resolveConflictAndStart("parallel", rememberConcurrentChoice)}
+        onSecondary={() => void resolveConflictAndStart("pause", rememberConcurrentChoice)}
+        onPrimary={() => void resolveConflictAndStart("finish", rememberConcurrentChoice)}
+      />
+    </section>
+  );
+}