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,21 +68,32 @@ const Base = styled.div`
         display: flex;
         font-size: 12px;
         align-items: center;
-        font-weight: 600;
+        font-weight: 800;
         text-transform: uppercase;
         min-width: 6ch;
     }
 
-    .username {
+    .replyto {
-        display: flex;
+        align-self: center;
-        align-items: center;
+        font-weight: 500;
-        gap: 6px;
-        font-weight: 600;
     }
 
-    .message {
+    .content {
         display: flex;
-        max-height: 26px;
+        pointer-events: none;
+
+        .username {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-weight: 600;
+        }
+
+        .message {
+            display: flex;
+            max-height: 26px;
+            gap: 4px;
+        }
     }
 
     .actions {
@@ -129,39 +159,47 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
-                            <ReplyIcon size={22} />
+                            <div class="replyto">
-                            <div class="username">
+                                <Text id="app.main.channel.replying" />
-                                <UserShort
-                                    size={16}
-                                    showServerIdentity
-                                    user={message.author}
-                                    masquerade={message.masquerade!}
-                                />
                             </div>
-                            <div class="message">
+                            <div class="content">
-                                {message.attachments && (
+                                <div class="username">
-                                    <>
+                                    <UserShort
-                                        <File size={16} />
+                                        size={16}
-                                        <em>
+                                        showServerIdentity
-                                            {message.attachments.length > 1 ? (
+                                        user={message.author}
-                                                <Text id="app.main.channel.misc.sent_multiple_files" />
+                                        masquerade={message.masquerade!}
-                                            ) : (
-                                                <Text id="app.main.channel.misc.sent_file" />
-                                            )}
-                                        </em>
-                                    </>
-                                )}
-                                {message.author_id ===
-                                "00000000000000000000000000" ? (
-                                    <SystemMessage message={message} hideInfo />
-                                ) : (
-                                    <Markdown
-                                        disallowBigEmoji
-                                        content={(
-                                            message.content as string
-                                        ).replace(/\n/g, " ")}
                                     />
-                                )}
+                                </div>
+                                <div class="message">
+                                    {message.attachments && (
+                                        <>
+                                            <File size={16} />
+                                            <em>
+                                                {message.attachments.length >
+                                                1 ? (
+                                                    <Text id="app.main.channel.misc.sent_multiple_files" />
+                                                ) : (
+                                                    <Text id="app.main.channel.misc.sent_file" />
+                                                )}
+                                            </em>
+                                        </>
+                                    )}
+                                    {message.author_id ===
+                                    "00000000000000000000000000" ? (
+                                        <SystemMessage
+                                            message={message}
+                                            hideInfo
+                                        />
+                                    ) : (
+                                        <Markdown
+                                            disallowBigEmoji
+                                            content={(
+                                                message.content as string
+                                            ).replace(/\n/g, " ")}
+                                        />
+                                    )}
+                                </div>
                             </div>
                         </ReplyBase>
                         <span class="actions">
@@ -189,16 +227,18 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                             false,
                                         );
                                     }}>
-                                    <span class="toggle">
+                                    <Tooltip content="Toggle author ping">
-                                        <At size={15} />
+                                        <span class="toggle">
-                                        <Text
+                                            <At size={15} />
-                                            id={
+                                            <Text
-                                                reply.mention
+                                                id={
-                                                    ? "general.on"
+                                                    reply.mention
-                                                    : "general.off"
+                                                        ? "general.on"
-                                            }
+                                                        : "general.off"
-                                        />
+                                                }
-                                    </span>
+                                            />
+                                        </span>
+                                    </Tooltip>
                                 </IconButton>
                             )}
                             <IconButton