From bb096e1443b1bc9218266ab6ec3f823f3423ee14 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Thu, 9 Apr 2026 15:45:19 +0000
Subject: [PATCH] add settings pane for info

---
 dist/index.js                            | 65 +++++++++++++++---------
 src/View/Components/infoTile.tsx         | 22 +++++---
 src/View/Components/splitModal.css       |  2 +-
 src/View/Components/splitModal.tsx       |  5 +-
 src/View/Modals/chatMessageInfoModal.tsx | 24 +++++++--
 src/View/Modals/settingsModal.tsx        | 40 +++++++++++----
 src/View/translations.ts                 |  8 ++-
 7 files changed, 118 insertions(+), 48 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 6ff4e3b8..865ced7b 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2754,7 +2754,8 @@
         appearance: "Appearance",
         regional: "Language+Region",
         info: "About Comms"
-      }
+      },
+      version: "Version"
     },
     connectionModal: {
       connectionModalHeadline: "Manage Connections",
@@ -4097,6 +4098,17 @@
     ));
   }
 
+  // src/View/Components/infoTile.tsx
+  function InfoTile(icon, label, content) {
+    let contentState;
+    if (typeof content == "string") {
+      contentState = new State(content);
+    } else {
+      contentState = content;
+    }
+    return /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, label), /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": contentState })));
+  }
+
   // src/View/Modals/chatMessageInfoModal.tsx
   function ChatMessageInfoModal(chatMessageViewModel) {
     return /* @__PURE__ */ createElement(
@@ -4105,13 +4117,7 @@
         class: "modal",
         "toggle:open": chatMessageViewModel.isPresentingInfoModal
       },
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement(
-        "b",
-        {
-          class: "break-word",
-          "subscribe:innerText": chatMessageViewModel.body
-        }
-      )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, InfoTile("account_circle", translations.chatPage.message.sentBy, chatMessageViewModel.sender), InfoTile("schedule", translations.chatPage.message.timeSent, chatMessageViewModel.dateSent), InfoTile("forum", translations.chatPage.message.channel, chatMessageViewModel.channel), InfoTile("description", translations.chatPage.message.messageContent, chatMessageViewModel.body)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
     );
   }
 
@@ -6252,13 +6258,20 @@
 
   // src/View/Components/splitModal.tsx
   function SplitModal(leftView, rightView, scrollButtonLabel, extendedStyle = false, navigationState) {
-    const view = /* @__PURE__ */ createElement("div", { class: "split-modal", "toggle:extended": extendedStyle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper", "toggle:hidden": navigationState != void 0 }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
-      "span",
+    const view = /* @__PURE__ */ createElement("div", { class: "split-modal", "toggle:extended": extendedStyle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement(
+      "div",
       {
-        class: "ellipsis",
-        "subscribe:innerText": scrollButtonLabel
-      }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView }));
+        class: "detail-button-wrapper",
+        "toggle:hidden": navigationState != void 0
+      },
+      /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
+        "span",
+        {
+          class: "ellipsis",
+          "subscribe:innerText": scrollButtonLabel
+        }
+      ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))
+    )), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView }));
     function scrollToDetails() {
       view.scrollLeft = view.scrollWidth;
     }
@@ -6608,16 +6621,19 @@
 
   // src/View/Modals/settingsModal.tsx
   function SettingsModal(settingsViewModel2) {
-    const detailView = createProxyState([settingsViewModel2.selectedModalPage], () => {
-      switch (settingsViewModel2.selectedModalPage.value) {
-        case 0 /* Appearance */:
-          return /* @__PURE__ */ createElement("div", null, "Appearance");
-        case 1 /* Regional */:
-          return /* @__PURE__ */ createElement("div", null, "Regional");
-        case 2 /* Info */:
-          return /* @__PURE__ */ createElement("div", null, "Info");
+    const detailView = createProxyState(
+      [settingsViewModel2.selectedModalPage],
+      () => {
+        switch (settingsViewModel2.selectedModalPage.value) {
+          case 0 /* Appearance */:
+            return /* @__PURE__ */ createElement("div", null, "Appearance");
+          case 1 /* Regional */:
+            return /* @__PURE__ */ createElement("div", null, "Regional");
+          case 2 /* Info */:
+            return SettingsInfoPane(settingsViewModel2);
+        }
       }
-    });
+    );
     return /* @__PURE__ */ createElement(
       "div",
       {
@@ -6662,6 +6678,9 @@
       label
     );
   }
+  function SettingsInfoPane(settingsViewModel2) {
+    return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.appName), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, InfoTile("build", translations.settings.version, settingsViewModel2.coreViewModel.BUILD)));
+  }
 
   // src/index.tsx
   var storageModel = new StorageModel();
diff --git a/src/View/Components/infoTile.tsx b/src/View/Components/infoTile.tsx
index 4c5e3223..856dc58f 100644
--- a/src/View/Components/infoTile.tsx
+++ b/src/View/Components/infoTile.tsx
@@ -1,18 +1,24 @@
 import * as React from "bloatless-react";
 
-export function InfoTile(icon: string, label: string, content: string|React.State<string>) {
-    let contentState: React.State<string>
+export function InfoTile(
+    icon: string,
+    label: string,
+    content: string | React.State<string>,
+) {
+    let contentState: React.State<string>;
     if (typeof content == "string") {
         contentState = new React.State(content);
     } else {
         contentState = content;
     }
 
-    return <div class="tile">
-        <span class="icon">{icon}</span>
-        <div>
-            <span>{label}</span>
-            <b class="break-word" subscribe:innerText={contentState}></b>
+    return (
+        <div class="tile">
+            <span class="icon">{icon}</span>
+            <div>
+                <span>{label}</span>
+                <b class="break-word" subscribe:innerText={contentState}></b>
+            </div>
         </div>
-    </div>;
+    );
 }
diff --git a/src/View/Components/splitModal.css b/src/View/Components/splitModal.css
index a35679d0..0e80d726 100644
--- a/src/View/Components/splitModal.css
+++ b/src/View/Components/splitModal.css
@@ -1,4 +1,4 @@
-.modal>div:has(.split-modal[extended]) {
+.modal > div:has(.split-modal[extended]) {
     max-width: 64rem;
 }
 
diff --git a/src/View/Components/splitModal.tsx b/src/View/Components/splitModal.tsx
index 2ff62d20..5fbe3dc1 100644
--- a/src/View/Components/splitModal.tsx
+++ b/src/View/Components/splitModal.tsx
@@ -13,7 +13,10 @@ export function SplitModal(
         <div class="split-modal" toggle:extended={extendedStyle}>
             <div>
                 <div class="scroll-area" children:set={leftView}></div>
-                <div class="detail-button-wrapper" toggle:hidden={navigationState != undefined}>
+                <div
+                    class="detail-button-wrapper"
+                    toggle:hidden={navigationState != undefined}
+                >
                     <button class="ghost" on:click={scrollToDetails}>
                         <span
                             class="ellipsis"
diff --git a/src/View/Modals/chatMessageInfoModal.tsx b/src/View/Modals/chatMessageInfoModal.tsx
index cad1c1d6..855aad4e 100644
--- a/src/View/Modals/chatMessageInfoModal.tsx
+++ b/src/View/Modals/chatMessageInfoModal.tsx
@@ -18,10 +18,26 @@ export function ChatMessageInfoModal(
                     <h2>{translations.chatPage.message.messageInfoHeadline}</h2>
 
                     <div class="flex-column gap">
-                        {InfoTile("account_circle", translations.chatPage.message.sentBy, chatMessageViewModel.sender)}
-                        {InfoTile("schedule", translations.chatPage.message.timeSent, chatMessageViewModel.dateSent)}
-                        {InfoTile("forum", translations.chatPage.message.channel, chatMessageViewModel.channel)}
-                        {InfoTile("description", translations.chatPage.message.messageContent, chatMessageViewModel.body)}
+                        {InfoTile(
+                            "account_circle",
+                            translations.chatPage.message.sentBy,
+                            chatMessageViewModel.sender,
+                        )}
+                        {InfoTile(
+                            "schedule",
+                            translations.chatPage.message.timeSent,
+                            chatMessageViewModel.dateSent,
+                        )}
+                        {InfoTile(
+                            "forum",
+                            translations.chatPage.message.channel,
+                            chatMessageViewModel.channel,
+                        )}
+                        {InfoTile(
+                            "description",
+                            translations.chatPage.message.messageContent,
+                            chatMessageViewModel.body,
+                        )}
                     </div>
 
                     <hr></hr>
diff --git a/src/View/Modals/settingsModal.tsx b/src/View/Modals/settingsModal.tsx
index 045d7861..3290fd59 100644
--- a/src/View/Modals/settingsModal.tsx
+++ b/src/View/Modals/settingsModal.tsx
@@ -5,18 +5,22 @@ import SettingsViewModel, {
     SettingsModalPages,
 } from "../../ViewModel/Global/settingsViewModel";
 import { SplitModal } from "../Components/splitModal";
+import { InfoTile } from "../Components/infoTile";
 
 export function SettingsModal(settingsViewModel: SettingsViewModel) {
-    const detailView = React.createProxyState([settingsViewModel.selectedModalPage], () => {
-        switch (settingsViewModel.selectedModalPage.value) {
-            case SettingsModalPages.Appearance: 
-                return <div>Appearance</div>
-            case SettingsModalPages.Regional: 
-                return <div>Regional</div>
-            case SettingsModalPages.Info: 
-                return <div>Info</div>
-        }
-    })
+    const detailView = React.createProxyState(
+        [settingsViewModel.selectedModalPage],
+        () => {
+            switch (settingsViewModel.selectedModalPage.value) {
+                case SettingsModalPages.Appearance:
+                    return <div>Appearance</div>;
+                case SettingsModalPages.Regional:
+                    return <div>Regional</div>;
+                case SettingsModalPages.Info:
+                    return SettingsInfoPane(settingsViewModel);
+            }
+        },
+    );
 
     return (
         <div
@@ -83,3 +87,19 @@ function SettingsPaneButton(
         </button>
     );
 }
+
+function SettingsInfoPane(settingsViewModel: SettingsViewModel) {
+    return (
+        <div class="slide-up">
+            <h2>{translations.homePage.appName}</h2>
+            <hr></hr>
+            <div class="flex-column gap">
+                {InfoTile(
+                    "build",
+                    translations.settings.version,
+                    settingsViewModel.coreViewModel.BUILD,
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/View/translations.ts b/src/View/translations.ts
index 044ef4c5..cdbcbbac 100644
--- a/src/View/translations.ts
+++ b/src/View/translations.ts
@@ -82,6 +82,8 @@ const englishTranslations = {
             regional: "Language+Region",
             info: "About Comms",
         },
+
+        version: "Version",
     },
 
     connectionModal: {
@@ -370,8 +372,10 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
             pages: {
                 appearance: "Erscheinungsbild",
                 regional: "Sprache+Region",
-            info: "Über Comms",
+                info: "Über Comms",
             },
+
+            version: "Version",
         },
 
         connectionModal: {
@@ -633,6 +637,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
                 regional: "Idioma+Región",
                 info: "Sobre Comms",
             },
+
+            version: "Versión",
         },
         connectionModal: {
             connectionModalHeadline: "Gestionar Conexiones",