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

feat(ui): add context-aware directory modal with different content for placeholder vs create board

Browse Source 
Add modal context tracking to show different content when opened from placeholder board clicks vs create board button. Include information about Subscribe button and pubsub voting discovery pages. Update README with comprehensive explanation of 5chan's competitive directory system and value proposition.
This commit is contained in:
plebeius
2025-11-06 17:07:26 +01:00
parent ace4b0c8db
commit 5f06fdf461
5 changed files with 150 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/directory-modal/directory-modal.tsx
+50 -26
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, closeDirectoryModal } = useDirectoryModalStore();
const { showModal, modalContext, closeDirectoryModal } = useDirectoryModalStore();
if (!showModal) {
return null;
@@ -14,32 +14,38 @@ const DirectoryModal = () => {
}
};
const isPlaceholderContext = modalContext === 'placeholder';
return (
<div className={styles.backdrop} onClick={handleBackdropClick}>
<div className={styles.directoryDialog}>
<div className={styles.hd}>
<h2>Submit a Board to a Directory</h2>
<h2>{isPlaceholderContext ? 'Submit a Board to a Directory' : 'Create a Board'}</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>
{isPlaceholderContext && (
<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>
{isPlaceholderContext && (
<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>
@@ -54,17 +60,25 @@ const DirectoryModal = () => {
</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.
<strong>Building a following:</strong> Every board has a &quot;[Subscribe]&quot; button that users can click to subscribe to your board. When users
subscribe, your board will appear in the top bar on the boards page, making it easy for them to access it. This means you can build a following and have
active users even if your board isn&apos;t assigned to a directory or known by the devs. Users can discover your board through direct links, word of mouth,
or by searching for your board address.
</p>
</div>
{isPlaceholderContext && (
<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>
@@ -83,6 +97,16 @@ const DirectoryModal = () => {
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>
<p>
<strong>Discovery through voting pages:</strong> Each directory will have its own pubsub voting page that will serve as a discovery page for boards in that
category. Even low-voted or low-quality boards will appear in these voting lists, giving them visibility and helping them find users. This means boards
don&apos;t need to win the directory slot or be approved by devs to gain exposure—they can still be discovered and grow their subscriber base through the
voting pages. See the{' '}
<a href='https://github.com/plebbit/plebbit-js/issues/25' target='_blank' rel='noopener noreferrer'>
pubsub voting design draft
</a>{' '}
for more details.
</p>
</div>
<div className={styles.section}>
src/components/topbar/topbar.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ const TopBarDesktop = () => {
</>
)}
[
<span className={styles.temporaryButton} onClick={openDirectoryModal} style={{ cursor: 'pointer' }}>
<span className={styles.temporaryButton} onClick={() => openDirectoryModal('create-button')} style={{ cursor: 'pointer' }}>
{t('create_board')}
</span>
]
src/stores/use-directory-modal-store.ts
+7 -2
View File
@@ -1,17 +1,22 @@
import { create } from 'zustand';
type ModalContext = 'placeholder' | 'create-button';
interface DirectoryModalState {
showModal: boolean;
openDirectoryModal: () => void;
modalContext: ModalContext;
openDirectoryModal: (context?: ModalContext) => void;
closeDirectoryModal: () => void;
}
const useDirectoryModalStore = create<DirectoryModalState>((set) => ({
showModal: false,
modalContext: 'placeholder',
openDirectoryModal: () => {
openDirectoryModal: (context: ModalContext = 'placeholder') => {
set({
showModal: true,
modalContext: context,
});
},
src/views/home/boards-list/boards-list.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
// Handler for placeholder board links
const handlePlaceholderClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
openDirectoryModal();
openDirectoryModal('placeholder');
};
if (loading) {