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

src/views/board/board.tsx

@@ -19,6 +19,7 @@ import { getPageFromFeedPath, getSubplebbitAddress, isDirectoryBoard, normalizeM
 import ErrorDisplay from '../../components/error-display/error-display';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import BoardPagination from '../../components/board-pagination';
+import PageFooterDesktop from '../../components/page-footer-desktop';
 import { Post } from '../post';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
@@ -270,20 +271,23 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
   const footerComponents = useMemo(
     () => ({
       Footer: () => (
-        <BoardFooter
-          subplebbitAddresses={subplebbitAddresses}
-          hasMore={hasMore}
-          combinedFeedLength={combinedFeed.length}
-          subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
-          onNewerPostsClick={handleNewerPostsButtonClick}
-          isInAllView={isInAllView}
-          isInSubscriptionsView={isInSubscriptionsView}
-          isInModView={isInModView}
-          subplebbitState={subplebbitState}
-          subscriptionsLength={subscriptions?.length || 0}
-          accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
-          showLoadingEllipsis={effectiveInfiniteScroll || combinedFeed.length === 0}
-        />
+        <>
+          <BoardFooter
+            subplebbitAddresses={subplebbitAddresses}
+            hasMore={hasMore}
+            combinedFeedLength={combinedFeed.length}
+            subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
+            onNewerPostsClick={handleNewerPostsButtonClick}
+            isInAllView={isInAllView}
+            isInSubscriptionsView={isInSubscriptionsView}
+            isInModView={isInModView}
+            subplebbitState={subplebbitState}
+            subscriptionsLength={subscriptions?.length || 0}
+            accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
+            showLoadingEllipsis={effectiveInfiniteScroll || combinedFeed.length === 0}
+          />
+          <PageFooterDesktop firstRow={<BoardPagination basePath={paginationBasePath} currentPage={currentPage} totalPages={totalPages} footerStyle />} />
+        </>
       ),
     }),
     [
@@ -299,7 +303,9 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
       subscriptions?.length,
       accountSubplebbitAddresses?.length,
       effectiveInfiniteScroll,
-      combinedFeed.length,
+      paginationBasePath,
+      currentPage,
+      totalPages,
     ],
   );
 
@@ -399,6 +405,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
                 accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
                 showLoadingEllipsis={true}
               />
+              <PageFooterDesktop firstRow={<BoardPagination basePath={paginationBasePath} currentPage={currentPage} totalPages={totalPages} footerStyle />} />
             </>
           )
         ) : (
@@ -407,7 +414,6 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
             {currentPageFeed.map((post, index) => (
               <Post key={post.cid} index={index} post={post} />
             ))}
-            <BoardPagination basePath={paginationBasePath} currentPage={currentPage} totalPages={totalPages} />
             <BoardFooter
               subplebbitAddresses={subplebbitAddresses}
               hasMore={hasMore}
@@ -422,6 +428,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
               accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
               showLoadingEllipsis={combinedFeed.length === 0}
             />
+            <PageFooterDesktop firstRow={<BoardPagination basePath={paginationBasePath} currentPage={currentPage} totalPages={totalPages} footerStyle />} />
           </>
         )}
       </div>

src/views/catalog/catalog.tsx

@@ -17,8 +17,10 @@ import useSortingStore from '../../stores/use-sorting-store';
 import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
 import { getSubplebbitAddress, isDirectoryBoard, normalizeMultiboardFeedPath } from '../../lib/utils/route-utils';
 import CatalogRow from '../../components/catalog-row';
+import CatalogFooterFirstRow from '../../components/catalog-footer-first-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import ErrorDisplay from '../../components/error-display/error-display';
+import PageFooterDesktop from '../../components/page-footer-desktop';
 import styles from './catalog.module.css';
 import { commentMatchesPattern } from '../../lib/utils/pattern-utils';
 
@@ -391,17 +393,20 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
   const footerComponents = useMemo(
     () => ({
       Footer: () => (
-        <CatalogFooter
-          subplebbitAddresses={subplebbitAddresses}
-          hasMore={hasMore}
-          combinedFeedLength={cappedFeed.length}
-          subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
-          onNewerPostsClick={handleNewerPostsButtonClick}
-          isInAllView={isInAllView}
-          isInSubscriptionsView={isInSubscriptionsView}
-          isInModView={isInModView}
-          showLoadingEllipsis={effectiveInfiniteScroll}
-        />
+        <>
+          <CatalogFooter
+            subplebbitAddresses={subplebbitAddresses}
+            hasMore={hasMore}
+            combinedFeedLength={cappedFeed.length}
+            subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
+            onNewerPostsClick={handleNewerPostsButtonClick}
+            isInAllView={isInAllView}
+            isInSubscriptionsView={isInSubscriptionsView}
+            isInModView={isInModView}
+            showLoadingEllipsis={effectiveInfiniteScroll}
+          />
+          <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
+        </>
       ),
     }),
     [
@@ -556,7 +561,16 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
               ) : (
                 <>
                   {rows.map((row, index) => (
-                    <CatalogRow key={index} index={index} row={row} />
+                    <CatalogRow
+                      key={
+                        row
+                          .map((p) => p?.cid ?? (p?.timestamp != null ? `t${p.timestamp}` : ''))
+                          .filter(Boolean)
+                          .join('-') || 'row-no-ids'
+                      }
+                      index={index}
+                      row={row}
+                    />
                   ))}
                   <CatalogFooter
                     subplebbitAddresses={subplebbitAddresses}
@@ -569,12 +583,22 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
                     isInModView={isInModView}
                     showLoadingEllipsis={true}
                   />
+                  <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
                 </>
               )
             ) : (
               <>
                 {rows.map((row, index) => (
-                  <CatalogRow key={index} index={index} row={row} />
+                  <CatalogRow
+                    key={
+                      row
+                        .map((p) => p?.cid ?? (p?.timestamp != null ? `t${p.timestamp}` : ''))
+                        .filter(Boolean)
+                        .join('-') || 'row-no-ids'
+                    }
+                    index={index}
+                    row={row}
+                  />
                 ))}
                 <CatalogFooter
                   subplebbitAddresses={subplebbitAddresses}
@@ -587,20 +611,24 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
                   isInModView={isInModView}
                   showLoadingEllipsis={false}
                 />
+                <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
               </>
             )}
           </>
         ) : (
-          <div className={styles.footer}>
-            <CatalogLoading
-              subplebbitAddresses={subplebbitAddresses}
-              hasMore={hasMore}
-              combinedFeedLength={cappedFeed.length}
-              state={state}
-              subscriptionsLength={isInSubscriptionsView ? subscriptions?.length || 0 : 1}
-              error={error}
-            />
-          </div>
+          <>
+            <div className={styles.footer}>
+              <CatalogLoading
+                subplebbitAddresses={subplebbitAddresses}
+                hasMore={hasMore}
+                combinedFeedLength={cappedFeed.length}
+                state={state}
+                subscriptionsLength={isInSubscriptionsView ? subscriptions?.length || 0 : 1}
+                error={error}
+              />
+            </div>
+            <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
+          </>
         )}
       </div>
     </div>

src/views/home/home.tsx

@@ -7,7 +7,7 @@ import { useDirectories, useDirectoryAddresses } from '../../hooks/use-directori
 import { SubplebbitStatsCollector, useSubplebbitsStatsStore } from '../../hooks/use-subplebbits-stats';
 import PopularThreadsBox from './popular-threads-box';
 import BoardsList from './boards-list';
-import Version from '../../components/version';
+import SiteLegalMeta from '../../components/site-legal-meta';
 import useDirectoryModalStore from '../../stores/use-directory-modal-store';
 import DisclaimerModal from '../../components/disclaimer-modal';
 import DirectoryModal from '../../components/directory-modal';
@@ -163,19 +163,7 @@ export const Footer = () => {
         </li>
       </ul>
       <div className={styles.footerInfo}>
-        <br />
-        <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>
-        <br />
-        <br />
-        <br />
-        <span>5chan is free and open source software under GPLv2 license.</span>
+        <SiteLegalMeta />
       </div>
     </>
   );

src/views/post/post.tsx

@@ -9,8 +9,10 @@ import { useDirectories } from '../../hooks/use-directories';
 import { isDirectoryBoard } from '../../lib/utils/route-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
 import ErrorDisplay from '../../components/error-display/error-display';
+import PageFooterDesktop from '../../components/page-footer-desktop';
 import PostDesktop from '../../components/post-desktop';
 import PostMobile from '../../components/post-mobile';
+import ThreadFooterFirstRow from '../../components/thread-footer-first-row';
 import styles from './post.module.css';
 
 export interface PostProps {
@@ -174,6 +176,11 @@ const PostPage = () => {
           <ErrorDisplay error={comment?.error} />
         </div>
       )}
+      {post?.cid && subplebbitAddress ? (
+        <PageFooterDesktop
+          firstRow={<ThreadFooterFirstRow postCid={post.cid} threadNumber={post?.number} subplebbitAddress={subplebbitAddress} isThreadClosed={!!post?.locked} />}
+        />
+      ) : null}
     </div>
   );
 };