implement showing only replies

src/View/ChatPages/messagePage.css

@@ -234,7 +234,7 @@
     text-align: right;
 }
 
-.message-bubble > .inline-reply {
+.message-bubble > :is(.inline-reply, .reply-link, .message-reaction-row) {
     cursor: pointer;
 
     display: flex;
@@ -248,20 +248,20 @@
     overflow: hidden;
 
     padding: 0px var(--control-padding);
-    gap: var(--text-gap);
+}
 
+.message-bubble > .inline-reply {
     border-left: var(--outline-width) solid var(--primary);
+    gap: var(--text-gap);
+}
+
+.message-bubble > .reply-link {
+    gap: 5px;
 }
 
 .message-bubble > .message-reaction-row {
-    max-width: var(--max-input-width);
-    width: 100%;
-
     padding: var(--gap-between-tiles);
-    background: var(--surface-alt);
-
     display: none !important;
-    overflow: hidden;
 }
 
 .message-bubble > .message-reaction-row:has(button:not([count="0"])) {

src/View/Components/chatMessage.tsx

@@ -5,6 +5,7 @@ import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ChatMessageStatuses } from "../../Model/Chat/chatModel";
+import {ReplyLink} from "./replyLink";
 
 export function ChatMessage(
     coreViewModel: CoreViewModel,
@@ -75,6 +76,7 @@ export function ChatMessage(
                 </div>
             </div>
             {MessageReactionButtonRow(coreViewModel, chatMessageViewModel)}
+            {ReplyLink(coreViewModel, chatMessageViewModel)}
             {ChatMessageInfoModal(coreViewModel, chatMessageViewModel)}
         </div>
     );

src/View/Components/replyLink.tsx

@@ -0,0 +1,22 @@
+import * as React from "../../react";
+import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+
+export function ReplyLink(coreViewModel: CoreViewModel, chatMessageViewModel: ChatMessageViewModel) {
+    const isHidden = React.createProxyState([chatMessageViewModel.replyCount], ()=>chatMessageViewModel.replyCount.value == 0);
+
+    function select() {
+	chatMessageViewModel.messagePageViewModel.replyViewSelectedMessage.value = chatMessageViewModel;
+    }
+
+    return (
+	<div 
+	    class="reply-link"
+	    toggle:hidden={isHidden}
+	    on:click={select}
+	>
+            <span>{coreViewModel.translations.chatPage.message.replyPrefixLabel}</span>
+            <b class="ellipsis" subscribe:innerText={chatMessageViewModel.replyCount}></b>
+        </div>
+    );
+}

src/View/translations.ts

@@ -248,6 +248,10 @@ const englishTranslations = {
             attentionReaction: "Reaction: exclamation mark",
             doubleAttentionReaction: "Reaction: double exclamation mark",
             questionReaction: "Reaction: question mark",
+
+	    //
+	    
+	    replyPrefixLabel: "Replies: ",
         },
 
         task: {
@@ -569,6 +573,8 @@ export const allTranslations: {
 		attentionReaction: "Reaktion: Ausrufezeichen",
 		doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen",
 		questionReaction: "Reaktion: Fragezeichen",
+	    
+		replyPrefixLabel: "Antworten: ",
 	    },
 
 	    task: {
@@ -871,6 +877,8 @@ export const allTranslations: {
 		attentionReaction: "Reaccion: signo de atención",
 		doubleAttentionReaction: "Reaccion: signo de atención doble",
 		questionReaction: "Reaccion: signo de interrogación",
+
+		replyPrefixLabel: "Respuestas: ",
 	    },
 
 	    task: {