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(null); const [deleteTarget, setDeleteTarget] = useState(null); const [optimisticOrder, setOptimisticOrder] = useState(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) => ( + 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 ( <>
- {displayed.map((list, idx) => ( - 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 && ( + + )} {actions.isMod && (