fix message layout

Signed-off-by: eternal-flame-AD <yume@yumechi.jp>

ui/src/message/Message.tsx

@@ -11,6 +11,7 @@ import {Markdown} from '../common/Markdown';
 import * as config from '../config';
 import {IMessageExtras} from '../types';
 import {contentType, RenderMode} from './extras';
+import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
 
 const PREVIEW_LENGTH = 500;
 
@@ -39,14 +40,34 @@ const useStyles = makeStyles()((theme: Theme) => ({
             width: 32,
             height: 32,
         },
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
+    appName: {
+        opacity: 0.7,
     },
     date: {
         [theme.breakpoints.down('md')]: {
-            order: 1,
-            flexBasis: '100%',
             opacity: 0.7,
         },
     },
+    messageWrapper: {
+        display: 'grid',
+        gridTemplateColumns: '70px 1fr',
+        [theme.breakpoints.down('sm')]: {
+            gridTemplateColumns: '1fr',
+        },
+        gap: 16,
+        width: '100%',
+    },
+    actionsWrapper: {
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
     imageWrapper: {
         display: 'flex',
     },
@@ -81,6 +102,7 @@ interface IProps {
     date: string;
     content: string;
     priority: number;
+    appName: string;
     fDelete: VoidFunction;
     extras?: IMessageExtras;
     expanded: boolean;
@@ -105,6 +127,7 @@ const Message = ({
     priority,
     content,
     extras,
+    appName,
     onExpand,
     expanded: initialExpanded,
 }: IProps) => {
@@ -140,25 +163,40 @@ const Message = ({
                     borderLeftWidth: 6,
                     borderLeftStyle: 'solid',
                 }}>
-                <div style={{display: 'flex', width: '100%'}}>
+                <div className={classes.messageWrapper}>
-                    <div className={classes.imageWrapper}>
                     {image !== null ? (
                         <img
                             src={config.get('url') + image}
-                                alt="app logo"
+                            alt={`${appName} logo`}
                             width="70"
                             height="70"
                             className={classes.image}
                         />
                     ) : null}
-                    </div>
+                    <div style={{width: '100%'}}>
+                        <div style={{display: 'flex', width: '100%'}}>
                             <div className={classes.messageContentWrapper}>
                                 <div className={classes.header}>
-                            <Typography className={`${classes.headerTitle} title`} variant="h5">
+                                    <Typography
+                                        className={`${classes.headerTitle} title`}
+                                        variant="h5">
                                         {title}
                                     </Typography>
+                                </div>
+                                <div className={classes.appName}>
                                     <Typography variant="body1" className={classes.date}>
-                                <TimeAgo date={date} />
+                                        {appName}
+                                    </Typography>
+                                </div>
+                            </div>
+                            <div className={classes.actionsWrapper}>
+                                <Typography variant="body1" className={classes.date}>
+                                    <TimeAgo
+                                        date={date}
+                                        formatter={makeIntlFormatter({
+                                            style: 'narrow',
+                                        })}
+                                    />
                                 </Typography>
                                 <IconButton
                                     onClick={fDelete}
@@ -167,7 +205,8 @@ const Message = ({
                                     <Delete />
                                 </IconButton>
                             </div>
-
+                        </div>
+                        <div>
                             <Typography
                                 component="div"
                                 ref={setPreviewRef}
@@ -177,7 +216,6 @@ const Message = ({
                                 {renderContent()}
                             </Typography>
                         </div>
-                </div>
                         {isOverflowing && (
                             <Button
                                 style={{marginTop: 16}}
@@ -190,6 +228,8 @@ const Message = ({
                                 {expanded ? 'Read Less' : 'Read More'}
                             </Button>
                         )}
+                    </div>
+                </div>
             </Container>
         </div>
     );

ui/src/message/Messages.tsx

@@ -40,6 +40,7 @@ const Messages = observer(() => {
             onExpand={(expanded) => (expandedState.current[message.id] = expanded)}
             title={message.title}
             date={message.date}
+            appName={appStore.getName(message.appid)}
             expanded={expandedState.current[message.id] ?? false}
             content={message.message}
             image={message.image}

ui/src/typedef/react-timeago.d.ts

@@ -1,9 +1,19 @@
 declare module 'react-timeago' {
     import React from 'react';
 
+    export type FormatterOptions = {
+        style?: 'long' | 'short' | 'narrow';
+    };
+    export type Formatter = (options: FormatterOptions) => React.ReactNode;
+
     export interface ITimeAgoProps {
         date: string;
+        formatter?: Formatter;
     }
 
     export default class TimeAgo extends React.Component<ITimeAgoProps, unknown> {}
 }
+
+declare module 'react-timeago/defaultFormatter' {
+    declare function makeIntlFormatter(options: FormatterOptions): Formatter;
+}