From 3a9b5ab75ff94ca50a5d11258302177be456dd06 Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbitlabs.com>
Date: Mon, 2 Mar 2026 21:42:58 +0800
Subject: [PATCH] feat(board-buttons): reorganize button layout on mobile and
 desktop

- 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
---
 src/app.tsx                                   | 16 +++--
 .../board-buttons/board-buttons.tsx           | 60 ++++++++++++-------
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 4d9d94e5..32548a2e 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -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} />
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index 5aa52916..19787c35 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/src/components/board-buttons/board-buttons.tsx
@@ -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} />]