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

src/components/common/ListItem.tsx

@@ -1,7 +1,6 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 import { IonItem, IonLabel, IonIcon } from '@ionic/react';
 import { chevronForward } from 'ionicons/icons';
-import type { Song } from '../../types';
 import { NumberDisplay } from './NumberDisplay';
 
 // Generic ListItem interface for different types of data
@@ -22,27 +21,6 @@ interface GenericListItemProps {
   showSeparator?: boolean;
 }
 
-// Song-specific ListItem interface
-interface SongListItemProps {
-  song: Song;
-  onClick?: () => void;
-  showPath?: boolean;
-  showCount?: boolean;
-  showChevron?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-// Utility function to extract filename from path
-const extractFilename = (path: string): string => {
-  if (!path) return '';
-  
-  // Handle different path separators (Windows backslash, Unix forward slash)
-  const normalizedPath = path.replace(/\\/g, '/');
-  const parts = normalizedPath.split('/');
-  return parts[parts.length - 1] || '';
-};
-
 // Generic ListItem component for different types of data
 export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListItemProps>(({
   primaryText,
@@ -104,89 +82,6 @@ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListIte
   );
 }));
 
-// Song-specific ListItem component
-export const SongListItem = React.memo(forwardRef<HTMLIonItemElement, SongListItemProps>(({
-  song,
-  onClick,
-  showPath = false,
-  showCount = false,
-  showChevron = false,
-  className = '',
-  children
-}, ref) => {
-  // Memoize the filename extraction
-  const filename = useMemo(() => extractFilename(song.path), [song.path]);
-
-  return (
-    <IonItem 
-      ref={ref}
-      className={className}
-      onClick={onClick}
-      button={!!onClick}
-    >
-      <IonLabel>
-        <div 
-          className="ion-text-bold"
-          style={{ 
-            fontWeight: 'bold', 
-            fontSize: '1rem', 
-            color: 'var(--ion-color-dark)',
-            marginBottom: '4px'
-          }}
-        >
-          {song.title}
-        </div>
-        <div 
-          className="ion-text-italic ion-color-medium"
-          style={{ 
-            fontSize: '0.875rem', 
-            fontStyle: 'italic', 
-            color: 'var(--ion-color-medium)',
-            marginBottom: '4px'
-          }}
-        >
-          {song.artist}
-        </div>
-        {/* Show filename if showPath is true */}
-        {showPath && song.path && (
-          <div 
-            className="ion-text-sm ion-color-medium"
-            style={{ 
-              fontSize: '0.75rem', 
-              color: 'var(--ion-color-medium)'
-            }}
-          >
-            {filename}
-          </div>
-        )}
-        {/* Show play count if showCount is true */}
-        {showCount && song.count && (
-          <div 
-            className="ion-text-sm ion-color-medium"
-            style={{ 
-              fontSize: '0.75rem', 
-              color: 'var(--ion-color-medium)'
-            }}
-          >
-            Played {song.count} times
-          </div>
-        )}
-      </IonLabel>
-      
-      {children}
-      
-      {showChevron && (
-        <IonIcon 
-          slot="end" 
-          icon={chevronForward} 
-          className="ion-color-medium"
-        />
-      )}
-    </IonItem>
-  );
-}));
-
 ListItem.displayName = 'ListItem';
-SongListItem.displayName = 'SongListItem';
 
 export default ListItem;