feat(ui): dynamically load playlists and artists in library

src/routes/library/+page.svelte

@@ -1,12 +1,66 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { settings, loadSettings } from '$lib/stores/settings';
+  import { scanArtists, type Artist } from '$lib/library/scanner';
+
+  let artists = $state<Artist[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  onMount(async () => {
+    await loadSettings();
+    await loadArtists();
+  });
+
+  async function loadArtists() {
+    loading = true;
+    error = null;
+
+    if (!$settings.musicFolder) {
+      error = 'No music folder configured. Please set one in Settings.';
+      loading = false;
+      return;
+    }
+
+    try {
+      artists = await scanArtists($settings.musicFolder);
+      loading = false;
+    } catch (e) {
+      error = 'Error loading artists: ' + (e as Error).message;
+      loading = false;
+    }
+  }
+</script>
+
 <div>
   <h2>Library</h2>
-  <p>Your music collection</p>
 
-  <section class="library-content">
-    <div class="field-row-stacked">
-      <!-- Library content will go here -->
-    </div>
-  </section>
+  {#if loading}
+    <p>Loading artists...</p>
+  {:else if error}
+    <p class="error">{error}</p>
+  {:else if artists.length === 0}
+    <p>No artists found in your music folder.</p>
+  {:else}
+    <section class="library-content">
+      <table>
+        <thead>
+          <tr>
+            <th>Artist</th>
+            <th>Path</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each artists as artist}
+            <tr>
+              <td>{artist.name}</td>
+              <td class="path">{artist.path}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </section>
+  {/if}
 </div>
 
 <style>
@@ -17,4 +71,18 @@
   .library-content {
     margin-top: 20px;
   }
+
+  .error {
+    color: #ff6b6b;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  .path {
+    font-family: monospace;
+    font-size: 0.9em;
+    opacity: 0.7;
+  }
 </style>