feat(topbar): add search bar

src/components/topbar/topbar.tsx

@@ -1,17 +1,64 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import styles from './topbar.module.css';
 import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
-import { debounce } from 'lodash';
+import _, { debounce } from 'lodash';
+
+const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) => void }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const searchBarRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const placeholder = `"community.eth/.sol" / "12D3KooW..."`;
+
+  useEffect(() => {
+    searchInputRef.current?.focus();
+  }, []);
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (searchBarRef.current && !searchBarRef.current.contains(event.target as Node)) {
+        setShowSearchBar(false);
+      }
+    },
+    [searchBarRef, setShowSearchBar],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const searchInput = searchInputRef.current?.value;
+    if (searchInput) {
+      searchInputRef.current.value = '';
+      navigate(`/p/${searchInput}`);
+      setShowSearchBar(false);
+    }
+  };
+
+  return (
+    <div className={styles.searchBar} ref={searchBarRef}>
+      <form onSubmit={handleSearchSubmit}>
+        <input type='text' autoCorrect='off' autoComplete='off' spellCheck='false' autoCapitalize='off' placeholder={placeholder} ref={searchInputRef} />
+      </form>
+    </div>
+  );
+};
 
 const TopBarDesktop = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const isInCatalogView = isCatalogView(location.pathname);
   const subplebbits = useDefaultSubplebbits();
+  const [showSearchBar, setShowSearchBar] = useState(false);
 
   const { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs } = categorizeSubplebbits(subplebbits);
 
@@ -33,8 +80,9 @@ const TopBarDesktop = () => {
       </span>
       <span className={styles.navTopRight}>
         [<Link to={!location.pathname.endsWith('settings') ? location.pathname.replace(/\/$/, '') + '/settings' : location.pathname}>{t('settings')}</Link>] [
-        <Link to='/'>{t('home')}</Link>]
+        <span onClick={() => setShowSearchBar(!showSearchBar)}>{t('search')}</span>] [<Link to='/'>{t('home')}</Link>]
       </span>
+      {showSearchBar && <SearchBar setShowSearchBar={setShowSearchBar} />}
     </div>
   );
 };
@@ -44,6 +92,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
   const navigate = useNavigate();
   const subplebbitAddresses = useDefaultSubplebbitAddresses();
   const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress;
+  const [showSearchBar, setShowSearchBar] = useState(false);
 
   const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
 
@@ -95,7 +144,9 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
       </div>
       <div className={styles.pageJump}>
         <Link to={useLocation().pathname.replace(/\/$/, '') + '/settings'}>{t('settings')}</Link>
+        <span onClick={() => setShowSearchBar(!showSearchBar)}>{_.capitalize(t('search'))}</span>
         <Link to='/'>{t('home')}</Link>
+        {showSearchBar && <SearchBar setShowSearchBar={setShowSearchBar} />}
       </div>
     </div>
   );