From 3171413a18212df1e7545c1e13ec955113426a28 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 21 Sep 2025 10:39:33 +0300
Subject: [PATCH] chore(react/type_widget): react to attachment changes

---
 apps/client/src/widgets/type_widgets/Attachment.tsx | 13 ++++++++++---
 .../src/widgets/type_widgets_old/attachment_list.ts |  9 ---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/Attachment.tsx b/apps/client/src/widgets/type_widgets/Attachment.tsx
index 3169c53a8..d685d7d8c 100644
--- a/apps/client/src/widgets/type_widgets/Attachment.tsx
+++ b/apps/client/src/widgets/type_widgets/Attachment.tsx
@@ -10,23 +10,30 @@ import FAttachment from "../../entities/fattachment";
 import Alert from "../react/Alert";
 import utils from "../../services/utils";
 import content_renderer from "../../services/content_renderer";
+import { useTriliumEvent } from "../react/hooks";
 
 export function AttachmentList({ note }: TypeWidgetProps) {
     const [ attachments, setAttachments ] = useState<FAttachment[]>([]);
 
     function refresh() {
-        note.getAttachments().then(setAttachments);
+        note.getAttachments().then(attachments => setAttachments(Array.from(attachments)));
     }
 
     useEffect(refresh, [ note ]);
 
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttachmentRows().some((att) => att.attachmentId && att.ownerId === note.noteId)) {
+            refresh();
+        }
+    });
+
     return (
         <div className="attachment-list note-detail-printable">
             <AttachmentListHeader noteId={note.noteId} />
 
             <div className="attachment-list-wrapper">
                 {attachments.length ? (
-                    attachments.map(attachment => <AttachmentDetail attachment={attachment} />)
+                    attachments.map(attachment => <AttachmentDetail key={attachment.attachmentId} attachment={attachment} />)
                 ) : (
                     <Alert type="info">
                         {t("attachment_list.no_attachments")}
@@ -62,7 +69,7 @@ function AttachmentListHeader({ noteId }: { noteId: string }) {
     )
 }
 
-function AttachmentDetail({ attachment, isFullDetail }: { attachment: FAttachment, isFullDetail: boolean }) {
+function AttachmentDetail({ attachment, isFullDetail }: { attachment: FAttachment, isFullDetail?: boolean }) {
     const contentWrapper = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
diff --git a/apps/client/src/widgets/type_widgets_old/attachment_list.ts b/apps/client/src/widgets/type_widgets_old/attachment_list.ts
index 318ddf457..5523ffc39 100644
--- a/apps/client/src/widgets/type_widgets_old/attachment_list.ts
+++ b/apps/client/src/widgets/type_widgets_old/attachment_list.ts
@@ -42,13 +42,4 @@ export default class AttachmentListTypeWidget extends TypeWidget {
             this.$list.append(attachmentDetailWidget.render());
         }
     }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        // updates and deletions are handled by the detail, for new attachments the whole list has to be refreshed
-        const attachmentsAdded = loadResults.getAttachmentRows().some((att) => att.attachmentId && !this.renderedAttachmentIds.has(att.attachmentId));
-
-        if (attachmentsAdded) {
-            this.refresh();
-        }
-    }
 }