@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/app/_components/my-project-summary-screen.tsx.ejs

@@ -1,6 +1,7 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -12,6 +13,7 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -19,6 +21,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -27,7 +35,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   closestCenter,
   DndContext,
@@ -41,19 +49,24 @@ import {
 } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
   AlarmClock,
   Archive,
   ArchiveRestore,
   FolderKanban,
+  Loader2,
+  MessageSquare,
+  Paperclip,
   Pencil,
   Plus,
-  Rows3,
+  Timer,
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useCallback, useMemo, useState } from 'react';
 import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import type {
   OperationsMyProjectSummary,
   OperationsTaskOption,
@@ -67,7 +80,12 @@ import {
 import { OperationsHeader } from './operations-header';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
-import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
+import {
+  TaskCommentsSection,
+  TaskDetailSheet,
+  type TaskDetailSheetData,
+} from './task-detail-sheet';
+import { TaskFileAttachments } from './task-file-attachments';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -84,6 +102,8 @@ type BoardTask = {
   assigneeName: string | null;
   assigneeUserPhotoId: number | null;
   assigneePersonAvatarId: number | null;
+  commentCount: number;
+  fileCount: number;
 };
 
 type TaskFormState = {
@@ -149,6 +169,11 @@ function apiTaskToBoardTask(
   const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
     ? (row.status as BoardColumnId)
     : 'todo';
+  const taskCounts = row as typeof row & {
+    commentCount?: number | null;
+    fileCount?: number | null;
+  };
+
   return {
     id: row.id,
     name: row.name,
@@ -162,6 +187,10 @@ function apiTaskToBoardTask(
     assigneeName: row.assigneeName ?? null,
     assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
     assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
+    commentCount:
+      ((row as unknown as Record<string, unknown>).commentCount as number) ?? 0,
+    fileCount:
+      ((row as unknown as Record<string, unknown>).fileCount as number) ?? 0,
   };
 }
 
@@ -225,6 +254,64 @@ function getTaskPriorityLabel(value?: string | null) {
   return labels[value ?? ''] ?? String(value ?? '');
 }
 
+function getPriorityClassName(priority?: string | null) {
+  if (priority === 'high') return 'border-rose-300 bg-rose-100 text-rose-700';
+  if (priority === 'medium')
+    return 'border-amber-300 bg-amber-100 text-amber-700';
+  return 'border-emerald-300 bg-emerald-100 text-emerald-700';
+}
+
+function getTaskProgress(status?: string | null) {
+  const map: Record<string, number> = {
+    todo: 0,
+    doing: 33,
+    review: 66,
+    done: 100,
+  };
+  return map[status ?? ''] ?? 0;
+}
+
+function isPastDue(dueDate?: string | null) {
+  if (!dueDate) return false;
+  return new Date(dueDate) < new Date();
+}
+
+function getTaskTags(task: BoardTask) {
+  if (!task.tags) return [];
+  return task.tags
+    .split(',')
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+}
+
+function getTaskCommentCount(task: BoardTask) {
+  return task.commentCount ?? 0;
+}
+
+function getTaskAttachmentCount(task: BoardTask) {
+  return task.fileCount ?? 0;
+}
+
+function getColumnClassName(columnId: BoardColumnId) {
+  const styles: Record<BoardColumnId, string> = {
+    todo: 'from-slate-500/20 via-slate-500/5 to-transparent',
+    doing: 'from-sky-500/20 via-cyan-500/5 to-transparent',
+    review: 'from-amber-500/20 via-yellow-500/5 to-transparent',
+    done: 'from-emerald-500/20 via-green-500/5 to-transparent',
+  };
+  return styles[columnId];
+}
+
+function getColumnDotClassName(columnId: BoardColumnId) {
+  const styles: Record<BoardColumnId, string> = {
+    todo: 'bg-slate-500',
+    doing: 'bg-sky-500',
+    review: 'bg-amber-500',
+    done: 'bg-emerald-500',
+  };
+  return styles[columnId];
+}
+
 function DraggableTaskCard({
   task,
   children,
@@ -266,6 +353,8 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
   const formT = useTranslations('operations.ProjectFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
 
+  const mentionItems = useMentionItems(request);
+
   const getProjectStatusLabel = (value?: string | null) => {
     if (!value) return commonT('labels.notAvailable');
     try {
@@ -471,14 +560,26 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
     taskFormData,
   ]);
 
+  const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
+
   const handleArchiveTask = useCallback(
     async (taskId: number) => {
-      await mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        archived: true,
-      });
-      setBoardState(null);
-      setSelectedTask(null);
-      await refetchAll();
+      setArchivingTaskId(taskId);
+      try {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${taskId}`,
+          'PATCH',
+          { archived: true }
+        );
+        setBoardState(null);
+        setSelectedTask(null);
+        await refetchAll();
+      } catch {
+        // ignore
+      } finally {
+        setArchivingTaskId(null);
+      }
     },
     [request, refetchAll]
   );
@@ -615,134 +716,208 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                 {(isOver) => (
                   <div
                     className={[
-                      'rounded-xl border bg-muted/20 p-3 transition-colors',
-                      isOver ? 'border-primary bg-primary/5' : 'border-border',
+                      'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                      getColumnClassName(column.id),
+                      isOver
+                        ? 'border-primary shadow-lg ring-2 ring-primary/15'
+                        : 'border-border',
                     ].join(' ')}
                   >
-                    <div className="mb-3 flex items-center justify-between">
-                      <div className="flex items-center gap-2 text-sm font-semibold">
-                        <Rows3 className="size-4 text-muted-foreground" />
-                        {column.label}
+                    <div className="mb-3 flex items-center justify-between gap-3 rounded-2xl border bg-background/85 p-3 shadow-xs">
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2 text-sm font-semibold">
+                          <span
+                            className={[
+                              'size-2.5 rounded-full',
+                              getColumnDotClassName(column.id),
+                            ].join(' ')}
+                          />
+                          {column.label}
+                        </div>
+                        <div className="mt-1 text-xs text-muted-foreground">
+                          {taskColumns[column.id].length} {t('kanban.items')}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <span className="rounded-full border bg-background px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                          {taskColumns[column.id].length}
+                        </span>
+                        <button
+                          type="button"
+                          className="flex size-5 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
+                          onClick={() => openCreateTaskForm(column.id)}
+                        >
+                          <Plus className="size-3.5" />
+                        </button>
                       </div>
-                      <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
-                        {taskColumns[column.id].length}
-                      </span>
                     </div>
 
-                    <div className="space-y-2">
-                      {taskColumns[column.id].map((task) => (
-                        <DraggableTaskCard key={task.id} task={task}>
-                          {(isDragging) => (
-                            <div
-                              onClick={() =>
-                                !isDragging && setSelectedTask(task)
-                              }
-                              className={[
-                                'w-full cursor-grab rounded-lg border bg-card p-3 text-left shadow-xs transition',
-                                isDragging
-                                  ? 'border-primary/50 opacity-75'
-                                  : 'hover:border-primary/40 hover:shadow-sm',
-                              ].join(' ')}
-                            >
-                              <div className="mb-2 flex items-start justify-between gap-2">
-                                <p className="text-sm font-medium leading-snug">
-                                  {task.name}
-                                </p>
-                                <div className="flex items-start gap-2">
-                                  <span
-                                    className={[
-                                      'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                                      task.priority === 'high'
-                                        ? 'bg-rose-100 text-rose-700'
-                                        : task.priority === 'medium'
-                                          ? 'bg-amber-100 text-amber-700'
-                                          : 'bg-emerald-100 text-emerald-700',
-                                    ].join(' ')}
-                                  >
-                                    {getTaskPriorityLabel(task.priority)}
-                                  </span>
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    className="size-7 shrink-0 rounded-full"
-                                    onPointerDown={(event) =>
-                                      event.stopPropagation()
-                                    }
-                                    onClick={(event) => {
-                                      event.stopPropagation();
+                    <div className="flex flex-1 flex-col gap-2">
+                      <AnimatePresence initial={false}>
+                        {taskColumns[column.id].map((task) => {
+                          const tags = getTaskTags(task);
+                          const comments = getTaskCommentCount(task);
+                          const attachments = getTaskAttachmentCount(task);
+                          return (
+                            <DraggableTaskCard key={task.id} task={task}>
+                              {(isDragging) => (
+                                <motion.div
+                                  initial={{ opacity: 0, scale: 0.96 }}
+                                  animate={{ opacity: 1, scale: 1 }}
+                                  exit={{ opacity: 0, scale: 0.95, y: -4 }}
+                                  transition={{ duration: 0.18 }}
+                                  role="button"
+                                  tabIndex={0}
+                                  onClick={() =>
+                                    !isDragging && openEditTaskForm(task)
+                                  }
+                                  onKeyDown={(event) => {
+                                    if (
+                                      event.key === 'Enter' ||
+                                      event.key === ' '
+                                    ) {
+                                      event.preventDefault();
                                       openEditTaskForm(task);
-                                    }}
-                                  >
-                                    <Pencil className="size-3.5" />
-                                  </Button>
-                                </div>
-                              </div>
-
-                              {task.tags ? (
-                                <div className="mb-2 flex flex-wrap gap-1">
-                                  {task.tags.split(',').map((tag) => (
+                                    }
+                                  }}
+                                  className={[
+                                    'group w-full cursor-pointer rounded-2xl border bg-card p-3 text-left shadow-xs transition',
+                                    isDragging
+                                      ? 'opacity-0'
+                                      : 'hover:border-primary/40 hover:shadow-lg',
+                                  ].join(' ')}
+                                >
+                                  <div className="mb-3 flex items-start justify-between gap-2">
+                                    <div className="min-w-0 space-y-1">
+                                      <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                                        {task.name}
+                                      </p>
+                                      {task.description ? (
+                                        <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                                          {task.description.replace(
+                                            /<[^>]*>/g,
+                                            ''
+                                          )}
+                                        </p>
+                                      ) : null}
+                                    </div>
                                     <span
-                                      key={`${task.id}-${tag.trim()}`}
-                                      className="rounded-md bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                                      className={[
+                                        'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                        getPriorityClassName(task.priority),
+                                      ].join(' ')}
                                     >
-                                      {tag.trim()}
+                                      {getTaskPriorityLabel(task.priority)}
                                     </span>
-                                  ))}
-                                </div>
-                              ) : null}
-
-                              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                                <span className="inline-flex items-center gap-1">
-                                  <AlarmClock className="size-3.5" />
-                                  {formatDate(
-                                    task.dueDate,
-                                    getSettingValue,
-                                    currentLocaleCode
-                                  )}
-                                </span>
-                                <span>
-                                  {task.estimateHours != null
-                                    ? `${task.estimateHours}h`
-                                    : ''}
-                                </span>
-                              </div>
-
-                              {task.assigneeName ? (
-                                <div className="mt-2 flex items-center gap-1.5">
-                                  <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[9px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
-                                    {(() => {
-                                      const photoUrl = getUserPhotoUrl(
-                                        task.assigneeUserPhotoId
-                                      );
-                                      const avatarUrl =
-                                        task.assigneePersonAvatarId
-                                          ? getPersonAvatarUrl(
-                                              task.assigneePersonAvatarId
-                                            )
-                                          : null;
-                                      const imgSrc = photoUrl ?? avatarUrl;
-                                      return imgSrc ? (
-                                        // eslint-disable-next-line @next/next/no-img-element
-                                        <img
-                                          src={imgSrc}
-                                          alt={task.assigneeName}
-                                          className="size-full object-cover"
-                                        />
-                                      ) : (
-                                        getInitials(task.assigneeName)
-                                      );
-                                    })()}
                                   </div>
-                                  <span className="truncate text-[11px] text-muted-foreground">
-                                    {task.assigneeName}
-                                  </span>
-                                </div>
-                              ) : null}
-                            </div>
-                          )}
-                        </DraggableTaskCard>
-                      ))}
+
+                                  {tags.length > 0 ? (
+                                    <div className="mb-3 flex flex-wrap gap-1">
+                                      {tags.slice(0, 4).map((tag) => (
+                                        <span
+                                          key={`${task.id}-${tag}`}
+                                          className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
+                                        >
+                                          {tag}
+                                        </span>
+                                      ))}
+                                      {tags.length > 4 ? (
+                                        <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                          +{tags.length - 4}
+                                        </span>
+                                      ) : null}
+                                    </div>
+                                  ) : null}
+
+                                  <div className="grid grid-cols-2 gap-2 text-xs">
+                                    <div
+                                      className={[
+                                        'rounded-xl border bg-muted/20 px-2 py-1.5',
+                                        isPastDue(task.dueDate) &&
+                                        task.status !== 'done'
+                                          ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300'
+                                          : 'text-muted-foreground',
+                                      ].join(' ')}
+                                    >
+                                      <span className="flex items-center gap-1">
+                                        <AlarmClock className="size-3.5" />
+                                        {formatDate(
+                                          task.dueDate,
+                                          getSettingValue,
+                                          currentLocaleCode
+                                        )}
+                                      </span>
+                                    </div>
+                                    <div className="rounded-xl border bg-muted/20 px-2 py-1.5 text-muted-foreground">
+                                      <span className="flex items-center gap-1">
+                                        <Timer className="size-3.5" />
+                                        {task.estimateHours != null
+                                          ? `${task.estimateHours}h`
+                                          : '—'}
+                                      </span>
+                                    </div>
+                                  </div>
+
+                                  <div className="mt-3 space-y-1.5">
+                                    <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                                      <span>Progresso</span>
+                                      <span>
+                                        {getTaskProgress(task.status)}%
+                                      </span>
+                                    </div>
+                                    <Progress
+                                      value={getTaskProgress(task.status)}
+                                      className="h-1.5"
+                                    />
+                                  </div>
+
+                                  <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
+                                    <div className="flex min-w-0 items-center gap-2">
+                                      <div className="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">
+                                        {(() => {
+                                          const photoUrl = getUserPhotoUrl(
+                                            task.assigneeUserPhotoId
+                                          );
+                                          const avatarUrl =
+                                            task.assigneePersonAvatarId
+                                              ? getPersonAvatarUrl(
+                                                  task.assigneePersonAvatarId
+                                                )
+                                              : null;
+                                          const imgSrc = photoUrl ?? avatarUrl;
+                                          return imgSrc ? (
+                                            // eslint-disable-next-line @next/next/no-img-element
+                                            <img
+                                              src={imgSrc}
+                                              alt={task.assigneeName ?? ''}
+                                              className="size-full object-cover"
+                                            />
+                                          ) : (
+                                            getInitials(task.assigneeName)
+                                          );
+                                        })()}
+                                      </div>
+                                      <span className="truncate text-[11px] text-muted-foreground">
+                                        {task.assigneeName ?? '—'}
+                                      </span>
+                                    </div>
+                                    <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
+                                      <span className="inline-flex items-center gap-1">
+                                        <MessageSquare className="size-3.5" />
+                                        {comments}
+                                      </span>
+                                      <span className="inline-flex items-center gap-1">
+                                        <Paperclip className="size-3.5" />
+                                        {attachments}
+                                      </span>
+                                    </div>
+                                  </div>
+                                </motion.div>
+                              )}
+                            </DraggableTaskCard>
+                          );
+                        })}
+                      </AnimatePresence>
                     </div>
                   </div>
                 )}
@@ -901,6 +1076,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
       <TaskDetailSheet
         task={selectedTask}
         open={selectedTask !== null}
+        defaultTab="comments"
         onOpenChange={(open) => {
           if (!open) setSelectedTask(null);
         }}
@@ -964,7 +1140,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         }
       />
 
-      <Dialog
+      <Sheet
         open={taskFormOpen}
         onOpenChange={(open) => {
           if (!open) {
@@ -974,181 +1150,242 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
           }
         }}
       >
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>
+        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
               {editingTaskId ? t('taskForm.titleEdit') : t('taskForm.titleNew')}
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <div className="space-y-1.5">
-              <Label htmlFor="task-name">{t('taskForm.nameLabel')} *</Label>
-              <Input
-                id="task-name"
-                placeholder={t('taskForm.namePlaceholder')}
-                value={taskFormData.name}
-                onChange={(e) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    name: e.target.value,
-                  }))
-                }
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="task-description">
-                {t('taskForm.descriptionLabel')}
-              </Label>
-              <Textarea
-                id="task-description"
-                placeholder={t('taskForm.descriptionPlaceholder')}
-                rows={3}
-                value={taskFormData.description}
-                onChange={(e) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    description: e.target.value,
-                  }))
-                }
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1.5">
-                <Label>{t('taskForm.priorityLabel')}</Label>
-                <Select
-                  value={taskFormData.priority}
-                  onValueChange={(v) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      priority: v as TaskFormState['priority'],
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="low">
-                      {getTaskPriorityLabel('low')}
-                    </SelectItem>
-                    <SelectItem value="medium">
-                      {getTaskPriorityLabel('medium')}
-                    </SelectItem>
-                    <SelectItem value="high">
-                      {getTaskPriorityLabel('high')}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+            </SheetTitle>
+          </SheetHeader>
+
+          <Tabs defaultValue="info" className="flex min-h-0 flex-1 flex-col">
+            <TabsList className="mx-4 grid w-[calc(100%-2rem)] shrink-0 grid-cols-2">
+              <TabsTrigger value="info">{t('taskForm.tabInfo')}</TabsTrigger>
+              {editingTaskId ? (
+                <TabsTrigger value="comments">
+                  {t('taskForm.tabComments')}
+                </TabsTrigger>
+              ) : null}
+            </TabsList>
+
+            <TabsContent
+              value="info"
+              className="flex min-h-0 flex-1 flex-col data-[state=inactive]:hidden"
+            >
+              <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
+                <div className="space-y-1.5">
+                  <Label htmlFor="task-name">{t('taskForm.nameLabel')} *</Label>
+                  <Input
+                    id="task-name"
+                    placeholder={t('taskForm.namePlaceholder')}
+                    value={taskFormData.name}
+                    onChange={(e) =>
+                      setTaskFormData((prev) => ({
+                        ...prev,
+                        name: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="task-description">
+                    {t('taskForm.descriptionLabel')}
+                  </Label>
+                  <RichTextEditor
+                    value={taskFormData.description}
+                    onChange={(val) =>
+                      setTaskFormData((prev) => ({
+                        ...prev,
+                        description: val,
+                      }))
+                    }
+                    mentions={mentionItems}
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="space-y-1.5">
+                    <Label>{t('taskForm.priorityLabel')}</Label>
+                    <Select
+                      value={taskFormData.priority}
+                      onValueChange={(v) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          priority: v as TaskFormState['priority'],
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="low">
+                          {getTaskPriorityLabel('low')}
+                        </SelectItem>
+                        <SelectItem value="medium">
+                          {getTaskPriorityLabel('medium')}
+                        </SelectItem>
+                        <SelectItem value="high">
+                          {getTaskPriorityLabel('high')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
 
-              <div className="space-y-1.5">
-                <Label>{t('taskForm.columnLabel')}</Label>
-                <Select
-                  value={taskFormData.status}
-                  onValueChange={(v) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      status: v as BoardColumnId,
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {KANBAN_COLUMNS.map((col) => (
-                      <SelectItem key={col.id} value={col.id}>
-                        {col.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
+                  <div className="space-y-1.5">
+                    <Label>{t('taskForm.columnLabel')}</Label>
+                    <Select
+                      value={taskFormData.status}
+                      onValueChange={(v) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          status: v as BoardColumnId,
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {KANBAN_COLUMNS.map((col) => (
+                          <SelectItem key={col.id} value={col.id}>
+                            {col.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-due-date">
+                      {t('taskForm.deadlineLabel')}
+                    </Label>
+                    <Input
+                      id="task-due-date"
+                      type="date"
+                      value={taskFormData.dueDate}
+                      onChange={(e) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          dueDate: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
 
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1.5">
-                <Label htmlFor="task-due-date">
-                  {t('taskForm.deadlineLabel')}
-                </Label>
-                <Input
-                  id="task-due-date"
-                  type="date"
-                  value={taskFormData.dueDate}
-                  onChange={(e) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      dueDate: e.target.value,
-                    }))
-                  }
-                />
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-estimate">
+                      {t('taskForm.estimateLabel')}
+                    </Label>
+                    <Input
+                      id="task-estimate"
+                      type="number"
+                      min="0"
+                      step="0.5"
+                      placeholder="0"
+                      value={taskFormData.estimateHours}
+                      onChange={(e) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          estimateHours: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
+                  <Input
+                    id="task-tags"
+                    placeholder={t('taskForm.tagsPlaceholder')}
+                    value={taskFormData.tags}
+                    onChange={(e) =>
+                      setTaskFormData((prev) => ({
+                        ...prev,
+                        tags: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+
+                {editingTaskId ? (
+                  <div className="space-y-1.5">
+                    <Label className="flex items-center gap-1.5">
+                      <Paperclip className="size-3.5" />
+                      {t('taskForm.attachmentsLabel')}
+                    </Label>
+                    <TaskFileAttachments taskId={editingTaskId} />
+                  </div>
+                ) : null}
               </div>
 
-              <div className="space-y-1.5">
-                <Label htmlFor="task-estimate">
-                  {t('taskForm.estimateLabel')}
-                </Label>
-                <Input
-                  id="task-estimate"
-                  type="number"
-                  min="0"
-                  step="0.5"
-                  placeholder="0"
-                  value={taskFormData.estimateHours}
-                  onChange={(e) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      estimateHours: e.target.value,
-                    }))
-                  }
-                />
+              <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t px-4 pb-4 pt-4">
+                <div className="flex gap-2">
+                  {editingTaskId ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={
+                        taskFormLoading || archivingTaskId === editingTaskId
+                      }
+                      onClick={() => {
+                        if (!editingTaskId) return;
+                        const id = editingTaskId;
+                        setTaskFormOpen(false);
+                        setEditingTaskId(null);
+                        setTaskFormData(EMPTY_TASK_FORM);
+                        void handleArchiveTask(id);
+                      }}
+                    >
+                      {archivingTaskId === editingTaskId ? (
+                        <Loader2 className="mr-2 size-4 animate-spin" />
+                      ) : (
+                        <Archive className="mr-2 size-4" />
+                      )}
+                      {commonT('actions.archive')}
+                    </Button>
+                  ) : null}
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setTaskFormOpen(false);
+                      setEditingTaskId(null);
+                      setTaskFormData(EMPTY_TASK_FORM);
+                    }}
+                    disabled={taskFormLoading}
+                  >
+                    {commonT('actions.cancel')}
+                  </Button>
+                  <Button
+                    onClick={() => void handleTaskFormSubmit()}
+                    disabled={taskFormLoading || !taskFormData.name.trim()}
+                  >
+                    {taskFormLoading
+                      ? t('taskForm.saving')
+                      : editingTaskId
+                        ? commonT('actions.save')
+                        : commonT('actions.create')}
+                  </Button>
+                </div>
               </div>
-            </div>
+            </TabsContent>
 
-            <div className="space-y-1.5">
-              <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
-              <Input
-                id="task-tags"
-                placeholder={t('taskForm.tagsPlaceholder')}
-                value={taskFormData.tags}
-                onChange={(e) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    tags: e.target.value,
-                  }))
-                }
-              />
-            </div>
-          </div>
-
-          <DialogFooter className="mt-4">
-            <Button
-              variant="outline"
-              onClick={() => {
-                setTaskFormOpen(false);
-                setEditingTaskId(null);
-                setTaskFormData(EMPTY_TASK_FORM);
-              }}
-              disabled={taskFormLoading}
-            >
-              {commonT('actions.cancel')}
-            </Button>
-            <Button
-              onClick={() => void handleTaskFormSubmit()}
-              disabled={taskFormLoading || !taskFormData.name.trim()}
-            >
-              {taskFormLoading
-                ? t('taskForm.saving')
-                : editingTaskId
-                  ? commonT('actions.save')
-                  : commonT('actions.create')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            {editingTaskId ? (
+              <TabsContent
+                value="comments"
+                className="min-h-0 flex-1 overflow-y-auto px-4 py-2 data-[state=inactive]:hidden"
+              >
+                <TaskCommentsSection taskId={editingTaskId} />
+              </TabsContent>
+            ) : null}
+          </Tabs>
+        </SheetContent>
+      </Sheet>
 
       <Dialog
         open={deletePromptTask !== null}