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

---
 src/components/common/SongItem.tsx | 12 +++++---
 src/features/Settings/Settings.tsx | 45 +++++++++++-------------------
 src/types/index.ts                 |  1 +
 3 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/components/common/SongItem.tsx b/src/components/common/SongItem.tsx
index f8b0300..1e989a8 100644
--- a/src/components/common/SongItem.tsx
+++ b/src/components/common/SongItem.tsx
@@ -27,10 +27,12 @@ export const SongInfoDisplay: React.FC<{
   song: Song; 
   showPath?: boolean;
   showCount?: boolean;
+  showFullPath?: boolean;
 }> = React.memo(({ 
   song, 
   showPath = false,
-  showCount = false
+  showCount = false,
+  showFullPath = false
 }) => {
   return (
     <IonLabel>
@@ -56,7 +58,7 @@ export const SongInfoDisplay: React.FC<{
       >
         {song.artist}
       </div>
-      {/* Show filename if showPath is true */}
+      {/* Show filename or full path if showPath is true */}
       {showPath && song.path && (
         <div 
           className="ion-text-sm ion-color-medium"
@@ -65,7 +67,7 @@ export const SongInfoDisplay: React.FC<{
             color: 'var(--ion-color-medium)'
           }}
         >
-          {extractFilename(song.path)}
+          {showFullPath ? song.path : extractFilename(song.path)}
         </div>
       )}
       {/* Show play count if showCount is true */}
@@ -200,7 +202,8 @@ const SongItem: React.FC<SongItemProps> = React.memo(({
   showAddButton,
   showRemoveButton,
   showDeleteButton,
-  showFavoriteButton
+  showFavoriteButton,
+  showFullPath
 }) => {
   // Get current state from Redux
   const queue = useAppSelector(selectQueue);
@@ -277,6 +280,7 @@ const SongItem: React.FC<SongItemProps> = React.memo(({
         song={song} 
         showPath={shouldShowPath} 
         showCount={shouldShowCount} 
+        showFullPath={showFullPath}
       />
       
       {showActions && (
diff --git a/src/features/Settings/Settings.tsx b/src/features/Settings/Settings.tsx
index 8a62aaa..61997d4 100644
--- a/src/features/Settings/Settings.tsx
+++ b/src/features/Settings/Settings.tsx
@@ -4,7 +4,7 @@ import { ban } from 'ionicons/icons';
 import { useAppSelector } from '../../redux';
 import { selectIsAdmin, selectSettings } from '../../redux';
 import { useDisabledSongs } from '../../hooks';
-import { InfiniteScrollList, ActionButton } from '../../components/common';
+import { InfiniteScrollList, ActionButton, SongItem } from '../../components/common';
 import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
 import { Icons } from '../../constants';
 import { filterSongs } from '../../utils/dataProcessing';
@@ -166,34 +166,23 @@ const Settings: React.FC = () => {
               hasMore={false}
               onLoadMore={() => {}}
               renderItem={(song) => (
-                <IonItem>
-                  <IonLabel>
-                    <h3 className="text-sm font-medium text-gray-900">
-                      {song.title || 'Unknown Title'}
-                    </h3>
-                    <p className="text-sm text-gray-500">
-                      {song.artist || 'Unknown Artist'}
-                    </p>
-                    <p className="text-xs text-gray-400 break-words">
-                      {song.path}
-                    </p>
-                    <p className="text-xs text-gray-400">
-                      Disabled: {new Date(song.disabledAt || '').toLocaleDateString()}
-                    </p>
-                  </IonLabel>
-                  
-                  <div slot="end" className="flex items-center gap-2 ml-2">
-                    <div onClick={(e) => e.stopPropagation()}>
-                      <ActionButton
-                        onClick={() => handleRemoveDisabledSong(song)}
-                        variant={ActionButtonVariant.DANGER}
-                        size={ActionButtonSize.SMALL}
-                        icon={Icons.TRASH}
-                        iconSlot={ActionButtonIconSlot.ICON_ONLY}
-                      />
-                    </div>
+                <div className="flex items-center">
+                  <div className="flex-1">
+                    <SongItem
+                      song={song}
+                      context="history"
+                      showDeleteButton={true}
+                      showInfoButton={false}
+                      showAddButton={false}
+                      showFavoriteButton={false}
+                      onDeleteItem={() => handleRemoveDisabledSong(song)}
+                      showFullPath={true}
+                    />
                   </div>
-                </IonItem>
+                  <div className="flex items-center gap-2 ml-2">
+                    {/* Delete button is now handled by SongItem */}
+                  </div>
+                </div>
               )}
               emptyTitle="No disabled songs"
               emptyMessage="Songs marked as disabled will appear here"
diff --git a/src/types/index.ts b/src/types/index.ts
index 94e35bc..f3a7b2f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -177,6 +177,7 @@ export interface SongItemProps {
   showRemoveButton?: boolean;
   showDeleteButton?: boolean;
   showFavoriteButton?: boolean;
+  showFullPath?: boolean;
 }
 
 export interface LayoutProps {