feat(about): replace user avatar with app logo and add About modal

- Replace avatar with app logo (72x72 icon)
- Add hover glow effect on logo without layout shift
- Click logo opens About modal with:
  - App description and links (GitHub, website)
  - Version, license, build info
  - Library/API attributions (Qobuz, Tauri, Svelte, etc.)
  - Author credit and signature message
This commit is contained in:
vicrodh committed 2026-01-11 02:37:56 -06:00
1 parent 29ded155d1
commit 5926bd6fd5
4 files changed
+387 -25

No files matched your search

+9
View File
@@ -184,6 +184,7 @@
// Components
import Sidebar from '$lib/components/Sidebar.svelte';
import AboutModal from '$lib/components/AboutModal.svelte';
import NowPlayingBar from '$lib/components/NowPlayingBar.svelte';
import Toast from '$lib/components/Toast.svelte';
@@ -227,6 +228,7 @@
let isPlaylistModalOpen = $state(false);
let playlistModalMode = $state<'create' | 'edit' | 'addTrack'>('create');
let playlistModalTrackIds = $state<number[]>([]);
let isAboutModalOpen = $state(false);
let userPlaylists = $state<{ id: number; name: string; tracks_count: number }[]>([]);
// Sidebar reference for refreshing playlists
@@ -1032,6 +1034,7 @@
onPlaylistSelect={selectPlaylist}
onCreatePlaylist={openCreatePlaylist}
onSettingsClick={() => navigateTo('settings')}
onAboutClick={() => isAboutModalOpen = true}
onLogout={handleLogout}
userName={userInfo?.userName || 'User'}
subscription={userInfo?.subscription || 'Qobuz'}
@@ -1327,6 +1330,12 @@
onSuccess={handlePlaylistCreated}
/>
<!-- About Modal -->
<AboutModal
isOpen={isAboutModalOpen}
onClose={() => isAboutModalOpen = false}
/>
<!-- Cast Picker -->
<CastPicker
isOpen={isCastPickerOpen}