refactor(modals): split directory modal into separate create board modal

Separate DirectoryModal (for home view placeholders) and CreateBoardModal (for board view create button) into distinct components with their own stores, allowing independent styling and cleaner separation of concerns.

src/components/create-board-modal/create-board-modal.module.css

@@ -0,0 +1,109 @@
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.5);
+  z-index: 999;
+}
+
+.createBoardDialog {
+  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) {
+  .createBoardDialog {
+    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;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.section h3 {
+  margin: 0 0 8px 0;
+  padding: 0;
+  font-size: 14px;
+  font-weight: bold;
+  color: rgb(136, 0, 0);
+  letter-spacing: 0.3px;
+}
+
+.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;
+}
+
+.createBoardFooter {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+

src/components/create-board-modal/create-board-modal.tsx

@@ -0,0 +1,80 @@
+import useCreateBoardModalStore from '../../stores/use-create-board-modal-store';
+import styles from './create-board-modal.module.css';
+
+const CreateBoardModal = () => {
+  const { showModal, closeCreateBoardModal } = useCreateBoardModalStore();
+
+  if (!showModal) {
+    return null;
+  }
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      closeCreateBoardModal();
+    }
+  };
+
+  return (
+    <div className={styles.backdrop} onClick={handleBackdropClick}>
+      <div className={styles.createBoardDialog}>
+        <div className={styles.hd}>
+          <h2>Create a Board</h2>
+          <button className={styles.closeButton} onClick={closeCreateBoardModal} title='Close' />
+        </div>
+        <div className={styles.bd}>
+          <div className={styles.section}>
+            <h3>Creating Your Board</h3>
+            <p>
+              Create a board using the{' '}
+              <a href='https://plebbit.github.io/docs/learn/clients/5chan/create-a-board' target='_blank' rel='noopener noreferrer'>
+                Seedit GUI client
+              </a>{' '}
+              or{' '}
+              <a href='https://github.com/plebbit/plebbit-cli' target='_blank' rel='noopener noreferrer'>
+                plebbit-cli
+              </a>
+              . <strong>Build a following:</strong> Users can subscribe to your board via the &quot;[Subscribe]&quot; button, which adds it to their top bar. You can gain
+              subscribers through direct links, word of mouth, or search—no directory assignment or dev approval needed.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Submitting to a Directory</h3>
+            <p>
+              Open a PR editing{' '}
+              <a href='https://github.com/plebbit/lists/blob/master/5chan-multisub.json' target='_blank' rel='noopener noreferrer'>
+                5chan-multisub.json
+              </a>{' '}
+              with your board&apos;s title, address, and NSFW status. Devs will review and merge if approved. 99% uptime is required.
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Future: DAO Voting</h3>
+            <p>
+              Directory assignments will use gasless pubsub voting—communities vote, highest-voted board wins the slot. <strong>Voting pages = discovery:</strong> Each
+              directory&apos;s voting page lists all competing boards (even low-voted ones), giving visibility without winning or dev approval. See{' '}
+              <a href='https://github.com/plebbit/plebbit-js/issues/25' target='_blank' rel='noopener noreferrer'>
+                design draft
+              </a>
+              .
+            </p>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Decentralization</h3>
+            <p>
+              Devs can change directories via commits in the open-source repo. No centralized servers—anyone can fork, modify, and redeploy to their own domain. 5chan is
+              adminless with no central authority.
+            </p>
+          </div>
+        </div>
+        <div className={styles.createBoardFooter}>
+          <button onClick={closeCreateBoardModal}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateBoardModal;

src/components/create-board-modal/index.ts

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