From d4cf4ba0d87b1594d581ffcd4b5c87c14d7ab5d7 Mon Sep 17 00:00:00 2001
From: mkfain <mk@marykatefain.com>
Date: Tue, 2 Jun 2026 00:16:14 +0200
Subject: [PATCH] campaigns: collapse curated lists strip after first 5 pills

---
 .../campaign-lists/CampaignListsStrip.tsx     | 74 ++++++++++++++-----
 src/locales/ar.json                           |  2 +
 src/locales/en.json                           |  2 +
 src/locales/es.json                           |  2 +
 src/locales/fa.json                           |  2 +
 src/locales/fr.json                           |  2 +
 src/locales/hi.json                           |  2 +
 src/locales/id.json                           |  2 +
 src/locales/km.json                           |  2 +
 src/locales/ps.json                           |  2 +
 src/locales/pt.json                           |  2 +
 src/locales/ru.json                           |  2 +
 src/locales/sn.json                           |  2 +
 src/locales/sw.json                           |  2 +
 src/locales/tr.json                           |  2 +
 src/locales/zh-Hant.json                      |  2 +
 src/locales/zh.json                           |  2 +
 17 files changed, 89 insertions(+), 17 deletions(-)

diff --git a/src/components/campaign-lists/CampaignListsStrip.tsx b/src/components/campaign-lists/CampaignListsStrip.tsx
index e91a6e02..3d5d2979 100644
--- a/src/components/campaign-lists/CampaignListsStrip.tsx
+++ b/src/components/campaign-lists/CampaignListsStrip.tsx
@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   ArrowUpToLine,
+  ChevronDown,
+  ChevronUp,
   MoreVertical,
   Pencil,
   Plus,
@@ -39,6 +41,9 @@ import { cn } from '@/lib/utils';
 
 const DRAG_MIME = 'text/x-agora-campaign-list-coord';
 
+/** How many pills to show before collapsing the rest behind a "Show more". */
+const COLLAPSED_COUNT = 5;
+
 /**
  * Horizontal scrollable strip of moderator-curated campaign list pills.
  *
@@ -69,6 +74,7 @@ export function CampaignListsStrip() {
   const [editTarget, setEditTarget] = useState<ParsedCampaignList | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<ParsedCampaignList | null>(null);
   const [optimisticOrder, setOptimisticOrder] = useState<readonly string[] | null>(null);
+  const [expanded, setExpanded] = useState(false);
 
   const lists = useMemo(() => data?.lists ?? [], [data]);
   const authoritativeCoords = useMemo(() => lists.map((l) => l.aTag), [lists]);
@@ -180,6 +186,28 @@ export function CampaignListsStrip() {
     return null;
   }
 
+  const visible = displayed.slice(0, COLLAPSED_COUNT);
+  const overflow = displayed.slice(COLLAPSED_COUNT);
+  const canExpand = overflow.length > 0;
+
+  const renderPill = (list: ParsedCampaignList, idx: number) => (
+    <ListPill
+      key={list.aTag}
+      list={list}
+      index={idx}
+      isMod={actions.isMod}
+      isMobile={isMobile}
+      onDropAt={(coord) => moveTo(coord, idx)}
+      onEdit={() => setEditTarget(list)}
+      onDelete={() => setDeleteTarget(list)}
+      onMoveUp={() => moveTo(list.aTag, Math.max(0, idx - 1))}
+      onMoveDown={() => moveTo(list.aTag, idx + 1)}
+      onMoveToStart={() => moveTo(list.aTag, 0)}
+      canMoveUp={idx > 0}
+      canMoveDown={idx < displayed.length - 1}
+    />
+  );
+
   return (
     <>
       <section
@@ -187,23 +215,35 @@ export function CampaignListsStrip() {
         aria-label={t('campaigns.lists.stripAria')}
       >
         <div className="flex flex-wrap gap-2">
-          {displayed.map((list, idx) => (
-            <ListPill
-              key={list.aTag}
-              list={list}
-              index={idx}
-              isMod={actions.isMod}
-              isMobile={isMobile}
-              onDropAt={(coord) => moveTo(coord, idx)}
-              onEdit={() => setEditTarget(list)}
-              onDelete={() => setDeleteTarget(list)}
-              onMoveUp={() => moveTo(list.aTag, Math.max(0, idx - 1))}
-              onMoveDown={() => moveTo(list.aTag, idx + 1)}
-              onMoveToStart={() => moveTo(list.aTag, 0)}
-              canMoveUp={idx > 0}
-              canMoveDown={idx < displayed.length - 1}
-            />
-          ))}
+          {visible.map((list, i) => renderPill(list, i))}
+          {expanded &&
+            overflow.map((list, i) => renderPill(list, i + COLLAPSED_COUNT))}
+          {canExpand && (
+            <button
+              type="button"
+              onClick={() => setExpanded((v) => !v)}
+              aria-expanded={expanded}
+              className={cn(
+                'inline-flex items-center gap-1.5 rounded-full border px-3.5 py-2 text-sm whitespace-nowrap shrink-0',
+                'border-border bg-background hover:border-primary/40 hover:bg-primary/5 text-muted-foreground hover:text-foreground',
+                'motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              )}
+            >
+              {expanded ? (
+                <>
+                  <ChevronUp className="size-4 shrink-0" aria-hidden />
+                  <span>{t('campaigns.lists.showLess')}</span>
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="size-4 shrink-0" aria-hidden />
+                  <span>
+                    {t('campaigns.lists.showMore', { count: overflow.length })}
+                  </span>
+                </>
+              )}
+            </button>
+          )}
           {actions.isMod && (
             <button
               type="button"
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 872dd694..8b2537b6 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -803,6 +803,8 @@
     "lists": {
       "stripAria": "قوائم مواضيع منتقاة للحملات",
       "create": "قائمة جديدة",
+      "showMore": "إظهار {{count}} أخرى",
+      "showLess": "إظهار أقل",
       "createDesc": "أنشئ قائمة مواضيع جديدة. ثم انتقِ إليها حملات من أي صفحة حملة.",
       "createSubmit": "إنشاء القائمة",
       "createFailed": "فشل إنشاء القائمة",
diff --git a/src/locales/en.json b/src/locales/en.json
index 251b1bc9..9bdf4f7c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1247,6 +1247,8 @@
     "lists": {
       "stripAria": "Curated campaign topic lists",
       "create": "New list",
+      "showMore": "Show {{count}} more",
+      "showLess": "Show less",
       "createDesc": "Create a new topic list. Curate campaigns into it from any campaign page.",
       "createSubmit": "Create list",
       "createFailed": "Failed to create list",
diff --git a/src/locales/es.json b/src/locales/es.json
index a0f5a215..c501dd02 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -817,6 +817,8 @@
     "lists": {
       "stripAria": "Listas temáticas de campañas curadas",
       "create": "Nueva lista",
+      "showMore": "Mostrar {{count}} más",
+      "showLess": "Mostrar menos",
       "createDesc": "Crea una nueva lista temática. Cura campañas en ella desde cualquier página de campaña.",
       "createSubmit": "Crear lista",
       "createFailed": "No se pudo crear la lista",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 670defc6..0cc39776 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -817,6 +817,8 @@
     "lists": {
       "stripAria": "فهرست‌های منتخب موضوعی کمپین‌ها",
       "create": "فهرست جدید",
+      "showMore": "نمایش {{count}} مورد بیشتر",
+      "showLess": "نمایش کمتر",
       "createDesc": "یک فهرست موضوعی جدید بسازید. از هر صفحهٔ کمپین، کمپین‌ها را به آن اضافه کنید.",
       "createSubmit": "ساخت فهرست",
       "createFailed": "ساخت فهرست ناموفق بود",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 2cd45732..ae8f82ed 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1248,6 +1248,8 @@
     "lists": {
       "stripAria": "Listes thématiques de campagnes",
       "create": "Nouvelle liste",
+      "showMore": "Afficher {{count}} de plus",
+      "showLess": "Afficher moins",
       "createDesc": "Créez une nouvelle liste thématique. Ajoutez-y des campagnes depuis n'importe quelle page de campagne.",
       "createSubmit": "Créer la liste",
       "createFailed": "Échec de la création de la liste",
diff --git a/src/locales/hi.json b/src/locales/hi.json
index 5bcff9ea..ba633020 100644
--- a/src/locales/hi.json
+++ b/src/locales/hi.json
@@ -1221,6 +1221,8 @@
     "lists": {
       "stripAria": "क्यूरेटेड कैंपेन टॉपिक सूचियाँ",
       "create": "नई सूची",
+      "showMore": "{{count}} और दिखाएँ",
+      "showLess": "कम दिखाएँ",
       "createDesc": "एक नई टॉपिक सूची बनाएँ। किसी भी कैंपेन पेज से कैंपेन उसमें जोड़कर क्यूरेट करें।",
       "createSubmit": "सूची बनाएँ",
       "createFailed": "सूची नहीं बनाई जा सकी",
diff --git a/src/locales/id.json b/src/locales/id.json
index f61b920a..92bb603e 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -1221,6 +1221,8 @@
     "lists": {
       "stripAria": "Daftar topik kampanye terkurasi",
       "create": "Daftar baru",
+      "showMore": "Tampilkan {{count}} lagi",
+      "showLess": "Tampilkan lebih sedikit",
       "createDesc": "Buat daftar topik baru. Kurasi kampanye ke dalamnya dari halaman kampanye mana pun.",
       "createSubmit": "Buat daftar",
       "createFailed": "Gagal membuat daftar",
diff --git a/src/locales/km.json b/src/locales/km.json
index cd5b79fc..c7fcc03c 100644
--- a/src/locales/km.json
+++ b/src/locales/km.json
@@ -817,6 +817,8 @@
     "lists": {
       "stripAria": "បញ្ជីប្រធានបទយុទ្ធនាការដែលបានសម្រិតសម្រាំង",
       "create": "បញ្ជីថ្មី",
+      "showMore": "បង្ហាញ {{count}} ទៀត",
+      "showLess": "បង្ហាញតិច",
       "createDesc": "បង្កើតបញ្ជីប្រធានបទថ្មី។ សម្រិតសម្រាំងយុទ្ធនាការទៅក្នុងវាពីទំព័រយុទ្ធនាការណាមួយ។",
       "createSubmit": "បង្កើតបញ្ជី",
       "createFailed": "បរាជ័យក្នុងការបង្កើតបញ្ជី",
diff --git a/src/locales/ps.json b/src/locales/ps.json
index 3bf1bcb0..48a8108c 100644
--- a/src/locales/ps.json
+++ b/src/locales/ps.json
@@ -819,6 +819,8 @@
     "lists": {
       "stripAria": "د کمپاین موضوعاتو ترتیب شوي لیستونه",
       "create": "نوی لیست",
+      "showMore": "{{count}} نور وښایه",
+      "showLess": "لږ وښایه",
       "createDesc": "د موضوع یو نوی لیست جوړ کړئ. د هر کمپاین له پاڼې څخه کمپاینونه پکې ترتیب کړئ.",
       "createSubmit": "لیست جوړ کړئ",
       "createFailed": "د لیست جوړول ناکام شول",
diff --git a/src/locales/pt.json b/src/locales/pt.json
index aa3c023b..9a25679a 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -1251,6 +1251,8 @@
     "lists": {
       "stripAria": "Listas de tópicos de campanhas curadas",
       "create": "Nova lista",
+      "showMore": "Mostrar mais {{count}}",
+      "showLess": "Mostrar menos",
       "createDesc": "Crie uma nova lista de tópicos. Curadoria de campanhas para ela a partir de qualquer página de campanha.",
       "createSubmit": "Criar lista",
       "createFailed": "Falha ao criar lista",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 8f275aec..c6323813 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -1251,6 +1251,8 @@
     "lists": {
       "stripAria": "Кураторские тематические списки кампаний",
       "create": "Новый список",
+      "showMore": "Показать ещё {{count}}",
+      "showLess": "Скрыть",
       "createDesc": "Создайте новый тематический список. Добавляйте в него кампании с любой страницы кампании.",
       "createSubmit": "Создать список",
       "createFailed": "Не удалось создать список",
diff --git a/src/locales/sn.json b/src/locales/sn.json
index 9552b225..d01e3c6e 100644
--- a/src/locales/sn.json
+++ b/src/locales/sn.json
@@ -819,6 +819,8 @@
     "lists": {
       "stripAria": "Manjuriro emisoro yemishandirapamwe yakasarudzwa",
       "create": "Rondedzero itsva",
+      "showMore": "Ratidza {{count}} dzimwe",
+      "showLess": "Ratidza zvishoma",
       "createDesc": "Gadzira rondedzero itsva yemisoro. Sarudza mishandirapamwe muiri kubva papeji ipi neipi yemushandirapamwe.",
       "createSubmit": "Gadzira rondedzero",
       "createFailed": "Kugadzira rondedzero hakuna kubudirira",
diff --git a/src/locales/sw.json b/src/locales/sw.json
index a2e4400b..10b14338 100644
--- a/src/locales/sw.json
+++ b/src/locales/sw.json
@@ -1220,6 +1220,8 @@
     "lists": {
       "stripAria": "Orodha za mada za kampeni zilizoratibiwa",
       "create": "Orodha mpya",
+      "showMore": "Onyesha {{count}} zaidi",
+      "showLess": "Onyesha kidogo",
       "createDesc": "Tengeneza orodha mpya ya mada. Iratibu kampeni ndani yake kutoka ukurasa wowote wa kampeni.",
       "createSubmit": "Tengeneza orodha",
       "createFailed": "Imeshindikana kutengeneza orodha",
diff --git a/src/locales/tr.json b/src/locales/tr.json
index d4408b92..d9f49ed0 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -1222,6 +1222,8 @@
     "lists": {
       "stripAria": "Özenle seçilmiş kampanya konu listeleri",
       "create": "Yeni liste",
+      "showMore": "{{count}} tane daha göster",
+      "showLess": "Daha az göster",
       "createDesc": "Yeni bir konu listesi oluşturun. Herhangi bir kampanya sayfasından kampanyaları listeye ekleyin.",
       "createSubmit": "Liste oluştur",
       "createFailed": "Liste oluşturulamadı",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 3faf138a..33b0f647 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -791,6 +791,8 @@
     "lists": {
       "stripAria": "精選活動主題清單",
       "create": "新清單",
+      "showMore": "再顯示 {{count}} 個",
+      "showLess": "顯示較少",
       "createDesc": "建立一個新的主題清單。可從任何活動頁面將活動加入其中。",
       "createSubmit": "建立清單",
       "createFailed": "無法建立清單",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index d2d9edf7..bdcec398 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -819,6 +819,8 @@
     "lists": {
       "stripAria": "精选活动主题列表",
       "create": "新建列表",
+      "showMore": "再显示 {{count}} 个",
+      "showLess": "显示较少",
       "createDesc": "创建一个新的主题列表。可以从任意活动页面将活动收录其中。",
       "createSubmit": "创建列表",
       "createFailed": "创建列表失败",