From 73d42c5857b4135c653cc35ac7ade2b08446b9bb Mon Sep 17 00:00:00 2001 From: eternal-flame-AD Date: Mon, 4 Aug 2025 16:07:31 -0500 Subject: [PATCH 1/4] allow building on non docker environment Signed-off-by: eternal-flame-AD --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index d3753f6..2aec9c9 100644 --- a/Makefile +++ b/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" From d929e66aa2d901c3df53d8b913427609b6792475 Mon Sep 17 00:00:00 2001 From: eternal-flame-AD Date: Mon, 4 Aug 2025 16:07:39 -0500 Subject: [PATCH 2/4] fix message layout Signed-off-by: eternal-flame-AD --- ui/src/message/Message.tsx | 138 +++++++++++++++++++----------- ui/src/message/Messages.tsx | 1 + ui/src/typedef/react-timeago.d.ts | 10 +++ 3 files changed, 100 insertions(+), 49 deletions(-) diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx index 19cfe92..b947657 100644 --- a/ui/src/message/Message.tsx +++ b/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,56 +163,73 @@ const Message = ({ borderLeftWidth: 6, borderLeftStyle: 'solid', }}> -
-
- {image !== null ? ( - app logo - ) : null} -
-
-
- - {title} - - - - - - - +
+ {image !== null ? ( + {`${appName} + ) : null} +
+
+
+
+ + {title} + +
+
+ + {appName} + +
+
+
+ + + + + + +
- - - {renderContent()} - +
+ + {renderContent()} + +
+ {isOverflowing && ( + + )}
- {isOverflowing && ( - - )}
); diff --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx index 1c91ff4..cb9c6f5 100644 --- a/ui/src/message/Messages.tsx +++ b/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} diff --git a/ui/src/typedef/react-timeago.d.ts b/ui/src/typedef/react-timeago.d.ts index c815d3d..bd7acf8 100644 --- a/ui/src/typedef/react-timeago.d.ts +++ b/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 {} } + +declare module 'react-timeago/defaultFormatter' { + declare function makeIntlFormatter(options: FormatterOptions): Formatter; +} From 8741d1e50d2e1a23e7d0ef96b8320abdb26832aa Mon Sep 17 00:00:00 2001 From: eternal-flame-AD Date: Tue, 5 Aug 2025 15:31:05 -0500 Subject: [PATCH 3/4] suggestions Signed-off-by: eternal-flame-AD --- ui/src/message/Message.tsx | 143 +++++++++++++++---------------------- 1 file changed, 57 insertions(+), 86 deletions(-) diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx index b947657..47ce682 100644 --- a/ui/src/message/Message.tsx +++ b/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'; @@ -33,6 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({ }, messageContentWrapper: { minWidth: 200, + width: '100%', }, image: { marginRight: 15, @@ -40,34 +41,14 @@ 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', }, @@ -131,10 +112,12 @@ const Message = ({ onExpand, expanded: initialExpanded, }: IProps) => { + const theme = useTheme(); const [previewRef, setPreviewRef] = React.useState(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); @@ -163,73 +146,61 @@ const Message = ({ borderLeftWidth: 6, borderLeftStyle: 'solid', }}> -
- {image !== null ? ( - {`${appName} - ) : null} -
-
-
-
- - {title} - -
-
- - {appName} - -
-
-
- - - - - - -
-
-
- - {renderContent()} +
+
+ {image !== null ? ( + {`${appName} + ) : null} +
+
+
+ + {title} + + + + + +
- {isOverflowing && ( - - )} + + + {renderContent()} +
+ {isOverflowing && ( + + )}
); From 3d8bee8b1135ba52bcc0576c7cea5eae004d6ed1 Mon Sep 17 00:00:00 2001 From: eternal-flame-AD Date: Tue, 5 Aug 2025 19:26:29 -0500 Subject: [PATCH 4/4] Change vite listen port name to GOTIFY_SERVER_PORT Signed-off-by: eternal-flame-AD --- ui/vite.config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/vite.config.ts b/ui/vite.config.ts index 639f6cf..0a68c60 100644 --- a/ui/vite.config.ts +++ b/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, },