@nightkatana/kronosys-app 1.0.0-beta.2 → 1.0.0-beta.21

package/components/dashboard/GlobalPauseConfirmModal.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { DashboardConfirmModal } from "@/components/dashboard/DashboardSimpleModal";
+import type { GlobalPauseActivationPreview } from "@/lib/globalPausePreview";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import {
+  DEFAULT_DASHBOARD_TIME_ZONE,
+  isValidIanaTimeZone,
+} from "@/lib/dashboardTimeZone";
+import { formatIsoInstantShort } from "@/lib/formatIsoShort";
+import { formatDuration } from "@/lib/taskParsing";
+
+function replaceTitleToken(s: string, title: string): string {
+  return s.split("{title}").join(title);
+}
+
+export function GlobalPauseConfirmModal({
+  open,
+  preview,
+  lang,
+  displayTimeZone = DEFAULT_DASHBOARD_TIME_ZONE,
+  use24HourClock = true,
+  t,
+  onCancel,
+  onConfirm,
+}: Readonly<{
+  open: boolean;
+  preview: GlobalPauseActivationPreview | null;
+  lang: Lang;
+  displayTimeZone?: string;
+  use24HourClock?: boolean;
+  t: DashboardStrings;
+  onCancel: () => void;
+  onConfirm: () => void;
+}>) {
+  const tz =
+    displayTimeZone.trim() && isValidIanaTimeZone(displayTimeZone.trim())
+      ? displayTimeZone.trim()
+      : DEFAULT_DASHBOARD_TIME_ZONE;
+
+  const summaryRows = preview
+    ? (() => {
+        const startRaw = preview.sessionStartIso.trim();
+        const startLabel =
+          formatIsoInstantShort(startRaw, lang, tz, use24HourClock) ??
+          t.globalPauseConfirmSummaryUnknownInstant;
+        const endRaw = preview.sessionEndIso.trim();
+        const endLabel =
+          endRaw.length > 0
+            ? formatIsoInstantShort(endRaw, lang, tz, use24HourClock) ??
+              t.globalPauseConfirmSummaryUnknownInstant
+            : t.globalPauseConfirmSummaryEndOngoing;
+        const wallLabel = formatDuration(
+          Math.max(0, preview.sessionWallMinutes),
+        );
+        const codingLabel =
+          preview.sessionCodingMinutes !== null
+            ? formatDuration(preview.sessionCodingMinutes)
+            : t.globalPauseConfirmSummaryUnknownInstant;
+        const activeLabel =
+          preview.sessionActiveMinutes !== null
+            ? formatDuration(preview.sessionActiveMinutes)
+            : t.globalPauseConfirmSummaryUnknownInstant;
+        const mainMin = preview.taskMainTimerMsExclusive / 60000;
+        const subMin = preview.subtasksTimerMsTotal / 60000;
+        const totalTaskMin = preview.taskTimersTotalMs / 60000;
+
+        return [
+          [t.globalPauseConfirmSummaryStart, startLabel],
+          [t.globalPauseConfirmSummaryEnd, endLabel],
+          [t.globalPauseConfirmSummaryWallDuration, wallLabel],
+          [t.globalPauseConfirmSummaryCodingSession, codingLabel],
+          [t.globalPauseConfirmSummaryActiveSession, activeLabel],
+          [t.globalPauseConfirmSummaryTasks, String(preview.taskCount)],
+          [t.globalPauseConfirmSummarySubtasks, String(preview.subtaskCount)],
+          [
+            t.globalPauseConfirmSummaryTaskTimersTotal,
+            formatDuration(Math.max(0, totalTaskMin)),
+          ],
+          [
+            t.globalPauseConfirmSummaryMainTimer,
+            formatDuration(Math.max(0, mainMin)),
+          ],
+          [
+            t.globalPauseConfirmSummarySubtaskTimers,
+            formatDuration(Math.max(0, subMin)),
+          ],
+        ] as const;
+      })()
+    : [];
+
+  return (
+    <DashboardConfirmModal
+      open={open && preview !== null}
+      title={t.globalPauseConfirmTitle}
+      message={t.globalPauseConfirmIntro}
+      cancelLabel={t.dialogCancelBtn}
+      confirmLabel={t.globalPauseConfirmConfirmBtn}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      extra={
+        preview ? (
+          <div className="space-y-5 text-left text-sm text-zinc-700 dark:text-zinc-300">
+            <section aria-labelledby="global-pause-session-heading">
+              <h3
+                id="global-pause-session-heading"
+                className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500"
+              >
+                {t.globalPauseConfirmSessionHeading}
+              </h3>
+              <p className="mt-2 font-medium text-zinc-900 dark:text-zinc-100">
+                {preview.sessionName}
+              </p>
+              <p className="mt-1.5 text-sm leading-snug text-zinc-600 dark:text-zinc-400">
+                {preview.sessionWallWillPause
+                  ? t.globalPauseConfirmSessionWallWillPause
+                  : t.globalPauseConfirmSessionWallAlreadyPaused}
+              </p>
+
+              <h4 className="mt-4 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+                {t.globalPauseConfirmSummaryHeading}
+              </h4>
+              <dl className="mt-2 space-y-1">
+                {summaryRows.map(([term, desc]) => (
+                  <div
+                    key={term}
+                    className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5 rounded-md px-0 py-0.5 text-[0.85rem]"
+                  >
+                    <dt className="shrink-0 text-zinc-500 dark:text-zinc-400">
+                      {term}
+                    </dt>
+                    <dd className="min-w-0 text-right tabular-nums font-medium text-zinc-900 dark:text-zinc-100">
+                      {desc}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+            <section aria-labelledby="global-pause-tasks-heading">
+              <h3
+                id="global-pause-tasks-heading"
+                className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500"
+              >
+                {t.globalPauseConfirmTasksHeading}
+              </h3>
+              {preview.rows.length > 0 ? (
+                <ul className="mt-2 max-h-[min(40vh,18rem)] space-y-2 overflow-y-auto pr-0.5">
+                  {preview.rows.map((row) => (
+                    <li
+                      key={row.taskId}
+                      className="rounded-lg border border-zinc-200/90 bg-zinc-50/80 px-3 py-2 dark:border-zinc-600/80 dark:bg-zinc-950/40"
+                    >
+                      <p className="truncate font-medium text-zinc-900 dark:text-zinc-100">
+                        {row.taskTitle}
+                      </p>
+                      <ul className="mt-1.5 list-disc space-y-0.5 pl-4 text-[0.85rem] leading-snug text-zinc-600 dark:text-zinc-400">
+                        {row.pauseMainTimer ? (
+                          <li>{t.globalPauseConfirmEffectMainTimer}</li>
+                        ) : null}
+                        {row.activeSubtaskLabel !== undefined ? (
+                          <li>
+                            {replaceTitleToken(
+                              t.globalPauseConfirmEffectSubtaskStop,
+                              row.activeSubtaskLabel,
+                            )}
+                          </li>
+                        ) : null}
+                      </ul>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="mt-2 text-sm leading-snug text-zinc-600 dark:text-zinc-400">
+                  {t.globalPauseConfirmNoTaskEffects}
+                </p>
+              )}
+            </section>
+          </div>
+        ) : null
+      }
+    />
+  );
+}

package/components/dashboard/KronosysDatetimePopoverField.tsx

@@ -8,13 +8,16 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { Calendar } from "lucide-react";
+import { Calendar, Check } from "lucide-react";
 import { DayPicker } from "react-day-picker";
 import { enUS, fr } from "date-fns/locale";
 import "react-day-picker/style.css";
 
 import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
-import { DEFAULT_DASHBOARD_TIME_ZONE, isValidIanaTimeZone } from "@/lib/dashboardTimeZone";
+import {
+  DEFAULT_DASHBOARD_TIME_ZONE,
+  isValidIanaTimeZone,
+} from "@/lib/dashboardTimeZone";
 import { TASK_PAST_DATETIME_TRIGGER_CLASS } from "./taskFieldStyles";
 
 function pad2(n: number): string {
@@ -36,7 +39,8 @@ export function parseDatetimeLocalValue(s: string): Date | undefined {
   return Number.isNaN(d.getTime()) ? undefined : d;
 }
 
-const POPOVER_MAX_H = 400;
+/** Hauteur max pour le flip du popover (alignée sur le style du conteneur). */
+const POPOVER_MAX_H = 480;
 const GAP = 8;
 
 type KronosysDatetimePopoverFieldProps = {
@@ -49,6 +53,8 @@ type KronosysDatetimePopoverFieldProps = {
   displayTimeZone?: string;
   /** Aperçu textuel : `true` = 24 h, `false` = 12 h (AM/PM). */
   use24HourClock?: boolean;
+  /** Mode de préremplissage de l'heure quand la valeur est vide + bouton Today. */
+  defaultTimeMode?: "current-hour" | "next-half-hour";
   t: Pick<
     DashboardStrings,
     | "taskPastDatetimePlaceholder"
@@ -68,8 +74,23 @@ export function KronosysDatetimePopoverField({
   lang,
   displayTimeZone = DEFAULT_DASHBOARD_TIME_ZONE,
   use24HourClock = true,
+  defaultTimeMode = "current-hour",
   t,
 }: KronosysDatetimePopoverFieldProps) {
+  const resolveDefaultTimeParts = useCallback((): {
+    hour: number;
+    minute: number;
+  } => {
+    const now = new Date();
+    if (defaultTimeMode === "next-half-hour") {
+      if (now.getMinutes() < 30) {
+        return { hour: now.getHours(), minute: 30 };
+      }
+      return { hour: (now.getHours() + 1) % 24, minute: 0 };
+    }
+    return { hour: now.getHours(), minute: 0 };
+  }, [defaultTimeMode]);
+
   const [open, setOpen] = useState(false);
   const wasOpenRef = useRef(false);
   const [pos, setPos] = useState({ top: 0, left: 0, maxW: 300 });
@@ -77,9 +98,12 @@ export function KronosysDatetimePopoverField({
   const popoverRef = useRef<HTMLDivElement>(null);
 
   const parsed = parseDatetimeLocalValue(value);
+  const defaultTime = resolveDefaultTimeParts();
   const [selectedDay, setSelectedDay] = useState<Date | undefined>(parsed);
-  const [hour, setHour] = useState(parsed?.getHours() ?? 12);
-  const [minute, setMinute] = useState(parsed?.getMinutes() ?? 0);
+  const [hour, setHour] = useState(parsed?.getHours() ?? defaultTime.hour);
+  const [minute, setMinute] = useState(
+    parsed?.getMinutes() ?? defaultTime.minute,
+  );
 
   useEffect(() => {
     const p = parseDatetimeLocalValue(value);
@@ -178,7 +202,8 @@ export function KronosysDatetimePopoverField({
           dateStyle: "short",
           timeStyle: "short",
           hour12: !use24HourClock,
-          ...(displayTimeZone.trim() && isValidIanaTimeZone(displayTimeZone.trim())
+          ...(displayTimeZone.trim() &&
+          isValidIanaTimeZone(displayTimeZone.trim())
             ? { timeZone: displayTimeZone.trim() }
             : {}),
         }).format(parsed)
@@ -186,6 +211,8 @@ export function KronosysDatetimePopoverField({
 
   const hours = Array.from({ length: 24 }, (_, i) => i);
   const minutes = Array.from({ length: 60 }, (_, i) => i);
+  const acceptAriaLabel =
+    lang === "fr" ? "Accepter la date et l'heure" : "Accept date and time";
 
   const popover =
     open && typeof document !== "undefined"
@@ -195,130 +222,148 @@ export function KronosysDatetimePopoverField({
             role="dialog"
             aria-modal="true"
             aria-label={ariaLabel}
-            className="kronosys-datetime-popover fixed z-[200] rounded-xl border border-violet-500/45 bg-zinc-50 p-3 shadow-2xl dark:border-violet-400/45 dark:bg-zinc-900"
+            className="kronosys-datetime-popover fixed z-[200] flex flex-col gap-3 overflow-hidden rounded-xl border border-violet-500/45 bg-zinc-50 p-3 shadow-2xl dark:border-violet-400/45 dark:bg-zinc-900"
             style={{
               top: pos.top,
               left: pos.left,
               width: pos.maxW,
-              maxHeight: POPOVER_MAX_H,
+              maxHeight: `min(${POPOVER_MAX_H}px, calc(100vh - 16px))`,
             }}
           >
-            <DayPicker
-              mode="single"
-              required={false}
-              selected={selectedDay}
-              defaultMonth={selectedDay ?? new Date()}
-              onSelect={(d) => {
-                setSelectedDay(d);
-                if (d) {
-                  commitFrom(d, hour, minute);
-                }
-              }}
-              locale={locale}
-              classNames={{
-                button_previous:
-                  "rdp-button_previous rounded-lg border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
-                button_next:
-                  "rdp-button_next rounded-lg border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
-                caption_label:
-                  "rdp-caption_label text-sm font-semibold text-zinc-800 dark:text-zinc-100",
-                weekday: "rdp-weekday text-zinc-500 dark:text-zinc-400",
-              }}
-              components={{
-                Chevron: (props) =>
-                  props.orientation === "left" ? (
-                    <span
-                      className="text-base leading-none font-semibold"
-                      aria-hidden
-                    >
-                      ‹
-                    </span>
-                  ) : (
-                    <span
-                      className="text-base leading-none font-semibold"
-                      aria-hidden
-                    >
-                      ›
-                    </span>
-                  ),
-              }}
-            />
-            <div className="mt-3 flex flex-wrap items-center justify-center gap-2 border-t border-zinc-200 pt-3 dark:border-zinc-700/80">
-              <button
-                type="button"
-                className="rounded-lg border border-zinc-300 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
-                onClick={() => {
-                  const now = new Date();
-                  const today = new Date(
-                    now.getFullYear(),
-                    now.getMonth(),
-                    now.getDate(),
-                    hour,
-                    minute,
-                    0,
-                    0,
-                  );
-                  setSelectedDay(today);
-                  commitFrom(today, hour, minute);
+            <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-y-contain">
+              <DayPicker
+                mode="single"
+                required={false}
+                selected={selectedDay}
+                defaultMonth={selectedDay ?? new Date()}
+                onSelect={(d) => {
+                  setSelectedDay(d);
+                  if (d) {
+                    commitFrom(d, hour, minute);
+                  }
                 }}
-              >
-                {t.taskPastDatetimeTodayBtn}
-              </button>
-              <button
-                type="button"
-                className="rounded-lg border border-violet-500/45 bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-700 hover:bg-violet-100 dark:border-violet-400/55 dark:bg-violet-950/35 dark:text-violet-200 dark:hover:bg-violet-900/40"
-                onClick={() => {
-                  const now = new Date();
-                  const h = now.getHours();
-                  const m = now.getMinutes();
-                  setSelectedDay(now);
-                  setHour(h);
-                  setMinute(m);
-                  commitFrom(now, h, m);
+                locale={locale}
+                classNames={{
+                  button_previous:
+                    "rdp-button_previous rounded-lg border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
+                  button_next:
+                    "rdp-button_next rounded-lg border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
+                  caption_label:
+                    "rdp-caption_label text-sm font-semibold text-zinc-800 dark:text-zinc-100",
+                  weekday: "rdp-weekday text-zinc-500 dark:text-zinc-400",
                 }}
-              >
-                {t.taskPastDatetimeNowBtn}
-              </button>
+                components={{
+                  Chevron: (props) =>
+                    props.orientation === "left" ? (
+                      <span
+                        className="text-base leading-none font-semibold"
+                        aria-hidden
+                      >
+                        ‹
+                      </span>
+                    ) : (
+                      <span
+                        className="text-base leading-none font-semibold"
+                        aria-hidden
+                      >
+                        ›
+                      </span>
+                    ),
+                }}
+              />
             </div>
-            <div className="mt-3 flex flex-wrap items-center justify-center gap-2 border-t border-zinc-200 pt-3 dark:border-zinc-700/80">
-              <label className="flex items-center gap-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400">
-                <span className="whitespace-nowrap">
-                  {t.taskPastDatetimeTimeLabel}
-                </span>
-                <select
-                  className="h-8 rounded-lg border border-violet-500/45 bg-white px-2 text-xs font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
-                  value={hour}
-                  onChange={(e) => {
-                    const h = Number(e.target.value);
-                    setHour(h);
-                    commitFrom(selectedDay, h, minute);
+            <div className="relative z-[1] shrink-0 space-y-3 border-t border-zinc-200 bg-zinc-50 pt-3 dark:border-zinc-700/80 dark:bg-zinc-900">
+              <div className="flex flex-wrap items-center justify-center gap-2">
+                <button
+                  type="button"
+                  className="rounded-lg border border-zinc-300 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+                  onClick={() => {
+                    const now = new Date();
+                    const todayDefault = resolveDefaultTimeParts();
+                    const today = new Date(
+                      now.getFullYear(),
+                      now.getMonth(),
+                      now.getDate(),
+                      todayDefault.hour,
+                      todayDefault.minute,
+                      0,
+                      0,
+                    );
+                    setSelectedDay(today);
+                    setHour(todayDefault.hour);
+                    setMinute(todayDefault.minute);
+                    commitFrom(today, todayDefault.hour, todayDefault.minute);
                   }}
-                  aria-label={t.taskPastDatetimeHourAria}
                 >
-                  {hours.map((h) => (
-                    <option key={h} value={h}>
-                      {pad2(h)}
-                    </option>
-                  ))}
-                </select>
-                <span className="font-mono text-zinc-500">:</span>
-                <select
-                  className="h-8 rounded-lg border border-violet-500/45 bg-white px-2 text-xs font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
-                  value={minute}
-                  onChange={(e) => {
-                    const m = Number(e.target.value);
+                  {t.taskPastDatetimeTodayBtn}
+                </button>
+                <button
+                  type="button"
+                  className="rounded-lg border border-violet-500/45 bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-700 hover:bg-violet-100 dark:border-violet-400/55 dark:bg-violet-950/35 dark:text-violet-200 dark:hover:bg-violet-900/40"
+                  onClick={() => {
+                    const now = new Date();
+                    const h = now.getHours();
+                    const m = now.getMinutes();
+                    setSelectedDay(now);
+                    setHour(h);
                     setMinute(m);
-                    commitFrom(selectedDay, hour, m);
+                    commitFrom(now, h, m);
+                  }}
+                >
+                  {t.taskPastDatetimeNowBtn}
+                </button>
+              </div>
+              <div className="flex flex-wrap items-center justify-start gap-2 sm:justify-center">
+                <label className="flex max-w-full flex-wrap items-center gap-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                  <span className="whitespace-nowrap">
+                    {t.taskPastDatetimeTimeLabel}
+                  </span>
+                  <select
+                    className="h-8 w-16 min-w-0 rounded-lg border border-violet-500/45 bg-white px-2 text-xs font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
+                    value={hour}
+                    onChange={(e) => {
+                      const h = Number(e.target.value);
+                      setHour(h);
+                      commitFrom(selectedDay, h, minute);
+                    }}
+                    aria-label={t.taskPastDatetimeHourAria}
+                  >
+                    {hours.map((h) => (
+                      <option key={h} value={h}>
+                        {pad2(h)}
+                      </option>
+                    ))}
+                  </select>
+                  <span className="font-mono text-zinc-500">:</span>
+                  <select
+                    className="h-8 w-16 min-w-0 rounded-lg border border-violet-500/45 bg-white px-2 text-xs font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
+                    value={minute}
+                    onChange={(e) => {
+                      const m = Number(e.target.value);
+                      setMinute(m);
+                      commitFrom(selectedDay, hour, m);
+                    }}
+                    aria-label={t.taskPastDatetimeMinuteAria}
+                  >
+                    {minutes.map((m) => (
+                      <option key={m} value={m}>
+                        {pad2(m)}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <button
+                  type="button"
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-emerald-500/50 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-400/60 dark:bg-emerald-950/35 dark:text-emerald-200 dark:hover:bg-emerald-900/40"
+                  aria-label={acceptAriaLabel}
+                  onClick={() => {
+                    commitFrom(selectedDay, hour, minute);
+                    setOpen(false);
                   }}
-                  aria-label={t.taskPastDatetimeMinuteAria}
                 >
-                  {minutes.map((m) => (
-                    <option key={m} value={m}>
-                      {pad2(m)}
-                    </option>
-                  ))}
-                </select>
-              </label>
+                  <Check className="h-4 w-4" strokeWidth={2.5} aria-hidden />
+                </button>
+              </div>
             </div>
           </div>,
           document.body,
@@ -330,24 +375,24 @@ export function KronosysDatetimePopoverField({
       <button
         ref={triggerRef}
         type="button"
-        className={`${TASK_PAST_DATETIME_TRIGGER_CLASS} inline-flex max-w-full cursor-pointer items-center gap-2 text-left`}
+        className={`${TASK_PAST_DATETIME_TRIGGER_CLASS} max-w-full text-left`}
         aria-label={ariaLabel}
         aria-expanded={open}
         aria-haspopup="dialog"
         onClick={() => setOpen((o) => !o)}
       >
         <span
-          className={`inline-block min-w-0 max-w-full flex-1 truncate text-left font-mono text-xs tabular-nums ${
+          className={`inline-block min-w-0 max-w-full flex-1 truncate text-left ${
             display
-              ? "text-zinc-800 dark:text-zinc-100"
-              : "text-zinc-500 dark:text-zinc-500"
+              ? "text-zinc-500 dark:text-zinc-500"
+              : "text-zinc-400 dark:text-zinc-500/75"
           }`}
         >
           {display ?? t.taskPastDatetimePlaceholder}
         </span>
         <Calendar
-          className="h-3.5 w-3.5 shrink-0 opacity-70"
-          strokeWidth={2}
+          className="h-3 w-3 shrink-0 text-zinc-400/70 opacity-80 transition-[opacity,color] group-hover/datetime-trigger:text-zinc-500 group-hover/datetime-trigger:opacity-100 dark:text-zinc-500/55 dark:group-hover/datetime-trigger:text-zinc-400"
+          strokeWidth={1.5}
           aria-hidden
         />
       </button>