feat: use red offline icon for subplebbits that are most likely offline (ipns record fails to update)

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

@@ -39,6 +39,10 @@
  image-rendering: pixelated;
 }
 
+.redOfflineIcon {
+  background-image: url('/public/assets/icons/offline-red.png') !important;
+}
+
 @media (max-width: 640px) {
   .boardTitle {
     padding-top: 40px;

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

@@ -1,12 +1,11 @@
 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';
 import useIsMobile from '../../hooks/use-is-mobile';
+import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 
 const totalBanners = 60;
 
@@ -20,10 +19,8 @@ const ImageBanner = () => {
 };
 
 const BoardHeader = () => {
-  const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
-
   const isInAllView = isAllView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
 
@@ -31,18 +28,14 @@ const BoardHeader = () => {
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { address, shortAddress, updatedAt } = subplebbit || {};
+  const { address, shortAddress } = 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 = 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');
+  const { isOffline, isDefinitelyOffline, offlineTitle } = useIsSubplebbitOffline(subplebbit);
+  const iconClass = `${styles.offlineIcon} ${isDefinitelyOffline ? styles.redOfflineIcon : ''}`;
 
   return (
     <div className={styles.content}>
@@ -53,7 +46,7 @@ const BoardHeader = () => {
       )}
       <div className={styles.boardTitle}>
         {title || `p/${shortAddress || subplebbitAddress}`}
-        {isBoardOffline && <span className={styles.offlineIcon} title={offlineMessage} />}
+        {isOffline && <span className={`${styles.offlineIcon} ${iconClass}`} title={offlineTitle} />}
       </div>
       <div className={styles.boardSubtitle}>{subtitle}</div>
       <hr />

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

@@ -12,7 +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';
+import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 
 type SubmitState = {
   subplebbitAddress: string | undefined;
@@ -272,17 +272,12 @@ const PostForm = () => {
   const [showForm, setShowForm] = useState(false);
 
   const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress });
-  const { updatedAt } = subplebbit || {};
-  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');
+  const { isOffline, offlineTitle } = useIsSubplebbitOffline(subplebbit);
 
   return (
     <>
       <div className={styles.postFormDesktop}>
-        {!(isInAllView || isInSubscriptionsView) && showForm && isBoardOffline && <div className={styles.offlineBoard}>{offlineMessage}</div>}
+        {!(isInAllView || isInSubscriptionsView) && showForm && isOffline && <div className={styles.offlineBoard}>{offlineTitle}</div>}
         {isThreadClosed ? (
           <div className={styles.closed}>
             {t('thread_closed')}
@@ -302,7 +297,7 @@ const PostForm = () => {
         )}
       </div>
       <div className={styles.postFormMobile}>
-        {!(isInAllView || isInSubscriptionsView) && showForm && isBoardOffline && <div className={styles.offlineBoard}>{offlineMessage}</div>}
+        {!(isInAllView || isInSubscriptionsView) && showForm && isOffline && <div className={styles.offlineBoard}>{offlineTitle}</div>}
         {isThreadClosed ? (
           <div className={styles.closed}>
             {t('thread_closed')}