add offline indicator to all desktop views

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