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(board-pagination): redirect /boardIdentifier/1 to not-found, refine [All] button, hide pagelist when infinite scroll enabled

Browse Source
This commit is contained in:
plebeius
2026-02-24 19:34:55 +08:00
parent 0ddb22f5fa
commit dc43a8438e
3 changed files with 103 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+9 -1
View File
@@ -180,6 +180,14 @@ const CatalogFeedRoute = () => {
return <Catalog viewType={viewType} boardIdentifier={params.boardIdentifier} />; return <Catalog viewType={viewType} boardIdentifier={params.boardIdentifier} />;
}; };
const PageOneGuard = () => {
const { pageNumber } = useParams();
if (pageNumber === '1') {
return <Navigate to='/not-found' replace />;
}
return null;
};
const ModQueueRoute = () => { const ModQueueRoute = () => {
const { boardIdentifier } = useParams(); const { boardIdentifier } = useParams();
const account = useAccount(); const account = useAccount();
@@ -261,7 +269,7 @@ const App = () => {
<Route path='/subs/*' element={<Navigate to='/not-found' replace />} /> <Route path='/subs/*' element={<Navigate to='/not-found' replace />} />
<Route path='/mod/*' element={<Navigate to='/not-found' replace />} /> <Route path='/mod/*' element={<Navigate to='/not-found' replace />} />
<Route path='/:boardIdentifier/:pageNumber' element={boardFeedElement} /> <Route path='/:boardIdentifier/:pageNumber' element={<PageOneGuard />} />
<Route path='/:boardIdentifier' element={boardFeedElement} /> <Route path='/:boardIdentifier' element={boardFeedElement} />
<Route path='/:boardIdentifier/settings' element={boardFeedElement} /> <Route path='/:boardIdentifier/settings' element={boardFeedElement} />
<Route path='/:boardIdentifier/catalog' element={catalogFeedElement} /> <Route path='/:boardIdentifier/catalog' element={catalogFeedElement} />
src/components/board-pagination/board-pagination.module.css
+26 -9
View File
@@ -25,7 +25,8 @@
} }
.paginationButton:disabled, .paginationButton:disabled,
.paginationButton.disabled { .paginationButton.disabled,
.disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -39,6 +40,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0 0.25em;
margin: 0; margin: 0;
padding: 3px 7px !important; padding: 3px 7px !important;
overflow: hidden; overflow: hidden;
@@ -46,6 +48,20 @@
background-color: var(--pagelist-background-color); background-color: var(--pagelist-background-color);
} }
.footerPageItem {
display: inline-flex;
align-items: center;
}
.footerPageBracket {
color: var(--boardsbar-separator-color);
}
/* Restore native button appearance (footer.module.css applies all: unset to .footerRow button) */
.pagelist button.pagelistNavButton {
all: revert;
}
.footerNavPlain { .footerNavPlain {
font: inherit; font: inherit;
margin: 0; margin: 0;
@@ -76,12 +92,12 @@
.footerPageCurrent { .footerPageCurrent {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
padding: 3px 2px; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
color: var(--pagelist-item-text-color, #89a); color: var(--boardsbar-desktop-link-text-color);
} }
.footerPageLink { .footerPageLink {
@@ -89,21 +105,22 @@
display: inline-block; display: inline-block;
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
padding: 3px 2px; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
color: var(--pagelist-item-text-color, #89a); color: var(--boardsbar-desktop-link-text-color);
text-transform: capitalize; text-transform: capitalize;
cursor: pointer; cursor: pointer;
text-decoration: var(--button-text-decoration); text-decoration: var(--boardsbar-desktop-link-text-decoration);
} }
.footerPageLink:hover { .footerPageLink:hover {
color: var(--pagelist-item-text-color-hover, #d00); color: var(--boardsbar-desktop-link-text-color-hover);
text-decoration: var(--button-text-decoration); text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
} }
.footerPageCurrent { .footerPageCurrent {
font-weight: bold; font-weight: bold;
color: var(--pagelist-item-text-color-current, #000); color: var(--boardsbar-desktop-link-text-color-hover);
text-decoration: var(--boardsbar-desktop-link-text-decoration);
} }
src/components/board-pagination/board-pagination.tsx
+68 -45
View File
@@ -1,5 +1,6 @@
import { Link } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import useFeedViewSettingsStore from '../../stores/use-feed-view-settings-store';
import StyleSelector from '../style-selector/style-selector'; import StyleSelector from '../style-selector/style-selector';
import footerStyles from '../footer/footer.module.css'; import footerStyles from '../footer/footer.module.css';
import styles from './board-pagination.module.css'; import styles from './board-pagination.module.css';
@@ -14,10 +15,11 @@ export interface BoardPaginationProps {
const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = false }: BoardPaginationProps) => { const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = false }: BoardPaginationProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate();
const enableInfiniteScroll = useFeedViewSettingsStore((state) => state.enableInfiniteScroll);
const setEnableInfiniteScroll = useFeedViewSettingsStore((state) => state.setEnableInfiniteScroll);
const pageHref = (page: number) => (page === 1 ? basePath : `${basePath}/${page}`); const pageHref = (page: number) => (page === 1 ? basePath : `${basePath}/${page}`);
const prevHref = currentPage > 1 ? pageHref(currentPage - 1) : undefined;
const nextHref = currentPage < totalPages ? pageHref(currentPage + 1) : undefined;
const catalogHref = `${basePath}/catalog`; const catalogHref = `${basePath}/catalog`;
if (totalPages <= 1 && !footerStyle) { if (totalPages <= 1 && !footerStyle) {
@@ -30,40 +32,65 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
return ( return (
<div className={footerStyles.footerRow}> <div className={footerStyles.footerRow}>
<div className={styles.pagelist}> {!enableInfiniteScroll && (
{currentPage > 1 && ( <div className={styles.pagelist}>
<Link to={pageHref(currentPage - 1)} className={styles.footerNavPlain}> {currentPage > 1 && (
{t('previous')} <button type='button' className={styles.pagelistNavButton} onClick={() => navigate(pageHref(currentPage - 1))}>
</Link> {t('previous')}
)} </button>
<Link to={basePath} className={styles.footerPageLink}> )}
[{t('all')}] {currentPage === 1 && (
</Link> <span className={styles.footerPageItem}>
{pageNumbers.map((page) => <span className={styles.footerPageBracket}>[</span>
page === currentPage ? ( <span
<span key={page} className={styles.footerPageCurrent}> className={styles.footerPageLink}
[{page}] role='button'
tabIndex={0}
onClick={() => setEnableInfiniteScroll(true)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setEnableInfiniteScroll(true);
}
}}
>
{t('all')}
</span>
<span className={styles.footerPageBracket}>]</span>
</span> </span>
)}
{pageNumbers.map((page) =>
page === currentPage ? (
<span key={page} className={styles.footerPageItem}>
<span className={styles.footerPageBracket}>[</span>
<span className={styles.footerPageCurrent}>{page}</span>
<span className={styles.footerPageBracket}>]</span>
</span>
) : (
<span key={page} className={styles.footerPageItem}>
<span className={styles.footerPageBracket}>[</span>
<Link to={pageHref(page)} className={styles.footerPageLink}>
{page}
</Link>
<span className={styles.footerPageBracket}>]</span>
</span>
),
)}
{currentPage < totalPages ? (
<button type='button' className={styles.pagelistNavButton} onClick={() => navigate(pageHref(currentPage + 1))}>
{t('next')}
</button>
) : ( ) : (
<Link key={page} to={pageHref(page)} className={styles.footerPageLink}> <span className={styles.footerNavPlainDisabled}>{t('next')}</span>
[{page}] )}
</Link> <Link to={catalogHref} className={styles.footerPageLink}>
), {t('catalog')}
)}
{currentPage < totalPages ? (
<Link to={pageHref(currentPage + 1)} className={styles.footerNavPlain}>
{t('next')}
</Link> </Link>
) : ( <Link to={archiveHref} className={styles.footerPageLink}>
<span className={styles.footerNavPlainDisabled}>{t('next')}</span> {t('archive')}
)} </Link>
<Link to={catalogHref} className={styles.footerPageLink}> </div>
{t('catalog')} )}
</Link>
<Link to={archiveHref} className={styles.footerPageLink}>
{t('archive')}
</Link>
</div>
<div className={footerStyles.footerRight}> <div className={footerStyles.footerRight}>
<span className={footerStyles.styleLabel}>{t('style')}:</span> <span className={footerStyles.styleLabel}>{t('style')}:</span>
<StyleSelector /> <StyleSelector />
@@ -76,14 +103,10 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
return ( return (
<div className={styles.pagination}> <div className={styles.pagination}>
{prevHref ? ( {currentPage > 1 && (
<Link to={prevHref} className={styles.paginationButton} aria-label={t('previous')}> <button type='button' onClick={() => navigate(pageHref(currentPage - 1))} aria-label={t('previous')}>
{t('previous')} {t('previous')}
</Link> </button>
) : (
<span className={`${styles.paginationButton} ${styles.disabled}`} aria-disabled='true'>
{t('previous')}
</span>
)} )}
{pageNumbers.map((page) => { {pageNumbers.map((page) => {
const href = pageHref(page); const href = pageHref(page);
@@ -98,12 +121,12 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
</Link> </Link>
); );
})} })}
{nextHref ? ( {currentPage < totalPages ? (
<Link to={nextHref} className={styles.paginationButton} aria-label={t('next')}> <button type='button' onClick={() => navigate(pageHref(currentPage + 1))} aria-label={t('next')}>
{t('next')} {t('next')}
</Link> </button>
) : ( ) : (
<span className={`${styles.paginationButton} ${styles.disabled}`} aria-disabled='true'> <span className={styles.disabled} aria-disabled='true'>
{t('next')} {t('next')}
</span> </span>
)} )}