@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/GitIdentityQuickSetupModal.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import type { SettingsCopy } from "@/lib/settingsCopy";
+import type { GitIdentityPayload } from "@/lib/kronosysApi";
+import { tbModalPrimary } from "@/lib/translucentButtonClasses";
+
+function useEscapeClose(open: boolean, onClose: () => void, blocked: boolean) {
+  useEffect(() => {
+    if (!open || blocked) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, blocked]);
+}
+
+function inputClass(disabled: boolean) {
+  return `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 ${
+    disabled ? "opacity-50" : ""
+  }`;
+}
+
+function seedFromIdentity(g: GitIdentityPayload | undefined): { name: string; email: string; login: string } {
+  return {
+    name: typeof g?.gitUserName === "string" ? g.gitUserName : "",
+    email: typeof g?.gitUserEmail === "string" ? g.gitUserEmail : "",
+    login: typeof g?.gitAccountLogin === "string" ? g.gitAccountLogin : "",
+  };
+}
+
+export function GitIdentityQuickSetupModal({
+  open,
+  onClose,
+  dt,
+  s,
+  initialGitIdentity,
+  onSave,
+}: {
+  open: boolean;
+  onClose: () => void;
+  dt: DashboardStrings;
+  s: SettingsCopy;
+  initialGitIdentity: GitIdentityPayload | undefined;
+  onSave: (fields: { gitUserName: string; gitUserEmail: string; gitAccountLogin: string }) => Promise<void>;
+}) {
+  const titleId = useId();
+  const introId = useId();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [login, setLogin] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const seededForOpenCycle = useRef(false);
+
+  useEffect(() => {
+    if (!open) {
+      seededForOpenCycle.current = false;
+      return;
+    }
+    if (seededForOpenCycle.current) {
+      return;
+    }
+    seededForOpenCycle.current = true;
+    const seed = seedFromIdentity(initialGitIdentity);
+    setName(seed.name);
+    setEmail(seed.email);
+    setLogin(seed.login);
+    setError(null);
+  }, [open, initialGitIdentity]);
+
+  useEscapeClose(open, onClose, saving);
+
+  const canSubmit =
+    name.trim().length > 0 || email.trim().length > 0 || login.trim().length > 0;
+
+  const handleSubmit = useCallback(async () => {
+    if (!canSubmit || saving) {
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave({
+        gitUserName: name.trim(),
+        gitUserEmail: email.trim(),
+        gitAccountLogin: login.trim(),
+      });
+      onClose();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : dt.gitIdentityModalSaveError);
+    } finally {
+      setSaving(false);
+    }
+  }, [canSubmit, saving, onSave, onClose, name, email, login, dt.gitIdentityModalSaveError]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[220] flex items-center justify-center bg-black/60 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      aria-describedby={introId}
+    >
+      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+        <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          {dt.gitIdentityModalTitle}
+        </h2>
+        <p
+          id={introId}
+          className="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300"
+        >
+          {dt.gitIdentityModalIntro}
+        </p>
+
+        <div className="mt-5 space-y-4">
+          <div className="space-y-1.5">
+            <label className="block text-sm font-medium text-zinc-800 dark:text-zinc-200" htmlFor="git-quick-name">
+              {s.gitIdentityNameLabel}
+            </label>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">{s.gitIdentityNameDesc}</p>
+            <input
+              id="git-quick-name"
+              type="text"
+              className={inputClass(saving)}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={saving}
+              autoComplete="name"
+              spellCheck={false}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="block text-sm font-medium text-zinc-800 dark:text-zinc-200" htmlFor="git-quick-email">
+              {s.gitIdentityEmailLabel}
+            </label>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">{s.gitIdentityEmailDesc}</p>
+            <input
+              id="git-quick-email"
+              type="email"
+              className={inputClass(saving)}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={saving}
+              autoComplete="email"
+              spellCheck={false}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="block text-sm font-medium text-zinc-800 dark:text-zinc-200" htmlFor="git-quick-login">
+              {s.gitIdentityLoginLabel}
+            </label>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">{s.gitIdentityLoginDesc}</p>
+            <input
+              id="git-quick-login"
+              type="text"
+              className={inputClass(saving)}
+              value={login}
+              onChange={(e) => setLogin(e.target.value)}
+              disabled={saving}
+              autoComplete="username"
+              spellCheck={false}
+            />
+          </div>
+        </div>
+
+        {canSubmit ? null : (
+          <p className="mt-3 text-xs text-amber-700 dark:text-amber-300">{dt.gitIdentityModalNeedOneField}</p>
+        )}
+
+        {error ? (
+          <p className="mt-3 whitespace-pre-wrap text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        ) : null}
+
+        <p className="mt-4 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">{dt.gitIdentityModalFooter}</p>
+
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-zinc-300 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            disabled={saving}
+            onClick={onClose}
+          >
+            {dt.dialogCancelBtn}
+          </button>
+          <button
+            type="button"
+            className={`${tbModalPrimary} disabled:cursor-not-allowed disabled:opacity-40`}
+            disabled={!canSubmit || saving}
+            onClick={() => void handleSubmit()}
+          >
+            {saving ? s.gitIdentitySaving : s.gitIdentitySave}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/HeaderIntegrationBadges.tsx

@@ -0,0 +1,69 @@
+import { Database, FileJson } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+
+function StorageBadge({
+  label,
+  description,
+  icon: Icon,
+}: Readonly<{
+  label: string;
+  /** Texte d’infobulle (title) et nom accessible (aria-label) */
+  description: string;
+  icon: LucideIcon;
+}>) {
+  return (
+    <span
+      aria-label={description}
+      title={description}
+      className="inline-flex cursor-default items-center gap-1 rounded-md border border-emerald-500/50 bg-emerald-100 px-2 py-0.5 text-[11px] font-medium leading-tight text-emerald-900 ring-1 ring-emerald-600/15 dark:border-emerald-600/55 dark:bg-emerald-950/45 dark:text-emerald-300 dark:ring-0"
+    >
+      <Icon className="size-3.5 shrink-0 text-emerald-700 dark:text-emerald-400" aria-hidden />
+      {label}
+    </span>
+  );
+}
+
+export type HeaderLocalPersistenceDriver = "sqlite" | "json";
+
+export function HeaderIntegrationBadges({
+  t,
+  localPersistenceDriver,
+  mongoEnabled,
+  mongoConnected,
+}: Readonly<{
+  t: DashboardStrings;
+  localPersistenceDriver: HeaderLocalPersistenceDriver;
+  mongoEnabled: boolean;
+  mongoConnected: boolean;
+}>) {
+  const showMongo = mongoEnabled && mongoConnected;
+  let kind: "mongo" | "json" | "sqlite";
+  if (showMongo) {
+    kind = "mongo";
+  } else if (localPersistenceDriver === "json") {
+    kind = "json";
+  } else {
+    kind = "sqlite";
+  }
+
+  if (kind === "mongo") {
+    return (
+      <span className="inline-flex shrink-0 flex-wrap items-center gap-1.5">
+        <StorageBadge label={t.storageBadgeLabelMongo} description={t.storageBadgeTooltipMongo} icon={Database} />
+      </span>
+    );
+  }
+  if (kind === "json") {
+    return (
+      <span className="inline-flex shrink-0 flex-wrap items-center gap-1.5">
+        <StorageBadge label={t.storageBadgeLabelJson} description={t.storageBadgeTooltipJson} icon={FileJson} />
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex shrink-0 flex-wrap items-center gap-1.5">
+      <StorageBadge label={t.storageBadgeLabelSqlite} description={t.storageBadgeTooltipSqlite} icon={Database} />
+    </span>
+  );
+}

package/components/dashboard/InlineMetricHelpTrigger.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type CSSProperties } from "react";
+import { createPortal } from "react-dom";
+import { CircleHelp } from "lucide-react";
+import { useAnchoredFloatingPortalStyle } from "./useAnchoredFloatingPortalStyle";
+
+const PANEL_PLACEHOLDER_STYLE: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: 288,
+  zIndex: 80,
+  visibility: "hidden",
+  pointerEvents: "none",
+};
+
+type Align = "start" | "end";
+
+/**
+ * Icône (?) avec panneau d’aide : rendu en portail fixe pour éviter le clip `overflow-*`.
+ * `align="end"` pour la dernière colonne d’une grille.
+ */
+export function InlineMetricHelpTrigger({
+  ariaLabel,
+  body,
+  align = "start",
+  preserveLineBreaks = false,
+  panelClassName,
+}: Readonly<{
+  ariaLabel: string;
+  body: string;
+  align?: Align;
+  /** Affiche les sauts de ligne du texte (ex. paragraphes séparés par \\n\\n). */
+  preserveLineBreaks?: boolean;
+  /** Remplace la largeur maximale du panneau (textes d’aide longs). */
+  panelClassName?: string;
+}>) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const id = useId();
+
+  const maxWidthRem = panelClassName ? 24 : 18;
+  const panelStyle = useAnchoredFloatingPortalStyle(open, triggerRef, panelRef, {
+    align,
+    maxWidthRem,
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      const n = e.target as Node;
+      if (!triggerRef.current?.contains(n) && !panelRef.current?.contains(n)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  const mergedStyle = panelStyle ?? (open ? PANEL_PLACEHOLDER_STYLE : undefined);
+
+  const panel =
+    open && typeof document !== "undefined" && mergedStyle
+      ? createPortal(
+          <div
+            ref={panelRef}
+            id={`${id}-metric-help`}
+            style={mergedStyle}
+            className={`rounded-lg border border-zinc-200 bg-white p-2.5 text-left shadow-lg normal-case dark:border-zinc-600 dark:bg-zinc-900${panelClassName ? ` ${panelClassName}` : ""}`}
+            role="region"
+            aria-label={ariaLabel}
+          >
+            <p
+              className={`text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300${preserveLineBreaks ? " whitespace-pre-line" : ""} ${!panelClassName ? "max-w-full" : ""}`}
+            >
+              {body}
+            </p>
+          </div>,
+          document.body
+        )
+      : null;
+
+  return (
+    <div className="relative inline-flex shrink-0" ref={triggerRef}>
+      <button
+        type="button"
+        className="rounded p-0.5 text-zinc-500 hover:bg-zinc-200/90 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+        aria-label={ariaLabel}
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={`${id}-metric-help`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <CircleHelp size={13} strokeWidth={1.75} aria-hidden />
+      </button>
+      {panel}
+    </div>
+  );
+}

package/components/dashboard/IssuePickerModal.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Loader2, X } from "lucide-react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+
+export type RemoteIssue = { title?: string; number: number | string; source?: string };
+
+const SEARCH_DEBOUNCE_MS = 350;
+const SEARCH_MIN_CHARS = 2;
+
+/** IID seul : le serveur utilise `iids[]` ; un seul chiffre suffit (ex. « 5 » ou « #12 »). */
+function issueSearchMinChars(trimmed: string): number {
+  const compact = trimmed.replace(/\s+/g, "");
+  return /^#?\d{1,10}$/.test(compact) ? 1 : SEARCH_MIN_CHARS;
+}
+
+export function IssuePickerModal({
+  t,
+  onClose,
+  onSelect,
+  fetchIssues,
+}: {
+  t: DashboardStrings;
+  onClose: () => void;
+  onSelect: (issue: RemoteIssue) => void;
+  fetchIssues: (query: string) => Promise<{ issues: RemoteIssue[]; error?: string }>;
+}) {
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState<RemoteIssue[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>();
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const requestSeq = useRef(0);
+
+  const runFetch = useCallback(
+    async (q: string) => {
+      const seq = ++requestSeq.current;
+      setError(undefined);
+      try {
+        const out = await fetchIssues(q);
+        if (seq !== requestSeq.current) {
+          return;
+        }
+        setResults(out.issues);
+        setError(out.error);
+      } catch (e) {
+        if (seq !== requestSeq.current) {
+          return;
+        }
+        setResults([]);
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (seq === requestSeq.current) {
+          setLoading(false);
+        }
+      }
+    },
+    [fetchIssues],
+  );
+
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    const q = search.trim();
+    if (q.length < issueSearchMinChars(q)) {
+      requestSeq.current += 1;
+      setResults([]);
+      setLoading(false);
+      setError(undefined);
+      return;
+    }
+    setLoading(true);
+    setError(undefined);
+    debounceRef.current = setTimeout(() => {
+      debounceRef.current = null;
+      void runFetch(q);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+      }
+    };
+  }, [search, runFetch]);
+
+  const q = search.trim();
+  const ready = q.length >= issueSearchMinChars(q);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="issue-picker-title"
+      onClick={onClose}
+    >
+      <div
+        className="flex max-h-[80vh] w-full max-w-md flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex shrink-0 items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
+          <h3 id="issue-picker-title" className="font-semibold text-zinc-900 dark:text-zinc-100">
+            {t.selectIssue}
+          </h3>
+          <button
+            type="button"
+            className="rounded p-1 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+            aria-label={t.issuePickerCloseAria}
+            onClick={onClose}
+          >
+            <X size={20} aria-hidden />
+          </button>
+        </div>
+        <div className="shrink-0 border-b border-zinc-200 dark:border-zinc-800">
+          <input
+            className="w-full bg-white px-4 py-2.5 text-sm text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-2 focus:ring-violet-500/40 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+            placeholder={t.issuePickerSearchPlaceholder}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            autoFocus
+            aria-label={t.issuePickerSearchPlaceholder}
+          />
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="flex items-center justify-center gap-2 px-4 py-10 text-sm text-zinc-600 dark:text-zinc-400">
+              <Loader2 className="h-4 w-4 shrink-0 animate-spin" aria-hidden />
+              <span>{t.issuePickerLoading}</span>
+            </div>
+          ) : error ? (
+            <div className="px-4 py-6 text-center text-sm text-red-600 dark:text-red-400">{error}</div>
+          ) : !ready ? (
+            <div className="px-4 py-6 text-center text-sm text-zinc-600 dark:text-zinc-500">
+              {t.issuePickerSearchMinHint}
+            </div>
+          ) : results.length === 0 ? (
+            <div className="px-4 py-6 text-center text-sm text-zinc-600 dark:text-zinc-500">
+              {t.issuePickerNoResults}
+            </div>
+          ) : (
+            <ul className="divide-y divide-zinc-200 dark:divide-zinc-800">
+              {results.map((issue, idx) => (
+                <li key={`${String(issue.source)}-${String(issue.number)}-${idx}`}>
+                  <button
+                    type="button"
+                    className="w-full px-4 py-3 text-left text-sm hover:bg-zinc-100/90 dark:hover:bg-zinc-800/60"
+                    onClick={() => onSelect(issue)}
+                  >
+                    <div className="font-medium text-zinc-900 dark:text-zinc-200">{issue.title}</div>
+                    <div className="mt-1 flex flex-wrap gap-2 text-xs text-zinc-600 dark:text-zinc-500">
+                      {issue.source ? (
+                        <span className="rounded bg-zinc-200 px-1.5 py-0.5 dark:bg-zinc-800">{issue.source}</span>
+                      ) : null}
+                      <span>#{issue.number}</span>
+                    </div>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}