feat(web): PlaylistCard component for M7 #352 slice 1

Square card with cover (or "No tracks yet" glyph fallback), name,
track count, and owner attribution when the playlist isn't the
current user's. Click navigates to /playlists/{id}.

web/src/lib/components/PlaylistCard.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { Playlist } from '$lib/api/types';
+  import { user } from '$lib/auth/store.svelte';
+
+  let { playlist }: { playlist: Playlist } = $props();
+
+  const isOwn = $derived(user.value?.id === playlist.user_id);
+</script>
+
+<button
+  type="button"
+  onclick={() => goto(`/playlists/${playlist.id}`)}
+  class="group flex w-full flex-col items-start gap-2 rounded-md p-2 text-left hover:bg-surface-hover"
+>
+  <div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
+    {#if playlist.cover_url}
+      <img
+        src={playlist.cover_url}
+        alt=""
+        class="h-full w-full object-cover transition-transform group-hover:scale-105"
+      />
+    {:else}
+      <div class="flex h-full w-full items-center justify-center text-text-muted">
+        <span class="text-xs">No tracks yet</span>
+      </div>
+    {/if}
+  </div>
+  <div class="w-full min-w-0">
+    <div class="truncate text-sm font-medium text-text-primary">{playlist.name}</div>
+    <div class="truncate text-xs text-text-muted">
+      {playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}
+      {#if !isOwn}
+        · by {playlist.owner_username}
+      {/if}
+    </div>
+  </div>
+</button>