Skip to content

feat: ShareModal Toggle, caption controls, and zero-play fallbacks#52

Merged
Xndr2 merged 3 commits into
Xndr2:mainfrom
Death-Watcher:pr/share-modal-controls
May 22, 2026
Merged

feat: ShareModal Toggle, caption controls, and zero-play fallbacks#52
Xndr2 merged 3 commits into
Xndr2:mainfrom
Death-Watcher:pr/share-modal-controls

Conversation

@Death-Watcher

@Death-Watcher Death-Watcher commented May 19, 2026

Copy link
Copy Markdown
Contributor

Description

Three UX improvements to the share modal:

  • Toggle instead of checkbox — Replaced the raw <input type="checkbox"> for "Follow theme" with Spicetify's <Toggle> component for a native look.
  • Caption controls — Added "Show @username" and "Show period label" toggle switches so users can decide what appears in the share card caption bar. Added a showShareCaption preference (default true) to persist the choice.
  • Zero-play fallbacks — All canvas renderers (top5, time, genre, streak, throwback, wrapped) now handle 0-play stats gracefully: empty strings instead of "0 plays", and entire sections omitted when there's no data. Preview container sizing is also fixed to height: min(58vh, 640px) with min-height: 320px for consistent layout.

Type of Change

  • Enhancement / improvement

How to Test

  • npm install && npm run build
  • Deploy to Spicetify
  • Open Listening Stats → Share modal
  • Verify "Follow theme" is a Toggle, not a checkbox
  • Toggle "Show @username" / "Show period label" on and off — caption should update
  • With a fresh/empty account, verify share cards show no broken "0 plays" text
  • Check modal fits consistently at different viewport sizes

Checklist

  • Tested locally with npm run build (no errors)
  • All 1188 tests pass (npx vitest run)
  • TypeScript strict (npx tsc --noEmit)
  • No sensitive data included

Files Changed

  • src/app/components/ShareModal.tsx — Toggle, caption controls, zero-play canvas fixes, preview sizing
  • src/app/preferences.tsshowShareCaption preference
  • src/test/share-modal.test.tsx — Toggle selector update
  • src/app/styles.css — preview container sizing

Replace raw checkbox with Spicetify Toggle component. Add
showUsername/showPeriodLabel toggle controls. Export ShareVariant
type and add initialVariant prop. Add showShareCaption preference.
Fix zero-play edge cases across all canvas renderers so share cards
render gracefully when there is no data. Fix preview container sizing
for consistent modal layout.
@Death-Watcher Death-Watcher force-pushed the pr/share-modal-controls branch 2 times, most recently from 8b1f51b to 1bd508f Compare May 19, 2026 19:38
@Xndr2 Xndr2 merged commit d1b8431 into Xndr2:main May 22, 2026
2 checks passed
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