fix(ui): improve table layout and user info display

- Remove row highlighting in downloads queue table
- Adjust column widths and row heights for better alignment
- Fix playlist name decoding for empty params
- Replace labels with spans in user info
This commit is contained in:
2025-10-01 10:08:29 -04:00
parent ef4b85433c
commit 6af3603c7d
3 changed files with 16 additions and 12 deletions

View File

@@ -75,7 +75,7 @@
</thead>
<tbody>
{#each queueItems as item (item.id)}
<tr class={item.status === 'downloading' ? 'highlighted' : ''}>
<tr>
<td class="col-title">{item.title}</td>
<td class="col-artist">{item.artist}</td>
<td class="col-progress">
@@ -153,8 +153,12 @@
table-layout: fixed;
}
tbody td {
height: 32px;
}
.col-title {
width: 35%;
width: auto;
}
.col-artist {
@@ -170,7 +174,7 @@
}
.col-actions {
width: 10%;
width: 32px;
text-align: center;
}

View File

@@ -3,14 +3,14 @@
import { page } from '$app/stores';
import { settings, loadSettings } from '$lib/stores/settings';
import { scanPlaylists } from '$lib/library/scanner';
import { loadPlaylistTracks, type PlaylistWithTracks } from '$lib/library/playlist';
import type { Track } from '$lib/types/track';
import { loadPlaylistTracks } from '$lib/library/playlist';
import type { Track, PlaylistWithTracks } from '$lib/types/track';
let playlistData = $state<PlaylistWithTracks | null>(null);
let loading = $state(true);
let error = $state<string | null>(null);
let playlistName = $derived(decodeURIComponent($page.params.name));
let playlistName = $derived(decodeURIComponent($page.params.name ?? ''));
onMount(async () => {
await loadSettings();

View File

@@ -244,23 +244,23 @@
<div class="window-body">
<div class="user-info">
<div class="field-row">
<label>Name:</label>
<span>Name:</span>
<span>{$deezerAuth.user?.name || 'Unknown'}</span>
</div>
<div class="field-row">
<label>User ID:</label>
<span>User ID:</span>
<span>{$deezerAuth.user?.id || 'N/A'}</span>
</div>
<div class="field-row">
<label>Country:</label>
<span>Country:</span>
<span>{$deezerAuth.user?.country || 'N/A'}</span>
</div>
<div class="field-row">
<label>HQ Streaming:</label>
<span>HQ Streaming:</span>
<span>{$deezerAuth.user?.can_stream_hq ? '✓ Yes' : '✗ No'}</span>
</div>
<div class="field-row">
<label>Lossless Streaming:</label>
<span>Lossless Streaming:</span>
<span>{$deezerAuth.user?.can_stream_lossless ? '✓ Yes' : '✗ No'}</span>
</div>
</div>
@@ -370,7 +370,7 @@
margin-bottom: 8px;
}
.field-row label {
.field-row span:first-child {
font-weight: bold;
min-width: 140px;
}