@allbluecn/web-app 0.3.0

package/src/components/story/detail/story-detail-body.tsx

@@ -0,0 +1,598 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ChevronsDownUp,
+  ChevronsUpDown,
+  CalendarCheck,
+  CalendarPlus2,
+  SmilePlus,
+  CircleUser,
+  ClockPlus,
+  ClockArrowUp,
+} from "lucide-react";
+import { UserAvatar } from "@allbluecn/ui";
+import { Input } from "@/components/ui/input";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { updateStoryFn, listStoryReactionsFn, toggleStoryReactionFn } from "@/server/serverFns/story";
+import { toast } from "sonner";
+import type { StoryDetail, UserBrief, CommentWithReplies, ActivityItem, ReactionGroup, RelationsData } from "../types";
+import { parseStoryDescription, serializeStoryDescription } from "../types";
+import type { StoryState } from "../constants";
+import { ActivityTabs } from "./activity-tabs";
+import { EmojiPicker } from "./emoji-picker";
+import { StoryAiToolbar } from "../ai/story-ai-toolbar";
+import { useStoryAiModel } from "../ai/use-story-ai-model";
+import { StateEditor, PriorityEditor, AssigneeEditor, DateEditor, LabelsEditor, ParentStoryEditor } from "../inline-editors";
+import { ProjectIconDisplay } from "@/components/project/project-icon";
+import type { Editor } from "@tiptap/react";
+import { StoryProperties } from "./story-properties";
+import { StoryDetailToolbar } from "./story-detail-toolbar";
+
+const NotionDocEditor = lazy(() => import("@allbluecn/tiptap/notion-like").then(m => ({ default: m.NotionDocEditor })));
+
+/**
+ * 需求描述编辑的「兜底」防抖时间。
+ *
+ * 设计原则：聚焦编辑器期间所有 onChange 只累积到 pendingDescRef，**不立即保存**；
+ * 真正的保存触发点是编辑器失焦或组件卸载（一次连续编辑 = 一条活动记录）。
+ * 本常量是兜底——用户长时间不操作（不聚焦也不离开）时也最终落盘，避免崩溃丢数据。
+ * 设为 8 秒：远超普通人写作时的思考停顿（1-3s），避免思考中途触发，又能保证
+ * 异常情况下不会丢太多内容。
+ */
+const DESCRIPTION_FLUSH_DEBOUNCE_MS = 8000;
+
+export function StoryDetailBody({
+  story,
+  users,
+  comments,
+  activities,
+  currentUserId,
+  layout = "split",
+  identifier,
+  project,
+  noScroll,
+  labels,
+  stories,
+  projects,
+  relationsData,
+  onRelationsUpdate,
+  onAppendActivities,
+  onAppendComment,
+  onRemoveComment,
+  onStoryUpdate,
+}: {
+  story: StoryDetail;
+  users: UserBrief[];
+  comments: CommentWithReplies[];
+  activities: ActivityItem[];
+  currentUserId: string | undefined;
+  layout?: "split" | "stack";
+  identifier?: string;
+  /** 所属项目（图标 + 名称），用于在需求 ID 前展示项目归属 */
+  project?: { name: string; icon: string } | null;
+  noScroll?: boolean;
+  /** 所有标签列表 */
+  labels?: { id: string; name: string; color: string }[];
+  /** 所有需求列表（用于父需求选择） */
+  stories?: { id: string; identifier: string; name: string; state: StoryState; projectId?: string }[];
+  /** 所有项目列表（用于父需求选择） */
+  projects?: { id: string; name: string; icon: string; displayId?: string | null }[];
+  /** 关联数据（从路由 loader 预加载） */
+  relationsData?: RelationsData;
+  onRelationsUpdate?: (next: RelationsData | ((prev: RelationsData) => RelationsData)) => void;
+  onAppendActivities?: (items: ActivityItem[]) => void;
+  onAppendComment?: (comment: CommentWithReplies) => void;
+  onRemoveComment?: (commentId: string) => void;
+  onStoryUpdate?: (s: StoryDetail) => void;
+}) {
+  const { t } = useTranslation("story");
+  const [name, setName] = useState(story.name);
+  useEffect(() => {
+    setName(story.name);
+  }, [story.name]);
+  const parsedDesc = parseStoryDescription(story.description);
+  const [descContent, setDescContent] = useState(parsedDesc);
+  const [saving, setSaving] = useState(false);
+  const lastPersistedRef = useRef(story.description ?? "");
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // 编辑会话期间累积的待保存内容。聚焦编辑器期间所有 onChange 只更新此 ref，
+  // 失焦/兜底防抖/卸载时由 flushDescription 一次性提交，让一次连续编辑只产生
+  // 一条描述变更活动记录。
+  const pendingDescRef = useRef<{ html: string; markdown: string } | null>(null);
+  const editorRef = useRef<Editor | null>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [needsTruncation, setNeedsTruncation] = useState(false);
+  const [isEditorFocused, setIsEditorFocused] = useState(false);
+  const [reactions, setReactions] = useState<ReactionGroup[]>([]);
+  const pendingReactionsRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    let cancelled = false;
+    listStoryReactionsFn({ data: { storyId: story.id } })
+      .then((groups) => {
+        if (!cancelled) setReactions(groups);
+      })
+      .catch(() => {
+        if (!cancelled) setReactions([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [story.id]);
+  const toggleReaction = useCallback(
+    async (emoji: string) => {
+      if (pendingReactionsRef.current.has(emoji)) return;
+      pendingReactionsRef.current.add(emoji);
+      try {
+        const groups = await toggleStoryReactionFn({
+          data: { storyId: story.id, emoji },
+        });
+        setReactions(groups);
+      } catch (err) {
+        toast.error(t("detail.operationFailed"), {
+          description: err instanceof Error ? err.message : t("comment.retry"),
+        });
+      } finally {
+        pendingReactionsRef.current.delete(emoji);
+      }
+    },
+    [story.id],
+  );
+  const editorContainerRef = useRef<HTMLDivElement>(null);
+
+  // AI 模型选择（hover 显示在工具栏右侧）
+  const { model: aiModel, setModel: setAiModel, groups: aiModelGroups } = useStoryAiModel();
+
+  const checkOverflow = useCallback(() => {
+    const editorEl = editorContainerRef.current?.querySelector(".ProseMirror");
+    if (editorEl) {
+      const lineHeight = 24;
+      const threeLines = lineHeight * 3.5 + 16;
+      setNeedsTruncation(editorEl.scrollHeight > threeLines);
+    }
+  }, []);
+
+  const onEditorReady = useCallback((editor: Editor) => {
+    editorRef.current = editor;
+    requestAnimationFrame(checkOverflow);
+    editor.on("focus", () => {
+      setExpanded(true);
+    });
+    editor.on("update", () => {
+      requestAnimationFrame(checkOverflow);
+    });
+  }, [checkOverflow]);
+
+  // Click outside the editor area → unfocus
+  useEffect(() => {
+    const handlePointerDown = (e: PointerEvent) => {
+      if (!editorContainerRef.current) return;
+      if (!editorContainerRef.current.contains(e.target as Node)) {
+        setIsEditorFocused(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, []);
+
+  const onEditorPointerDown = useCallback(() => {
+    setIsEditorFocused(true);
+  }, []);
+
+  const updateField = async (field: string, value: string | null) => {
+    setSaving(true);
+    try {
+      const res = await updateStoryFn({ data: { storyId: story.id, [field]: value } });
+      const updated = { ...story, ...res.story } as unknown as StoryDetail;
+      onStoryUpdate?.(updated);
+      if (res.activities.length > 0) onAppendActivities?.(res.activities);
+    } catch (err) {
+      toast.error(t("detail.saveFailed"), {
+        description: err instanceof Error ? err.message : t("comment.retry"),
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateLabels = async (labelIds: string[]) => {
+    setSaving(true);
+    try {
+      const res = await updateStoryFn({ data: { storyId: story.id, labelIds } });
+      const updated = { ...story, ...res.story } as unknown as StoryDetail;
+      onStoryUpdate?.(updated);
+      if (res.activities.length > 0) onAppendActivities?.(res.activities);
+    } catch (err) {
+      toast.error(t("detail.saveFailed"), {
+        description: err instanceof Error ? err.message : t("comment.retry"),
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateParent = async (parentId: string | null) => {
+    setSaving(true);
+    try {
+      const res = await updateStoryFn({ data: { storyId: story.id, parentId } });
+      const updated = { ...story, ...res.story } as unknown as StoryDetail;
+      onStoryUpdate?.(updated);
+      if (res.activities.length > 0) onAppendActivities?.(res.activities);
+    } catch (err) {
+      toast.error(t("detail.saveFailed"), {
+        description: err instanceof Error ? err.message : t("comment.retry"),
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveName = async () => {
+    const trimmed = name.trim();
+    if (!trimmed || trimmed === story.name) return;
+    try {
+      await updateField("name", trimmed);
+    } catch {
+      // error already handled in updateField
+    }
+  };
+
+  const flushDescription = useCallback(() => {
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    const content = pendingDescRef.current;
+    if (!content) return;
+    pendingDescRef.current = null;
+    const json = serializeStoryDescription(content.html, content.markdown);
+    if (json === lastPersistedRef.current) return;
+    setSaving(true);
+    updateStoryFn({ data: { storyId: story.id, description: json } })
+      .then((res) => {
+        lastPersistedRef.current = json;
+        const updated = { ...story, ...res.story } as unknown as StoryDetail;
+        onStoryUpdate?.(updated);
+        if (res.activities.length > 0) onAppendActivities?.(res.activities);
+      })
+      .catch((err) => toast.error(t("detail.saveFailed"), { description: err instanceof Error ? err.message : t("comment.retry") }))
+      .finally(() => setSaving(false));
+  }, [story.id, story, onAppendActivities, onStoryUpdate]);
+
+  // 用 ref 持有最新 flush 实现，避免 handleDescriptionChange / 失焦 / 卸载 effect
+  // 依赖 flushDescription 的 deps 变化而反复触发。
+  const flushDescriptionRef = useRef(flushDescription);
+  useEffect(() => {
+    flushDescriptionRef.current = flushDescription;
+  }, [flushDescription]);
+
+  // 编辑器内容变化时只累积最新内容到 pendingDescRef，不立即保存。
+  // 兜底防抖避免用户长时间不操作也最终落盘（防崩溃丢数据）。
+  const handleDescriptionChange = useCallback((content: { html: string; markdown: string }) => {
+    pendingDescRef.current = content;
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(
+      () => flushDescriptionRef.current(),
+      DESCRIPTION_FLUSH_DEBOUNCE_MS,
+    );
+  }, []);
+
+  // 编辑器失焦 → 立即提交本次编辑会话累积的内容（一次连续编辑 = 一条活动记录）
+  useEffect(() => {
+    if (isEditorFocused) return;
+    flushDescriptionRef.current();
+  }, [isEditorFocused]);
+
+  // 组件卸载（切换需求 / 关页面）→ 同步 flush 避免数据丢失
+  useEffect(() => {
+    return () => {
+      flushDescriptionRef.current();
+    };
+  }, []);
+
+  const handleAiApply = useCallback((newMarkdown: string) => {
+    if (editorRef.current) {
+      editorRef.current.commands.setContent(newMarkdown);
+    }
+    const newContent = { html: newMarkdown, markdown: newMarkdown };
+    setDescContent(newContent);
+    const json = serializeStoryDescription(newMarkdown, newMarkdown);
+    lastPersistedRef.current = json;
+    updateField("description", json);
+  }, [updateField]);
+
+  const metaBar = (
+    <div className="flex flex-wrap items-center gap-2 px-6">
+      <StateEditor value={story.state} onChange={(v) => updateField("state", v)} variant="button" />
+      <PriorityEditor value={story.priority} onChange={(v) => updateField("priority", v)} variant="button" />
+      <AssigneeEditor assignee={story.assignee} users={users} onChange={(v) => updateField("assigneeId", v)} variant="button" />
+      <DateEditor value={story.startDate} onChange={(v) => updateField("startDate", v)} label={t("detail.startDate")} icon={CalendarPlus2} />
+      <DateEditor value={story.targetDate} onChange={(v) => updateField("targetDate", v)} label={t("detail.dueDate")} icon={CalendarCheck} />
+    </div>
+  );
+
+  const main = (
+    <>
+      <div className="flex items-start justify-between gap-4 px-6">
+        <div className="flex-1 space-y-4">
+          <div className="flex items-center gap-2">
+            {project && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="flex cursor-default items-center">
+                    <ProjectIconDisplay name={project.icon} size={16} className="shrink-0 text-muted-foreground" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="flex flex-col">
+                    <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t("detail.belongsTo")}</span>
+                    <span>{project.name}</span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            )}
+            {identifier && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      navigator.clipboard.writeText(identifier)
+                        .then(() => toast.success(t("detail.copied", { identifier })))
+                        .catch(() => toast.error(t("detail.copyFailed")));
+                    }}
+                    className="text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                  >
+                    {identifier}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>{t("detail.clickToCopy")}</TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+          {/* {saving && <span className="text-xs text-muted-foreground">保存中...</span>} */}
+          <Input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onBlur={saveName}
+            className="border-0 px-0 text-2xl md:text-2xl font-semibold shadow-none focus-visible:ring-0"
+          />
+        </div>
+      </div>
+      {metaBar}
+      <div ref={editorContainerRef} className={`relative notion-full-width${!isEditorFocused && !(descContent.markdown ?? "").trim() ? " story-editor-no-placeholder" : ""}`} style={{ "--notion-content-width": "1fr", "--notion-margin-width": "0px" } as React.CSSProperties} onPointerDown={onEditorPointerDown}>
+        <div className={!expanded && needsTruncation ? "max-h-[90px] overflow-hidden" : ""}>
+          <Suspense fallback={
+            <div className="flex flex-col space-y-2 p-3 min-h-24">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+              <Skeleton className="h-4 w-2/3" />
+            </div>
+          }>
+            <NotionDocEditor
+              key={story.id}
+              content={descContent}
+              onChange={handleDescriptionChange}
+              showHeader={false}
+              hideInsertButton
+              hideAi
+              editorClassName="story-editor !ml-0"
+              onEditorReady={onEditorReady}
+              disableMobileFullscreen
+            />
+          </Suspense>
+        </div>
+        {!isEditorFocused && !(descContent.markdown ?? "").trim() && (
+          <div className="pointer-events-none absolute top-3 left-6 text-sm text-muted-foreground select-none">
+            {t("create.addDescription")}
+          </div>
+        )}
+        {!expanded && needsTruncation && (
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+        )}
+      </div>
+      <div className="px-6">
+        <div className="flex items-center gap-2">
+          <div className="flex min-w-0 flex-1 items-center gap-1.5">
+            {needsTruncation && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 shrink-0 pl-0 pr-2 text-xs text-muted-foreground"
+                onClick={() => setExpanded(!expanded)}
+              >
+                {expanded ? (
+                  <>
+                    <ChevronsDownUp className="mr-1 size-3" />
+                    {t("detail.showLess")}
+                  </>
+                ) : (
+                  <>
+                    <ChevronsUpDown className="mr-1 size-3" />
+                    {t("detail.showMore")}
+                  </>
+                )}
+              </Button>
+            )}
+            {reactions
+              .slice()
+              .sort((a, b) => b.count - a.count)
+              .slice(0, 4)
+              .map((group) => (
+                <button
+                  key={group.emoji}
+                  type="button"
+                  onClick={() => toggleReaction(group.emoji)}
+                  className="flex h-6 items-center gap-1 rounded-full border bg-muted/50 px-2 text-xs"
+                >
+                  <span>{group.emoji}</span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {group.count}
+                  </span>
+                </button>
+              ))}
+            {reactions.length > 4 && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex h-6 items-center rounded-full border bg-muted/50 px-2 text-[10px] text-muted-foreground"
+                  >
+                    +{reactions.length - 4}
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent
+                  align="center"
+                  className="w-fit rounded-full border bg-background p-1.5"
+                >
+                  <div className="flex items-center gap-1">
+                    {reactions
+                      .slice()
+                      .sort((a, b) => b.count - a.count)
+                      .slice(4)
+                      .map((group) => (
+                        <button
+                          key={group.emoji}
+                          type="button"
+                          onClick={() => toggleReaction(group.emoji)}
+                          className="flex h-6 items-center gap-1 rounded-full border bg-muted/50 px-2 text-xs hover:bg-muted"
+                        >
+                          <span>{group.emoji}</span>
+                          <span className="text-[10px] text-muted-foreground">
+                            {group.count}
+                          </span>
+                        </button>
+                      ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+            <span className="inline-flex shrink-0">
+              <EmojiPicker
+                width={360}
+                reactionsDefaultOpen
+                reactions={["1f44d", "1f44f", "2764-fe0f", "1f389", "1f4a1", "1f64f", "1f680"]}
+                style={{ "--epr-emoji-size": "20px", "--epr-emoji-padding": "6px" } as React.CSSProperties}
+                onPick={toggleReaction}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 gap-1 pl-0 pr-2 text-xs text-muted-foreground"
+                >
+                  <SmilePlus className="size-3.5" />
+                  {t("detail.addReaction")}
+                </Button>
+              </EmojiPicker>
+            </span>
+            <div className="mx-1.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+            <div className="flex min-w-0 flex-1">
+              <StoryAiToolbar
+                storyId={story.id}
+                description={descContent.markdown}
+                title={story.name}
+                onApply={handleAiApply}
+                model={aiModel}
+                groups={aiModelGroups}
+                onModelChange={setAiModel}
+                modelSelectVariant="trailing"
+                fill
+                showSplit
+                showTestCase
+                showPrototype
+                showUi
+                showCode
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {relationsData && (
+        <div className="py-2">
+          <StoryDetailToolbar
+            storyId={story.id}
+            projectId={story.projectId}
+            data={relationsData}
+            onRefresh={onRelationsUpdate ?? (() => { })}
+            users={users}
+            projects={projects?.map((p) => ({ ...p, displayId: p.displayId ?? null }))}
+            labels={labels}
+          />
+        </div>
+      )}
+
+      <StoryProperties
+        story={{
+          id: story.id,
+          parentId: story.parentId,
+          parent: story.parent,
+          labels: story.labels,
+          projectId: story.projectId,
+        }}
+        labels={labels}
+        projects={projects}
+        onParentChange={updateParent}
+        onLabelsChange={updateLabels}
+        onActivities={onAppendActivities}
+      />
+
+      <div className="px-6 py-3  space-y-3.5">
+        <div className="flex items-center gap-2 text-xs">
+          <CircleUser className="size-4 shrink-0 text-muted-foreground" />
+          <span className="text-muted-foreground shrink-0">{t("detail.createdBy")}</span>
+          <UserAvatar name={story.createdBy.username} avatarConfig={story.createdBy.avatarConfig} bgShape="circle" bgColor={story.createdBy.bgColor} size="xs" />
+          <span>{story.createdBy.username}</span>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <ClockPlus className="size-4 shrink-0 text-muted-foreground" />
+          <span className="text-muted-foreground shrink-0">{t("detail.createdAt")}</span>
+          <span>{new Date(story.createdAt).toLocaleString()}</span>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <ClockArrowUp className="size-4 shrink-0 text-muted-foreground" />
+          <span className="text-muted-foreground shrink-0">{t("detail.updatedAt")}</span>
+          <span>{new Date(story.updatedAt).toLocaleString()}</span>
+        </div>
+      </div>
+
+
+
+      <ActivityTabs storyId={story.id} comments={comments} activities={activities} users={users} onAppendComment={onAppendComment} onRemoveComment={onRemoveComment} />
+    </>
+  );
+
+  if (layout === "stack") {
+    return (
+      <div className={`flex min-h-0 flex-1 flex-col ${noScroll ? "" : "overflow-y-auto"}`}>
+        <div className="flex-1 space-y-4 pt-6 pb-6">{main}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex min-h-0 flex-1 ${noScroll ? "" : "overflow-hidden"}`}>
+      <div className={`flex-1 space-y-4 pt-6 pb-6 ${noScroll ? "" : "overflow-y-auto"}`}>{main}</div>
+    </div>
+  );
+}

package/src/components/story/detail/story-detail-toolbar/attachments.tsx

@@ -0,0 +1,73 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Paperclip } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { AttachmentsPanel } from "../../relations/attachments-panel";
+import type { RelationsData } from "../../types";
+
+export function StoryDetailAttachments({
+  storyId,
+  data,
+  onRefresh,
+}: {
+  storyId: string;
+  data: RelationsData;
+  onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+}) {
+  const { t } = useTranslation("story");
+  const count = data.attachments.length;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+          title={t("relations.uploadAttachment")}
+        >
+          <Paperclip className="size-3.5 text-muted-foreground" />
+          {t("relations.attachment")}
+          {count > 0 && (
+            <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {count}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-[380px] p-4">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-semibold">{t("relations.attachment")}</span>
+          {count > 0 && <span className="text-xs text-muted-foreground">{t("relations.itemCount", { count })}</span>}
+        </div>
+        <AttachmentsPanel
+          storyId={storyId}
+          data={data.attachments}
+          onUpdate={(newAttachments) =>
+            onRefresh((prev) => ({
+              ...prev,
+              attachments: newAttachments,
+            }))
+          }
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}