chore: add translations

src/views/catalog/catalog-filters/catalog-filters.tsx

@@ -23,9 +23,9 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
         </div>
         <div className={styles.filters}>
           {isInCatalogView && (
-            <label className={styles.paddingBottom}>
+            <label className={`${styles.paddingBottom} capitalize`}>
               <input type='checkbox' checked={showTextOnlyThreads} onChange={(e) => setShowTextOnlyThreads(e.target.checked)} />
-              Hide Threads Without Images
+              {t('hide_threads_without_images')}
             </label>
           )}
           {isInAllView && (
@@ -48,6 +48,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
 };
 
 const CatalogFilters = () => {
+  const { t } = useTranslation();
   const [showModal, setShowModal] = useState(false);
 
   const closeModal = () => {
@@ -57,7 +58,7 @@ const CatalogFilters = () => {
   return (
     <>
       <span className='button' onClick={() => setShowModal(true)}>
-        Filters
+        {t('filters')}
       </span>
       {showModal && <FiltersModal closeModal={closeModal} />}
     </>

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

@@ -1,4 +1,3 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Subplebbit, useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
@@ -7,138 +6,7 @@ import useHomeFiltersStore from '../../../stores/use-home-filters-store';
 import { useMultisubMetadata } from '../../../hooks/use-default-subplebbits';
 import styles from '../home.module.css';
 import { nsfwTags } from '../home';
-
-const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
-  const { t } = useTranslation();
-  const [showFilterModal, setShowFilterModal] = useState(false);
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const {
-    showNsfwBoardsOnly,
-    setShowNsfwBoardsOnly,
-    showWorksafeBoardsOnly,
-    setShowWorksafeBoardsOnly,
-    useCatalog,
-    setUseCatalog,
-    showWorksafeContentOnly,
-    setShowWorksafeContentOnly,
-    showNsfwContentOnly,
-    setShowNsfwContentOnly,
-  } = useHomeFiltersStore();
-
-  const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
-      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-        setShowFilterModal(false);
-      }
-    },
-    [modalRef, setShowFilterModal],
-  );
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [handleClickOutside]);
-
-  return (
-    <>
-      <span ref={modalRef} onClick={() => setShowFilterModal(true)}>
-        {isBoardsBoxModal ? t('filter') : t('options')} ▼
-      </span>
-      {showFilterModal && (
-        <div ref={modalRef} className={styles.filterModal}>
-          {isBoardsBoxModal ? (
-            <>
-              <div
-                className={`${styles.option} ${!showNsfwBoardsOnly && !showWorksafeBoardsOnly && styles.selected}`}
-                onClick={() => {
-                  setShowNsfwBoardsOnly(false);
-                  setShowWorksafeBoardsOnly(false);
-                  setShowFilterModal(false);
-                }}
-              >
-                Show All Boards
-              </div>
-              <div
-                className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
-                onClick={() => {
-                  if (showWorksafeBoardsOnly) {
-                    setShowWorksafeBoardsOnly(false);
-                  }
-                  setShowNsfwBoardsOnly(!showNsfwBoardsOnly);
-                  setShowFilterModal(false);
-                }}
-              >
-                Show NSFW Boards Only
-              </div>
-              <div
-                className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
-                onClick={() => {
-                  if (showNsfwBoardsOnly) {
-                    setShowNsfwBoardsOnly(false);
-                  }
-                  setShowWorksafeBoardsOnly(!showWorksafeBoardsOnly);
-                  setShowFilterModal(false);
-                }}
-              >
-                Show Worksafe Boards Only
-              </div>
-              <div className={styles.separator} />
-              <div
-                className={`${styles.option} ${useCatalog && styles.selected}`}
-                onClick={() => {
-                  setUseCatalog(!useCatalog);
-                  setShowFilterModal(false);
-                }}
-              >
-                Use Catalog
-              </div>
-            </>
-          ) : (
-            <>
-              <div
-                className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
-                onClick={() => {
-                  if (showNsfwContentOnly) {
-                    setShowNsfwContentOnly(false);
-                  }
-                  setShowWorksafeContentOnly(!showWorksafeContentOnly);
-                  setShowFilterModal(false);
-                }}
-              >
-                Show Worksafe Content Only
-              </div>
-              <div
-                className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
-                onClick={() => {
-                  if (showWorksafeContentOnly) {
-                    setShowWorksafeContentOnly(false);
-                  }
-                  setShowNsfwContentOnly(!showNsfwContentOnly);
-                  setShowFilterModal(false);
-                }}
-              >
-                Show NSFW Content Only
-              </div>
-              <div
-                className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
-                onClick={() => {
-                  setShowWorksafeContentOnly(false);
-                  setShowNsfwContentOnly(false);
-                  setShowFilterModal(false);
-                }}
-              >
-                Show All Content
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </>
-  );
-};
+import BoxModal from '../box-modal';
 
 const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subplebbit }) => {
   const { t } = useTranslation();

src/views/home/box-modal/box-modal.tsx

@@ -54,7 +54,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Show All Boards
+                {t('show_all_boards')}
               </div>
               <div
                 className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
@@ -66,7 +66,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Show NSFW Boards Only
+                {t('show_nsfw_boards_only')}
               </div>
               <div
                 className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
@@ -78,7 +78,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Show Worksafe Boards Only
+                {t('show_worksafe_boards_only')}
               </div>
               <div className={styles.separator} />
               <div
@@ -88,7 +88,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Use Catalog
+                {t('use_catalog')}
               </div>
             </>
           ) : (
@@ -103,7 +103,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Show Worksafe Content Only
+                {t('show_worksafe_content_only')}
               </div>
               <div
                 className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
@@ -115,7 +115,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Show NSFW Content Only
+                {t('show_nsfw_content_only')}
               </div>
               <div
                 className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
@@ -125,7 +125,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
                   setShowFilterModal(false);
                 }}
               >
-                Show All Content
+                {t('show_all_content')}
               </div>
             </>
           )}