implement showing only replies

src/View/ChatPages/messagePage.tsx

@@ -7,6 +7,7 @@ import * as React from "../../react";
 import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import {ReplyViewHeader} from "../Components/replyViewHeader";
 
 export function MessagePage(
     coreViewModel: CoreViewModel,
@@ -99,6 +100,7 @@ export function MessagePage(
                         </span>
                     </div>
 		    <div class="content">
+			{ReplyViewHeader(coreViewModel, messagePageViewModel)}
                         {messageContainer}
                         <div id="composer">
                             <div class="content-width-constraint">

src/View/Components/replyViewHeader.tsx

@@ -0,0 +1,24 @@
+import * as React from "../../react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
+
+export function ReplyViewHeader(coreViewModel: CoreViewModel, messagePageViewModel: MessagePageViewModel) {
+    const isHidden = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value == undefined);
+
+    const label = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>coreViewModel.translations.chatPage.message.replyHeaderLabel(messagePageViewModel.replyViewSelectedMessage.value.sender));
+
+    return (
+	<div 
+	    class="reply-header"
+	    toggle:hidden={isHidden}
+	>
+	    <b class="ellipsis" subscribe:innerText={label}></b>
+	    <button 
+		class="primary square"
+		on:click={messagePageViewModel.resetReplyView}
+	    >
+		<span class="icon">close</span>
+	    </button>
+	</div>
+    );
+}

src/View/translations.ts

@@ -252,6 +252,7 @@ const englishTranslations = {
 	    //
 	    
 	    replyPrefixLabel: "Replies: ",
+	    replyHeaderLabel: (sender: string) => `Replies to ${sender}`,
         },
 
         task: {
@@ -575,6 +576,7 @@ export const allTranslations: {
 		questionReaction: "Reaktion: Fragezeichen",
 	    
 		replyPrefixLabel: "Antworten: ",
+		replyHeaderLabel: (sender: string) => `Antworten an ${sender}`,
 	    },
 
 	    task: {
@@ -879,6 +881,7 @@ export const allTranslations: {
 		questionReaction: "Reaccion: signo de interrogación",
 
 		replyPrefixLabel: "Respuestas: ",
+		replyHeaderLabel: (sender: string) => `Respuestas a ${sender}`,
 	    },
 
 	    task: {