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

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;