fix(playlists): Improve playlist UI

- Use large album art instead of thumbnail for collage quality
- Move edit button to navigation row (same level as back button)
- Replace glass effect with solid background in PlaylistModal
This commit is contained in:
vicrodh committed 2026-01-11 21:47:58 -06:00
1 parent b18bd2eac2
commit 436f245931
2 files changed
+46 -19

No files matched your search

+7 -9
View File
@@ -2,7 +2,6 @@
import { invoke } from '@tauri-apps/api/core';
import { X, Trash2, EyeOff, Eye } from 'lucide-svelte';
import { logPlaylistAdd } from '$lib/services/recoService';
import GlassSurface from './glass/GlassSurface.svelte';
interface Playlist {
id: number;
@@ -239,7 +238,7 @@
aria-modal="true"
tabindex="-1"
>
<GlassSurface rootClassName="modal" enableRipple={false} onclick={(e) => e.stopPropagation()}>
<div class="modal" onclick={(e) => e.stopPropagation()}>
<div class="modal-header">
<h2>
{#if mode === 'create'}
@@ -388,7 +387,7 @@
{/if}
</button>
</div>
</GlassSurface>
</div>
</div>
{/if}
@@ -403,18 +402,17 @@
z-index: 1000;
}
:global(.modal) {
.modal {
width: 100%;
max-width: 440px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
--glass-bg: rgba(30, 30, 35, 0.9);
--glass-blur: 24px;
--glass-radius: 16px;
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
background: var(--bg-secondary);
border-radius: 16px;
border: 1px solid var(--bg-tertiary);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.modal-header {
@@ -188,7 +188,7 @@
title: t.title,
artist: t.performer?.name,
album: t.album?.title,
albumArt: t.album?.image?.thumbnail || t.album?.image?.small,
albumArt: t.album?.image?.large || t.album?.image?.thumbnail || t.album?.image?.small,
albumId: t.album?.id,
artistId: t.performer?.id,
duration: formatDuration(t.duration),
@@ -522,11 +522,18 @@
</script>
<div class="playlist-detail">
<!-- Back Navigation -->
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
<span>Back</span>
</button>
<!-- Navigation Row -->
<div class="nav-row">
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
<span>Back</span>
</button>
{#if playlist}
<button class="edit-btn" onclick={() => editModalOpen = true} title="Edit playlist">
<Edit3 size={16} />
</button>
{/if}
</div>
{#if loading}
<div class="loading">
@@ -606,9 +613,6 @@
<Shuffle size={18} />
<span>Shuffle</span>
</button>
<button class="secondary-btn" onclick={() => editModalOpen = true} title="Edit playlist">
<Edit3 size={18} />
</button>
<AlbumMenu
onPlayNext={handlePlayAllNext}
onPlayLater={handlePlayAllLater}
@@ -774,6 +778,13 @@
height: 100%;
}
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.back-btn {
display: flex;
align-items: center;
@@ -784,7 +795,6 @@
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
margin-bottom: 24px;
transition: color 150ms ease;
}
@@ -792,6 +802,25 @@
color: var(--text-primary);
}
.edit-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 6px;
transition: all 150ms ease;
}
.edit-btn:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.loading,
.error {
display: flex;