add setting for secondary channels

src/View/ChatPages/settingsPage.tsx

@@ -2,9 +2,18 @@ import * as React from "bloatless-react";
 
 import ChatViewModel from "../../ViewModel/chatViewModel";
 import { Color } from "../../ViewModel/colors";
+import { DeletableListItem } from "../Components/deletableListItem";
 import { translations } from "../translations";
 
 export function SettingsPage(chatViewModel: ChatViewModel) {
+  const secondaryChannelConverter: React.StateItemConverter<string> = (
+    secondaryChannel: string
+  ) => {
+    return DeletableListItem(secondaryChannel, <span></span>, () => {
+      chatViewModel.removeSecondaryChannel(secondaryChannel);
+    });
+  };
+
   return (
     <div>
       <div class="toolbar">
@@ -36,9 +45,39 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
 
         <hr></hr>
 
+        <div class="flex-row width-input margin-bottom">
+          <input
+            aria-label={
+              translations.chatPage.settings.newSecondaryChannelAudioLabel
+            }
+            placeholder={
+              translations.chatPage.settings.newSecondaryChannelPlaceholder
+            }
+            bind:value={chatViewModel.newSecondaryChannelInput}
+            on:enter={chatViewModel.addSecondaryChannel}
+          ></input>
+          <button
+            class="primary"
+            aria-label={
+              translations.chatPage.settings.addSecondaryChannelButtonAudioLabel
+            }
+            on:click={chatViewModel.addSecondaryChannel}
+          >
+            <span class="icon">add</span>
+          </button>
+        </div>
+
         <div
-          class="flex-row gap width-input"
-        >
+          class="flex-column gap width-input"
+          children:append={[
+            chatViewModel.secondaryChannels,
+            secondaryChannelConverter,
+          ]}
+        ></div>
+
+        <hr></hr>
+
+        <div class="flex-row gap width-input">
           {...Object.values(Color).map((color) => {
             const isSelected = React.createProxyState(
               [chatViewModel.color],

src/View/chatPage.css

@@ -100,7 +100,7 @@
 }
 
 #chat-page #ribbon > span {
-    width: 100%;
+  width: 100%;
 }
 
 #chat-page #ribbon button,

src/View/translations.ts

@@ -87,6 +87,10 @@ const englishTranslations = {
 
       primaryChannelLabel: "Primary channel",
       setPrimaryChannelButtonAudioLabel: "set primary channel",
+
+      newSecondaryChannelPlaceholder: "Add secondary channel",
+      newSecondaryChannelAudioLabel: "name of new secondary channel",
+      addSecondaryChannelButtonAudioLabel: "add secondary channel",
     }
   },
 };

src/ViewModel/chatViewModel.tsx

@@ -17,6 +17,9 @@ export default class ChatViewModel {
   primaryChannel: React.State<string> = new React.State("");
   primaryChannelInput: React.State<string> = new React.State("");
 
+  secondaryChannels: React.ListState<string> = new React.ListState();
+  newSecondaryChannelInput: React.State<string> = new React.State("");
+
   color: React.State<Color> = new React.State<Color>(Color.Standard);
 
   selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
@@ -50,12 +53,29 @@ export default class ChatViewModel {
     this.chatModel.setPrimaryChannel(this.primaryChannelInput.value);
     this.primaryChannel.value = this.chatModel.info.primaryChannel;
     this.chatListViewModel.updateIndices();
+  };
+
+  addSecondaryChannel = (): void => {
+    this.secondaryChannels.add(this.newSecondaryChannelInput.value);
+    this.newSecondaryChannelInput.value = "";
+    this.storeSecondaryChannels();
+  };
+
+  removeSecondaryChannel = (secondaryChannel: string): void => {
+    this.secondaryChannels.remove(secondaryChannel);
+    this.storeSecondaryChannels();
+  };
+
+  storeSecondaryChannels = (): void => {
+    this.chatModel.setSecondaryChannels([
+      ...this.secondaryChannels.value.values(),
+    ]);
   }
 
   setColor = (newColor: Color): void => {
     this.color.value = newColor;
     this.chatModel.setColor(newColor);
-  }
+  };
 
   // restore
   restorePageSelection = (): void => {
@@ -78,7 +98,11 @@ 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.restorePageSelection();