improve ui

dist/index.css

@@ -92,11 +92,13 @@ main {
 /* src/colors.css */
 [color]:not([color=standard]) {
   --primary: hsl(var(--hue), 100%, var(--accent-luma));
+  --text-on-color: hsl(0, 0%, var(--accent-text-luma));
   --link: hsl(var(--hue), 100%, var(--accent-luma));
 }
 @media (prefers-color-scheme: dark) {
   [color]:not([color=standard]) {
     --accent-luma: var(--accent-luma-dark);
+    --accent-text-luma: var(--accent-text-luma-dark);
   }
 }
 [color]:not([color=standard]).tile {
@@ -136,31 +138,43 @@ main {
   --hue: 20;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 100%;
 }
 [color=yellow] {
   --hue: 50;
   --accent-luma: 50%;
   --accent-luma-dark: 60%;
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 0%;
 }
 [color=mint] {
   --hue: 150;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 0%;
 }
 [color=lightblue] {
   --hue: 180;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 0%;
 }
 [color=blue] {
   --hue: 220;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 100%;
 }
 [color=purple] {
   --hue: 280;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 100%;
 }
 
 /* src/View/chatPage.css */

dist/index.js

@@ -239,6 +239,9 @@
   function parse(string) {
     return JSON.parse(string);
   }
+  function localeCompare(a, b) {
+    return a.localeCompare(b);
+  }
 
   // src/Model/Utility/typeSafety.ts
   var DATA_VERSION = "v2";
@@ -539,7 +542,7 @@
       for (const chatModel of this.chatModels) {
         allChannels.push(chatModel.info.primaryChannel);
       }
-      this.sortedPrimaryChannels = allChannels.sort((a, b) => a.localeCompare(b));
+      this.sortedPrimaryChannels = allChannels.sort(localeCompare);
     };
     // restore
     loadChats = () => {
@@ -598,6 +601,7 @@
       this.secondaryChannels.add(this.newSecondaryChannelInput.value);
       this.newSecondaryChannelInput.value = "";
       this.storeSecondaryChannels();
+      this.restoreSecondaryChannels();
     };
     removeSecondaryChannel = (secondaryChannel) => {
       this.secondaryChannels.remove(secondaryChannel);
@@ -623,6 +627,12 @@
         this.storageModel.store(path, newPage);
       });
     };
+    restoreSecondaryChannels = () => {
+      this.secondaryChannels.clear();
+      for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(localeCompare)) {
+        this.secondaryChannels.add(secondaryChannel);
+      }
+    };
     // init
     constructor(chatListViewModel2, chatModel) {
       this.chatModel = chatModel;
@@ -630,10 +640,8 @@
       this.chatListViewModel = chatListViewModel2;
       this.primaryChannel.value = chatModel.info.primaryChannel;
       this.primaryChannelInput.value = chatModel.info.primaryChannel;
-      for (const secondaryChannel of chatModel.info.secondaryChannels) {
-        this.secondaryChannels.add(secondaryChannel);
-      }
       this.color.value = chatModel.color;
+      this.restoreSecondaryChannels();
       this.restorePageSelection();
       this.updateIndex();
     }

dist/styles.css

@@ -215,7 +215,7 @@ button.ghost:active {
 /* danger button */
 button.danger {
   background: var(--danger);
-  color: var(--text-on-color);
+  color: white;
 }
 @media (hover: hover) {
   button.danger:hover {

src/Model/Utility/utility.ts

@@ -11,3 +11,8 @@ export function stringify(data: any): string {
 export function parse(string: string): any {
   return JSON.parse(string);
 }
+
+// sort
+export function localeCompare(a: string, b: string): number {
+  return a.localeCompare(b);
+}

src/Model/chatListModel.ts

@@ -1,6 +1,7 @@
 import StorageModel, { storageKeys } from "./storageModel";
 
 import { ChatModel } from "./chatModel";
+import { localeCompare } from "./Utility/utility";
 import { v4 } from "uuid";
 
 export default class ChatListModel {
@@ -40,7 +41,7 @@ export default class ChatListModel {
       allChannels.push(chatModel.info.primaryChannel);
     }
 
-    this.sortedPrimaryChannels = allChannels.sort((a, b) => a.localeCompare(b));
+    this.sortedPrimaryChannels = allChannels.sort(localeCompare);
   };
 
   // restore

src/ViewModel/chatViewModel.tsx

@@ -5,6 +5,7 @@ import StorageModel, { storageKeys } from "../Model/storageModel";
 import ChatListViewModel from "./chatListViewModel";
 import { ChatModel } from "../Model/chatModel";
 import { Color } from "./colors";
+import { localeCompare } from "../Model/Utility/utility";
 
 export default class ChatViewModel {
   chatModel: ChatModel;
@@ -59,6 +60,7 @@ export default class ChatViewModel {
     this.secondaryChannels.add(this.newSecondaryChannelInput.value);
     this.newSecondaryChannelInput.value = "";
     this.storeSecondaryChannels();
+    this.restoreSecondaryChannels();
   };
 
   removeSecondaryChannel = (secondaryChannel: string): void => {
@@ -70,7 +72,7 @@ export default class ChatViewModel {
     this.chatModel.setSecondaryChannels([
       ...this.secondaryChannels.value.values(),
     ]);
-  }
+  };
 
   setColor = (newColor: Color): void => {
     this.color.value = newColor;
@@ -90,6 +92,13 @@ export default class ChatViewModel {
     });
   };
 
+  restoreSecondaryChannels = (): void => {
+    this.secondaryChannels.clear();
+    for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(localeCompare)) {
+      this.secondaryChannels.add(secondaryChannel);
+    }
+  };
+
   // init
   constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) {
     this.chatModel = chatModel;
@@ -99,12 +108,9 @@ export default class ChatViewModel {
     this.primaryChannel.value = chatModel.info.primaryChannel;
     this.primaryChannelInput.value = chatModel.info.primaryChannel;
 
-    for (const secondaryChannel of chatModel.info.secondaryChannels) {
-      this.secondaryChannels.add(secondaryChannel);
-    }
-
     this.color.value = chatModel.color;
 
+    this.restoreSecondaryChannels();
     this.restorePageSelection();
     this.updateIndex();
   }

src/colors.css

@@ -1,12 +1,14 @@
 /* basic */
 [color]:not([color="standard"]) {
   --primary: hsl(var(--hue), 100%, var(--accent-luma));
+  --text-on-color: hsl(0, 0%, var(--accent-text-luma));
   --link: hsl(var(--hue), 100%, var(--accent-luma));
 }
 
 @media (prefers-color-scheme: dark) {
   [color]:not([color="standard"]) {
     --accent-luma: var(--accent-luma-dark);
+    --accent-text-luma: var(--accent-text-luma-dark);
   }
 }
 
@@ -57,36 +59,60 @@
 /* definitions */
 [color="coral"] {
   --hue: 20;
+
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
+
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 100%;
 }
 
 [color="yellow"] {
   --hue: 50;
+
   --accent-luma: 50%;
   --accent-luma-dark: 60%;
+
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 0%;
 }
 
 [color="mint"] {
   --hue: 150;
+
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
+
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 0%;
 }
 
 [color="lightblue"] {
   --hue: 180;
+
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
+
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 0%;
 }
 
 [color="blue"] {
   --hue: 220;
+
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
+
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 100%;
 }
 
 [color="purple"] {
   --hue: 280;
+
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
+
+  --accent-text-luma: 100%;
+  --accent-text-luma-dark: 100%;
 }