feat(board nav): add home and settings buttons

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

@@ -15,6 +15,11 @@
   text-decoration: var(--internal-link-text-decoration-hover);
 }
 
+.navTopRight {
+  float: right;
+  text-transform: capitalize;
+}
+
 .boardNavMobile {
   padding: 2px 4px;
   background-color: var(--boardnav-mobile-background-color);

src/components/board-nav/board-nav.tsx

@@ -1,4 +1,5 @@
 import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
 import styles from './board-nav.module.css';
 
@@ -9,19 +10,30 @@ interface BoardNavProps {
 }
 
 const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
+  const { t } = useTranslation();
+
   return (
     <div className={styles.boardNavDesktop}>
-      [
+      <span className={styles.boardList}>
-      {subplebbits.map((subplebbit: any, index: number) => (
+        [
-        <span key={subplebbit.address}>
+        {subplebbits.map((subplebbit: any, index: number) => (
-          {index === 0 ? null : ' '}
+          <span key={subplebbit.address}>
-          <Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
+            {index === 0 ? null : ' '}
-            {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
+            <Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
-          </Link>
+              {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
-          {index !== subplebbits.length - 1 ? ' /' : null}
+            </Link>
-        </span>
+            {index !== subplebbits.length - 1 ? ' /' : null}
-      ))}
+          </span>
-      ]
+        ))}
+        ]
+      </span>
+      <span className={styles.navTopRight}>
+        [
+        <Link to='/settings' onClick={(e) => e.preventDefault()}>
+          {t('settings')}
+        </Link>
+        ] [<Link to='/'>{t('home')}</Link>]
+      </span>
     </div>
   );
 };

src/components/board-stats/board-stats.tsx

@@ -26,7 +26,7 @@ const BoardStats = ({ address, createdAt }: BoardStatsProps) => {
       <table className={styles.blotter}>
         <hr />
         {showStats && (
-          <tbody id='blotter-msgs'>
+          <tbody>
             <tr>
               <td>
                 <Trans

src/views/subplebbit/subplebbit.module.css

@@ -1,6 +1,6 @@
 .debug {
   position: fixed;
-  top: 20px;
+  top: 50px;
   right: 0;
   padding: 0.5em;
 }