remodel message tab ui

2024-07-09 14:28:13 +02:00
parent 2d7b9e54da
commit f48ea3d5d1
6 changed files with 190 additions and 205 deletions
@@ -1,37 +1,50 @@
 import * as React from "bloatless-react";

+import { closeChat, selectedChat } from "../Model/model";
+
 import { MessageComposer } from "../Views/messageComposer";
 import { ThreadView } from "../Views/threadView";
-import { selectedChat } from "../Model/model";
 import { translation } from "../translations";

 export function MessageTab() {
-  function clearMessageHistory() {
-    selectedChat.value?.clearMessages();
-  }
+  const messageTabContent = React.createProxyState([selectedChat], () => {
+    if (selectedChat.value == undefined)
+      return (
+        <div class="width-100 height-100 flex-column align-center justify-center">
+          <span class="secondary">{translation.noChatSelected}</span>
+        </div>
+      );

-  const headerText = React.createProxyState([selectedChat], () =>
-    selectedChat.value != undefined
-      ? selectedChat.value.currentChannel
-      : translation.messages
-  );
+    const chat = selectedChat.value;

-  return (
-    <article id="message-tab">
-      <header>
-        <span subscribe:innerText={headerText}>
-        </span>
-        <span>
-          <button
-            aria-label={translation.clearHistory}
-            on:click={clearMessageHistory}
-          >
-            <span class="icon">delete_sweep</span>
-          </button>
-        </span>
-      </header>
-      {ThreadView()}
-      <footer>{MessageComposer()}</footer>
-    </article>
-  );
+    function clearMessageHistory() {
+      chat.clearMessages();
+    }
+
+    return (
+      <article id="message-tab">
+        <header class="padding-0">
+          <span class="flex-row align-center">
+            <button aria-label={translation.back} on:click={closeChat}>
+              <span class="icon">arrow_back</span>
+            </button>
+
+            <span subscribe:innerText={chat.currentChannel}></span>
+          </span>
+          <span>
+            <button
+              aria-label={translation.clearHistory}
+              on:click={clearMessageHistory}
+            >
+              <span class="icon">delete_sweep</span>
+            </button>
+          </span>
+        </header>
+        {ThreadView(chat)}
+        <footer>{MessageComposer(chat)}</footer>
+      </article>
+    );
+  });
+
+  return <div children:set={messageTabContent}></div>;
 }