External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
plebeius
2025-11-06 22:20:46 +01:00
parent f44b9aefbb
commit 79dcc73556
10 changed files with 262 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/directory-modal/directory-modal.tsx
+21 -29
View File
@@ -2,7 +2,7 @@ import useDirectoryModalStore from '../../stores/use-directory-modal-store';
import styles from './directory-modal.module.css';
const DirectoryModal = () => {
const { showModal, modalContext, closeDirectoryModal } = useDirectoryModalStore();
const { showModal, closeDirectoryModal } = useDirectoryModalStore();
if (!showModal) {
return null;
@@ -14,33 +14,27 @@ const DirectoryModal = () => {
}
};
const isPlaceholderContext = modalContext === 'placeholder';
return (
<div className={styles.backdrop} onClick={handleBackdropClick}>
<div className={styles.directoryDialog}>
<div className={styles.hd}>
<h2>{isPlaceholderContext ? 'Submit a Board to a Directory' : 'Create a Board'}</h2>
<h2>Submit a Board to a Directory</h2>
<button className={styles.closeButton} onClick={closeDirectoryModal} title='Close' />
</div>
<div className={styles.bd}>
{isPlaceholderContext && (
<p className={styles.introMessage}>
<strong>The board you clicked on doesn&apos;t exist yet, but it can be yours!</strong>
</p>
)}
<p className={styles.introMessage}>
<strong>The board you clicked on doesn&apos;t exist yet, but it can be yours!</strong>
</p>
{isPlaceholderContext && (
<div className={styles.section}>
<h3>Directory vs Regular Board</h3>
<p>
A &quot;directory board&quot; is assigned to a category on the homepage (like &quot;Anime & Manga&quot; or &quot;Video Games&quot;). Directory assignments
are temporary and handpicked by devs until DAO curation is implemented.{' '}
<strong>Anyone can create a board and users can access it anytime using its address</strong>—use the search bar, direct links, or the
&quot;[Subscribe]&quot; button to access boards regardless of directory assignment.
</p>
</div>
)}
<div className={styles.section}>
<h3>Directory vs Regular Board</h3>
<p>
A &quot;directory board&quot; is assigned to a category on the homepage (like &quot;Anime & Manga&quot; or &quot;Video Games&quot;). Directory assignments
are temporary and handpicked by devs until DAO curation is implemented.{' '}
<strong>Anyone can create a board and users can access it anytime using its address</strong>—use the search bar, direct links, or the
&quot;[Subscribe]&quot; button to access boards regardless of directory assignment.
</p>
</div>
<div className={styles.section}>
<h3>Creating Your Board</h3>
@@ -58,15 +52,13 @@ const DirectoryModal = () => {
</p>
</div>
{isPlaceholderContext && (
<div className={styles.section}>
<h3>Directory Requirements</h3>
<p>
Boards need 99% uptime (they&apos;re P2P nodes), plus be active, well-moderated, and relevant to the category. Devs review and approve/reject based on
these criteria.
</p>
</div>
)}
<div className={styles.section}>
<h3>Directory Requirements</h3>
<p>
Boards need 99% uptime (they&apos;re P2P nodes), plus be active, well-moderated, and relevant to the category. Devs review and approve/reject based on these
criteria.
</p>
</div>
<div className={styles.section}>
<h3>Submitting to a Directory</h3>