feat(board header): add sub online status info to offline icon title

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

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import styles from './board-header.module.css';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
@@ -17,6 +19,7 @@ const ImageBanner = () => {
 };
 
 const BoardHeader = () => {
+  const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
 
@@ -27,14 +30,18 @@ const BoardHeader = () => {
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { address, shortAddress } = subplebbit || {};
+  const { address, shortAddress, updatedAt } = subplebbit || {};
 
   const multisubMetadata = useMultisubMetadata();
 
   const title = isInAllView ? multisubMetadata?.title || 'all' : 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;
+  const isBoardOffline = updatedAt && updatedAt < Date.now() / 1000 - 60 * 60;
+
+  const offlineMessage = updatedAt
+    ? isBoardOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
+    : t('subplebbit_offline_info');
 
   return (
     <div className={styles.content}>
@@ -43,7 +50,7 @@ const BoardHeader = () => {
       </div>
       <div className={styles.boardTitle}>
         {title || `p/${shortAddress || subplebbitAddress}`}
-        {isBoardOffline && <span className={styles.offlineIcon} />}
+        {isBoardOffline && <span className={styles.offlineIcon} title={offlineMessage} />}
       </div>
       <div className={styles.boardSubtitle}>{subtitle}</div>
       <hr />

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

@@ -23,14 +23,14 @@
   text-align: center;
   color: red;
   font-weight: 700;
-  padding: 100px 0;
+  padding: 100px 15px;
 }
 
 .offlineBoard {
   font-size: 16px;
   text-align: center;
   color: red;
-  padding: 30px 0;
+  padding: 30px 15px;
   font-weight: 700;
 }
 

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

@@ -273,22 +273,16 @@ const PostForm = () => {
 
   const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress });
   const { updatedAt } = subplebbit || {};
-  const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
+  const isBoardOffline = updatedAt && updatedAt < Date.now() / 1000 - 60 * 60;
 
-  const offlineAlert =
+  const offlineMessage = updatedAt
-    showForm &&
+    ? isBoardOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
-    (updatedAt ? (
+    : t('subplebbit_offline_info');
-      isBoardOffline && (
-        <div className={styles.offlineBoard}>{t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })}</div>
-      )
-    ) : (
-      <div className={styles.offlineBoard}>{t('subplebbit_offline_info')}</div>
-    ));
 
   return (
     <>
       <div className={styles.postFormDesktop}>
-        {!(isInAllView || isInSubscriptionsView) && offlineAlert}
+        {!(isInAllView || isInSubscriptionsView) && showForm && <div className={styles.offlineBoard}>{offlineMessage}</div>}
         {isThreadClosed ? (
           <div className={styles.closed}>
             {t('thread_closed')}
@@ -308,7 +302,7 @@ const PostForm = () => {
         )}
       </div>
       <div className={styles.postFormMobile}>
-        {!(isInAllView || isInSubscriptionsView) && offlineAlert}
+        {!(isInAllView || isInSubscriptionsView) && showForm && <div className={styles.offlineBoard}>{offlineMessage}</div>}
         {isThreadClosed ? (
           <div className={styles.closed}>
             {t('thread_closed')}