add colors

src/Model/chatModel.ts

@@ -3,6 +3,7 @@
 import StorageModel, { storageKeys } from "./storageModel";
 
 import ChatListModel from "./chatListModel";
+import { Color } from "../ViewModel/colors";
 import { checkIsValidObject } from "./Utility/typeSafety";
 import { createTimestamp } from "./Utility/utility";
 import { v4 } from "uuid";
@@ -13,6 +14,7 @@ export class ChatModel {
   storageModel: StorageModel;
   chatListModel: ChatListModel;
   info: ChatInfo;
+  color: Color;
 
   messages = new Set<ChatMessage>();
   objects = new Map<string, ChatObject>();
@@ -23,6 +25,10 @@ export class ChatModel {
     return storageKeys.chatInfo(this.id);
   }
 
+  get colorPath(): string[] {
+    return storageKeys.chatColor(this.id);
+  }
+
   get messageDirPath(): string[] {
     return storageKeys.chatMessages(this.id);
   }
@@ -55,11 +61,20 @@ export class ChatModel {
     this.storeInfo();
   };
 
+  setColor = (color: Color): void => {
+    this.color = color;
+    this.storeColor();
+  };
+
   // store & add
   storeInfo = (): void => {
     this.storageModel.storeStringifiable(this.infoPath, this.info);
   };
 
+  storeColor = (): void => {
+    this.storageModel.store(this.colorPath, this.color);
+  };
+
   addMessage = (message: ChatMessage): void => {
     if (!this.messages.has(message)) {
       this.messages.add(message);
@@ -81,7 +96,7 @@ export class ChatModel {
     this.chatListModel.untrackChat(this);
 
     // delete
-    const dirPath = [...storageKeys.chats, this.id];
+    const dirPath: string[] = [...storageKeys.chats, this.id];
     this.storageModel.removeRecursive(dirPath);
   };
 
@@ -89,9 +104,19 @@ export class ChatModel {
   restoreInfo = (): void => {
     const info: any = this.storageModel.restoreStringifiable(this.infoPath);
     if (info != null) {
-      this.info = info
+      this.info = info;
     } else {
-      this.info = generateChatInfo("0")
+      this.info = generateChatInfo("0");
+    }
+  };
+
+  restoreColor = (): void => {
+    const path: string[] = this.colorPath;
+    const color: string | null = this.storageModel.restore(path);
+    if (!color) {
+      this.color = Color.Standard;
+    } else {
+      this.color = color as any;
     }
   };
 
@@ -135,12 +160,17 @@ export class ChatModel {
   };
 
   // init
-  constructor(storageModel: StorageModel, chatListModel: ChatListModel, chatId: string) {
+  constructor(
+    storageModel: StorageModel,
+    chatListModel: ChatListModel,
+    chatId: string
+  ) {
     this.id = chatId;
     this.storageModel = storageModel;
     this.chatListModel = chatListModel;
 
     this.restoreInfo();
+    this.restoreColor();
   }
 }
 

src/Model/storageModel.ts

@@ -146,6 +146,7 @@ export const storageKeys = {
   chats: [DATA_VERSION, "chat"],
   chatInfo: (id: string) => [DATA_VERSION, "chat", id, "info"],
   chatLastUsedPage: (id: string) => [DATA_VERSION, "chat", id, "last-used-page"],
+  chatColor: (id: string) => [DATA_VERSION, "chat", id, "color"],
   chatMessages: (id: string) => [DATA_VERSION, "chat", id, "messages"],
   chatObjects: (id: string) => [DATA_VERSION, "chat", id, "objects"],
   chatOutbox: (id: string) => [DATA_VERSION, "chat", id, "outbox"],

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}

src/ViewModel/chatViewModel.tsx

@@ -4,6 +4,7 @@ import StorageModel, { storageKeys } from "../Model/storageModel";
 
 import ChatListViewModel from "./chatListViewModel";
 import { ChatModel } from "../Model/chatModel";
+import { Color } from "./colors";
 
 export default class ChatViewModel {
   chatModel: ChatModel;
@@ -16,6 +17,8 @@ export default class ChatViewModel {
   primaryChannel: React.State<string> = new React.State("");
   primaryChannelInput: React.State<string> = new React.State("");
 
+  color: React.State<Color> = new React.State<Color>(Color.Standard);
+
   selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
     ChatPageType.Messages
   );
@@ -49,6 +52,11 @@ export default class ChatViewModel {
     this.chatListViewModel.updateIndices();
   }
 
+  setColor = (newColor: Color): void => {
+    this.color.value = newColor;
+    this.chatModel.setColor(newColor);
+  }
+
   // restore
   restorePageSelection = (): void => {
     const path: string[] = storageKeys.chatLastUsedPage(this.chatModel.id);
@@ -70,6 +78,8 @@ export default class ChatViewModel {
 
     this.primaryChannel.value = chatModel.info.primaryChannel;
     this.primaryChannelInput.value = chatModel.info.primaryChannel;
+    
+    this.color.value = chatModel.color;
 
     this.restorePageSelection();
     this.updateIndex();

src/ViewModel/colors.ts

@@ -0,0 +1,9 @@
+export enum Color {
+  Standard = "standard",
+  Coral = "coral",
+  Yellow = "yellow",
+  Mint = "mint",
+  LightBlue = "lightblue",
+  Blue = "blue",
+  purple = "purple",
+}

src/colors.css

@@ -0,0 +1,62 @@
+[color]:not([color="standard"]) {
+  --primary: hsl(var(--hue), 100%, 80%);
+
+  --gradient-luma-1: 70%;
+  --gradient-luma-2: 90%;
+
+  --hover-luma: 75%;
+  --active-luma: 80%;
+
+  --text-luma: 20%;
+
+  --surface: linear-gradient(
+    120deg,
+    hsl(var(--hue), 100%, var(--gradient-luma-1)),
+    hsl(var(--hue), 100%, var(--gradient-luma-2))
+  );
+  --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
+  --surface-active: hsl(var(--hue), 100%, var(--active-luma));
+
+  --text-normal: hsl(var(--hue), 100%, var(--text-luma));
+}
+
+@media (prefers-color-scheme: dark) {
+  [color]:not([color="standard"]) {
+    --gradient-luma-1: 20%;
+    --gradient-luma-2: 15%;
+
+    --hover-luma: 25%;
+    --active-luma: 30%;
+
+    --text-luma: 90%;
+  }
+}
+
+[color]:not([color="standard"]).fill-color {
+  color: white;
+  background-color: var(--primary);
+}
+
+[color="coral"] {
+  --hue: 20;
+}
+
+[color="yellow"] {
+  --hue: 50;
+}
+
+[color="mint"] {
+  --hue: 150;
+}
+
+[color="lightblue"] {
+  --hue: 180;
+}
+
+[color="blue"] {
+  --hue: 220;
+}
+
+[color="purple"] {
+  --hue: 280;
+}

src/index.tsx

@@ -1,4 +1,5 @@
 import "./base.css";
+import "./colors.css";
 
 import * as React from "bloatless-react";