Revert "add refresh button"

This reverts commit 9057256571.
2026-08-03 07:41:04 +02:00 · 2023-07-31 08:59:17 +02:00
parent 9057256571
commit f7ae7e78df
6 changed files with 2255 additions and 2309 deletions
@@ -1,25 +1,25 @@
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
-import packageJson from '../../../package.json';
-import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { debounce } from 'lodash';
+import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
+import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
+import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import ImageBanner from '../ImageBanner';
+import Post from '../Post';
+import CreateBoardModal from '../modals/CreateBoardModal';
+import AdminListModal from '../modals/AdminListModal';
+import OfflineIndicator from '../OfflineIndicator';
+import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
 import handleImageClick from '../../utils/handleImageClick';
 import handleStyleChange from '../../utils/handleStyleChange';
-import ImageBanner from '../ImageBanner';
-import OfflineIndicator from '../OfflineIndicator';
-import Post from '../Post';
-import AdminListModal from '../modals/AdminListModal';
-import CreateBoardModal from '../modals/CreateBoardModal';
-import SettingsModal from '../modals/SettingsModal';
-import { Break, Container, Header, NavBar, PostForm, PostMenu } from '../styled/views/Board.styled';
-import { PostMenuCatalog } from '../styled/views/Catalog.styled';
-import { BoardForm, Footer, ReplyFormLink, TopBar } from '../styled/views/Thread.styled';
-const { version } = packageJson
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
+import packageJson from '../../../package.json'
+const {version} = packageJson


 const Description = () => {
@@ -31,7 +31,7 @@ const Description = () => {
    selectedThread,
    setSelectedTitle,
  } = useGeneralStore(state => state);
-
+  
  const navigate = useNavigate();

  const threadMenuRefs = useRef({});
@@ -41,13 +41,13 @@ const Description = () => {
  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
  const [prevScrollPos, setPrevScrollPos] = useState(0);
  const [visible, setVisible] = useState(true);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
  const [openMenuCid, setOpenMenuCid] = useState(null);
  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);

-  const { subplebbitAddress, threadCid } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
-
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
+  

  const handleOptionClick = () => {
    setOpenMenuCid(null);
@@ -66,13 +66,13 @@ const Description = () => {
    } else {
      document.removeEventListener('click', handleOutsideClick);
    }
-
+    
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, [openMenuCid, handleOutsideClick]);

-
+  
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
@@ -99,9 +99,9 @@ const Description = () => {
      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
      setPrevScrollPos(currentScrollPos);
    }, 50);
-
+  
    window.addEventListener('scroll', debouncedHandleScroll);
-
+  
    return () => window.removeEventListener('scroll', debouncedHandleScroll);
  }, [prevScrollPos, visible]);

@@ -127,57 +127,57 @@ const Description = () => {
  return (
    <>
      <Helmet>
-        <title>
+          <title>
          {"Board Description - " + (subplebbit.title || subplebbit.address) + " - plebchan"}
-        </title>
-      </Helmet>
+          </title>
+        </Helmet>
      <Container>
        <CreateBoardModal
-          selectedStyle={selectedStyle}
-          isOpen={isCreateBoardOpen}
-          closeModal={() => setIsCreateBoardOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
        <AdminListModal
-          selectedStyle={selectedStyle}
-          isOpen={isAdminListOpen}
-          closeModal={() => setIsAdminListOpen(false)}
-          roles={subplebbit.roles} />
+        selectedStyle={selectedStyle}
+        isOpen={isAdminListOpen}
+        closeModal={() => setIsAdminListOpen(false)}
+        roles={subplebbit.roles} />
        <SettingsModal
-          selectedStyle={selectedStyle}
-          isOpen={isSettingsOpen}
-          closeModal={() => setIsSettingsOpen(false)} />
+        selectedStyle={selectedStyle}
+        isOpen={isSettingsOpen}
+        closeModal={() => setIsSettingsOpen(false)} />
        <NavBar selectedStyle={selectedStyle}>
          <>
-            <span className="boardList">
-              [
+          <span className="boardList">
+            [
              <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
              <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-              ]&nbsp;[
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              ]
-            </span>
+            ]&nbsp;[
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+              </span>
+            ))}
+            ]
+          </span>
            <span className="nav">
              [
-              <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                () => {
-                  window.electron && window.electron.isElectron ? (
-                    setIsCreateBoardOpen(true)
-                  ) : (
-                    alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                    )
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                  )
-                }
+                )
+              }
              }>Create Board</span>
              ]
              [
@@ -196,20 +196,20 @@ const Description = () => {
                    <option value="all">All</option>
                    <option value="subscriptions">Subscriptions</option>
                    {defaultSubplebbits.map(subplebbit => (
-                      <option key={`option-${subplebbit.address}`} value={subplebbit.address}
-                      >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
-                    ))}
-                  </select>
-                  <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                    () => alert(
-                      'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
+                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
+                      ))}
+                  </select> 
+                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+                  () => alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
                    )
                  }>Create Board</span>
                </div>
                <div className="page-jump">
                  <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                  &nbsp;
-                  <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
+                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
                </div>
              </div>
            </div>
@@ -222,43 +222,33 @@ const Description = () => {
            <div className="banner">
              <ImageBanner />
            </div>
-            <>
+              <>
              <div className="board-title">{subplebbit.title ?? null}</div>
              <div className="board-address">p/{subplebbit.address}
-                <OfflineIndicator
-                  address={subplebbit.address}
-                  className="offline"
-                  tooltipPlace="top" />
+                <OfflineIndicator 
+                address={subplebbit.address} 
+                className="offline"
+                tooltipPlace="top" />
              </div>
-            </>
+              </>
          </>
        </Header>
        <Break selectedStyle={selectedStyle} />
        <PostForm selectedStyle={selectedStyle}>
-          <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
-            <div id="return-button-mobile">
-              <span className="btn-wrap" onClick={() => { window.scrollTo(0, 0) }}>
+          <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{marginBottom: '10px'}}>
+          <div id="return-button-mobile">
+              <span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
                <Link to={`/p/${selectedAddress}`}>Return</Link>
              </span>
            </div>
-            <div id="reload-button-mobile">
-
-              <span className="reload-button catalog-button" id="bottom-button-desktop-description">
-                [
-                <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-                  onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-                  onTouchStart={() => window.location.reload()}>Refresh</span>
-                ]
-              </span>
-            </div>
            <div id="catalog-button-mobile">
              <span className="btn-wrap">
-                <Link to={`/p/${selectedAddress}/catalog`} onClick={() => { window.scrollTo(0, 0) }}>Catalog</Link>
+                <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
              </span>
            </div>
            <div id="bottom-button-mobile">
              <span className="btn-wrap">
-                <span style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Bottom</span>
+                <span style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</span>
              </span>
            </div>
          </ReplyFormLink>
@@ -266,7 +256,7 @@ const Description = () => {
        <TopBar selectedStyle={selectedStyle}>
          <span className="style-changer">
            Style:
-
+             
            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
              <option value="Yotsuba">Yotsuba</option>
              <option value="Yotsuba-B">Yotsuba B</option>
@@ -281,13 +271,6 @@ const Description = () => {
            <Link to={`/p/${selectedAddress}`}>Return</Link>
            ]
          </span>
-          <span className="return-button catalog-button" id="refresh-button-desktop">
-            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.location.reload()}>Refresh</span>
-            ]
-          </span>
          <span className="return-button catalog-button" id="catalog-button-desktop">
            [
            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
@@ -295,9 +278,9 @@ const Description = () => {
          </span>
          <span className="return-button catalog-button" id="bottom-button-desktop">
            [
-            <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)}
-              onMouseOver={(event) => event.target.style.cursor = 'pointer'}
-              onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
+            <span id="button" style={{cursor: 'pointer'}} onClick={() =>  window.scrollTo(0, document.body.scrollHeight)} 
+            onMouseOver={(event) => event.target.style.cursor='pointer'} 
+            onTouchStart={() =>  window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
            ]
          </span>
        </TopBar>
@@ -306,88 +289,86 @@ const Description = () => {
          <>
            <div className="thread">
              <div className="op-container" style={{
-                display: subplebbit.rules ? "grid" : "block",
-                marginBottom: '10px',
+              display: subplebbit.rules ? "grid" : "block",
+              marginBottom: '10px',
              }}>
                <div className="post op op-desktop">
                  <hr />
                  <div className="post-info">
                    {subplebbit.suggested?.avatarUrl ? (
-                      <div className="file" style={{ marginBottom: "5px" }}>
+                      <div className="file" style={{marginBottom: "5px"}}>
                        <div className="file-text">
                          Link:&nbsp;
-                          <a href={subplebbit.suggested?.avatarUrl}
-                            target="_blank" rel="noopener noreferrer">{
-                              subplebbit.suggested?.avatarUrl.length > 30 ?
-                                subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
-                                subplebbit.suggested?.avatarUrl
-                            }
+                          <a href={subplebbit.suggested?.avatarUrl} 
+                          target="_blank" rel="noopener noreferrer">{
+                          subplebbit.suggested?.avatarUrl.length > 30 ?
+                          subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
+                          subplebbit.suggested?.avatarUrl
+                          }
                          </a>&nbsp;(image)
                        </div>
                        <div className="img-container">
                          <span className="file-thumb">
                            <img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
-                              onClick={handleImageClick}
-                              style={{ cursor: "pointer" }} />
+                            onClick={handleImageClick}
+                            style={{cursor: "pointer"}} />
                          </span>
                        </div>
                      </div>
-                    ) : null}
+                      ) : null}
                    <span className="name-block">
                      <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
                      &nbsp;
                      <span className="name capcode"
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => { setIsAdminListOpen(!isAdminListOpen) }}
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
                      >## Board Admins</span>
                      &nbsp;
                      <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                      &nbsp;
-                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{ marginBottom: "-1px", imageRendering: 'pixelated' }} />
+                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                      &nbsp;
-                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{ marginBottom: "-1px", imageRendering: 'pixelated' }} />
+                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                      <span>&nbsp;
-                        [
-                        <Link to={() => { }} style={{ textDecoration: "none" }} className="reply-link">Reply</Link>
-                        ]
+                          [
+                          <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
+                          ]
                      </span>
-                      <PostMenu
+                      <PostMenu 
                        title="Post menu"
-                        ref={el => {
+                        ref={el => { 
                          threadMenuRefs.current[subplebbit.pubsubTopic] = el;
                        }}
-                        className='post-menu-button'
+                        className='post-menu-button' 
                        rotated={openMenuCid === subplebbit.pubsubTopic}
                        onClick={(event) => {
                          event.stopPropagation();
                          const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
-                          setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
+                          setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
                          setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
                        }}
                      >
                        ▶
                      </PostMenu>
                      {createPortal(
-                        <PostMenuCatalog selectedStyle={selectedStyle}
-                          ref={el => { postMenuCatalogRef.current = el }}
-                          onClick={(event) => event.stopPropagation()}
-                          style={{
-                            position: "absolute",
-                            top: menuPosition.top + 7,
-                            left: menuPosition.left
-                          }}>
-                          <div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
-                            style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
-                          >
-                            <ul className="post-menu-catalog">
-                              <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
-                              {/* {isModerator ? (
+                        <PostMenuCatalog selectedStyle={selectedStyle} 
+                        ref={el => {postMenuCatalogRef.current = el}}
+                        onClick={(event) => event.stopPropagation()}
+                        style={{position: "absolute", 
+                        top: menuPosition.top + 7, 
+                        left: menuPosition.left}}>
+                        <div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
+                        style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
+                        >
+                          <ul className="post-menu-catalog">
+                            <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
+                            {/* {isModerator ? (
                              <>
                                change description
                              </>
                            ) : null} */}
-                            </ul>
-                          </div>
+                          </ul>
+                        </div>
                        </PostMenuCatalog>, document.body
                      )}
                    </span>
@@ -406,22 +387,22 @@ const Description = () => {
                <div className="post op op-mobile">
                  <div className="post-info-mobile">
                    <button className="post-menu-button-mobile"
-                      style={{ all: 'unset', cursor: 'pointer' }}>...</button>
+                    style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                    <span className="name-block-mobile">
                      <span className="name-mobile capcode"
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => { setIsAdminListOpen(!isAdminListOpen) }}
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
                      >## Board Admins</span>
                      &nbsp;
                      <span className="thread-icons-mobile"
-                        style={{ float: "right", marginRight: "18px" }}>
-                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{ marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated' }} />
+                      style={{float: "right", marginRight: "18px"}}>
+                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                        &nbsp;
-                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{ marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated' }} />
+                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                      </span>
                      <br />
                      <span className="subject-mobile"
-                        style={{ marginBottom: "-15px" }}>Welcome to {subplebbit.title || subplebbit.address}</span>
+                    style={{marginBottom: "-15px"}}>Welcome to {subplebbit.title || subplebbit.address}</span>
                      &nbsp;
                    </span>
                    <span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
@@ -432,8 +413,8 @@ const Description = () => {
                      <div className="img-container">
                        <span className="file-thumb-mobile">
                          <img src={subplebbit.suggested.avatarUrl} alt="board avatar"
-                            onClick={handleImageClick}
-                            style={{ cursor: "pointer" }} />
+                          onClick={handleImageClick}
+                          style={{cursor: "pointer"}} />
                          <div className="file-info-mobile">image</div>
                        </span>
                      </div>
@@ -446,7 +427,7 @@ const Description = () => {
                  </blockquote>
                </div>
                <div className="post-link-mobile">
-                  <Link to={() => { }} className="button-mobile">View Thread</Link>
+                  <Link to={() => {}} className="button-mobile">View Thread</Link>
                </div>
              </div>
            </div>
@@ -465,7 +446,7 @@ const Description = () => {
            marginTop: "2px",
          }}>
            Style:
-
+             
            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
              <option value="Yotsuba">Yotsuba</option>
              <option value="Yotsuba-B">Yotsuba B</option>
@@ -479,43 +460,43 @@ const Description = () => {
            marginTop: "42px",
          }}>
            <>
-              <span className="boardList">
-                [
+            <span className="boardList">
+              [
                <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-                /
+                 / 
                <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
-                ]&nbsp;
+              ]&nbsp;
+            </span>
+            {defaultSubplebbits.map((subplebbit, index) => (
+              <span className="boardList" key={`span-${subplebbit.address}`}>
+                {index === 0 ? null : "\u00a0"}
+                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+                setSelectedTitle(subplebbit.title);
+                setSelectedAddress(subplebbit.address);
+                }}
+                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                {index !== defaultSubplebbits.length - 1 ? " /" : null}
              </span>
-              {defaultSubplebbits.map((subplebbit, index) => (
-                <span className="boardList" key={`span-${subplebbit.address}`}>
-                  {index === 0 ? null : "\u00a0"}
-                  <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
-                    setSelectedTitle(subplebbit.title);
-                    setSelectedAddress(subplebbit.address);
-                  }}
-                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                  {index !== defaultSubplebbits.length - 1 ? " /" : null}
-                </span>
-              ))}
-              <span className="nav">
-                [
-                <span id="button-span" style={{ cursor: 'pointer' }} onClick={
-                  () => {
-                    window.electron && window.electron.isElectron ? (
-                      setIsCreateBoardOpen(true)
-                    ) : (
-                      alert(
-                        'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n'
-                      )
-                    )
-                  }
-                }>Create Board</span>
-                ]
+            ))}
+            <span className="nav">
+              [
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              () => {
+                window.electron && window.electron.isElectron ? (
+                  setIsCreateBoardOpen(true)
+                ) : (
+                  alert(
+                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+                  )
+                )
+              }
+              }>Create Board</span>
+              ]
                [
                <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                ]
                [
-                <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                )}>Home</Link>
                ]
              </span>
@@ -532,13 +513,13 @@ const Description = () => {
              marginTop: "5px",
              marginBottom: "15px",
            }}>
-            <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
-            &nbsp;•&nbsp;
-            <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
          </div>
        </Footer>
      </Container>