skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

fix: remove duplicate Browse Marketplace button in Stash sidebar

Browse source 
Merged the two separate marketplace cards (Ready to Sell + Stash→Marketplace)
into a single smart card:
- When items are marked for sale/trade: shows orange "Ready to Sell" CTA
  with item count and a prominent Browse Marketplace button
- When no items for sale: shows a quieter grey card explaining how to
  mark items for sale, with a subdued Browse Marketplace link
One card, one button, no duplication.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-24 00:54:50 +07:00
parent 2cfb1ad566
commit df64a44c4e
1 changed files with 24 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/pages/StashPage.tsx
View file

@ -50,7 +50,6 @@ import {
X,
ImagePlus,
Loader2,
ExternalLink,
Store,
MapPin,
LayoutGrid,
@ -1146,50 +1145,38 @@ export default function StashPage() {
{/* ── Sidebar ── */}
<div className="space-y-4">
{/* For-sale quick action */}
{hasForSale > 0 && (
<Card className="bg-gradient-to-br from-[#ff6600]/15 to-[#ff0040]/10 border-[#ff6600]/40">
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-2">
<Store className="h-4 w-4 text-[#ff6600]" />
<span className="font-black text-sm text-[#ff6600] uppercase tracking-wide">Ready to Sell</span>
</div>
<p className="text-xs text-muted-foreground mb-3">
You have <strong className="text-white">{hasForSale} items</strong> marked for sale or trade. List them on the marketplace in one tap.
</p>
<Link to="/marketplace">
<Button size="sm" className="w-full bg-[#ff6600] hover:bg-[#ff6600]/90 text-black font-bold gap-2">
<ShoppingCart className="h-3.5 w-3.5" />Browse Marketplace
<ChevronRight className="h-3.5 w-3.5 ml-auto" />
</Button>
</Link>
</CardContent>
</Card>
)}
{/* Marketplace card (always) */}
<Card className="bg-gradient-to-br from-black/80 to-black/60 border-white/10">
{/* Marketplace card — shows "Ready to Sell" CTA when items are for sale,
otherwise a quieter info card. Never duplicated. */}
<Card className={cn(
'border',
hasForSale > 0
? 'bg-gradient-to-br from-[#ff6600]/15 to-[#ff0040]/10 border-[#ff6600]/40'
: 'bg-black/40 border-white/10'
)}>
<CardContent className="p-4 space-y-3">
<div className="flex items-center gap-2">
<Store className="h-4 w-4 text-[#ff6600]" />
<span className="font-black text-sm text-white">Stash → Marketplace</span>
<span className={cn('font-black text-sm uppercase tracking-wide', hasForSale > 0 ? 'text-[#ff6600]' : 'text-white')}>
{hasForSale > 0 ? 'Ready to Sell' : 'Marketplace'}
</span>
</div>
<p className="text-xs text-muted-foreground">
Items marked for sale or trade can be listed publicly with one tap.
{hasForSale > 0
? <><strong className="text-white">{hasForSale} item{hasForSale > 1 ? 's' : ''}</strong> marked for sale or trade — list on the marketplace in one tap.</>
: 'Mark items as "Willing to Sell" or "Willing to Trade" to list them publicly.'}
</p>
<div className="space-y-1.5 text-xs">
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-green-500/50 text-green-400 gap-1 h-5"><Zap className="h-2.5 w-2.5" />Sell</Badge>
<span className="text-muted-foreground">→ Fixed price listing</span>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-cyan-500/50 text-cyan-400 gap-1 h-5"><ArrowRightLeft className="h-2.5 w-2.5" />Trade</Badge>
<span className="text-muted-foreground">→ Trade listing</span>
</div>
<div className="flex items-center gap-3 text-xs">
<Badge variant="outline" className="border-green-500/50 text-green-400 gap-1 h-5"><Zap className="h-2.5 w-2.5" />Sell</Badge>
<Badge variant="outline" className="border-cyan-500/50 text-cyan-400 gap-1 h-5"><ArrowRightLeft className="h-2.5 w-2.5" />Trade</Badge>
</div>
<Link to="/marketplace">
<Button variant="outline" size="sm" className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10 gap-2">
<ExternalLink className="h-3.5 w-3.5" />Browse Marketplace
<Button size="sm"
className={cn('w-full gap-2', hasForSale > 0
? 'bg-[#ff6600] hover:bg-[#ff6600]/90 text-black font-bold'
: 'bg-white/5 hover:bg-white/10 text-white border border-white/10')}>
<ShoppingCart className="h-3.5 w-3.5" />
Browse Marketplace
{hasForSale > 0 && <ChevronRight className="h-3.5 w-3.5 ml-auto" />}
</Button>
</Link>
</CardContent>