Merge pull request #819 from gotify/upgrade-ui-fix-message-layout

fix message layout

Makefile

@@ -7,7 +7,7 @@ ifdef GOTOOLCHAIN
 else
 	GO_VERSION=$(shell go mod edit -json | jq -r .Toolchain | sed -e 's/go//')
 endif
-DOCKER_BUILD_IMAGE=gotify/build
+DOCKER_BUILD_IMAGE=docker.io/gotify/build
 DOCKER_WORKDIR=/proj
 DOCKER_RUN=docker run --rm -e LD_FLAGS="$$LD_FLAGS" -v "$$PWD/.:${DOCKER_WORKDIR}" -v "`go env GOPATH`/pkg/mod/.:/go/pkg/mod:ro" -w ${DOCKER_WORKDIR}
 DOCKER_GO_BUILD=go build -mod=readonly -a -installsuffix cgo -ldflags "$$LD_FLAGS"

ui/src/message/Message.tsx

@@ -1,4 +1,4 @@
-import {Button, Theme} from '@mui/material';
+import {Button, Theme, useMediaQuery, useTheme} from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import {makeStyles} from 'tss-react/mui';
 import Typography from '@mui/material/Typography';
@@ -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;
 
@@ -32,6 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     messageContentWrapper: {
         minWidth: 200,
+        width: '100%',
     },
     image: {
         marginRight: 15,
@@ -81,6 +83,7 @@ interface IProps {
     date: string;
     content: string;
     priority: number;
+    appName: string;
     fDelete: VoidFunction;
     extras?: IMessageExtras;
     expanded: boolean;
@@ -105,13 +108,16 @@ const Message = ({
     priority,
     content,
     extras,
+    appName,
     onExpand,
     expanded: initialExpanded,
 }: IProps) => {
+    const theme = useTheme();
     const [previewRef, setPreviewRef] = React.useState<HTMLDivElement | null>(null);
     const {classes} = useStyles();
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const [isOverflowing, setOverflowing] = React.useState(false);
+    const dateWrapped = useMediaQuery(theme.breakpoints.down('md'));
 
     React.useEffect(() => {
         setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
@@ -145,7 +151,7 @@ const Message = ({
                         {image !== null ? (
                             <img
                                 src={config.get('url') + image}
-                                alt="app logo"
+                                alt={`${appName} logo`}
                                 width="70"
                                 height="70"
                                 className={classes.image}
@@ -158,7 +164,12 @@ const Message = ({
                                 {title}
                             </Typography>
                             <Typography variant="body1" className={classes.date}>
-                                <TimeAgo date={date} />
+                                <TimeAgo
+                                    date={date}
+                                    formatter={makeIntlFormatter({
+                                        style: dateWrapped ? 'long' : 'narrow',
+                                    })}
+                                />
                             </Typography>
                             <IconButton
                                 onClick={fDelete}

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;
+}

ui/vite.config.ts

@@ -1,7 +1,7 @@
 import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 
-const GOTIFY_PORT = process.env.GOTIFY_PORT ?? '80';
+const GOTIFY_SERVER_PORT = process.env.GOTIFY_SERVER_PORT ?? '80';
 
 export default defineConfig({
     build: {
@@ -21,12 +21,12 @@ export default defineConfig({
         host: '0.0.0.0',
         proxy: {
             '^/(application|message|client|current|user|plugin|version|image)': {
-                target: `http://localhost:${GOTIFY_PORT}/`,
+                target: `http://localhost:${GOTIFY_SERVER_PORT}/`,
                 changeOrigin: true,
                 secure: false,
             },
             '/stream': {
-                target: `ws://localhost:${GOTIFY_PORT}/`,
+                target: `ws://localhost:${GOTIFY_SERVER_PORT}/`,
                 ws: true,
                 rewriteWsOrigin: true,
             },