feat: add offline icon to board title, show alert before posting if sub appears offline

src/components/post-form/post-form.module.css

@@ -23,8 +23,15 @@
   text-align: center;
   color: red;
   font-weight: 700;
-  padding-top: 100px;
-  padding-bottom: 100px;
+  padding-top: 100px 0;
+}
+
+.offlineBoard {
+  font-size: 16px;
+  text-align: center;
+  color: red;
+  padding: 30px 0;
+  font-weight: 700;
 }
 
 .postFormTable td:first-child {

src/components/post-form/post-form.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { PublishCommentOptions, setAccount, useAccount, useAccountComment, useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
+import { PublishCommentOptions, setAccount, useAccount, useAccountComment, useComment, usePublishComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { create } from 'zustand';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import { getLinkMediaInfo } from '../../lib/utils/media-utils';
@@ -12,6 +12,7 @@ import useReply from '../../hooks/use-reply';
 import useChallengesStore from '../../stores/use-challenges-store';
 import styles from './post-form.module.css';
 import _ from 'lodash';
+import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 
 type SubmitState = {
   subplebbitAddress: string | undefined;
@@ -271,9 +272,22 @@ const PostForm = () => {
 
   const [showForm, setShowForm] = useState(false);
 
+  const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress });
+  const { updatedAt } = subplebbit || {};
+  const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
+
+  const offlineAlert =
+    showForm &&
+    (updatedAt
+      ? isBoardOffline && (
+          <div className={styles.offlineBoard}>{`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}</div>
+        )
+      : `The subplebbit might be offline and publishing might fail.`);
+
   return (
     <>
       <div className={styles.postFormDesktop}>
+        {offlineAlert}
         {isThreadClosed ? (
           <div className={styles.closed}>
             {t('thread_closed')}
@@ -293,6 +307,7 @@ const PostForm = () => {
         )}
       </div>
       <div className={styles.postFormMobile}>
+        {offlineAlert}
         {isThreadClosed ? (
           <div className={styles.closed}>
             {t('thread_closed')}