From b77a7121cabe2fe9819acbfa4ab4287a399f760b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 1 Jun 2026 22:40:35 -0400
Subject: [PATCH] feat(android): restyle NowPlaying scrubber thumb to match web
 client

User feedback: dislikes both the old M3 20dp thumb and the current
10dp slim variant; wants the bare HTML range thumb the web client
shows. Replace SliderDefaults.Thumb with a plain Box(CircleShape +
accent fill, 14dp). Drops the M3 state-layer halo on press and the
implicit elevation/border so the on-screen result matches a
<input type=\"range\" accent-color> rendering. Slider's 48dp hit
slop is intrinsic to the composable, so tapability is unchanged.
---
 .../minstrel/player/ui/NowPlayingScreen.kt    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/android/app/src/main/java/com/fabledsword/minstrel/player/ui/NowPlayingScreen.kt b/android/app/src/main/java/com/fabledsword/minstrel/player/ui/NowPlayingScreen.kt
index 96f24442..46a74516 100644
--- a/android/app/src/main/java/com/fabledsword/minstrel/player/ui/NowPlayingScreen.kt
+++ b/android/app/src/main/java/com/fabledsword/minstrel/player/ui/NowPlayingScreen.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -31,7 +32,6 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Slider
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.ui.graphics.Brush
@@ -458,16 +458,17 @@ private fun ScrubberRow(positionMs: Long, durationMs: Long, onSeek: (Long) -> Un
         modifier = Modifier.fillMaxWidth(),
         colors = sliderColors,
         interactionSource = interactionSource,
-        // Slim 10dp thumb shrinks the scrubber's visual weight. M3
-        // default is 20dp; halving keeps it tappable (Slider's own
-        // 48dp hit slop is unchanged) but lets it recede into the UI.
-        // Track left at default — the colour pin alone already
-        // matches Flutter's slate look.
+        // Plain filled circle to match the web client's `<input
+        // type="range" accent-color>` thumb — flat, no state-layer
+        // ring, no border. M3's SliderDefaults.Thumb paints a state
+        // layer halo on press; we drop it for visual parity. Slider's
+        // 48dp hit slop still applies, so tapability is unchanged.
         thumb = {
-            SliderDefaults.Thumb(
-                interactionSource = interactionSource,
-                colors = sliderColors,
-                thumbSize = DpSize(10.dp, 10.dp),
+            Box(
+                modifier = Modifier
+                    .size(14.dp)
+                    .clip(CircleShape)
+                    .background(accent),
             )
         },
     )