DEV: Add high level system spec and clean up JS (#34)

javascripts/discourse/components/custom-color-html-class.gjs

@@ -3,7 +3,7 @@ import { concat } from "@ember/helper";
 import { service } from "@ember/service";
 import htmlClass from "discourse/helpers/html-class";
 
-export default class ClassAdder extends Component {
+export default class CustomColorHtmlClass extends Component {
   @service customColor;
 
   <template>

javascripts/discourse/components/custom-user-palette.gjs

@@ -1,51 +1,57 @@
-import { array } from "@ember/helper";
 import icon from "discourse/helpers/d-icon";
 import DMenu from "float-kit/components/d-menu";
-import SitePallette from "./site-pallette";
+import SitePaletteMenuItem from "./site-palette-menu-item";
 
-const PALLETTES = [
+const PALETTES = [
   {
+    label: "Marigold",
     name: "marigold",
     color: "#d3881f",
   },
   {
+    label: "Violet",
     name: "violet",
     color: "#9b15de",
   },
   {
+    label: "Lily",
     name: "lily",
     color: "#CC336F",
   },
   {
+    label: "Clover",
     name: "clover",
     color: "#45a06e",
   },
   {
+    label: "Royal",
     name: "royal",
     color: "#4169e1",
   },
   {
+    label: "Horizon",
     name: "horizon",
     color: "#595bca",
   },
 ];
 
+export const DEFAULT_PALETTE_NAME = "horizon";
+
 <template>
   <DMenu
-    @identifier="user-color-pallette"
-    @triggers={{array "click"}}
+    @identifier="user-color-palette"
     @placementStrategy="fixed"
-    class="btn-flat user-color-pallette sidebar-footer-actions-button"
+    class="btn-flat user-color-palette sidebar-footer-actions-button"
     @inline={{true}}
   >
     <:trigger>
       {{icon "paintbrush"}}
     </:trigger>
     <:content>
-      <div class="color-pallette-menu">
-        <div class="color-pallette-menu__content">
-          {{#each PALLETTES as |colorScheme|}}
-            <SitePallette @colorScheme={{colorScheme}} />
+      <div class="color-palette-menu">
+        <div class="color-palette-menu__content">
+          {{#each PALETTES as |colorPalette|}}
+            <SitePaletteMenuItem @colorPalette={{colorPalette}} />
           {{/each}}
         </div>
       </div>

javascripts/discourse/components/site-palette-menu-item.gjs

@@ -0,0 +1,41 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+
+export default class SitePaletteMenuItem extends Component {
+  @service customColor;
+
+  get siteStyle() {
+    return `--icon-color: ${this.args.colorPalette.color}`;
+  }
+
+  get activeClass() {
+    if (this.customColor.color === this.args.colorPalette.name) {
+      return "active";
+    }
+  }
+
+  @action
+  handleInput(colorPalette) {
+    this.customColor.setColor(colorPalette.name);
+  }
+
+  <template>
+    <div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
+      <DButton
+        class={{concatClass
+          "btn-flat color-palette-menu__item-choice"
+          this.activeClass
+        }}
+        style={{htmlSafe this.siteStyle}}
+        @icon="circle"
+        @translatedLabel={{@colorPalette.label}}
+        @action={{fn this.handleInput @colorPalette}}
+      />
+    </div>
+  </template>
+}

javascripts/discourse/components/site-pallette.gjs

@@ -1,31 +0,0 @@
-import Component from "@glimmer/component";
-import { fn } from "@ember/helper";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import DButton from "discourse/components/d-button";
-
-export default class SitePallette extends Component {
-  @service customColor;
-
-  get siteStyle() {
-    return `--icon-color: ${this.args.colorScheme.color}`;
-  }
-
-  @action
-  handleInput(colorScheme) {
-    this.customColor.setColor(colorScheme.name);
-  }
-
-  <template>
-    <div class="color-pallette-menu__item">
-      <DButton
-        class="btn-flat color-pallette-menu__item-choice"
-        style={{htmlSafe this.siteStyle}}
-        @icon="circle"
-        @translatedLabel={{@colorScheme.name}}
-        @action={{fn this.handleInput @colorScheme}}
-      />
-    </div>
-  </template>
-}