add settings pane for info

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>;
+    );
 }

src/View/Components/splitModal.css

@@ -1,4 +1,4 @@
-.modal>div:has(.split-modal[extended]) {
+.modal > div:has(.split-modal[extended]) {
     max-width: 64rem;
 }
 

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"

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>

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>
+    );
+}

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",