From 66ff009b72622d497ba14b03cae0575f5a8caf38 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Feb 2026 11:08:30 +0200
Subject: [PATCH] feat(badges/content): option to open documentation

---
 .../src/translations/en/translation.json      |  3 +-
 .../widgets/layout/ActiveContentBadges.tsx    | 31 ++++++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 8717ecac23..8145a74231 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2293,6 +2293,7 @@
     "type_icon_pack": "Icon pack",
     "type_backend_script": "Backend script",
     "toggle_tooltip_enable_tooltip": "Click to enable this {{type}}.",
-    "toggle_tooltip_disable_tooltip": "Click to disable this {{type}}."
+    "toggle_tooltip_disable_tooltip": "Click to disable this {{type}}.",
+    "menu_docs": "Open documentation"
   }
 }
diff --git a/apps/client/src/widgets/layout/ActiveContentBadges.tsx b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
index dc867d8828..088d97cd6e 100644
--- a/apps/client/src/widgets/layout/ActiveContentBadges.tsx
+++ b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
@@ -4,16 +4,27 @@ import { useEffect, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
 import { t } from "../../services/i18n";
-import { Badge } from "../react/Badge";
+import { openInAppHelpFromUrl } from "../../services/utils";
+import { Badge, BadgeWithDropdown } from "../react/Badge";
+import { FormListItem } from "../react/FormList";
 import FormToggle from "../react/FormToggle";
 import { useNoteContext, useTriliumEvent } from "../react/hooks";
 
 const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous);
 const activeContentLabels = [ "iconPack" ] as const;
 
-const typeIconMappings: Record<ActiveContentInfo["type"], string> = {
-    iconPack: "bx bx-package",
-    backendScript: "bx bx-server"
+const typeMappings: Record<ActiveContentInfo["type"], {
+    icon: string;
+    helpPage: string;
+}> = {
+    iconPack: {
+        icon: "bx bx-package",
+        helpPage: "g1mlRoU8CsqC"
+    },
+    backendScript: {
+        icon: "bx bx-server",
+        helpPage: "SPirpZypehBG"
+    }
 };
 
 export function ActiveContentBadges() {
@@ -29,12 +40,18 @@ export function ActiveContentBadges() {
 }
 
 function ActiveContentBadge({ info }: { note: FNote, info: ActiveContentInfo }) {
+    const { icon, helpPage } = typeMappings[info.type];
     return (
-        <Badge
+        <BadgeWithDropdown
             className="icon-pack-badge"
-            icon={typeIconMappings[info.type]}
+            icon={icon}
             text={getTranslationForType(info.type)}
-        />
+        >
+            <FormListItem
+                icon="bx bx-help-circle"
+                onClick={() => openInAppHelpFromUrl(helpPage)}
+            >{t("active_content_badges.menu_docs")}</FormListItem>
+        </BadgeWithDropdown>
     );
 }