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>

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -154,12 +154,14 @@ export default class ChatMessageViewModel {
 	let hideForReplyView: boolean = false;
 
 	const updateHiding = () => {
+	    console.log(hideForReactions, hideForReplyView);
 	    this.isHidden.value = hideForReactions || hideForReplyView;
 	}
 
         this.messagePageViewModel.reactionFilter.subscribe((content) => {
             if (content == undefined) {
 		hideForReactions = false;
+		updateHiding();
                 return;
             }
 

src/ViewModel/Pages/messagePageViewModel.ts

@@ -46,6 +46,8 @@ export default class MessagePageViewModel extends Context {
             replyId = this.replyingMessage.value.chatMessage.id;
         }
         this.chatViewModel.chatModel.sendMessage(body, replyId);
+
+	if (this.replyViewSelectedMessage.value != undefined) return;
         this.replyingMessage.value = undefined;
     };
 
@@ -133,8 +135,15 @@ export default class MessagePageViewModel extends Context {
         this.searchViewModel.search("");
     };
 
+    setReplyView = (message: ChatMessageViewModel): void => {
+	this.replyViewSelectedMessage.value = message;
+	this.revokeReactionFilter();
+	this.setReply(message);
+    }
+
     resetReplyView = (): void => {
 	this.replyViewSelectedMessage.value = undefined;
+	this.resetReply();
     }
 
     setFocus = (): void => {