add chat list section

src/Model/chatModel.ts

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { UDN, isConnected, senderName } from "./model";
+import { UDN, isConnected, senderName } from "../Model/model";
 import { decryptString, encryptString } from "../cryptUtility";
 
 import { Message } from "udn-frontend";
@@ -37,6 +37,9 @@ export class Chat {
 
   // init
   constructor(id: string = React.UUID()) {
+    this.id = id;
+
+    // channels
     this.primaryChannelInput = React.restoreState(
       storageKeys.primaryChannel(id),
       ""
@@ -45,6 +48,7 @@ export class Chat {
       storageKeys.secondaryChannels(id)
     );
 
+    // messaging
     this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
     this.messages = React.restoreListState(storageKeys.messages(id));
 
@@ -54,15 +58,16 @@ export class Chat {
     );
     this.newSecondaryChannelName = new React.State("");
 
+    // guards
     this.cannotSendMessage = React.createProxyState(
       [
-        this.primaryChannelInput,
+        this.currentChannel,
         this.composingMessage,
         this.isSubscribed,
         isConnected,
       ],
       () =>
-        this.primaryChannelInput.value == "" ||
+        this.currentChannel.value == "" ||
         this.composingMessage.value == "" ||
         this.isSubscribed.value == false ||
         isConnected.value == false
@@ -108,7 +113,7 @@ export class Chat {
       ...this.secondaryChannels.value.values(),
     ].map((channel) => channel);
     const allChannelNames: string[] = [
-      this.primaryChannelInput.value,
+      this.currentChannel.value,
       ...secondaryChannelNames,
     ];
 
@@ -171,14 +176,16 @@ export class Chat {
 
 // INIT
 const chatIds = React.restoreListState<string>("chat-ids");
-const chatArray = [...chatIds.value.values()].map((id) => new Chat(id));
-export const chats = new React.ListState<Chat>(chatArray);
+export const chats = new React.ListState<Chat>();
+
+chatIds.value.forEach((id) => chats.add(new Chat(id)));
 
 // METHODS
 export function createChatWithName(name: string): void {
   const newChat = new Chat();
-  newChat.primaryChannelInput.value = name;
+  newChat.currentChannel.value = name;
   chatIds.add(newChat.id);
+  chats.add(newChat);
 }
 
 export function removeChat(chat: Chat): void {

src/Model/model.ts

@@ -1,13 +1,12 @@
 import * as React from "bloatless-react";
 
-import { Chat, chats } from "./chatModel";
+import { Chat, chats, createChatWithName } from "./chatModel";
 
 import UDNFrontend from "udn-frontend";
 
 export const UDN = new UDNFrontend();
 
 // CONNECTION
-// state
 export const isConnected = new React.State(false);
 
 export const serverAddressInput = React.restoreState("socket-address", "");
@@ -38,7 +37,7 @@ export const cannotResetAddress = React.createProxyState(
 // methods
 export function connect(): void {
   if (cannotConnect.value == true) return;
-  
+
   currentAddress.value = serverAddressInput.value;
 
   isConnected.value = false;
@@ -95,6 +94,11 @@ export function deleteMailbox(): void {
   UDN.deleteMailbox(mailboxId.value);
 }
 
+export function updateMailbox(): void {
+  deleteMailbox();
+  updateMailbox();
+}
+
 UDN.onmailboxcreate = (id) => {
   mailboxId.value = id;
   UDN.connectMailbox(id);
@@ -114,8 +118,21 @@ export const isEncryptionUnavailable = window.crypto.subtle == undefined;
 export const senderName = React.restoreState("sender-name", "");
 
 export const selectedChat = new React.State<Chat | undefined>(undefined);
+export const newChatName = new React.State("");
 
-export function closeChat() {
+export const cannotCreateChat = React.createProxyState(
+  [newChatName],
+  () => newChatName.value == ""
+);
+
+export function createChat() {
+  if (cannotCreateChat.value == true) return;
+  
+  createChatWithName(newChatName.value);
+  newChatName.value = "";
+}
+
+export function closeChatView() {
   selectedChat.value = undefined;
   document.getElementById("settings-tab")?.scrollIntoView();
 }

src/Tabs/messageTab.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { closeChat, selectedChat } from "../Model/model";
+import { closeChatView, selectedChat } from "../Model/model";
 
 import { MessageComposer } from "../Views/messageComposer";
 import { ThreadView } from "../Views/threadView";
@@ -25,7 +25,7 @@ export function MessageTab() {
       <article id="message-tab">
         <header class="padding-0">
           <span class="flex-row align-center">
-            <button aria-label={translation.back} on:click={closeChat}>
+            <button aria-label={translation.back} on:click={closeChatView}>
               <span class="icon">arrow_back</span>
             </button>
 

src/Tabs/settingsTab.tsx

@@ -1,5 +1,6 @@
 import * as React from "bloatless-react";
 
+import { ChatListSection } from "../Views/chatListSection";
 import { ConnectionSection } from "../Views/connectionSection";
 import { isConnected } from "../Model/model";
 import { translation } from "../translations";
@@ -8,7 +9,10 @@ export function SettingsTab() {
   return (
     <article id="settings-tab" toggle:connected={isConnected}>
       <header>{translation.overview}</header>
-      <div>{ConnectionSection()}</div>
+      <div class="flex-column large-gap">
+        {ConnectionSection()}
+        {ChatListSection()}
+      </div>
     </article>
   );
 }

src/Views/chatListSection.tsx

@@ -0,0 +1,62 @@
+import * as React from "bloatless-react";
+
+import { Chat, chats, removeChat } from "../Model/chatModel";
+import { cannotCreateChat, createChat, newChatName } from "../Model/model";
+
+import { translation } from "../translations";
+
+const chatConverter: React.ListItemConverter<Chat> = (chat) => {
+  function remove() {
+    removeChat(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>
+      </div>
+    </div>
+  );
+};
+
+export function ChatListSection() {
+  return (
+    <div class="flex-column">
+      <h2>{translation.chats}</h2>
+
+      <label class="tile">
+        <span class="icon">forum</span>
+        <div>
+          <span>{translation.newChatPrimaryChannel}</span>
+          <input
+            bind:value={newChatName}
+            placeholder={translation.newChatNamePlaceholder}
+            on:enter={createChat}
+          ></input>
+        </div>
+      </label>
+      <div class="flex-row justify-end">
+        <button
+          class="primary width-50"
+          toggle:disabled={cannotCreateChat}
+          on:click={createChat}
+        >
+          {translation.addChat}
+          <span class="icon">add</span>
+        </button>
+      </div>
+
+      <hr></hr>
+
+      <div class="flex-column gap" children:append={[chats, chatConverter]}></div>
+    </div>
+  );
+}

src/Views/connectionSection.tsx

@@ -19,6 +19,8 @@ import { translation } from "../translations";
 export function ConnectionSection() {
   return (
     <div class="flex-column">
+      <h2>{translation.connection}</h2>
+
       <label class="tile">
         <span class="icon">cell_tower</span>
         <div>

src/translations.ts

@@ -7,8 +7,7 @@ const englishTranslations = {
   overview: "Overview",
 
   connection: "Connection",
-  communication: "Communication",
-  encryption: "Encryption",
+  chats: "Chats",
 
   serverAddress: "Server Address",
   serverAddressPlaceholder: "wss://192.168.0.69:3000",
@@ -16,7 +15,13 @@ const englishTranslations = {
   connectToServer: "Connect",
   disconnect: "Disonnect",
   resetAddress: "Reset address",
+
+  newChatPrimaryChannel: "Primary channel",
+  newChatNamePlaceholder: "my-channel",
+  addChat: "Add",
+  removeChat: "Remove chat",
   
+  // messages
   noChatSelected: "No chat selected",
 
   primaryChannel: "Primary channel",