@open-mercato/core 0.7.1-develop.7178.1.ab93fbaf4e → 0.7.1-develop.7180.1.9717fbbb43

package/dist/modules/staff/lib/time-tracking-ui/TaskBoardScreen.js

@@ -0,0 +1,224 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { LayoutGrid, List, Plus, SlidersHorizontal } from "lucide-react";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { PageBody, PageHeader } from "@open-mercato/ui/backend/Page";
+import { useBackendChrome } from "@open-mercato/ui/backend/BackendChromeProvider";
+import { hasFeature } from "@open-mercato/shared/security/features";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { BOARD_QUERY_ROOT, useBoardSelf, useBoardStatuses } from "./boardDirectory.js";
+import { countActiveBoardFilters } from "./boardFilters.js";
+import { BoardFilterChips, AddBoardFilterPopover } from "./BoardFilterChips.js";
+import { EMPTY_BOARD_SUMMARY } from "./boardSummary.js";
+import { KanbanBoard, MANAGE_TASKS_FEATURE } from "./KanbanBoard.js";
+import { formatBoardMinutes } from "./kanbanBoardData.js";
+import { NewTaskDialog } from "./NewTaskDialog.js";
+import { TaskDrawer } from "./TaskDrawer.js";
+import { TaskListView } from "./TaskListView.js";
+import { useBoardFilters, useBoardViewMode } from "./useBoardFilters.js";
+function TaskBoardScreen({
+  timeProjectId,
+  projectName,
+  headerActions
+}) {
+  const t = useT();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const { payload } = useBackendChrome();
+  const canManageTasks = hasFeature(payload?.grantedFeatures, MANAGE_TASKS_FEATURE);
+  const selfQuery = useBoardSelf();
+  const statusesQuery = useBoardStatuses(timeProjectId);
+  const statuses = React.useMemo(() => statusesQuery.data ?? [], [statusesQuery.data]);
+  const [filters, setFilters] = useBoardFilters({ timeProjectId });
+  const [view, setView] = useBoardViewMode();
+  const [summary, setSummary] = React.useState(EMPTY_BOARD_SUMMARY);
+  const [newTaskOpen, setNewTaskOpen] = React.useState(false);
+  const handleSummaryChange = React.useCallback((next) => {
+    setSummary(
+      (previous) => previous.taskCount === next.taskCount && previous.loggedMinutes === next.loggedMinutes ? previous : next
+    );
+  }, []);
+  const openTask = React.useCallback(
+    (taskId) => {
+      const params = new URLSearchParams(searchParams?.toString() ?? "");
+      params.set("task", taskId);
+      router.push(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+  const closeTask = React.useCallback(() => {
+    const params = new URLSearchParams(searchParams?.toString() ?? "");
+    params.delete("task");
+    params.delete("panel");
+    const query = params.toString();
+    router.push(query.length > 0 ? `?${query}` : "?", { scroll: false });
+  }, [router, searchParams]);
+  const invalidateTasks = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT] }).catch(() => {
+    });
+  }, [queryClient]);
+  const description = React.useMemo(() => {
+    const parts = [
+      projectName ?? null,
+      t("staff.time_tracking.board.summary.tasks", "{count} tasks", { count: summary.taskCount }),
+      t("staff.time_tracking.board.summary.logged", "{hours} logged", {
+        hours: formatBoardMinutes(summary.loggedMinutes)
+      })
+    ].filter((part) => !!part && part.length > 0);
+    return parts.join(" \xB7 ");
+  }, [projectName, summary, t]);
+  const activeFilterCount = countActiveBoardFilters(filters);
+  const boardLabel = t("staff.time_tracking.board.view.board", "Board");
+  const listLabel = t("staff.time_tracking.board.view.list", "List");
+  const drawerTaskId = searchParams?.get("task") ?? null;
+  const drawerPanel = searchParams?.get("panel") ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: t("staff.time_tracking.nav.tasks", "Tasks"),
+        description,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          headerActions,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "group",
+              "aria-label": t("staff.time_tracking.board.view.label", "View"),
+              className: "inline-flex items-center rounded-md border border-border p-0.5",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    "aria-pressed": view === "board",
+                    "data-testid": "board-view-board",
+                    className: `h-auto gap-1.5 px-2.5 py-1 text-xs ${view === "board" ? "bg-foreground text-background hover:bg-foreground" : "text-muted-foreground hover:bg-muted"}`,
+                    onClick: () => setView("board"),
+                    children: [
+                      /* @__PURE__ */ jsx(LayoutGrid, { className: "size-3.5", "aria-hidden": "true" }),
+                      boardLabel
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    "aria-pressed": view === "list",
+                    "data-testid": "board-view-list",
+                    className: `h-auto gap-1.5 px-2.5 py-1 text-xs ${view === "list" ? "bg-foreground text-background hover:bg-foreground" : "text-muted-foreground hover:bg-muted"}`,
+                    onClick: () => setView("list"),
+                    children: [
+                      /* @__PURE__ */ jsx(List, { className: "size-3.5", "aria-hidden": "true" }),
+                      listLabel
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AddBoardFilterPopover,
+            {
+              filters,
+              onChange: setFilters,
+              self: selfQuery.data ?? null,
+              statuses,
+              testId: "board-filters-button",
+              trigger: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", "data-testid": "board-filters-button", children: [
+                /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5", "aria-hidden": "true" }),
+                t("staff.time_tracking.board.filters.cta", "Filters"),
+                activeFilterCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", "data-testid": "board-filters-count", children: activeFilterCount }) : null
+              ] })
+            }
+          ),
+          canManageTasks ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              onClick: () => setNewTaskOpen(true),
+              "data-testid": "board-new-task",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-3.5", "aria-hidden": "true" }),
+                t("staff.time_tracking.board.newTask.cta", "New task")
+              ]
+            }
+          ) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsx(
+        BoardFilterChips,
+        {
+          filters,
+          onChange: setFilters,
+          self: selfQuery.data ?? null,
+          statuses
+        }
+      ),
+      view === "board" ? /* @__PURE__ */ jsx(
+        KanbanBoard,
+        {
+          timeProjectId,
+          projectName: projectName ?? null,
+          filters,
+          onSummaryChange: handleSummaryChange
+        }
+      ) : /* @__PURE__ */ jsx(
+        TaskListView,
+        {
+          timeProjectId,
+          filters,
+          statuses,
+          onOpenTask: openTask,
+          onSummaryChange: handleSummaryChange
+        }
+      )
+    ] }),
+    canManageTasks ? /* @__PURE__ */ jsx(
+      NewTaskDialog,
+      {
+        open: newTaskOpen,
+        onOpenChange: setNewTaskOpen,
+        timeProjectId,
+        statuses,
+        assigneeStaffMemberId: selfQuery.data?.id ?? null,
+        onCreated: (taskId) => {
+          invalidateTasks();
+          if (taskId) openTask(taskId);
+        }
+      }
+    ) : null,
+    view === "list" && drawerTaskId ? /* @__PURE__ */ jsx(
+      TaskDrawer,
+      {
+        taskId: drawerTaskId,
+        open: true,
+        onOpenChange: (next) => {
+          if (!next) closeTask();
+        },
+        projectName: projectName ?? null,
+        focusPanel: drawerPanel,
+        onChanged: invalidateTasks
+      }
+    ) : null
+  ] });
+}
+var TaskBoardScreen_default = TaskBoardScreen;
+export {
+  TaskBoardScreen,
+  TaskBoardScreen_default as default
+};
+//# sourceMappingURL=TaskBoardScreen.js.map

package/dist/modules/staff/lib/time-tracking-ui/TaskBoardScreen.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/TaskBoardScreen.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { useRouter, useSearchParams } from 'next/navigation'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { LayoutGrid, List, Plus, SlidersHorizontal } from 'lucide-react'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { PageBody, PageHeader } from '@open-mercato/ui/backend/Page'\nimport { useBackendChrome } from '@open-mercato/ui/backend/BackendChromeProvider'\nimport { hasFeature } from '@open-mercato/shared/security/features'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { BOARD_QUERY_ROOT, useBoardSelf, useBoardStatuses } from './boardDirectory'\nimport { countActiveBoardFilters } from './boardFilters'\nimport { BoardFilterChips, AddBoardFilterPopover } from './BoardFilterChips'\nimport { EMPTY_BOARD_SUMMARY, type BoardSummary } from './boardSummary'\nimport { KanbanBoard, MANAGE_TASKS_FEATURE } from './KanbanBoard'\nimport { formatBoardMinutes } from './kanbanBoardData'\nimport { NewTaskDialog } from './NewTaskDialog'\nimport { TaskDrawer } from './TaskDrawer'\nimport { TaskListView } from './TaskListView'\nimport { useBoardFilters, useBoardViewMode } from './useBoardFilters'\n\n/**\n * Screen 6 in one piece \u2014 the page head, the filter chip row and whichever view is\n * selected.\n *\n * Both board routes (the module-level `?projectId=` one and the per-project one) render\n * this, so the chrome cannot drift between them. The head's subtitle is reported upward\n * by the active view rather than fetched again here: the count and the hours then always\n * describe the rows on screen, filters included.\n */\nexport function TaskBoardScreen({\n  timeProjectId,\n  projectName,\n  headerActions,\n}: {\n  timeProjectId: string\n  projectName?: string | null\n  /** Route-specific controls (the project picker, \"back to project\") placed before the switch. */\n  headerActions?: React.ReactNode\n}): React.ReactElement {\n  const t = useT()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const queryClient = useQueryClient()\n  const { payload } = useBackendChrome()\n  const canManageTasks = hasFeature(payload?.grantedFeatures, MANAGE_TASKS_FEATURE)\n\n  const selfQuery = useBoardSelf()\n  const statusesQuery = useBoardStatuses(timeProjectId)\n  const statuses = React.useMemo(() => statusesQuery.data ?? [], [statusesQuery.data])\n\n  const [filters, setFilters] = useBoardFilters({ timeProjectId })\n  const [view, setView] = useBoardViewMode()\n  const [summary, setSummary] = React.useState<BoardSummary>(EMPTY_BOARD_SUMMARY)\n  const [newTaskOpen, setNewTaskOpen] = React.useState(false)\n\n  const handleSummaryChange = React.useCallback((next: BoardSummary) => {\n    setSummary((previous) =>\n      previous.taskCount === next.taskCount && previous.loggedMinutes === next.loggedMinutes\n        ? previous\n        : next,\n    )\n  }, [])\n\n  const openTask = React.useCallback(\n    (taskId: string) => {\n      const params = new URLSearchParams(searchParams?.toString() ?? '')\n      params.set('task', taskId)\n      router.push(`?${params.toString()}`, { scroll: false })\n    },\n    [router, searchParams],\n  )\n\n  const closeTask = React.useCallback(() => {\n    const params = new URLSearchParams(searchParams?.toString() ?? '')\n    params.delete('task')\n    params.delete('panel')\n    const query = params.toString()\n    router.push(query.length > 0 ? `?${query}` : '?', { scroll: false })\n  }, [router, searchParams])\n\n  const invalidateTasks = React.useCallback(() => {\n    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT] }).catch(() => {})\n  }, [queryClient])\n\n  const description = React.useMemo(() => {\n    const parts = [\n      projectName ?? null,\n      t('staff.time_tracking.board.summary.tasks', '{count} tasks', { count: summary.taskCount }),\n      t('staff.time_tracking.board.summary.logged', '{hours} logged', {\n        hours: formatBoardMinutes(summary.loggedMinutes),\n      }),\n    ].filter((part): part is string => !!part && part.length > 0)\n    return parts.join(' \u00B7 ')\n  }, [projectName, summary, t])\n\n  const activeFilterCount = countActiveBoardFilters(filters)\n  const boardLabel = t('staff.time_tracking.board.view.board', 'Board')\n  const listLabel = t('staff.time_tracking.board.view.list', 'List')\n\n  const drawerTaskId = searchParams?.get('task') ?? null\n  const drawerPanel = searchParams?.get('panel') ?? null\n\n  return (\n    <>\n      <PageHeader\n        title={t('staff.time_tracking.nav.tasks', 'Tasks')}\n        description={description}\n        actions={\n          <>\n            {headerActions}\n            <div\n              role=\"group\"\n              aria-label={t('staff.time_tracking.board.view.label', 'View')}\n              className=\"inline-flex items-center rounded-md border border-border p-0.5\"\n            >\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-pressed={view === 'board'}\n                data-testid=\"board-view-board\"\n                className={`h-auto gap-1.5 px-2.5 py-1 text-xs ${\n                  view === 'board'\n                    ? 'bg-foreground text-background hover:bg-foreground'\n                    : 'text-muted-foreground hover:bg-muted'\n                }`}\n                onClick={() => setView('board')}\n              >\n                <LayoutGrid className=\"size-3.5\" aria-hidden=\"true\" />\n                {boardLabel}\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-pressed={view === 'list'}\n                data-testid=\"board-view-list\"\n                className={`h-auto gap-1.5 px-2.5 py-1 text-xs ${\n                  view === 'list'\n                    ? 'bg-foreground text-background hover:bg-foreground'\n                    : 'text-muted-foreground hover:bg-muted'\n                }`}\n                onClick={() => setView('list')}\n              >\n                <List className=\"size-3.5\" aria-hidden=\"true\" />\n                {listLabel}\n              </Button>\n            </div>\n\n            <AddBoardFilterPopover\n              filters={filters}\n              onChange={setFilters}\n              self={selfQuery.data ?? null}\n              statuses={statuses}\n              testId=\"board-filters-button\"\n              trigger={\n                <Button type=\"button\" variant=\"outline\" size=\"sm\" data-testid=\"board-filters-button\">\n                  <SlidersHorizontal className=\"size-3.5\" aria-hidden=\"true\" />\n                  {t('staff.time_tracking.board.filters.cta', 'Filters')}\n                  {activeFilterCount > 0 ? (\n                    <Badge variant=\"neutral\" size=\"sm\" data-testid=\"board-filters-count\">\n                      {activeFilterCount}\n                    </Badge>\n                  ) : null}\n                </Button>\n              }\n            />\n\n            {canManageTasks ? (\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                onClick={() => setNewTaskOpen(true)}\n                data-testid=\"board-new-task\"\n              >\n                <Plus className=\"size-3.5\" aria-hidden=\"true\" />\n                {t('staff.time_tracking.board.newTask.cta', 'New task')}\n              </Button>\n            ) : null}\n          </>\n        }\n      />\n\n      <PageBody>\n        <BoardFilterChips\n          filters={filters}\n          onChange={setFilters}\n          self={selfQuery.data ?? null}\n          statuses={statuses}\n        />\n\n        {view === 'board' ? (\n          <KanbanBoard\n            timeProjectId={timeProjectId}\n            projectName={projectName ?? null}\n            filters={filters}\n            onSummaryChange={handleSummaryChange}\n          />\n        ) : (\n          <TaskListView\n            timeProjectId={timeProjectId}\n            filters={filters}\n            statuses={statuses}\n            onOpenTask={openTask}\n            onSummaryChange={handleSummaryChange}\n          />\n        )}\n      </PageBody>\n\n      {canManageTasks ? (\n        <NewTaskDialog\n          open={newTaskOpen}\n          onOpenChange={setNewTaskOpen}\n          timeProjectId={timeProjectId}\n          statuses={statuses}\n          assigneeStaffMemberId={selfQuery.data?.id ?? null}\n          onCreated={(taskId) => {\n            invalidateTasks()\n            if (taskId) openTask(taskId)\n          }}\n        />\n      ) : null}\n\n      {view === 'list' && drawerTaskId ? (\n        <TaskDrawer\n          taskId={drawerTaskId}\n          open\n          onOpenChange={(next) => {\n            if (!next) closeTask()\n          }}\n          projectName={projectName ?? null}\n          focusPanel={drawerPanel}\n          onChanged={invalidateTasks}\n        />\n      ) : null}\n    </>\n  )\n}\n\nexport default TaskBoardScreen\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/staff/lib/time-tracking-ui/TaskCommentThread.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Kbd } from "@open-mercato/ui/primitives/kbd";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { ErrorMessage, LoadingMessage } from "@open-mercato/ui/backend/detail";
+import { formatDateTime } from "@open-mercato/shared/lib/time";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function TaskCommentThread({
+  comments,
+  loading,
+  loadError,
+  posting,
+  canComment,
+  onPost
+}) {
+  const t = useT();
+  const [draft, setDraft] = React.useState("");
+  const submit = React.useCallback(async () => {
+    const body = draft.trim();
+    if (!body || posting || !canComment) return;
+    const saved = await onPost(body);
+    if (saved) setDraft("");
+  }, [canComment, draft, onPost, posting]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      void submit();
+    },
+    [submit]
+  );
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "data-testid": "task-drawer-comments", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("staff.time_tracking.taskDrawer.comments.title", "Comments ({count})", { count: comments.length }) }),
+    loading ? /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.time_tracking.taskDrawer.comments.loading", "Loading the thread\u2026") }) : loadError ? /* @__PURE__ */ jsx(ErrorMessage, { label: t("staff.time_tracking.taskDrawer.comments.loadError", "Could not load the comments.") }) : comments.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("staff.time_tracking.taskDrawer.comments.empty", "No comments yet.") }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: comments.map((comment) => {
+      const author = comment.authorName ?? comment.authorEmail ?? t("staff.time_tracking.taskDrawer.comments.unknownAuthor", "Unknown author");
+      return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", "data-comment-id": comment.id, children: [
+        /* @__PURE__ */ jsx(Avatar, { label: author, size: "sm" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: author }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDateTime(comment.createdAt) ?? "" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-normal text-foreground", children: comment.body })
+        ] })
+      ] }, comment.id);
+    }) }),
+    canComment ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          rows: 2,
+          value: draft,
+          disabled: posting,
+          onChange: (event) => setDraft(event.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: t("staff.time_tracking.taskDrawer.comments.placeholder", "Write a comment\u2026"),
+          "aria-label": t("staff.time_tracking.taskDrawer.comments.placeholder", "Write a comment\u2026"),
+          "data-testid": "task-drawer-comment-input"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            disabled: posting || draft.trim().length === 0,
+            onClick: () => {
+              void submit();
+            },
+            "data-testid": "task-drawer-comment-submit",
+            children: t("staff.time_tracking.taskDrawer.comments.submit", "Comment")
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Kbd, { children: "\u2318" }),
+          /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" }),
+          t("staff.time_tracking.taskDrawer.comments.hint", "posts")
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+var TaskCommentThread_default = TaskCommentThread;
+export {
+  TaskCommentThread,
+  TaskCommentThread_default as default
+};
+//# sourceMappingURL=TaskCommentThread.js.map

package/dist/modules/staff/lib/time-tracking-ui/TaskCommentThread.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/TaskCommentThread.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'\nimport { formatDateTime } from '@open-mercato/shared/lib/time'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { DrawerComment } from './taskDrawerData'\n\nexport type TaskCommentThreadProps = {\n  comments: readonly DrawerComment[]\n  loading: boolean\n  loadError: boolean\n  posting: boolean\n  canComment: boolean\n  /** Resolves `true` when the comment was written, which is when the box clears. */\n  onPost: (body: string) => Promise<boolean>\n}\n\n/**\n * The comment thread of screen 7 (US-C4).\n *\n * Deliberately not `NotesSection`: that component is a detail-page *tab* \u2014\n * markdown toolbar, appearance dialog, deal linking, sort control, ~1400 lines \u2014\n * and screen 7 asks for a conversation strip with a two-line composer. The API is\n * task-scoped (`/tasks/{id}/comments`) rather than the shared notes adapter, so\n * reusing it would mean adapting a large surface to hide most of it.\n *\n * Oldest first, because the drawer is read top to bottom; \u2318\u21B5 posts, which is the\n * shortcut the mockup prints under the box.\n */\nexport function TaskCommentThread({\n  comments,\n  loading,\n  loadError,\n  posting,\n  canComment,\n  onPost,\n}: TaskCommentThreadProps) {\n  const t = useT()\n  const [draft, setDraft] = React.useState('')\n\n  const submit = React.useCallback(async () => {\n    const body = draft.trim()\n    if (!body || posting || !canComment) return\n    const saved = await onPost(body)\n    if (saved) setDraft('')\n  }, [canComment, draft, onPost, posting])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key !== 'Enter' || !(event.metaKey || event.ctrlKey)) return\n      event.preventDefault()\n      // Stops the drawer-level handler from seeing the same chord twice.\n      event.stopPropagation()\n      void submit()\n    },\n    [submit],\n  )\n\n  return (\n    <section className=\"flex flex-col gap-3\" data-testid=\"task-drawer-comments\">\n      <h3 className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n        {t('staff.time_tracking.taskDrawer.comments.title', 'Comments ({count})', { count: comments.length })}\n      </h3>\n\n      {loading ? (\n        <LoadingMessage label={t('staff.time_tracking.taskDrawer.comments.loading', 'Loading the thread\u2026')} />\n      ) : loadError ? (\n        <ErrorMessage label={t('staff.time_tracking.taskDrawer.comments.loadError', 'Could not load the comments.')} />\n      ) : comments.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {t('staff.time_tracking.taskDrawer.comments.empty', 'No comments yet.')}\n        </p>\n      ) : (\n        <ul className=\"flex flex-col gap-3\">\n          {comments.map((comment) => {\n            const author =\n              comment.authorName\n              ?? comment.authorEmail\n              ?? t('staff.time_tracking.taskDrawer.comments.unknownAuthor', 'Unknown author')\n            return (\n              <li key={comment.id} className=\"flex items-start gap-2.5\" data-comment-id={comment.id}>\n                <Avatar label={author} size=\"sm\" />\n                <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                  <div className=\"flex flex-wrap items-baseline gap-2\">\n                    <span className=\"text-sm font-medium text-foreground\">{author}</span>\n                    <span className=\"text-xs text-muted-foreground\">{formatDateTime(comment.createdAt) ?? ''}</span>\n                  </div>\n                  <p className=\"whitespace-pre-wrap break-words text-sm leading-normal text-foreground\">\n                    {comment.body}\n                  </p>\n                </div>\n              </li>\n            )\n          })}\n        </ul>\n      )}\n\n      {canComment ? (\n        <div className=\"flex flex-col gap-2\">\n          <Textarea\n            rows={2}\n            value={draft}\n            disabled={posting}\n            onChange={(event) => setDraft(event.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={t('staff.time_tracking.taskDrawer.comments.placeholder', 'Write a comment\u2026')}\n            aria-label={t('staff.time_tracking.taskDrawer.comments.placeholder', 'Write a comment\u2026')}\n            data-testid=\"task-drawer-comment-input\"\n          />\n          <div className=\"flex items-center gap-3\">\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              disabled={posting || draft.trim().length === 0}\n              onClick={() => { void submit() }}\n              data-testid=\"task-drawer-comment-submit\"\n            >\n              {t('staff.time_tracking.taskDrawer.comments.submit', 'Comment')}\n            </Button>\n            <span className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <Kbd>\u2318</Kbd>\n              <Kbd>\u21B5</Kbd>\n              {t('staff.time_tracking.taskDrawer.comments.hint', 'posts')}\n            </span>\n          </div>\n        </div>\n      ) : null}\n    </section>\n  )\n}\n\nexport default TaskCommentThread\n"],
+  "mappings": "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",
+  "names": []
+}