feat(home): add disclaimer modal for board navigation

src/views/home/boards-list/boards-list.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Plebbit from '@plebbit/plebbit-js';
 import { useDefaultSubplebbitsState, MultisubSubplebbit } from '../../../hooks/use-default-subplebbits';
 import useIsMobile from '../../../hooks/use-is-mobile';
 import LoadingEllipsis from '../../../components/loading-ellipsis';
+import useDisclaimerModalStore from '../../../stores/use-disclaimer-modal-store';
 import styles from './boards-list.module.css';
 
 const Board = ({ subplebbit, isMobile }: { subplebbit: MultisubSubplebbit; isMobile: boolean }) => {
@@ -12,12 +13,23 @@ const Board = ({ subplebbit, isMobile }: { subplebbit: MultisubSubplebbit; isMob
   const { address, title, nsfw } = subplebbit || {};
   const boardTitle = title?.replace(/^\/[^/]+\/\s*-\s*/, '') || '';
   const displayAddress = address && Plebbit.getShortAddress(address);
+  const navigate = useNavigate();
+  const { showDisclaimerModal } = useDisclaimerModalStore();
+
+  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    if (address) {
+      showDisclaimerModal(address, navigate);
+    }
+  };
 
   return (
     <tr key={address}>
       <td>
         <p className={styles.boardCell}>
-          <Link to={`/p/${address}`}>{displayAddress}</Link>
+          <Link to={`/p/${address}`} onClick={handleLinkClick}>
+            {displayAddress}
+          </Link>
           {nsfw && <span className={styles.nsfw}> ({t('nsfw')})</span>}
         </p>
       </td>

src/views/home/home.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSubplebbits } from '@plebbit/plebbit-react-hooks';
@@ -8,6 +8,8 @@ import useSubplebbitsStats from '../../hooks/use-subplebbits-stats';
 import PopularThreadsBox from './popular-threads-box';
 import BoardsList from './boards-list';
 import Version from '../../components/version';
+import useDisclaimerModalStore from '../../stores/use-disclaimer-modal-store';
+import DisclaimerModal from '../../components/disclaimer-modal';
 import _ from 'lodash';
 
 // https://github.com/plebbit/lists/blob/master/5chan-multisub.json
@@ -16,11 +18,13 @@ const SearchBar = () => {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { showDisclaimerModal } = useDisclaimerModalStore();
 
-  const handleSearchSubmit = () => {
+  const handleSearchSubmit = (e: FormEvent) => {
+    e.preventDefault();
     const searchInput = searchInputRef.current?.value;
     if (searchInput) {
-      navigate(`/p/${searchInput}`);
+      showDisclaimerModal(searchInput, navigate);
     }
   };
 
@@ -180,15 +184,18 @@ const Home = () => {
   }, []);
 
   return (
-    <div className={styles.content}>
-      <HomeLogo />
-      <SearchBar />
-      <InfoBox />
-      <BoardsList multisub={defaultSubplebbits} />
-      <PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
-      <Stats subplebbitAddresses={subplebbitAddresses} />
-      <Footer />
-    </div>
+    <>
+      <DisclaimerModal />
+      <div className={styles.content}>
+        <HomeLogo />
+        <SearchBar />
+        <InfoBox />
+        <BoardsList multisub={defaultSubplebbits} />
+        <PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
+        <Stats subplebbitAddresses={subplebbitAddresses} />
+        <Footer />
+      </div>
+    </>
   );
 };