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

src/components/common/ListItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IonItem, IonIcon, IonChip } from '@ionic/react';
 import { TwoLineDisplay } from './TwoLineDisplay';
+import { NumberDisplay } from './NumberDisplay';
 
 interface ListItemProps {
   primaryText: string;
@@ -60,11 +61,7 @@ export const ListItem: React.FC<ListItemProps> = ({
     >
       {/* Number (if enabled) */}
       {showNumber && (
-        <div slot="start" className="ion-text-center" style={{ marginLeft: '-8px', marginRight: '12px' }}>
+        <NumberDisplay number={number!} />
-          <div className="ion-text-bold ion-color-medium" style={{ fontSize: '1rem', minWidth: '2rem' }}>
-            {number}
-          </div>
-        </div>
       )}
 
       {/* Main content */}

src/components/common/NumberDisplay.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface NumberDisplayProps {
+  number: number;
+  className?: string;
+}
+
+export const NumberDisplay: React.FC<NumberDisplayProps> = ({ 
+  number, 
+  className = '' 
+}) => {
+  return (
+    <div slot="start" className={`ion-text-center ${className}`} style={{ marginLeft: '-8px', marginRight: '12px' }}>
+      <div className="ion-text-bold ion-color-medium" style={{ fontSize: '1rem', minWidth: '2rem' }}>
+        {number}
+      </div>
+    </div>
+  );
+}; 

src/components/common/index.ts

@@ -9,3 +9,4 @@ export { default as SongInfo } from './SongInfo';
 export { default as Toast } from './Toast';
 export { TwoLineDisplay } from './TwoLineDisplay';
 export { ListItem } from './ListItem';
+export { NumberDisplay } from './NumberDisplay'; 

src/features/Queue/Queue.tsx

@@ -4,7 +4,7 @@ import { trash, reorderThreeOutline, reorderTwoOutline } from 'ionicons/icons';
 import { useQueue } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectQueueLength, selectPlayerStateMemoized, selectIsAdmin, selectControllerName } from '../../redux';
-import { ActionButton } from '../../components/common';
+import { ActionButton, NumberDisplay } from '../../components/common';
 import { SongInfoDisplay } from '../../components/common/SongItem';
 import { queueService } from '../../firebase/services';
 import { debugLog } from '../../utils/logger';
@@ -107,11 +107,7 @@ const Queue: React.FC = () => {
           style={{ '--padding-start': '0px' }}
         >
           {/* Order Number */}
-          <div slot="start" className="ion-text-center" style={{ marginLeft: '-8px', marginRight: '12px' }}>
+          <NumberDisplay number={queueItem.order} />
-            <div className="ion-text-bold ion-color-medium" style={{ fontSize: '1rem', minWidth: '2rem' }}>
-              {queueItem.order}
-            </div>
-          </div>
 
           {/* Song Info with Singer Name on Top */}
           <IonLabel>
@@ -175,11 +171,7 @@ const Queue: React.FC = () => {
       <IonItemSliding key={firstItem.key}>
         <IonItem style={{ '--padding-start': '0px' }}>
           {/* Order Number */}
-          <div slot="start" className="ion-text-center" style={{ marginLeft: '-8px', marginRight: '12px' }}>
+          <NumberDisplay number={firstItem.order} />
-            <div className="ion-text-bold ion-color-medium" style={{ fontSize: '1rem', minWidth: '2rem' }}>
-              {firstItem.order}
-            </div>
-          </div>
 
           {/* Song Info with Singer Name on Top */}
           <IonLabel>

src/features/Singers/Singers.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { IonItem, IonLabel, IonIcon, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonContent, IonInput, IonLabel as IonInputLabel } from '@ionic/react';
 import { trash, add, close } from 'ionicons/icons';
-import { InfiniteScrollList, ActionButton } from '../../components/common';
+import { InfiniteScrollList, ActionButton, NumberDisplay } from '../../components/common';
 import { useSingers } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSingers } from '../../redux';
@@ -47,11 +47,7 @@ const Singers: React.FC = () => {
   const renderSingerItem = (singer: Singer, index: number) => (
     <IonItem detail={false} style={{ '--padding-start': '0px', '--min-height': '60px' }}>
       {/* Order Number */}
-      <div slot="start" className="ion-text-center" style={{ marginLeft: '-8px', marginRight: '12px' }}>
+      <NumberDisplay number={index + 1} />
-        <div className="ion-text-bold ion-color-medium" style={{ fontSize: '1rem', minWidth: '2rem' }}>
-          {index + 1}
-        </div>
-      </div>
 
       {/* Singer Name */}
       <IonLabel>

src/features/SongLists/SongLists.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonChip, IonContent, IonList, IonAccordionGroup, IonAccordion } from '@ionic/react';
+import { IonItem, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonChip, IonContent, IonList, IonAccordionGroup, IonAccordion } from '@ionic/react';
 import { close, list } from 'ionicons/icons';
-import { InfiniteScrollList, SongItem, ListItem } from '../../components/common';
+import { InfiniteScrollList, SongItem, ListItem, TwoLineDisplay, NumberDisplay } from '../../components/common';
 import { useSongLists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongList } from '../../redux';
@@ -110,18 +110,13 @@ const SongLists: React.FC = () => {
                     <IonAccordion key={songKey} value={songKey}>
                       <IonItem slot="header" detail={false} button onClick={() => handleSongItemClick(songKey)}>
                         {/* Number */}
-                        <div slot="start" className="flex-shrink-0 w-12 h-12 flex items-center justify-center text-gray-600 font-medium">
+                        <NumberDisplay number={index + 1} />
-                          {index + 1})
-                        </div>
 
-                        <IonLabel>
+                        {/* Use TwoLineDisplay for consistent formatting */}
-                          <div className="text-sm font-semibold text-gray-900">
+                        <TwoLineDisplay
-                            {songListSong.title}
+                          primaryText={songListSong.title}
-                          </div>
+                          secondaryText={songListSong.artist}
-                          <div className="text-sm italic text-gray-500">
+                        />
-                            {songListSong.artist}
-                          </div>
-                        </IonLabel>
 
                         <IonChip slot="end" color="success">
                           {availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
@@ -152,18 +147,15 @@ const SongLists: React.FC = () => {
                       className="opacity-50"
                     >
                       {/* Number */}
-                      <div slot="start" className="flex-shrink-0 w-12 h-12 flex items-center justify-center text-gray-600 font-medium">
+                      <NumberDisplay number={index + 1} />
-                        {index + 1})
-                      </div>
 
-                      <IonLabel>
+                      {/* Use TwoLineDisplay for consistent formatting with disabled styling */}
-                        <div className="text-sm font-semibold text-gray-400">
+                      <TwoLineDisplay
-                          {songListSong.title}
+                        primaryText={songListSong.title}
-                        </div>
+                        secondaryText={songListSong.artist}
-                        <div className="text-sm italic text-gray-300">
+                        primaryColor="var(--ion-color-medium)"
-                          {songListSong.artist}
+                        secondaryColor="var(--ion-color-light)"
-                        </div>
+                      />
-                      </IonLabel>
                     </IonItem>
                   );
                 }