move ColorPicker from chat settings to separate component

dist/index.js

@@ -1354,7 +1354,7 @@
     };
     setColor = (newColor) => {
       this.color.value = newColor;
-      this.chatViewModel.chatModel.setColor(newColor);
+      this.chatViewModel.setColor(newColor);
     };
     remove = () => {
       this.chatViewModel.close();
@@ -1385,6 +1385,9 @@
         [this.encryptionKeyInput],
         () => this.encryptionKeyInput.value == this.chatViewModel.chatModel.info.encryptionKey
       );
+      this.color.subscribe((newColor) => {
+        this.setColor(newColor);
+      });
     }
   };
 
@@ -1530,6 +1533,10 @@
     closeSubPages = () => {
       this.taskPageViewModel.closeBoard();
     };
+    setColor = (color) => {
+      this.displayedColor.value = color;
+      this.chatModel.setColor(color);
+    };
     resetColor = () => {
       this.displayedColor.value = this.settingsPageViewModel.color.value;
     };
@@ -1865,6 +1872,29 @@
     ))))))));
   }
 
+  // src/View/Components/colorPicker.tsx
+  function ColorPicker(selectedColor) {
+    return /* @__PURE__ */ createElement("div", { class: "flex-row gap width-input" }, ...Object.values(Color).map((color) => {
+      const isSelected = createProxyState(
+        [selectedColor],
+        () => selectedColor.value == color
+      );
+      function setColor() {
+        selectedColor.value = color;
+      }
+      return /* @__PURE__ */ createElement(
+        "button",
+        {
+          color,
+          class: "fill-color width-100 flex",
+          style: "height: 2rem",
+          "toggle:selected": isSelected,
+          "on:click": setColor
+        }
+      );
+    }));
+  }
+
   // src/View/Components/dangerousActionButton.tsx
   function DangerousActionButton(label, icon, action) {
     const isActionRequested = new State(false);
@@ -1985,25 +2015,7 @@
         type: "checkbox",
         "bind:checked": settingsPageViewModel.shouldShowEncryptionKey
       }
-    ), translations.chatPage.settings.showEncryptionKey), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row gap width-input" }, ...Object.values(Color).map((color) => {
+    ), translations.chatPage.settings.showEncryptionKey), /* @__PURE__ */ createElement("hr", null), ColorPicker(settingsPageViewModel.color), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
-      const isSelected = createProxyState(
-        [settingsPageViewModel.color],
-        () => settingsPageViewModel.color.value == color
-      );
-      function setColor() {
-        settingsPageViewModel.setColor(color);
-      }
-      return /* @__PURE__ */ createElement(
-        "button",
-        {
-          color,
-          class: "fill-color width-100 flex",
-          style: "height: 2rem",
-          "toggle:selected": isSelected,
-          "on:click": setColor
-        }
-      );
-    })), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
       translations.chatPage.settings.deleteChatButton,
       "chat_error",
       settingsPageViewModel.remove
@@ -2031,7 +2043,13 @@
 
   // src/View/Modals/boardSettingsModal.tsx
   function BoardSettingsModal(boardViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.boardNameInputLabel), /* @__PURE__ */ createElement("input", { "bind:value": boardViewModel.name })))), /* @__PURE__ */ createElement("button", { "on:click": boardViewModel.hideSettings }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.boardNameInputLabel), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "on:enter": boardViewModel.saveSettings,
+        "bind:value": boardViewModel.name
+      }
+    )))), /* @__PURE__ */ createElement("button", { "on:click": boardViewModel.hideSettings }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/View/ChatPages/boardPage.tsx

src/View/ChatPages/settingsPage.tsx

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import { Color } from "../../colors";
+import { ColorPicker } from "../Components/colorPicker";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { DeletableListItem } from "../Components/deletableListItem";
 import SettingsPageViewModel from "../../ViewModel/Pages/settingsPageViewModel";
@@ -126,28 +127,7 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
 
             <hr></hr>
 
-            <div class="flex-row gap width-input">
+            {ColorPicker(settingsPageViewModel.color)}
-              {...Object.values(Color).map((color) => {
-                const isSelected = React.createProxyState(
-                  [settingsPageViewModel.color],
-                  () => settingsPageViewModel.color.value == color
-                );
-
-                function setColor() {
-                  settingsPageViewModel.setColor(color);
-                }
-
-                return (
-                  <button
-                    color={color}
-                    class="fill-color width-100 flex"
-                    style="height: 2rem"
-                    toggle:selected={isSelected}
-                    on:click={setColor}
-                  ></button>
-                );
-              })}
-            </div>
 
             <hr></hr>
 

src/View/Components/colorPicker.tsx

@@ -0,0 +1,30 @@
+import * as React from "bloatless-react";
+
+import { Color } from "../../colors";
+
+export function ColorPicker(selectedColor: React.State<Color>) {
+  return (
+    <div class="flex-row gap width-input">
+      {...Object.values(Color).map((color) => {
+        const isSelected = React.createProxyState(
+          [selectedColor],
+          () => selectedColor.value == color
+        );
+
+        function setColor() {
+          selectedColor.value = color;
+        }
+
+        return (
+          <button
+            color={color}
+            class="fill-color width-100 flex"
+            style="height: 2rem"
+            toggle:selected={isSelected}
+            on:click={setColor}
+          ></button>
+        );
+      })}
+    </div>
+  );
+}

src/ViewModel/Chat/chatViewModel.ts

@@ -41,6 +41,11 @@ export default class ChatViewModel {
     this.taskPageViewModel.closeBoard();
   }
 
+  setColor = (color: Color): void => {
+    this.displayedColor.value = color;
+    this.chatModel.setColor(color);
+  }
+
   resetColor = (): void => {
     this.displayedColor.value = this.settingsPageViewModel.color.value;
   };

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -73,7 +73,7 @@ export default class SettingsPageViewModel {
 
   setColor = (newColor: Color): void => {
     this.color.value = newColor;
-    this.chatViewModel.chatModel.setColor(newColor);
+    this.chatViewModel.setColor(newColor);
   };
 
   remove = (): void => {
@@ -119,5 +119,9 @@ export default class SettingsPageViewModel {
         this.encryptionKeyInput.value ==
         this.chatViewModel.chatModel.info.encryptionKey
     );
+
+    this.color.subscribe((newColor) => {
+      this.setColor(newColor);
+    });
   }
 }