From dfdb236b2e1ddc1257e446424906bc263ac98025 Mon Sep 17 00:00:00 2001
From: Markury <mr.catborg@gmail.com>
Date: Wed, 1 Oct 2025 15:30:10 -0400
Subject: [PATCH] feat(layout): playlist cover art, album UI

---
 src/lib/library/album.ts                      | 136 +++++++++
 src/lib/library/playlist.ts                   |  36 ++-
 .../albums/[artist]/[album]/+page.svelte      | 263 ++++++++++++++++++
 src/routes/library/+page.svelte               |   8 +-
 src/routes/playlists/[name]/+page.svelte      | 235 ++++++++++++----
 5 files changed, 614 insertions(+), 64 deletions(-)
 create mode 100644 src/lib/library/album.ts
 create mode 100644 src/routes/albums/[artist]/[album]/+page.svelte

diff --git a/src/lib/library/album.ts b/src/lib/library/album.ts
new file mode 100644
index 0000000..9472b5d
--- /dev/null
+++ b/src/lib/library/album.ts
@@ -0,0 +1,136 @@
+import { readDir, readFile } from '@tauri-apps/plugin-fs';
+import { parseBuffer } from 'music-metadata';
+import type { Track, AudioFormat, TrackMetadata } from '$lib/types/track';
+
+/**
+ * Get audio format from file extension
+ */
+function getAudioFormat(filename: string): AudioFormat {
+  const ext = filename.toLowerCase().split('.').pop();
+  switch (ext) {
+    case 'flac':
+      return 'flac';
+    case 'mp3':
+      return 'mp3';
+    case 'opus':
+      return 'opus';
+    case 'ogg':
+      return 'ogg';
+    case 'm4a':
+      return 'm4a';
+    case 'wav':
+      return 'wav';
+    default:
+      return 'unknown';
+  }
+}
+
+/**
+ * Read metadata from audio file
+ */
+async function readAudioMetadata(filePath: string, format: AudioFormat): Promise<TrackMetadata> {
+  try {
+    const fileData = await readFile(filePath);
+
+    const mimeMap: Record<AudioFormat, string> = {
+      'flac': 'audio/flac',
+      'mp3': 'audio/mpeg',
+      'opus': 'audio/opus',
+      'ogg': 'audio/ogg',
+      'm4a': 'audio/mp4',
+      'wav': 'audio/wav',
+      'unknown': 'audio/mpeg'
+    };
+
+    const metadata = await parseBuffer(fileData, mimeMap[format], { duration: true });
+
+    return {
+      title: metadata.common.title,
+      artist: metadata.common.artist,
+      album: metadata.common.album,
+      albumArtist: metadata.common.albumartist,
+      year: metadata.common.year,
+      trackNumber: metadata.common.track?.no ?? undefined,
+      genre: metadata.common.genre?.[0],
+      duration: metadata.format.duration,
+      bitrate: metadata.format.bitrate ? Math.round(metadata.format.bitrate / 1000) : undefined,
+      sampleRate: metadata.format.sampleRate
+    };
+  } catch (error) {
+    console.error('Error reading audio metadata:', error);
+    return {};
+  }
+}
+
+/**
+ * Find cover art image in album directory
+ */
+export async function findAlbumArt(albumPath: string): Promise<string | undefined> {
+  try {
+    const entries = await readDir(albumPath);
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.JPG', '.JPEG', '.PNG'];
+
+    for (const entry of entries) {
+      if (!entry.isDirectory) {
+        const hasImageExt = imageExtensions.some(ext => entry.name.endsWith(ext));
+        if (hasImageExt) {
+          return `${albumPath}/${entry.name}`;
+        }
+      }
+    }
+    return undefined;
+  } catch (error) {
+    console.error('Error finding album art:', error);
+    return undefined;
+  }
+}
+
+/**
+ * Load album tracks with metadata
+ */
+export async function loadAlbumTracks(albumPath: string): Promise<Track[]> {
+  try {
+    const entries = await readDir(albumPath);
+    const audioExtensions = ['.flac', '.mp3', '.opus', '.ogg', '.m4a', '.wav', '.FLAC', '.MP3'];
+
+    // Filter audio files
+    const audioFiles = entries.filter(
+      entry => !entry.isDirectory && audioExtensions.some(ext => entry.name.endsWith(ext))
+    );
+
+    // Load tracks with metadata in parallel
+    const tracks = await Promise.all(
+      audioFiles.map(async (entry) => {
+        const filePath = `${albumPath}/${entry.name}`;
+        const format = getAudioFormat(entry.name);
+        const metadata = await readAudioMetadata(filePath, format);
+
+        // Fallback to filename if no title metadata
+        if (!metadata.title) {
+          const nameWithoutExt = entry.name.replace(/\.(flac|mp3|opus|ogg|m4a|wav)$/i, '');
+          metadata.title = nameWithoutExt;
+        }
+
+        return {
+          path: filePath,
+          filename: entry.name,
+          format,
+          metadata
+        };
+      })
+    );
+
+    // Sort by track number if available, otherwise by filename
+    tracks.sort((a, b) => {
+      if (a.metadata.trackNumber && b.metadata.trackNumber) {
+        return a.metadata.trackNumber - b.metadata.trackNumber;
+      }
+      return a.filename.localeCompare(b.filename);
+    });
+
+    return tracks;
+  } catch (error) {
+    console.error('Error loading album tracks:', error);
+    return [];
+  }
+}
diff --git a/src/lib/library/playlist.ts b/src/lib/library/playlist.ts
index c7c109e..d2292e8 100644
--- a/src/lib/library/playlist.ts
+++ b/src/lib/library/playlist.ts
@@ -1,4 +1,4 @@
-import { readTextFile, readFile, exists } from '@tauri-apps/plugin-fs';
+import { readTextFile, readFile, exists, readDir } from '@tauri-apps/plugin-fs';
 import { parseBuffer } from 'music-metadata';
 import type { Track, AudioFormat, PlaylistWithTracks, TrackMetadata } from '$lib/types/track';
 
@@ -148,6 +148,40 @@ async function readAudioMetadata(filePath: string, format: AudioFormat): Promise
   }
 }
 
+/**
+ * Find cover art for playlist by looking for image file with same name
+ * E.g., "My Playlist.m3u" -> look for "My Playlist.jpg/png/etc."
+ */
+export async function findPlaylistArt(playlistPath: string): Promise<string | undefined> {
+  try {
+    const pathParts = playlistPath.split('/');
+    const playlistFilename = pathParts[pathParts.length - 1];
+    const playlistDir = pathParts.slice(0, -1).join('/');
+
+    // Remove playlist extension to get base name
+    const baseName = playlistFilename.replace(/\.(m3u8?|M3U8?)$/, '');
+
+    // Look for image files with same base name
+    const entries = await readDir(playlistDir);
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.JPG', '.JPEG', '.PNG'];
+
+    for (const entry of entries) {
+      if (!entry.isDirectory) {
+        for (const ext of imageExtensions) {
+          if (entry.name === baseName + ext) {
+            return `${playlistDir}/${entry.name}`;
+          }
+        }
+      }
+    }
+
+    return undefined;
+  } catch (error) {
+    console.error('Error finding playlist art:', error);
+    return undefined;
+  }
+}
+
 /**
  * Load playlist with track information
  */
diff --git a/src/routes/albums/[artist]/[album]/+page.svelte b/src/routes/albums/[artist]/[album]/+page.svelte
new file mode 100644
index 0000000..89c70f1
--- /dev/null
+++ b/src/routes/albums/[artist]/[album]/+page.svelte
@@ -0,0 +1,263 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { convertFileSrc } from '@tauri-apps/api/core';
+  import { settings, loadSettings } from '$lib/stores/settings';
+  import { loadAlbumTracks, findAlbumArt } from '$lib/library/album';
+  import type { Track } from '$lib/types/track';
+
+  let tracks = $state<Track[]>([]);
+  let coverArtPath = $state<string | undefined>(undefined);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let selectedTrackIndex = $state<number | null>(null);
+
+  let artistName = $derived(decodeURIComponent($page.params.artist ?? ''));
+  let albumName = $derived(decodeURIComponent($page.params.album ?? ''));
+
+  onMount(async () => {
+    await loadSettings();
+    await loadAlbum();
+  });
+
+  async function loadAlbum() {
+    loading = true;
+    error = null;
+
+    if (!$settings.musicFolder) {
+      error = 'Music folder not configured. Please set it in Settings.';
+      loading = false;
+      return;
+    }
+
+    try {
+      const albumPath = `${$settings.musicFolder}/${artistName}/${albumName}`;
+
+      const [tracksData, coverPath] = await Promise.all([
+        loadAlbumTracks(albumPath),
+        findAlbumArt(albumPath)
+      ]);
+
+      tracks = tracksData;
+      coverArtPath = coverPath;
+
+      if (tracks.length === 0) {
+        error = 'No tracks found in this album.';
+      }
+
+      loading = false;
+    } catch (e) {
+      error = 'Error loading album: ' + (e as Error).message;
+      loading = false;
+    }
+  }
+
+  function getThumbnailUrl(coverPath?: string): string {
+    if (!coverPath) {
+      return '';
+    }
+    return convertFileSrc(coverPath);
+  }
+
+  function handleTrackClick(index: number) {
+    selectedTrackIndex = index;
+  }
+
+  function getAlbumYear(): string {
+    const year = tracks.find(t => t.metadata.year)?.metadata.year;
+    return year ? year.toString() : '—';
+  }
+</script>
+
+<div class="album-wrapper">
+  {#if loading}
+    <p style="padding: 8px;">Loading album...</p>
+  {:else if error}
+    <p class="error" style="padding: 8px;">{error}</p>
+  {:else}
+    <!-- Album Header -->
+    <div class="album-header">
+      {#if coverArtPath}
+        <img
+          src={getThumbnailUrl(coverArtPath)}
+          alt="{albumName} cover"
+          class="album-cover"
+        />
+      {:else}
+        <div class="album-cover-placeholder"></div>
+      {/if}
+      <div class="album-info">
+        <h2>{albumName}</h2>
+        <p class="album-artist">{artistName}</p>
+        <p class="album-meta">
+          {getAlbumYear()} • {tracks.length} track{tracks.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+    </div>
+
+    <section class="album-content">
+      <!-- Tabs (single tab for tracks) -->
+      <menu role="tablist">
+        <li role="tab" aria-selected={true}>
+          <button>Tracks</button>
+        </li>
+      </menu>
+
+      <!-- Track Listing -->
+      <div class="window tab-content" role="tabpanel">
+        <div class="window-body">
+          <div class="sunken-panel table-container">
+            <table class="interactive">
+              <thead>
+                <tr>
+                  <th style="width: 50px;">#</th>
+                  <th>Title</th>
+                  <th>Duration</th>
+                  <th>Format</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each tracks as track, i}
+                  <tr
+                    class:highlighted={selectedTrackIndex === i}
+                    onclick={() => handleTrackClick(i)}
+                  >
+                    <td class="track-number">
+                      {track.metadata.trackNumber ?? i + 1}
+                    </td>
+                    <td>{track.metadata.title || track.filename}</td>
+                    <td class="duration">
+                      {#if track.metadata.duration}
+                        {Math.floor(track.metadata.duration / 60)}:{String(Math.floor(track.metadata.duration % 60)).padStart(2, '0')}
+                      {:else}
+                        —
+                      {/if}
+                    </td>
+                    <td class="format">{track.format.toUpperCase()}</td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .album-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .error {
+    color: #ff6b6b;
+  }
+
+  .album-header {
+    display: flex;
+    gap: 16px;
+    padding: 8px 8px 0 8px;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+  }
+
+  .album-cover {
+    width: 160px;
+    height: 160px;
+    object-fit: cover;
+    image-rendering: auto;
+    flex-shrink: 0;
+  }
+
+  .album-cover-placeholder {
+    width: 160px;
+    height: 160px;
+    background: linear-gradient(135deg, #c0c0c0 25%, #808080 25%, #808080 50%, #c0c0c0 50%, #c0c0c0 75%, #808080 75%);
+    background-size: 8px 8px;
+    flex-shrink: 0;
+  }
+
+  .album-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  h2 {
+    margin: 0 0 4px 0;
+    font-size: 1.5em;
+  }
+
+  .album-artist {
+    margin: 0 0 8px 0;
+    font-size: 1.1em;
+    opacity: 0.8;
+  }
+
+  .album-meta {
+    margin: 0;
+    opacity: 0.6;
+    font-size: 0.9em;
+  }
+
+  .album-content {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-content {
+    margin-top: -2px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .window-body {
+    padding: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .table-container {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  th {
+    text-align: left;
+  }
+
+  .track-number {
+    text-align: center;
+    opacity: 0.6;
+  }
+
+  .duration {
+    font-family: monospace;
+    font-size: 0.9em;
+    text-align: center;
+    width: 80px;
+  }
+
+  .format {
+    font-family: monospace;
+    font-size: 0.85em;
+    text-transform: uppercase;
+    text-align: center;
+    width: 80px;
+  }
+</style>
diff --git a/src/routes/library/+page.svelte b/src/routes/library/+page.svelte
index d9ac436..8b7463f 100644
--- a/src/routes/library/+page.svelte
+++ b/src/routes/library/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
   import { convertFileSrc } from '@tauri-apps/api/core';
   import { settings, loadSettings } from '$lib/stores/settings';
   import { scanArtistsWithAlbums, scanAlbums } from '$lib/library/scanner';
@@ -56,8 +57,11 @@
     selectedArtistIndex = index;
   }
 
-  function handleAlbumClick(index: number) {
+  function handleAlbumClick(album: Album, index: number) {
     selectedAlbumIndex = index;
+    const artistEncoded = encodeURIComponent(album.artist);
+    const albumEncoded = encodeURIComponent(album.title);
+    goto(`/albums/${artistEncoded}/${albumEncoded}`);
   }
 
   function getTotalTracks(artist: ArtistWithAlbums): number {
@@ -143,7 +147,7 @@
                   {#each albums as album, i}
                     <tr
                       class:highlighted={selectedAlbumIndex === i}
-                      onclick={() => handleAlbumClick(i)}
+                      onclick={() => handleAlbumClick(album, i)}
                     >
                       <td class="cover-cell">
                         {#if album.coverArtPath}
diff --git a/src/routes/playlists/[name]/+page.svelte b/src/routes/playlists/[name]/+page.svelte
index edd343e..cec2140 100644
--- a/src/routes/playlists/[name]/+page.svelte
+++ b/src/routes/playlists/[name]/+page.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
+  import { convertFileSrc } from '@tauri-apps/api/core';
   import { settings, loadSettings } from '$lib/stores/settings';
   import { scanPlaylists } from '$lib/library/scanner';
-  import { loadPlaylistTracks } from '$lib/library/playlist';
+  import { loadPlaylistTracks, findPlaylistArt } from '$lib/library/playlist';
   import type { Track, PlaylistWithTracks } from '$lib/types/track';
 
   let playlistData = $state<PlaylistWithTracks | null>(null);
+  let coverArtPath = $state<string | undefined>(undefined);
   let loading = $state(true);
   let error = $state<string | null>(null);
+  let selectedTrackIndex = $state<number | null>(null);
 
   let playlistName = $derived(decodeURIComponent($page.params.name ?? ''));
 
@@ -38,12 +41,14 @@
         return;
       }
 
-      // Load tracks from the playlist file
-      playlistData = await loadPlaylistTracks(
-        playlist.path,
-        playlist.name,
-        $settings.musicFolder
-      );
+      // Load tracks and cover art in parallel
+      const [tracksData, coverPath] = await Promise.all([
+        loadPlaylistTracks(playlist.path, playlist.name, $settings.musicFolder),
+        findPlaylistArt(playlist.path)
+      ]);
+
+      playlistData = tracksData;
+      coverArtPath = coverPath;
 
       loading = false;
     } catch (e) {
@@ -51,91 +56,198 @@
       loading = false;
     }
   }
+
+  function getThumbnailUrl(coverPath?: string): string {
+    if (!coverPath) {
+      return '';
+    }
+    return convertFileSrc(coverPath);
+  }
+
+  function handleTrackClick(index: number) {
+    selectedTrackIndex = index;
+  }
 </script>
 
-<div>
-  <h2>{playlistName}</h2>
-
+<div class="playlist-wrapper">
   {#if loading}
-    <p>Loading playlist...</p>
+    <p style="padding: 8px;">Loading playlist...</p>
   {:else if error}
-    <p class="error">{error}</p>
+    <p class="error" style="padding: 8px;">{error}</p>
   {:else if playlistData && playlistData.tracks.length === 0}
-    <p>No tracks in this playlist.</p>
+    <p style="padding: 8px;">No tracks in this playlist.</p>
   {:else if playlistData}
-    <section class="playlist-content">
-      <p class="track-count">{playlistData.tracks.length} track{playlistData.tracks.length !== 1 ? 's' : ''}</p>
+    <!-- Playlist Header -->
+    <div class="playlist-header">
+      {#if coverArtPath}
+        <img
+          src={getThumbnailUrl(coverArtPath)}
+          alt="{playlistName} cover"
+          class="playlist-cover"
+        />
+      {:else}
+        <div class="playlist-cover-placeholder"></div>
+      {/if}
+      <div class="playlist-info">
+        <h2>{playlistName}</h2>
+        <p class="playlist-meta">
+          {playlistData.tracks.length} track{playlistData.tracks.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+    </div>
 
-      <table>
-        <thead>
-          <tr>
-            <th style="width: 40px;">#</th>
-            <th>Title</th>
-            <th>Artist</th>
-            <th>Album</th>
-            <th>Duration</th>
-            <th>Format</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each playlistData.tracks as track, index}
-            <tr>
-              <td class="track-number">{index + 1}</td>
-              <td>{track.metadata.title || track.filename}</td>
-              <td>{track.metadata.artist || '—'}</td>
-              <td class="album">{track.metadata.album || '—'}</td>
-              <td class="duration">
-                {#if track.metadata.duration}
-                  {Math.floor(track.metadata.duration / 60)}:{String(Math.floor(track.metadata.duration % 60)).padStart(2, '0')}
-                {:else}
-                  —
-                {/if}
-              </td>
-              <td class="format">{track.format.toUpperCase()}</td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
+    <section class="playlist-content">
+      <!-- Tabs (single tab for tracks) -->
+      <menu role="tablist">
+        <li role="tab" aria-selected={true}>
+          <button>Tracks</button>
+        </li>
+      </menu>
+
+      <!-- Track Listing -->
+      <div class="window tab-content" role="tabpanel">
+        <div class="window-body">
+          <div class="sunken-panel table-container">
+            <table class="interactive">
+              <thead>
+                <tr>
+                  <th style="width: 50px;">#</th>
+                  <th>Title</th>
+                  <th>Artist</th>
+                  <th>Album</th>
+                  <th>Duration</th>
+                  <th>Format</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each playlistData.tracks as track, index}
+                  <tr
+                    class:highlighted={selectedTrackIndex === index}
+                    onclick={() => handleTrackClick(index)}
+                  >
+                    <td class="track-number">{index + 1}</td>
+                    <td>{track.metadata.title || track.filename}</td>
+                    <td>{track.metadata.artist || '—'}</td>
+                    <td>{track.metadata.album || '—'}</td>
+                    <td class="duration">
+                      {#if track.metadata.duration}
+                        {Math.floor(track.metadata.duration / 60)}:{String(Math.floor(track.metadata.duration % 60)).padStart(2, '0')}
+                      {:else}
+                        —
+                      {/if}
+                    </td>
+                    <td class="format">{track.format.toUpperCase()}</td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </section>
   {/if}
 </div>
 
 <style>
-  h2 {
-    margin-top: 0;
-  }
-
-  .playlist-content {
-    margin-top: 20px;
-  }
-
-  .track-count {
-    margin-bottom: 12px;
-    opacity: 0.7;
-    font-size: 0.9em;
+  .playlist-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 
   .error {
     color: #ff6b6b;
   }
 
+  .playlist-header {
+    display: flex;
+    gap: 16px;
+    padding: 8px 8px 0 8px;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+  }
+
+  .playlist-cover {
+    width: 160px;
+    height: 160px;
+    object-fit: cover;
+    image-rendering: auto;
+    flex-shrink: 0;
+  }
+
+  .playlist-cover-placeholder {
+    width: 160px;
+    height: 160px;
+    background: linear-gradient(135deg, #c0c0c0 25%, #808080 25%, #808080 50%, #c0c0c0 50%, #c0c0c0 75%, #808080 75%);
+    background-size: 8px 8px;
+    flex-shrink: 0;
+  }
+
+  .playlist-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  h2 {
+    margin: 0 0 8px 0;
+    font-size: 1.5em;
+  }
+
+  .playlist-meta {
+    margin: 0;
+    opacity: 0.6;
+    font-size: 0.9em;
+  }
+
+  .playlist-content {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-content {
+    margin-top: -2px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .window-body {
+    padding: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .table-container {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
   table {
     width: 100%;
   }
 
+  th {
+    text-align: left;
+  }
+
   .track-number {
     text-align: center;
     opacity: 0.6;
   }
 
-  .album {
-    opacity: 0.7;
-  }
-
   .duration {
     font-family: monospace;
     font-size: 0.9em;
     text-align: center;
+    width: 80px;
   }
 
   .format {
@@ -143,5 +255,6 @@
     font-size: 0.85em;
     text-transform: uppercase;
     text-align: center;
+    width: 80px;
   }
 </style>