From 866d3110da1d170b4554c35d060a0235896b74dd Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Feb 2026 12:05:24 +0200
Subject: [PATCH] feat(badges/content): add badge for custom CSS

---
 apps/client/src/translations/en/translation.json     |  1 +
 .../src/widgets/layout/ActiveContentBadges.tsx       | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 2ced551e90..317c64bd1c 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2294,6 +2294,7 @@
     "type_backend_script": "Backend script",
     "type_frontend_script": "Frontend script",
     "type_widget": "Widget",
+    "type_app_css": "Custom CSS",
     "toggle_tooltip_enable_tooltip": "Click to enable 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 70190fa855..ae5dc4ca0f 100644
--- a/apps/client/src/widgets/layout/ActiveContentBadges.tsx
+++ b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
@@ -10,8 +10,8 @@ import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react
 import FormToggle from "../react/FormToggle";
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
 
-const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous);
-const activeContentLabels = [ "iconPack", "widget" ] as const;
+const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous || a.name === "appCss");
+const activeContentLabels = [ "iconPack", "widget", "appCss" ] as const;
 
 const typeMappings: Record<ActiveContentInfo["type"], {
     icon: string;
@@ -38,6 +38,10 @@ const typeMappings: Record<ActiveContentInfo["type"], {
     widget: {
         icon: "bx bxs-widget",
         helpPage: "MgibgPcfeuGz"
+    },
+    appCss: {
+        icon: "bx bxs-file-css",
+        helpPage: "AlhDUqhENtH7"
     }
 };
 
@@ -168,6 +172,8 @@ function getTranslationForType(type: ActiveContentInfo["type"]) {
             return t("active_content_badges.type_frontend_script");
         case "widget":
             return t("active_content_badges.type_widget");
+        case "appCss":
+            return t("active_content_badges.type_app_css");
     }
 }
 
@@ -205,7 +211,7 @@ function getNameWithoutPrefix(name: string) {
 }
 
 interface ActiveContentInfo {
-    type: "iconPack" | "backendScript" | "frontendScript" | "widget";
+    type: "iconPack" | "backendScript" | "frontendScript" | "widget" | "appCss";
     isEnabled: boolean;
 }