feat(directory-modal): add modal explaining how to submit boards to directories

src/components/directory-modal/directory-modal.module.css

@@ -0,0 +1,119 @@
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.5);
+  z-index: 999;
+}
+
+.directoryDialog {
+  position: absolute;
+  width: 500px;
+  top: 50px;
+  left: 50%;
+  margin-left: -251px;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgb(136, 0, 0);
+  color: rgb(136, 0, 0);
+  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px 1px;
+  font-family: arial, helvetica, clean, sans-serif;
+  font-size: 13px;
+  line-height: 16.003px;
+  z-index: 1000;
+}
+
+@media (max-width: 600px) {
+  .directoryDialog {
+    width: calc(100% - 20px);
+    margin-left: -50%;
+    left: 50%;
+    max-width: 500px;
+  }
+}
+
+.hd {
+  position: relative;
+  background-color: rgb(136, 0, 0);
+  color: rgb(255, 255, 255);
+  padding: 4px 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hd h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 131%;
+  font-weight: bold;
+}
+
+.closeButton {
+  all: unset;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background-image: var(--disclaimer-modal-close-button-background-image);
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.bd {
+  padding: 10px;
+}
+
+.introMessage {
+  font-size: 15px;
+  margin: 10px 0 20px 0;
+  text-align: center;
+}
+
+.introMessage strong {
+  font-weight: bold;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.section h3 {
+  margin: 0 0 8px 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: bold;
+  color: rgb(136, 0, 0);
+}
+
+.section p {
+  margin: 0 0 12px 0;
+  font-size: 13px;
+  line-height: 16.003px;
+}
+
+.section p:last-child {
+  margin-bottom: 0;
+}
+
+.bd a {
+  color: rgb(136, 0, 0);
+  text-decoration: underline;
+}
+
+.directoryFooter {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+

src/components/directory-modal/directory-modal.tsx

@@ -0,0 +1,105 @@
+import useDirectoryModalStore from '../../stores/use-directory-modal-store';
+import styles from './directory-modal.module.css';
+
+const DirectoryModal = () => {
+  const { showModal, closeDirectoryModal } = useDirectoryModalStore();
+
+  if (!showModal) {
+    return null;
+  }
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      closeDirectoryModal();
+    }
+  };
+
+  return (
+    <div className={styles.backdrop} onClick={handleBackdropClick}>
+      <div className={styles.directoryDialog}>
+        <div className={styles.hd}>
+          <h2>Submit a Board to a Directory</h2>
+          <button className={styles.closeButton} onClick={closeDirectoryModal} title='Close' />
+        </div>
+        <div className={styles.bd}>
+          <p className={styles.introMessage}>
+            <strong>The board you clicked on doesn&apos;t exist yet, but it can be yours!</strong>
+          </p>
+
+          <div className={styles.section}>
+            <h3>What is a directory board vs a regular board?</h3>
+            <p>
+              On 5chan, anyone can create and connect to any board using its address. A &quot;directory board&quot; is simply a board that has been assigned to a specific
+              directory category (like &quot;Anime & Manga&quot; or &quot;Video Games&quot;) in the boards list on the homepage. This assignment is temporary and
+              handpicked by the devs until DAO curation is implemented.
+            </p>
+            <p>
+              <strong>Important:</strong> Anyone can create a board and users can access it at any time, regardless of whether it&apos;s assigned to a directory or not.
+              You can use the search bar on the homepage to connect to any board address peer-to-peer, even if it&apos;s not added as a directory. Additionally, every
+              board has a &quot;[Subscribe]&quot; button—when you subscribe to a board, it will appear in the top bar on the boards page, making it easy to access your
+              favorite boards regardless of directory assignment.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>How to create your own board</h3>
+            <p>
+              You can create a board using either the{' '}
+              <a href='https://plebbit.github.io/docs/learn/clients/5chan/create-a-board' target='_blank' rel='noopener noreferrer'>
+                Seedit GUI client
+              </a>{' '}
+              or the{' '}
+              <a href='https://github.com/plebbit/plebbit-cli' target='_blank' rel='noopener noreferrer'>
+                plebbit-cli command line interface
+              </a>
+              . Once created, anyone can connect to your board using its address, regardless of whether it&apos;s assigned to a directory or not.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Requirements for directory assignment</h3>
+            <p>
+              To have your board assigned to a directory, it should be active, well-moderated, and relevant to the directory category. Most importantly, it should have
+              99% uptime, since a board acts like its own server (it&apos;s a P2P node). The devs review submissions and reserve the right to approve or reject them based
+              on these criteria.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>How to submit your board</h3>
+            <p>
+              To request your board be added to a directory, open a pull request on GitHub by editing the{' '}
+              <a href='https://github.com/plebbit/lists/blob/master/5chan-multisub.json' target='_blank' rel='noopener noreferrer'>
+                5chan-multisub.json file
+              </a>
+              . Add your board&apos;s entry with its title, address, and NSFW status (if applicable). The devs will review your PR and merge it if approved.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Future roadmap</h3>
+            <p>
+              In the future, directory board assignments will be determined through gasless voting using pubsub. Community members will vote on which board should be
+              assigned to each directory, and the highest voted board will automatically become the directory board. This will make the process fully decentralized and
+              community-driven.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Dev veto power</h3>
+            <p>
+              While the devs reserve the right to change directory resolutions, this is done through commits in the fully open-source repository. There is no centralized
+              or server-side action required—anyone can change the directory resolution by modifying the code and redeploying to their own domain. 5chan is adminless, and
+              the app itself has no owner or central authority.
+            </p>
+          </div>
+        </div>
+        <div className={styles.directoryFooter}>
+          <button onClick={closeDirectoryModal}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DirectoryModal;

src/components/directory-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './directory-modal';

src/components/topbar/topbar.tsx

@@ -6,6 +6,7 @@ import { useAccount, useAccountComment, useAccountSubplebbits } from '@plebbit/p
 import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import { TimeFilter } from '../board-buttons';
+import useDirectoryModalStore from '../../stores/use-directory-modal-store';
 import styles from './topbar.module.css';
 import _, { debounce } from 'lodash';
 
@@ -75,6 +76,7 @@ const TopBarDesktop = () => {
   const params = useParams();
   const isInCatalogView = isCatalogView(location.pathname, params);
   const [showSearchBar, setShowSearchBar] = useState(false);
+  const { openDirectoryModal } = useDirectoryModalStore();
 
   const subscriptions = account?.subscriptions;
 
@@ -108,16 +110,8 @@ const TopBarDesktop = () => {
           </>
         )}
         [
-        <span className={styles.temporaryButton}>
-          <a href='https://plebbit.github.io/docs/learn/clients/5chan/create-a-board' target='_blank' rel='noopener noreferrer'>
-            {t('create_board')}
-          </a>
-        </span>
-        ] [
-        <span className={styles.temporaryButton}>
-          <a href='https://seedit.app/#/communities/vote' target='_blank' rel='noopener noreferrer'>
-            {t('vote')}
-          </a>
+        <span className={styles.temporaryButton} onClick={openDirectoryModal} style={{ cursor: 'pointer' }}>
+          {t('create_board')}
         </span>
         ]
       </span>