From d757e512555d65edd3998916d3c0614397912066 Mon Sep 17 00:00:00 2001
From: Boof2015 <75185879+Boof2015@users.noreply.github.com>
Date: Mon, 13 Jul 2026 12:06:51 -0400
Subject: [PATCH] move now playing buttons around

---
 src/components/lyrics/LyricsView.tsx        | 60 ++++++++-------
 src/components/player/NowPlayingOverlay.tsx | 82 ++++++++++-----------
 2 files changed, 69 insertions(+), 73 deletions(-)

diff --git a/src/components/lyrics/LyricsView.tsx b/src/components/lyrics/LyricsView.tsx
index 5233683..6b80c49 100644
--- a/src/components/lyrics/LyricsView.tsx
+++ b/src/components/lyrics/LyricsView.tsx
@@ -1,8 +1,8 @@
 // Lyrics mode for now-playing — a lyrics-first takeover that replaces the whole
 // art/controls body (and the standard header). Lyrics fill the screen over the
-// blurred-art wash; a slim strip on top (dismiss · track · favorite · exit) and a
-// minimal control bar below (progress + prev/play/next) stay permanently visible
-// so you never lose control to go fully immersive. The ♫ toggle exits back to the
+// blurred-art wash; a slim strip on top (dismiss + track) and a minimal control
+// bar below (favorite + prev/play/next + exit) stay permanently visible so you
+// never lose control to go fully immersive. The lyrics toggle exits back to the
 // art view; swipe-down still closes the player.
 
 import { Image } from 'expo-image';
@@ -94,32 +94,6 @@ export function LyricsView({
           </View>
         </View>
 
-        <TactilePressable android_ripple={ripple.bounded}
-          onPress={onToggleFavorite}
-          haptic={isFavorite ? 'toggleOff' : 'toggleOn'}
-          confirmationScale={1.08}
-          hitSlop={10}
-          style={styles.stripBtn}
-          accessibilityLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-          accessibilityState={{ selected: isFavorite }}
-        >
-          <Ionicons
-            name={isFavorite ? 'heart' : 'heart-outline'}
-            size={20}
-            color={isFavorite ? colors.accent : colors.textTertiary}
-          />
-        </TactilePressable>
-
-        <TactilePressable android_ripple={ripple.bounded}
-          onPress={onExitLyrics}
-          haptic="selection"
-          hitSlop={10}
-          style={styles.stripBtn}
-          accessibilityLabel="Hide lyrics"
-          accessibilityState={{ selected: true }}
-        >
-          <MaterialCommunityIcons name="script-text-outline" size={20} color={colors.accent} />
-        </TactilePressable>
       </View>
 
       <LyricsBand
@@ -133,6 +107,21 @@ export function LyricsView({
       <View style={styles.controls}>
         <SeekBar currentTime={currentTime} duration={duration} trackKey={track.id} onSeek={onSeek} />
         <View style={styles.transport}>
+          <TactilePressable android_ripple={ripple.bounded}
+            onPress={onToggleFavorite}
+            haptic={isFavorite ? 'toggleOff' : 'toggleOn'}
+            confirmationScale={1.08}
+            hitSlop={10}
+            style={styles.transportBtn}
+            accessibilityLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+            accessibilityState={{ selected: isFavorite }}
+          >
+            <Ionicons
+              name={isFavorite ? 'heart' : 'heart-outline'}
+              size={22}
+              color={isFavorite ? colors.accent : colors.textTertiary}
+            />
+          </TactilePressable>
           <TactilePressable android_ripple={ripple.bounded} onPress={onPrev} haptic="action" hitSlop={12} style={styles.transportBtn} accessibilityLabel="Previous">
             <Ionicons name="play-skip-back" size={28} color={colors.textPrimary} />
           </TactilePressable>
@@ -146,6 +135,16 @@ export function LyricsView({
           <TactilePressable android_ripple={ripple.bounded} onPress={onNext} haptic="action" hitSlop={12} style={styles.transportBtn} accessibilityLabel="Next">
             <Ionicons name="play-skip-forward" size={28} color={colors.textPrimary} />
           </TactilePressable>
+          <TactilePressable android_ripple={ripple.bounded}
+            onPress={onExitLyrics}
+            haptic="selection"
+            hitSlop={10}
+            style={styles.transportBtn}
+            accessibilityLabel="Hide lyrics"
+            accessibilityState={{ selected: true }}
+          >
+            <MaterialCommunityIcons name="script-text-outline" size={22} color={colors.accent} />
+          </TactilePressable>
         </View>
       </View>
     </View>
@@ -210,8 +209,7 @@ const useStyles = createThemedStyles((colors) => ({
   transport: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.xl,
+    justifyContent: 'space-between',
     marginTop: spacing.xs,
   },
   transportBtn: {
diff --git a/src/components/player/NowPlayingOverlay.tsx b/src/components/player/NowPlayingOverlay.tsx
index 27191f3..62853cf 100644
--- a/src/components/player/NowPlayingOverlay.tsx
+++ b/src/components/player/NowPlayingOverlay.tsx
@@ -555,48 +555,6 @@ export function NowPlayingOverlay() {
                   </Text>
                 </View>
                 <View style={[styles.headerSide, styles.headerActions]}>
-                  {!isDesktopTarget && track ? (
-                    <TactilePressable
-                      style={styles.headerBtn} android_ripple={ripple.icon(22)}
-                      haptic="selection"
-                      onPress={showLyrics}
-                      hitSlop={12}
-                      accessibilityLabel={
-                        hasTabletCompanion
-                          ? 'Show lyrics in companion'
-                          : lyricsVisible
-                            ? 'Hide lyrics'
-                            : 'Show lyrics'
-                      }
-                      accessibilityState={{
-                        selected: hasTabletCompanion
-                          ? nowPlayingCompanion === 'lyrics'
-                          : lyricsVisible,
-                      }}
-                    >
-                      <PlayerStateIcon
-                        selected={
-                          (hasTabletCompanion && nowPlayingCompanion === 'lyrics') ||
-                          (!hasTabletCompanion && lyricsVisible)
-                        }
-                        size={20}
-                        inactive={
-                          <MaterialCommunityIcons
-                            name="script-text-outline"
-                            size={20}
-                            color={colors.textSecondary}
-                          />
-                        }
-                        active={
-                          <MaterialCommunityIcons
-                            name="script-text-outline"
-                            size={20}
-                            color={colors.accent}
-                          />
-                        }
-                      />
-                    </TactilePressable>
-                  ) : null}
                   <Pressable
                     style={styles.headerBtn} android_ripple={ripple.icon(22)}
                     onPress={openMenu}
@@ -1229,6 +1187,46 @@ export function NowPlayingOverlay() {
                       <FormatBadges track={track} wrap={false} variant="plain" />
                     </View>
                     <View style={styles.subActions}>
+                      <TactilePressable
+                        hitSlop={10}
+                        style={styles.subBtn} android_ripple={ripple.icon(20)}
+                        haptic="selection"
+                        onPress={showLyrics}
+                        accessibilityLabel={
+                          hasTabletCompanion
+                            ? 'Show lyrics in companion'
+                            : lyricsVisible
+                              ? 'Hide lyrics'
+                              : 'Show lyrics'
+                        }
+                        accessibilityState={{
+                          selected: hasTabletCompanion
+                            ? nowPlayingCompanion === 'lyrics'
+                            : lyricsVisible,
+                        }}
+                      >
+                        <PlayerStateIcon
+                          selected={
+                            (hasTabletCompanion && nowPlayingCompanion === 'lyrics') ||
+                            (!hasTabletCompanion && lyricsVisible)
+                          }
+                          size={SUB_ICON_SIZE + 2}
+                          inactive={
+                            <MaterialCommunityIcons
+                              name="script-text-outline"
+                              size={SUB_ICON_SIZE + 2}
+                              color={colors.textTertiary}
+                            />
+                          }
+                          active={
+                            <MaterialCommunityIcons
+                              name="script-text-outline"
+                              size={SUB_ICON_SIZE + 2}
+                              color={colors.accent}
+                            />
+                          }
+                        />
+                      </TactilePressable>
                       <TactilePressable
                         hitSlop={10}
                         style={styles.subBtn} android_ripple={ripple.icon(20)}