feat(topbar): add search bar

src/components/board-header/board-header.tsx

@@ -39,7 +39,7 @@ const BoardHeader = () => {
       <div className={styles.bannerCnt}>
         <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
       </div>
-      <div className={styles.boardTitle}>{title || `p/${shortAddress}`}</div>
+      <div className={styles.boardTitle}>{title || `p/${shortAddress || subplebbitAddress}`}</div>
       <div className={styles.boardSubtitle}>{subtitle}</div>
       <hr />
     </div>

src/components/topbar/topbar.module.css

@@ -2,16 +2,19 @@
 .boardNavDesktop {
   font-size: var(--topbar-font-size);
   color: var(--topbar-separator-color);
+  position: relative;
 }
 
-.boardNavDesktop a {
+.boardNavDesktop a, .navTopRight span {
   color: var(--topbar-desktop-link-text-color);
   text-decoration: var(--topbar-desktop-link-text-decoration);
+  text-transform: capitalize;
 }
 
-.boardNavDesktop a:hover {
+.boardNavDesktop a:hover, .navTopRight span:hover {
   color: var(--topbar-desktop-link-text-color-hover);
   text-decoration: var(--topbar-desktop-link-text-decoration-hover);
+  cursor: pointer;
 }
 
 .navTopRight {
@@ -19,6 +22,20 @@
   text-transform: capitalize;
 }
 
+.searchBar {
+  position: absolute;
+  right: 0;
+  padding: 3px 5px 0 0;
+}
+
+.searchBar input[type="text"] {
+  outline: none;
+  margin: 2px;
+  padding: 1px;
+  border: 1px solid #000;
+  width: 220px;
+}
+
 .boardNavMobile {
   padding: 2px 4px;
   background-color: var(--topbar-mobile-background-color);
@@ -32,11 +49,15 @@
   justify-content: space-around;
 }
 
-.boardNavMobile .pageJump a {
+.boardNavMobile .pageJump a, .boardNavMobile .pageJump span {
   color: var(--topbar-mobile-button-color);
   text-decoration: var(--button-text-decoration-mobile);
 }
 
+.pageJump {
+  position: relative;
+}
+
 .boardNavMobile strong {
   text-transform: capitalize;
   padding-right: 5px;
@@ -55,11 +76,10 @@
   padding: 3px 5px 0 0;
 }
 
-.pageJump a, .mobileSearchButton {
+.pageJump a, .pageJump span {
   padding-right: 5px;
   color: var(--homepage-box-link-text-color);
   text-decoration: var(--homepage-box-link-text-decoration);
-  text-transform: capitalize;
 }
 
 @media (max-width: 640px) {

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>
   );