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

src/components/board-header/board-header.module.css

@@ -28,6 +28,16 @@
   width: 90%;
 }
 
+.offlineIcon {
+ background-image: url('/public/assets/icons/offline.png');
+ display: inline-block;
+ margin-left: 10px;
+ width: 16px;
+ height: 16px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ image-rendering: pixelated;
+}
 
 @media (max-width: 640px) {
   .bannerCnt {

src/components/board-header/board-header.tsx

@@ -34,12 +34,17 @@ const BoardHeader = () => {
   const title = isInAllView ? multisubMetadata?.title : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
   const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`;
 
+  const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
+
   return (
     <div className={styles.content}>
       <div className={styles.bannerCnt}>
         <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
       </div>
-      <div className={styles.boardTitle}>{title || `p/${shortAddress || subplebbitAddress}`}</div>
+      <div className={styles.boardTitle}>
+        {title || `p/${shortAddress || subplebbitAddress}`}
+        {isBoardOffline && <span className={styles.offlineIcon} />}
+      </div>
       <div className={styles.boardSubtitle}>{subtitle}</div>
       <hr />
     </div>

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')}

src/views/home/boards-box/boards-box.tsx

@@ -192,6 +192,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
     const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
     return isOffline;
   };
+
   const multisubMetadata = useMultisubMetadata();
 
   return (