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

src/components/common/SongInfo.tsx

@@ -14,6 +14,7 @@ import { useModal } from '../../hooks/useModalContext';
 import { ModalHeader, InfiniteScrollList, SongItem } from './index';
 import { SongInfoDisplay } from './SongItem';
 import type { Song, QueueItem } from '../../types';
+import { SongItemContext } from '../../types';
 
 interface SongInfoProps {
   isOpen: boolean;
@@ -160,7 +161,7 @@ const SongInfo: React.FC<SongInfoProps> = ({ isOpen, onClose, song }) => {
             renderItem={(song) => (
               <SongItem
                 song={song}
-                context="search"
+                context={SongItemContext.SEARCH}
                 showAddButton={true}
                 showInfoButton={true}
                 showFavoriteButton={false}

src/components/common/SongItem.tsx

@@ -7,6 +7,7 @@ import { useActions } from '../../hooks/useActions';
 import { useModal } from '../../hooks/useModalContext';
 import { debugLog } from '../../utils/logger';
 import type { SongItemProps, QueueItem, Song } from '../../types';
+import { SongItemContext } from '../../types';
 import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
 import { Icons } from '../../constants';
 
@@ -226,7 +227,7 @@ const SongItem: React.FC<SongItemProps> = React.memo(({
 
   // Find queue item key for removal (only needed for queue context)
   const queueItemKey = useMemo(() => 
-    context === 'queue' 
+    context === SongItemContext.QUEUE 
       ? (Object.entries(queue) as [string, QueueItem][]).find(([, item]) => item.song.path === song.path)?.[0]
       : null,
     [context, queue, song.path]
@@ -242,14 +243,14 @@ const SongItem: React.FC<SongItemProps> = React.memo(({
   });
 
   // Default values based on context if not explicitly provided
-  const shouldShowPath = showPath !== undefined ? showPath : context !== 'queue';
+  const shouldShowPath = showPath !== undefined ? showPath : context !== SongItemContext.QUEUE;
-  const shouldShowCount = showCount !== undefined ? showCount : context === 'queue';
+  const shouldShowCount = showCount !== undefined ? showCount : context === SongItemContext.QUEUE;
   
   // Default values for action buttons based on context if not explicitly provided
-  const shouldShowInfoButton = showInfoButton !== undefined ? showInfoButton : ['search', 'history'].includes(context);
+  const shouldShowInfoButton = showInfoButton !== undefined ? showInfoButton : [SongItemContext.SEARCH, SongItemContext.HISTORY].includes(context);
-  const shouldShowAddButton = showAddButton !== undefined ? showAddButton : ['search', 'history'].includes(context);
+  const shouldShowAddButton = showAddButton !== undefined ? showAddButton : [SongItemContext.SEARCH, SongItemContext.HISTORY].includes(context);
-  const shouldShowRemoveButton = showRemoveButton !== undefined ? showRemoveButton : context === 'queue' && isAdmin;
+  const shouldShowRemoveButton = showRemoveButton !== undefined ? showRemoveButton : context === SongItemContext.QUEUE && isAdmin;
-  const shouldShowDeleteButton = showDeleteButton !== undefined ? showDeleteButton : context === 'history' && isAdmin;
+  const shouldShowDeleteButton = showDeleteButton !== undefined ? showDeleteButton : context === SongItemContext.HISTORY && isAdmin;
   const shouldShowFavoriteButton = showFavoriteButton !== undefined ? showFavoriteButton : false; // Disabled for all contexts
 
   // Memoized handler functions for performance
@@ -295,9 +296,9 @@ const SongItem: React.FC<SongItemProps> = React.memo(({
             showDeleteButton={shouldShowDeleteButton}
             showFavoriteButton={shouldShowFavoriteButton}
             onDeleteItem={onDeleteItem}
-            onAddToQueue={context === 'queue' ? handleRemoveFromQueueClick : handleAddToQueueClick}
+            onAddToQueue={context === SongItemContext.QUEUE ? handleRemoveFromQueueClick : handleAddToQueueClick}
-            onRemoveFromQueue={context === 'queue' ? handleRemoveFromQueueClick : onDeleteItem}
+            onRemoveFromQueue={context === SongItemContext.QUEUE ? handleRemoveFromQueueClick : onDeleteItem}
-            onToggleFavorite={context === 'favorites' ? onDeleteItem : handleToggleFavoriteClick}
+            onToggleFavorite={context === SongItemContext.FAVORITES ? onDeleteItem : handleToggleFavoriteClick}
             onShowSongInfo={handleSelectSinger}
           />
         </div>

src/features/Favorites/Favorites.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from '../../redux';
 import { selectFavorites } from '../../redux';
 import { debugLog } from '../../utils/logger';
 import type { Song } from '../../types';
+import { SongItemContext } from '../../types';
 
 const Favorites: React.FC = () => {
   const {
@@ -31,7 +32,7 @@ const Favorites: React.FC = () => {
         renderItem={(song) => (
           <SongItem
             song={song}
-            context="favorites"
+            context={SongItemContext.FAVORITES}
             showInfoButton={true}
             showAddButton={false}
             showDeleteButton={true}

src/features/History/History.tsx

@@ -7,6 +7,7 @@ import { useAppSelector } from '../../redux';
 import { selectHistory, selectIsAdmin } from '../../redux';
 import { formatDate } from '../../utils/dataProcessing';
 import type { Song } from '../../types';
+import { SongItemContext } from '../../types';
 
 const History: React.FC = () => {
   const {
@@ -54,7 +55,7 @@ const History: React.FC = () => {
             <div className="flex-1">
               <SongItem
                 song={song}
-                context="history"
+                context={SongItemContext.HISTORY}
                 onDeleteItem={() => handleDeleteFromHistory(song)}
                 isAdmin={isAdmin}
                 showAddButton={true}

src/features/NewSongs/NewSongs.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from '../../redux';
 import { selectNewSongsArray } from '../../redux';
 import { debugLog } from '../../utils/logger';
 import type { Song } from '../../types';
+import { SongItemContext } from '../../types';
 
 const NewSongs: React.FC = () => {
   const {
@@ -30,7 +31,7 @@ const NewSongs: React.FC = () => {
         renderItem={(song) => (
           <SongItem
             song={song}
-            context="search"
+            context={SongItemContext.SEARCH}
             showAddButton={true}
             showInfoButton={true}
             showFavoriteButton={false}

src/features/Search/Search.tsx

@@ -5,6 +5,7 @@ import { useSearch, useDebugLogging } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectIsAdmin, selectSongs } from '../../redux';
 import type { Song } from '../../types';
+import { SongItemContext } from '../../types';
 
 const Search: React.FC = () => {
   const {
@@ -52,7 +53,7 @@ const Search: React.FC = () => {
           renderItem={(song) => (
             <SongItem
               song={song}
-              context="search"
+              context={SongItemContext.SEARCH}
               isAdmin={isAdmin}
               showAddButton={true}
               showInfoButton={true}

src/features/SongLists/SongLists.tsx

@@ -7,6 +7,7 @@ import { useAppSelector } from '../../redux';
 import { selectSongList } from '../../redux';
 import type { SongListSong, SongList, Song } from '../../types';
 import { debugLog } from '../../utils/logger';
+import { SongItemContext } from '../../types';
 
 const SongLists: React.FC = () => {
   const {
@@ -124,7 +125,7 @@ const SongLists: React.FC = () => {
                             <SongItem
                               key={song.key || `${song.title}-${song.artist}-${sidx}`}
                               song={song}
-                              context="search"
+                              context={SongItemContext.SEARCH}
                               showAddButton={true}
                               showInfoButton={true}
                               showFavoriteButton={false}

src/types/index.ts

@@ -164,9 +164,19 @@ export interface ActionButtonProps {
   'aria-label'?: string;
 }
 
+export enum SongItemContext {
+  SEARCH = 'search',
+  QUEUE = 'queue',
+  FAVORITES = 'favorites',
+  HISTORY = 'history',
+  SONGLISTS = 'songlists',
+  TOP100 = 'top100',
+  NEW = 'new',
+}
+
 export interface SongItemProps {
   song: Song;
-  context: 'search' | 'queue' | 'favorites' | 'history' | 'songlists' | 'top100' | 'new';
+  context: SongItemContext;
   onDeleteItem?: () => void;
   isAdmin?: boolean;
   className?: string;