From 9ec60882bae91228d22be9a1f2876e976bf7d3c9 Mon Sep 17 00:00:00 2001
From: rockbenben <qingwhat@gmail.com>
Date: Thu, 5 Sep 2024 15:53:23 +0800
Subject: [PATCH] i18n: sync page

---
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 .../docusaurus-plugin-content-pages/index.tsx | 26 +++++++++++++++----
 12 files changed, 252 insertions(+), 60 deletions(-)

diff --git a/i18n/ar/docusaurus-plugin-content-pages/index.tsx b/i18n/ar/docusaurus-plugin-content-pages/index.tsx
index 791a68bc3..46ec6b5b2 100644
--- a/i18n/ar/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/ar/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/bn/docusaurus-plugin-content-pages/index.tsx b/i18n/bn/docusaurus-plugin-content-pages/index.tsx
index fb0b2f09e..a417e2dbd 100644
--- a/i18n/bn/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/bn/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/de/docusaurus-plugin-content-pages/index.tsx b/i18n/de/docusaurus-plugin-content-pages/index.tsx
index f69ce39c7..eed9ed487 100644
--- a/i18n/de/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/de/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/en/docusaurus-plugin-content-pages/index.tsx b/i18n/en/docusaurus-plugin-content-pages/index.tsx
index 3fd6bc607..d29b094a3 100644
--- a/i18n/en/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/en/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/es/docusaurus-plugin-content-pages/index.tsx b/i18n/es/docusaurus-plugin-content-pages/index.tsx
index ab4b3ce45..74caee063 100644
--- a/i18n/es/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/es/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/fr/docusaurus-plugin-content-pages/index.tsx b/i18n/fr/docusaurus-plugin-content-pages/index.tsx
index 127a99d62..eadae6158 100644
--- a/i18n/fr/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/fr/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/hi/docusaurus-plugin-content-pages/index.tsx b/i18n/hi/docusaurus-plugin-content-pages/index.tsx
index 57c8dcbbb..1881858bf 100644
--- a/i18n/hi/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/hi/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/it/docusaurus-plugin-content-pages/index.tsx b/i18n/it/docusaurus-plugin-content-pages/index.tsx
index e82df77b4..31fa9fd13 100644
--- a/i18n/it/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/it/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/ja/docusaurus-plugin-content-pages/index.tsx b/i18n/ja/docusaurus-plugin-content-pages/index.tsx
index d292ae284..749a1873b 100644
--- a/i18n/ja/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/ja/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/ko/docusaurus-plugin-content-pages/index.tsx b/i18n/ko/docusaurus-plugin-content-pages/index.tsx
index d2e885818..3988241a2 100644
--- a/i18n/ko/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/ko/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/pt/docusaurus-plugin-content-pages/index.tsx b/i18n/pt/docusaurus-plugin-content-pages/index.tsx
index 8cf07342c..498aa6ed6 100644
--- a/i18n/pt/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/pt/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {
diff --git a/i18n/ru/docusaurus-plugin-content-pages/index.tsx b/i18n/ru/docusaurus-plugin-content-pages/index.tsx
index 684ca142d..cc1b424ce 100644
--- a/i18n/ru/docusaurus-plugin-content-pages/index.tsx
+++ b/i18n/ru/docusaurus-plugin-content-pages/index.tsx
@@ -189,7 +189,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
       <ul className={clsx("clean-list", styles.checkboxList)}>
         {userAuth && (
           <>
-            <li className={styles.checkboxListItem} onClick={handleUserPrompts}>
+            <li className={`${styles.checkboxListItem} ${showUserPrompts ? styles.activeItem : ""}`} onClick={handleUserPrompts}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myprompt.tooltip",
@@ -206,7 +206,7 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
                 />
               </ShowcaseTooltip>
             </li>
-            <li className={styles.checkboxListItem} onClick={handleUserFavs}>
+            <li className={`${styles.checkboxListItem} ${showUserFavs ? styles.activeItem : ""}`} onClick={handleUserFavs}>
               <ShowcaseTooltip
                 text={translate({
                   id: "myfavorite.tooltip",
@@ -296,13 +296,27 @@ function ShowcaseFilters({ onToggleDescription, showUserFavs, setShowUserFavs })
           </ShowcaseTooltip>
         </li>
       </ul>
-      {showUserPrompts && <UserPrompts />}
-      {showUserFavs && <UserFavorite />}
+      {showUserPrompts && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserPrompts />
+        </>
+      )}
+      {showUserFavs && (
+        <>
+          <div className={clsx("margin-bottom--md", styles.showcaseFavoriteHeader)}>
+            <SearchBar setShowUserPrompts={setShowUserPrompts} setShowUserFavs={setShowUserFavs} />
+          </div>
+          <UserFavorite />
+        </>
+      )}
     </section>
   );
 }
 
-function SearchBar() {
+function SearchBar({ setShowUserPrompts = (value) => {}, setShowUserFavs = (value) => {} }) {
   const history = useHistory();
   const location = useLocation();
   const searchRef = useRef(null);
@@ -323,6 +337,8 @@ function SearchBar() {
       search: newSearch.toString(),
       state: prepareUserState(),
     });
+    setShowUserPrompts(false);
+    setShowUserFavs(false);
   }, [value, location, history]);
 
   useEffect(() => {