add offline indicators to SubscriptionsCatalog

src/components/BoardAvatar.jsx

@@ -25,7 +25,7 @@ const BoardAvatar = ({ address }) => {
         {!isOnline && (
           <img className="offline-indicator" alt="offline" src="assets/offline.png"
           data-tooltip-id="tooltip"
-          data-tooltip-content="OFFLINE"
+          data-tooltip-content="Offline"
           data-tooltip-place="top" />
         )}
       </div>

src/components/OfflineIndicator.jsx

@@ -16,7 +16,7 @@ const OfflineIndicator = ({ address, className, tooltipPlace }) => {
             alt="offline"
             src="assets/offline.png"
             data-tooltip-id="tooltip"
-            data-tooltip-content="OFFLINE"
+            data-tooltip-content="Offline"
             data-tooltip-place={tooltipPlace}
           />
         </>

src/components/styled/Catalog.styled.jsx

@@ -39,6 +39,18 @@ export const Threads = styled.div`
     text-align: right;
   }
 
+  .offline-icon {
+    height: 16px;
+    margin: 2px;
+  }
+
+  .offline-icon-no-link {
+    height: 13px;
+    position: absolute;
+    margin-left: 13px;
+    margin-top: -2px;
+  }
+
   .sticky-icon {
     background-image: url(assets/sticky.gif);
     width: 16px;

src/components/views/Catalog.jsx

@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
 import { useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -282,10 +283,6 @@ const Catalog = () => {
                 setSelectedAddress(subplebbit.address);
                 }}
                 >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                <OfflineIndicator 
-                address={subplebbit.address} 
-                className="offline-nav"
-                tooltipPlace="bottom" />
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
             ))}
@@ -342,7 +339,12 @@ const Catalog = () => {
             </div>
               <>
               <div className="board-title">{selectedTitle}</div>
-              <div className="board-address">p/{selectedAddress}</div>
+              <div className="board-address">p/{selectedAddress}
+                <OfflineIndicator 
+                address={selectedAddress} 
+                className="offline"
+                tooltipPlace="top" />
+              </div>
               </>
           </>
         </Header>
@@ -438,6 +440,7 @@ const Catalog = () => {
           </div>
           <hr />
         </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
           {feed.length < 1 ? (
             <CatalogLoader />

src/components/views/SubscriptionsCatalog.jsx

@@ -2,6 +2,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
 import { useAccount, useFeed } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -106,10 +107,6 @@ const SubscriptionsCatalog = () => {
                 setSelectedAddress(subplebbit.address);
                 }}
                 >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                <OfflineIndicator 
-                address={subplebbit.address} 
-                className="offline-nav"
-                tooltipPlace="bottom" />
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
             ))}
@@ -203,6 +200,7 @@ const SubscriptionsCatalog = () => {
           </div>
           <hr />
         </TopBar>
+        <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
           {selectedFeed.length < 1 ? (
             <CatalogLoader />
@@ -254,9 +252,21 @@ const SubscriptionsCatalog = () => {
                             ) : null}
                           </Fragment>
                         ) : null}
-                      {/* <div key={`ti-${index}`} className="thread-icons" >
-                        <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span>
-                      </div> */}
+                      <div key={`ti-${index}`} className="thread-icons" >
+                        {thread.link ? (
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span> */
+                          <OfflineIndicator 
+                          address={thread.subplebbitAddress} 
+                          className="thread-icon offline-icon"
+                          tooltipPlace="top" />
+                        ) : (
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky"></span> */
+                          <OfflineIndicator 
+                          address={thread.subplebbitAddress} 
+                          className="thread-icon offline-icon-no-link"
+                          tooltipPlace="top" />
+                        ) }
+                      </div>
                       <div key={`meta-${index}`} className="meta" title="(R)eplies / (I)mage Replies" >
                         R:
                         <b key={`b-${index}`}>{thread.replyCount}</b>