From cf849bab7047cb224b928dcce2217833312c5363 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 3 Feb 2025 13:33:11 +0100 Subject: [PATCH] feat(boards list): show 15 boards at a time + p/all, add load more button --- public/translations/ar/default.json | 3 +- public/translations/bn/default.json | 3 +- public/translations/cs/default.json | 3 +- public/translations/da/default.json | 3 +- public/translations/de/default.json | 3 +- public/translations/el/default.json | 3 +- public/translations/en/default.json | 3 +- public/translations/es/default.json | 3 +- public/translations/fa/default.json | 3 +- public/translations/fi/default.json | 3 +- public/translations/fil/default.json | 3 +- public/translations/fr/default.json | 3 +- public/translations/he/default.json | 3 +- public/translations/hi/default.json | 3 +- public/translations/hu/default.json | 3 +- public/translations/id/default.json | 3 +- public/translations/it/default.json | 3 +- public/translations/ja/default.json | 3 +- public/translations/ko/default.json | 3 +- public/translations/mr/default.json | 3 +- public/translations/nl/default.json | 3 +- public/translations/no/default.json | 3 +- public/translations/pl/default.json | 3 +- public/translations/pt/default.json | 3 +- public/translations/ro/default.json | 3 +- public/translations/ru/default.json | 3 +- public/translations/sq/default.json | 3 +- public/translations/sv/default.json | 3 +- public/translations/te/default.json | 3 +- public/translations/th/default.json | 3 +- public/translations/tr/default.json | 3 +- public/translations/uk/default.json | 3 +- public/translations/ur/default.json | 3 +- public/translations/vi/default.json | 3 +- public/translations/zh/default.json | 3 +- src/components/topbar/topbar.tsx | 4 +-- src/views/home/boards-list/boards-list.tsx | 32 +++++++++++++++++++--- src/views/home/home.module.css | 17 ++++++++++++ 38 files changed, 117 insertions(+), 41 deletions(-) diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index e6c526a9..1dd90e18 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "التعليق طويل جدًا ({{length}}/2000).", "field_too_long": "الحقل طويل جدًا.", "title": "عنوان", - "tags": "علامات" + "tags": "علامات", + "load_more": "تحميل المزيد" } \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index f9a26f61..f89de9c7 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "মন্তব্য খুব লম্বা ({{length}}/2000)।", "field_too_long": "ফিল্ডটি খুব লম্বা।", "title": "শিরোনাম", - "tags": "ট্যাগ" + "tags": "ট্যাগ", + "load_more": "আরো লোড করুন" } \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index c8c5c732..6ae38eb8 100644 --- a/public/translations/cs/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index cbf92c75..3fcc827d 100644 --- a/public/translations/da/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index c0799de7..6f02e02e 100644 --- a/public/translations/de/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index b97af8e6..56975f93 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "Το σχόλιο είναι πολύ μεγάλο ({{length}}/2000).", "field_too_long": "Το πεδίο είναι πολύ μεγάλο.", "title": "Τίτλος", - "tags": "Ετικέτες" + "tags": "Ετικέτες", + "load_more": "Φορτώστε περισσότερα" } \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index 3a68b3ac..90ec0027 100644 --- a/public/translations/en/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index 888c3015..dca54242 100644 --- a/public/translations/es/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index 4a8fa8fb..48033508 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "کامنت خیلی طولانی است ({{length}}/2000).", "field_too_long": "فیلد خیلی طولانی است.", "title": "عنوان", - "tags": "برچسب‌ها" + "tags": "برچسب‌ها", + "load_more": "بارگذاری بیشتر" } \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index e97e2b53..2592c132 100644 --- a/public/translations/fi/default.json +++ b/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ää" } \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index 8862c7d2..df0913f1 100644 --- a/public/translations/fil/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index e8a145d1..30f02e65 100644 --- a/public/translations/fr/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index 254e75c2..d78796d2 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "התגובה ארוכה מדי ({{length}}/2000).", "field_too_long": "המשדה ארוך מדי.", "title": "כותרת", - "tags": "תגיות" + "tags": "תגיות", + "load_more": "טען עוד" } \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index 97e5b4a6..48e5d155 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "टिप्पणी बहुत लंबी है ({{length}}/2000)।", "field_too_long": "क्षेत्र बहुत लंबा है।", "title": "शीर्षक", - "tags": "टैग" + "tags": "टैग", + "load_more": "अधिक लोड करें" } \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index 425ad351..db5f8653 100644 --- a/public/translations/hu/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index ca041eb2..6f845c76 100644 --- a/public/translations/id/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index b4b27797..59020f1f 100644 --- a/public/translations/it/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index dc40856d..4e6e1788 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "コメントが長すぎます ({{length}}/2000)。", "field_too_long": "フィールドが長すぎます。", "title": "タイトル", - "tags": "タグ" + "tags": "タグ", + "load_more": "もっと読み込む" } \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index e14dec84..80a37e71 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "댓글이 너무 깁니다 ({{length}}/2000).", "field_too_long": "필드가 너무 깁니다.", "title": "제목", - "tags": "태그" + "tags": "태그", + "load_more": "더 보기" } \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index c5e0d353..43be6db5 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "टिप्पणी खूप लांब आहे ({{length}}/2000).", "field_too_long": "फील्ड खूप लांब आहे.", "title": "सिरसक", - "tags": "टॅग" + "tags": "टॅग", + "load_more": "अधिक लोड करा" } \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index 7473df50..c508b355 100644 --- a/public/translations/nl/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index 7feb7575..f692f281 100644 --- a/public/translations/no/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index e8ed0bc9..a48b3c17 100644 --- a/public/translations/pl/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index 10674e1e..8afd86c3 100644 --- a/public/translations/pt/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index 8e9d5dab..9d5eb054 100644 --- a/public/translations/ro/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index fb0c2e0f..b4d4ac8c 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "Комментарий слишком длинный ({{length}}/2000).", "field_too_long": "Поле слишком длинное.", "title": "Заголовок", - "tags": "Теги" + "tags": "Теги", + "load_more": "Загрузить больше" } \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index a84e2efd..26af86df 100644 --- a/public/translations/sq/default.json +++ b/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ë" } \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index 134ec9aa..1ca799b9 100644 --- a/public/translations/sv/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index 70ffb733..3a6fdbdf 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "కమెంట్ చాలా పొడుగ్గా ఉంది ({{length}}/2000).", "field_too_long": "ఫీల్డ్ చాలా పొడుగ్గా ఉంది.", "title": "శీర్షిక", - "tags": "ట్యాగ్స్" + "tags": "ట్యాగ్స్", + "load_more": "మరింత లోడ్ చేయండి" } \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index 1b2c748a..1bea76a4 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "คอมเมนต์ยาวเกินไป ({{length}}/2000)", "field_too_long": "ฟิลด์ยาวเกินไป", "title": "ชื่อเรื่อง", - "tags": "แท็ก" + "tags": "แท็ก", + "load_more": "โหลดเพิ่มเติม" } \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index b0a3baa7..dcd9275e 100644 --- a/public/translations/tr/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index d469b385..81fd5365 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "Коментар занадто довгий ({{length}}/2000).", "field_too_long": "Поле занадто довге.", "title": "Заголовок", - "tags": "Теги" + "tags": "Теги", + "load_more": "Завантажити більше" } \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index 45651951..4dca8bbf 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "تبصرہ بہت طویل ہے ({{length}}/2000).", "field_too_long": "فیلڈ بہت طویل ہے۔", "title": "عنوان", - "tags": "ٹٰیگ" + "tags": "ٹٰیگ", + "load_more": "مزید لوڈ کریں" } \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index 2747425f..a73c3dd2 100644 --- a/public/translations/vi/default.json +++ b/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" } \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index 7fc499e2..41222afd 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -266,5 +266,6 @@ "comment_field_too_long": "评论太长 ({{length}}/2000)。", "field_too_long": "字段太长。", "title": "标题", - "tags": "标签" + "tags": "标签", + "load_more": "加载更多" } \ No newline at end of file diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx index b9e343b4..4becc7ea 100644 --- a/src/components/topbar/topbar.tsx +++ b/src/components/topbar/topbar.tsx @@ -77,7 +77,7 @@ const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscripti {sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address : sub.address.slice(0, 10).concat('...')} - {index !== subplebbits.length - 1 ? ' /' : null} + {index !== subplebbits?.length - 1 ? ' /' : null} ))} ]{' '} @@ -90,7 +90,7 @@ const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscripti {address.endsWith('.eth') || address.endsWith('.sol') ? address : address.slice(0, 10).concat('...')} - {index !== subscriptions.length - 1 ? ' /' : null} + {index !== subscriptions?.length - 1 ? ' /' : null} ))} ]{' '} diff --git a/src/views/home/boards-list/boards-list.tsx b/src/views/home/boards-list/boards-list.tsx index 9fe31427..4a959d8a 100644 --- a/src/views/home/boards-list/boards-list.tsx +++ b/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 (

- {address && Plebbit.getShortAddress(address)} - {(isOffline || isOnlineStatusLoading) && } + {displayAddress} + {showOfflineIcon && } {nsfwTag && ({t(nsfwTag)})}

-

{title || (address && Plebbit.getShortAddress(address))}

+

{title || displayAddress}

{tags.join(', ')}

@@ -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 (
@@ -51,11 +69,17 @@ const BoardsList = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subpleb - {multisub.map((sub) => ( + + {visibleBoards.map((sub) => ( ))} + {hasMoreBoards && ( +
+ [{t('load_more')}] +
+ )}
); }; diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index 2a51c416..a6fc650c 100644 --- a/src/views/home/home.module.css +++ b/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;