"use client"; import { Home, Search, Library, Plus, Heart } from "lucide-react"; import Link from "next/link"; import { usePlayer } from "@/context/PlayerContext"; import { useState } from "react"; import CreatePlaylistModal from "./CreatePlaylistModal"; import { dbService } from "@/services/db"; import { useLibrary } from "@/context/LibraryContext"; import Logo from "./Logo"; import CoverImage from "./CoverImage"; export default function Sidebar() { const { likedTracks } = usePlayer(); const { userPlaylists, libraryItems, refreshLibrary: refresh, activeFilter, setActiveFilter } = useLibrary(); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const handleCreatePlaylist = async (name: string) => { await dbService.createPlaylist(name); refresh(); }; const handleDeletePlaylist = async (e: React.MouseEvent, id: string) => { e.preventDefault(); e.stopPropagation(); if (confirm("Delete this playlist?")) { await dbService.deletePlaylist(id); refresh(); } }; // Filtering Logic const showPlaylists = activeFilter === 'all' || activeFilter === 'playlists'; const showArtists = activeFilter === 'all' || activeFilter === 'artists'; const showAlbums = activeFilter === 'all' || activeFilter === 'albums'; const artists = libraryItems.filter(i => i.type === 'Artist'); const albums = libraryItems.filter(i => i.type === 'Album'); const browsePlaylists = libraryItems.filter(i => i.type === 'Playlist'); return ( ); }