feat: new replies

external/lang

@@ -1 +1 @@
-Subproject commit d6c59b4665ec9fd0b47797b3bf82e458bc65ff51
+Subproject commit 699af07d7b8806b4790b187a38987089ae99af25

src/components/common/messaging/MessageBox.tsx

@@ -56,6 +56,7 @@ export type UploadState =
     | { type: "failed"; files: File[]; error: string };
 
 const Base = styled.div`
+    z-index: 10;
     display: flex;
     align-items: flex-start;
     background: var(--message-box);

src/components/common/messaging/attachments/MessageReply.tsx

@@ -28,30 +28,24 @@ export const ReplyBase = styled.div<{
     fail?: boolean;
     preview?: boolean;
 }>`
-    gap: 4px;
+    gap: 8px;
     min-width: 0;
     display: flex;
     margin-inline-start: 30px;
     margin-inline-end: 12px;
     font-size: 0.8em;
     user-select: none;
-    align-items: center;
+    align-items: end;
     color: var(--secondary-foreground);
 
-    /* nizune's Discord replies,
-        does not scale properly with messages,
-        reverted temporarily
     &::before {
         content: "";
+        width: 22px;
         height: 10px;
-        width: 28px;
+        border-inline-start: 3px solid #4f515d;
-        margin-inline-end: 2px;
+        border-top: 3px solid #4f515d;
         align-self: flex-end;
-        display: flex;
+    }
-        border-top: 2.2px solid var(--tertiary-foreground);
-        border-inline-start: 2.2px solid var(--tertiary-foreground);
-        border-start-start-radius: 6px;
-    }*/
 
     * {
         overflow: hidden;
@@ -75,13 +69,6 @@ export const ReplyBase = styled.div<{
                 text-decoration: underline;
             }
         }
-
-        /*&::before {
-            position:relative;
-            width: 50px;
-            height: 2px;
-            background: red;
-        }*/
     }
 
     .content {
@@ -120,10 +107,6 @@ export const ReplyBase = styled.div<{
         > * {
             pointer-events: none;
         }
-
-        /*> span > p {
-            display: flex;
-        }*/
     }
 
     > svg:first-child {
@@ -142,6 +125,10 @@ export const ReplyBase = styled.div<{
         props.head &&
         css`
             margin-top: 12px;
+
+            &::before {
+                border-start-start-radius: 4px;
+            }
         `}
 
     ${(props) =>
@@ -184,7 +171,8 @@ export const MessageReply = observer(
 
         return (
             <ReplyBase head={index === 0}>
-                <Reply size={16} />
+                {/*<Reply size={16} />*/}
+
                 {message.author?.relationship === RelationshipStatus.Blocked ? (
                     <Text id="app.main.channel.misc.blocked_user" />
                 ) : (
@@ -195,7 +183,7 @@ export const MessageReply = observer(
                             <>
                                 <div className="user">
                                     <UserShort
-                                        size={16}
+                                        size={14}
                                         showServerIdentity
                                         user={message.author}
                                         masquerade={message.masquerade!}

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -10,7 +10,7 @@ import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
-    z-index: 10;
+    z-index: 1;
     position: relative;
 
     ${(props) =>

src/components/common/messaging/bars/ReplyBar.tsx

@@ -14,6 +14,7 @@ import { useApplicationState } from "../../../../mobx/State";
 import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
 import { Reply } from "../../../../mobx/stores/MessageQueue";
 
+import Tooltip from "../../../common/Tooltip";
 import IconButton from "../../../ui/IconButton";
 
 import Markdown from "../../../markdown/Markdown";
@@ -28,12 +29,30 @@ interface Props {
 }
 
 const Base = styled.div`
+    @keyframes bounce-from-bottom {
+        0% {
+            transform: translateY(33px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
+
     display: flex;
     height: 30px;
-    padding: 0 12px;
+    padding: 0 20px;
     user-select: none;
     align-items: center;
-    background: var(--message-box);
+    /*background: var(--message-box);*/
+    background: var(--secondary-background);
+
+    /*animation: fadeIn 5s;*/
+
+    animation-name: bounce-from-bottom;
+    animation-duration: 340ms;
+    animation-delay: 0ms;
+    animation-timing-function: cubic-bezier(0.2, 0.9, 0.5, 1.16);
+    animation-fill-mode: forwards;
 
     > div {
         flex-grow: 1;
@@ -49,11 +68,20 @@ const Base = styled.div`
         display: flex;
         font-size: 12px;
         align-items: center;
-        font-weight: 600;
+        font-weight: 800;
         text-transform: uppercase;
         min-width: 6ch;
     }
 
+    .replyto {
+        align-self: center;
+        font-weight: 500;
+    }
+
+    .content {
+        display: flex;
+        pointer-events: none;
+
         .username {
             display: flex;
             align-items: center;
@@ -64,6 +92,8 @@ const Base = styled.div`
         .message {
             display: flex;
             max-height: 26px;
+            gap: 4px;
+        }
     }
 
     .actions {
@@ -129,7 +159,10 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
-                            <ReplyIcon size={22} />
+                            <div class="replyto">
+                                <Text id="app.main.channel.replying" />
+                            </div>
+                            <div class="content">
                                 <div class="username">
                                     <UserShort
                                         size={16}
@@ -143,7 +176,8 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         <>
                                             <File size={16} />
                                             <em>
-                                            {message.attachments.length > 1 ? (
+                                                {message.attachments.length >
+                                                1 ? (
                                                     <Text id="app.main.channel.misc.sent_multiple_files" />
                                                 ) : (
                                                     <Text id="app.main.channel.misc.sent_file" />
@@ -153,7 +187,10 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                     )}
                                     {message.author_id ===
                                     "00000000000000000000000000" ? (
-                                    <SystemMessage message={message} hideInfo />
+                                        <SystemMessage
+                                            message={message}
+                                            hideInfo
+                                        />
                                     ) : (
                                         <Markdown
                                             disallowBigEmoji
@@ -163,6 +200,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         />
                                     )}
                                 </div>
+                            </div>
                         </ReplyBase>
                         <span class="actions">
                             {message.author_id !== client.user!._id && (
@@ -189,6 +227,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                             false,
                                         );
                                     }}>
+                                    <Tooltip content="Toggle author ping">
                                         <span class="toggle">
                                             <At size={15} />
                                             <Text
@@ -199,6 +238,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                                 }
                                             />
                                         </span>
+                                    </Tooltip>
                                 </IconButton>
                             )}
                             <IconButton