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-buttons): reorganize button layout on mobile and desktop

Browse Source 
- Conditional PostForm placement: above MobileBoardButtons in catalog, below in board/post
- Add ArchiveButton (work-in-progress alert) to mobile catalog and desktop board/catalog
- Restructure MobileBoardButtons: board row [Bottom][Catalog][Refresh], secondRow [Vote][Subscribe][Mod Queue]; catalog row [Return][Archive][Bottom][Refresh], no Vote/Subscribe row
- Desktop board left: [Catalog][Archive][Refresh][Mod Queue], right: [Vote][Subscribe]
- Desktop catalog left: [Return][Archive][Bottom][Refresh][Mod Queue], right: (selectors)[Vote][Subscribe][Filters][Search]
- Add whitespace between Vote and Subscribe on desktop right side
- Extend showBottomButton to board paginated view
This commit is contained in:
plebeius
2026-03-02 21:42:58 +08:00
parent 3bd1c0ad4f
commit 3a9b5ab75f
2 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+40 -20
View File
@@ -57,6 +57,20 @@ export const CatalogButton = ({ address, isInAllView, isInSubscriptionsView, isI
);
};
const ArchiveButton = ({ address, isInAllView, isInSubscriptionsView, isInModView }: BoardButtonsProps) => {
const { t } = useTranslation();
const handleClick = () => {
window.alert('Work in progress');
};
return (
<button className='button' onClick={handleClick}>
{t('archive')}
</button>
);
};
const SubscribeButton = ({ address }: BoardButtonsProps) => {
const { t } = useTranslation();
const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: address });
@@ -370,7 +384,7 @@ export const MobileBoardButtons = () => {
const enableInfiniteScroll = useFeedViewSettingsStore((state) => state.enableInfiniteScroll);
const isMultiboard = isInAllView || isInSubscriptionsView || isInModView;
const effectiveInfiniteScroll = isMultiboard || enableInfiniteScroll;
const showBottomButton = (isInCatalogView || isInPostView || isInPendingPostPage) && !effectiveInfiniteScroll;
const showBottomButton = !effectiveInfiniteScroll;
// Check if we should show the vote button (only for directory boards)
const directories = useDirectories();
@@ -402,25 +416,18 @@ export const MobileBoardButtons = () => {
<ModQueueAlertThreshold />
<ModQueueViewSelector />
</>
) : (
) : isInCatalogView ? (
<>
{isInCatalogView ? (
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
) : (
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
)}
{showVoteButton && <VoteButton />}
{!(isInAllView || isInSubscriptionsView || isInModView) && <SubscribeButton address={subplebbitAddress} />}
{!(isInAllView || isInSubscriptionsView) && <ModQueueButton boardIdentifier={boardIdentifier} isMobile={true} />}
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
<ArchiveButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
{showBottomButton && <BottomButton />}
<RefreshButton />
{isInCatalogView && searchText ? (
{searchText ? (
<span className={styles.filteredThreadsCount}>
{' '}
— {t('search_results_for')}: <strong>{searchText}</strong>
</span>
) : (
isInCatalogView &&
filteredCount > 0 && (
<span className={styles.filteredThreadsCount}>
{' '}
@@ -450,6 +457,17 @@ export const MobileBoardButtons = () => {
</>
)}
</>
) : (
<>
{showBottomButton && <BottomButton />}
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
<RefreshButton />
<div className={styles.secondRow}>
{showVoteButton && <VoteButton />}
{!(isInAllView || isInSubscriptionsView || isInModView) && <SubscribeButton address={subplebbitAddress} />}
{!(isInAllView || isInSubscriptionsView) && <ModQueueButton boardIdentifier={boardIdentifier} isMobile={true} />}
</div>
</>
)}
</div>
);
@@ -564,18 +582,14 @@ export const DesktopBoardButtons = () => {
<>
{isInCatalogView ? (
<>
[<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]{' '}
[<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
<ArchiveButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]{' '}
</>
) : (
<>
<SearchOPsBar />
[<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]{' '}
</>
)}
{showVoteButton && (
<>
{' '}
[<VoteButton />]
[<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
<ArchiveButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]{' '}
</>
)}
{showBottomButton && (
@@ -614,6 +628,12 @@ export const DesktopBoardButtons = () => {
</>
)}
{isInAllView && <AllFeedFilter />}
{showVoteButton && (
<>
[<VoteButton />]
</>
)}
{showVoteButton && !(isInAllView || isInSubscriptionsView || isInModView) && ' '}
{!(isInAllView || isInSubscriptionsView || isInModView) && (
<>
[<SubscribeButton address={subplebbitAddress} />]