From 318707b9905ff732b6031d8847ae9d75b3dfc975 Mon Sep 17 00:00:00 2001
From: mbrucedogs <mbrucedogs@gmail.com>
Date: Mon, 21 Jul 2025 09:55:53 -0500
Subject: [PATCH] Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

---
 src/components/common/ListItem.tsx | 73 +++++++++++++-----------------
 1 file changed, 31 insertions(+), 42 deletions(-)

diff --git a/src/components/common/ListItem.tsx b/src/components/common/ListItem.tsx
index 2be67ce..16eaf01 100644
--- a/src/components/common/ListItem.tsx
+++ b/src/components/common/ListItem.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef, useMemo } 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
 interface GenericListItemProps {
@@ -18,6 +19,7 @@ interface GenericListItemProps {
   button?: boolean;
   style?: React.CSSProperties;
   endContent?: React.ReactNode;
+  showSeparator?: boolean;
 }
 
 // Song-specific ListItem interface
@@ -55,59 +57,46 @@ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListIte
   detail = false,
   button = false,
   style,
-  endContent
+  endContent,
+  showSeparator, // keep for API compatibility, but not used
 }, ref) => {
   return (
-    <IonItem 
+    <IonItem
       ref={ref}
       className={className}
       onClick={onClick}
       button={button || !!onClick}
       detail={detail}
       slot={slot}
-      style={style}
+      style={{
+        ...style,
+        minHeight: '60px',
+        '--padding-start': '16px', // Add left padding for classic Ionic look
+        '--min-height': '60px',
+      }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-        {showNumber && number !== undefined && (
-          <IonLabel slot="start" className="flex-shrink-0 mr-4" style={{ flex: '0 0 auto' }}>
-            <div className="text-lg font-bold text-gray-500">
-              {number}
-            </div>
-          </IonLabel>
-        )}
-        <IonLabel style={{ flex: '1 1 0%', margin: '0 10px' }}>
-          <div 
-            className="ion-text-bold"
-            style={{ 
-              fontWeight: 'bold', 
-              fontSize: '1rem', 
-              color: 'var(--ion-color-dark)',
-              marginBottom: '4px'
-            }}
-          >
-            {primaryText}
+      {/* Number (if enabled) */}
+      {showNumber && number !== undefined && (
+        <NumberDisplay number={number} />
+      )}
+      {/* Main content */}
+      <IonLabel>
+        <div style={{ fontWeight: 'bold', fontSize: '1rem', color: 'var(--ion-color-dark)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
+          {primaryText}
+        </div>
+        {secondaryText && (
+          <div style={{ fontSize: '0.875rem', fontStyle: 'italic', color: 'var(--ion-color-medium)', overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
+            {secondaryText}
           </div>
-          {secondaryText && (
-            <div 
-              className="ion-text-italic ion-color-medium"
-              style={{ 
-                fontSize: '0.875rem', 
-                fontStyle: 'italic', 
-                color: 'var(--ion-color-medium)',
-                marginBottom: '4px'
-              }}
-            >
-              {secondaryText}
-            </div>
-          )}
-        </IonLabel>
-        <div style={{ flex: '0 0 auto' }}>{children}</div>
-        <div style={{ flex: '0 0 auto' }}>{endContent}</div>
-      </div>
+        )}
+      </IonLabel>
+      {/* End content */}
+      {children && <div style={{ flex: '0 0 auto', marginRight: 8 }}>{children}</div>}
+      {endContent && <div style={{ flex: '0 0 auto' }}>{endContent}</div>}
       {showChevron && (
-        <IonIcon 
-          slot="end" 
-          icon={chevronForward} 
+        <IonIcon
+          slot="end"
+          icon={chevronForward}
           className="ion-color-medium"
         />
       )}