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(directory-modal): add modal explaining how to submit boards to directories

Browse Source
This commit is contained in:
plebeius
2025-11-06 16:23:55 +01:00
parent 36bd9c5c0f
commit e627b6b619
7 changed files with 340 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/boards-list/boards-list.tsx
+84 -76
View File
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { useDefaultSubplebbitsState, MultisubSubplebbit } from '../../../hooks/use-default-subplebbits';
import LoadingEllipsis from '../../../components/loading-ellipsis';
import useDisclaimerModalStore from '../../../stores/use-disclaimer-modal-store';
import useDirectoryModalStore from '../../../stores/use-directory-modal-store';
import useBoardsFilterStore from '../../../stores/use-boards-filter-store';
import BoardsFilterModal from './boards-filter-modal';
import styles from '../home.module.css';
@@ -31,6 +32,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
const navigate = useNavigate();
const { loading, error } = useDefaultSubplebbitsState();
const { showDisclaimerModal } = useDisclaimerModalStore();
const { openDirectoryModal } = useDirectoryModalStore();
const { useCatalogLinks, boardFilter } = useBoardsFilterStore();
const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>, address: string) => {
@@ -44,6 +46,12 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
return `/p/${address}${useCatalogLinks ? '/catalog' : ''}`;
};
// Handler for placeholder board links
const handlePlaceholderClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
openDirectoryModal();
};
if (loading) {
return (
<div className={styles.box}>
@@ -108,32 +116,32 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime & Manga
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime/Cute
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime/Wallpapers
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Mecha
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cosplay & EGL
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cute/Male
</Link>
</li>
@@ -141,7 +149,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Flash
</Link>
</li>
@@ -149,17 +157,17 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Transportation
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Otaku Culture
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Virtual YouTubers
</Link>
</li>
@@ -175,42 +183,42 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<h3>Video Games</h3>
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Game Generals
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Multiplayer
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Mobile
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Pokémon
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Retro Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/RPG
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Strategy
</Link>
</li>
@@ -226,77 +234,77 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<h3>Interests</h3>
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Comics & Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Technology
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Television & Film
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Weapons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Auto
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Animals & Nature
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Traditional Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Sports
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Extreme Sports
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Professional Wrestling
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Science & Math
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
History & Humanities
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
International
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Outdoors
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Toys
</Link>
</li>
@@ -311,7 +319,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<ul>
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Oekaki
</Link>
</li>
@@ -319,17 +327,17 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Papercraft & Origami
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Photography
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Food & Cooking
</Link>
</li>
@@ -337,14 +345,14 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Artwork/Critique
</Link>
</li>
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Wallpapers/General
</Link>
</li>
@@ -352,42 +360,42 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Literature
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Music
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Fashion
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
3DCG
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Graphic Design
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Do-It-Yourself
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Worksafe GIF
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Quests
</Link>
</li>
@@ -413,53 +421,53 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
</li>
) : (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Business & Finance
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Travel
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Fitness
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Paranormal
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Advice
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
LGBT
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Pony
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Current News
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Worksafe Requests
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Very Important Posts
</Link>
</li>
@@ -474,12 +482,12 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<NSFWBadge />
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
ROBOT9001
</Link>
</li>
@@ -491,23 +499,23 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
</li>
) : (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Politically Incorrect
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
International/Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cams & Meetups
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Shit 4chan Says
</Link>
</li>
@@ -524,67 +532,67 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<NSFWBadge />
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Sexy Beautiful Women
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hardcore
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Handsome Men
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hentai
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Ecchi
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Yuri
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hentai/Alternative
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Yaoi
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Torrents
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
High Resolution
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult GIF
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult Requests
</Link>
</li>
src/views/home/home.tsx
+2
View File
@@ -10,6 +10,7 @@ import BoardsList from './boards-list';
import Version from '../../components/version';
import useDisclaimerModalStore from '../../stores/use-disclaimer-modal-store';
import DisclaimerModal from '../../components/disclaimer-modal';
import DirectoryModal from '../../components/directory-modal';
import _ from 'lodash';
// https://github.com/plebbit/lists/blob/master/5chan-multisub.json
@@ -186,6 +187,7 @@ const Home = () => {
return (
<>
<DisclaimerModal />
<DirectoryModal />
<div className={styles.content}>
<HomeLogo />
<SearchBar />