fix(catalog): improve empty search state and footer layout

Show centered Nothing Found for catalog searches with no matches, mirror
search results labels at the bottom footer, split nav from the style row,
and drop the desktop catalog footer top margin.

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

@@ -523,7 +523,6 @@ export const MobileBoardButtons = () => {
   const resolvedAddress = useResolvedCommunityAddress();
   const communityAddress = resolvedAddress || accountComment?.communityAddress;
 
-  const { filteredCount, searchText } = useCatalogFiltersStore();
   const enableInfiniteScroll = useFeedViewSettingsStore((state) => state.enableInfiniteScroll);
   const isMultiboard = isInAllView || isInSubscriptionsView || isInModView;
   const showTimeFilter = isMultiboard;
@@ -574,19 +573,7 @@ export const MobileBoardButtons = () => {
             isInModView={isInModView}
             isMobilePlacement={true}
           />
-          {searchText ? (
-            <span className={styles.filteredThreadsCount}>
-              {' '}
-              - {t('search_results_for')}: <strong>{searchText}</strong>
-            </span>
-          ) : (
-            filteredCount > 0 && (
-              <span className={styles.filteredThreadsCount}>
-                {' '}
-                - {t('filtered_threads')}: <strong>{filteredCount}</strong>
-              </span>
-            )
-          )}
+          <CatalogSearchResultsLabel />
           {(isInAllView || showTimeFilter || isInCatalogView) && (
             <>
               <hr />
@@ -683,6 +670,31 @@ export const PostPageStats = () => {
   );
 };
 
+export const CatalogSearchResultsLabel = () => {
+  const { t } = useTranslation();
+  const { filteredCount, searchText } = useCatalogFiltersStore();
+
+  if (searchText) {
+    return (
+      <span className={styles.filteredThreadsCount}>
+        {' '}
+        — {t('search_results_for')}: <strong>{searchText}</strong>
+      </span>
+    );
+  }
+
+  if (filteredCount > 0) {
+    return (
+      <span className={styles.filteredThreadsCount}>
+        {' '}
+        — {t('filtered_threads')}: <strong>{filteredCount}</strong>
+      </span>
+    );
+  }
+
+  return null;
+};
+
 export const DesktopBoardButtons = () => {
   const { t } = useTranslation();
   const params = useParams();
@@ -698,7 +710,6 @@ export const DesktopBoardButtons = () => {
   const isInModView = isModView(location.pathname);
   const isInModQueueView = isModQueueView(location.pathname);
 
-  const { filteredCount, searchText } = useCatalogFiltersStore();
   const enableInfiniteScroll = useFeedViewSettingsStore((state) => state.enableInfiniteScroll);
   const isMultiboard = isInAllView || isInSubscriptionsView || isInModView;
   const showTimeFilter = isMultiboard;
@@ -794,20 +805,7 @@ export const DesktopBoardButtons = () => {
                 <ModQueueButton boardIdentifier={boardIdentifier} isMobile={false} />
               </>
             )}
-            {isInCatalogView && searchText ? (
-              <span className={styles.filteredThreadsCount}>
-                {' '}
-                - {t('search_results_for')}: <strong>{searchText}</strong>
-              </span>
-            ) : (
-              isInCatalogView &&
-              filteredCount > 0 && (
-                <span className={styles.filteredThreadsCount}>
-                  {' '}
-                  - {t('filtered_threads')}: <strong>{filteredCount}</strong>
-                </span>
-              )
-            )}
+            {isInCatalogView && <CatalogSearchResultsLabel />}
             <span className={styles.rightSideButtons}>
               {isInCatalogView && (
                 <>

src/components/footer/__tests__/footer.test.tsx

@@ -5,6 +5,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import {
   CatalogFooterFirstRow,
+  CatalogFooterStyleRow,
   PageFooterDesktop,
   PageFooterMobile,
   StyleOnlyFooterFirstRow,
@@ -51,6 +52,7 @@ vi.mock('../../style-selector/style-selector', () => ({
 }));
 
 vi.mock('../../board-buttons/board-buttons', () => ({
+  CatalogSearchResultsLabel: () => null,
   AutoButton: () => createElement('button', { type: 'button' }, 'auto-button'),
   CatalogButton: ({
     address,
@@ -154,6 +156,7 @@ describe('footer', () => {
           isInAllView: true,
           communityAddress: 'music-posting.eth',
         }),
+        createElement(CatalogFooterStyleRow),
         createElement(ThreadFooterStyleRow),
         createElement(PageFooterMobile, {
           children: createElement('div', { 'data-testid': 'mobile-child' }, 'mobile-child'),

src/components/footer/footer.module.css

@@ -4,6 +4,10 @@
   padding-bottom: 24px;
 }
 
+.footerCatalog {
+  margin-top: 0;
+}
+
 .firstRow {
   display: flex;
   align-items: center;
@@ -76,7 +80,6 @@
 }
 
 .styleLabel {
-  font-size: 12px;
   text-transform: capitalize;
 }
 

src/components/footer/footer.tsx

@@ -4,7 +4,16 @@ import { useComment } from '@bitsocial/bitsocial-react-hooks';
 import BoardsBar from '../boards-bar';
 import SiteLegalMeta from '../site-legal-meta';
 import StyleSelector from '../style-selector/style-selector';
-import { ReturnButton, CatalogButton, TopButton, UpdateButton, AutoButton, PostPageStats, RefreshButton } from '../board-buttons/board-buttons';
+import {
+  CatalogSearchResultsLabel,
+  ReturnButton,
+  CatalogButton,
+  TopButton,
+  UpdateButton,
+  AutoButton,
+  PostPageStats,
+  RefreshButton,
+} from '../board-buttons/board-buttons';
 import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
 import useThreadLiveUpdatesStore from '../../stores/use-thread-live-updates-store';
@@ -22,15 +31,17 @@ import styles from './footer.module.css';
 
 interface PageFooterDesktopProps {
   /** Mode-specific first row content (e.g. board pagination or thread controls) */
-  firstRow: React.ReactNode;
+  firstRow?: React.ReactNode;
   /** Optional row between first row and BoardsBar (e.g. style selector on thread page) */
   styleRow?: React.ReactNode;
+  /** Catalog pages omit the default footer top margin */
+  variant?: 'catalog';
 }
 
-export const PageFooterDesktop = ({ firstRow, styleRow }: PageFooterDesktopProps) => (
-  <footer className={styles.footer}>
+export const PageFooterDesktop = ({ firstRow, styleRow, variant }: PageFooterDesktopProps) => (
+  <footer className={variant === 'catalog' ? `${styles.footer} ${styles.footerCatalog}` : styles.footer}>
     <hr />
-    <div className={styles.firstRow}>{firstRow}</div>
+    {firstRow != null ? <div className={styles.firstRow}>{firstRow}</div> : null}
     {styleRow != null ? <div className={styles.styleRow}>{styleRow}</div> : null}
     <div className={styles.boardsBarRow}>
       <BoardsBar />
@@ -60,7 +71,7 @@ export const StyleOnlyFooterFirstRow = () => {
 
 /* -----------------------------------------------------------------------------
  * CatalogFooterFirstRow
- * Catalog footer first row: Return, Archive, Top, Refresh on left; Style selector on right.
+ * Catalog footer nav row: Return, Catalog, Top, Refresh, plus search/filter label.
  * -------------------------------------------------------------------------- */
 
 interface CatalogFooterFirstRowProps {
@@ -71,7 +82,6 @@ interface CatalogFooterFirstRowProps {
 }
 
 export const CatalogFooterFirstRow = ({ communityAddress, isInAllView = false, isInSubscriptionsView = false, isInModView = false }: CatalogFooterFirstRowProps) => {
-  const { t } = useTranslation();
   return (
     <div className={styles.footerRow}>
       <div className={styles.footerLeft}>
@@ -87,15 +97,27 @@ export const CatalogFooterFirstRow = ({ communityAddress, isInAllView = false, i
         <span>
           [<RefreshButton />]
         </span>
-      </div>
-      <div className={styles.footerRight}>
-        <span className={styles.styleLabel}>{t('style')}:</span>
-        <StyleSelector />
+        <CatalogSearchResultsLabel />
       </div>
     </div>
   );
 };
 
+/* -----------------------------------------------------------------------------
+ * CatalogFooterStyleRow
+ * Catalog style selector on its own row (below nav, above BoardsBar).
+ * -------------------------------------------------------------------------- */
+
+export const CatalogFooterStyleRow = () => {
+  const { t } = useTranslation();
+  return (
+    <span className={styles.styleRowContent}>
+      <span className={styles.styleLabel}>{t('style')}:</span>
+      <StyleSelector />
+    </span>
+  );
+};
+
 /* -----------------------------------------------------------------------------
  * ThreadFooterStyleRow
  * Style selector on its own row (thread page only, below first row, above BoardsBar).

src/components/footer/index.ts

@@ -3,6 +3,7 @@ export {
   PageFooterMobile,
   StyleOnlyFooterFirstRow,
   CatalogFooterFirstRow,
+  CatalogFooterStyleRow,
   ThreadFooterFirstRow,
   ThreadFooterStyleRow,
   ThreadFooterMobile,