@hed-hog/operations 0.0.325 → 0.0.326

package/hedhog/frontend/app/my-tasks/page.tsx.ejs

@@ -19,6 +19,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -26,6 +27,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -34,7 +41,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Progress } from '@/components/ui/progress';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import {
   closestCenter,
@@ -66,7 +73,6 @@ import {
   Pencil,
   PlayCircle,
   Plus,
-  Rows3,
   Timer,
   Trash2,
 } from 'lucide-react';
@@ -76,10 +82,13 @@ import { useCallback, useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import {
+  TaskCommentsSection,
   TaskDetailSheet,
   type TaskDetailSheetData,
 } from '../_components/task-detail-sheet';
+import { TaskFileAttachments } from '../_components/task-file-attachments';
 import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import type {
   OperationsProjectOption,
   OperationsTaskOption,
@@ -191,6 +200,26 @@ function isPastDue(dueDate?: string | null) {
   return new Date(dueDate) < new Date();
 }
 
+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 getInitials(value?: string | null) {
   const parts = String(value ?? '')
     .trim()
@@ -276,6 +305,7 @@ export default function OperationsMyTasksPage() {
   const detailT = useTranslations('operations.ProjectDetailsPage');
 
   const { request, currentLocaleCode, getSettingValue } = useApp();
+  const mentionItems = useMentionItems(request);
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
@@ -303,6 +333,7 @@ export default function OperationsMyTasksPage() {
   const [taskFormOpen, setTaskFormOpen] = useState(false);
   const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
   const [taskFormLoading, setTaskFormLoading] = useState(false);
+  const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
   const [taskFormData, setTaskFormData] =
     useState<TaskFormState>(EMPTY_TASK_FORM);
   const [inlineCreateColumn, setInlineCreateColumn] =
@@ -486,12 +517,22 @@ export default function OperationsMyTasksPage() {
 
   const handleArchiveTask = useCallback(
     async (taskId: number) => {
-      await mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        archived: true,
-      });
-      setSelectedTask(null);
-      setBoardOverride(null);
-      await refetchAll();
+      setArchivingTaskId(taskId);
+      try {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${taskId}`,
+          'PATCH',
+          { archived: true }
+        );
+        setSelectedTask(null);
+        setBoardOverride(null);
+        await refetchAll();
+      } catch {
+        // ignore
+      } finally {
+        setArchivingTaskId(null);
+      }
     },
     [request, refetchAll]
   );
@@ -746,19 +787,31 @@ export default function OperationsMyTasksPage() {
                   {(isOver) => (
                     <div
                       className={[
-                        'rounded-xl border bg-muted/20 p-3 transition-colors',
+                        'flex min-h-[32rem] flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                        getColumnClassName(column.id),
                         isOver
-                          ? 'border-primary bg-primary/5'
+                          ? '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">
+                            {boardColumns[column.id].length}{' '}
+                            {detailT('kanban.items')}
+                          </div>
                         </div>
                         <div className="flex items-center gap-1">
-                          <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
+                          <span className="rounded-full border bg-background px-2 py-0.5 text-xs font-medium text-muted-foreground">
                             {boardColumns[column.id].length}
                           </span>
                           <button
@@ -795,7 +848,7 @@ export default function OperationsMyTasksPage() {
                                     role="button"
                                     tabIndex={0}
                                     onClick={() =>
-                                      !isDragging && setSelectedTask(task)
+                                      !isDragging && openEditTaskForm(task)
                                     }
                                     onKeyDown={(event) => {
                                       if (
@@ -803,7 +856,7 @@ export default function OperationsMyTasksPage() {
                                         event.key === ' '
                                       ) {
                                         event.preventDefault();
-                                        setSelectedTask(task);
+                                        openEditTaskForm(task);
                                       }
                                     }}
                                     className={[
@@ -833,31 +886,14 @@ export default function OperationsMyTasksPage() {
                                           </p>
                                         ) : null}
                                       </div>
-                                      <div className="flex items-start gap-2">
-                                        <span
-                                          className={[
-                                            'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                                            getPriorityClassName(task.priority),
-                                          ].join(' ')}
-                                        >
-                                          {getTaskPriorityLabel(task.priority)}
-                                        </span>
-                                        <Button
-                                          type="button"
-                                          variant="ghost"
-                                          size="icon"
-                                          className="size-7 shrink-0 rounded-full opacity-0 transition group-hover:opacity-100"
-                                          onPointerDown={(event) =>
-                                            event.stopPropagation()
-                                          }
-                                          onClick={(event) => {
-                                            event.stopPropagation();
-                                            openEditTaskForm(task);
-                                          }}
-                                        >
-                                          <Pencil className="size-3.5" />
-                                        </Button>
-                                      </div>
+                                      <span
+                                        className={[
+                                          'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                          getPriorityClassName(task.priority),
+                                        ].join(' ')}
+                                      >
+                                        {getTaskPriorityLabel(task.priority)}
+                                      </span>
                                     </div>
 
                                     {taskTags.length > 0 ? (
@@ -1199,6 +1235,7 @@ export default function OperationsMyTasksPage() {
       <TaskDetailSheet
         task={selectedTask}
         open={selectedTask !== null}
+        defaultTab="comments"
         onOpenChange={(open) => {
           if (!open) setSelectedTask(null);
         }}
@@ -1291,7 +1328,7 @@ export default function OperationsMyTasksPage() {
         </DialogContent>
       </Dialog>
 
-      <Dialog
+      <Sheet
         open={taskFormOpen}
         onOpenChange={(open) => {
           if (!taskFormLoading) {
@@ -1303,209 +1340,283 @@ export default function OperationsMyTasksPage() {
           }
         }}
       >
-        <DialogContent className="sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
+        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
               {editingTaskId
                 ? detailT('taskForm.titleEdit')
                 : detailT('taskForm.titleNew')}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="task-project">{commonT('labels.project')}</Label>
-              <Select
-                value={taskFormData.projectId}
-                onValueChange={(value) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    projectId: value,
-                  }))
-                }
-              >
-                <SelectTrigger className="w-full" id="task-project">
-                  <SelectValue
-                    placeholder={t('dialogs.createProjectPlaceholder')}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  {projectOptions.map((project) => (
-                    <SelectItem key={project.id} value={String(project.id)}>
-                      {project.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="task-name">
-                {detailT('taskForm.nameLabel')} *
-              </Label>
-              <Input
-                id="task-name"
-                value={taskFormData.name}
-                onChange={(event) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    name: event.target.value,
-                  }))
-                }
-                placeholder={detailT('taskForm.namePlaceholder')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="task-description">
-                {detailT('taskForm.descriptionLabel')}
-              </Label>
-              <RichTextEditor
-                value={taskFormData.description}
-                onChange={(val) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    description: val,
-                  }))
-                }
-              />
-            </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">
+                {detailT('taskForm.tabInfo')}
+              </TabsTrigger>
+              {editingTaskId ? (
+                <TabsTrigger value="comments">
+                  {detailT('taskForm.tabComments')}
+                </TabsTrigger>
+              ) : null}
+            </TabsList>
 
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-2">
-                <Label>{detailT('taskForm.priorityLabel')}</Label>
-                <Select
-                  value={taskFormData.priority}
-                  onValueChange={(value) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      priority: value 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>
+            <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-2">
+                  <Label htmlFor="task-project">
+                    {commonT('labels.project')}
+                  </Label>
+                  <Select
+                    value={taskFormData.projectId}
+                    onValueChange={(value) =>
+                      setTaskFormData((prev) => ({
+                        ...prev,
+                        projectId: value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full" id="task-project">
+                      <SelectValue
+                        placeholder={t('dialogs.createProjectPlaceholder')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {projectOptions.map((project) => (
+                        <SelectItem key={project.id} value={String(project.id)}>
+                          {project.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="task-name">
+                    {detailT('taskForm.nameLabel')} *
+                  </Label>
+                  <Input
+                    id="task-name"
+                    value={taskFormData.name}
+                    onChange={(event) =>
+                      setTaskFormData((prev) => ({
+                        ...prev,
+                        name: event.target.value,
+                      }))
+                    }
+                    placeholder={detailT('taskForm.namePlaceholder')}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="task-description">
+                    {detailT('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-2">
+                    <Label>{detailT('taskForm.priorityLabel')}</Label>
+                    <Select
+                      value={taskFormData.priority}
+                      onValueChange={(value) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          priority: value 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-2">
-                <Label>{detailT('taskForm.columnLabel')}</Label>
-                <Select
-                  value={taskFormData.status}
-                  onValueChange={(value) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      status: value as BoardColumnId,
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {KANBAN_COLUMNS.map((column) => (
-                      <SelectItem key={column.id} value={column.id}>
-                        {column.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
+                  <div className="space-y-2">
+                    <Label>{detailT('taskForm.columnLabel')}</Label>
+                    <Select
+                      value={taskFormData.status}
+                      onValueChange={(value) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          status: value as BoardColumnId,
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {KANBAN_COLUMNS.map((column) => (
+                          <SelectItem key={column.id} value={column.id}>
+                            {column.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="task-due-date">
+                      {detailT('taskForm.deadlineLabel')}
+                    </Label>
+                    <Input
+                      id="task-due-date"
+                      type="date"
+                      value={taskFormData.dueDate}
+                      onChange={(event) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          dueDate: event.target.value,
+                        }))
+                      }
+                    />
+                  </div>
 
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-2">
-                <Label htmlFor="task-due-date">
-                  {detailT('taskForm.deadlineLabel')}
-                </Label>
-                <Input
-                  id="task-due-date"
-                  type="date"
-                  value={taskFormData.dueDate}
-                  onChange={(event) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      dueDate: event.target.value,
-                    }))
-                  }
-                />
+                  <div className="space-y-2">
+                    <Label htmlFor="task-estimate">
+                      {detailT('taskForm.estimateLabel')}
+                    </Label>
+                    <Input
+                      id="task-estimate"
+                      type="number"
+                      min="0"
+                      step="0.5"
+                      placeholder="0"
+                      value={taskFormData.estimateHours}
+                      onChange={(event) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          estimateHours: event.target.value,
+                        }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="task-tags">
+                    {detailT('taskForm.tagsLabel')}
+                  </Label>
+                  <Input
+                    id="task-tags"
+                    value={taskFormData.tags}
+                    onChange={(event) =>
+                      setTaskFormData((prev) => ({
+                        ...prev,
+                        tags: event.target.value,
+                      }))
+                    }
+                    placeholder={detailT('taskForm.tagsPlaceholder')}
+                  />
+                </div>
+
+                {editingTaskId ? (
+                  <div className="space-y-1.5">
+                    <Label className="flex items-center gap-1.5">
+                      <Paperclip className="size-3.5" />
+                      {detailT('taskForm.attachmentsLabel')}
+                    </Label>
+                    <TaskFileAttachments taskId={editingTaskId} />
+                  </div>
+                ) : null}
               </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="task-estimate">
-                  {detailT('taskForm.estimateLabel')}
-                </Label>
-                <Input
-                  id="task-estimate"
-                  type="number"
-                  min="0"
-                  step="0.5"
-                  placeholder="0"
-                  value={taskFormData.estimateHours}
-                  onChange={(event) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      estimateHours: event.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="ghost"
+                    onClick={() => {
+                      setTaskFormOpen(false);
+                      setEditingTaskId(null);
+                      setTaskFormData(EMPTY_TASK_FORM);
+                    }}
+                    disabled={taskFormLoading}
+                  >
+                    {commonT('actions.cancel')}
+                  </Button>
+                  <Button
+                    onClick={() => void handleTaskFormSubmit()}
+                    disabled={
+                      taskFormLoading ||
+                      !taskFormData.projectId ||
+                      !taskFormData.name.trim()
+                    }
+                  >
+                    {taskFormLoading ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : null}
+                    {editingTaskId
+                      ? commonT('actions.save')
+                      : t('actions.create')}
+                  </Button>
+                </div>
               </div>
-            </div>
+            </TabsContent>
 
-            <div className="space-y-2">
-              <Label htmlFor="task-tags">{detailT('taskForm.tagsLabel')}</Label>
-              <Input
-                id="task-tags"
-                value={taskFormData.tags}
-                onChange={(event) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    tags: event.target.value,
-                  }))
-                }
-                placeholder={detailT('taskForm.tagsPlaceholder')}
-              />
-            </div>
-          </div>
-          <DialogFooter className="gap-2 sm:justify-between">
-            <Button
-              variant="ghost"
-              onClick={() => {
-                setTaskFormOpen(false);
-                setEditingTaskId(null);
-                setTaskFormData(EMPTY_TASK_FORM);
-              }}
-              disabled={taskFormLoading}
-            >
-              {commonT('actions.cancel')}
-            </Button>
-            <Button
-              onClick={() => void handleTaskFormSubmit()}
-              disabled={
-                taskFormLoading ||
-                !taskFormData.projectId ||
-                !taskFormData.name.trim()
-              }
-            >
-              {taskFormLoading ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : null}
-              {editingTaskId ? commonT('actions.save') : t('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>
     </Page>
   );
 }