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

package/components/dashboard/SettingsTaskTemplatesSection.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { Pencil, Save, Trash2, X } 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 } from "@/lib/taskParsing";
+import {
+  formatTaskTemplateDraftLine,
+  parseTaskTemplatesFromPayload,
+  type ParsedTaskTemplateRow,
+} from "@/lib/taskTemplateDraft";
+import { DashboardConfirmModal } from "./DashboardSimpleModal";
+import { useDashboardToast } from "./DashboardToastProvider";
+import { InlineMetricHelpTrigger } from "./InlineMetricHelpTrigger";
+
+const CARD_CLASS =
+  "scroll-mt-24 space-y-4 rounded-xl border border-zinc-200 bg-zinc-50/90 p-4 dark:border-zinc-800 dark:bg-zinc-900/40";
+
+const INPUT_CLASS =
+  "w-full min-w-0 rounded-lg border border-zinc-300 bg-white px-2.5 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";
+
+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";
+
+function formatUpdatedShort(iso: string | undefined, lang: Lang): string {
+  if (!iso || !iso.trim()) {
+    return "—";
+  }
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) {
+    return iso.slice(0, 10);
+  }
+  return d.toLocaleString(lang === "fr" ? "fr-CA" : "en-CA", {
+    dateStyle: "short",
+    timeStyle: "short",
+  });
+}
+
+export function SettingsTaskTemplatesSection({
+  s,
+  lang,
+  payload,
+  saving,
+  refresh,
+}: {
+  s: SettingsCopy;
+  lang: Lang;
+  payload: KronosysUpdatePayload;
+  saving: boolean;
+  refresh: () => Promise<boolean | void>;
+}) {
+  const { pushToast } = useDashboardToast();
+  const rows = useMemo(
+    () =>
+      parseTaskTemplatesFromPayload(
+        (payload as Record<string, unknown>).taskTemplates,
+      ),
+    [payload],
+  );
+
+  const [newDraft, setNewDraft] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editDraft, setEditDraft] = useState("");
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+
+  const post = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const submitNew = useCallback(async () => {
+    const d = buildStartTaskFromDraft(newDraft, [], undefined);
+    if (!d.name.trim() && d.tags.length === 0 && !d.project) {
+      return;
+    }
+    await post({
+      type: "saveTaskTemplate",
+      name: d.name,
+      tags: d.tags,
+      ...(d.project ? { project: d.project } : {}),
+      ...(d.project ? { personalProject: d.personalProject === true } : {}),
+    });
+    setNewDraft("");
+    pushToast(s.taskTemplatesSavedToast);
+  }, [newDraft, post, pushToast, s.taskTemplatesSavedToast]);
+
+  const beginEdit = useCallback((tpl: ParsedTaskTemplateRow) => {
+    setEditingId(tpl.id);
+    setEditDraft(formatTaskTemplateDraftLine(tpl));
+  }, []);
+
+  const cancelEdit = useCallback(() => {
+    setEditingId(null);
+    setEditDraft("");
+  }, []);
+
+  const saveEdit = useCallback(async () => {
+    if (!editingId) {
+      return;
+    }
+    const d = buildStartTaskFromDraft(editDraft, [], undefined);
+    if (!d.name.trim() && d.tags.length === 0 && !d.project) {
+      return;
+    }
+    await post({
+      type: "saveTaskTemplate",
+      id: editingId,
+      name: d.name,
+      tags: d.tags,
+      ...(d.project ? { project: d.project } : {}),
+      ...(d.project ? { personalProject: d.personalProject === true } : {}),
+    });
+    setEditingId(null);
+    setEditDraft("");
+    pushToast(s.taskTemplatesUpdatedToast);
+  }, [editDraft, editingId, post, pushToast, s.taskTemplatesUpdatedToast]);
+
+  const confirmDelete = useCallback(async () => {
+    const id = deleteId;
+    setDeleteId(null);
+    if (!id) {
+      return;
+    }
+    await post({ type: "removeTaskTemplate", taskTemplateId: id });
+    pushToast(s.taskTemplatesRemovedToast);
+    if (editingId === id) {
+      cancelEdit();
+    }
+  }, [
+    cancelEdit,
+    deleteId,
+    editingId,
+    post,
+    pushToast,
+    s.taskTemplatesRemovedToast,
+  ]);
+
+  const disabled = saving;
+
+  return (
+    <section
+      id="settings-task-templates"
+      className={CARD_CLASS}
+      aria-labelledby="settings-task-templates-heading"
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2
+            id="settings-task-templates-heading"
+            className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400"
+          >
+            {s.sectionTaskTemplates}
+          </h2>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+            {s.taskTemplatesIntro}
+          </p>
+        </div>
+        <InlineMetricHelpTrigger
+          ariaLabel={s.taskTemplatesHelpAria}
+          body={s.taskTemplatesHelpBody}
+          panelClassName="w-[min(calc(100vw-2rem),24rem)]"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
+          <input
+            type="text"
+            className={INPUT_CLASS}
+            value={newDraft}
+            onChange={(e) => setNewDraft(e.target.value)}
+            placeholder={s.taskTemplatesDraftPlaceholder}
+            aria-label={s.taskTemplatesDraftPlaceholder}
+            disabled={disabled}
+            spellCheck={false}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                void submitNew();
+              }
+            }}
+          />
+          <button
+            type="button"
+            className="shrink-0 rounded-lg bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-50"
+            disabled={disabled || !newDraft.trim()}
+            onClick={() => void submitNew()}
+          >
+            {s.taskTemplatesAddBtn}
+          </button>
+        </div>
+      </div>
+
+      {rows.length === 0 ? (
+        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+          {s.taskTemplatesEmpty}
+        </p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[20rem] border-collapse text-left text-sm">
+            <thead>
+              <tr className="border-b border-zinc-200 dark:border-zinc-700">
+                <th className="pb-2 pr-3 font-semibold text-zinc-600 dark:text-zinc-400">
+                  {s.taskTemplatesColDraft}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((tpl) => {
+                const isEditing = editingId === tpl.id;
+                return (
+                  <tr
+                    key={tpl.id}
+                    className="border-b border-zinc-100 dark:border-zinc-800/90"
+                  >
+                    <td className="py-3 pr-0 align-top">
+                      {isEditing ? (
+                        <input
+                          type="text"
+                          className={INPUT_CLASS}
+                          value={editDraft}
+                          onChange={(e) => setEditDraft(e.target.value)}
+                          disabled={disabled}
+                          spellCheck={false}
+                          aria-label={s.taskTemplatesColDraft}
+                        />
+                      ) : (
+                        <code className="block max-w-xl whitespace-pre-wrap break-all text-xs text-zinc-800 dark:text-zinc-200">
+                          {formatTaskTemplateDraftLine(tpl)}
+                        </code>
+                      )}
+                      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <span className="text-xs tabular-nums text-zinc-600 dark:text-zinc-400">
+                          {s.taskTemplatesColUpdated}:{" "}
+                          {formatUpdatedShort(tpl.updatedAt, lang)}
+                        </span>
+                        <div className="flex flex-wrap items-center gap-1">
+                          {isEditing ? (
+                            <>
+                              <button
+                                type="button"
+                                className={ICON_BTN}
+                                title={s.taskTemplatesSaveBtn}
+                                aria-label={s.taskTemplatesSaveBtn}
+                                disabled={disabled || !editDraft.trim()}
+                                onClick={() => void saveEdit()}
+                              >
+                                <Save size={16} />
+                              </button>
+                              <button
+                                type="button"
+                                className={ICON_BTN}
+                                title={s.taskTemplatesCancelBtn}
+                                aria-label={s.taskTemplatesCancelBtn}
+                                disabled={disabled}
+                                onClick={cancelEdit}
+                              >
+                                <X size={16} />
+                              </button>
+                            </>
+                          ) : (
+                            <>
+                              <button
+                                type="button"
+                                className={ICON_BTN}
+                                title={s.taskTemplatesEditBtn}
+                                aria-label={s.taskTemplatesEditBtn}
+                                disabled={disabled}
+                                onClick={() => beginEdit(tpl)}
+                              >
+                                <Pencil size={16} />
+                              </button>
+                              <button
+                                type="button"
+                                className={ICON_BTN_DANGER}
+                                title={s.taskTemplatesDeleteBtn}
+                                aria-label={s.taskTemplatesDeleteBtn}
+                                disabled={disabled}
+                                onClick={() => setDeleteId(tpl.id)}
+                              >
+                                <Trash2 size={16} />
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <DashboardConfirmModal
+        open={deleteId !== null}
+        message={s.taskTemplatesDeleteConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        confirmVariant="danger"
+        onCancel={() => setDeleteId(null)}
+        onConfirm={() => void confirmDelete()}
+      />
+    </section>
+  );
+}

package/components/dashboard/SettingsTour.tsx

@@ -10,6 +10,7 @@ import {
   type CSSProperties,
 } from "react";
 import { createPortal } from "react-dom";
+import { postKronosysAction } from "@/lib/kronosysApi";
 import { markSettingsTourCompleted } from "@/lib/dashboardTourStorage";
 import type { DashboardStrings } from "@/lib/dashboardCopy";
 
@@ -79,7 +80,7 @@ export function SettingsTour({
       { title: dt.settingsTourStep5Title, body: dt.settingsTourStep5Body },
       { title: dt.settingsTourStep6Title, body: dt.settingsTourStep6Body },
     ],
-    [dt]
+    [dt],
   );
 
   const total = steps.length;
@@ -93,12 +94,22 @@ export function SettingsTour({
     }
   }, [open]);
 
-  const finish = useCallback(() => {
-    markSettingsTourCompleted();
-    onOpenChange(false);
-  }, [onOpenChange]);
+  const finish = useCallback(
+    (reason: "skip" | "done" | "escape") => {
+      void postKronosysAction({
+        type: "tourInteraction",
+        tour: "settings_spotlight",
+        action: reason,
+        stepIndex: step,
+        stepTotal: total,
+      }).catch(() => undefined);
+      markSettingsTourCompleted();
+      onOpenChange(false);
+    },
+    [onOpenChange, step, total],
+  );
 
-  useEscapeDismiss(open, finish);
+  useEscapeDismiss(open, () => finish("escape"));
 
   const updateHoleFromDom = useCallback(() => {
     if (!open) {
@@ -120,7 +131,11 @@ export function SettingsTour({
     }
     const el = document.querySelector(selector);
     if (el instanceof HTMLElement) {
-      el.scrollIntoView({ block: "center", inline: "nearest", behavior: "auto" });
+      el.scrollIntoView({
+        block: "center",
+        inline: "nearest",
+        behavior: "auto",
+      });
     }
     updateHoleFromDom();
     const raf = requestAnimationFrame(updateHoleFromDom);
@@ -167,7 +182,10 @@ export function SettingsTour({
     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) {
+    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));
@@ -198,7 +216,9 @@ export function SettingsTour({
     return null;
   }
 
-  const progressLabel = dt.settingsTourProgressLabel.replace("{n}", String(step + 1)).replace("{total}", String(total));
+  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";
@@ -226,22 +246,46 @@ export function SettingsTour({
             <>
               <div
                 className="fixed bg-black/55"
-                style={{ top: 0, left: 0, width: vw, height: topH, zIndex: 210 }}
+                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 }}
+                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 }}
+                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 }}
+                style={{
+                  top: t,
+                  left: rightLeft,
+                  width: rightW,
+                  height: h,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
@@ -278,19 +322,31 @@ export function SettingsTour({
           <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">
+          <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
+          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"}`}
+                className={`h-2 w-2 rounded-full ${
+                  i === step
+                    ? "bg-violet-500 dark:bg-violet-400"
+                    : "bg-zinc-300 dark:bg-zinc-600"
+                }`}
               />
             ))}
           </div>
@@ -298,17 +354,26 @@ export function SettingsTour({
             <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}
+              onClick={() => finish("skip")}
             >
               {dt.settingsTourSkipBtn}
             </button>
             {step > 0 ? (
-              <button type="button" className={secondaryBtn} onClick={() => setStep((s) => Math.max(0, s - 1))}>
+              <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}>
+              <button
+                ref={primaryBtnRef}
+                type="button"
+                className={primaryBtn}
+                onClick={() => finish("done")}
+              >
                 {dt.settingsTourDoneBtn}
               </button>
             ) : (
@@ -325,7 +390,7 @@ export function SettingsTour({
         </div>
       </div>
     </>,
-    document.body
+    document.body,
   );
 
   return node;

package/components/dashboard/TagPills.tsx

@@ -18,12 +18,16 @@ function TagPillItem({
   onRemove,
   description,
   defaultTagBucketLabel,
+  taskProject,
+  taskPersonalProject,
 }: {
   tag: string;
   chip: string;
   onRemove?: (tag: string) => void;
   description: string | undefined;
   defaultTagBucketLabel?: string;
+  taskProject?: string | null;
+  taskPersonalProject?: boolean;
 }) {
   const { hasDescription, triggerProps, popoverLayer, anchorWrapperProps } =
     useDescriptionPopoverAfterMs(description);
@@ -51,7 +55,10 @@ function TagPillItem({
         : {})}
     >
       <span className="pointer-events-none break-all">
-        {formatTagDisplayForTask(tag, defaultTagBucketLabel)}
+        {formatTagDisplayForTask(tag, defaultTagBucketLabel, {
+          taskProject,
+          personalProject: taskPersonalProject,
+        })}
       </span>
       {interactive ? (
         <span className="pointer-events-none text-[0.7rem] font-normal text-zinc-400 dark:text-zinc-500">×</span>
@@ -86,6 +93,8 @@ export function TagPills({
   tagDescriptions,
   /** Libellé lisible pour l’étiquette réservée `default` (ex. « défaut » en français). */
   defaultTagBucketLabel,
+  taskProject,
+  taskPersonalProject,
 }: {
   tags: string[];
   onRemove?: (tag: string) => void;
@@ -96,6 +105,8 @@ export function TagPills({
   differentiateProjectScopedTags?: boolean;
   tagDescriptions?: Record<string, string>;
   defaultTagBucketLabel?: string;
+  taskProject?: string | null;
+  taskPersonalProject?: boolean;
 }) {
   const chipBase = (tag: string) => {
     const scoped = differentiateProjectScopedTags && isProjectScopedTag(normalizeTagKey(tag));
@@ -141,6 +152,8 @@ export function TagPills({
             onRemove={onRemove}
             description={describe(tag)}
             defaultTagBucketLabel={defaultTagBucketLabel}
+            taskProject={taskProject}
+            taskPersonalProject={taskPersonalProject}
           />
         </Fragment>
       ))}