add inline replies, ui improvements, rename ViewPersistence->ViewController, add scroll method and highlight

src/View/ChatPages/messagePage.css

@@ -1,11 +1,21 @@
 /* layout */
 #chat-page #main #message-page .content {
     padding: 0px;
-
     overflow: hidden;
-
     display: grid;
-    grid-template-rows: 1fr var(--control-height) var(--safe-area-bottom);
+    --composer-height: var(--control-height);
+    grid-template-rows:
+        1fr calc(var(--composer-height) + var(--gap-between-tiles))
+        var(--safe-area-bottom);
+}
+
+#chat-page
+    #main
+    #message-page
+    .content:has(.reply-preview-wrapper .reply-preview) {
+    --composer-height: calc(
+        2 * var(--control-height) + var(--gap-between-tiles)
+    );
 }
 
 #message-page #message-container {
@@ -20,21 +30,51 @@
 
 #message-page #composer input {
     margin: 0px;
-
     width: 100%;
     max-width: unset;
-
     flex: 1;
-
     border-top: 1px solid var(--border);
     border-left: 1px solid var(--border);
 }
 
+#message-page #composer .content-width-constraint {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--gap-between-tiles);
+}
+
+#message-page #composer .reply-preview-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+#message-page #composer .reply-preview-wrapper .reply-preview {
+    width: 100%;
+    max-width: var(--max-input-width);
+
+    display: flex;
+    gap: var(--gap-between-tiles);
+}
+
+#message-page #composer .reply-preview-wrapper .reply-preview > div {
+    background: var(--surface);
+
+    display: flex;
+    align-items: center;
+    gap: var(--text-gap);
+
+    padding: 0px var(--content-padding);
+
+    width: calc(100% - var(--control-height) - var(--gap-between-tiles));
+}
+
 @media (max-width: 700px) {
     #message-page #composer div {
         width: 100%;
         max-width: unset;
-
         display: flex;
     }
 }
@@ -44,7 +84,6 @@
     #message-page #composer .input-width-constraint {
         display: flex;
         justify-content: flex-end;
-
         width: 100%;
         max-width: var(--max-content-width);
     }
@@ -178,12 +217,31 @@
     text-align: right;
 }
 
+.message-bubble > .inline-reply {
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+
+    background: var(--surface-alt);
+    height: var(--control-height);
+
+    max-width: var(--max-input-width);
+    width: 100%;
+    overflow: hidden;
+
+    padding: 0px var(--control-padding);
+    gap: var(--text-gap);
+
+    border-left: var(--outline-width) solid var(--primary);
+}
+
 .message-bubble > .message-reaction-row {
     max-width: var(--max-input-width);
     width: 100%;
 
     padding: var(--gap-between-tiles);
-    background: var(--surface);
+    background: var(--surface-alt);
 
     display: none !important;
     overflow: hidden;