feat(boards list): show 15 boards at a time + p/all, add load more button

public/translations/ar/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "التعليق طويل جدًا ({{length}}/2000).",
   "field_too_long": "الحقل طويل جدًا.",
   "title": "عنوان",
-  "tags": "علامات"
+  "tags": "علامات",
+  "load_more": "تحميل المزيد"
 }

public/translations/bn/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "মন্তব্য খুব লম্বা ({{length}}/2000)।",
   "field_too_long": "ফিল্ডটি খুব লম্বা।",
   "title": "শিরোনাম",
-  "tags": "ট্যাগ"
+  "tags": "ট্যাগ",
+  "load_more": "আরো লোড করুন"
 }

public/translations/cs/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Komentář je příliš dlouhý ({{length}}/2000).",
   "field_too_long": "Pole je příliš dlouhé.",
   "title": "Název",
-  "tags": "Štítky"
+  "tags": "Štítky",
+  "load_more": "Načíst více"
 }

public/translations/da/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Kommentar for lang ({{length}}/2000).",
   "field_too_long": "Feltene er for lange.",
   "title": "Titel",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Indlæs mere"
 }

public/translations/de/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Kommentar zu lang ({{length}}/2000).",
   "field_too_long": "Das Feld ist zu lang.",
   "title": "Titel",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Mehr laden"
 }

public/translations/el/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Το σχόλιο είναι πολύ μεγάλο ({{length}}/2000).",
   "field_too_long": "Το πεδίο είναι πολύ μεγάλο.",
   "title": "Τίτλος",
-  "tags": "Ετικέτες"
+  "tags": "Ετικέτες",
+  "load_more": "Φορτώστε περισσότερα"
 }

public/translations/en/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Comment too long ({{length}}/2000).",
   "field_too_long": "Field too long.",
   "title": "Title",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Load More"
 }

public/translations/es/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Comentario demasiado largo ({{length}}/2000).",
   "field_too_long": "Campo demasiado largo.",
   "title": "Título",
-  "tags": "Etiquetas"
+  "tags": "Etiquetas",
+  "load_more": "Cargar más"
 }

public/translations/fa/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "کامنت خیلی طولانی است ({{length}}/2000).",
   "field_too_long": "فیلد خیلی طولانی است.",
   "title": "عنوان",
-  "tags": "برچسب‌ها"
+  "tags": "برچسب‌ها",
+  "load_more": "بارگذاری بیشتر"
 }

public/translations/fi/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Kommentti liian pitkä ({{length}}/2000).",
   "field_too_long": "Kenttä liian pitkä.",
   "title": "Otsikko",
-  "tags": "Tunnisteet"
+  "tags": "Tunnisteet",
+  "load_more": "Lataa lisää"
 }

public/translations/fil/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Napakahabang komento ({{length}}/2000).",
   "field_too_long": "Ang field ay masyadong mahaba.",
   "title": "Pamagat",
-  "tags": "Mga tag"
+  "tags": "Mga tag",
+  "load_more": "Mag-load ng higit pa"
 }

public/translations/fr/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Commentaire trop long ({{length}}/2000).",
   "field_too_long": "Champ trop long.",
   "title": "Titre",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Charger plus"
 }

public/translations/he/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "התגובה ארוכה מדי ({{length}}/2000).",
   "field_too_long": "המשדה ארוך מדי.",
   "title": "כותרת",
-  "tags": "תגיות"
+  "tags": "תגיות",
+  "load_more": "טען עוד"
 }

public/translations/hi/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "टिप्पणी बहुत लंबी है ({{length}}/2000)।",
   "field_too_long": "क्षेत्र बहुत लंबा है।",
   "title": "शीर्षक",
-  "tags": "टैग"
+  "tags": "टैग",
+  "load_more": "अधिक लोड करें"
 }

public/translations/hu/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Túl hosszú hozzászólás ({{length}}/2000).",
   "field_too_long": "A mező túl hosszú.",
   "title": "Cím",
-  "tags": "Címkék"
+  "tags": "Címkék",
+  "load_more": "Töltsön be többet"
 }

public/translations/id/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Komentar terlalu panjang ({{length}}/2000).",
   "field_too_long": "Kolom terlalu panjang.",
   "title": "Judul",
-  "tags": "Tag"
+  "tags": "Tag",
+  "load_more": "Muat lebih banyak"
 }

public/translations/it/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Commento troppo lungo ({{length}}/2000).",
   "field_too_long": "Campo troppo lungo.",
   "title": "Titolo",
-  "tags": "Tag"
+  "tags": "Tag",
+  "load_more": "Carica altro"
 }

public/translations/ja/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "コメントが長すぎます ({{length}}/2000)。",
   "field_too_long": "フィールドが長すぎます。",
   "title": "タイトル",
-  "tags": "タグ"
+  "tags": "タグ",
+  "load_more": "もっと読み込む"
 }

public/translations/ko/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "댓글이 너무 깁니다 ({{length}}/2000).",
   "field_too_long": "필드가 너무 깁니다.",
   "title": "제목",
-  "tags": "태그"
+  "tags": "태그",
+  "load_more": "더 보기"
 }

public/translations/mr/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "टिप्पणी खूप लांब आहे ({{length}}/2000).",
   "field_too_long": "फील्ड खूप लांब आहे.",
   "title": "सिरसक",
-  "tags": "टॅग"
+  "tags": "टॅग",
+  "load_more": "अधिक लोड करा"
 }

public/translations/nl/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Commentaar te lang ({{length}}/2000).",
   "field_too_long": "Veld te lang.",
   "title": "Titel",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Laad meer"
 }

public/translations/no/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Kommentar for lang ({{length}}/2000).",
   "field_too_long": "Feltet er for langt.",
   "title": "Tittel",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Last inn mer"
 }

public/translations/pl/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Komentarz za długi ({{length}}/2000).",
   "field_too_long": "Pole jest za długie.",
   "title": "Tytuł",
-  "tags": "Tagi"
+  "tags": "Tagi",
+  "load_more": "Załaduj więcej"
 }

public/translations/pt/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Comentário muito longo ({{length}}/2000).",
   "field_too_long": "Campo muito longo.",
   "title": "Título",
-  "tags": "Tags"
+  "tags": "Tags",
+  "load_more": "Carregar mais"
 }

public/translations/ro/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Comentariu prea lung ({{length}}/2000).",
   "field_too_long": "Câmp prea lung.",
   "title": "Titlu",
-  "tags": "Etichete"
+  "tags": "Etichete",
+  "load_more": "Încarcă mai mult"
 }

public/translations/ru/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Комментарий слишком длинный ({{length}}/2000).",
   "field_too_long": "Поле слишком длинное.",
   "title": "Заголовок",
-  "tags": "Теги"
+  "tags": "Теги",
+  "load_more": "Загрузить больше"
 }

public/translations/sq/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Komentar shumë i gjatë ({{length}}/2000).",
   "field_too_long": "Fusha është shumë e gjatë.",
   "title": "Titulli",
-  "tags": "Etiketa"
+  "tags": "Etiketa",
+  "load_more": "Ngarko më shumë"
 }

public/translations/sv/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Kommentar för lång ({{length}}/2000).",
   "field_too_long": "Fältet är för långt.",
   "title": "Titel",
-  "tags": "Taggar"
+  "tags": "Taggar",
+  "load_more": "Läs mer"
 }

public/translations/te/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "కమెంట్ చాలా పొడుగ్గా ఉంది ({{length}}/2000).",
   "field_too_long": "ఫీల్డ్ చాలా పొడుగ్గా ఉంది.",
   "title": "శీర్షిక",
-  "tags": "ట్యాగ్స్"
+  "tags": "ట్యాగ్స్",
+  "load_more": "మరింత లోడ్ చేయండి"
 }

public/translations/th/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "คอมเมนต์ยาวเกินไป ({{length}}/2000)",
   "field_too_long": "ฟิลด์ยาวเกินไป",
   "title": "ชื่อเรื่อง",
-  "tags": "แท็ก"
+  "tags": "แท็ก",
+  "load_more": "โหลดเพิ่มเติม"
 }

public/translations/tr/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Yorum çok uzun ({{length}}/2000).",
   "field_too_long": "Alan çok uzun.",
   "title": "Başlık",
-  "tags": "Etiketler"
+  "tags": "Etiketler",
+  "load_more": "Daha fazla yükle"
 }

public/translations/uk/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Коментар занадто довгий ({{length}}/2000).",
   "field_too_long": "Поле занадто довге.",
   "title": "Заголовок",
-  "tags": "Теги"
+  "tags": "Теги",
+  "load_more": "Завантажити більше"
 }

public/translations/ur/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "تبصرہ بہت طویل ہے ({{length}}/2000).",
   "field_too_long": "فیلڈ بہت طویل ہے۔",
   "title": "عنوان",
-  "tags": "ٹٰیگ"
+  "tags": "ٹٰیگ",
+  "load_more": "مزید لوڈ کریں"
 }

public/translations/vi/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "Bình luận quá dài ({{length}}/2000).",
   "field_too_long": "Trường quá dài.",
   "title": "Tiêu đề",
-  "tags": "Thẻ"
+  "tags": "Thẻ",
+  "load_more": "Tải thêm"
 }

public/translations/zh/default.json

@@ -266,5 +266,6 @@
   "comment_field_too_long": "评论太长 ({{length}}/2000)。",
   "field_too_long": "字段太长。",
   "title": "标题",
-  "tags": "标签"
+  "tags": "标签",
+  "load_more": "加载更多"
 }

src/components/topbar/topbar.tsx

@@ -77,7 +77,7 @@ const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscripti
           <Link to={`/p/${sub.address}${isInCatalogView ? '/catalog' : ''}`}>
             {sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address : sub.address.slice(0, 10).concat('...')}
           </Link>
-          {index !== subplebbits.length - 1 ? ' /' : null}
+          {index !== subplebbits?.length - 1 ? ' /' : null}
         </span>
       ))}
       ]{' '}
@@ -90,7 +90,7 @@ const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscripti
               <Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>
                 {address.endsWith('.eth') || address.endsWith('.sol') ? address : address.slice(0, 10).concat('...')}
               </Link>
-              {index !== subscriptions.length - 1 ? ' /' : null}
+              {index !== subscriptions?.length - 1 ? ' /' : null}
             </span>
           ))}
           ]{' '}

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

@@ -5,6 +5,7 @@ import { Subplebbit } from '@plebbit/plebbit-react-hooks';
 import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
 import styles from '../home.module.css';
 import { nsfwTags } from '../home';
+import { useState } from 'react';
 
 const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbits: any; useCatalog?: boolean }) => {
   const { t } = useTranslation();
@@ -14,17 +15,20 @@ const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbit
   const subplebbitData = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
   const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbitData);
 
+  const displayAddress = address === 'all' ? 'all' : Plebbit.getShortAddress(address);
+  const showOfflineIcon = address !== 'all' && (isOffline || isOnlineStatusLoading);
+
   return (
     <tr className={styles.subplebbit} key={address}>
       <td className={styles.boardAddress}>
         <p className={styles.boardCell}>
-          <Link to={`/p/${address}`}>{address && Plebbit.getShortAddress(address)}</Link>
+          <Link to={`/p/${address}`}>{displayAddress}</Link>
-          {(isOffline || isOnlineStatusLoading) && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
+          {showOfflineIcon && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
           {nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
         </p>
       </td>
       <td className={styles.boardTitle}>
-        <p className={styles.boardCell}>{title || (address && Plebbit.getShortAddress(address))}</p>
+        <p className={styles.boardCell}>{title || displayAddress}</p>
       </td>
       <td className={styles.boardTags}>
         <p className={styles.boardCell}>{tags.join(', ')}</p>
@@ -35,6 +39,20 @@ const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbit
 
 const BoardsList = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
   const { t } = useTranslation();
+  const [displayCount, setDisplayCount] = useState(15);
+
+  const handleLoadMore = () => {
+    setDisplayCount((prevCount) => prevCount + 15);
+  };
+
+  const visibleBoards = multisub.slice(0, displayCount);
+  const hasMoreBoards = displayCount < multisub.length;
+
+  const defaultBoard = {
+    address: 'all',
+    title: 'Temporary Default Subplebbits',
+    tags: ['multiboard'],
+  };
 
   return (
     <div className={styles.boardsBox}>
@@ -51,11 +69,17 @@ const BoardsList = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subpleb
           </tr>
         </thead>
         <tbody>
-          {multisub.map((sub) => (
+          <Board key='all' subplebbit={defaultBoard} subplebbits={subplebbits} />
+          {visibleBoards.map((sub) => (
             <Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
           ))}
         </tbody>
       </table>
+      {hasMoreBoards && (
+        <div className={styles.loadMoreButton}>
+          [<span onClick={handleLoadMore}>{t('load_more')}</span>]
+        </div>
+      )}
     </div>
   );
 };

src/views/home/home.module.css

@@ -89,6 +89,23 @@
   color: inherit;
 }
 
+.loadMoreButton {
+  text-align: center;
+  margin-bottom: 14px;
+  color: var(--topbar-separator-color);
+}
+
+.loadMoreButton span {
+  color: var(--topbar-desktop-link-text-color);
+  text-transform: capitalize;
+}
+
+.loadMoreButton span:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+  text-decoration: underline;
+}
+
 .boxBar, .infoboxBar {
   padding-left: 0.5em;
   line-height: 2em;