frontend: add scaffolding for favorites tab

frontend/src/components/App.tsx

@@ -2,8 +2,21 @@ import React, { useState, useEffect, useCallback } from 'react';
 import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
+import { TabView, Tab } from './TabView';
 import { API, getDisplayTitle, PlaylistItem } from '../api/player';
 import { useEventWebSocket } from '../hooks/useEventWebsocket';
+import { FaMusic, FaHeart } from 'react-icons/fa';
+
+enum Tabs {
+  Playlist = "playlist",
+  Favorites = "favorites",
+}
+
+const EmptyContent: React.FC<{ label: string}> = ({label}) => (
+  <div className="flex items-center justify-center h-full">
+    <div className="text-white text-2xl font-bold">{label}</div>
+  </div>
+);
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
@@ -12,6 +25,7 @@ const App: React.FC = () => {
   const [volume, setVolume] = useState(100);
   const [volumeSettingIsLocked, setVolumeSettingIsLocked] = useState(false);
   const [songs, setSongs] = useState<PlaylistItem[]>([]);
+  const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.Playlist);
 
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
@@ -122,6 +136,19 @@ const App: React.FC = () => {
     fetchNowPlaying();
   }, [fetchPlaylist, fetchNowPlaying]);
 
+  const playlistContent = (
+    songs.length > 0 ? (
+      <SongTable 
+        songs={songs}
+        isPlaying={isPlaying}
+        onDelete={handleDelete} 
+        onSkipTo={handleSkipTo} 
+      />
+    ) : (
+      <EmptyContent label="Playlist is empty" />
+    )
+  );
+
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
       <div className="bg-violet-900 w-full md:max-w-2xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
@@ -139,18 +166,14 @@ const App: React.FC = () => {
           onVolumeDidChange={() => setVolumeSettingIsLocked(false)}
         />
 
-        {songs.length > 0 ? (
-          <SongTable 
-            songs={songs}
-            isPlaying={isPlaying}
-            onDelete={handleDelete} 
-            onSkipTo={handleSkipTo} 
-          />
-        ) : (
-          <div className="flex items-center justify-center h-full">
-            <div className="text-white text-2xl font-bold">Playlist is empty</div>
-          </div>
-        )}
+        <TabView selectedTab={selectedTab} onTabChange={setSelectedTab}>
+          <Tab label="Playlist" identifier={Tabs.Playlist} icon={<FaMusic />}>
+            {playlistContent}
+          </Tab>
+          <Tab label="Favorites" identifier={Tabs.Favorites} icon={<FaHeart />}>
+            <EmptyContent label="Favorites are not implemented yet" />
+          </Tab>
+        </TabView>
 
         <AddSongPanel onAddURL={handleAddURL} />
       </div>