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

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,8 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
-import ClassAdder from "../components/class-adder";
+import CustomColorHtmlClass from "../components/custom-color-html-class";
 import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
-  api.renderInOutlet("above-main-container", ClassAdder);
+  api.renderInOutlet("above-main-container", CustomColorHtmlClass);
 });

javascripts/discourse/api-initializers/user-pallette.js

@@ -1,6 +1,6 @@
 import { apiInitializer } from "discourse/lib/api";
-import CustomUserPallette from "../components/custom-user-pallette";
+import CustomUserPalette from "../components/custom-user-palette";
 
 export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("sidebar-footer-actions", CustomUserPallette);
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
 });

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>
-}

javascripts/discourse/services/custom-color.gjs

@@ -1,13 +1,18 @@
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import Service from "@ember/service";
+import Service, { service } from "@ember/service";
+import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
 
-export default class customColor extends Service {
-  @tracked color = localStorage.getItem("d-customColor") || "horizon";
+const CUSTOM_COLOR_KEY = "d-custom-color-preference";
+
+export default class CustomColor extends Service {
+  @service keyValueStore;
+  @tracked
+  color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
 
   @action
   setColor(color) {
     this.color = color;
-    localStorage.setItem("d-customColor", color);
+    this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
   }
 }