From 10be068dccb2ec2d002a0861fcd9d6b00360ce84 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 10 Oct 2026 22:12:29 -0400
Subject: [PATCH] fix: the player bar's heart is Lucide's, outlined then filled
 as on Android, and its title and artist read at the size of the rest of the
 page (#5580)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/lib/components/LikeButton.svelte | 17 ++++++++++++-----
 web/src/lib/components/PlayerBar.svelte  | 16 ++++++++++------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/LikeButton.svelte b/web/src/lib/components/LikeButton.svelte
index 34fffcf7..b4b1df5c 100644
--- a/web/src/lib/components/LikeButton.svelte
+++ b/web/src/lib/components/LikeButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Heart } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
   import { createLikedIdsQuery, likeEntity, unlikeEntity, type EntityKind } from '#lib/api/likes.js';
 
@@ -8,9 +9,11 @@
     size = 'md'
   }: { entityType: EntityKind; entityId: string; size?: 'sm' | 'md' | 'lg' } = $props();
 
-  const sizeClass = $derived(
-    size === 'sm' ? 'text-base' : size === 'lg' ? 'text-3xl' : 'text-lg'
-  );
+  // Lucide's heart, as on Android (shared/widgets/LikeButton.kt): outlined
+  // when not liked, the same heart filled in the accent when liked, so the
+  // toggle reads as a fill change rather than a glyph swap.
+  const box = $derived(size === 'sm' ? 'h-7 w-7' : size === 'lg' ? 'h-10 w-10' : 'h-8 w-8');
+  const px = $derived(size === 'sm' ? 16 : size === 'lg' ? 26 : 18);
 
   const SET_KEY = {
     track: 'track_ids',
@@ -44,5 +47,9 @@
   aria-label={liked ? 'Unlike' : 'Like'}
   aria-pressed={liked}
   onclick={onClick}
-  class="rounded p-1 {sizeClass} {liked ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}"
->{liked ? '♥' : '♡'}</button>
+  class="inline-flex shrink-0 items-center justify-center rounded-full transition-colors {box} {liked
+    ? 'text-accent-fg'
+    : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
+>
+  <Heart size={px} strokeWidth={1.75} fill={liked ? 'currentColor' : 'none'} aria-hidden="true" />
+</button>
diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index 424f2a26..bb85d41c 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/web/src/lib/components/PlayerBar.svelte
@@ -290,23 +290,27 @@
           onerror={onCoverError}
         />
       </a>
-      <div class="min-w-0 flex-1">
-        <div class="truncate text-sm font-medium text-text-primary">{current.title}</div>
+      <!-- Sized to the 96px cover beside it: the title reads at body size,
+           as Android's mini player gives it title weight. -->
+      <div class="min-w-0 flex-1 space-y-0.5">
+        <div class="truncate text-base font-medium text-text-primary">{current.title}</div>
         <a
           href={`/artists/${current.artist_id}`}
-          class="block truncate text-xs text-text-secondary hover:text-text-primary"
+          class="block truncate text-sm text-text-secondary hover:text-text-primary"
         >
           {current.artist_name}
         </a>
         {#if player.queue.length > player.index + 1}
           {@const nextTrack = player.queue[player.index + 1]}
-          <span class="block truncate text-xs text-text-secondary">
+          <span class="block truncate pt-1 text-xs text-text-muted">
             Next · {nextTrack.title} — {nextTrack.artist_name}
           </span>
         {/if}
       </div>
-      <LikeButton entityType="track" entityId={current.id} />
-      <TrackMenu track={current} direction="up" hideQueueActions />
+      <div class="flex shrink-0 items-center">
+        <LikeButton entityType="track" entityId={current.id} />
+        <TrackMenu track={current} direction="up" hideQueueActions />
+      </div>
     </div>
 
     <!-- Center: seek row + transport row -->