Skip to content

feat(site): redesign pack cards with three-zone layout#10

Merged
garysheng merged 1 commit intoPeonPing:mainfrom
taylan:feat/pack-card-v2
Mar 4, 2026
Merged

feat(site): redesign pack cards with three-zone layout#10
garysheng merged 1 commit intoPeonPing:mainfrom
taylan:feat/pack-card-v2

Conversation

@taylan
Copy link
Copy Markdown
Contributor

@taylan taylan commented Mar 4, 2026

Summary

  • Restructure PackCard into three zones: title bar (border-bottom), flexible content area (flex-1), and fixed status bar (border-top) for consistent card heights across all packs
  • Add iconOnly mode to AudioPlayer — renders a compact play/stop circle button with tooltip in the status bar
  • Add dateUpdated field to pack data pipeline (types, generate script, registry entry passthrough)
  • Remove redundant "preview →" link (whole card is already clickable)
  • Fixed-height description slot keeps badges, tags, and author aligned across cards with/without descriptions

This is what it looks like after the changes:

image

Test plan

  • npm run build passes with no type errors
  • Cards are uniform height within each row on /packs
  • Cards without description/tags still look clean (flex absorbs)
  • Status bar aligns across all cards
  • Play button works (plays/stops audio)
  • Sound count tooltip shows "N sounds"
  • Date shows correctly with tooltip ("Updated/Added ...")
  • Tags don't spill to second line
  • Long titles show full text on hover via tooltip

Restructure PackCard into title bar, flexible content zone, and status
bar for consistent card heights. Add iconOnly mode to AudioPlayer,
dateUpdated field to pack data, and remove redundant preview link.
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 4, 2026

@taylan is attempting to deploy a commit to the Gary Sheng's projects Team on Vercel.

A member of the Team first needs to authorize it.

@garysheng garysheng merged commit b2379ee into PeonPing:main Mar 4, 2026
1 of 3 checks passed
@taylan taylan deleted the feat/pack-card-v2 branch March 5, 2026 06:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants