refactor(ui): rename topbar to boardsbar and add desktop footer for board, thread, and catalog

src/components/board-buttons/board-buttons.tsx

@@ -32,7 +32,7 @@ interface BoardButtonsProps {
   isTopbar?: boolean;
 }
 
-const CatalogButton = ({ address, isInAllView, isInSubscriptionsView, isInModView }: BoardButtonsProps) => {
+export const CatalogButton = ({ address, isInAllView, isInSubscriptionsView, isInModView }: BoardButtonsProps) => {
   const { t } = useTranslation();
   const params = useParams();
   const directories = useDirectories();
@@ -68,7 +68,7 @@ const SubscribeButton = ({ address }: BoardButtonsProps) => {
   );
 };
 
-const ReturnButton = ({ address, isInAllView, isInSubscriptionsView, isInModView, isInModQueueView }: BoardButtonsProps) => {
+export const ReturnButton = ({ address, isInAllView, isInSubscriptionsView, isInModView, isInModQueueView }: BoardButtonsProps) => {
   const { t } = useTranslation();
   const params = useParams();
   const directories = useDirectories();
@@ -133,7 +133,7 @@ const RefreshButton = () => {
   );
 };
 
-const UpdateButton = () => {
+export const UpdateButton = () => {
   const { t } = useTranslation();
   const reset = useFeedResetStore((state) => state.reset);
   return (
@@ -143,7 +143,7 @@ const UpdateButton = () => {
   );
 };
 
-const AutoButton = () => {
+export const AutoButton = () => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const handleAutoClick = () => {
@@ -181,6 +181,18 @@ const BottomButton = () => {
   );
 };
 
+export const TopButton = () => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+  };
+  return (
+    <button className='button' onClick={handleClick}>
+      {t('top')}
+    </button>
+  );
+};
+
 const SortOptions = () => {
   const { t } = useTranslation();
   const { sortType, setSortType } = useSortingStore();
@@ -442,7 +454,7 @@ export const MobileBoardButtons = () => {
   );
 };
 
-const PostPageStats = () => {
+export const PostPageStats = () => {
   const { t } = useTranslation();
   const params = useParams();
 

src/components/board-buttons/index.ts

@@ -1 +1 @@
-export { MobileBoardButtons, DesktopBoardButtons } from './board-buttons';
+export { MobileBoardButtons, DesktopBoardButtons, PostPageStats, ReturnButton, CatalogButton, UpdateButton, AutoButton, TopButton } from './board-buttons';

src/components/board-pagination/board-pagination.module.css

@@ -34,3 +34,21 @@
   font-weight: bold;
   color: var(--button-desktop-text-color-hover);
 }
+
+/* Footer-style compact pagination (layout in footer-first-row.module.css) */
+.footerPageLink {
+  padding: 2px 6px;
+  font-size: 12px;
+  text-decoration: var(--button-text-decoration);
+  color: var(--button-desktop-text-color);
+}
+
+.footerPageLink:hover {
+  color: var(--button-desktop-text-color-hover);
+  text-decoration: var(--button-text-decoration);
+}
+
+.footerPageCurrent {
+  font-weight: bold;
+  color: var(--button-desktop-text-color-hover);
+}

src/components/board-pagination/board-pagination.tsx

@@ -1,24 +1,75 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import StyleSelector from '../style-selector/style-selector';
+import footerStyles from '../footer-first-row/footer-first-row.module.css';
 import styles from './board-pagination.module.css';
 
 export interface BoardPaginationProps {
   basePath: string;
   currentPage: number;
   totalPages: number;
+  /** When true, renders compact footer-style row with [1] [2] ... [10] Next Catalog + Style select */
+  footerStyle?: boolean;
 }
 
-const BoardPagination = ({ basePath, currentPage, totalPages }: BoardPaginationProps) => {
+const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = false }: BoardPaginationProps) => {
   const { t } = useTranslation();
 
   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`;
 
-  if (totalPages <= 1) {
+  if (totalPages <= 1 && !footerStyle) {
     return null;
   }
 
+  if (footerStyle) {
+    const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
+    const ellipsisThreshold = 7;
+    const showEllipsis = totalPages > ellipsisThreshold;
+    const visiblePages = showEllipsis ? [1, 2, currentPage, totalPages].filter((p, i, arr) => arr.indexOf(p) === i).sort((a, b) => a - b) : pageNumbers;
+
+    return (
+      <div className={footerStyles.footerRow}>
+        <div className={footerStyles.footerLeft}>
+          {visiblePages.map((page, idx) => {
+            const isCurrent = page === currentPage;
+            const prevPage = visiblePages[idx - 1];
+            const showLeadingEllipsis = showEllipsis && prevPage !== undefined && page - prevPage > 1;
+            return (
+              <span key={page}>
+                {showLeadingEllipsis && <span> ... </span>}
+                {isCurrent ? (
+                  <span className={styles.footerPageCurrent}>[{page}]</span>
+                ) : (
+                  <Link to={pageHref(page)} className={styles.footerPageLink}>
+                    [{page}]
+                  </Link>
+                )}
+              </span>
+            );
+          })}
+          {nextHref && (
+            <>
+              {' '}
+              <Link to={nextHref} className={styles.footerPageLink}>
+                {t('next')}
+              </Link>
+            </>
+          )}{' '}
+          <Link to={catalogHref} className={styles.footerPageLink}>
+            {t('catalog')}
+          </Link>
+        </div>
+        <div className={footerStyles.footerRight}>
+          <span className={footerStyles.styleLabel}>{t('style')}:</span>
+          <StyleSelector />
+        </div>
+      </div>
+    );
+  }
+
   const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
 
   return (

src/components/boardsbar-edit-modal/boardsbar-edit-modal.module.css

@@ -8,7 +8,7 @@
   z-index: 999;
 }
 
-.topbarEditDialog {
+.boardsbarEditDialog {
   position: absolute;
   width: 400px;
   max-height: 80vh;
@@ -31,7 +31,7 @@
 }
 
 @media (max-width: 600px) {
-  .topbarEditDialog {
+  .boardsbarEditDialog {
     width: calc(100% - 20px);
     margin-left: -50%;
     left: 50%;
@@ -154,7 +154,7 @@
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
-.topbarEditFooter {
+.boardsbarEditFooter {
   padding: 0;
   margin: 0;
   text-align: center;

src/components/boardsbar-edit-modal/boardsbar-edit-modal.tsx

@@ -1,10 +1,10 @@
 import { useState, useMemo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
-import useTopbarEditModalStore from '../../stores/use-topbar-edit-modal-store';
-import useTopbarVisibilityStore from '../../stores/use-topbar-visibility-store';
+import useBoardsBarEditModalStore from '../../stores/use-boardsbar-edit-modal-store';
+import useBoardsBarVisibilityStore from '../../stores/use-boardsbar-visibility-store';
 import { getAllBoardCodes } from '../../constants/board-codes';
-import styles from './topbar-edit-modal.module.css';
+import styles from './boardsbar-edit-modal.module.css';
 
 const directoriesToString = (dirs: Set<string>): string => Array.from(dirs).sort().join(' ');
 
@@ -18,20 +18,20 @@ const stringToDirectories = (str: string): Set<string> => {
 };
 
 // Form component keyed by store values so it remounts with fresh state when modal reopens
-const TopbarEditModalForm = ({
+const BoardsBarEditModalForm = ({
   visibleDirectories,
-  showSubscriptionsInTopbar,
+  showSubscriptionsInBoardsBar,
   setDirectoryVisibility,
-  setShowSubscriptionsInTopbar,
-  closeTopbarEditModal,
+  setShowSubscriptionsInBoardsBar,
+  closeBoardsBarEditModal,
   subscriptions,
   location,
 }: {
   visibleDirectories: Set<string>;
-  showSubscriptionsInTopbar: boolean;
+  showSubscriptionsInBoardsBar: boolean;
   setDirectoryVisibility: (code: string, visible: boolean) => void;
-  setShowSubscriptionsInTopbar: (show: boolean) => void;
-  closeTopbarEditModal: () => void;
+  setShowSubscriptionsInBoardsBar: (show: boolean) => void;
+  closeBoardsBarEditModal: () => void;
   subscriptions: string[];
   location: { pathname: string };
 }) => {
@@ -39,7 +39,7 @@ const TopbarEditModalForm = ({
   const allVisible = allBoardCodes.every((code) => visibleDirectories.has(code));
 
   const [localDirectoryInput, setLocalDirectoryInput] = useState(() => (allVisible ? '' : directoriesToString(visibleDirectories)));
-  const [showSubscriptions, setShowSubscriptions] = useState(() => showSubscriptionsInTopbar);
+  const [showSubscriptions, setShowSubscriptions] = useState(() => showSubscriptionsInBoardsBar);
 
   const handleSave = () => {
     if (localDirectoryInput.trim() === '') {
@@ -48,8 +48,8 @@ const TopbarEditModalForm = ({
       const inputDirectories = stringToDirectories(localDirectoryInput);
       allBoardCodes.forEach((code) => setDirectoryVisibility(code, inputDirectories.has(code)));
     }
-    setShowSubscriptionsInTopbar(showSubscriptions);
-    closeTopbarEditModal();
+    setShowSubscriptionsInBoardsBar(showSubscriptions);
+    closeBoardsBarEditModal();
   };
 
   return (
@@ -76,7 +76,7 @@ const TopbarEditModalForm = ({
                 className={styles.editSubscriptionsLink}
                 onClick={(e) => {
                   e.stopPropagation();
-                  closeTopbarEditModal();
+                  closeBoardsBarEditModal();
                 }}
               >
                 edit subscriptions
@@ -86,16 +86,16 @@ const TopbarEditModalForm = ({
           </div>
         </div>
       )}
-      <div className={styles.topbarEditFooter}>
+      <div className={styles.boardsbarEditFooter}>
         <button onClick={handleSave}>Save</button>
       </div>
     </>
   );
 };
 
-const TopbarEditModal = () => {
-  const { showModal, closeTopbarEditModal } = useTopbarEditModalStore();
-  const { visibleDirectories, showSubscriptionsInTopbar, setDirectoryVisibility, setShowSubscriptionsInTopbar } = useTopbarVisibilityStore();
+const BoardsBarEditModal = () => {
+  const { showModal, closeBoardsBarEditModal } = useBoardsBarEditModalStore();
+  const { visibleDirectories, showSubscriptionsInBoardsBar, setDirectoryVisibility, setShowSubscriptionsInBoardsBar } = useBoardsBarVisibilityStore();
   const account = useAccount();
   const subscriptions = useMemo(() => account?.subscriptions || [], [account?.subscriptions]);
   const location = useLocation();
@@ -106,27 +106,27 @@ const TopbarEditModal = () => {
 
   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
-      closeTopbarEditModal();
+      closeBoardsBarEditModal();
     }
   };
 
-  const formKey = `${directoriesToString(visibleDirectories)}-${showSubscriptionsInTopbar}`;
+  const formKey = `${directoriesToString(visibleDirectories)}-${showSubscriptionsInBoardsBar}`;
 
   return (
     <div className={styles.backdrop} onClick={handleBackdropClick}>
-      <div className={styles.topbarEditDialog}>
+      <div className={styles.boardsbarEditDialog}>
         <div className={styles.hd}>
           <h2>Custom Board List</h2>
-          <button className={styles.closeButton} onClick={closeTopbarEditModal} title='Close' />
+          <button className={styles.closeButton} onClick={closeBoardsBarEditModal} title='Close' />
         </div>
         <div className={styles.bd}>
-          <TopbarEditModalForm
+          <BoardsBarEditModalForm
             key={formKey}
             visibleDirectories={visibleDirectories}
-            showSubscriptionsInTopbar={showSubscriptionsInTopbar}
+            showSubscriptionsInBoardsBar={showSubscriptionsInBoardsBar}
             setDirectoryVisibility={setDirectoryVisibility}
-            setShowSubscriptionsInTopbar={setShowSubscriptionsInTopbar}
-            closeTopbarEditModal={closeTopbarEditModal}
+            setShowSubscriptionsInBoardsBar={setShowSubscriptionsInBoardsBar}
+            closeBoardsBarEditModal={closeBoardsBarEditModal}
             subscriptions={subscriptions}
             location={location}
           />
@@ -136,4 +136,4 @@ const TopbarEditModal = () => {
   );
 };
 
-export default TopbarEditModal;
+export default BoardsBarEditModal;

src/components/boardsbar-edit-modal/boardsbar-edit-modal.types.ts

@@ -1,4 +1,4 @@
-// Types for topbar edit modal component
+// Types for boardsbar edit modal component
 
 export interface BoardCodeCheckbox {
   code: string;

src/components/boardsbar-edit-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './boardsbar-edit-modal';

src/components/boardsbar/boardsbar.module.css

@@ -1,29 +1,29 @@
 
 .boardNavDesktop {
-  font-size: var(--topbar-font-size);
-  color: var(--topbar-separator-color);
+  font-size: var(--boardsbar-font-size);
+  color: var(--boardsbar-separator-color);
   position: relative;
 }
 
 .checkingSubscriptions {
-  font-size: var(--topbar-font-size);
-  color: var(--topbar-desktop-link-text-color);
+  font-size: var(--boardsbar-font-size);
+  color: var(--boardsbar-desktop-link-text-color);
   text-transform: lowercase;
 }
 
 .boardNavDesktop a, .navTopRight span {
-  color: var(--topbar-desktop-link-text-color);
-  text-decoration: var(--topbar-desktop-link-text-decoration);
+  color: var(--boardsbar-desktop-link-text-color);
+  text-decoration: var(--boardsbar-desktop-link-text-decoration);
 }
 
 .boardNavDesktop a:hover, .navTopRight span:hover {
-  color: var(--topbar-desktop-link-text-color-hover);
-  text-decoration: var(--topbar-desktop-link-text-decoration-hover);
+  color: var(--boardsbar-desktop-link-text-color-hover);
+  text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
   cursor: pointer;
 }
 
 .placeholder {
-  color: var(--topbar-separator-color);
+  color: var(--boardsbar-separator-color);
 }
 
 .navTopRight {
@@ -42,14 +42,14 @@
 }
 
 .temporaryButton {
-  color: var(--topbar-desktop-link-text-color);
-  text-decoration: var(--topbar-desktop-link-text-decoration);
+  color: var(--boardsbar-desktop-link-text-color);
+  text-decoration: var(--boardsbar-desktop-link-text-decoration);
   text-transform: capitalize;
 }
 
 .temporaryButton:hover {
-  color: var(--topbar-desktop-link-text-color-hover);
-  text-decoration: var(--topbar-desktop-link-text-decoration-hover);
+  color: var(--boardsbar-desktop-link-text-color-hover);
+  text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
   cursor: pointer;
 }
 
@@ -63,9 +63,9 @@
 
 .boardNavMobile {
   padding: 2px 4px;
-  background-color: var(--topbar-mobile-background-color);
-  border-bottom: var(--topbar-mobile-border-bottom);
-  font-size: var(--topbar-mobile-font-size);
+  background-color: var(--boardsbar-mobile-background-color);
+  border-bottom: var(--boardsbar-mobile-border-bottom);
+  font-size: var(--boardsbar-mobile-font-size);
   position: fixed;
   width: 100%;
   z-index: 3;
@@ -77,7 +77,7 @@
 }
 
 .boardNavMobile .pageJump a, .boardNavMobile .pageJump span {
-  color: var(--topbar-mobile-button-text-color);
+  color: var(--boardsbar-mobile-button-text-color);
   text-decoration: var(--button-text-decoration-mobile);
 }
 
@@ -91,7 +91,7 @@
 }
 
 .boardNavMobile select {
-  font-size: var(--topbar-mobile-font-size);
+  font-size: var(--boardsbar-mobile-font-size);
 }
 
 .boardSelect {
@@ -120,4 +120,4 @@
   .boardNavMobile {
     display: none;
   }
-}
+}

src/components/boardsbar/boardsbar.tsx

@@ -9,11 +9,11 @@ import { useDirectories, DirectoryCommunity } from '../../hooks/use-directories'
 import { useBoardPath, useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
 import { getBoardPath, extractDirectoryFromTitle } from '../../lib/utils/route-utils';
 import useCreateBoardModalStore from '../../stores/use-create-board-modal-store';
-import useTopbarEditModalStore from '../../stores/use-topbar-edit-modal-store';
-import useTopbarVisibilityStore from '../../stores/use-topbar-visibility-store';
+import useBoardsBarEditModalStore from '../../stores/use-boardsbar-edit-modal-store';
+import useBoardsBarVisibilityStore from '../../stores/use-boardsbar-visibility-store';
 import useDirectoryModalStore from '../../stores/use-directory-modal-store';
 import { BOARD_CODE_GROUPS, getAllBoardCodes } from '../../constants/board-codes';
-import styles from './topbar.module.css';
+import styles from './boardsbar.module.css';
 import capitalize from 'lodash/capitalize';
 import debounce from 'lodash/debounce';
 import lowerCase from 'lodash/lowerCase';
@@ -87,7 +87,7 @@ const findBoardAddressByCode = (code: string, directories: DirectoryCommunity[])
   return entry?.address || null;
 };
 
-const TopBarDesktop = () => {
+const BoardsBarDesktop = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
@@ -95,9 +95,9 @@ const TopBarDesktop = () => {
   const [showSearchBar, setShowSearchBar] = useState(false);
   const [showAllTemporarily, setShowAllTemporarily] = useState(false);
   const { openCreateBoardModal } = useCreateBoardModalStore();
-  const { openTopbarEditModal } = useTopbarEditModalStore();
+  const { openBoardsBarEditModal } = useBoardsBarEditModalStore();
   const { openDirectoryModal } = useDirectoryModalStore();
-  const { visibleDirectories, showSubscriptionsInTopbar } = useTopbarVisibilityStore();
+  const { visibleDirectories, showSubscriptionsInBoardsBar } = useBoardsBarVisibilityStore();
   const directories = useDirectories();
 
   // Memoize allBoardCodes since it's derived from a constant
@@ -129,7 +129,7 @@ const TopBarDesktop = () => {
   );
 
   // Show all subscriptions when enabled; no separate per-address tracking (avoids drift when subscribing from board-buttons)
-  const visibleSubscriptionAddresses = showSubscriptionsInTopbar ? subscriptions : [];
+  const visibleSubscriptionAddresses = showSubscriptionsInBoardsBar ? subscriptions : [];
 
   // Check if any directories are hidden
   const hasHiddenDirectories = useMemo(() => {
@@ -146,7 +146,7 @@ const TopBarDesktop = () => {
 
   // Initialize visibility store on mount
   useEffect(() => {
-    useTopbarVisibilityStore.getState().initialize();
+    useBoardsBarVisibilityStore.getState().initialize();
   }, []);
 
   // Render a board code link or placeholder
@@ -229,7 +229,7 @@ const TopBarDesktop = () => {
           <>[{visibleSubscriptionAddresses.map((address: string, index: number) => renderSubscription(address, index, visibleSubscriptionAddresses.length))}] </>
         )}
         [
-        <span className={styles.temporaryButton} onClick={() => openTopbarEditModal()} style={{ cursor: 'pointer' }}>
+        <span className={styles.temporaryButton} onClick={() => openBoardsBarEditModal()} style={{ cursor: 'pointer' }}>
           {capitalize(t('edit'))}
         </span>
         ] [
@@ -247,7 +247,7 @@ const TopBarDesktop = () => {
   );
 };
 
-const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
+const BoardsBarMobile = ({ subplebbitAddress }: { subplebbitAddress?: string }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const directories = useDirectories();
@@ -302,7 +302,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
       {directoryBoards.map((board, index) => {
         const directoryCode = extractDirectoryFromTitle(board.title!);
         return (
-          <option key={index} value={directoryCode!}>
+          <option key={board.address} value={directoryCode!}>
             {board.title}
           </option>
         );
@@ -344,7 +344,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
   );
 };
 
-const TopBar = () => {
+const BoardsBar = () => {
   const params = useParams();
   const commentIndex = params?.accountCommentIndex ? parseInt(params.accountCommentIndex) : undefined;
   const accountComment = useAccountComment({ commentIndex });
@@ -353,10 +353,10 @@ const TopBar = () => {
 
   return (
     <>
-      <TopBarDesktop />
-      <TopBarMobile subplebbitAddress={subplebbitAddress} />
+      <BoardsBarDesktop />
+      <BoardsBarMobile subplebbitAddress={subplebbitAddress} />
     </>
   );
 };
 
-export default TopBar;
+export default BoardsBar;

src/components/boardsbar/index.ts

@@ -0,0 +1 @@
+export { default } from './boardsbar';

src/components/catalog-footer-first-row/catalog-footer-first-row.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+import StyleSelector from '../style-selector/style-selector';
+import styles from '../footer-first-row/footer-first-row.module.css';
+
+/** Catalog footer first row: Style selector on right only (no pagination; catalog shows all pages at once). */
+const CatalogFooterFirstRow = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.footerRow}>
+      <div className={styles.footerLeft} />
+      <div className={styles.footerRight}>
+        <span className={styles.styleLabel}>{t('style')}:</span>
+        <StyleSelector />
+      </div>
+    </div>
+  );
+};
+
+export default CatalogFooterFirstRow;

src/components/catalog-footer-first-row/index.ts

@@ -0,0 +1 @@
+export { default } from './catalog-footer-first-row';

src/components/footer-first-row/footer-first-row.module.css

@@ -0,0 +1,27 @@
+/* Shared footer first-row layout styles (catalog footer, board pagination footer mode) */
+.footerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.footerLeft {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.footerRight {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.styleLabel {
+  font-size: 12px;
+  text-transform: capitalize;
+}

src/components/page-footer-desktop/index.ts

@@ -0,0 +1,2 @@
+export { default } from './page-footer-desktop';
+export type { PageFooterDesktopProps } from './page-footer-desktop';

src/components/page-footer-desktop/page-footer-desktop.module.css

@@ -0,0 +1,38 @@
+.footer {
+  margin-top: 16px;
+  padding-bottom: 24px;
+}
+
+.footer hr {
+  width: 90%;
+  margin: 16px auto;
+  border: none;
+  border-top: 1px solid var(--border-color, #ccc);
+}
+
+.firstRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 0;
+  text-align: center;
+}
+
+.boardsBarRow {
+  padding: 8px 0;
+}
+
+.legalMeta {
+  padding: 12px 0 0;
+  font-size: 11px;
+  color: var(--body-font-color);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .footer {
+    display: none;
+  }
+}

src/components/page-footer-desktop/page-footer-desktop.tsx

@@ -0,0 +1,25 @@
+import BoardsBar from '../boardsbar';
+import SiteLegalMeta from '../site-legal-meta';
+import styles from './page-footer-desktop.module.css';
+
+export interface PageFooterDesktopProps {
+  /** Mode-specific first row content (e.g. board pagination or thread controls) */
+  firstRow: React.ReactNode;
+}
+
+const PageFooterDesktop = ({ firstRow }: PageFooterDesktopProps) => {
+  return (
+    <footer className={styles.footer}>
+      <hr />
+      <div className={styles.firstRow}>{firstRow}</div>
+      <div className={styles.boardsBarRow}>
+        <BoardsBar />
+      </div>
+      <div className={styles.legalMeta}>
+        <SiteLegalMeta order='license-first' />
+      </div>
+    </footer>
+  );
+};
+
+export default PageFooterDesktop;

src/components/settings-modal/interface-settings/__tests__/interface-settings.test.tsx

@@ -16,22 +16,10 @@ vi.mock('react-i18next', () => ({
   }),
 }));
 
-vi.mock('../../../../hooks/use-theme', () => ({
-  default: () => ['yotsuba', vi.fn()],
-}));
-
 vi.mock('../../../../stores/use-expanded-media-store', () => ({
   default: () => ({ fitExpandedImagesToScreen: false, setFitExpandedImagesToScreen: vi.fn() }),
 }));
 
-vi.mock('../../../../stores/use-special-theme-store', () => ({
-  default: () => ({ isEnabled: false, setIsEnabled: vi.fn() }),
-}));
-
-vi.mock('../../../../lib/utils/time-utils', () => ({
-  isChristmas: () => false,
-}));
-
 vi.mock('../../version', () => ({
   default: () => null,
 }));

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -1,13 +1,10 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import useTheme from '../../../hooks/use-theme';
 import packageJson from '../../../../package.json';
 import styles from './interface-settings.module.css';
 import capitalize from 'lodash/capitalize';
 import useExpandedMediaStore from '../../../stores/use-expanded-media-store';
 import useFeedViewSettingsStore from '../../../stores/use-feed-view-settings-store';
-import useSpecialThemeStore from '../../../stores/use-special-theme-store';
-import { isChristmas } from '../../../lib/utils/time-utils';
 import Version from '../../version';
 
 const commitRef = process.env.VITE_COMMIT_REF;
@@ -68,36 +65,6 @@ const CheckForUpdates = () => {
   );
 };
 
-const Style = () => {
-  const [theme, setTheme] = useTheme();
-  const { isEnabled, setIsEnabled } = useSpecialThemeStore();
-  const isChristmasTime = isChristmas();
-
-  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newTheme = e.target.value;
-
-    if (newTheme === 'special') {
-      setIsEnabled(true);
-      setTheme('tomorrow');
-    } else {
-      setIsEnabled(false);
-      setTheme(newTheme);
-    }
-  };
-
-  return (
-    <select className={styles.themeSettings} value={isEnabled ? 'special' : theme} onChange={handleThemeChange}>
-      <option value='yotsuba'>Yotsuba</option>
-      <option value='yotsuba-b'>Yotsuba B</option>
-      <option value='futaba'>Futaba</option>
-      <option value='burichan'>Burichan</option>
-      <option value='tomorrow'>Tomorrow</option>
-      <option value='photon'>Photon</option>
-      {isChristmasTime && <option value='special'>Special</option>}
-    </select>
-  );
-};
-
 // prettier-ignore
 const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
 
@@ -135,9 +102,6 @@ const InterfaceSettings = () => {
       <div className={styles.setting}>
         {capitalize(t('update'))}: <CheckForUpdates />
       </div>
-      <div className={styles.setting}>
-        {capitalize(t('style'))}: <Style />
-      </div>
       <div className={styles.setting}>
         {capitalize(t('interface_language'))}: <InterfaceLanguage />
       </div>

src/components/site-legal-meta/index.ts

@@ -0,0 +1,2 @@
+export { default } from './site-legal-meta';
+export type { SiteLegalMetaOrder, SiteLegalMetaProps } from './site-legal-meta';

src/components/site-legal-meta/site-legal-meta.tsx

@@ -0,0 +1,41 @@
+import Version from '../version';
+
+export type SiteLegalMetaOrder = 'version-first' | 'license-first';
+
+export type SiteLegalMetaProps = {
+  /** Order of blocks: version-first (homepage) or license-first (board/post footer) */
+  order?: SiteLegalMetaOrder;
+};
+
+const LicenseText = () => <span>5chan is free and open source software under GPLv2 license.</span>;
+
+const VersionFeedbackContact = () => (
+  <>
+    <Version /> •{' '}
+    <a href='https://github.com/bitsocialhq/5chan/issues/new' target='_blank' rel='noopener noreferrer'>
+      Feedback
+    </a>{' '}
+    •{' '}
+    <a href='https://github.com/bitsocialhq/5chan/graphs/contributors' target='_blank' rel='noopener noreferrer'>
+      Contact
+    </a>
+  </>
+);
+
+const SiteLegalMeta = ({ order = 'version-first' }: SiteLegalMetaProps) => {
+  const first = order === 'version-first' ? <VersionFeedbackContact /> : <LicenseText />;
+  const second = order === 'version-first' ? <LicenseText /> : <VersionFeedbackContact />;
+
+  return (
+    <>
+      <br />
+      {first}
+      <br />
+      <br />
+      <br />
+      {second}
+    </>
+  );
+};
+
+export default SiteLegalMeta;

src/components/style-selector/style-selector.module.css

@@ -0,0 +1,3 @@
+.select {
+  display: inline-block;
+}

src/components/style-selector/style-selector.tsx

@@ -0,0 +1,36 @@
+import useTheme from '../../hooks/use-theme';
+import useSpecialThemeStore from '../../stores/use-special-theme-store';
+import { isChristmas } from '../../lib/utils/time-utils';
+import styles from './style-selector.module.css';
+
+const StyleSelector = () => {
+  const [theme, setTheme] = useTheme();
+  const { isEnabled, setIsEnabled } = useSpecialThemeStore();
+  const isChristmasTime = isChristmas();
+
+  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newTheme = e.target.value;
+
+    if (newTheme === 'special') {
+      setIsEnabled(true);
+      setTheme('tomorrow');
+    } else {
+      setIsEnabled(false);
+      setTheme(newTheme);
+    }
+  };
+
+  return (
+    <select className={styles.select} value={isEnabled ? 'special' : theme} onChange={handleThemeChange}>
+      <option value='yotsuba'>Yotsuba</option>
+      <option value='yotsuba-b'>Yotsuba B</option>
+      <option value='futaba'>Futaba</option>
+      <option value='burichan'>Burichan</option>
+      <option value='tomorrow'>Tomorrow</option>
+      <option value='photon'>Photon</option>
+      {isChristmasTime && <option value='special'>Special</option>}
+    </select>
+  );
+};
+
+export default StyleSelector;

src/components/thread-footer-first-row/index.ts

@@ -0,0 +1,2 @@
+export { default } from './thread-footer-first-row';
+export type { ThreadFooterFirstRowProps } from './thread-footer-first-row';

src/components/thread-footer-first-row/thread-footer-first-row.module.css

@@ -0,0 +1,31 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  width: 100%;
+  text-transform: capitalize;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+}
+
+.row .button {
+  text-transform: capitalize;
+}

src/components/thread-footer-first-row/thread-footer-first-row.tsx

@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+import { useLocation, useParams } from 'react-router-dom';
+import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
+import { useDirectories } from '../../hooks/use-directories';
+import { getBoardPath } from '../../lib/utils/route-utils';
+import useReplyModalStore from '../../stores/use-reply-modal-store';
+import { ReturnButton, CatalogButton, TopButton, UpdateButton, AutoButton, PostPageStats } from '../board-buttons/board-buttons';
+import styles from './thread-footer-first-row.module.css';
+
+export interface ThreadFooterFirstRowProps {
+  postCid: string;
+  threadNumber: number | undefined;
+  subplebbitAddress: string;
+  /** Thread closed - disable Post a Reply */
+  isThreadClosed?: boolean;
+}
+
+const ThreadFooterFirstRow = ({ postCid, threadNumber, subplebbitAddress, isThreadClosed = false }: ThreadFooterFirstRowProps) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const params = useParams();
+  const directories = useDirectories();
+  const { openReplyModalEmpty } = useReplyModalStore();
+
+  const isInAllView = isAllView(location.pathname);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+  const isInModView = isModView(location.pathname);
+
+  const handlePostReplyClick = () => {
+    if (isThreadClosed) return;
+    openReplyModalEmpty(postCid, threadNumber, subplebbitAddress);
+  };
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.left}>
+        [<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
+        <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
+        <TopButton />] [<UpdateButton />] [<AutoButton />]
+      </div>
+      <div className={styles.center}>
+        [
+        <button type='button' className='button' onClick={handlePostReplyClick} disabled={isThreadClosed} aria-label={t('post_a_reply')}>
+          {t('post_a_reply')}
+        </button>
+        ]
+      </div>
+      <div className={styles.right}>
+        <PostPageStats />
+      </div>
+    </div>
+  );
+};
+
+export default ThreadFooterFirstRow;

src/components/topbar-edit-modal/index.ts

@@ -1 +0,0 @@
-export { default } from './topbar-edit-modal';

src/components/topbar/index.ts

@@ -1 +0,0 @@
-export { default } from './topbar';