feat: implement favorites functionality across playlists components

src/components/playlists/PlaylistsHeader.tsx

@@ -8,7 +8,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import type { PlaylistSortField, SortOrder } from '@/lib/api/services/playlists'
-import { Plus, RefreshCw, Search, SortAsc, SortDesc, X } from 'lucide-react'
+import { Heart, Plus, RefreshCw, Search, SortAsc, SortDesc, X } from 'lucide-react'
 
 interface PlaylistsHeaderProps {
   searchQuery: string
@@ -22,6 +22,8 @@ interface PlaylistsHeaderProps {
   loading: boolean
   error: string | null
   playlistCount: number
+  showFavoritesOnly: boolean
+  onFavoritesToggle: (show: boolean) => void
 }
 
 export function PlaylistsHeader({
@@ -36,6 +38,8 @@ export function PlaylistsHeader({
   loading,
   error,
   playlistCount,
+  showFavoritesOnly,
+  onFavoritesToggle,
 }: PlaylistsHeaderProps) {
   return (
     <>
@@ -50,7 +54,10 @@ export function PlaylistsHeader({
         <div className="flex items-center gap-4">
           {!loading && !error && (
             <div className="text-sm text-muted-foreground">
-              {playlistCount} playlist{playlistCount !== 1 ? 's' : ''}
+              {showFavoritesOnly 
+                ? `${playlistCount} favorite playlist${playlistCount !== 1 ? 's' : ''}`
+                : `${playlistCount} playlist${playlistCount !== 1 ? 's' : ''}`
+              }
             </div>
           )}
           <Button onClick={onCreateClick}>
@@ -116,6 +123,15 @@ export function PlaylistsHeader({
             )}
           </Button>
 
+          <Button
+            variant={showFavoritesOnly ? "default" : "outline"}
+            size="icon"
+            onClick={() => onFavoritesToggle(!showFavoritesOnly)}
+            title={showFavoritesOnly ? "Show all playlists" : "Show only favorites"}
+          >
+            <Heart className={`h-4 w-4 ${showFavoritesOnly ? 'fill-current' : ''}`} />
+          </Button>
+
           <Button
             variant="outline"
             size="icon"