@hed-hog/operations 0.0.325 → 0.0.326

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

@@ -1,34 +1,36 @@
 'use client';
 
-import type { ReactNode } from 'react';
-import { useState } 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 { Textarea } from '@/components/ui/textarea';
-import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   AlarmClock,
   Calendar,
   MessageSquare,
   Pencil,
-  Send,
   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';
@@ -55,6 +57,7 @@ type Props = {
   onOpenChange: (open: boolean) => void;
   statusLabel?: (status: string) => string;
   footer?: ReactNode;
+  defaultTab?: 'info' | 'comments';
 };
 
 function getPriorityLabel(value?: string | null) {
@@ -127,12 +130,16 @@ function formatCommentDate(value?: string | null) {
   return date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
 }
 
-type TaskCommentsSectionProps = {
+export type TaskCommentsSectionProps = {
   taskId: number;
 };
 
-function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
-  const { request, showToastHandler } = useApp();
+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);
@@ -143,6 +150,12 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
     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[]
   >({
@@ -153,20 +166,41 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
 
   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 trimmed = newComment.trim();
-    if (!trimmed) return;
+    const stripped = newComment.replace(/<[^>]*>/g, '').trim();
+    if (!stripped) return;
     setSubmitting(true);
     try {
       const created = (await createTaskComment(
         request,
         taskId,
-        trimmed
+        newComment
       )) as OperationsTaskComment;
       setLocalComments([...(localComments ?? fetchedComments), created]);
       setNewComment('');
     } catch {
-      showToastHandler?.('error', 'Erro ao adicionar comentário.');
+      showToastHandler?.('error', ct('errors.addComment'));
     } finally {
       setSubmitting(false);
     }
@@ -183,7 +217,7 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
   };
 
   const handleSaveEdit = async (comment: OperationsTaskComment) => {
-    const trimmed = editContent.trim();
+    const trimmed = editContent.replace(/<[^>]*>/g, '').trim();
     if (!trimmed) return;
     setSavingEditId(comment.id);
     try {
@@ -191,7 +225,7 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
         request,
         taskId,
         comment.id,
-        trimmed
+        editContent
       )) as OperationsTaskComment;
       if (updated) {
         setLocalComments(
@@ -203,7 +237,7 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
       setEditingId(null);
       setEditContent('');
     } catch {
-      showToastHandler?.('error', 'Não foi possível editar este comentário.');
+      showToastHandler?.('error', ct('errors.editComment'));
     } finally {
       setSavingEditId(null);
     }
@@ -217,7 +251,7 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
         (localComments ?? fetchedComments).filter((c) => c.id !== comment.id)
       );
     } catch {
-      showToastHandler?.('error', 'Não foi possível excluir este comentário.');
+      showToastHandler?.('error', ct('errors.deleteComment'));
     } finally {
       setDeletingId(null);
     }
@@ -227,7 +261,7 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
     <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" />
-        Comentários
+        {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}
@@ -242,6 +276,10 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
             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">
@@ -260,7 +298,7 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
                 <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 ?? 'Usuário'}
+                      {comment.actorName ?? ct('defaultUser')}
                     </span>
                     <div className="flex shrink-0 items-center gap-1">
                       <span className="text-[10px] text-muted-foreground">
@@ -268,48 +306,50 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
                       </span>
                       {!isEditing ? (
                         <>
-                          <button
-                            type="button"
-                            aria-label="Editar comentário"
-                            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="Excluir comentário"
-                            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>
+                          {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">
-                      <Textarea
+                      <RichTextEditor
                         value={editContent}
-                        onChange={(e) => setEditContent(e.target.value)}
-                        rows={3}
-                        className="resize-none text-sm"
-                        disabled={isSaving}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Escape') handleCancelEdit();
-                        }}
+                        onChange={setEditContent}
+                        mentions={mentionItems}
                       />
                       <div className="flex gap-1.5">
                         <Button
                           size="sm"
                           className="h-7 px-2 text-xs"
-                          disabled={isSaving || !editContent.trim()}
+                          disabled={
+                            isSaving ||
+                            !editContent.replace(/<[^>]*>/g, '').trim()
+                          }
                           onClick={() => void handleSaveEdit(comment)}
                         >
-                          Salvar
+                          {ct('saveButton')}
                         </Button>
                         <Button
                           size="sm"
@@ -319,14 +359,12 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
                           onClick={handleCancelEdit}
                         >
                           <X className="size-3" />
-                          Cancelar
+                          {ct('cancelButton')}
                         </Button>
                       </div>
                     </div>
                   ) : (
-                    <p className="mt-0.5 text-sm leading-relaxed text-foreground">
-                      {comment.content}
-                    </p>
+                    <CommentContent content={comment.content} />
                   )}
                 </div>
               </div>
@@ -334,32 +372,23 @@ function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
           })}
         </div>
       ) : (
-        <p className="text-xs text-muted-foreground">Nenhum comentário ainda.</p>
+        <p className="text-xs text-muted-foreground">{ct('noComments')}</p>
       )}
 
       <div className="flex flex-col gap-1.5 pt-1">
-        <Textarea
-          placeholder="Escreva um comentário..."
+        <RichTextEditor
           value={newComment}
-          onChange={(e) => setNewComment(e.target.value)}
-          rows={3}
-          className="resize-none text-sm"
-          disabled={submitting}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-              void handleSubmit();
-            }
-          }}
+          onChange={setNewComment}
+          mentions={mentionItems}
         />
         <div className="flex justify-end">
           <Button
             size="sm"
             className="gap-1.5"
-            disabled={submitting || !newComment.trim()}
+            disabled={submitting || !newComment.replace(/<[^>]*>/g, '').trim()}
             onClick={() => void handleSubmit()}
           >
-            <Send className="size-3.5" />
-            Comentar
+            {ct('submitButton')}
           </Button>
         </div>
       </div>
@@ -373,19 +402,26 @@ export function TaskDetailSheet({
   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>
@@ -404,115 +440,142 @@ 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>
 
-              <div className="border-t pt-4">
+              <TabsContent
+                value="comments"
+                className="flex-1 overflow-y-auto px-4 pb-4 pt-2 data-[state=inactive]:hidden"
+              >
                 <TaskCommentsSection taskId={task.id} />
-              </div>
-
-              {footer ? <div className="border-t pt-5">{footer}</div> : null}
-            </div>
+              </TabsContent>
+            </Tabs>
           </>
         ) : null}
       </SheetContent>
     </Sheet>
   );
 }
-