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(home): add boards list more similar to vichan, which is better than 4chan's boards box for a potentially infinite number of boards

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2025-02-03 13:08:24 +01:00
parent 09939b0230
commit cadfc699fc
11 changed files with 186 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-default-subplebbits.ts
+1 -24
View File
@@ -41,32 +41,9 @@ const useDefaultSubplebbits = () => {
return cacheSubplebbits || subplebbits; return cacheSubplebbits || subplebbits;
}; };
export const categorizeSubplebbits = (subplebbits: MultisubSubplebbit[]) => {
const plebbitSubs = subplebbits.filter((sub) => sub.tags?.includes('plebbit'));
const interestsSubs = subplebbits.filter(
(sub) => sub.tags?.includes('topic') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('country') && !sub.tags?.includes('international'),
);
const randomSubs = subplebbits.filter((sub) => sub.tags?.includes('random') && !sub.tags?.includes('plebbit'));
const internationalSubs = subplebbits.filter((sub) => sub.tags?.includes('international') || sub.tags?.includes('country'));
const projectsSubs = subplebbits.filter((sub) => sub.tags?.includes('project') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('topic'));
return { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs };
};
export const useDefaultSubplebbitAddresses = () => { export const useDefaultSubplebbitAddresses = () => {
const defaultSubplebbits = useDefaultSubplebbits(); const defaultSubplebbits = useDefaultSubplebbits();
const categorizedSubplebbits = useMemo(() => categorizeSubplebbits(defaultSubplebbits), [defaultSubplebbits]); return useMemo(() => defaultSubplebbits.map((subplebbit) => subplebbit.address), [defaultSubplebbits]);
return useMemo(
() =>
[
...categorizedSubplebbits.plebbitSubs,
...categorizedSubplebbits.projectsSubs,
...categorizedSubplebbits.interestsSubs,
...categorizedSubplebbits.randomSubs,
...categorizedSubplebbits.internationalSubs,
].map((subplebbit) => subplebbit.address),
[categorizedSubplebbits],
);
}; };
export const useMultisubMetadata = () => { export const useMultisubMetadata = () => {
src/stores/use-home-filters-store.ts
-44
View File
@@ -1,44 +0,0 @@
import { create } from 'zustand';
interface HomeFiltersStore {
showNsfwBoardsOnly: boolean;
setShowNsfwBoardsOnly: (value: boolean) => void;
showWorksafeBoardsOnly: boolean;
setShowWorksafeBoardsOnly: (value: boolean) => void;
useCatalog: boolean;
setUseCatalog: (value: boolean) => void;
showWorksafeContentOnly: boolean;
setShowWorksafeContentOnly: (value: boolean) => void;
showNsfwContentOnly: boolean;
setShowNsfwContentOnly: (value: boolean) => void;
}
const useHomeFiltersStore = create<HomeFiltersStore>((set) => ({
showNsfwBoardsOnly: localStorage.getItem('showNsfwBoardsOnly') === 'true' ? true : false,
setShowNsfwBoardsOnly: (value: boolean) => {
set({ showNsfwBoardsOnly: value });
localStorage.setItem('showNsfwBoardsOnly', value.toString());
},
showWorksafeBoardsOnly: localStorage.getItem('showWorksafeBoardsOnly') === 'true' ? true : false,
setShowWorksafeBoardsOnly: (value: boolean) => {
set({ showWorksafeBoardsOnly: value });
localStorage.setItem('showWorksafeBoardsOnly', value.toString());
},
useCatalog: localStorage.getItem('useCatalog') === 'true' ? true : false,
setUseCatalog: (value: boolean) => {
set({ useCatalog: value });
localStorage.setItem('useCatalog', value.toString());
},
showWorksafeContentOnly: localStorage.getItem('showWorksafeContentOnly') === 'true' || localStorage.getItem('showWorksafeContentOnly') === null ? true : false,
setShowWorksafeContentOnly: (value: boolean) => {
set({ showWorksafeContentOnly: value });
localStorage.setItem('showWorksafeContentOnly', value.toString());
},
showNsfwContentOnly: localStorage.getItem('showNsfwContentOnly') === 'true' ? true : false,
setShowNsfwContentOnly: (value: boolean) => {
set({ showNsfwContentOnly: value });
localStorage.setItem('showNsfwContentOnly', value.toString());
},
}));
export default useHomeFiltersStore;
src/stores/use-popular-threads-options-store.ts
+23
View File
@@ -0,0 +1,23 @@
import { create } from 'zustand';
interface PopularThreadsOptionsStore {
showWorksafeContentOnly: boolean;
setShowWorksafeContentOnly: (value: boolean) => void;
showNsfwContentOnly: boolean;
setShowNsfwContentOnly: (value: boolean) => void;
}
const usePopularThreadsOptionsStore = create<PopularThreadsOptionsStore>((set) => ({
showWorksafeContentOnly: localStorage.getItem('showWorksafeContentOnly') === 'true' || localStorage.getItem('showWorksafeContentOnly') === null ? true : false,
setShowWorksafeContentOnly: (value: boolean) => {
set({ showWorksafeContentOnly: value });
localStorage.setItem('showWorksafeContentOnly', value.toString());
},
showNsfwContentOnly: localStorage.getItem('showNsfwContentOnly') === 'true' ? true : false,
setShowNsfwContentOnly: (value: boolean) => {
set({ showNsfwContentOnly: value });
localStorage.setItem('showNsfwContentOnly', value.toString());
},
}));
export default usePopularThreadsOptionsStore;
src/views/home/boards-box/boards-box.tsx
-164
View File
@@ -1,164 +0,0 @@
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Subplebbit, useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import useHomeFiltersStore from '../../../stores/use-home-filters-store';
import { useMultisubMetadata } from '../../../hooks/use-default-subplebbits';
import styles from '../home.module.css';
import { nsfwTags } from '../home';
import BoxModal from '../box-modal';
import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
const Board = ({ subplebbit, subplebbits, useCatalog }: { subplebbit: Subplebbit; subplebbits: any; useCatalog?: boolean }) => {
const { t } = useTranslation();
const { address, title, tags } = subplebbit || {};
const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`;
const subplebbitData = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbitData);
return (
<div className={styles.subplebbit} key={address}>
{(isOffline || isOnlineStatusLoading) && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
<Link to={boardLink}>{title || (address.endsWith('.eth') || address.endsWith('.sol') ? address.slice(0, -4) : address && Plebbit.getShortAddress(address))}</Link>
{nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
</div>
);
};
const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
const { t } = useTranslation();
const account = useAccount();
const subscriptions = account?.subscriptions || [];
const { accountSubplebbits } = useAccountSubplebbits();
const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
const { showNsfwBoardsOnly, showWorksafeBoardsOnly } = useHomeFiltersStore();
const { useCatalog } = useHomeFiltersStore();
const filterSubs = (subs: Subplebbit[], includeTags: string[], excludeTags: string[] = []) =>
subs.filter((sub) => includeTags.every((tag) => sub.tags?.includes(tag)) && excludeTags.every((tag) => !sub.tags?.includes(tag)));
let plebbitSubs = filterSubs(multisub, ['plebbit']);
let interestsSubs = filterSubs(multisub, ['topic'], ['plebbit', 'country', 'international']);
let randomSubs = filterSubs(multisub, ['random'], ['plebbit']);
let internationalSubs = filterSubs(multisub, ['international']);
let projectsSubs = filterSubs(multisub, ['project'], ['plebbit', 'topic']);
const filterByNsfw = (subs: Subplebbit[], includeNsfw: boolean) => subs.filter((sub) => sub.tags.some((tag: string) => nsfwTags.includes(tag)) === includeNsfw);
const filterCategoriesByNsfw = (subsArray: Subplebbit[][], includeNsfw: boolean) => subsArray.map((subs) => filterByNsfw(subs, includeNsfw));
const includeNsfw = showNsfwBoardsOnly ? true : showWorksafeBoardsOnly ? false : null;
if (includeNsfw !== null) {
[plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs] = filterCategoriesByNsfw(
[plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs],
includeNsfw,
);
}
const multisubMetadata = useMultisubMetadata();
return (
<div className={`${styles.box} ${styles.boardsBox}`}>
<div className={styles.boxBar}>
<h2 className='capitalize'>{t('boards')}</h2>
<BoxModal isBoardsBoxModal={true} />
</div>
<div className={styles.boardsBoxContent}>
<div className={styles.column}>
<h3>Multiboards</h3>
<div className={styles.list}>
<div className={styles.subplebbit}>
<Link to={useCatalog ? '/p/all/catalog' : '/p/all'}>{multisubMetadata?.title || 'All'}</Link>
</div>
<div className={styles.subplebbit}>
<Link to={useCatalog ? '/p/subscriptions/catalog' : '/p/subscriptions'}>Subscriptions</Link>
</div>
</div>
{plebbitSubs.length > 0 && (
<>
<h3>Plebbit</h3>
<div className={styles.list}>
{plebbitSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))}
</div>
</>
)}
{projectsSubs.length > 0 && (
<>
<h3>{t('projects')}</h3>
<div className={styles.list}>
{projectsSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))}
</div>
</>
)}
</div>
<div className={styles.column}>
{interestsSubs.length > 0 && (
<>
<h3>{t('interests')}</h3>
<div className={styles.list}>
{interestsSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))}
</div>
</>
)}
</div>
<div className={styles.column}>
{randomSubs.length > 0 && (
<>
<h3>{t('random')}</h3>
<div className={styles.list}>
{randomSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))}
</div>
</>
)}
{internationalSubs.length > 0 && (
<>
<h3>{t('international')}</h3>
<div className={styles.list}>
{internationalSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))}
</div>
</>
)}
</div>
<div className={styles.column}>
<div className={styles.list}>
<h3>{t('subscriptions')}</h3>
{subscriptions.length > 0
? subscriptions.map((address: string, index: number) => (
<div className={styles.subplebbit} key={index}>
<Link to={useCatalog ? `/p/${address}/catalog` : `/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
</div>
))
: t('not_subscribed')}
</div>
<div className={styles.list}>
<h3>{t('moderating')}</h3>
{accountSubplebbitAddresses.length > 0
? accountSubplebbitAddresses.map((address: string, index: number) => (
<div className={styles.subplebbit} key={index}>
<Link to={useCatalog ? `/p/${address}/catalog` : `/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
</div>
))
: t('not_moderating')}
</div>
</div>
</div>
</div>
);
};
export default BoardsBox;
src/views/home/boards-box/index.ts
-1
View File
@@ -1 +0,0 @@
export { default } from './boards-box';
src/views/home/boards-list/boards-list.tsx
+63
View File
@@ -0,0 +1,63 @@
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
import styles from '../home.module.css';
import { nsfwTags } from '../home';
const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbits: any; useCatalog?: boolean }) => {
const { t } = useTranslation();
const { address, title, tags } = subplebbit || {};
const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
const subplebbitData = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbitData);
return (
<tr className={styles.subplebbit} key={address}>
<td className={styles.boardAddress}>
<p className={styles.boardCell}>
<Link to={`/p/${address}`}>{address && Plebbit.getShortAddress(address)}</Link>
{(isOffline || isOnlineStatusLoading) && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
{nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
</p>
</td>
<td className={styles.boardTitle}>
<p className={styles.boardCell}>{title || (address && Plebbit.getShortAddress(address))}</p>
</td>
<td className={styles.boardTags}>
<p className={styles.boardCell}>{tags.join(', ')}</p>
</td>
</tr>
);
};
const BoardsList = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
const { t } = useTranslation();
return (
<div className={styles.boardsBox}>
<table className={styles.boardsList}>
<colgroup>
<col className={styles.boardAddress} />
<col className={styles.boardTitle} />
</colgroup>
<thead>
<tr>
<th>{t('board')}</th>
<th>{t('title')}</th>
<th>{t('tags')}</th>
</tr>
</thead>
<tbody>
{multisub.map((sub) => (
<Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))}
</tbody>
</table>
</div>
);
};
export default BoardsList;
src/views/home/boards-list/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './boards-list';
src/views/home/box-modal/box-modal.tsx
+38 -100
View File
@@ -1,26 +1,15 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import useHomeFiltersStore from '../../../stores/use-home-filters-store'; import useHomeFiltersStore from '../../../stores/use-popular-threads-options-store';
import styles from '../home.module.css'; import styles from '../home.module.css';
const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => { const BoxModal = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [showFilterModal, setShowFilterModal] = useState(false); const [showFilterModal, setShowFilterModal] = useState(false);
const modalRef = useRef<HTMLDivElement>(null); const modalRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLSpanElement>(null); const buttonRef = useRef<HTMLSpanElement>(null);
const { const { showWorksafeContentOnly, setShowWorksafeContentOnly, showNsfwContentOnly, setShowNsfwContentOnly } = useHomeFiltersStore();
showNsfwBoardsOnly,
setShowNsfwBoardsOnly,
showWorksafeBoardsOnly,
setShowWorksafeBoardsOnly,
useCatalog,
setUseCatalog,
showWorksafeContentOnly,
setShowWorksafeContentOnly,
showNsfwContentOnly,
setShowNsfwContentOnly,
} = useHomeFiltersStore();
const handleClickOutside = useCallback( const handleClickOutside = useCallback(
(event: MouseEvent) => { (event: MouseEvent) => {
@@ -41,95 +30,44 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
return ( return (
<> <>
<span ref={buttonRef} onClick={() => !showFilterModal && setShowFilterModal(true)}> <span ref={buttonRef} onClick={() => !showFilterModal && setShowFilterModal(true)}>
{isBoardsBoxModal ? t('filter') : t('options')} ▼ {t('options')} ▼
</span> </span>
{showFilterModal && ( {showFilterModal && (
<div ref={modalRef} className={styles.filterModal}> <div ref={modalRef} className={styles.filterModal}>
{isBoardsBoxModal ? ( <div
<> className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
<div onClick={() => {
className={`${styles.option} ${!showNsfwBoardsOnly && !showWorksafeBoardsOnly && styles.selected}`} if (showNsfwContentOnly) {
onClick={() => { setShowNsfwContentOnly(false);
setShowNsfwBoardsOnly(false); }
setShowWorksafeBoardsOnly(false); setShowWorksafeContentOnly(!showWorksafeContentOnly);
setShowFilterModal(false); setShowFilterModal(false);
}} }}
> >
{t('show_all_boards')} {t('show_worksafe_content_only')}
</div> </div>
<div <div
className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`} className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
onClick={() => { onClick={() => {
if (showWorksafeBoardsOnly) { if (showWorksafeContentOnly) {
setShowWorksafeBoardsOnly(false); setShowWorksafeContentOnly(false);
} }
setShowNsfwBoardsOnly(!showNsfwBoardsOnly); setShowNsfwContentOnly(!showNsfwContentOnly);
setShowFilterModal(false); setShowFilterModal(false);
}} }}
> >
{t('show_nsfw_boards_only')} {t('show_nsfw_content_only')}
</div> </div>
<div <div
className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`} className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
onClick={() => { onClick={() => {
if (showNsfwBoardsOnly) { setShowWorksafeContentOnly(false);
setShowNsfwBoardsOnly(false); setShowNsfwContentOnly(false);
} setShowFilterModal(false);
setShowWorksafeBoardsOnly(!showWorksafeBoardsOnly); }}
setShowFilterModal(false); >
}} {t('show_all_content')}
> </div>
{t('show_worksafe_boards_only')}
</div>
<div className={styles.separator} />
<div
className={`${styles.option} ${useCatalog && styles.selected}`}
onClick={() => {
setUseCatalog(!useCatalog);
setShowFilterModal(false);
}}
>
{t('use_catalog')}
</div>
</>
) : (
<>
<div
className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
onClick={() => {
if (showNsfwContentOnly) {
setShowNsfwContentOnly(false);
}
setShowWorksafeContentOnly(!showWorksafeContentOnly);
setShowFilterModal(false);
}}
>
{t('show_worksafe_content_only')}
</div>
<div
className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
onClick={() => {
if (showWorksafeContentOnly) {
setShowWorksafeContentOnly(false);
}
setShowNsfwContentOnly(!showNsfwContentOnly);
setShowFilterModal(false);
}}
>
{t('show_nsfw_content_only')}
</div>
<div
className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
onClick={() => {
setShowWorksafeContentOnly(false);
setShowNsfwContentOnly(false);
setShowFilterModal(false);
}}
>
{t('show_all_content')}
</div>
</>
)}
</div> </div>
)} )}
</> </>
src/views/home/home.module.css
+55 -51
View File
@@ -34,6 +34,61 @@
min-height: 150px; min-height: 150px;
} }
.offlineIcon {
display: inline-block;
vertical-align: text-top;
margin-left: 2px;
width: 13px;
height: 13px;
background-repeat: no-repeat;
background-size: contain;
image-rendering: pixelated;
}
.boardsBox table {
display: table;
margin-bottom: 10px;
overflow: hidden;
table-layout: fixed;
width: calc(100% + 4px);
margin-left: -2px;
border-collapse: separate;
border-spacing: 2px 0;
}
.boardsBox table thead th {
background: #fca;
color: #800;
border: 1px solid #800;
padding: 4px 15px 5px 5px;
text-align: left;
white-space: nowrap;
}
.boardsBox table tbody td {
margin: 0;
padding: 4px 15px 4px 4px;
text-align: left;
}
.boardsBox table tbody tr:nth-of-type( even ) {
background: #ede2d4;
}
.boardCell {
position: static;
margin: 0;
padding: 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.boardCell a {
color: inherit;
}
.boxBar, .infoboxBar { .boxBar, .infoboxBar {
padding-left: 0.5em; padding-left: 0.5em;
line-height: 2em; line-height: 2em;
@@ -158,16 +213,6 @@
content: '✔ '; content: '✔ ';
} }
.list, .subplebbit a {
color: var(--homepage-box-link-text-color);
text-decoration: var(--homepage-box-link-text-decoration);
}
.list a:hover {
color: var(--homepage-box-link-text-color-hover);
text-decoration: var(--homepage-box-link-text-decoration-hover);
}
.nsfw { .nsfw {
color: red; color: red;
font-weight: 700; font-weight: 700;
@@ -175,47 +220,6 @@
font-size: smaller; font-size: smaller;
} }
.offlineIcon {
display: inline-block;
vertical-align: text-top;
margin-right: 2px;
width: 13px;
height: 13px;
background-repeat: no-repeat;
background-size: contain;
image-rendering: pixelated;
}
.boardsBoxContent {
font-size: 93%;
padding: 0.5em;
padding-top: 0.25em;
padding-bottom: 0;
line-height: 130%;
display: table;
}
.boardsBoxContent .subplebbit {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.boardsBoxContent .column {
float: left;
width: 168px;
margin-right: 15px;
word-break: break-word;
}
.boardsBoxContent h3 {
font-size: 100%;
font-weight: 700;
text-decoration: underline;
text-transform: capitalize;
color: var(--homepage-box-bar-text-color);
}
.footer a { .footer a {
text-transform: capitalize; text-transform: capitalize;
} }
src/views/home/home.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import packageJson from '../../../package.json';
import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import useSubplebbitsStats from '../../hooks/use-subplebbits-stats'; import useSubplebbitsStats from '../../hooks/use-subplebbits-stats';
import PopularThreadsBox from './popular-threads-box'; import PopularThreadsBox from './popular-threads-box';
import BoardsBox from './boards-box'; import BoardsList from './boards-list';
// https://github.com/plebbit/temporary-default-subplebbits/blob/master/README.md // https://github.com/plebbit/temporary-default-subplebbits/blob/master/README.md
// plebchan shouldn't consider 'vulgar' or 'anti' as nsfw tags, unlike more sfw-oriented clients // plebchan shouldn't consider 'vulgar' or 'anti' as nsfw tags, unlike more sfw-oriented clients
@@ -214,7 +214,7 @@ const Home = () => {
<HomeLogo /> <HomeLogo />
<SearchBar /> <SearchBar />
<InfoBox /> <InfoBox />
<BoardsBox multisub={defaultSubplebbits} subplebbits={subplebbits} /> <BoardsList multisub={defaultSubplebbits} subplebbits={subplebbits} />
<PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} /> <PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
<Stats subplebbitAddresses={subplebbitAddresses} /> <Stats subplebbitAddresses={subplebbitAddresses} />
<Footer /> <Footer />
src/views/home/popular-threads-box/popular-threads-box.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { Comment, Subplebbit } from '@plebbit/plebbit-react-hooks'; import { Comment, Subplebbit } from '@plebbit/plebbit-react-hooks';
import styles from '../home.module.css'; import styles from '../home.module.css';
import usePopularPosts from '../../../hooks/use-popular-posts'; import usePopularPosts from '../../../hooks/use-popular-posts';
import useHomeFiltersStore from '../../../stores/use-home-filters-store'; import usePopularThreadsOptionsStore from '../../../stores/use-popular-threads-options-store';
import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
import { CatalogPostMedia } from '../../../components/catalog-row'; import { CatalogPostMedia } from '../../../components/catalog-row';
import LoadingEllipsis from '../../../components/loading-ellipsis'; import LoadingEllipsis from '../../../components/loading-ellipsis';
@@ -52,7 +52,7 @@ const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThrea
const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => { const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { showWorksafeContentOnly, showNsfwContentOnly } = useHomeFiltersStore(); const { showWorksafeContentOnly, showNsfwContentOnly } = usePopularThreadsOptionsStore();
const getFilteredSubplebbits = () => { const getFilteredSubplebbits = () => {
if (showWorksafeContentOnly) { if (showWorksafeContentOnly) {
@@ -77,7 +77,7 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[];
<div className={styles.box}> <div className={styles.box}>
<div className={`${styles.boxBar} ${styles.color2ColorBar}`}> <div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
<h2 className='capitalize'>{t('popular_threads')}</h2> <h2 className='capitalize'>{t('popular_threads')}</h2>
<BoxModal isBoardsBoxModal={false} /> <BoxModal />
</div> </div>
<div className={`${styles.boxContent} ${popularPosts.length !== 0 ? styles.popularThreads : ''}`}> <div className={`${styles.boxContent} ${popularPosts.length !== 0 ? styles.popularThreads : ''}`}>
{popularPosts.length === 0 ? ( {popularPosts.length === 0 ? (