feat: experimental adornment

assets/icons/beaker_small.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 -960 960 960" width="24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path fill="#ffffff" d="m 284.25714,-242.31294 q -26.75385,0 -38.03213,-23.87574 -11.27899,-23.87573 5.44514,-44.41755 l 158.42239,-192.51659 v -172.62004 h -33.34061 q -8.91329,0 -14.94286,-6.03237 -6.02958,-6.03168 -6.02958,-14.94916 0,-8.91679 6.02958,-14.93938 6.02957,-6.02329 14.94286,-6.02329 h 206.49614 q 8.91329,0 14.94286,6.03238 6.02958,6.03238 6.02958,14.94916 0,8.91749 -6.02958,14.94008 -6.02957,6.02258 -14.94286,6.02258 h -33.34061 v 172.62004 l 158.42239,192.51659 q 16.72413,20.54182 5.44514,44.41755 -11.27828,23.87574 -38.03213,23.87574 z m 0,-41.9442 H 675.74286 L 507.96327,-488.38898 v -187.35388 h -55.92654 v 187.35388 z M 480,-480 Z" style="stroke-width:0.699082" /></svg>

assets/resources.json

@@ -6,6 +6,7 @@
   "icon-arrow_down": "icons/arrow_down.svg",
   "icon-delete": "icons/delete.svg",
   "icon-error": "icons/error.svg",
+  "icon-experimental": "icons/beaker_small.svg",
   "icon-globe": "icons/globe.svg",
   "icon-help": "icons/help.svg",
   "icon-lock": "icons/lock.svg",

src/components/BytmDialog.css

@@ -1,6 +1,7 @@
 :root {
   --bytm-dialog-accent-col: #3683d4;
   --bytm-advanced-mode-color: #c5a73b;
+  --bytm-experimental-col: #df543d;
 }
 
 .bytm-dialog-bg {
@@ -394,9 +395,13 @@ hr {
 }
 
 .bytm-ftitem-adornment svg path {
-  fill: var(--bytm-dialog-accent-col, #4595c7);
+  fill: var(--bytm-dialog-accent-col, #fff);
 }
 
 .bytm-advanced-mode-icon svg path {
-  fill: var(--bytm-advanced-mode-color, #c5a73b);
+  fill: var(--bytm-advanced-mode-color, #fff);
+}
+
+.bytm-experimental-icon svg path {
+  fill: var(--bytm-experimental-col, #fff);
 }

src/dialogs/dialogs.css

@@ -84,7 +84,7 @@
   font-size: 1.3rem;
 }
 
-.bytm-advanced-mode-icon {
+.bytm-adorn-icon {
   display: inline-flex;
   align-items: center;
 }

src/features/index.ts

@@ -31,7 +31,8 @@ const localeOptions = Object.entries(langMapping).reduce((a, [locale, { name }])
 
 /** Decoration elements that can be added next to the label */
 const adornments = {
-  advancedMode: async () => `<span class="bytm-advanced-mode-icon" title="${t("advanced_mode")}">${await resourceToHTMLString("icon-advanced_mode") ?? ""}</span>`,
+  advancedMode: async () => `<span class="bytm-advanced-mode-icon bytm-adorn-icon" title="${t("advanced_mode")}">${await resourceToHTMLString("icon-advanced_mode") ?? ""}</span>`,
+  experimental: async () => `<span class="bytm-experimental-icon bytm-adorn-icon" title="${t("experimental_feature")}">${await resourceToHTMLString("icon-experimental") ?? ""}</span>`,
   globe: async () => await resourceToHTMLString("icon-globe") ?? "",
 };
 
@@ -357,7 +358,7 @@ export const featInfo = {
     change: () => confirm(t("lyrics_cache_changed_clear_confirm")) && clearLyricsCache(),
     advanced: true,
     // TODO: to be reworked or removed in the big menu rework
-    textAdornment: adornments.advancedMode,
+    textAdornment: adornments.experimental,
   },
 
   //#SECTION general