feat: Convert Figma React UI to Svelte 5

- Add lucide-svelte for icons
- Create app.css with theme CSS variables (Dark, Light, OLED, Warm)
- Convert all React components to Svelte 5 using runes ($state, $derived, $effect, $props)
- Implement core components: Sidebar, NowPlayingBar, NavigationItem, UserCard,
  AlbumCard, HorizontalScrollRow, HeroSection, TrackRow, Toggle, Dropdown,
  Tooltip, VolumeSlider
- Implement view components: HomeView, SettingsView, AlbumDetailView
- Implement overlay components: QueuePanel, FullScreenNowPlaying, FocusMode, Toast
- Create main +page.svelte with routing, state management and keyboard shortcuts
- All components use Svelte 5 snippets for component children patterns
This commit is contained in:
vicrodh committed 2026-01-09 07:16:46 -06:00
1 parent ef92897d43
commit cdfd3263de
23 files changed
+4512 -141

No files matched your search

+3 -2
View File
@@ -15,16 +15,17 @@
"dependencies": {
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-opener": "^2",
"lucide-svelte": "^0.562.0",
"svelte-i18n": "^4.0.0"
},
"devDependencies": {
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.9.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@tauri-apps/cli": "^2",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "~5.6.2",
"vite": "^6.0.3",
"@tauri-apps/cli": "^2"
"vite": "^6.0.3"
}
}