Adds ability to rename favorite

frontend/src/components/App.tsx

@@ -2,9 +2,10 @@ import React, { useState, useEffect, useCallback, ReactNode } from 'react';
 import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
+import RenameFavoriteModal from './RenameFavoriteModal';
 import { TabView, Tab } from './TabView';
 import { API, getDisplayTitle, PlaylistItem, ServerEvent } from '../api/player';
-import { FaMusic, FaHeart, FaPlus } from 'react-icons/fa';
+import { FaMusic, FaHeart, FaPlus, FaEdit } from 'react-icons/fa';
 import useWebSocket from 'react-use-websocket';
 import classNames from 'classnames';
 
@@ -88,6 +89,8 @@ const App: React.FC = () => {
   const [playlist, setPlaylist] = useState<PlaylistItem[]>([]);
   const [favorites, setFavorites] = useState<PlaylistItem[]>([]);
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.Playlist);
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
+  const [favoriteToRename, setFavoriteToRename] = useState<PlaylistItem | null>(null);
 
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
@@ -256,22 +259,35 @@ const App: React.FC = () => {
   const favoritesAuxControlProvider = (song: PlaylistItem) => {
     const isInPlaylist = playlist.some(p => p.filename === song.filename);
     return (
-      <AuxButton
-        className={classNames({
-          "text-white/40": isInPlaylist,
-          "text-white": !isInPlaylist,
-        })}
-        title={isInPlaylist ? "Remove from playlist" : "Add to playlist"}
-        onClick={() => {
-          if (isInPlaylist) {
-            API.removeFromPlaylist(playlist.findIndex(p => p.filename === song.filename));
-          } else {
-            API.addToPlaylist(song.filename);
-          }
-        }}
-      >
-        <FaPlus />
-      </AuxButton>
+      <div className="flex">
+        <AuxButton
+          className="text-white hover:text-white"
+          title="Rename favorite"
+          onClick={() => {
+            setFavoriteToRename(song);
+            setIsRenameModalOpen(true);
+          }}
+        >
+          <FaEdit />
+        </AuxButton>
+        
+        <AuxButton
+          className={classNames({
+            "text-white/40": isInPlaylist,
+            "text-white": !isInPlaylist,
+          })}
+          title={isInPlaylist ? "Remove from playlist" : "Add to playlist"}
+          onClick={() => {
+            if (isInPlaylist) {
+              API.removeFromPlaylist(playlist.findIndex(p => p.filename === song.filename));
+            } else {
+              API.addToPlaylist(song.filename);
+            }
+          }}
+        >
+          <FaPlus />
+        </AuxButton>
+      </div>
     );
   };
 
@@ -312,9 +328,15 @@ const App: React.FC = () => {
         </TabView>
 
         <AddSongPanel onAddURL={handleAddURL} />
+        
+        <RenameFavoriteModal 
+          isOpen={isRenameModalOpen}
+          onClose={() => setIsRenameModalOpen(false)}
+          favorite={favoriteToRename}
+        />
       </div>
     </div>
   );
 };
 
-export default App;
+export default App;