From a2a135af0cf0f01be00f2dd4db34c5fa6d063adc Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Tue, 9 Jul 2024 17:27:15 +0200
Subject: [PATCH] add sender name field

---
 dist/index.js                 | 16 +++++++++++++++-
 src/Tabs/overviewTab.tsx      |  3 ++-
 src/Views/personalSection.tsx | 23 +++++++++++++++++++++++
 src/translations.ts           |  4 ++++
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/Views/personalSection.tsx

diff --git a/dist/index.js b/dist/index.js
index 8b7b04cd..621e5d78 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -711,8 +711,11 @@
     close: "Close",
     // 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",
     serverAddress: "Server Address",
@@ -1007,9 +1010,20 @@
     )));
   }
 
+  // src/Views/personalSection.tsx
+  function PersonalSection() {
+    return /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("h2", null, translation.personal), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.yourName), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": senderName,
+        placeholder: translation.namePlaceholder
+      }
+    ))));
+  }
+
   // src/Tabs/overviewTab.tsx
   function OverviewTab() {
-    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.overview), /* @__PURE__ */ createElement("div", { class: "flex-column large-gap" }, /* @__PURE__ */ createElement("div", { class: "tile error flex-no", "toggle:hidden": isEncryptionAvailable }, /* @__PURE__ */ createElement("span", { class: "icon" }, "warning"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.encryptionUnavailableTitle), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.encryptionUnavailableMessage))), ConnectionSection(), ChatListSection()));
+    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.overview), /* @__PURE__ */ createElement("div", { class: "flex-column large-gap" }, /* @__PURE__ */ createElement("div", { class: "tile error flex-no", "toggle:hidden": isEncryptionAvailable }, /* @__PURE__ */ createElement("span", { class: "icon" }, "warning"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.encryptionUnavailableTitle), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.encryptionUnavailableMessage))), PersonalSection(), ConnectionSection(), ChatListSection()));
   }
 
   // src/index.tsx
diff --git a/src/Tabs/overviewTab.tsx b/src/Tabs/overviewTab.tsx
index ffd0938c..e94b48ee 100644
--- a/src/Tabs/overviewTab.tsx
+++ b/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>
diff --git a/src/Views/personalSection.tsx b/src/Views/personalSection.tsx
new file mode 100644
index 00000000..331e2e03
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/translations.ts b/src/translations.ts
index 4999895b..0236e060 100644
--- a/src/translations.ts
+++ b/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",