Skip to content

3.0

Choose a tag to compare

@ClaytonWas ClaytonWas released this 04 Dec 13:07
· 11 commits to main since this release
361dac4

Major UX Overhaul

Complete visual redesign with modern glassmorphism aesthetic, restructured UI architecture, and significant improvements to the recommendation engine.

UI/UX

  • Dynamic Island Header — Floating pill-shaped header with settings that expand inline via smooth slide animation
  • Glassmorphism Design — Backdrop blur, semi-transparent surfaces, and layered depth throughout
  • Now Playing Card — Redesigned music display with large album artwork, scrolling track/artist names (marquee effect), and inline metadata (genres, BPM)
  • History Cards — Compact cards with album art thumbnails, source page links, and expandable "More Info" sections containing Spotify embeds
  • Theme System — Light and Dark themes with CSS custom properties for consistent token-based styling
  • Dual-Range Popularity Slider — Set both minimum and maximum popularity bounds instead of just a threshold
  • Hidden Scrollbar — Cleaner look with optional toggle to show scrollbar
  • Custom Checkboxes — Rounded toggle switches with smooth animations

Performance

  • Singleton Summarizer — AI model instantiated once per session and reused across all requests, eliminating repeated initialization overhead
  • Lazy-Loaded Embeds — Spotify iframes only load when "More Info" is expanded
  • GPU-Accelerated Animations — All transitions use transform and opacity for 60fps performance

Recommendation Engine

  • Expanded Genre Mapping — Comprehensive mapping table covering 50+ genre synonyms and mood-to-genre conversions
  • Multi-Strategy Search — Four-tier fallback: genre-filtered → multi-genre text → playlist mining → simple search
  • Artist Diversity — Track selection pools are diversified by artist before random selection
  • Improved Scoring — Tracks scored by genre relevance (85%), popularity (7.5%), and tempo match (7.5% bonus)
  • Range-Based Filtering — Popularity bounds expand iteratively (±10) if no matches found

Technical

  • Process Cards Module — Extracted to processCards.js with minimal status indicators and auto-dismiss on completion
  • Content Extraction Script — Moved Readability injection to dedicated extract-content.js
  • CSS Architecture — Complete rewrite using CSS custom properties (--color-*, --radius-*, --spacing-*)
  • Settings in Header — Removed footer; settings now expand from Dynamic Island

Bug Fixes

  • Fixed scrollbar rendering white in dark mode
  • Fixed settings panel clipping content at bottom of viewport
  • Fixed checkbox visual state not updating on toggle
  • Fixed source link text illegible in light mode
  • Fixed album art hover state showing redundant play button overlay