add colors

src/View/ChatPages/settingsPage.tsx

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import ChatViewModel from "../../ViewModel/chatViewModel";
+import { Color } from "../../ViewModel/colors";
 import { translations } from "../translations";
 
 export function SettingsPage(chatViewModel: ChatViewModel) {
@@ -32,6 +33,33 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
             <span class="icon">check</span>
           </button>
         </div>
+
+        <hr></hr>
+
+        <div
+          class="flex-row gap width-input"
+        >
+          {...Object.values(Color).map((color) => {
+            const isSelected = React.createProxyState(
+              [chatViewModel.color],
+              () => chatViewModel.color.value == color
+            );
+
+            function setColor() {
+              chatViewModel.setColor(color);
+            }
+
+            return (
+              <button
+                color={color}
+                class="fill-color width-100 flex"
+                style="height: 2rem"
+                toggle:selected={isSelected}
+                on:click={setColor}
+              ></button>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

src/View/Components/chatEntry.tsx

@@ -6,7 +6,7 @@ import ChatViewModel from "../../ViewModel/chatViewModel";
 
 export function ChatEntry(chatViewModel: ChatViewModel) {
   const view = (
-    <button class="chat-entry tile" on:click={chatViewModel.open}>
+    <button set:color={chatViewModel.color} class="chat-entry tile" on:click={chatViewModel.open}>
       <span
         class="shadow"
         subscribe:innerText={chatViewModel.primaryChannel}