m2, library ux

src/app/(tabs)/library/artist/[name].tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { FlashList } from '@shopify/flash-list';
@@ -6,17 +6,20 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Screen } from '@/components/Screen';
 import { Text } from '@/components/Text';
 import { TrackRow } from '@/components/library/TrackRow';
+import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
 import { colors, radius, spacing } from '@/theme';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
-import { playTracks } from '@/audio/playbackController';
+import { playTracks, shuffleTracks } from '@/audio/playbackController';
 import { dbTrackToTrack } from '@/library/trackAdapter';
+import type { DbTrack } from '@/types/library';
 
 export default function ArtistScreen() {
   const router = useRouter();
   const { name } = useLocalSearchParams<{ name: string }>();
   const allTracks = useLibraryStore((s) => s.tracks);
   const currentPath = usePlayerStore((s) => s.currentTrack?.path);
+  const [actionTrack, setActionTrack] = useState<DbTrack | null>(null);
 
   // Store tracks are ordered artist/album/disc/track, so the filtered slice
   // keeps album grouping and track order.
@@ -53,6 +56,16 @@ export default function ArtistScreen() {
             Play
           </Text>
         </Pressable>
+        <Pressable
+          style={styles.shuffleButton}
+          onPress={() => void shuffleTracks(tracks.map(dbTrackToTrack))}
+          accessibilityRole="button"
+        >
+          <Ionicons name="shuffle" size={16} color={colors.accent} />
+          <Text variant="body" color={colors.accent}>
+            Shuffle
+          </Text>
+        </Pressable>
       </View>
 
       <FlashList
@@ -64,9 +77,12 @@ export default function ArtistScreen() {
             track={item}
             active={item.path === currentPath}
             onPress={() => playFrom(index)}
+            onLongPress={() => setActionTrack(item)}
           />
         )}
       />
+
+      <TrackActionsSheet track={actionTrack} onClose={() => setActionTrack(null)} />
     </Screen>
   );
 }
@@ -85,7 +101,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     marginBottom: spacing.lg,
-    gap: spacing.lg,
+    gap: spacing.sm,
   },
   headerMeta: {
     flex: 1,
@@ -100,6 +116,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
   },
+  shuffleButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    borderColor: colors.accent,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: radius.pill,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+  },
   playLabel: {
     color: colors.bgPrimary,
     fontWeight: '600',