refactor(badges/content): use shared mechanism for extracting info

apps/client/src/widgets/layout/ActiveContentBadges.tsx

@@ -1,22 +1,26 @@
+import { useEffect, useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
 import { Badge } from "../react/Badge";
 import FormToggle from "../react/FormToggle";
-import { useNoteContext, useNoteLabelBoolean } from "../react/hooks";
+import { useNoteContext, useTriliumEvent } from "../react/hooks";
 
 export function ActiveContentBadges() {
+    const { note } = useNoteContext();
+    const info = useActiveContentInfo(note);
+    console.log("Got inf ", info);
+
     return (
         <>
-            <IconPackBadge />
+            {info?.type === "iconPack" && <IconPackBadge />}
             <ActiveContentToggle />
         </>
     );
 }
 
 function IconPackBadge() {
-    const { note } = useNoteContext();
-    const [ isEnabledIconPack ] = useNoteLabelBoolean(note, "iconPack");
-    const [ isDisabledIconPack ] = useNoteLabelBoolean(note, "disabled:iconPack");
-
-    return ((isEnabledIconPack || isDisabledIconPack) &&
+    return (
         <Badge
             className="icon-pack-badge"
             icon="bx bx-package"
@@ -32,3 +36,45 @@ function ActiveContentToggle() {
         currentValue={true}
     />;
 }
+
+const activeContentLabels = [ "iconPack" ] as const;
+
+interface ActiveContentInfo {
+    type: "iconPack";
+}
+
+function useActiveContentInfo(note: FNote | null | undefined) {
+    const [ info, setInfo ] = useState<ActiveContentInfo | null>(null);
+
+    function refresh() {
+        let type: ActiveContentInfo["type"] | null = null;
+
+        if (!note) {
+            setInfo(null);
+            return;
+        }
+
+        for (const labelToCheck of activeContentLabels ) {
+            if (note.hasLabel(labelToCheck)) {
+                type = labelToCheck;
+            }
+        }
+
+        if (type) {
+            setInfo({ type });
+        } else {
+            setInfo(null);
+        }
+    }
+
+    // Refresh on note change.
+    useEffect(refresh, [ note ]);
+
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {
+            refresh();
+        }
+    });
+
+    return info;
+}