finish chat so far

src/Views/chatListSection.tsx

@@ -1,29 +1,34 @@
 import * as React from "bloatless-react";
 
-import { Chat, chats, removeChat } from "../Model/chatModel";
-import { cannotCreateChat, createChat, newChatName } from "../Model/model";
+import { Chat, removeChat } from "../Model/chatModel";
+import {
+  cannotCreateChat,
+  chats,
+  createChat,
+  newChatName,
+  selectChat,
+  selectedChat,
+} from "../Model/model";
 
 import { translation } from "../translations";
 
 const chatConverter: React.ListItemConverter<Chat> = (chat) => {
-  function remove() {
-    removeChat(chat);
+  function select() {
+    selectChat(chat);
   }
 
+  const isSelected = React.createProxyState(
+    [selectedChat],
+    () => selectedChat.value == chat
+  );
+
   return (
-    <div class="tile padding-0">
-      <div class="flex-row width-100 justify-apart align-center">
-        <span class="padding-h ellipsis" subscribe:innerText={chat.currentChannel}></span>
-        
-        <button
-          class="danger"
-          aria-label={translation.removeChat}
-          on:click={remove}
-        >
-          <span class="icon">delete</span>
-        </button>
+    <button class="tile" on:click={select} toggle:selected={isSelected}>
+      <div>
+        <b class="ellipsis" subscribe:innerText={chat.primaryChannel}></b>
       </div>
-    </div>
+      <span class="icon">arrow_forward</span>
+    </button>
   );
 };
 
@@ -56,7 +61,10 @@ export function ChatListSection() {
 
       <hr></hr>
 
-      <div class="flex-column gap" children:append={[chats, chatConverter]}></div>
+      <div
+        class="flex-column gap"
+        children:append={[chats, chatConverter]}
+      ></div>
     </div>
   );
 }

src/Views/chatOptionModal.tsx

@@ -0,0 +1,119 @@
+import * as React from "bloatless-react";
+
+import { Chat } from "../Model/chatModel";
+import { translation } from "../translations";
+
+export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
+  function closeModal() {
+    isPresented.value = false;
+  }
+
+  const secondaryChannelConverter: React.ListItemConverter<string> = (
+    secondaryChannel
+  ) => {
+    function remove() {
+      chat.removeSecondaryChannel(secondaryChannel);
+    }
+
+    return (
+      <div class="tile width-input padding-0">
+        <div class="flex-row justify-apart align-center">
+          <b class="padding-h">{secondaryChannel}</b>
+          <button
+            class="danger"
+            aria-label={translation.removeSecondaryChannel}
+            on:click={remove}
+          >
+            <span class="icon">delete</span>
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translation.configureChatTitle}</h2>
+
+          <div>
+            <label class="tile">
+              <span class="icon">forum</span>
+              <div>
+                <span>{translation.primaryChannel}</span>
+                <input
+                  bind:value={chat.primaryChannelInput}
+                  placeholder={translation.primaryChannelPlaceholder}
+                  on:enter={chat.setChannel}
+                ></input>
+              </div>
+            </label>
+            <div class="flex-row width-input">
+              <button
+                aria-label={translation.undoChanges}
+                class="flex justify-center"
+                on:click={chat.undoChannelChange}
+                toggle:disabled={chat.cannotUndoChannel}
+              >
+                <span class="icon">undo</span>
+              </button>
+              <button
+                aria-label={translation.set}
+                class="flex justify-center primary"
+                on:click={chat.setChannel}
+                toggle:disabled={chat.cannotSetChannel}
+              >
+                <span class="icon">check</span>
+              </button>
+            </div>
+          </div>
+
+          <hr></hr>
+
+          <div class="flex-row margin-bottom width-input">
+            <input
+              aria-label={translation.secondaryChannel}
+              placeholder={translation.secondaryChannelPlaceholder}
+              bind:value={chat.newSecondaryChannelName}
+              on:enter={chat.addSecondaryChannel}
+            ></input>
+            <button
+              class="primary"
+              toggle:disabled={chat.cannotAddSecondaryChannel}
+              aria-label={translation.addSecondaryChannel}
+              on:click={chat.addSecondaryChannel}
+            >
+              <span class="icon">add</span>
+            </button>
+          </div>
+
+          <div
+            class="flex-column gap"
+            children:prepend={[
+              chat.secondaryChannels,
+              secondaryChannelConverter,
+            ]}
+          ></div>
+
+          <hr></hr>
+
+          <label class="tile">
+            <span class="icon">key</span>
+            <div>
+              <span>{translation.encryptionKey}</span>
+              <input
+                placeholder={translation.encryptionKeyPlaceholder}
+                bind:value={chat.encryptionKey}
+              ></input>
+            </div>
+          </label>
+        </main>
+        <button class="danger" on:click={closeModal}>
+          {translation.close}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/Views/connectionSection.tsx

@@ -43,7 +43,7 @@ export function ConnectionSection() {
         </button>
         <button
           class="width-100 flex-1 justify-center"
-          aria-label={translation.resetAddress}
+          aria-label={translation.undoChanges}
           on:click={resetAddressInput}
           toggle:disabled={cannotResetAddress}
         >

src/Views/threadView.tsx

@@ -44,7 +44,7 @@ export function ThreadView(chat: Chat) {
             </span>
           </div>
           <div class="flex-column padding-h padding-bottom">
-            <b class="break-word" subscribe:innerText={message.body}></b>
+            <b class="break-word">{message.body}</b>
             <span class="secondary">
               {new Date(message.isoDate).toLocaleString()}
             </span>