new tool timer & alert revamp

website/src/features/toolboxes/modules/TimerModule.jsx

@@ -0,0 +1,572 @@
+// Rôle : fournit l'outil timer avec chronomètre à étapes et comptes à rebours multiples.
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../../../components/Icon.jsx";
+import { Tabs } from "../../../components/Tabs.jsx";
+import {
+  formatDuration,
+  formatDurationWithCentiseconds,
+  formatTargetTime,
+  getCentiseconds,
+  getCountdownTargetMs,
+  getDailyTargetMs,
+  getNowMs,
+  getTimePatternTargetMs,
+  timePartsToDurationMs,
+  timePartsToString
+} from "./timerUtils.js";
+
+const TIMER_TABS = [
+  { id: "stopwatch", label: "Chronomètre", icon: "stopwatch" },
+  { id: "countdown", label: "Compte à rebours", icon: "hourglass" }
+];
+
+const COUNTDOWN_TYPES = ["duration", "daily_time", "time_pattern", "interval"];
+const ALERT_MODES = [
+  { mode: "off", icon: "sound-mute" },
+  { mode: "visible", icon: "sound-min" },
+  { mode: "site", icon: "sound-max" }
+];
+const ALERT_MIN_DELAY_MS = 5 * 60 * 1000;
+
+function TimerValue({ ms, compact = false, showCentiseconds = true }) {
+  if (!showCentiseconds) return <span className="timer-value">{formatDuration(ms)}</span>;
+  if (!compact) return <span className="timer-value">{formatDurationWithCentiseconds(ms)}</span>;
+
+  return (
+    <span className="timer-value is-compact">
+      <span>{formatDuration(ms)}</span>
+      <small>{getCentiseconds(ms)}</small>
+    </span>
+  );
+}
+
+function getCountdownMeta(countdown, textContent) {
+  if (countdown.type === "duration") return `${textContent.durationType || "Durée"} · ${formatDuration(countdown.durationMs || 0)}`;
+  if (countdown.type === "daily_time") return `${textContent.dailyTimeType || "Heure précise"} · ${countdown.time}`;
+  if (countdown.type === "time_pattern") return `${textContent.timePatternType || "Heure / minute / seconde"} · ${countdown.pattern}`;
+  if (countdown.type === "interval") return `${textContent.intervalType || "Intervalle"} · ${formatDuration(countdown.intervalMs || 0)}`;
+  return "";
+}
+
+function handleEditableKeyDown(event, callback) {
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  callback();
+}
+
+export function TimerModule({ toolboxId, moduleId, context }) {
+  const data = context.normalizeTimerData(context.getModuleData(toolboxId, moduleId, { activeTab: "stopwatch" }));
+  const textContent = context.moduleText?.timer || {};
+  const activeTab = data.activeTab;
+  const [nowMs, setNowMs] = useState(getNowMs);
+  const [countdownForm, setCountdownForm] = useState({
+    label: "",
+    type: "duration",
+    duration: { hours: "", minutes: "", seconds: "" },
+    time: { hours: "", minutes: "", seconds: "" },
+    pattern: { hours: "", minutes: "", seconds: "" },
+    interval: { hours: "", minutes: "", seconds: "" }
+  });
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => setNowMs(getNowMs()), 50);
+    return () => window.clearInterval(intervalId);
+  }, []);
+
+  const stopwatchElapsedMs = data.stopwatch.startedAt
+    ? data.stopwatch.elapsedMs + Math.max(0, nowMs - data.stopwatch.startedAt)
+    : data.stopwatch.elapsedMs;
+  const visibleCountdowns = useMemo(() => {
+    const countdowns = data.countdowns.map((countdown) => ({ ...countdown, targetMs: getCountdownTargetMs(countdown, nowMs) }));
+    if (!data.sortResults) return countdowns;
+    return [...countdowns].sort((a, b) => (a.targetMs || Number.POSITIVE_INFINITY) - (b.targetMs || Number.POSITIVE_INFINITY));
+  }, [data.countdowns, data.sortResults, nowMs]);
+
+  function save(nextData) {
+    context.setModuleData(toolboxId, moduleId, nextData);
+  }
+
+  function setActiveTab(nextActiveTab) {
+    save({ ...data, activeTab: nextActiveTab });
+  }
+
+  function setScrollResults(scrollResults) {
+    save({ ...data, scrollResults });
+  }
+
+  function setSortResults(sortResults) {
+    save({ ...data, sortResults });
+  }
+
+  function updateStopwatch(stopwatch) {
+    save({ ...data, stopwatch });
+  }
+
+  function startStopwatch() {
+    if (data.stopwatch.startedAt) return;
+    updateStopwatch({ ...data.stopwatch, startedAt: getNowMs() });
+  }
+
+  function pauseStopwatch() {
+    if (!data.stopwatch.startedAt) return;
+    updateStopwatch({
+      ...data.stopwatch,
+      startedAt: 0,
+      elapsedMs: stopwatchElapsedMs
+    });
+  }
+
+  function resetStopwatch() {
+    updateStopwatch({ ...data.stopwatch, elapsedMs: 0, startedAt: 0 });
+  }
+
+  function addLap() {
+    if (!stopwatchElapsedMs) return;
+    updateStopwatch({
+      ...data.stopwatch,
+      laps: [
+        {
+          id: context.uid("timer"),
+          label: "",
+          elapsedMs: stopwatchElapsedMs
+        },
+        ...data.stopwatch.laps
+      ]
+    });
+  }
+
+  function deleteLap(lapId) {
+    updateStopwatch({ ...data.stopwatch, laps: data.stopwatch.laps.filter((lap) => lap.id !== lapId) });
+  }
+
+  function renameLap(lapId, label) {
+    updateStopwatch({
+      ...data.stopwatch,
+      laps: data.stopwatch.laps.map((lap) => lap.id === lapId ? { ...lap, label: label.trim() } : lap)
+    });
+  }
+
+  function updateCountdownForm(patch) {
+    setCountdownForm((current) => ({ ...current, ...patch }));
+  }
+
+  function createCountdown(event) {
+    event.preventDefault();
+    const type = COUNTDOWN_TYPES.includes(countdownForm.type) ? countdownForm.type : "duration";
+    const label = countdownForm.label.trim() || textContent.defaultCountdownLabel || "Timer";
+    const now = getNowMs();
+    let countdown = null;
+
+    if (type === "duration") {
+      const durationMs = timePartsToDurationMs(countdownForm.duration);
+      if (durationMs > 0) countdown = { id: context.uid("timer"), label, type, durationMs, targetAt: now + durationMs };
+    }
+    if (type === "daily_time") {
+      const time = timePartsToString(countdownForm.time);
+      const targetAt = getDailyTargetMs(time, now);
+      if (time && targetAt) countdown = { id: context.uid("timer"), label, type, time, targetAt };
+    }
+    if (type === "time_pattern") {
+      const pattern = timePartsToString(countdownForm.pattern, { allowWildcard: true });
+      if (pattern && getTimePatternTargetMs(pattern, now)) countdown = { id: context.uid("timer"), label, type, pattern };
+    }
+    if (type === "interval") {
+      const intervalMs = timePartsToDurationMs(countdownForm.interval);
+      if (intervalMs > 0) countdown = { id: context.uid("timer"), label, type, intervalMs, anchorAt: now };
+    }
+
+    if (!countdown) return;
+    save({ ...data, countdowns: [...data.countdowns, countdown] });
+    setCountdownForm((current) => ({ ...current, label: "" }));
+  }
+
+  function deleteCountdown(countdownId) {
+    save({ ...data, countdowns: data.countdowns.filter((countdown) => countdown.id !== countdownId) });
+  }
+
+  function resetCountdown(countdown) {
+    if (countdown.type !== "duration" && countdown.type !== "daily_time" && countdown.type !== "interval") return;
+    const now = getNowMs();
+    let nextCountdown = null;
+    if (countdown.type === "duration") nextCountdown = { ...countdown, targetAt: now + countdown.durationMs };
+    if (countdown.type === "daily_time") nextCountdown = { ...countdown, targetAt: getDailyTargetMs(countdown.time, now) };
+    if (countdown.type === "interval") nextCountdown = { ...countdown, anchorAt: now };
+    if (!nextCountdown) return;
+    save({ ...data, countdowns: data.countdowns.map((item) => item.id === countdown.id ? nextCountdown : item) });
+  }
+
+  function renameCountdown(countdownId, label) {
+    save({
+      ...data,
+      countdowns: data.countdowns.map((countdown) => countdown.id === countdownId ? { ...countdown, label: label.trim() } : countdown)
+    });
+  }
+
+  function setCountdownAlertMode(countdownId, alertMode) {
+    const countdown = data.countdowns.find((item) => item.id === countdownId);
+    const targetMs = countdown ? getCountdownTargetMs(countdown, nowMs) : 0;
+    if (alertMode !== "off" && targetMs && targetMs - nowMs < ALERT_MIN_DELAY_MS) {
+      context.notify?.(textContent.alertTooSoonTitle || "Alerte indisponible à moins de 5 minutes");
+      return;
+    }
+    save({
+      ...data,
+      countdowns: data.countdowns.map((countdown) => countdown.id === countdownId ? { ...countdown, alertMode } : countdown)
+    });
+  }
+
+  function resetActiveResults() {
+    if (activeTab === "stopwatch") {
+      resetStopwatch();
+      return;
+    }
+    save({ ...data, countdowns: [] });
+  }
+
+  return (
+    <div className="timer-module">
+      <section className="timer-control-card">
+        <Tabs
+          className="timer-tabs"
+          tabs={[
+            { ...TIMER_TABS[0], label: textContent.stopwatchTab || TIMER_TABS[0].label },
+            { ...TIMER_TABS[1], label: textContent.countdownTab || TIMER_TABS[1].label }
+          ]}
+          activeTab={activeTab}
+          onChange={setActiveTab}
+          iconOnly
+        />
+        {activeTab === "stopwatch" ? (
+          <StopwatchControls
+            textContent={textContent}
+            elapsedMs={stopwatchElapsedMs}
+            running={Boolean(data.stopwatch.startedAt)}
+            onStart={startStopwatch}
+            onPause={pauseStopwatch}
+            onReset={resetStopwatch}
+            onLap={addLap}
+          />
+        ) : (
+          <CountdownControls
+            textContent={textContent}
+            form={countdownForm}
+            onChange={updateCountdownForm}
+            onSubmit={createCountdown}
+          />
+        )}
+      </section>
+      <section className={`tool-split-results timer-results-card ${data.scrollResults ? "is-scrollable" : ""}`}>
+        <div className="tool-split-actions">
+          <button className="tool-split-action-button danger" type="button" onClick={resetActiveResults} aria-label={textContent.resetTitle || "Réinitialiser"} title={textContent.resetTitle || "Réinitialiser"}>
+            <Icon name="rubber" />
+          </button>
+          {activeTab === "countdown" && (
+            <button
+              className={`tool-split-scroll-toggle timer-sort-toggle ${data.sortResults ? "active" : ""}`}
+              type="button"
+              onClick={() => setSortResults(!data.sortResults)}
+              aria-pressed={data.sortResults}
+              title={textContent.sortTitle || "Trier par temps restant"}
+              aria-label={textContent.sortTitle || "Trier par temps restant"}
+            >
+              <Icon name="sort-time" />
+              <i aria-hidden="true" />
+            </button>
+          )}
+          <button
+            className={`tool-split-scroll-toggle timer-scroll-toggle ${data.scrollResults ? "active" : ""}`}
+            type="button"
+            onClick={() => setScrollResults(!data.scrollResults)}
+            aria-pressed={data.scrollResults}
+            title={textContent.scrollableTitle || "Liste scrollable"}
+            aria-label={textContent.scrollableTitle || "Liste scrollable"}
+          >
+            <Icon name="scrollable" />
+            <i aria-hidden="true" />
+          </button>
+        </div>
+        <div className={`tool-split-tree timer-tree ${data.scrollResults ? "is-scrollable legacy-scrollbar" : ""}`}>
+          {activeTab === "stopwatch" ? (
+            <StopwatchLapList laps={data.stopwatch.laps} textContent={textContent} onRename={renameLap} onDelete={deleteLap} />
+          ) : (
+            <CountdownList countdowns={visibleCountdowns} nowMs={nowMs} textContent={textContent} onRename={renameCountdown} onAlertModeChange={setCountdownAlertMode} onReset={resetCountdown} onDelete={deleteCountdown} />
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function TimerAlertModeSwitch({ mode, blocked, textContent, onChange }) {
+  const labels = {
+    off: textContent.alertOffTitle || "Pas d'alerte",
+    visible: textContent.alertVisibleTitle || "Alerte quand la toolbox est affichée",
+    site: textContent.alertSiteTitle || "Alerte sur tout le site"
+  };
+  const blockedTitle = textContent.alertTooSoonTitle || "Alerte indisponible à moins de 5 minutes";
+
+  return (
+    <div
+      className={`timer-alert-mode-switch ${blocked ? "is-blocked" : ""}`}
+      role="group"
+      aria-label={textContent.alertModeTitle || "Mode d'alerte"}
+      title={blocked ? blockedTitle : undefined}
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      {ALERT_MODES.map((option) => {
+        const label = labels[option.mode];
+        const disabled = blocked && option.mode !== "off";
+        return (
+        <button
+          key={option.mode}
+          className={`timer-alert-mode-button ${mode === option.mode ? "active" : ""}`}
+          type="button"
+          onClick={() => onChange(option.mode)}
+          disabled={disabled}
+          aria-pressed={mode === option.mode}
+          aria-label={disabled ? blockedTitle : label}
+          title={disabled ? blockedTitle : label}
+        >
+          <Icon name={option.icon} />
+        </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function StopwatchControls({ textContent, elapsedMs, running, onStart, onPause, onReset, onLap }) {
+  return (
+    <div className="timer-control-panel" role="tabpanel">
+      <span>{textContent.stopwatchTitle || "Chronomètre à étapes"}</span>
+      <strong><TimerValue ms={elapsedMs} compact /></strong>
+      <div className="timer-actions">
+        <button className="primary timer-action-button" type="button" onClick={running ? onPause : onStart} aria-label={running ? textContent.pauseButton || "Pause" : textContent.startButton || "Lancer"} title={running ? textContent.pauseButton || "Pause" : textContent.startButton || "Lancer"}>
+          <Icon name={running ? "pause-circle" : "play-circle"} />
+        </button>
+        <button className="timer-action-button" type="button" onClick={onLap} disabled={!elapsedMs} aria-label={textContent.lapButton || "Étape"} title={textContent.lapButton || "Étape"}>
+          <Icon name="record-circle" />
+        </button>
+        <button className="danger timer-action-button" type="button" onClick={onReset} aria-label={textContent.resetTitle || "Réinitialiser"} title={textContent.resetTitle || "Réinitialiser"}>
+          <Icon name="stop-circle" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function CountdownControls({ textContent, form, onChange, onSubmit }) {
+  return (
+    <form className="timer-control-panel timer-countdown-form" role="tabpanel" onSubmit={onSubmit}>
+      <label>
+        <span>{textContent.countdownLabel || "Libellé"}</span>
+        <input value={form.label} onChange={(event) => onChange({ label: event.target.value })} placeholder={textContent.countdownLabelPlaceholder || "Boss, event, craft..."} />
+      </label>
+      <label>
+        <span>{textContent.countdownTypeLabel || "Type"}</span>
+        <select value={form.type} onChange={(event) => onChange({ type: event.target.value })}>
+          <option value="duration">{textContent.durationType || "Durée"}</option>
+          <option value="daily_time">{textContent.dailyTimeType || "Heure précise"}</option>
+          <option value="time_pattern">{textContent.timePatternType || "Horaire spécifique"}</option>
+          <option value="interval">{textContent.intervalType || "Intervalle"}</option>
+        </select>
+      </label>
+      {form.type === "duration" && (
+        <label>
+          <span>{textContent.durationLabel || "Durée"}</span>
+          <TimePartsInput value={form.duration} onChange={(duration) => onChange({ duration })} />
+        </label>
+      )}
+      {form.type === "daily_time" && (
+        <label>
+          <span>{textContent.dailyTimeLabel || "Heure"}</span>
+          <TimePartsInput value={form.time} onChange={(time) => onChange({ time })} />
+        </label>
+      )}
+      {form.type === "time_pattern" && (
+        <label>
+          <span>{textContent.timePatternLabel || "Heure / minute / seconde"}</span>
+          <TimePartsInput value={form.pattern} onChange={(pattern) => onChange({ pattern })} allowWildcard />
+        </label>
+      )}
+      {form.type === "interval" && (
+        <label>
+          <span>{textContent.intervalLabel || "Toutes les"}</span>
+          <TimePartsInput value={form.interval} onChange={(interval) => onChange({ interval })} />
+        </label>
+      )}
+      <button className="primary" type="submit">{textContent.addCountdownButton || "Ajouter"}</button>
+    </form>
+  );
+}
+
+function TimePartsInput({ value, onChange, allowWildcard = false }) {
+  function updatePart(part, nextValue) {
+    const cleanValue = allowWildcard && /^x+$/i.test(nextValue.trim()) ? "X" : nextValue.replace(/[^\d]/g, "").slice(0, 2);
+    onChange({ ...value, [part]: cleanValue });
+  }
+
+  return (
+    <div className="time-parts-input" role="group" aria-label="Format heure minute seconde">
+      <input value={value.hours} onChange={(event) => updatePart("hours", event.target.value)} placeholder="hh" inputMode={allowWildcard ? "text" : "numeric"} />
+      <span>:</span>
+      <input value={value.minutes} onChange={(event) => updatePart("minutes", event.target.value)} placeholder="mm" inputMode={allowWildcard ? "text" : "numeric"} />
+      <span>:</span>
+      <input value={value.seconds} onChange={(event) => updatePart("seconds", event.target.value)} placeholder="ss" inputMode={allowWildcard ? "text" : "numeric"} />
+    </div>
+  );
+}
+
+function StopwatchLapList({ laps, textContent, onRename, onDelete }) {
+  const [editingId, setEditingId] = useState("");
+  if (!laps.length) return <p className="muted">{textContent.emptySteps || "Aucune étape enregistrée."}</p>;
+  return (
+    <ul className="tool-split-entry-list timer-list">
+      {laps.map((lap, index) => (
+        <li key={lap.id} className={`timer-list-item ${editingId === lap.id ? "is-editing" : ""}`}>
+          <div className="tool-split-entry timer-entry has-single-action">
+            {editingId === lap.id ? (
+              <EditableTimerLabel
+                value={lap.label}
+                placeholder={`${textContent.stepLabel || "Étape"} ${laps.length - index}`}
+                ariaLabel={textContent.lapLabelAriaLabel || "Libellé de l'étape"}
+                onRename={(label) => onRename(lap.id, label)}
+                onDone={() => setEditingId("")}
+              >
+                <TimerValue ms={lap.elapsedMs} />
+              </EditableTimerLabel>
+            ) : (
+              <span
+                className="tool-split-entry-summary timer-entry-summary"
+                role="button"
+                tabIndex={0}
+                onClick={() => setEditingId(lap.id)}
+                onKeyDown={(event) => handleEditableKeyDown(event, () => setEditingId(lap.id))}
+              >
+                <span className="timer-entry-line">
+                  <TimerValue ms={lap.elapsedMs} />
+                  <span>{lap.label || `${textContent.stepLabel || "Étape"} ${laps.length - index}`}</span>
+                </span>
+              </span>
+            )}
+            <button className="danger" type="button" onClick={() => onDelete(lap.id)} aria-label={textContent.deleteTitle || "Supprimer"} title={textContent.deleteTitle || "Supprimer"}>
+              <Icon name="trash" />
+            </button>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function CountdownList({ countdowns, nowMs, textContent, onRename, onAlertModeChange, onReset, onDelete }) {
+  const [editingId, setEditingId] = useState("");
+  if (!countdowns.length) return <p className="muted">{textContent.emptyCountdowns || "Aucun compte à rebours configuré."}</p>;
+  return (
+    <ul className="tool-split-entry-list timer-list">
+      {countdowns.map((countdown) => {
+        const remainingMs = countdown.targetMs - nowMs;
+        const expired = remainingMs <= 0;
+        const canReset = countdown.type === "duration"
+          || countdown.type === "interval"
+          || (countdown.type === "daily_time" && expired);
+        return (
+          <li key={countdown.id} className={`timer-list-item ${expired ? "is-expired" : ""} ${editingId === countdown.id ? "is-editing" : ""}`}>
+            <div className={`tool-split-entry timer-entry has-single-action ${editingId !== countdown.id ? "has-inline-controls" : ""} ${canReset && editingId !== countdown.id ? "has-inline-reset" : ""}`}>
+              {editingId === countdown.id ? (
+                <EditableTimerLabel
+                  value={countdown.label}
+                  placeholder={textContent.defaultCountdownLabel || "Timer"}
+                  ariaLabel={textContent.countdownLabel || "Libellé"}
+                  onRename={(label) => onRename(countdown.id, label)}
+                  onDone={() => setEditingId("")}
+                >
+                  <TimerValue ms={remainingMs} showCentiseconds={false} />
+                </EditableTimerLabel>
+              ) : (
+                <span
+                  className="tool-split-entry-summary timer-entry-summary"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setEditingId(countdown.id)}
+                  onKeyDown={(event) => handleEditableKeyDown(event, () => setEditingId(countdown.id))}
+                >
+                  <span className="timer-entry-line">
+                    <TimerValue ms={remainingMs} showCentiseconds={false} />
+                    <span>{countdown.label}</span>
+                    <span className="timer-inline-controls">
+                      {canReset && (
+                        <button
+                          className="timer-inline-reset"
+                          type="button"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onReset(countdown);
+                          }}
+                          aria-label={textContent.resetTitle || "Réinitialiser"}
+                          title={textContent.resetTitle || "Réinitialiser"}
+                        >
+                          <Icon name="refresh" />
+                        </button>
+                      )}
+                    <TimerAlertModeSwitch
+                      mode={countdown.alertMode}
+                      blocked={countdown.targetMs && countdown.targetMs - nowMs < ALERT_MIN_DELAY_MS}
+                      textContent={textContent}
+                        onChange={(alertMode) => onAlertModeChange(countdown.id, alertMode)}
+                      />
+                    </span>
+                  </span>
+                </span>
+              )}
+              <button className="danger" type="button" onClick={() => onDelete(countdown.id)} aria-label={textContent.deleteTitle || "Supprimer"} title={textContent.deleteTitle || "Supprimer"}>
+                <Icon name="trash" />
+              </button>
+            </div>
+            <p className="timer-entry-meta">
+              <span>{getCountdownMeta(countdown, textContent)}</span>
+              <em>{expired ? textContent.finishedLabel || "Terminé" : `${textContent.targetLabel || "Prochaine occurrence"} · ${formatTargetTime(countdown.targetMs)}`}</em>
+            </p>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function EditableTimerLabel({ value, placeholder, ariaLabel, children, onRename, onDone }) {
+  const [label, setLabel] = useState(value);
+  const inputRef = useRef(null);
+
+  useLayoutEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  function saveLabel() {
+    onRename(label);
+    onDone();
+  }
+
+  return (
+    <>
+      <span className="tool-split-entry-value timer-entry-value is-readonly">{children}</span>
+      <input
+        ref={inputRef}
+        className="tool-split-entry-label timer-lap-label"
+        value={label}
+        onChange={(event) => setLabel(event.target.value)}
+        onBlur={saveLabel}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") event.currentTarget.blur();
+          if (event.key === "Escape") {
+            setLabel(value);
+            onDone();
+          }
+        }}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+      />
+    </>
+  );
+}