feat(badges/content): detect icon pack

apps/client/src/stylesheets/theme-next-light.css

@@ -202,6 +202,7 @@
     --badge-share-background-color: #6b6b6b;
     --badge-clipped-note-background-color: #2284c0;
     --badge-execute-background-color: #7b47af;
+    --badge-icon-pack-background-color: rgb(228, 163, 44);
 
     --note-icon-background-color: #4f4f4f;
     --note-icon-color: white;
@@ -322,4 +323,4 @@
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
-}
+}

apps/client/src/widgets/layout/NoteBadges.css

@@ -37,6 +37,7 @@
                 pointer-events: none;
             }
         }
+        &.icon-pack-badge { --color: var(--badge-icon-pack-background-color); }
 
         min-width: 0;
 

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

@@ -19,6 +19,7 @@ export default function NoteBadges() {
             <ShareBadge />
             <ClippedNoteBadge />
             <ExecuteBadge />
+            <IconPackBadge />
         </div>
     );
 }
@@ -147,3 +148,17 @@ export function SaveStatusBadge() {
         />
     );
 }
+
+function IconPackBadge() {
+    const { note } = useNoteContext();
+    const isEnabledIconPack = useNoteLabelBoolean(note, "iconPack");
+    const isDisabledIconPack = useNoteLabelBoolean(note, "disabled:iconPack");
+
+    return ((isEnabledIconPack || isDisabledIconPack) &&
+        <Badge
+            className="icon-pack-badge"
+            icon="bx bx-package"
+            text="Icon pack"
+        />
+    );
+}