Skip to content

Collapse mobile upgrade list to show only 3 items by default #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wolovim merged 2 commits into from
Apr 2, 2026
Merged

Collapse mobile upgrade list to show only 3 items by default #202

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6c880b
Collapse mobile upgrade list to show only 3 items by default
claude Mar 31, 2026
1b989dd
Remove upgrade count from mobile toggle button text
claude Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion src/components/ui/UpgradeCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const UpgradeCarousel = ({ upgrades }: UpgradeCarouselProps) => {
const visibleCount = 3;
const maxIndex = Math.max(0, upgrades.length - visibleCount);
const [currentIndex, setCurrentIndex] = useState(maxIndex);
const [mobileExpanded, setMobileExpanded] = useState(false);

const goToPrevious = () => {
setCurrentIndex((prev) => Math.max(0, prev - 1));
Expand Down Expand Up @@ -272,7 +273,31 @@ const UpgradeCarousel = ({ upgrades }: UpgradeCarouselProps) => {

{/* Mobile Compact List - hidden on desktop, reversed so newest is on top */}
<div className="lg:hidden space-y-3">
{[...upgrades].reverse().map((upgrade) => renderCompactCard(upgrade))}
{(() => {
const reversed = [...upgrades].reverse();
const mobileVisible = mobileExpanded ? reversed : reversed.slice(0, visibleCount);
return (
<>
{mobileVisible.map((upgrade) => renderCompactCard(upgrade))}
{reversed.length > visibleCount && (
<button
onClick={() => setMobileExpanded(!mobileExpanded)}
className="w-full py-2.5 text-sm font-medium text-slate-500 dark:text-slate-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors flex items-center justify-center gap-1.5"
>
{mobileExpanded ? 'Show less' : 'Show all upgrades'}
<svg
className={`w-4 h-4 transition-transform duration-200 ${mobileExpanded ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
)}
</>
);
})()}
</div>
</>
);
Expand Down