feat(topbar): add search bar

2026-08-03 07:41:04 +02:00 · 2024-06-03 11:19:48 +02:00
parent 4b2a6025d3
commit e39c171eac
38 changed files with 150 additions and 44 deletions
@@ -141,5 +141,6 @@
  "board_mods": "مشرفو المنتدى",
  "this_post_was_removed": "تمت إزالة هذا المنشور",
  "user_deleted_this_post": "حذف المستخدم هذا المنشور.",
-  "reason": "السبب"
+  "reason": "السبب",
+  "search": "بحث"
 }
@@ -141,5 +141,6 @@
  "board_mods": "বোর্ড মডস",
  "this_post_was_removed": "এই পোস্টটি সরানো হয়েছে",
  "user_deleted_this_post": "ব্যবহারকারী এই পোস্টটি মুছে ফেলেছে।",
-  "reason": "কারণ"
+  "reason": "কারণ",
+  "search": "অনুসন্ধান"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Nástěnka Mods",
  "this_post_was_removed": "tento příspěvek byl odstraněn",
  "user_deleted_this_post": "Uživatel smazal tento příspěvek.",
-  "reason": "důvod"
+  "reason": "důvod",
+  "search": "vyhledat"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Board Mods",
  "this_post_was_removed": "dette indlæg blev fjernet",
  "user_deleted_this_post": "Brugeren slettede dette indlæg.",
-  "reason": "grund"
+  "reason": "grund",
+  "search": "søg"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Board-Moderatoren",
  "this_post_was_removed": "Dieser Beitrag wurde entfernt",
  "user_deleted_this_post": "Benutzer hat diesen Beitrag gelöscht.",
-  "reason": "Grund"
+  "reason": "Grund",
+  "search": "suche"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Mods του φόρουμ",
  "this_post_was_removed": "αυτή η ανάρτηση αφαιρέθηκε",
  "user_deleted_this_post": "Ο χρήστης διέγραψε αυτή την ανάρτηση.",
-  "reason": "λόγος"
+  "reason": "λόγος",
+  "search": "αναζήτηση"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Board Mods",
  "this_post_was_removed": "this post was removed",
  "user_deleted_this_post": "User deleted this post.",
-  "reason": "reason"
+  "reason": "reason",
+  "search": "search"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Mods del foro",
  "this_post_was_removed": "este mensaje fue eliminado",
  "user_deleted_this_post": "El usuario eliminó este mensaje.",
-  "reason": "razón"
+  "reason": "razón",
+  "search": "buscar"
 }
@@ -141,5 +141,6 @@
  "board_mods": "مدیران تالار",
  "this_post_was_removed": "این پست حذف شد",
  "user_deleted_this_post": "کاربر این پست را حذف کرده است.",
-  "reason": "دلیل"
+  "reason": "دلیل",
+  "search": "جستجو"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Hallituksen Mods",
  "this_post_was_removed": "tämä viesti on poistettu",
  "user_deleted_this_post": "Käyttäjä poisti tämän viestin.",
-  "reason": "syy"
+  "reason": "syy",
+  "search": "haku"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Board Mods",
  "this_post_was_removed": "tinanggal ang post na ito",
  "user_deleted_this_post": "Tinanggal ng gumagamit ang post na ito.",
-  "reason": "dahilan"
+  "reason": "dahilan",
+  "search": "maghanap"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Mods de la table",
  "this_post_was_removed": "ce post a été supprimé",
  "user_deleted_this_post": "L'utilisateur a supprimé ce post.",
-  "reason": "raison"
+  "reason": "raison",
+  "search": "chercher"
 }
@@ -141,5 +141,6 @@
  "board_mods": "מנהלי הפורום",
  "this_post_was_removed": "הודעה זו הוסרה",
  "user_deleted_this_post": "המשתמש מחק את הפוסט הזה.",
-  "reason": "סיבה"
+  "reason": "סיבה",
+  "search": "חיפוש"
 }
@@ -141,5 +141,6 @@
  "board_mods": "बोर्ड मॉड्स",
  "this_post_was_removed": "यह पोस्ट हटा दी गई है",
  "user_deleted_this_post": "उपयोगकर्ता ने इस पोस्ट को हटा दिया।",
-  "reason": "कारण"
+  "reason": "कारण",
+  "search": "खोज"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Tábla Mods",
  "this_post_was_removed": "ez a bejegyzés eltávolításra került",
  "user_deleted_this_post": "A felhasználó törölte ezt a bejegyzést.",
-  "reason": "indok"
+  "reason": "indok",
+  "search": "keresés"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Papan Pesan Mods",
  "this_post_was_removed": "posting ini telah dihapus",
  "user_deleted_this_post": "Pengguna menghapus posting ini.",
-  "reason": "alasan"
+  "reason": "alasan",
+  "search": "cari"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Moderatori del Forum",
  "this_post_was_removed": "questo post è stato rimosso",
  "user_deleted_this_post": "L'utente ha eliminato questo post.",
-  "reason": "motivo"
+  "reason": "motivo",
+  "search": "cerca"
 }
@@ -141,5 +141,6 @@
  "board_mods": "ボードの管理者",
  "this_post_was_removed": "この投稿は削除されました",
  "user_deleted_this_post": "ユーザーがこの投稿を削除しました。",
-  "reason": "理由"
+  "reason": "理由",
+  "search": "検索"
 }
@@ -141,5 +141,6 @@
  "board_mods": "게시판 모드",
  "this_post_was_removed": "이 게시물은 삭제되었습니다",
  "user_deleted_this_post": "사용자가이 게시물을 삭제했습니다.",
-  "reason": "이유"
+  "reason": "이유",
+  "search": "검색"
 }
@@ -141,5 +141,6 @@
  "board_mods": "बोर्ड मॉड्स",
  "this_post_was_removed": "हा पोस्ट काढून टाकला गेला आहे",
  "user_deleted_this_post": "वापरकर्ता हे पोस्ट हटवलं आहे.",
-  "reason": "कारण"
+  "reason": "कारण",
+  "search": "शोध"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Board Mods",
  "this_post_was_removed": "deze post is verwijderd",
  "user_deleted_this_post": "Gebruiker heeft deze post verwijderd.",
-  "reason": "reden"
+  "reason": "reden",
+  "search": "zoeken"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Board Mods",
  "this_post_was_removed": "dette innlegget ble fjernet",
  "user_deleted_this_post": "Brukeren slettet dette innlegget.",
-  "reason": "grunn"
+  "reason": "grunn",
+  "search": "søk"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Tablica Mods",
  "this_post_was_removed": "ten post został usunięty",
  "user_deleted_this_post": "Użytkownik usunął ten post.",
-  "reason": "powód"
+  "reason": "powód",
+  "search": "szukaj"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Mods do fórum",
  "this_post_was_removed": "esta postagem foi removida",
  "user_deleted_this_post": "O usuário excluiu esta postagem.",
-  "reason": "razão"
+  "reason": "razão",
+  "search": "pesquisar"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Mods de la bord",
  "this_post_was_removed": "acest mesaj a fost eliminat",
  "user_deleted_this_post": "Utilizatorul a șters acest mesaj.",
-  "reason": "motiv"
+  "reason": "motiv",
+  "search": "căutare"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Модераторы форума",
  "this_post_was_removed": "этот пост был удален",
  "user_deleted_this_post": "Пользователь удалил этот пост.",
-  "reason": "причина"
+  "reason": "причина",
+  "search": "поиск"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Tabela Mods",
  "this_post_was_removed": "kjo postim u hoq",
  "user_deleted_this_post": "Përdoruesi fshiu këtë post.",
-  "reason": "arsye"
+  "reason": "arsye",
+  "search": "kërkim"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Styrelse Mods",
  "this_post_was_removed": "detta inlägg togs bort",
  "user_deleted_this_post": "Användaren tog bort detta inlägg.",
-  "reason": "anledning"
+  "reason": "anledning",
+  "search": "sök"
 }
@@ -141,5 +141,6 @@
  "board_mods": "సందేశ బోర్డుల మాడ్స్",
  "this_post_was_removed": "ఈ పోస్టు తొలగించబడింది",
  "user_deleted_this_post": "వాడు ఈ పోస్టును తొలగించాడు.",
-  "reason": "కారణం"
+  "reason": "కారణం",
+  "search": "శోధన"
 }
@@ -141,5 +141,6 @@
  "board_mods": "บอร์ด Mods",
  "this_post_was_removed": "โพสต์นี้ถูกลบ",
  "user_deleted_this_post": "ผู้ใช้ได้ลบโพสต์นี้",
-  "reason": "เหตุผล"
+  "reason": "เหตุผล",
+  "search": "ค้นหา"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Forum Mods",
  "this_post_was_removed": "bu mesaj kaldırıldı",
  "user_deleted_this_post": "Kullanıcı bu mesajı sildi.",
-  "reason": "neden"
+  "reason": "neden",
+  "search": "arama"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Дошка Моди",
  "this_post_was_removed": "цей пост було видалено",
  "user_deleted_this_post": "Користувач видалив цей пост.",
-  "reason": "причина"
+  "reason": "причина",
+  "search": "пошук"
 }
@@ -141,5 +141,6 @@
  "board_mods": "بورڈ موڈس",
  "this_post_was_removed": "یہ پوسٹ ہٹا دی گئی ہے",
  "user_deleted_this_post": "صارف نے یہ پوسٹ حذف کردی.",
-  "reason": "وجہ"
+  "reason": "وجہ",
+  "search": "تلاش کریں"
 }
@@ -141,5 +141,6 @@
  "board_mods": "Bảng Mods",
  "this_post_was_removed": "bài đăng này đã bị xóa",
  "user_deleted_this_post": "Người dùng đã xóa bài đăng này.",
-  "reason": "lý do"
+  "reason": "lý do",
+  "search": "tìm kiếm"
 }
@@ -141,5 +141,6 @@
  "board_mods": "董事會版主",
  "this_post_was_removed": "此帖已被删除",
  "user_deleted_this_post": "用户删除了这个帖子。",
-  "reason": "原因"
+  "reason": "原因",
+  "search": "搜索"
 }
@@ -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>
@@ -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) {
@@ -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>
  );