task detail attachment form

src/langs/fa.json

@@ -1003,7 +1003,10 @@
       "choose_custom_color": "انتخاب رنگ دلخواه",
       "members": "اعضا",
       "copy_from": "کپی از",
-      "none": "هیچ کدام"
+      "none": "هیچ کدام",
+      "link": "لینک",
+      "or": "یا",
+      "insert": "درج"
     }
   }
 }

src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx

@@ -23,9 +23,10 @@ type Props = {
   labelsPopover?: ReactNode;
   usersPopover?: ReactNode;
   checklistPopover?: ReactNode;
+  attachmentPopover?: ReactNode;
 };
 
-const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover, checklistPopover }) => {
+const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover, checklistPopover, attachmentPopover }) => {
   const { t } = useTranslation("global");
 
   return (
@@ -44,11 +45,17 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
           </button>
         );
 
-        if (id === "labels" || id === "users" || id === "checklist") {
+        if (id === "labels" || id === "users" || id === "checklist" || id === "attachment") {
           return (
             <div key={id} className="relative">
               {button}
-              {id === "labels" ? labelsPopover : id === "users" ? usersPopover : checklistPopover}
+              {id === "labels"
+                ? labelsPopover
+                : id === "users"
+                  ? usersPopover
+                  : id === "checklist"
+                    ? checklistPopover
+                    : attachmentPopover}
             </div>
           );
         }

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -1,4 +1,5 @@
 import { type FC, useState } from "react";
+import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
 import { DEFAULT_CHECKLISTS } from "./checklist/constants";
 import TaskDetailChecklistPopover from "./checklist/TaskDetailChecklistPopover";
 import type { TaskChecklist } from "./checklist/types";
@@ -28,6 +29,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const isLabelsOpen = activeTab === "labels";
   const isUsersOpen = activeTab === "users";
   const isChecklistOpen = activeTab === "checklist";
+  const isAttachmentOpen = activeTab === "attachment";
 
   const handleTabChange = (tab: TaskDetailTab) => {
     if (tab === "labels" && activeTab !== "labels") {
@@ -84,6 +86,14 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
     handleChecklistClose();
   };
 
+  const handleAttachmentClose = () => {
+    if (isAttachmentOpen) onTabChange("attachment");
+  };
+
+  const handleAttachmentCreate = (_data: { file?: File; title: string; linkId: string }) => {
+    handleAttachmentClose();
+  };
+
   return (
     <div className="relative">
       <TaskDetailActionBar
@@ -115,6 +125,11 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
             />
           ) : null
         }
+        attachmentPopover={
+          isAttachmentOpen ? (
+            <TaskDetailAttachmentPopover onClose={handleAttachmentClose} onSubmit={handleAttachmentCreate} />
+          ) : null
+        }
       />
 
       <TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />

src/pages/taskmanager/components/task-detail/attachment/TaskDetailAttachmentForm.tsx

@@ -0,0 +1,78 @@
+import { type FC, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Button from "../../../../../components/Button";
+import Input from "../../../../../components/Input";
+import Select from "../../../../../components/Select";
+
+type Props = {
+  onClose: () => void;
+  onSubmit: (data: { file?: File; title: string; linkId: string }) => void;
+};
+
+const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit }) => {
+  const { t } = useTranslation("global");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [title, setTitle] = useState("");
+  const [linkId, setLinkId] = useState("");
+
+  const linkItems = [{ value: "", label: t("taskmanager.task_detail.none") }];
+
+  const canSubmit = Boolean(file) || Boolean(title.trim());
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files?.[0];
+    if (selected) setFile(selected);
+  };
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit({
+      file: file ?? undefined,
+      title: title.trim(),
+      linkId,
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-xs font-bold text-center">{t("taskmanager.task_detail.attachment")}</h3>
+
+      <div className="w-full h-8 border border-white rounded-xl items-center px-2 flex gap-2 bg-white/63">
+        <button type="button" onClick={() => fileInputRef.current?.click()} className="shrink-0 h-6 rounded-lg text-[11px] px-3 bg-secondary">
+          {t("select_file")}
+        </button>
+        <span className="text-[11px] text-description truncate">{file ? file.name : t("no_select_file")}</span>
+        <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} />
+      </div>
+
+      <div className="flex items-center gap-2 mt-1.5">
+        <div className="flex-1 border-t border-dashed border-[#D0D0D0]" />
+        <span className="text-[11px] text-description">{t("taskmanager.task_detail.or")}</span>
+        <div className="flex-1 border-t border-dashed border-[#D0D0D0]" />
+      </div>
+
+      <Input label={t("taskmanager.task_detail.label_title")} value={title} onChange={(e) => setTitle(e.target.value)} className="h-8 bg-white/63 border-white" labelClassName="text-xs" />
+
+      <Select
+        label={t("taskmanager.task_detail.link")}
+        labelClassName="text-xs"
+        value={linkId}
+        onChange={(e) => setLinkId(e.target.value)}
+        items={linkItems}
+        className="h-8 bg-white/63 border-white text-xs rounded-xl"
+      />
+
+      <div className="flex justify-end gap-2">
+        <Button type="button" onClick={onClose} className="h-8 bg-[#E8E4F0] text-[#292D32] rounded-xl text-xs w-[95px]">
+          {t("cancel")}
+        </Button>
+        <Button type="button" onClick={handleSubmit} disabled={!canSubmit} className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]">
+          {t("taskmanager.task_detail.insert")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailAttachmentForm;

src/pages/taskmanager/components/task-detail/attachment/TaskDetailAttachmentPopover.tsx

@@ -0,0 +1,17 @@
+import { type FC } from "react";
+import TaskDetailAttachmentForm from "./TaskDetailAttachmentForm";
+
+type Props = {
+  onClose: () => void;
+  onSubmit: (data: { file?: File; title: string; linkId: string }) => void;
+};
+
+const TaskDetailAttachmentPopover: FC<Props> = ({ onClose, onSubmit }) => {
+  return (
+    <div className="absolute top-full right-0 mt-2 z-30 w-[300px] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80">
+      <TaskDetailAttachmentForm onClose={onClose} onSubmit={onSubmit} />
+    </div>
+  );
+};
+
+export default TaskDetailAttachmentPopover;

src/pages/taskmanager/components/task-detail/attachment/types.ts

@@ -0,0 +1,6 @@
+export type TaskAttachment = {
+  id: string;
+  title: string;
+  linkId: string;
+  fileName?: string;
+};