From 7a3e7fccec08c9abe48381cc705beefa8f0d068b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Feb 2026 11:54:27 +0200
Subject: [PATCH] feat(badges/content): handle widgets as separate content type

---
 .../src/translations/en/translation.json      |  4 ++-
 .../widgets/layout/ActiveContentBadges.tsx    | 35 ++++++++++++-------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 5e6bba615a..2ced551e90 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",
     "type_frontend_script": "Frontend script",
+    "type_widget": "Widget",
     "toggle_tooltip_enable_tooltip": "Click to enable this {{type}}.",
     "toggle_tooltip_disable_tooltip": "Click to disable this {{type}}.",
     "menu_docs": "Open documentation",
@@ -2304,6 +2305,7 @@
     "menu_run_daily": "Daily",
     "menu_run_frontend_startup": "When the desktop frontend starts up",
     "menu_run_mobile_startup": "When the mobile frontend starts up",
-    "menu_toggle_widget": "Widget"
+    "menu_change_to_widget": "Change to widget",
+    "menu_change_to_frontend_script": "Change to frontend script"
   }
 }
diff --git a/apps/client/src/widgets/layout/ActiveContentBadges.tsx b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
index 64ef118181..70190fa855 100644
--- a/apps/client/src/widgets/layout/ActiveContentBadges.tsx
+++ b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
@@ -1,5 +1,4 @@
 import { BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
-import { note } from "mermaid/dist/rendering-util/rendering-elements/shapes/note.js";
 import { useEffect, useState } from "preact/hooks";
 
 import FNote from "../../entities/fnote";
@@ -7,12 +6,12 @@ import attributes from "../../services/attributes";
 import { t } from "../../services/i18n";
 import { openInAppHelpFromUrl } from "../../services/utils";
 import { BadgeWithDropdown } from "../react/Badge";
-import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
 import FormToggle from "../react/FormToggle";
-import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent, useTriliumOption } from "../react/hooks";
+import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
 
 const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous);
-const activeContentLabels = [ "iconPack" ] as const;
+const activeContentLabels = [ "iconPack", "widget" ] as const;
 
 const typeMappings: Record<ActiveContentInfo["type"], {
     icon: string;
@@ -35,6 +34,10 @@ const typeMappings: Record<ActiveContentInfo["type"], {
         helpPage: "yIhgI5H7A2Sm",
         apiDocsPage: "Q2z6av6JZVWm",
         isExecutable: true
+    },
+    widget: {
+        icon: "bx bxs-widget",
+        helpPage: "MgibgPcfeuGz"
     }
 };
 
@@ -65,7 +68,13 @@ function ActiveContentBadge({ info, note }: { note: FNote, info: ActiveContentIn
                         triggerCommand="runActiveNote"
                     >{t("active_content_badges.menu_execute_now")}</FormListItem>
                     <ScriptRunOptions note={note} info={info} />
-                    {info.type === "frontendScript" && <WidgetSwitcher note={note} />}
+                    <FormDropdownDivider />
+                </>
+            )}
+
+            {(info.type === "frontendScript" || info.type === "widget") && (
+                <>
+                    <WidgetSwitcher note={note} />
                     <FormDropdownDivider />
                 </>
             )}
@@ -140,12 +149,12 @@ function WidgetSwitcher({ note }: { note: FNote }) {
     const [ widget, setWidget ] = useNoteLabelBoolean(note, "widget");
 
     return (
-        <FormListToggleableItem
-            title={t("active_content_badges.menu_toggle_widget")}
-            icon="bx bxs-widget"
-            currentValue={widget}
-            onChange={newValue => setWidget(newValue)}
-        />
+        <FormListItem
+            icon={widget ? "bx bx-window" : "bx bxs-widget"}
+            onClick={() => setWidget(!widget)}
+        >
+            {widget ? t("active_content_badges.menu_change_to_frontend_script") : t("active_content_badges.menu_change_to_widget")}
+        </FormListItem>
     );
 }
 
@@ -157,6 +166,8 @@ function getTranslationForType(type: ActiveContentInfo["type"]) {
             return t("active_content_badges.type_backend_script");
         case "frontendScript":
             return t("active_content_badges.type_frontend_script");
+        case "widget":
+            return t("active_content_badges.type_widget");
     }
 }
 
@@ -194,7 +205,7 @@ function getNameWithoutPrefix(name: string) {
 }
 
 interface ActiveContentInfo {
-    type: "iconPack" | "backendScript" | "frontendScript";
+    type: "iconPack" | "backendScript" | "frontendScript" | "widget";
     isEnabled: boolean;
 }