add CreateBoardModal to all views, update web

src/components/views/All.jsx

@@ -22,6 +22,7 @@ import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -109,6 +110,7 @@ const All = () => {
   const [cidTracker, setCidTracker] = useState({});
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
   const isFeedCached = feedCacheStates['all'];
@@ -516,6 +518,10 @@ const All = () => {
         <title>p/All - plebchan</title>
       </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <ReplyModal 
         selectedStyle={selectedStyle}
         isOpen={isReplyOpen}
@@ -555,9 +561,15 @@ const All = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -582,7 +594,7 @@ const All = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -2301,13 +2313,19 @@ const All = () => {
               </span>
             ))}
               <span className="nav">
-                [
+              [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
-                ]
+                  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>
+              ]
                 [
                 <Link to={`/p/all/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]

src/components/views/AllCatalog.jsx

@@ -14,6 +14,7 @@ import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -70,6 +71,7 @@ const AllCatalog = () => {
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [moderatorPermissions, setModeratorPermissions] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
@@ -330,6 +332,10 @@ const AllCatalog = () => {
       <title>p/All - Catalog - plebchan</title>
       </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -366,11 +372,17 @@ const AllCatalog = () => {
             ]
           </span>
             <span className="nav">
-            [
+              [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -395,7 +407,7 @@ const AllCatalog = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -701,11 +713,17 @@ const AllCatalog = () => {
             </span>
               <span className="nav">
               [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
+                  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>
               ]
                 [
                 <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>

src/components/views/Board.jsx

@@ -23,6 +23,7 @@ import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -135,6 +136,7 @@ const Board = () => {
   const [cidTracker, setCidTracker] = useState({});
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
   const isFeedCached = feedCacheStates[selectedAddress];
@@ -688,6 +690,10 @@ const Board = () => {
         isOpen={isAdminListOpen}
         closeModal={() => setIsAdminListOpen(false)}
         roles={subplebbit.roles} />
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <EditModal
         selectedStyle={selectedStyle}
         isOpen={isEditModalOpen}
@@ -727,9 +733,15 @@ const Board = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -753,9 +765,15 @@ const Board = () => {
                       ))}
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+                    () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                      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>
                 </div>
                 <div className="page-jump">
@@ -2927,9 +2945,15 @@ const Board = () => {
               <span className="nav">
                 [
                 <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+                  () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    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>
                 ]
                 [

src/components/views/Catalog.jsx

@@ -14,6 +14,7 @@ import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -84,6 +85,7 @@ const Catalog = () => {
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [executeAnonMode, setExecuteAnonMode] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
   const { subplebbitAddress } = useParams();
@@ -500,6 +502,10 @@ const Catalog = () => {
         <title>{((selectedTitle ? selectedTitle : selectedAddress) + " - Catalog - plebchan")}</title>
       </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -536,11 +542,17 @@ const Catalog = () => {
             ]
           </span>
             <span className="nav">
-            [
+              [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -565,7 +577,7 @@ const Catalog = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -1148,11 +1160,17 @@ const Catalog = () => {
             ))}
               <span className="nav">
               [
-              <button id="button-span" style={{all: 'unset', cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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</button>
+                )
+              }
+              }>Create Board</span>
               ]
                 [
                 <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>

src/components/views/Description.jsx

@@ -10,6 +10,7 @@ import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.
 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';
@@ -42,6 +43,7 @@ const Description = () => {
   const [visible, setVisible] = useState(true);
   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});
@@ -126,6 +128,10 @@ const Description = () => {
           </title>
         </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <AdminListModal
         selectedStyle={selectedStyle}
         isOpen={isAdminListOpen}
@@ -159,9 +165,15 @@ const Description = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -186,7 +198,7 @@ const Description = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -464,11 +476,17 @@ const Description = () => {
             ))}
             <span className="nav">
               [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
+                  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>
               ]
                 [
                 <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>

src/components/views/Home.jsx

@@ -1,10 +1,11 @@
-import React, { Fragment, useEffect, useRef } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useAccount, useBufferedFeeds } from '@plebbit/plebbit-react-hooks';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/views/Home.styled';
 import BoardAvatar from '../BoardAvatar';
 import OfflineIndicator from '../OfflineIndicator';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json'
 import { Tooltip } from 'react-tooltip';
@@ -29,6 +30,8 @@ const Home = () => {
   const prevStyle = useRef(selectedStyle);
   const prevBodyStyle = useRef(bodyStyle);
 
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
   // preload default subs and subscriptions
   useBufferedFeeds({
     feedsOptions: [
@@ -60,6 +63,10 @@ const Home = () => {
 
   return (
     <>
+      <CreateBoardModal
+      selectedStyle={selectedStyle}
+      isOpen={isCreateBoardOpen}
+      closeModal={() => setIsCreateBoardOpen(false)} />
       <Helmet>
         <title>plebchan</title>
       </Helmet>
@@ -103,9 +110,15 @@ const Home = () => {
               <div id="content">
                 <p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in a community; anyone can post comments, share media links, and <button 
                 style={{all: 'unset', cursor: 'pointer'}}
-                onClick={() => alert(
+                onClick={() =>{
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                  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 a board</button>. All the content is just text, and plebchan's speed depends on how many users are <a href="https://github.com/plebbit/whitepaper/blob/master/contribute.md" target="_blank" rel="noreferrer">seeding</a>. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
                 <br />
                 <p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>

src/components/views/Pending.jsx

@@ -9,6 +9,7 @@ import { ReplyFormLink, TopBar, BottomBar } from '../styled/views/Thread.styled'
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import SettingsModal from '../modals/SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
@@ -38,6 +39,7 @@ const Pending = () => {
   const [, setNewErrorMessage] = useError();
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const subplebbit = useSubplebbit({subplebbitAddress: comment?.subplebbitAddress})
   const selectedTitle = subplebbit?.title;
@@ -117,6 +119,10 @@ const Pending = () => {
         <title>{`plebchan - Pending Thread #${parseInt(index) + 1}`}</title>
       </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -145,9 +151,15 @@ const Pending = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -172,7 +184,7 @@ const Pending = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>

src/components/views/Rules.jsx

@@ -9,6 +9,7 @@ import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import ImageBanner from '../ImageBanner';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import AdminListModal from '../modals/AdminListModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -47,6 +48,7 @@ const Rules = () => {
   const [visible, setVisible] = useState(true);
   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});
@@ -131,6 +133,10 @@ const Rules = () => {
           </title>
         </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <AdminListModal
         selectedStyle={selectedStyle}
         isOpen={isAdminListOpen}
@@ -164,9 +170,15 @@ const Rules = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -191,7 +203,7 @@ const Rules = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -461,11 +473,17 @@ const Rules = () => {
             ))}
             <span className="nav">
               [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
+                  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>
               ]
                 [
                 <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>

src/components/views/Subscriptions.jsx

@@ -23,6 +23,7 @@ import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -109,6 +110,7 @@ const Subscriptions = () => {
   const [cidTracker, setCidTracker] = useState({});
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
   const isFeedCached = feedCacheStates['subscriptions'];
@@ -518,6 +520,10 @@ const Subscriptions = () => {
         <title>Subscriptions - plebchan</title>
       </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <ReplyModal 
         selectedStyle={selectedStyle}
         isOpen={isReplyOpen}
@@ -557,9 +563,15 @@ const Subscriptions = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -584,7 +596,7 @@ const Subscriptions = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -2307,13 +2319,19 @@ const Subscriptions = () => {
               </span>
             ))}
               <span className="nav">
-                [
+              [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
-                ]
+                  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>
+              ]
                 [
                 <Link to={`/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]

src/components/views/SubscriptionsCatalog.jsx

@@ -15,6 +15,7 @@ import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
@@ -69,6 +70,7 @@ const SubscriptionsCatalog = () => {
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
   const [moderatorPermissions, setModeratorPermissions] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
@@ -326,6 +328,10 @@ const SubscriptionsCatalog = () => {
       <title>Subscriptions - Catalog - plebchan</title>
       </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -362,11 +368,17 @@ const SubscriptionsCatalog = () => {
             ]
           </span>
             <span className="nav">
-            [
+              [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -391,7 +403,7 @@ const SubscriptionsCatalog = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -703,11 +715,17 @@ const SubscriptionsCatalog = () => {
             </span>
               <span className="nav">
               [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
+                  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>
               ]
                 [
                 <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>

src/components/views/Thread.jsx

@@ -21,6 +21,7 @@ import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import VerifiedAuthor from '../VerifiedAuthor';
+import CreateBoardModal from '../modals/CreateBoardModal';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -114,6 +115,7 @@ const Thread = () => {
   const [cidTracker, setCidTracker] = useState({});
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
 
   useAnonMode(selectedThread, anonymousMode && executeAnonMode);
@@ -591,6 +593,10 @@ const Thread = () => {
           </title>
         </Helmet>
       <Container>
+        <CreateBoardModal
+        selectedStyle={selectedStyle}
+        isOpen={isCreateBoardOpen}
+        closeModal={() => setIsCreateBoardOpen(false)} />
         <ReplyModal 
         selectedStyle={selectedStyle}
         isOpen={isReplyOpen}
@@ -633,9 +639,15 @@ const Thread = () => {
             <span className="nav">
               [
               <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                () => alert(
+              () => {
-                  'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                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>
               ]
               [
@@ -660,7 +672,7 @@ const Thread = () => {
                   </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                    '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>
                 </div>
@@ -2222,11 +2234,17 @@ const Thread = () => {
             ))}
             <span className="nav">
               [
-                <span id="button-span" style={{cursor: 'pointer'}} onClick={
+              <span id="button-span" style={{cursor: 'pointer'}} onClick={
-                  () => alert(
+              () => {
-                    'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
+                window.electron && window.electron.isElectron ? (
-                    )
+                  setIsCreateBoardOpen(true)
-                }>Create Board</span>
+                ) : (
+                  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>
               ]
                 [
                 <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>