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

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

Browse Source
This commit is contained in:
mbrucedogs 2025-07-20 18:31:36 -05:00
parent dfb3da4e10
commit b696dbdabd
7 changed files with 93 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/ActionButton.tsx
View File

@ -41,6 +41,8 @@ const ActionButton: React.FC<ActionButtonProps> = ({
}
};
const isIconOnly = icon && iconSlot === ActionButtonIconSlot.ICON_ONLY && !children;
return (
<IonButton
onClick={onClick}
@ -50,11 +52,14 @@ const ActionButton: React.FC<ActionButtonProps> = ({
size={getSize()}
className={className}
style={{
minWidth: '40px',
minWidth: isIconOnly ? '40px' : '40px',
minHeight: '40px',
width: isIconOnly ? '40px' : 'auto',
height: isIconOnly ? '40px' : 'auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
padding: isIconOnly ? '0' : undefined
}}
>
{icon && <IonIcon

21
src/features/Artists/Artists.tsx
View File

@ -1,7 +1,9 @@
import React, { useState } from 'react';
import { IonSearchbar, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent, IonItem } from '@ionic/react';
import { close, list } from 'ionicons/icons';
import { InfiniteScrollList, SongItem, ListItem, NumberDisplay, SongInfo } from '../../components/common';
import { IonSearchbar, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonItem } from '@ionic/react';
import { list } from 'ionicons/icons';
import { InfiniteScrollList, SongItem, ListItem, NumberDisplay, SongInfo, ActionButton } from '../../components/common';
import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
import { Icons } from '../../constants';
import { useArtists } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectSongs } from '../../redux';
@ -97,9 +99,16 @@ const Artists: React.FC = () => {
<IonHeader>
<IonToolbar>
<IonTitle>Songs by {selectedArtist}</IonTitle>
<IonButton slot="end" fill="clear" onClick={handleCloseArtistSongs}>
<IonIcon icon={close} />
</IonButton>
<div slot="end">
<ActionButton
onClick={handleCloseArtistSongs}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="clear"
/>
</div>
</IonToolbar>
</IonHeader>

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

@ -234,20 +234,20 @@ const Queue: React.FC = () => {
return (
<>
<div className="ion-padding ion-text-end">
{isAdmin && (
<ActionButton
onClick={toggleQueueMode}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={queueMode === 'delete' ? reorderThreeOutline : Icons.TRASH}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="outline"
/>
)}
</div>
<div className="ion-padding">
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
{isAdmin && (
<ActionButton
onClick={toggleQueueMode}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={queueMode === 'delete' ? reorderThreeOutline : Icons.TRASH}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="outline"
/>
)}
</div>
{/* First Item (Currently Playing) */}
{renderFirstItem()}

17
src/features/Settings/Settings.tsx
View File

@ -134,13 +134,16 @@ const Settings: React.FC = () => {
<IonHeader>
<IonToolbar>
<IonTitle>Disabled Songs ({filteredDisabledSongs.length})</IonTitle>
<IonButton
slot="end"
fill="clear"
onClick={() => setShowDisabledSongsModal(false)}
>
Close
</IonButton>
<div slot="end">
<ActionButton
onClick={() => setShowDisabledSongsModal(false)}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="clear"
/>
</div>
</IonToolbar>
</IonHeader>

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

@ -74,20 +74,20 @@ const Singers: React.FC = () => {
return (
<>
<div className="ion-padding ion-text-end">
{isAdmin && (
<ActionButton
onClick={handleOpenAddModal}
variant={ActionButtonVariant.PRIMARY}
size={ActionButtonSize.SMALL}
icon={Icons.ADD}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="clear"
/>
)}
</div>
<div className="ion-padding">
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
{isAdmin && (
<ActionButton
onClick={handleOpenAddModal}
variant={ActionButtonVariant.PRIMARY}
size={ActionButtonSize.SMALL}
icon={Icons.ADD}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="solid"
/>
)}
</div>
<InfiniteScrollList<Singer>
items={singers}
isLoading={singersCount === 0}
@ -112,13 +112,16 @@ const Singers: React.FC = () => {
<IonHeader>
<IonToolbar>
<IonTitle>Add New Singer</IonTitle>
<ActionButton
onClick={handleCloseAddModal}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
/>
<div slot="end">
<ActionButton
onClick={handleCloseAddModal}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="clear"
/>
</div>
</IonToolbar>
</IonHeader>

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

@ -1,7 +1,9 @@
import React, { useState, useMemo, useCallback } from '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, TwoLineDisplay, NumberDisplay, SongInfo } from '../../components/common';
import { IonItem, IonModal, IonHeader, IonToolbar, IonTitle, IonChip, IonContent, IonList, IonAccordionGroup, IonAccordion } from '@ionic/react';
import { list } from 'ionicons/icons';
import { InfiniteScrollList, SongItem, ListItem, TwoLineDisplay, NumberDisplay, SongInfo, ActionButton } from '../../components/common';
import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
import { Icons } from '../../constants';
import { useSongLists } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectSongList } from '../../redux';
@ -101,9 +103,16 @@ const SongLists: React.FC = () => {
<IonHeader>
<IonToolbar>
<IonTitle>{finalSelectedList?.title}</IonTitle>
<IonButton slot="end" fill="clear" onClick={handleCloseSongList}>
<IonIcon icon={close} />
</IonButton>
<div slot="end">
<ActionButton
onClick={handleCloseSongList}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="clear"
/>
</div>
</IonToolbar>
</IonHeader>

17
src/features/TopPlayed/Top100.tsx
View File

@ -141,13 +141,16 @@ const Top100: React.FC = () => {
<IonHeader>
<IonToolbar>
<IonTitle>{selectedTopPlayed?.artist}</IonTitle>
<ActionButton
onClick={handleCloseModal}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
/>
<div slot="end">
<ActionButton
onClick={handleCloseModal}
variant={ActionButtonVariant.SECONDARY}
size={ActionButtonSize.SMALL}
icon={Icons.CLOSE}
iconSlot={ActionButtonIconSlot.ICON_ONLY}
fill="clear"
/>
</div>
</IonToolbar>
</IonHeader>