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 {