From 376ef0c67989b9af46f290d57009f082ebd6f527 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 21 Sep 2025 12:01:27 +0300
Subject: [PATCH] chore(react/type_widgets): introduce disabled tooltip

---
 apps/client/src/stylesheets/style.css         |  2 +-
 .../widgets/buttons/attachments_actions.ts    | 21 -------------------
 apps/client/src/widgets/react/FormList.tsx    | 15 ++++++++-----
 .../src/widgets/type_widgets/Attachment.tsx   | 10 +++++++++
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index f6f07684f..ce477135c 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -408,7 +408,7 @@ body.desktop .tabulator-popup-container {
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
     margin-left: 8px;
-    font-size: 0.5em;
+    font-size: 0.75rem;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
     opacity: 0.75;
diff --git a/apps/client/src/widgets/buttons/attachments_actions.ts b/apps/client/src/widgets/buttons/attachments_actions.ts
index 20c3db8b8..280e318bd 100644
--- a/apps/client/src/widgets/buttons/attachments_actions.ts
+++ b/apps/client/src/widgets/buttons/attachments_actions.ts
@@ -15,9 +15,6 @@ import type { NoteRow } from "@triliumnext/commons";
 const TPL = /*html*/`
 <div class="dropdown">
     <div class="dropdown-menu dropdown-menu-right">
-        <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>
-
         <li data-trigger-command="downloadAttachment" class="dropdown-item">
             <span class="bx bx-download"></span> ${t("attachments_actions.download")}</li>
 
@@ -84,24 +81,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
                 }
             }
         });
-
-        const isElectron = utils.isElectron();
-        if (!this.isFullDetail) {
-            const $openAttachmentButton = this.$widget.find("[data-trigger-command='openAttachment']");
-            $openAttachmentButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_externally_detail_page")));
-            if (isElectron) {
-                const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
-                $openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_externally_detail_page")));
-            }
-        }
-        if (!isElectron) {
-            const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
-            $openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_custom_client_only")));
-        }
-    }
-
-    async openAttachmentCustomCommand() {
-        await openService.openAttachmentCustom(this.attachmentId, this.attachment.mime);
     }
 
     async downloadAttachmentCommand() {
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index f3d6d9427..5c78feaba 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -22,7 +22,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
         if (!triggerRef.current || !wrapperRef.current) {
             return;
         }
-        
+
         const $wrapperRef = $(wrapperRef.current);
         const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
         $wrapperRef.on("hide.bs.dropdown", (e) => e.preventDefault());
@@ -82,6 +82,8 @@ interface FormListItemOpts {
     active?: boolean;
     badges?: FormListBadge[];
     disabled?: boolean;
+    /** Will indicate the reason why the item is disabled via an icon, when hovered over it. */
+    disabledTooltip?: string;
     checked?: boolean | null;
     selected?: boolean;
     onClick?: (e: MouseEvent) => void;
@@ -118,21 +120,24 @@ export function FormListItem({ className, icon, value, title, active, disabled,
             <Icon icon={icon} />&nbsp;
             {description ? (
                 <div>
-                    <FormListContent description={description} {...contentProps} />
+                    <FormListContent description={description} disabled={disabled} {...contentProps} />
                 </div>
             ) : (
-                <FormListContent description={description} {...contentProps} />
+                <FormListContent description={description} disabled={disabled} {...contentProps} />
             )}
         </li>
     );
 }
 
-function FormListContent({ children, badges, description }: Pick<FormListItemOpts, "children" | "badges" | "description">) {
+function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) {
     return <>
         {children}
         {badges && badges.map(({ className, text }) => (
             <span className={`badge ${className ?? ""}`}>{text}</span>
         ))}
+        {disabled && disabledTooltip && (
+            <span class="bx bx-info-circle disabled-tooltip" title={disabledTooltip} />
+        )}
         {description && <div className="description">{description}</div>}
     </>;
 }
@@ -177,4 +182,4 @@ export function FormDropdownSubmenu({ icon, title, children }: { icon: string, t
             </ul>
         </li>
     )
-}
\ 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 79d09bcd2..60549e386 100644
--- a/apps/client/src/widgets/type_widgets/Attachment.tsx
+++ b/apps/client/src/widgets/type_widgets/Attachment.tsx
@@ -156,6 +156,8 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
 }
 
 function AttachmentActions({ attachment }: { attachment: FAttachment }) {
+    const isElectron = utils.isElectron();
+
     return (
         <div className="attachment-actions-container">
             <Dropdown
@@ -169,6 +171,14 @@ function AttachmentActions({ attachment }: { attachment: FAttachment }) {
                     title={t("attachments_actions.open_externally_title")}
                     onClick={(e) => open.openAttachmentExternally(attachment.attachmentId, attachment.mime)}
                 >{t("attachments_actions.open_externally")}</FormListItem>
+
+                <FormListItem
+                    icon="bx bx-customize"
+                    title={t("attachments_actions.open_custom_title")}
+                    onClick={(e) => open.openAttachmentCustom(attachment.attachmentId, attachment.mime)}
+                    disabled={!isElectron}
+                    disabledTooltip={!isElectron ? t("attachments_actions.open_custom_client_only") : t("attachments_actions.open_externally_detail_page")}
+                >{t("attachments_actions.open_custom")}</FormListItem>
             </Dropdown>
         </div>
     )