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/app.tsx
+12 -4
View File
@@ -3,7 +3,7 @@ import { Navigate, Outlet, Route, Routes, useLocation, useParams } from 'react-r
import { useAccount, useAccountComment, useSubplebbit } from '@bitsocialhq/pkc-react-hooks';
import useAccountsStore from '@bitsocialhq/pkc-react-hooks/dist/stores/accounts';
import { initSnow, removeSnow } from './lib/snow';
import { isAllView, isModView, isSubscriptionsView } from './lib/utils/view-utils';
import { isAllView, isCatalogView, isModView, isSubscriptionsView } from './lib/utils/view-utils';
import { preloadThemeAssets } from './lib/utils/preload-utils';
import useReplyModalStore from './stores/use-reply-modal-store';
import useCreateBoardModalStore from './stores/use-create-board-modal-store';
@@ -48,7 +48,8 @@ preloadThemeAssets();
const hasModQueueAccessRole = (role?: string): boolean => role === 'admin' || role === 'owner' || role === 'moderator';
const BoardLayout = () => {
const { accountCommentIndex, boardIdentifier, pageNumber } = useParams();
const params = useParams();
const { accountCommentIndex, boardIdentifier, pageNumber } = params;
const location = useLocation();
const isMobile = useIsMobile();
const isInAllView = isAllView(location.pathname);
@@ -62,6 +63,7 @@ const BoardLayout = () => {
const isOnPendingPostRoute = isPendingPostRoute(location.pathname);
const isOnModQueueRoute = isModQueueRoute(location.pathname);
const shouldRenderOutlet = isOnPostRoute || isOnPendingPostRoute || isOnModQueueRoute;
const isInCatalogView = isCatalogView(location.pathname, params);
// Christmas theme
const { isEnabled: isSpecialEnabled } = useSpecialThemeStore();
@@ -105,12 +107,18 @@ const BoardLayout = () => {
</Suspense>
<BoardHeader />
{isMobile
? (subplebbitAddress || isInAllView || isInModView || isInSubscriptionsView || pendingPost?.subplebbitAddress || isOnModQueueRoute) && (
? (subplebbitAddress || isInAllView || isInModView || isInSubscriptionsView || pendingPost?.subplebbitAddress || isOnModQueueRoute) &&
(isInCatalogView ? (
<>
<PostForm key={key} />
<MobileBoardButtons />
</>
)
) : (
<>
<MobileBoardButtons />
<PostForm key={key} />
</>
))
: (subplebbitAddress || isInAllView || isInModView || isInSubscriptionsView || pendingPost?.subplebbitAddress || isOnModQueueRoute) && (
<>
<PostForm key={key} />