From 3e143dade915f820ddeb1f49d3680ae23b346ac4 Mon Sep 17 00:00:00 2001
From: Matt Bruce <mbrucedogs@gmail.com>
Date: Fri, 18 Jul 2025 16:30:45 -0500
Subject: [PATCH] Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

---
 src/features/Artists/Artists.tsx     | 50 ++++++++++------------------
 src/features/Queue/Queue.tsx         |  2 +-
 src/features/Singers/Singers.tsx     | 11 ++++--
 src/features/SongLists/SongLists.tsx |  2 ++
 src/features/TopPlayed/Top100.tsx    |  2 ++
 src/index.css                        |  7 ++++
 6 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/features/Artists/Artists.tsx b/src/features/Artists/Artists.tsx
index 5877cc8..08b2eaf 100644
--- a/src/features/Artists/Artists.tsx
+++ b/src/features/Artists/Artists.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent } from '@ionic/react';
-import { close, add, heart, heartOutline, list } from 'ionicons/icons';
-import { InfiniteScrollList } from '../../components/common';
+import { IonSearchbar, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent } from '@ionic/react';
+import { close, list } from 'ionicons/icons';
+import { InfiniteScrollList, SongItem } from '../../components/common';
 import { useArtists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongs } from '../../redux';
@@ -82,7 +82,12 @@ const Artists: React.FC = () => {
         />
 
         {/* Artist Songs Modal */}
-        <IonModal isOpen={!!selectedArtist} onDidDismiss={handleCloseArtistSongs}>
+        <IonModal 
+          isOpen={!!selectedArtist} 
+          onDidDismiss={handleCloseArtistSongs}
+          breakpoints={[0, 0.5, 0.8]}
+          initialBreakpoint={0.8}
+        >
           <IonHeader>
             <IonToolbar>
               <IonTitle>Songs by {selectedArtist}</IonTitle>
@@ -93,36 +98,17 @@ const Artists: React.FC = () => {
           </IonHeader>
           
           <IonContent>
-            <IonList>
+            <div className="p-4">
               {selectedArtistSongs.map((song) => (
-                <IonItem key={song.key}>
-                  <IonLabel>
-                    <h3 className="text-sm font-medium text-gray-900">
-                      {song.title}
-                    </h3>
-                    <p className="text-sm text-gray-500">
-                      {song.artist}
-                    </p>
-                  </IonLabel>
-                  <div slot="end" className="flex gap-2">
-                    <IonButton
-                      fill="clear"
-                      size="small"
-                      onClick={() => handleAddToQueue(song)}
-                    >
-                      <IonIcon icon={add} slot="icon-only" />
-                    </IonButton>
-                    <IonButton
-                      fill="clear"
-                      size="small"
-                      onClick={() => handleToggleFavorite(song)}
-                    >
-                      <IonIcon icon={song.favorite ? heart : heartOutline} slot="icon-only" />
-                    </IonButton>
-                  </div>
-                </IonItem>
+                <SongItem
+                  key={song.key}
+                  song={song}
+                  context="search"
+                  onAddToQueue={() => handleAddToQueue(song)}
+                  onToggleFavorite={() => handleToggleFavorite(song)}
+                />
               ))}
-            </IonList>
+            </div>
           </IonContent>
         </IonModal>
       </div>
diff --git a/src/features/Queue/Queue.tsx b/src/features/Queue/Queue.tsx
index 94699f6..c27bf8a 100644
--- a/src/features/Queue/Queue.tsx
+++ b/src/features/Queue/Queue.tsx
@@ -219,7 +219,7 @@ const Queue: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-end items-center mb-4 pr-4 right-button-container">
 
         {isAdmin && (
           <IonButton
diff --git a/src/features/Singers/Singers.tsx b/src/features/Singers/Singers.tsx
index b0776fb..62b8863 100644
--- a/src/features/Singers/Singers.tsx
+++ b/src/features/Singers/Singers.tsx
@@ -70,14 +70,14 @@ const Singers: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-end items-center mb-4 pr-4 right-button-container">
         {isAdmin && (
           <IonButton 
             fill="clear" 
             onClick={handleOpenAddModal}
             className="text-primary"
           >
-            <IonIcon icon={add} slot="icon-only" />
+            <IonIcon icon={add} slot="icon-only" size="large" />
           </IonButton>
         )}
       </div>
@@ -97,7 +97,12 @@ const Singers: React.FC = () => {
       </div>
 
       {/* Add Singer Modal */}
-      <IonModal isOpen={showAddModal} onDidDismiss={handleCloseAddModal}>
+      <IonModal 
+        isOpen={showAddModal} 
+        onDidDismiss={handleCloseAddModal}
+        breakpoints={[0, 0.5, 0.8]}
+        initialBreakpoint={0.8}
+      >
         <IonHeader>
           <IonToolbar>
             <IonTitle>Add New Singer</IonTitle>
diff --git a/src/features/SongLists/SongLists.tsx b/src/features/SongLists/SongLists.tsx
index a4d35ee..9bad097 100644
--- a/src/features/SongLists/SongLists.tsx
+++ b/src/features/SongLists/SongLists.tsx
@@ -90,6 +90,8 @@ const SongLists: React.FC = () => {
         <IonModal 
           isOpen={!!finalSelectedList} 
           onDidDismiss={handleCloseSongList}
+          breakpoints={[0, 0.5, 0.8]}
+          initialBreakpoint={0.8}
         >
           <IonHeader>
             <IonToolbar>
diff --git a/src/features/TopPlayed/Top100.tsx b/src/features/TopPlayed/Top100.tsx
index d1cf3fb..8d8f3d9 100644
--- a/src/features/TopPlayed/Top100.tsx
+++ b/src/features/TopPlayed/Top100.tsx
@@ -137,6 +137,8 @@ const Top100: React.FC = () => {
       <IonModal 
         isOpen={!!selectedTopPlayed} 
         onDidDismiss={handleCloseModal}
+        breakpoints={[0, 0.5, 0.8]}
+        initialBreakpoint={0.8}
       >
         <IonHeader>
           <IonToolbar>
diff --git a/src/index.css b/src/index.css
index 3f53927..dc1d3d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,6 +85,13 @@ ion-item {
   margin-left: auto !important;
 }
 
+/* Right-justified button container with padding */
+.right-button-container {
+  padding-right: 16px !important;
+  padding-top: 20px !important;
+  padding-bottom: 10px !important;
+}
+
 /* Ensure accordion content is visible */
 ion-accordion {
   --background: transparent;