From b7574b3ca72e99c2a851a41604a079b9f279fedd Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 21 Sep 2025 11:06:20 +0300
Subject: [PATCH] chore(react/type_widget): start porting attachment actions

---
 .../widgets/buttons/attachments_actions.ts    | 43 +------------------
 .../src/widgets/type_widgets/Attachment.css   | 29 +++++++++++++
 .../src/widgets/type_widgets/Attachment.tsx   | 25 ++++++++++-
 3 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/apps/client/src/widgets/buttons/attachments_actions.ts b/apps/client/src/widgets/buttons/attachments_actions.ts
index bb49b2178..20c3db8b8 100644
--- a/apps/client/src/widgets/buttons/attachments_actions.ts
+++ b/apps/client/src/widgets/buttons/attachments_actions.ts
@@ -13,40 +13,8 @@ import type AttachmentDetailWidget from "../attachment_detail.js";
 import type { NoteRow } from "@triliumnext/commons";
 
 const TPL = /*html*/`
-<div class="dropdown attachment-actions">
-    <style>
-    .attachment-actions {
-        width: 35px;
-        height: 35px;
-    }
-
-    .attachment-actions .dropdown-menu {
-        width: 20em;
-    }
-
-    .attachment-actions .dropdown-item .bx {
-        position: relative;
-        top: 3px;
-        font-size: 120%;
-        margin-right: 5px;
-    }
-
-    .attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
-        color: var(--muted-text-color) !important;
-        background-color: transparent !important;
-        pointer-events: none; /* makes it unclickable */
-    }
-    </style>
-
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
-        aria-expanded="false" class="icon-action icon-action-always-border bx bx-dots-vertical-rounded"
-        style="position: relative; top: 3px;"></button>
-
+<div class="dropdown">
     <div class="dropdown-menu dropdown-menu-right">
-
-        <li data-trigger-command="openAttachment" class="dropdown-item"
-            title="${t("attachments_actions.open_externally_title")}"><span class="bx bx-file-find"></span> ${t("attachments_actions.open_externally")}</li>
-
         <li data-trigger-command="openAttachmentCustom" class="dropdown-item"
             title="${t("attachments_actions.open_custom_title")}"><span class="bx bx-customize"></span> ${t("attachments_actions.open_custom")}</li>
 
@@ -56,10 +24,8 @@ const TPL = /*html*/`
         <li data-trigger-command="copyAttachmentLinkToClipboard" class="dropdown-item"><span class="bx bx-link">
             </span> ${t("attachments_actions.copy_link_to_clipboard")}</li>
 
-
         <div class="dropdown-divider"></div>
 
-
         <li data-trigger-command="uploadNewAttachmentRevision" class="dropdown-item"><span class="bx bx-upload">
             </span> ${t("attachments_actions.upload_new_revision")}</li>
 
@@ -69,13 +35,10 @@ const TPL = /*html*/`
         <li data-trigger-command="deleteAttachment" class="dropdown-item">
             <span class="bx bx-trash destructive-action-icon"></span> ${t("attachments_actions.delete_attachment")}</li>
 
-
         <div class="dropdown-divider"></div>
 
-
         <li data-trigger-command="convertAttachmentIntoNote" class="dropdown-item"><span class="bx bx-note">
             </span> ${t("attachments_actions.convert_attachment_into_note")}</li>
-
     </div>
 
     <input type="file" class="attachment-upload-new-revision-input" style="display: none">
@@ -137,10 +100,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
         }
     }
 
-    async openAttachmentCommand() {
-        await openService.openAttachmentExternally(this.attachmentId, this.attachment.mime);
-    }
-
     async openAttachmentCustomCommand() {
         await openService.openAttachmentCustom(this.attachmentId, this.attachment.mime);
     }
diff --git a/apps/client/src/widgets/type_widgets/Attachment.css b/apps/client/src/widgets/type_widgets/Attachment.css
index bbc125a8c..9c5c502d7 100644
--- a/apps/client/src/widgets/type_widgets/Attachment.css
+++ b/apps/client/src/widgets/type_widgets/Attachment.css
@@ -101,4 +101,33 @@
 .attachment-detail .attachment-wrapper {
     flex-grow: 1;
 }
+/* #endregion */
+
+/* #region Attachment actions */
+.attachment-actions {
+    width: 35px;
+    height: 35px;
+}
+
+.attachment-actions .select-button {
+    position: relative;
+    top: 3px;
+}
+
+.attachment-actions .dropdown-menu {
+    width: 20em;
+}
+
+.attachment-actions .dropdown-item .bx {
+    position: relative;
+    top: 3px;
+    font-size: 120%;
+    margin-right: 5px;
+}
+
+.attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
+    color: var(--muted-text-color) !important;
+    background-color: transparent !important;
+    pointer-events: none; /* makes it unclickable */
+}
 /* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Attachment.tsx b/apps/client/src/widgets/type_widgets/Attachment.tsx
index 6864fd2b2..79d09bcd2 100644
--- a/apps/client/src/widgets/type_widgets/Attachment.tsx
+++ b/apps/client/src/widgets/type_widgets/Attachment.tsx
@@ -12,6 +12,10 @@ import utils from "../../services/utils";
 import content_renderer from "../../services/content_renderer";
 import { useTriliumEvent } from "../react/hooks";
 import froca from "../../services/froca";
+import Dropdown from "../react/Dropdown";
+import Icon from "../react/Icon";
+import { FormListItem } from "../react/FormList";
+import open from "../../services/open";
 
 /**
  * Displays the full list of attachments of a note and allows the user to interact with them.
@@ -126,7 +130,7 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
         <div className="attachment-detail-widget">
             <div className="attachment-detail-wrapper">
                 <div className="attachment-title-line">
-                    <div className="attachment-actions-container"></div>
+                    <AttachmentActions attachment={attachment} />
                     <h4 className="attachment-title">
                         {!isFullDetail ? (
                             <NoteLink
@@ -150,3 +154,22 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
         </div>
     )
 }
+
+function AttachmentActions({ attachment }: { attachment: FAttachment }) {
+    return (
+        <div className="attachment-actions-container">
+            <Dropdown
+                className="attachment-actions"
+                text={<Icon icon="bx bx-dots-vertical-rounded" />}
+                buttonClassName="icon-action-always-border"
+                iconAction
+            >
+                <FormListItem
+                    icon="bx bx-file-find"
+                    title={t("attachments_actions.open_externally_title")}
+                    onClick={(e) => open.openAttachmentExternally(attachment.attachmentId, attachment.mime)}
+                >{t("attachments_actions.open_externally")}</FormListItem>
+            </Dropdown>
+        </div>
+    )
+}