diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index 7398d104..ca684b44 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -278,11 +278,13 @@ const PostForm = () => {
const offlineAlert =
showForm &&
- (updatedAt
- ? isBoardOffline && (
-
{`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}
- )
- : `The subplebbit might be offline and publishing might fail.`);
+ (updatedAt ? (
+ isBoardOffline && (
+ {`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}
+ )
+ ) : (
+ {`The subplebbit might be offline and publishing might fail.`}
+ ));
return (
<>
diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css
index 968bfee4..ada47ed3 100644
--- a/src/components/reply-modal/reply-modal.module.css
+++ b/src/components/reply-modal/reply-modal.module.css
@@ -91,6 +91,16 @@
top: 1px;
}
+.offlineBoard {
+ width: 292px;
+ font-family: monospace;
+ background-color: #E62020;
+ font-size: 12px;
+ color: white;
+ padding: 3px 7px 3px 5px;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.20);
+}
+
@media (max-width: 640px) {
.container {
position: absolute;
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 2cbc1c43..07b98c0c 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -2,8 +2,9 @@ import { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Draggable from 'react-draggable';
+import { setAccount, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
+import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isValidURL } from '../../lib/utils/url-utils';
import useReply from '../../hooks/use-reply';
import useIsMobile from '../../hooks/use-is-mobile';
@@ -75,6 +76,15 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
}
}, [parentCid]);
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { updatedAt } = subplebbit || {};
+ const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
+ const offlineAlert = updatedAt
+ ? isBoardOffline && (
+ {`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}
+ )
+ : `The subplebbit might be offline and publishing might fail.`;
+
const modalContent = (
@@ -124,6 +134,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
autoFocus={!isMobile} // autofocus causes auto scroll to top on mobile
/>
+ {offlineAlert}
+
{url && (
<>