add sender name field

src/Tabs/overviewTab.tsx

@@ -4,6 +4,7 @@ import { isConnected, isEncryptionAvailable } from "../Model/model";
 
 import { ChatListSection } from "../Views/chatListSection";
 import { ConnectionSection } from "../Views/connectionSection";
+import { PersonalSection } from "../Views/personalSection";
 import { translation } from "../translations";
 
 export function OverviewTab() {
@@ -12,7 +13,6 @@ export function OverviewTab() {
       <header>{translation.overview}</header>
 
       <div class="flex-column large-gap">
-        
         <div class="tile error flex-no" toggle:hidden={isEncryptionAvailable}>
           <span class="icon">warning</span>
           <div>
@@ -23,6 +23,7 @@ export function OverviewTab() {
           </div>
         </div>
 
+        {PersonalSection()}
         {ConnectionSection()}
         {ChatListSection()}
       </div>

src/Views/personalSection.tsx

@@ -0,0 +1,23 @@
+import * as React from "bloatless-react";
+
+import { senderName } from "../Model/model";
+import { translation } from "../translations";
+
+export function PersonalSection() {
+  return (
+    <div class="flex-column">
+      <h2>{translation.personal}</h2>
+
+      <label class="tile">
+        <span class="icon">account_circle</span>
+        <div>
+          <span>{translation.yourName}</span>
+          <input
+            bind:value={senderName}
+            placeholder={translation.namePlaceholder}
+          ></input>
+        </div>
+      </label>
+    </div>
+  );
+}

src/translations.ts

@@ -8,9 +8,13 @@ const englishTranslations = {
   // overview
   overview: "Overview",
 
+  personal: "You",
   connection: "Connection",
   chats: "Chats",
 
+  yourName: "Your Name",
+  namePlaceholder: "Jane Doe",
+
   encryptionUnavailableTitle: "Encryption is not available",
   encryptionUnavailableMessage:
     "Obtain this app via HTTPS or continue without encryption",