minor ui/ux stuff

src/app/(tabs)/_layout.tsx

@@ -11,7 +11,7 @@ export default function TabsLayout() {
   const colors = useColors();
   return (
     <Tabs
-      detachInactiveScreens
+      detachInactiveScreens={false}
       screenOptions={{
         headerShown: false,
         freezeOnBlur: false,

src/app/(tabs)/eq.tsx

@@ -89,7 +89,8 @@ export default function EQScreen() {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const availableWidth = windowWidth - insets.left - insets.right;
-  const isWide = isWideWindow(availableWidth, windowHeight - insets.top - insets.bottom);
+  const availableHeight = windowHeight - insets.top - insets.bottom;
+  const isWide = isWideWindow(availableWidth, availableHeight);
   // Editing pane keeps a phone-ish width; the graph gets everything else.
   const sidePaneWidth = Math.min(360, Math.max(280, Math.round(availableWidth * 0.4)));
 
@@ -273,7 +274,7 @@ export default function EQScreen() {
   );
 
   const bottomBarEl = (
-    <View style={[styles.bottomBar, isWide && styles.bottomBarWide]}>
+    <View style={[styles.bottomBar, !isWide && styles.bottomBarNarrow, isWide && styles.bottomBarWide]}>
       <View style={styles.preamp}>
         <EQSlider
           label="Preamp"
@@ -660,7 +661,7 @@ const useStyles = createThemedStyles((colors) => ({
   },
   graphWrap: {
     flex: 1,
-    minHeight: 180,
+    minHeight: 168,
     marginHorizontal: spacing.lg,
   },
   section: {
@@ -697,6 +698,9 @@ const useStyles = createThemedStyles((colors) => ({
     paddingTop: spacing.md,
     paddingBottom: spacing.sm,
   },
+  bottomBarNarrow: {
+    paddingTop: spacing.xs,
+  },
   preamp: {
     flex: 1,
   },

src/app/_layout.tsx

@@ -363,7 +363,7 @@ export default function RootLayout() {
               presentation: 'transparentModal',
               animation: 'none',
               gestureEnabled: false,
-              contentStyle: { backgroundColor: 'transparent' },
+              contentStyle: { backgroundColor: theme.colors.bgPrimary },
             }}
           />
         </Stack>

src/app/now-playing.tsx

@@ -1064,7 +1064,7 @@ export default function NowPlayingScreen() {
 const useStyles = createThemedStyles((colors) => ({
   backdrop: {
     flex: 1,
-    backgroundColor: 'transparent',
+    backgroundColor: colors.bgPrimary,
   },
   content: {
     flex: 1,

src/components/search/QuickSearchOverlay.tsx

@@ -75,6 +75,7 @@ const PLAYLIST_RESULT_LIMIT = 4;
 const EMPTY_RECENT_TRACKS_LIMIT = 3;
 const ALL_TRACK_RESULT_LIMIT = 120;
 const ALL_ENTITY_RESULT_LIMIT = 80;
+const QUEUED_FEEDBACK_MS = 1000;
 
 const NAV_ENTRIES: {
   id: string;
@@ -470,12 +471,14 @@ function ResultRow({
   result,
   query,
   active,
+  queued,
   onPress,
   onQueueTrack,
 }: {
   result: SearchResult;
   query: string;
   active: boolean;
+  queued: boolean;
   onPress: () => void;
   onQueueTrack: (track: DbTrack) => void;
 }) {
@@ -513,7 +516,7 @@ function ResultRow({
           accessibilityRole="button"
           accessibilityLabel={`Play ${result.track.title} next`}
         >
-          <Ionicons name="add" size={18} color={colors.accentTextStrong} />
+          <Ionicons name={queued ? 'checkmark' : 'add'} size={18} color={colors.accentTextStrong} />
         </Pressable>
       ) : result.kind === 'playlist' && result.playlist.remote ? (
         <Ionicons name="cloud" size={14} color={colors.accent} />
@@ -550,6 +553,8 @@ function QuickSearchPanel({
 
   const [query, setQuery] = useState(initialQuery);
   const [showAllLibrary, setShowAllLibrary] = useState(false);
+  const [queuedTrackPaths, setQueuedTrackPaths] = useState<Set<string>>(() => new Set());
+  const queuedFeedbackTimers = useRef(new Map<string, ReturnType<typeof setTimeout>>());
   const trimmedQuery = query.trim();
   const hasQuery = trimmedQuery.length > 0;
 
@@ -558,6 +563,14 @@ function QuickSearchPanel({
     return () => clearTimeout(timer);
   }, []);
 
+  useEffect(
+    () => () => {
+      queuedFeedbackTimers.current.forEach(clearTimeout);
+      queuedFeedbackTimers.current.clear();
+    },
+    []
+  );
+
   const updateQuery = (value: string) => {
     setQuery(value);
     setShowAllLibrary(false);
@@ -930,6 +943,27 @@ function QuickSearchPanel({
 
   const queueTrack = (track: DbTrack) => {
     commitHaptic();
+    const existingTimer = queuedFeedbackTimers.current.get(track.path);
+    if (existingTimer) clearTimeout(existingTimer);
+
+    setQueuedTrackPaths((current) => {
+      if (current.has(track.path)) return current;
+      const next = new Set(current);
+      next.add(track.path);
+      return next;
+    });
+
+    const feedbackTimer = setTimeout(() => {
+      queuedFeedbackTimers.current.delete(track.path);
+      setQueuedTrackPaths((current) => {
+        if (!current.has(track.path)) return current;
+        const next = new Set(current);
+        next.delete(track.path);
+        return next;
+      });
+    }, QUEUED_FEEDBACK_MS);
+    queuedFeedbackTimers.current.set(track.path, feedbackTimer);
+
     void enqueueTop(dbTrackToTrack(track));
   };
 
@@ -1018,6 +1052,7 @@ function QuickSearchPanel({
                 result={item.result}
                 query={trimmedQuery}
                 active={item.result.kind === 'track' && item.result.track.path === currentPath}
+                queued={item.result.kind === 'track' && queuedTrackPaths.has(item.result.track.path)}
                 onPress={() => executeResult(item.result)}
                 onQueueTrack={queueTrack}
               />