Reskin UI

[RadValentin]

Implements #8

[Copilot]

Pull request overview

Updates the frontend styling and components to implement Issue #8’s “retro reskin” goal by introducing a tokenized color/theme system, new UI components, and refreshed layout/stats presentation.

Changes:

• Introduces global CSS variables (theme tokens) and applies them across core UI surfaces.
• Refactors track actions to use a dedicated PlayButton component and adds loading-disabled play behavior in recommendations.
• Refreshes Player/Header/Filters layouts and styling to match the new retro theme, including updated stats presentation.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
README.md	Updates project note/attribution text.
frontend/src/index.css	Adds global theme tokens and base element styling (fonts, scrollbars, reusable UI styles).
frontend/src/components/TrackItem.tsx	Uses new PlayButton and updates cover-art fallback text logic.
frontend/src/components/TrackItem.css	Applies theme tokens to track item styling.
frontend/src/components/Player.tsx	Updates state handling, recommendations rendering (disabled while loading), and stats UI.
frontend/src/components/Player.css	Restyles player/recommendations/stats layout to match the new theme.
frontend/src/components/PlayButton.tsx	Adds a reusable play button component.
frontend/src/components/PlayButton.css	Adds retro-styled circular/glow play button styling.
frontend/src/components/Header.tsx	Simplifies search to track-only and updates header layout (logo/search button).
frontend/src/components/Header.css	Applies themed header styling and new layout structure.
frontend/src/components/Filters.tsx	Reorganizes filters into sections and splits features into audio vs mood groups.
frontend/src/components/Filters.css	Updates filters layout/styling to match theme and new structure.
frontend/src/App.tsx	Updates onSearch signature and loading spinner usage.
frontend/src/App.css	Switches layout to flex-based main area with themed background.
frontend/index.html	Adds Google Fonts (Inter, Orbitron).
.vscode/extensions.json	Recommends a CSS variables extension for contributors.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

fallbackText can throw at runtime when track.album?.name is undefined: track.album?.name?.trim() can evaluate to undefined, and then .charAt(0) is called on it. Make the entire chain optional (e.g., trim()?.charAt(0)?.toUpperCase()), or derive the fallback from a guaranteed string before calling string methods.

Suggested change

	const fallbackText = track.album?.name?.trim().charAt(0).toUpperCase() || "♪";
	const fallbackText = track.album?.name?.trim()?.charAt(0)?.toUpperCase() || "♪";

[Copilot]

Header height is tied to --player-height-lg (flex: 0 0 var(--player-height-lg)), but the stylesheet defines a dedicated --header-height-lg token. Using the player height variable here makes the header sizing harder to control independently; switch to --header-height-lg.

Suggested change

	flex: 0 0 var(--player-height-lg);
	flex: 0 0 var(--header-height-lg);

[Copilot]

There is an extra trailing semicolon after the nested input:focus rule (... } ;). In CSS this is invalid and can cause the whole rule to be dropped by the parser. Remove the trailing semicolon after the closing brace.

Suggested change

	};
	}

[Copilot]

box-shadow: 1px 1px 1 var(--bg-secondary-dark); is invalid CSS because the blur radius is missing a unit (1 should be 1px). Fixing it will ensure the badge shadow renders consistently.

Suggested change

	box-shadow: 1px 1px 1 var(--bg-secondary-dark);
	box-shadow: 1px 1px 1px var(--bg-secondary-dark);