From dbf9dbcb8c9fafce4d76c387e729401e4684d6bf Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 11:30:59 +0200
Subject: [PATCH] fix(sync): reference correct processed count in job result;
 fix(search): keep focus in search while playing by blurring audio and
 focusing search; cleanup lints

---
 .../src/services/backgroundJobService.ts      |  2 +-
 .../src/components/PaginatedSongList.tsx      | 24 ++++---------------
 .../src/components/PersistentMusicPlayer.tsx  |  7 +++++-
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/backend/src/services/backgroundJobService.ts b/packages/backend/src/services/backgroundJobService.ts
index 2e1f2d3..75190f0 100644
--- a/packages/backend/src/services/backgroundJobService.ts
+++ b/packages/backend/src/services/backgroundJobService.ts
@@ -398,7 +398,7 @@ class BackgroundJobService {
             errors: 0
           },
           total: {
-            processed: allMusicFiles.length,
+            processed: newAudioFiles.length,
             matched: quickMatches.length + complexMatches,
             unmatched: stillUnmatched,
             errors: 0
diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 826cdd6..6a7a3ac 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -6,20 +6,14 @@ import {
   Button,
   IconButton,
   HStack,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuDivider,
   Checkbox,
-  Tooltip,
   Spinner,
   useDisclosure,
   Input,
   InputGroup,
   InputLeftElement,
 } from '@chakra-ui/react';
-import { Search2Icon, ChevronDownIcon } from '@chakra-ui/icons';
+import { Search2Icon } from '@chakra-ui/icons';
 import { FiPlay } from 'react-icons/fi';
 import type { Song, PlaylistNode } from '../types/interfaces';
 import { formatDuration, formatTotalDuration } from '../utils/formatters';
@@ -191,7 +185,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   }, []);
 
   // Memoized flattened list of all playlists
-  const allPlaylists = useMemo(() => getAllPlaylists(playlists), [playlists, getAllPlaylists]);
+  // const allPlaylists = useMemo(() => getAllPlaylists(playlists), [playlists, getAllPlaylists]);
 
   const toggleSelection = useCallback((songId: string) => {
     setSelectedSongs(prev => {
@@ -231,10 +225,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   }, [onSongSelect]);
 
   // Memoized search handler with debouncing
-  const handleSearch = useCallback((query: string) => {
-    setLocalSearchQuery(query);
-    onSearch(query);
-  }, [onSearch]);
+  // Search handled inline via localSearchQuery effect
 
   // Memoized song items to prevent unnecessary re-renders
   const songItems = useMemo(() => {
@@ -270,13 +261,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   }, [songs, totalPlaylistDuration]);
 
   // Memoized playlist options for bulk actions
-  const playlistOptions = useMemo(() => {
-    return allPlaylists.map(playlist => (
-      <MenuItem key={playlist.id} onClick={() => handleBulkAddToPlaylist(playlist.name)}>
-        {playlist.name}
-      </MenuItem>
-    ));
-  }, [allPlaylists, handleBulkAddToPlaylist]);
+  // Playlist options built directly in the modal
 
   // Handle debounced search
   useEffect(() => {
@@ -345,6 +330,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
             borderColor="gray.600"
             _hover={{ borderColor: "gray.500" }}
             _focus={{ borderColor: "blue.300", boxShadow: "0 0 0 1px var(--chakra-colors-blue-300)" }}
+            autoFocus
           />
         </InputGroup>
 
diff --git a/packages/frontend/src/components/PersistentMusicPlayer.tsx b/packages/frontend/src/components/PersistentMusicPlayer.tsx
index c8da66a..ae59712 100644
--- a/packages/frontend/src/components/PersistentMusicPlayer.tsx
+++ b/packages/frontend/src/components/PersistentMusicPlayer.tsx
@@ -228,8 +228,13 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
           audioRef.current?.blur();
         }}
         onPlay={() => {
-          // Extra safeguard to avoid focus jump while playing
           audioRef.current?.blur();
+          // Return focus to active text input if present
+          const active = document.activeElement as HTMLElement | null;
+          if (!active || active.tagName !== 'INPUT') {
+            const search = document.querySelector('#song-list-container input[type="text"]') as HTMLInputElement | null;
+            search?.focus();
+          }
         }}
       />