add setting for primary channel

src/Model/chatModel.ts

@@ -47,6 +47,7 @@ export class ChatModel {
   setPrimaryChannel = (primaryChannel: string): void => {
     this.info.primaryChannel = primaryChannel;
     this.storeInfo();
+    this.chatListModel.updateIndices();
   };
 
   setSecondaryChannels = (secondaryChannels: string[]): void => {

src/View/ChatPages/settingsPage.tsx

@@ -9,6 +9,30 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
       <div class="toolbar">
         <span>{translations.chatPage.settings.settingsHeadline}</span>
       </div>
+      <div class="content">
+        <label class="tile flex-no">
+          <div>
+            <span>{translations.chatPage.settings.primaryChannelLabel}</span>
+            <input
+              bind:value={chatViewModel.primaryChannelInput}
+              on:enter={chatViewModel.setPrimaryChannel}
+            ></input>
+          </div>
+        </label>
+        <div class="flex-row justify-end width-input">
+          <button
+            class="width-50"
+            aria-label={
+              translations.chatPage.settings.setPrimaryChannelButtonAudioLabel
+            }
+            on:click={chatViewModel.setPrimaryChannel}
+            toggle:disabled={chatViewModel.cannotSetPrimaryChannel}
+          >
+            {translations.general.setButton}
+            <span class="icon">check</span>
+          </button>
+        </div>
+      </div>
     </div>
   );
 }

src/View/chatPage.css

@@ -53,6 +53,8 @@
 
 #chat-page #main .content {
   overflow: auto;
+
+  padding: var(--content-padding);
 }
 
 #chat-page #ribbon,

src/View/homePage.tsx

@@ -106,8 +106,9 @@ export function HomePage(
           class="width-50"
           on:click={settingsViewModel.setName}
           toggle:disabled={settingsViewModel.cannotSetName}
+          aria-label={translations.homePage.setNameButtonAudioLabel}
         >
-          {translations.homePage.setNameButton}
+          {translations.general.setButton}
           <span class="icon">check</span>
         </button>
       </div>

src/View/translations.ts

@@ -2,6 +2,8 @@ const englishTranslations = {
   general: {
     closeButtonAudioLabel: "close",
     deleteItemButtonAudioLabel: "delete item",
+    
+    setButton: "Set",
   },
 
   regional: {
@@ -43,7 +45,7 @@ const englishTranslations = {
 
     yourNameLabel: "Your name",
     yourNamePlaceholder: "Jane Doe",
-    setNameButton: "Set",
+    setNameButtonAudioLabel: "set name",
 
     firstDayOfWeekLabel: "First day of week",
 
@@ -82,6 +84,9 @@ const englishTranslations = {
 
     settings: {
       settingsHeadline: "Settings",
+
+      primaryChannelLabel: "Primary channel",
+      setPrimaryChannelButtonAudioLabel: "set primary channel",
     }
   },
 };

src/ViewModel/chatListViewModel.tsx

@@ -32,6 +32,12 @@ export default class ChatListViewModel {
     return this.sortedPrimaryChannels.indexOf(chat.primaryChannel.value);
   }
 
+  updateIndices = (): void => {
+    for (const chatViewModel of this.chatViewModels.value) {
+      chatViewModel.updateIndex();
+    }
+  }
+
   // methods
   createChat = (): void => {
     const chatModel: ChatModel = this.chatListModel.createChat(

src/ViewModel/chatViewModel.tsx

@@ -43,6 +43,12 @@ export default class ChatViewModel {
     this.chatListViewModel.closeChat();
   };
 
+  setPrimaryChannel = (): void => {
+    this.chatModel.setPrimaryChannel(this.primaryChannelInput.value);
+    this.primaryChannel.value = this.chatModel.info.primaryChannel;
+    this.chatListViewModel.updateIndices();
+  }
+
   // restore
   restorePageSelection = (): void => {
     const path: string[] = storageKeys.chatLastUsedPage(this.chatModel.id);