Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

src/features/History/History.tsx

@@ -4,7 +4,7 @@ import { time } from 'ionicons/icons';
 import { InfiniteScrollList, SongItem } from '../../components/common';
 import { useHistory } from '../../hooks';
 import { useAppSelector } from '../../redux';
-import { selectHistory } from '../../redux';
+import { selectHistory, selectIsAdmin } from '../../redux';
 import { debugLog } from '../../utils/logger';
 import { formatDate } from '../../utils/dataProcessing';
 import type { Song } from '../../types';
@@ -15,10 +15,11 @@ const History: React.FC = () => {
     hasMore,
     loadMore,
     handleAddToQueue,
-    handleToggleFavorite,
+    handleDeleteFromHistory,
   } = useHistory();
 
   const history = useAppSelector(selectHistory);
+  const isAdmin = useAppSelector(selectIsAdmin);
   const historyCount = Object.keys(history).length;
 
   // Debug logging
@@ -52,7 +53,12 @@ const History: React.FC = () => {
                 song={song}
                 context="history"
                 onAddToQueue={() => handleAddToQueue(song)}
-                onToggleFavorite={() => handleToggleFavorite(song)}
+                onDelete={() => handleDeleteFromHistory(song)}
+                isAdmin={isAdmin}
+                showAddButton={true}
+                showInfoButton={true}
+                showDeleteButton={true}
+                showFavoriteButton={false}
               />
             </div>
             {renderExtraContent(song)}

src/features/NewSongs/NewSongs.tsx

@@ -12,7 +12,6 @@ const NewSongs: React.FC = () => {
     hasMore,
     loadMore,
     handleAddToQueue,
-    handleToggleFavorite,
   } = useNewSongs();
 
   const newSongsArray = useAppSelector(selectNewSongsArray);
@@ -34,7 +33,9 @@ const NewSongs: React.FC = () => {
             song={song}
             context="search"
             onAddToQueue={() => handleAddToQueue(song)}
-            onToggleFavorite={() => handleToggleFavorite(song)}
+            showAddButton={true}
+            showInfoButton={true}
+            showFavoriteButton={false}
           />
         )}
         emptyTitle="No new songs"

src/features/Search/Search.tsx

@@ -13,7 +13,6 @@ const Search: React.FC = () => {
     searchResults,
     handleSearchChange,
     handleAddToQueue,
-    handleToggleFavorite,
     loadMore,
   } = useSearch();
   
@@ -65,9 +64,11 @@ const Search: React.FC = () => {
               song={song}
               context="search"
               onAddToQueue={() => handleAddToQueue(song)}
-              onToggleFavorite={() => handleToggleFavorite(song)}
               onSelectSinger={() => openSongInfo(song)}
               isAdmin={isAdmin}
+              showAddButton={true}
+              showInfoButton={true}
+              showFavoriteButton={false}
             />
           )}
           emptyTitle={searchTerm ? "No songs found" : "No songs available"}

src/firebase/services.ts

@@ -166,6 +166,12 @@ export const historyService = {
     return await push(historyRef, song);
   },
 
+  // Remove song from history
+  removeFromHistory: async (controllerName: string, historyItemKey: string) => {
+    const historyItemRef = ref(database, `controllers/${controllerName}/history/${historyItemKey}`);
+    await remove(historyItemRef);
+  },
+
   // Listen to history changes
   subscribeToHistory: (controllerName: string, callback: (data: Record<string, Song>) => void) => {
     const historyRef = ref(database, `controllers/${controllerName}/history`);

src/hooks/useHistory.ts

@@ -4,12 +4,16 @@ import { debugLog } from '../utils/logger';
 import { useSongOperations } from './useSongOperations';
 import { useToast } from './useToast';
 import { useDisabledSongs } from './useDisabledSongs';
+import { historyService } from '../firebase/services';
+import { useAppSelector as useAppSelectorRedux } from '../redux';
+import { selectControllerName } from '../redux';
 import type { Song } from '../types';
 
 const ITEMS_PER_PAGE = 20;
 
 export const useHistory = () => {
   const allHistoryItems = useAppSelector(selectHistoryArray);
+  const controllerName = useAppSelectorRedux(selectControllerName);
   const { addToQueue, toggleFavorite } = useSongOperations();
   const { showSuccess, showError } = useToast();
   const { disabledSongPaths, isSongDisabled, addDisabledSong, removeDisabledSong, loading: disabledSongsLoading } = useDisabledSongs();
@@ -82,6 +86,20 @@ export const useHistory = () => {
     }
   }, [isSongDisabled, addDisabledSong, removeDisabledSong, showError]);
 
+  const handleDeleteFromHistory = useCallback(async (song: Song) => {
+    if (!controllerName || !song.key) {
+      showError('Cannot delete history item - missing data');
+      return;
+    }
+
+    try {
+      await historyService.removeFromHistory(controllerName, song.key);
+      showSuccess('Removed from history');
+    } catch {
+      showError('Failed to remove from history');
+    }
+  }, [controllerName, showSuccess, showError]);
+
   return {
     historyItems,
     hasMore,
@@ -89,6 +107,7 @@ export const useHistory = () => {
     handleAddToQueue,
     handleToggleFavorite,
     handleToggleDisabled,
+    handleDeleteFromHistory,
     isSongDisabled,
   };
 };