src/components/common/messaging/MessageBase.tsx

-import dayjs from "dayjs";
-import Tooltip from "../Tooltip";
+import { observer } from "mobx-react-lite";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled, { css, keyframes } from "styled-components";
 import { decodeTime } from "ulid";
+
 import { Text } from "preact-i18n";
-import styled, { css } from "styled-components";
-import { MessageObject } from "../../../context/revoltjs/util";
+
+import { useDictionary } from "../../../lib/i18n";
+
+import { dayjs } from "../../../context/Locale";
+
+import Tooltip from "../Tooltip";
 
 export interface BaseMessageProps {
-    head?: boolean,
-    failed?: boolean,
-    mention?: boolean,
-    blocked?: boolean,
-    sending?: boolean,
-    contrast?: boolean
+    head?: boolean;
+    failed?: boolean;
+    mention?: boolean;
+    blocked?: boolean;
+    sending?: boolean;
+    contrast?: boolean;
+    highlight?: boolean;
 }
 
+const highlight = keyframes`
+    0% { background: var(--mention); }
+    66% { background: var(--mention); }
+    100% { background: transparent; }
+`;
+
 export default styled.div<BaseMessageProps>`
     display: flex;
-    overflow-x: none;
-    padding: .125rem;
+    overflow: none;
+    padding: 0.125rem;
     flex-direction: row;
-    padding-right: 16px;
+    padding-inline-end: 16px;
 
-    ${ props => props.contrast && css`
-        padding: .3rem;
-        border-radius: 4px;
-        background: var(--hover);
-    ` }
+    @media (pointer: coarse) {
+        user-select: none;
+    }
 
-    ${ props => props.head && css`
-        margin-top: 12px;
-    ` }
+    ${(props) =>
+        props.contrast &&
+        css`
+            padding: 0.3rem;
+            background: var(--hover);
+            border-radius: var(--border-radius);
+        `}
 
-    ${ props => props.mention && css`
-        background: var(--mention);
-    ` }
+    ${(props) =>
+        props.head &&
+        css`
+            margin-top: 12px;
+        `}
 
-    ${ props => props.blocked && css`
-        filter: blur(4px);
-        transition: 0.2s ease filter;
+    ${(props) =>
+        props.mention &&
+        css`
+            background: var(--mention);
+        `}
 
-        &:hover {
-            filter: none;
-        }
-    ` }
+    ${(props) =>
+        props.blocked &&
+        css`
+            filter: blur(4px);
+            transition: 0.2s ease filter;
 
-    ${ props => props.sending && css`
-        opacity: 0.8;
-        color: var(--tertiary-foreground);
-    ` }
+            &:hover {
+                filter: none;
+            }
+        `}
+
+    ${(props) =>
+        props.sending &&
+        css`
+            opacity: 0.8;
+            color: var(--tertiary-foreground);
+        `}
+
+    ${(props) =>
+        props.failed &&
+        css`
+            color: var(--error);
+        `}
 
-    ${ props => props.failed && css`
-        color: var(--error);
-    ` }
+    ${(props) =>
+        props.highlight &&
+        css`
+            animation-name: ${highlight};
+            animation-timing-function: ease;
+            animation-duration: 3s;
+        `}
 
     .detail {
         gap: 8px;
         display: flex;
         align-items: center;
+        flex-shrink: 0;
     }
 
     .author {
+        overflow: hidden;
         cursor: pointer;
-        
+        font-weight: 600 !important;
+
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+        white-space: normal;
+
         &:hover {
             text-decoration: underline;
         }
     }
-    
+
     .copy {
-        width: 0;
-        height: 0;
-        opacity: 0;
         display: block;
         overflow: hidden;
     }
@@ -92,80 +135,125 @@ export const MessageInfo = styled.div`
     flex-direction: row;
     justify-content: center;
 
-    ::selection {
-        background-color: transparent;
-        color: var(--tertiary-foreground);
+    .copyBracket {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .copyTime {
+        opacity: 0;
+        position: absolute;
     }
 
     svg {
+        user-select: none;
         cursor: pointer;
+
+        &:active {
+            transform: translateY(1px);
+        }
     }
 
     time {
         opacity: 0;
     }
 
-    time, .edited {
+    time,
+    .edited {
+        margin-top: 1px;
         cursor: default;
         display: inline;
         font-size: 10px;
         color: var(--tertiary-foreground);
     }
+
+    time,
+    .edited > div {
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
+
+    .header {
+        cursor: pointer;
+    }
 `;
 
 export const MessageContent = styled.div`
     min-width: 0;
     flex-grow: 1;
     display: flex;
-    overflow: hidden;
-    font-size: 0.875rem;
+    // overflow: hidden;
     flex-direction: column;
     justify-content: center;
+    font-size: var(--text-size);
 `;
 
 export const DetailBase = styled.div`
+    flex-shrink: 0;
     gap: 4px;
     font-size: 10px;
     display: inline-flex;
     color: var(--tertiary-foreground);
+
+    .edited {
+        cursor: default;
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
 `;
 
-export function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) {
-    if (position === 'left') {
-        if (message.edited) {
-            return (
-                <>
-                    <span className="copy">
-                        [<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>]
-                    </span>
-                    <span className="edited">
-                        <Tooltip content={dayjs(message.edited).format("LLLL")}>
-                            <Text id="app.main.channel.edited" />
-                        </Tooltip>
-                    </span>
-                </>
-            )
-        } else {
+export const MessageDetail = observer(
+    ({ message, position }: { message: Message; position: "left" | "top" }) => {
+        const dict = useDictionary();
+
+        if (position === "left") {
+            if (message.edited) {
+                return (
+                    <>
+                        <time className="copyTime">
+                            <i className="copyBracket">[</i>
+                            {dayjs(decodeTime(message._id)).format(
+                                dict.dayjs?.timeFormat,
+                            )}
+                            <i className="copyBracket">]</i>
+                        </time>
+                        <span className="edited">
+                            <Tooltip
+                                content={dayjs(message.edited).format("LLLL")}>
+                                <Text id="app.main.channel.edited" />
+                            </Tooltip>
+                        </span>
+                    </>
+                );
+            }
             return (
                 <>
                     <time>
-                        <i className="copy">[</i>
-                        { dayjs(decodeTime(message._id)).format("H:mm") }
-                        <i className="copy">]</i>
+                        <i className="copyBracket">[</i>
+                        {dayjs(decodeTime(message._id)).format(
+                            dict.dayjs?.timeFormat,
+                        )}
+                        <i className="copyBracket">]</i>
                     </time>
                 </>
-            )
+            );
         }
-    }
 
-    return (
-        <DetailBase>
-            <time>
-                {dayjs(decodeTime(message._id)).calendar()}
-            </time>
-            { message.edited && <Tooltip content={dayjs(message.edited).format("LLLL")}>
-                <Text id="app.main.channel.edited" />
-            </Tooltip> }
-        </DetailBase>
-    )
-}
+        return (
+            <DetailBase>
+                <time>{dayjs(decodeTime(message._id)).calendar()}</time>
+                {message.edited && (
+                    <Tooltip content={dayjs(message.edited).format("LLLL")}>
+                        <span className="edited">
+                            <Text id="app.main.channel.edited" />
+                        </span>
+                    </Tooltip>
+                )}
+            </DetailBase>
+        );
+    },
+);

src/components/common/messaging/attachments/Attachment.module.scss

 .attachment {
-    border-radius: 6px;
-    margin: .125rem 0 .125rem;
-    
+    display: grid;
+    grid-auto-flow: row dense;
+    grid-auto-columns: min(100%, var(--attachment-max-width));
+
+    margin: 0.125rem 0 0.125rem;
+    width: max-content;
+    max-width: 100%;
+
     &[data-spoiler="true"] {
         filter: blur(30px);
         pointer-events: none;
     }
 
-    &[data-has-content="true"] {
-        margin-top: 4px;
-    }
-
-    &.image {
-        cursor: pointer;
-    }
-
-    &.video {        
-        .actions {
-            padding: 10px 12px;
-            border-radius: 6px 6px 0 0;
-        }
-
-        video {
-            width: 100%;
-            border-radius: 0 0 6px 6px;
-        }
-    }
-
     &.audio {
         gap: 4px;
         padding: 6px;
         display: flex;
-        border-radius: 6px;
+        max-width: 100%;
         flex-direction: column;
+        width: var(--attachment-default-width);
         background: var(--secondary-background);
-        max-width: 400px;
 
         > audio {
             width: 100%;
@@ -43,20 +28,20 @@
 
     &.file {
         > div {
-            width: 400px;
             padding: 12px;
+            max-width: 100%;
             user-select: none;
             width: fit-content;
-            border-radius: 6px;
+            border-radius: var(--border-radius);
+            width: var(--attachment-default-width);
         }
     }
 
     &.text {
-        display: flex;
+        width: 100%;
         overflow: hidden;
-        max-width: 800px;
-        border-radius: 6px;
-        flex-direction: column;
+        grid-auto-columns: unset;
+        max-width: var(--attachment-max-text-width);
 
         .textContent {
             height: 140px;
@@ -65,18 +50,18 @@
             overflow-y: auto;
             border-radius: 0 !important;
             background: var(--secondary-header);
-    
+
             pre {
                 margin: 0;
             }
-    
+
             pre code {
-                font-family: "Fira Mono", sans-serif;
+                font-family: var(--monospace-font), sans-serif;
             }
 
             &[data-loading="true"] {
                 display: flex;
-                
+
                 > * {
                     flex-grow: 1;
                 }
@@ -85,35 +70,22 @@
     }
 }
 
-.actions {
-    gap: 8px;
-    padding: 8px;
-    display: flex;
-    overflow: none;
+.margin {
+    margin-top: 4px;
+}
+
+.container {
     max-width: 100%;
-    align-items: center;
-    flex-direction: row;
-    color: var(--foreground);
-    background: var(--secondary-background);
+    overflow: hidden;
+    width: fit-content;
 
-    > svg {
-        flex-shrink: 0;
+    > :first-child {
+        width: min(var(--attachment-max-width), 100%, var(--width));
     }
-    
-    .info {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-
-        > span {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-        }
+}
 
-        .filesize {
-            font-size: 10px;
-            color: var(--secondary-foreground);
-        }
-    }
+.container,
+.attachment,
+.image {
+    border-radius: var(--border-radius);
 }