@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/SettingsTour.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { createPortal } from "react-dom";
+import { markSettingsTourCompleted } from "@/lib/dashboardTourStorage";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+
+/** Anchors for the settings walkthrough steps. */
+const STEP_SELECTORS = [
+  "#settings-tour-anchor-intro",
+  "#settings-usage-profile",
+  "#settings-history",
+  "#settings-git",
+  "#settings-workspace-loc",
+  "#settings-schedule",
+] as const;
+
+const HOLE_PADDING_PX = 10;
+const TOOLTIP_MAX_W = 360;
+const VIEW_MARGIN = 12;
+const TOOLTIP_GAP = 12;
+
+function useEscapeDismiss(open: boolean, onDismiss: () => void) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onDismiss();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onDismiss]);
+}
+
+type HoleRect = { top: number; left: number; width: number; height: number };
+
+function expandRect(r: DOMRect, pad: number): HoleRect {
+  return {
+    top: r.top - pad,
+    left: r.left - pad,
+    width: r.width + 2 * pad,
+    height: r.height + 2 * pad,
+  };
+}
+
+export function SettingsTour({
+  open,
+  onOpenChange,
+  dt,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dt: DashboardStrings;
+}) {
+  const [step, setStep] = useState(0);
+  const [hole, setHole] = useState<HoleRect | null>(null);
+  const [tipStyle, setTipStyle] = useState<CSSProperties>({});
+  const panelRef = useRef<HTMLDivElement>(null);
+  const primaryBtnRef = useRef<HTMLButtonElement>(null);
+
+  const steps = useMemo(
+    () => [
+      { title: dt.settingsTourStep1Title, body: dt.settingsTourStep1Body },
+      { title: dt.settingsTourStep2Title, body: dt.settingsTourStep2Body },
+      { title: dt.settingsTourStep3Title, body: dt.settingsTourStep3Body },
+      { title: dt.settingsTourStep4Title, body: dt.settingsTourStep4Body },
+      { title: dt.settingsTourStep5Title, body: dt.settingsTourStep5Body },
+      { title: dt.settingsTourStep6Title, body: dt.settingsTourStep6Body },
+    ],
+    [dt]
+  );
+
+  const total = steps.length;
+  const last = step >= total - 1;
+  const current = steps[step] ?? steps[0];
+  const selector = STEP_SELECTORS[Math.min(step, STEP_SELECTORS.length - 1)];
+
+  useEffect(() => {
+    if (open) {
+      setStep(0);
+    }
+  }, [open]);
+
+  const finish = useCallback(() => {
+    markSettingsTourCompleted();
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  useEscapeDismiss(open, finish);
+
+  const updateHoleFromDom = useCallback(() => {
+    if (!open) {
+      setHole(null);
+      return;
+    }
+    const el = document.querySelector(selector);
+    if (!el || !(el instanceof HTMLElement)) {
+      setHole(null);
+      return;
+    }
+    setHole(expandRect(el.getBoundingClientRect(), HOLE_PADDING_PX));
+  }, [open, selector]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setHole(null);
+      return;
+    }
+    const el = document.querySelector(selector);
+    if (el instanceof HTMLElement) {
+      el.scrollIntoView({ block: "center", inline: "nearest", behavior: "auto" });
+    }
+    updateHoleFromDom();
+    const raf = requestAnimationFrame(updateHoleFromDom);
+    window.addEventListener("scroll", updateHoleFromDom, true);
+    window.addEventListener("resize", updateHoleFromDom);
+    const observed = el instanceof HTMLElement ? el : null;
+    const ro =
+      observed && typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => updateHoleFromDom())
+        : null;
+    if (observed && ro) {
+      ro.observe(observed);
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", updateHoleFromDom, true);
+      window.removeEventListener("resize", updateHoleFromDom);
+      ro?.disconnect();
+    };
+  }, [open, selector, step, updateHoleFromDom]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+    const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+    const w = Math.min(TOOLTIP_MAX_W, vw - 2 * VIEW_MARGIN);
+
+    if (!hole) {
+      setTipStyle({
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: w,
+        maxWidth: "calc(100vw - 2rem)",
+        zIndex: 212,
+      });
+      return;
+    }
+
+    const panel = panelRef.current;
+    const ph = panel?.getBoundingClientRect().height ?? 220;
+
+    let top = hole.top + hole.height + TOOLTIP_GAP;
+    if (top + ph > vh - VIEW_MARGIN && hole.top - TOOLTIP_GAP - ph >= VIEW_MARGIN) {
+      top = hole.top - TOOLTIP_GAP - ph;
+    }
+    top = Math.max(VIEW_MARGIN, Math.min(top, vh - ph - VIEW_MARGIN));
+
+    let left = hole.left + hole.width / 2 - w / 2;
+    left = Math.max(VIEW_MARGIN, Math.min(left, vw - w - VIEW_MARGIN));
+
+    setTipStyle({
+      position: "fixed",
+      top,
+      left,
+      transform: undefined,
+      width: w,
+      maxWidth: undefined,
+      zIndex: 212,
+    });
+  }, [open, hole, step, current.title, current.body]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const t = window.setTimeout(() => primaryBtnRef.current?.focus(), 80);
+    return () => window.clearTimeout(t);
+  }, [open, step]);
+
+  if (!open) {
+    return null;
+  }
+
+  const progressLabel = dt.settingsTourProgressLabel.replace("{n}", String(step + 1)).replace("{total}", String(total));
+
+  const secondaryBtn =
+    "rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-800 transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700";
+  const primaryBtn =
+    "rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:bg-violet-500 dark:hover:bg-violet-600 dark:focus:ring-offset-zinc-900";
+
+  const vw = typeof window !== "undefined" ? window.innerWidth : 0;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 0;
+
+  const fullBackdrop = !hole ? (
+    <div className="fixed inset-0 z-[210] bg-black/55" aria-hidden />
+  ) : null;
+
+  const dimPanels =
+    hole && vw > 0 && vh > 0
+      ? (() => {
+          const { top: t, left: l, width: w, height: h } = hole;
+          const topH = Math.max(0, t);
+          const bottomTop = t + h;
+          const bottomH = Math.max(0, vh - bottomTop);
+          const leftW = Math.max(0, l);
+          const rightLeft = l + w;
+          const rightW = Math.max(0, vw - rightLeft);
+          return (
+            <>
+              <div
+                className="fixed bg-black/55"
+                style={{ top: 0, left: 0, width: vw, height: topH, zIndex: 210 }}
+                aria-hidden
+              />
+              <div
+                className="fixed bg-black/55"
+                style={{ top: bottomTop, left: 0, width: vw, height: bottomH, zIndex: 210 }}
+                aria-hidden
+              />
+              <div
+                className="fixed bg-black/55"
+                style={{ top: t, left: 0, width: leftW, height: h, zIndex: 210 }}
+                aria-hidden
+              />
+              <div
+                className="fixed bg-black/55"
+                style={{ top: t, left: rightLeft, width: rightW, height: h, zIndex: 210 }}
+                aria-hidden
+              />
+              <div
+                className="pointer-events-none fixed rounded-xl border-2 border-violet-500 shadow-[0_0_0_1px_rgba(139,92,246,0.35)] dark:border-violet-400 dark:shadow-[0_0_0_1px_rgba(167,139,250,0.35)]"
+                style={{
+                  top: t,
+                  left: l,
+                  width: w,
+                  height: h,
+                  zIndex: 211,
+                }}
+                aria-hidden
+              />
+            </>
+          );
+        })()
+      : null;
+
+  const node = createPortal(
+    <>
+      {fullBackdrop}
+      {dimPanels}
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="settings-tour-title"
+        aria-describedby="settings-tour-body"
+        className="rounded-xl border border-zinc-300 bg-white shadow-2xl dark:border-zinc-600 dark:bg-zinc-900"
+        style={tipStyle}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-zinc-200 px-4 py-3 dark:border-zinc-700">
+          <p className="text-xs font-medium uppercase tracking-wide text-violet-600 dark:text-violet-300">
+            {progressLabel}
+          </p>
+          <h2 id="settings-tour-title" className="mt-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
+            {current.title}
+          </h2>
+        </div>
+        <div id="settings-tour-body" className="max-h-[min(42vh,18rem)] overflow-y-auto px-4 py-3">
+          <p className="whitespace-pre-wrap text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">{current.body}</p>
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-zinc-200 px-4 py-3 dark:border-zinc-700">
+          <div className="flex gap-1.5" role="presentation" aria-hidden>
+            {steps.map((_, i) => (
+              <span
+                key={i}
+                className={`h-2 w-2 rounded-full ${i === step ? "bg-violet-500 dark:bg-violet-400" : "bg-zinc-300 dark:bg-zinc-600"}`}
+              />
+            ))}
+          </div>
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            <button
+              type="button"
+              className="text-sm text-zinc-500 underline-offset-2 hover:text-zinc-800 hover:underline dark:text-zinc-400 dark:hover:text-zinc-200"
+              onClick={finish}
+            >
+              {dt.settingsTourSkipBtn}
+            </button>
+            {step > 0 ? (
+              <button type="button" className={secondaryBtn} onClick={() => setStep((s) => Math.max(0, s - 1))}>
+                {dt.settingsTourBackBtn}
+              </button>
+            ) : null}
+            {last ? (
+              <button ref={primaryBtnRef} type="button" className={primaryBtn} onClick={finish}>
+                {dt.settingsTourDoneBtn}
+              </button>
+            ) : (
+              <button
+                ref={primaryBtnRef}
+                type="button"
+                className={primaryBtn}
+                onClick={() => setStep((s) => Math.min(total - 1, s + 1))}
+              >
+                {dt.settingsTourNextBtn}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+
+  return node;
+}

package/components/dashboard/TagPills.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { Fragment } from "react";
+import { formatTagDisplayForTask, isProjectScopedTag, normalizeTagKey } from "@/lib/taskParsing";
+import {
+  TAG_INLINE_APPLIED_READONLY,
+  TAG_INLINE_APPLIED_REMOVABLE,
+  TAG_INLINE_APPLIED_SCOPED_READONLY,
+  TAG_INLINE_APPLIED_SCOPED_REMOVABLE,
+  TAG_INLINE_NEUTRAL_READONLY,
+  TAG_INLINE_NEUTRAL_REMOVABLE,
+} from "./taskFieldStyles";
+import { useDescriptionPopoverAfterMs } from "./useDescriptionPopoverAfterMs";
+
+function TagPillItem({
+  tag,
+  chip,
+  onRemove,
+  description,
+  defaultTagBucketLabel,
+}: {
+  tag: string;
+  chip: string;
+  onRemove?: (tag: string) => void;
+  description: string | undefined;
+  defaultTagBucketLabel?: string;
+}) {
+  const { hasDescription, triggerProps, popoverLayer, anchorWrapperProps } =
+    useDescriptionPopoverAfterMs(description);
+
+  const interactive = Boolean(onRemove);
+  const affordanceClass =
+    interactive ? "" : hasDescription ? "cursor-help" : "";
+
+  const inner = (
+    <span
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      className={[chip, affordanceClass, "min-w-0 max-w-full"].filter(Boolean).join(" ")}
+      {...triggerProps}
+      {...(onRemove
+        ? {
+            onClick: () => onRemove(tag),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRemove(tag);
+              }
+            },
+          }
+        : {})}
+    >
+      <span className="pointer-events-none break-all">
+        {formatTagDisplayForTask(tag, defaultTagBucketLabel)}
+      </span>
+      {interactive ? (
+        <span className="pointer-events-none text-[0.7rem] font-normal text-zinc-400 dark:text-zinc-500">×</span>
+      ) : null}
+    </span>
+  );
+
+  if (!hasDescription) {
+    return inner;
+  }
+
+  return (
+    <Fragment>
+      <span className="relative inline-flex min-w-0 max-w-full" {...anchorWrapperProps}>
+        {inner}
+      </span>
+      {popoverLayer}
+    </Fragment>
+  );
+}
+
+export function TagPills({
+  tags,
+  onRemove,
+  className,
+  variant = "default",
+  /**
+   * Étiquettes `projet#local` : soulignement pointillé (distinct des étiquettes « pleines »).
+   */
+  differentiateProjectScopedTags = false,
+  /** Infobulle : clés = {@link normalizeTagKey} en minuscules (aligné sur l’API). */
+  tagDescriptions,
+  /** Libellé lisible pour l’étiquette réservée `default` (ex. « défaut » en français). */
+  defaultTagBucketLabel,
+}: {
+  tags: string[];
+  onRemove?: (tag: string) => void;
+  /** Remplace les marges par défaut (ex. alignement sur une même ligne que le titre). */
+  className?: string;
+  /** `applied` : étiquettes actuellement sur la tâche (style texte vert). */
+  variant?: "default" | "applied";
+  differentiateProjectScopedTags?: boolean;
+  tagDescriptions?: Record<string, string>;
+  defaultTagBucketLabel?: string;
+}) {
+  const chipBase = (tag: string) => {
+    const scoped = differentiateProjectScopedTags && isProjectScopedTag(normalizeTagKey(tag));
+    if (variant === "applied") {
+      if (scoped) {
+        return onRemove ? TAG_INLINE_APPLIED_SCOPED_REMOVABLE : TAG_INLINE_APPLIED_SCOPED_READONLY;
+      }
+      return onRemove ? TAG_INLINE_APPLIED_REMOVABLE : TAG_INLINE_APPLIED_READONLY;
+    }
+    if (scoped) {
+      return onRemove ? TAG_INLINE_APPLIED_SCOPED_REMOVABLE : TAG_INLINE_APPLIED_SCOPED_READONLY;
+    }
+    return onRemove ? TAG_INLINE_NEUTRAL_REMOVABLE : TAG_INLINE_NEUTRAL_READONLY;
+  };
+  const describe = (tag: string) => {
+    if (!tagDescriptions) {
+      return undefined;
+    }
+    const k = normalizeTagKey(tag).toLowerCase();
+    return tagDescriptions[k] ?? tagDescriptions[normalizeTagKey(tag)];
+  };
+
+  const sortedTags = tags.slice().sort((a, b) => {
+    const aScoped = differentiateProjectScopedTags && isProjectScopedTag(normalizeTagKey(a));
+    const bScoped = differentiateProjectScopedTags && isProjectScopedTag(normalizeTagKey(b));
+    if (aScoped && !bScoped) return -1;
+    if (!aScoped && bScoped) return 1;
+    return a.localeCompare(b);
+  });
+
+  return (
+    <div className={className ?? "mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-0.5"}>
+      {sortedTags.map((tag, i) => (
+        <Fragment key={tag}>
+          {i > 0 ? (
+            <span className="select-none text-zinc-300 dark:text-zinc-600" aria-hidden>
+              ·
+            </span>
+          ) : null}
+          <TagPillItem
+            tag={tag}
+            chip={chipBase(tag)}
+            onRemove={onRemove}
+            description={describe(tag)}
+            defaultTagBucketLabel={defaultTagBucketLabel}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/components/dashboard/TagsHelpTrigger.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type CSSProperties } from "react";
+import { createPortal } from "react-dom";
+import { CircleHelp } from "lucide-react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import { useAnchoredFloatingPortalStyle } from "./useAnchoredFloatingPortalStyle";
+
+const PANEL_PLACEHOLDER_STYLE: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: 384,
+  zIndex: 80,
+  visibility: "hidden",
+  pointerEvents: "none",
+};
+
+export function TagsHelpTrigger({ t, compact }: { t: DashboardStrings; compact?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const id = useId();
+
+  const panelStyle = useAnchoredFloatingPortalStyle(open, triggerRef, panelRef, {
+    align: "end",
+    maxWidthRem: 24,
+  });
+
+  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 icon = compact ? 11 : 18;
+  const mergedStyle = panelStyle ?? (open ? PANEL_PLACEHOLDER_STYLE : undefined);
+
+  const panel =
+    open && typeof document !== "undefined" && mergedStyle
+      ? createPortal(
+          <div
+            ref={panelRef}
+            id={`${id}-tags-help`}
+            style={mergedStyle}
+            className="rounded-lg border border-zinc-200 bg-white p-2.5 text-left shadow-xl dark:border-zinc-600 dark:bg-zinc-900"
+            role="region"
+            aria-label={t.tagsHelpAriaLabel}
+          >
+            <p className="text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300">{t.tagSyntaxHelp}</p>
+            <p className="mt-2 text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300">{t.tagSuggestionsHelp}</p>
+            <p className="mt-2 text-[0.7rem] leading-snug text-zinc-600 dark:text-zinc-400">{t.tagsHelpWorkflowSummary}</p>
+          </div>,
+          document.body
+        )
+      : null;
+
+  return (
+    <div
+      className={`relative flex shrink-0 items-center justify-center self-center ${compact ? "h-5 min-w-5" : "h-10"}`}
+      ref={triggerRef}
+    >
+      <button
+        type="button"
+        className={`text-zinc-500 hover:bg-zinc-200/90 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300 ${compact ? "flex size-full items-center justify-center rounded-sm p-0" : "rounded-md p-1.5"}`}
+        aria-label={t.tagsHelpAriaLabel}
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={`${id}-tags-help`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <CircleHelp size={icon} strokeWidth={1.75} aria-hidden />
+      </button>
+      {panel}
+    </div>
+  );
+}