implement reply view

src/View/ChatPages/messagePage.css

@@ -28,6 +28,23 @@
     overflow: auto;
 }
 
+#message-page .reply-header {
+    width: 100%;
+    padding-left: var(--content-padding);
+    gap: var(--gap-in-controls);
+	
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    background: var(--surface);
+}
+
+#message-page .reply-header span {
+    width: 100%;
+    flex: 1;
+}
+
 /* composer */
 #message-page #composer {
     display: flex;
@@ -259,6 +276,10 @@
     gap: 5px;
 }
 
+#message-page[reply-view] :is(.reply-link, .inline-reply) {
+    display: none;
+}
+
 .message-bubble > .message-reaction-row {
     padding: var(--gap-between-tiles);
     display: none !important;

src/View/ChatPages/messagePage.tsx

@@ -72,8 +72,10 @@ export function MessagePage(
         ViewController.setFocusWithDelay();
     });
 
+    const isInReplyView = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value != undefined);
+
     return (
-        <div id="message-page">
+        <div id="message-page" toggle:reply-view={isInReplyView}>
             <div class="pane-wrapper">
                 <div class="pane">
                     <div class="toolbar">

src/View/Components/replyLink.tsx

@@ -6,7 +6,7 @@ export function ReplyLink(coreViewModel: CoreViewModel, chatMessageViewModel: Ch
     const isHidden = React.createProxyState([chatMessageViewModel.replyCount], ()=>chatMessageViewModel.replyCount.value == 0);
 
     function select() {
-	chatMessageViewModel.messagePageViewModel.replyViewSelectedMessage.value = chatMessageViewModel;
+	chatMessageViewModel.messagePageViewModel.setReplyView(chatMessageViewModel);
     }
 
     return (

src/View/Components/replyViewHeader.tsx

@@ -5,7 +5,8 @@ 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));
+    const label = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value == undefined ? "" : coreViewModel.translations.chatPage.message.replyHeaderLabel(messagePageViewModel.replyViewSelectedMessage.value.sender));
+    const message = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value == undefined ? "" : messagePageViewModel.replyViewSelectedMessage.value.body.value);
 
     return (
 	<div 
@@ -13,8 +14,9 @@ export function ReplyViewHeader(coreViewModel: CoreViewModel, messagePageViewMod
 	    toggle:hidden={isHidden}
 	>
 	    <b class="ellipsis" subscribe:innerText={label}></b>
+	    <span class="secondary ellipsis" subscribe:innerText={message}></span>
 	    <button 
-		class="primary square"
+		class="standard square"
 		on:click={messagePageViewModel.resetReplyView}
 	    >
 		<span class="icon">close</span>