add offline indicator to all desktop views

src/components/BoardSubscription.jsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
-import { Tooltip } from 'react-tooltip';
-
-
-const BoardSubscription = ({ address }) => {
-  const subplebbit = useSubplebbit({ subplebbitAddress: address });
-  const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
-
-  return (
-    <>
-      {address}&nbsp;{!isOnline && (
-        <img className="disconnected" alt="offline" src="assets/offline.png"
-        data-tooltip-id="tooltip"
-        data-tooltip-content="OFFLINE"
-        data-tooltip-place="top" />
-      )}
-    </>
-  );
-};
-
-export default BoardSubscription;

src/components/OfflineIndicator.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+
+
+const OfflineIndicator = ({ address, className, tooltipPlace }) => {
+  const subplebbit = useSubplebbit({ subplebbitAddress: address });
+  const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
+
+  return (
+    <>
+      {!isOnline && (
+        <>
+          {" "}
+          <img
+            className={className}
+            alt="offline"
+            src="assets/offline.png"
+            data-tooltip-id="tooltip"
+            data-tooltip-content="OFFLINE"
+            data-tooltip-place={tooltipPlace}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default OfflineIndicator;

src/components/styled/Board.styled.jsx

@@ -30,6 +30,12 @@ export const NavBar = styled.div`
     #board-nav-mobile {
       display: none;
     }
+
+    .offline-nav {
+      width: 12px;
+      position: relative;
+      margin: 2px 2px -2px -2px;
+    }
   }
 
   @media (max-width: 480px) {
@@ -1617,6 +1623,13 @@ export const BoardForm = styled.div`
       margin-top: 10px;
     }
 
+    .offline-sub {
+      width: 13px;
+      margin-right: -5px;
+      margin-bottom: -2px;
+      position: relative;
+    }
+
     ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':

src/components/styled/Home.styled.jsx

@@ -286,18 +286,28 @@ export const BoardsContent = styled.div`
     .boardlink, #view-all {
       font-size: 1.2em;
     }
+
+    .disconnected {
+      width: 15px;
+      margin-bottom: -1px;
+      position: absolute;
+    }
   }
 
   @media (min-width: 480px) {
     #mobile-br {
       display: none;
     }
+
+    .disconnected {
+      width: 11px;
+      margin-bottom: -1px;
+      margin-top: 2px;
+      position: absolute;
+    }
   }
 
-  .disconnected {
+  
-    width: 13px;
-    position: absolute;
-  }
 `;
 
 export const Footer = styled.div`

src/components/views/Board.jsx

@@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
 import { Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
@@ -325,10 +326,8 @@ const Board = () => {
     try {
       if (subscribed === false) {
         await subscribe(selectedAddress);
-        setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`);
       } else if (subscribed === true) {
         await unsubscribe(selectedAddress);
-        setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`);
       }
     } catch (error) {
       setErrorMessage(error);
@@ -360,6 +359,10 @@ const Board = () => {
                   {index === 0 ? null : "\u00a0"}
                   <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
                   >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                  <OfflineIndicator 
+                  address={subplebbit.address} 
+                  className="offline-nav"
+                  tooltipPlace="bottom" />
                   {index !== defaultSubplebbits.length - 1 ? " /" : null}
                 </span>
               ))}

src/components/views/Catalog.jsx

@@ -10,6 +10,7 @@ import { Threads } from '../styled/Catalog.styled';
 import { TopBar, Footer } from '../styled/Thread.styled';
 import CatalogLoader from '../CatalogLoader';
 import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
@@ -239,10 +240,8 @@ const Catalog = () => {
     try {
       if (subscribed === false) {
         await subscribe(selectedAddress);
-        setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`);
       } else if (subscribed === true) {
         await unsubscribe(selectedAddress);
-        setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`);
       }
     } catch (error) {
       setErrorMessage(error);
@@ -273,6 +272,10 @@ 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>
             ))}

src/components/views/Home.jsx

@@ -5,7 +5,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
 import BoardAvatar from '../BoardAvatar';
-import BoardSubscription from '../BoardSubscription';
+import OfflineIndicator from '../OfflineIndicator';
 import packageJson from '../../../package.json'
 import { Tooltip } from 'react-tooltip';
 const {version} = packageJson
@@ -104,7 +104,11 @@ const Home = () => {
                     <>
                       <Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription}`}>
                         <br id="mobile-br" />
-                        <BoardSubscription address={subscription} />
+                        {subscription}&nbsp;
+                        <OfflineIndicator 
+                        address={subscription} 
+                        className="disconnected"
+                        tooltipPlace="top" />
                       </Link>
                       <br />
                     </>

src/components/views/Subscriptions.jsx

@@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
 import { Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
@@ -173,6 +174,10 @@ const Subscriptions = () => {
                 {index === 0 ? null : "\u00a0"}
                 <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
                 >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                <OfflineIndicator 
+                address={subplebbit.address} 
+                className="offline-nav"
+                tooltipPlace="bottom" />
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
             ))}
@@ -387,6 +392,10 @@ const Subscriptions = () => {
                                   >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
                                   )}
                               </Link>
+                              <OfflineIndicator key={`oi-${index}`}
+                              address={thread.subplebbitAddress} 
+                              className="offline-sub"
+                              tooltipPlace="top" />
                               <span key={`rl1-${index}`}>&nbsp;&nbsp;
                                 [
                                 <Link key={`rl2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>

src/components/views/Thread.jsx

@@ -9,6 +9,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
@@ -297,6 +298,10 @@ const Thread = () => {
                 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>
             ))}