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:
1 parent
b18bd2eac2
commit
436f245931
2 files changed
+46
-19
No files matched your search
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user