mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matt Bruce 2025-07-19 12:29:18 -05:00
parent c0f28e3a7d
commit a1dbcd933a
6 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/common/ListItem.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { IonItem, IonIcon, IonChip } from '@ionic/react'; import { IonItem, IonIcon, IonChip } from '@ionic/react';
import { TwoLineDisplay } from './TwoLineDisplay'; import { TwoLineDisplay } from './TwoLineDisplay';
import { NumberDisplay } from './NumberDisplay';
interface ListItemProps { interface ListItemProps {
primaryText: string; primaryText: string;
@ -60,11 +61,7 @@ export const ListItem: React.FC<ListItemProps> = ({
> >
{/* Number (if enabled) */} {/* Number (if enabled) */}
{showNumber && ( {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 */} {/* Main content */}

19
src/components/common/NumberDisplay.tsx Normal file
View File

@ -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>
);
};

3
src/components/common/index.ts
View File

@ -8,4 +8,5 @@ export { default as SongItem, SongInfoDisplay, SongActionButtons } from './SongI
export { default as SongInfo } from './SongInfo'; export { default as SongInfo } from './SongInfo';
export { default as Toast } from './Toast'; export { default as Toast } from './Toast';
export { TwoLineDisplay } from './TwoLineDisplay'; export { TwoLineDisplay } from './TwoLineDisplay';
export { ListItem } from './ListItem'; export { ListItem } from './ListItem';
export { NumberDisplay } from './NumberDisplay';

14
src/features/Queue/Queue.tsx
View File

@ -4,7 +4,7 @@ import { trash, reorderThreeOutline, reorderTwoOutline } from 'ionicons/icons';
import { useQueue } from '../../hooks'; import { useQueue } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectQueueLength, selectPlayerStateMemoized, selectIsAdmin, selectControllerName } 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 { SongInfoDisplay } from '../../components/common/SongItem';
import { queueService } from '../../firebase/services'; import { queueService } from '../../firebase/services';
import { debugLog } from '../../utils/logger'; import { debugLog } from '../../utils/logger';
@ -107,11 +107,7 @@ const Queue: React.FC = () => {
style={{ '--padding-start': '0px' }} style={{ '--padding-start': '0px' }}
> >
{/* Order Number */} {/* 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 */} {/* Song Info with Singer Name on Top */}
<IonLabel> <IonLabel>
@ -175,11 +171,7 @@ const Queue: React.FC = () => {
<IonItemSliding key={firstItem.key}> <IonItemSliding key={firstItem.key}>
<IonItem style={{ '--padding-start': '0px' }}> <IonItem style={{ '--padding-start': '0px' }}>
{/* Order Number */} {/* 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 */} {/* Song Info with Singer Name on Top */}
<IonLabel> <IonLabel>

8
src/features/Singers/Singers.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IonItem, IonLabel, IonIcon, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonContent, IonInput, IonLabel as IonInputLabel } from '@ionic/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 { trash, add, close } from 'ionicons/icons';
import { InfiniteScrollList, ActionButton } from '../../components/common'; import { InfiniteScrollList, ActionButton, NumberDisplay } from '../../components/common';
import { useSingers } from '../../hooks'; import { useSingers } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectSingers } from '../../redux'; import { selectSingers } from '../../redux';
@ -47,11 +47,7 @@ const Singers: React.FC = () => {
const renderSingerItem = (singer: Singer, index: number) => ( const renderSingerItem = (singer: Singer, index: number) => (
<IonItem detail={false} style={{ '--padding-start': '0px', '--min-height': '60px' }}> <IonItem detail={false} style={{ '--padding-start': '0px', '--min-height': '60px' }}>
{/* Order Number */} {/* 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 */} {/* Singer Name */}
<IonLabel> <IonLabel>

40
src/features/SongLists/SongLists.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useMemo, useCallback } from 'react'; 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 { 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 { useSongLists } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectSongList } from '../../redux'; import { selectSongList } from '../../redux';
@ -110,18 +110,13 @@ const SongLists: React.FC = () => {
<IonAccordion key={songKey} value={songKey}> <IonAccordion key={songKey} value={songKey}>
<IonItem slot="header" detail={false} button onClick={() => handleSongItemClick(songKey)}> <IonItem slot="header" detail={false} button onClick={() => handleSongItemClick(songKey)}>
{/* Number */} {/* 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"> <IonChip slot="end" color="success">
{availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''} {availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
@ -152,18 +147,15 @@ const SongLists: React.FC = () => {
className="opacity-50" className="opacity-50"
> >
{/* Number */} {/* 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> </IonItem>
); );
} }