@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/app/_components/task-detail-sheet.tsx.ejs

@@ -1,15 +1,37 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import { CommentContent } from '@/components/ui/comment-rich-editor';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { useApp } from '@hed-hog/next-app-provider';
-import { AlarmClock, Calendar, Tag, User } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlarmClock,
+  Calendar,
+  MessageSquare,
+  Pencil,
+  Tag,
+  Trash2,
+  User,
+  X,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import {
+  createTaskComment,
+  deleteTaskComment,
+  fetchTaskComments,
+  updateTaskComment,
+} from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
+import type { OperationsTaskComment } from '../_lib/types';
 import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
 import { StatusBadge } from './status-badge';
 
@@ -35,6 +57,7 @@ type Props = {
   onOpenChange: (open: boolean) => void;
   statusLabel?: (status: string) => string;
   footer?: ReactNode;
+  defaultTab?: 'info' | 'comments';
 };
 
 function getPriorityLabel(value?: string | null) {
@@ -67,6 +90,20 @@ function getAvatarSrc(task: TaskDetailSheetData | null) {
   return null;
 }
 
+function getCommentAvatarSrc(comment: OperationsTaskComment) {
+  if (
+    typeof comment.actorUserPhotoId === 'number' &&
+    comment.actorUserPhotoId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${comment.actorUserPhotoId}`;
+  if (
+    typeof comment.actorPersonAvatarId === 'number' &&
+    comment.actorPersonAvatarId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${comment.actorPersonAvatarId}`;
+  return null;
+}
+
 function getInitials(value?: string | null) {
   const parts = String(value ?? '')
     .trim()
@@ -77,25 +114,314 @@ function getInitials(value?: string | null) {
   return parts.map((p) => p[0]?.toUpperCase() ?? '').join('');
 }
 
+function formatCommentDate(value?: string | null) {
+  if (!value) return '';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return 'agora';
+  if (diffMins < 60) return `${diffMins}min atrás`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h atrás`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays}d atrás`;
+  return date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
+}
+
+export type TaskCommentsSectionProps = {
+  taskId: number;
+};
+
+export function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
+  const { request, showToastHandler, getSettingValue } = useApp();
+  const ct = useTranslations('operations.ProjectDetailsPage.commentsSection');
+  const editWindowMinutes = Number(
+    getSettingValue('operations.comment-edit-window') ?? 5
+  );
+  const [newComment, setNewComment] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState('');
+  const [savingEditId, setSavingEditId] = useState<number | null>(null);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [localComments, setLocalComments] = useState<
+    OperationsTaskComment[] | null
+  >(null);
+
+  // Force re-render precisely when each comment's edit window expires
+  const [, setTick] = useState(0);
+  const comments_ref = useRef<OperationsTaskComment[]>([]);
+
+  const mentionItems = useMentionItems(request);
+
+  const { data: fetchedComments = [], refetch } = useQuery<
+    OperationsTaskComment[]
+  >({
+    queryKey: ['task-comments', taskId],
+    queryFn: () =>
+      fetchTaskComments(request, taskId) as Promise<OperationsTaskComment[]>,
+  });
+
+  const comments = localComments ?? fetchedComments;
+
+  // Keep ref in sync so the timeout effect always sees current comments
+  comments_ref.current = comments;
+
+  // Schedule one precise re-render for each comment that is still within the
+  // edit window, so the buttons disappear at the exact moment they expire.
+  useEffect(() => {
+    if (editWindowMinutes <= 0) return;
+    const windowMs = editWindowMinutes * 60_000;
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    for (const c of comments_ref.current) {
+      const ageMs = Date.now() - new Date(c.createdAt).getTime();
+      const msUntilExpiry = windowMs - ageMs;
+      if (msUntilExpiry > 0) {
+        timers.push(setTimeout(() => setTick((t) => t + 1), msUntilExpiry));
+      }
+    }
+    return () => timers.forEach(clearTimeout);
+    // Re-schedule whenever the comment list or the window setting changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comments, editWindowMinutes]);
+
+  const handleSubmit = async () => {
+    const stripped = newComment.replace(/<[^>]*>/g, '').trim();
+    if (!stripped) return;
+    setSubmitting(true);
+    try {
+      const created = (await createTaskComment(
+        request,
+        taskId,
+        newComment
+      )) as OperationsTaskComment;
+      setLocalComments([...(localComments ?? fetchedComments), created]);
+      setNewComment('');
+    } catch {
+      showToastHandler?.('error', ct('errors.addComment'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleStartEdit = (comment: OperationsTaskComment) => {
+    setEditingId(comment.id);
+    setEditContent(comment.content);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setEditContent('');
+  };
+
+  const handleSaveEdit = async (comment: OperationsTaskComment) => {
+    const trimmed = editContent.replace(/<[^>]*>/g, '').trim();
+    if (!trimmed) return;
+    setSavingEditId(comment.id);
+    try {
+      const updated = (await updateTaskComment(
+        request,
+        taskId,
+        comment.id,
+        editContent
+      )) as OperationsTaskComment;
+      if (updated) {
+        setLocalComments(
+          (localComments ?? fetchedComments).map((c) =>
+            c.id === comment.id ? updated : c
+          )
+        );
+      }
+      setEditingId(null);
+      setEditContent('');
+    } catch {
+      showToastHandler?.('error', ct('errors.editComment'));
+    } finally {
+      setSavingEditId(null);
+    }
+  };
+
+  const handleDelete = async (comment: OperationsTaskComment) => {
+    setDeletingId(comment.id);
+    try {
+      await deleteTaskComment(request, taskId, comment.id);
+      setLocalComments(
+        (localComments ?? fetchedComments).filter((c) => c.id !== comment.id)
+      );
+    } catch {
+      showToastHandler?.('error', ct('errors.deleteComment'));
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <MessageSquare className="size-3" />
+        {ct('title')}
+        {comments.length > 0 ? (
+          <span className="ml-0.5 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
+            {comments.length}
+          </span>
+        ) : null}
+      </div>
+
+      {comments.length > 0 ? (
+        <div className="flex flex-col gap-3">
+          {comments.map((comment) => {
+            const avatarSrc = getCommentAvatarSrc(comment);
+            const isEditing = editingId === comment.id;
+            const isDeleting = deletingId === comment.id;
+            const isSaving = savingEditId === comment.id;
+            const ageMinutes =
+              (Date.now() - new Date(comment.createdAt).getTime()) / 60000;
+            const canModify =
+              editWindowMinutes === 0 || ageMinutes < editWindowMinutes;
+
+            return (
+              <div key={comment.id} className="flex gap-2.5">
+                <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                  {avatarSrc ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={avatarSrc}
+                      alt={comment.actorName ?? ''}
+                      className="size-full object-cover"
+                    />
+                  ) : (
+                    getInitials(comment.actorName)
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="truncate text-xs font-semibold">
+                      {comment.actorName ?? ct('defaultUser')}
+                    </span>
+                    <div className="flex shrink-0 items-center gap-1">
+                      <span className="text-[10px] text-muted-foreground">
+                        {formatCommentDate(comment.createdAt)}
+                      </span>
+                      {!isEditing ? (
+                        <>
+                          {canModify ? (
+                            <>
+                              <button
+                                type="button"
+                                aria-label={ct('ariaEditComment')}
+                                disabled={isDeleting}
+                                onClick={() => handleStartEdit(comment)}
+                                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
+                              >
+                                <Pencil className="size-3" />
+                              </button>
+                              <button
+                                type="button"
+                                aria-label={ct('ariaDeleteComment')}
+                                disabled={isDeleting}
+                                onClick={() => void handleDelete(comment)}
+                                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
+                              >
+                                <Trash2 className="size-3" />
+                              </button>
+                            </>
+                          ) : null}
+                        </>
+                      ) : null}
+                    </div>
+                  </div>
+                  {isEditing ? (
+                    <div className="mt-1 flex flex-col gap-1.5">
+                      <RichTextEditor
+                        value={editContent}
+                        onChange={setEditContent}
+                        mentions={mentionItems}
+                      />
+                      <div className="flex gap-1.5">
+                        <Button
+                          size="sm"
+                          className="h-7 px-2 text-xs"
+                          disabled={
+                            isSaving ||
+                            !editContent.replace(/<[^>]*>/g, '').trim()
+                          }
+                          onClick={() => void handleSaveEdit(comment)}
+                        >
+                          {ct('saveButton')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 text-xs"
+                          disabled={isSaving}
+                          onClick={handleCancelEdit}
+                        >
+                          <X className="size-3" />
+                          {ct('cancelButton')}
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <CommentContent content={comment.content} />
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground">{ct('noComments')}</p>
+      )}
+
+      <div className="flex flex-col gap-1.5 pt-1">
+        <RichTextEditor
+          value={newComment}
+          onChange={setNewComment}
+          mentions={mentionItems}
+        />
+        <div className="flex justify-end">
+          <Button
+            size="sm"
+            className="gap-1.5"
+            disabled={submitting || !newComment.replace(/<[^>]*>/g, '').trim()}
+            onClick={() => void handleSubmit()}
+          >
+            {ct('submitButton')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function TaskDetailSheet({
   task,
   open,
   onOpenChange,
   statusLabel,
   footer,
+  defaultTab = 'comments',
 }: Props) {
   const commonT = useTranslations('operations.Common');
   const detailT = useTranslations('operations.ProjectDetailsPage');
   const { getSettingValue, currentLocaleCode } = useApp();
 
+  const [tab, setTab] = useState<'info' | 'comments'>(defaultTab);
+
+  useEffect(() => {
+    if (open) setTab(defaultTab);
+  }, [open, defaultTab]);
+
   const avatarSrc = getAvatarSrc(task);
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex w-full flex-col gap-0 overflow-y-auto sm:max-w-md">
+      <SheetContent className="flex w-full flex-col gap-0 overflow-hidden sm:max-w-md">
         {task ? (
           <>
-            <SheetHeader className="pb-2">
+            <SheetHeader className="shrink-0 px-4 pb-2 pt-4">
               <SheetTitle className="pr-6 text-base font-semibold leading-snug">
                 {task.name}
               </SheetTitle>
@@ -114,107 +440,139 @@ export function TaskDetailSheet({
               </div>
             </SheetHeader>
 
-            <div className="flex flex-col gap-5 p-4 pt-3">
-              {task.description ? (
-                <div>
-                  <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    {detailT('taskForm.descriptionLabel')}
-                  </p>
-                  <p className="text-sm leading-relaxed">{task.description}</p>
-                </div>
-              ) : null}
-
-              {task.dueDate || task.estimateHours != null ? (
-                <div className="grid grid-cols-2 gap-3">
-                  {task.dueDate ? (
-                    <div className="flex items-start gap-2 text-sm">
-                      <Calendar className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-                      <div>
-                        <p className="text-[11px] text-muted-foreground">
-                          {detailT('taskForm.deadlineLabel')}
-                        </p>
-                        <p className="font-medium">
-                          {formatDate(
-                            task.dueDate,
-                            getSettingValue,
-                            currentLocaleCode
-                          )}
-                        </p>
-                      </div>
+            <Tabs
+              value={tab}
+              onValueChange={(v) => setTab(v as 'info' | 'comments')}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <TabsList className="mx-4 mb-1 mt-2 grid shrink-0 grid-cols-2">
+                <TabsTrigger value="info">
+                  {detailT('taskForm.tabInfo')}
+                </TabsTrigger>
+                <TabsTrigger value="comments">
+                  <MessageSquare className="mr-1.5 size-3.5" />
+                  {detailT('taskForm.tabComments')}
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent
+                value="info"
+                className="flex-1 overflow-y-auto px-4 pb-4 pt-2 data-[state=inactive]:hidden"
+              >
+                <div className="flex flex-col gap-5">
+                  {task.description ? (
+                    <div>
+                      <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.descriptionLabel')}
+                      </p>
+                      <p className="text-sm leading-relaxed">
+                        {task.description}
+                      </p>
+                    </div>
+                  ) : null}
+
+                  {task.dueDate || task.estimateHours != null ? (
+                    <div className="grid grid-cols-2 gap-3">
+                      {task.dueDate ? (
+                        <div className="flex items-start gap-2 text-sm">
+                          <Calendar className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                          <div>
+                            <p className="text-[11px] text-muted-foreground">
+                              {detailT('taskForm.deadlineLabel')}
+                            </p>
+                            <p className="font-medium">
+                              {formatDate(
+                                task.dueDate,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </p>
+                          </div>
+                        </div>
+                      ) : null}
+                      {task.estimateHours != null ? (
+                        <div className="flex items-start gap-2 text-sm">
+                          <AlarmClock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                          <div>
+                            <p className="text-[11px] text-muted-foreground">
+                              {detailT('taskForm.estimateLabel')}
+                            </p>
+                            <p className="font-medium">{task.estimateHours}h</p>
+                          </div>
+                        </div>
+                      ) : null}
                     </div>
                   ) : null}
-                  {task.estimateHours != null ? (
-                    <div className="flex items-start gap-2 text-sm">
-                      <AlarmClock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-                      <div>
-                        <p className="text-[11px] text-muted-foreground">
-                          {detailT('taskForm.estimateLabel')}
-                        </p>
-                        <p className="font-medium">{task.estimateHours}h</p>
+
+                  {task.tags ? (
+                    <div>
+                      <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        <Tag className="size-3" />
+                        {detailT('taskForm.tagsLabel')}
+                      </div>
+                      <div className="flex flex-wrap gap-1.5">
+                        {task.tags.split(',').map((tag) => (
+                          <span
+                            key={tag.trim()}
+                            className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                          >
+                            {tag.trim()}
+                          </span>
+                        ))}
                       </div>
                     </div>
                   ) : null}
-                </div>
-              ) : null}
 
-              {task.tags ? (
-                <div>
-                  <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    <Tag className="size-3" />
-                    {detailT('taskForm.tagsLabel')}
-                  </div>
-                  <div className="flex flex-wrap gap-1.5">
-                    {task.tags.split(',').map((tag) => (
-                      <span
-                        key={tag.trim()}
-                        className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
-                      >
-                        {tag.trim()}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
+                  {task.assigneeName ? (
+                    <div>
+                      <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        <User className="size-3" />
+                        {commonT('labels.collaborator')}
+                      </div>
+                      <div className="flex items-center gap-2.5">
+                        <div className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                          {avatarSrc ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img
+                              src={avatarSrc}
+                              alt={task.assigneeName}
+                              className="size-full object-cover"
+                            />
+                          ) : (
+                            getInitials(task.assigneeName)
+                          )}
+                        </div>
+                        <span className="text-sm">{task.assigneeName}</span>
+                      </div>
+                    </div>
+                  ) : null}
 
-              {task.assigneeName ? (
-                <div>
-                  <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    <User className="size-3" />
-                    {commonT('labels.collaborator')}
-                  </div>
-                  <div className="flex items-center gap-2.5">
-                    <div className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-semibold uppercase text-muted-foreground ring-1 ring-border">
-                      {avatarSrc ? (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img
-                          src={avatarSrc}
-                          alt={task.assigneeName}
-                          className="size-full object-cover"
-                        />
-                      ) : (
-                        getInitials(task.assigneeName)
-                      )}
+                  {task.projectName || task.projectCode ? (
+                    <div className="rounded-lg border bg-muted/20 px-3 py-2.5">
+                      <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                        {commonT('labels.project')}
+                      </p>
+                      <p className="mt-0.5 text-sm font-medium">
+                        {[task.projectName, task.projectCode]
+                          .filter(Boolean)
+                          .join(' • ')}
+                      </p>
                     </div>
-                    <span className="text-sm">{task.assigneeName}</span>
-                  </div>
-                </div>
-              ) : null}
-
-              {task.projectName || task.projectCode ? (
-                <div className="rounded-lg border bg-muted/20 px-3 py-2.5">
-                  <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                    {commonT('labels.project')}
-                  </p>
-                  <p className="mt-0.5 text-sm font-medium">
-                    {[task.projectName, task.projectCode]
-                      .filter(Boolean)
-                      .join(' • ')}
-                  </p>
+                  ) : null}
+
+                  {footer ? (
+                    <div className="border-t pt-5">{footer}</div>
+                  ) : null}
                 </div>
-              ) : null}
+              </TabsContent>
 
-              {footer ? <div className="border-t pt-5">{footer}</div> : null}
-            </div>
+              <TabsContent
+                value="comments"
+                className="flex-1 overflow-y-auto px-4 pb-4 pt-2 data-[state=inactive]:hidden"
+              >
+                <TaskCommentsSection taskId={task.id} />
+              </TabsContent>
+            </Tabs>
           </>
         ) : null}
       </SheetContent>