From 5926bd6fd5739a71a3a1fa22ba18c29611640255 Mon Sep 17 00:00:00 2001 From: vicrodh <103399283+vicrodh@users.noreply.github.com> Date: Sun, 11 Jan 2026 02:37:56 -0600 Subject: [PATCH] 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 --- src/lib/components/AboutModal.svelte | 332 +++++++++++++++++++++++++++ src/lib/components/Sidebar.svelte | 4 +- src/lib/components/UserCard.svelte | 67 ++++-- src/routes/+page.svelte | 9 + 4 files changed, 387 insertions(+), 25 deletions(-) create mode 100644 src/lib/components/AboutModal.svelte diff --git a/src/lib/components/AboutModal.svelte b/src/lib/components/AboutModal.svelte new file mode 100644 index 000000000..9e3f84c34 --- /dev/null +++ b/src/lib/components/AboutModal.svelte @@ -0,0 +1,332 @@ + + +{#if isOpen} +
+
e.stopPropagation()}> + +
+
+ QBZ +
+

QBZ

+ v{APP_VERSION} +
+
+ +
+ + +
+ +

+ A native Qobuz client for Linux, designed for audiophiles who need + bit-perfect Hi-Fi playback without browser sample rate limitations. +

+ + +
+ + + GitHub + + + + + Website + + +
+ + +
+

Build Info

+
+ Version + {APP_VERSION} + License + MIT + Platform + Linux (Tauri 2.0) + Build + {BUILD_DATE} +
+
+ + +
+

Acknowledgments

+
+
+ Qobuz — Music streaming service and API +
+
+ Tauri — Application framework (MIT/Apache-2.0) +
+
+ Svelte — UI framework (MIT) +
+
+ Rodio + Symphonia — Audio playback engine +
+
+ Lucide — Icon library (ISC) +
+
+ Song.link/Odesli — Music link aggregation API +
+
+
+ + +
+

Author

+

Vic Rodríguez

+
+ + +
+

+ Made with love in México hatred. +

+

+ Hatred towards all those companies that discriminate against the Linux community + and don't provide us with a decent client for their product. + + + +

+
+
+
+
+{/if} + + diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte index 5b68655c5..569786bec 100644 --- a/src/lib/components/Sidebar.svelte +++ b/src/lib/components/Sidebar.svelte @@ -18,6 +18,7 @@ onPlaylistSelect?: (playlistId: number) => void; onCreatePlaylist?: () => void; onSettingsClick?: () => void; + onAboutClick?: () => void; onLogout?: () => void; userName?: string; subscription?: string; @@ -30,6 +31,7 @@ onPlaylistSelect, onCreatePlaylist, onSettingsClick, + onAboutClick, onLogout, userName = 'User', subscription = 'Qobuz' @@ -182,7 +184,7 @@ username={userName} {subscription} onSettingsClick={onSettingsClick ?? (() => handleViewChange('settings'))} - {onLogout} + {onAboutClick} /> diff --git a/src/lib/components/UserCard.svelte b/src/lib/components/UserCard.svelte index 7d10ca3fc..726b9da8b 100644 --- a/src/lib/components/UserCard.svelte +++ b/src/lib/components/UserCard.svelte @@ -4,23 +4,26 @@ interface Props { username: string; subscription: string; - avatarUrl?: string; onSettingsClick: () => void; - onLogout?: () => void; + onAboutClick?: () => void; } - let { username, subscription, avatarUrl, onSettingsClick }: Props = $props(); + let { username, subscription, onSettingsClick, onAboutClick }: Props = $props();
- -
- {#if avatarUrl} - {username} - {:else} - {username.charAt(0).toUpperCase()} - {/if} -
+ +
@@ -56,25 +59,41 @@ background-color: var(--bg-hover); } - .avatar { - width: 28px; - height: 28px; - border-radius: 50%; - background-color: var(--accent-primary); + .logo-btn { + position: relative; + width: 32px; + height: 32px; + padding: 0; + background: none; + border: none; + cursor: pointer; + flex-shrink: 0; display: flex; align-items: center; justify-content: center; - color: white; - font-weight: 600; - font-size: 11px; - flex-shrink: 0; - overflow: hidden; } - .avatar img { - width: 100%; - height: 100%; + .logo-glow { + position: absolute; + inset: -4px; + border-radius: 50%; + background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%); + opacity: 0; + transition: opacity 200ms ease; + pointer-events: none; + } + + .logo-btn:hover .logo-glow { + opacity: 1; + } + + .logo-img { + width: 28px; + height: 28px; + border-radius: 50%; object-fit: cover; + position: relative; + z-index: 1; } .user-info { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 12bcd01f3..f7e774566 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -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([]); + 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} /> + + isAboutModalOpen = false} + /> +