merge reply view header with message page title bar

src/View/ChatPages/messagePage.css

@@ -1,4 +1,8 @@
 /* layout */
+#chat-page #main #message-page[reply-view] .toolbar .title {
+    padding-left: 0px;
+}
+
 #chat-page #main #message-page .content {
     padding: 0px;
     overflow: hidden;

src/View/ChatPages/messagePage.tsx

@@ -7,7 +7,6 @@ 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,
@@ -78,16 +77,24 @@ export function MessagePage(
 
 const isInReplyView = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value != undefined);
 
+const title = React.createProxyState([messagePageViewModel.isReplyViewActive], ()=>messagePageViewModel.isReplyViewActive.value ? coreViewModel.translations.chatPage.message.replyHeaderLabel(messagePageViewModel.replyViewSelectedMessage.value.body.value) : coreViewModel.translations.chatPage.message.messagesHeadline);
+
 return (
     <div id="message-page" toggle:reply-view={isInReplyView}>
 	<div class="pane-wrapper">
 	    <div class="pane">
 		<div class="toolbar">
-                        <span class="title">
-                            {
-                                coreViewModel.translations.chatPage.message
-                                    .messagesHeadline
-                            }
+		    <button 
+			class="ghost"
+			on:click={messagePageViewModel.resetReplyView}
+			toggle:hidden={messagePageViewModel.isReplyViewInactive}
+		    >
+			<span class="icon">arrow_back</span>
+		    </button>
+		    <span 
+			class="title ellipsis width-100 flex"
+			subscribe:innerText={title}
+		    >
 		    </span>
 		    <span>
 			<button
@@ -106,7 +113,6 @@ export function MessagePage(
 		    </span>
 		</div>
 		<div class="content">
-			{ReplyViewHeader(coreViewModel, messagePageViewModel)}
 		    {messageContainer}
 		    <div id="composer">
 			<div class="content-width-constraint">

src/View/translations.ts

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

src/ViewModel/Pages/messagePageViewModel.ts

@@ -18,6 +18,7 @@ export default class MessagePageViewModel extends Context {
         new React.ListState();
     replyViewSelectedMessage: React.State<ChatMessageViewModel|undefined> = new React.State(undefined);
     isReplyViewActive: React.State<boolean> = React.createProxyState([this.replyViewSelectedMessage], ()=>this.replyViewSelectedMessage.value != undefined);
+    isReplyViewInactive = React.createProxyState([this.isReplyViewActive], ()=>!this.isReplyViewActive.value);
     searchViewModel: SearchViewModel<ChatMessageViewModel>;
     isFilterModalOpen = new React.State<boolean>(false);
     reactionFilter = new React.State<ReactionSymbols | undefined>(undefined);