From d654ef41a49c10ff322968d9d6bd8cbcccc72800 Mon Sep 17 00:00:00 2001
From: Matt Bruce <mbrucedogs@gmail.com>
Date: Sat, 19 Jul 2025 12:51:06 -0500
Subject: [PATCH] Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

---
 src/components/common/ListItem.tsx   | 18 ++++++++++----
 src/features/SongLists/SongLists.tsx | 36 +++++++++++++---------------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/common/ListItem.tsx b/src/components/common/ListItem.tsx
index ba8507a..e3753f8 100644
--- a/src/components/common/ListItem.tsx
+++ b/src/components/common/ListItem.tsx
@@ -16,6 +16,11 @@ interface ListItemProps {
   chip?: string;
   chipColor?: string;
   disabled?: boolean;
+  // Additional IonItem props that can be passed through
+  slot?: string;
+  detail?: boolean;
+  button?: boolean;
+  style?: React.CSSProperties;
 }
 
 export const ListItem: React.FC<ListItemProps> = ({
@@ -30,7 +35,11 @@ export const ListItem: React.FC<ListItemProps> = ({
   endContent,
   chip,
   chipColor = 'primary',
-  disabled = false
+  disabled = false,
+  slot,
+  detail = false,
+  button,
+  style
 }) => {
   const itemClassName = `list-item ${className}`.trim();
   
@@ -53,11 +62,12 @@ export const ListItem: React.FC<ListItemProps> = ({
   
   return (
     <IonItem 
-      button={!!onClick && !disabled}
+      button={button !== undefined ? button : (!!onClick && !disabled)}
       onClick={onClick}
-      detail={false}
+      detail={detail}
       className={itemClassName}
-      style={{ '--min-height': '60px' }}
+      style={{ '--min-height': '60px', ...style }}
+      slot={slot}
     >
       {/* Number (if enabled) */}
       {showNumber && (
diff --git a/src/features/SongLists/SongLists.tsx b/src/features/SongLists/SongLists.tsx
index f8cba5a..00dc2bc 100644
--- a/src/features/SongLists/SongLists.tsx
+++ b/src/features/SongLists/SongLists.tsx
@@ -108,27 +108,23 @@ const SongLists: React.FC = () => {
                   // Available songs get an accordion that expands
                   return (
                     <IonAccordion key={songKey} value={songKey}>
-                      <IonItem 
-                        slot="header" 
-                        detail={false} 
-                        button 
-                        onClick={() => handleSongItemClick(songKey)}
+                      <ListItem
+                        primaryText={songListSong.title}
+                        secondaryText={songListSong.artist}
+                        showNumber={true}
+                        number={index + 1}
+                        slot="header"
+                        detail={false}
+                        button={true}
                         className="list-item"
-                        style={{ '--min-height': '60px' }}
-                      >
-                        {/* Number */}
-                        <NumberDisplay number={index + 1} />
-
-                        {/* Use TwoLineDisplay for consistent formatting */}
-                        <TwoLineDisplay
-                          primaryText={songListSong.title}
-                          secondaryText={songListSong.artist}
-                        />
-
-                        <IonChip slot="end" color="primary">
-                          {availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
-                        </IonChip>
-                      </IonItem>
+                        style={{ '--min-height': '60px' } as React.CSSProperties}
+                        onClick={() => handleSongItemClick(songKey)}
+                        endContent={
+                          <IonChip color="primary">
+                            {availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
+                          </IonChip>
+                        }
+                      />
 
                       <div slot="content" className="bg-gray-50 border-l-4 border-primary">
                         <IonList>