Index: frontend/src/components/PlaylistDropdown.tsx =================================================================== --- frontend/src/components/PlaylistDropdown.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) +++ frontend/src/components/PlaylistDropdown.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -0,0 +1,252 @@ +import { useEffect, useRef, useState } from "react"; +import { createPortal } from "react-dom"; +import axiosInstance from "../api/axiosInstance"; +import { useCreatedPlaylists } from "../context/playlistContext"; + +interface PlaylistDropdownProps { + songId: number; + isOpen: boolean; + onClose: () => void; + position?: { top: number; left: number }; + + usePortal?: boolean; + + direction?: "above" | "below"; + + onCreateNewPlaylist?: () => void; +} + +const PlaylistDropdown = ({ + songId, + isOpen, + onClose, + position, + usePortal = false, + direction = "above", + onCreateNewPlaylist, +}: PlaylistDropdownProps) => { + const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists(); + const [containingPlaylistIds, setContainingPlaylistIds] = useState( + [], + ); + const [loading, setLoading] = useState(false); + const [processingPlaylistId, setProcessingPlaylistId] = useState< + number | null + >(null); + const dropdownRef = useRef(null); + + useEffect(() => { + if (isOpen && songId) { + const fetchPlaylistIds = async () => { + setLoading(true); + setContainingPlaylistIds([]); + try { + const response = await axiosInstance.get( + `/playlists/song/${songId}`, + ); + setContainingPlaylistIds(response.data); + } catch (error) { + console.error("Failed to fetch song presence:", error); + } finally { + setLoading(false); + } + }; + fetchPlaylistIds(); + } else { + setContainingPlaylistIds([]); + } + }, [isOpen, songId]); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + onClose(); + } + }; + + if (isOpen) { + document.addEventListener("mousedown", handleClickOutside); + } + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [isOpen, onClose]); + + const handleTogglePlaylist = async (playlistId: number, songId: number) => { + if (processingPlaylistId !== null) return; + + setProcessingPlaylistId(playlistId); + + try { + const response = await axiosInstance.post<{ + playlistId: number; + isSongAddedToPlaylist: boolean; + }>(`/playlists/${playlistId}/song/${songId}`); + + const { playlistId: returnedPlaylistId, isSongAddedToPlaylist } = + response.data; + + if (isSongAddedToPlaylist) { + setContainingPlaylistIds((prev) => + prev.includes(returnedPlaylistId) + ? prev + : [...prev, returnedPlaylistId], + ); + } else { + setContainingPlaylistIds((prev) => + prev.filter((id) => id !== returnedPlaylistId), + ); + } + } catch (error) { + console.error("Failed to toggle playlist:", error); + } finally { + refreshPlaylists(true); + setTimeout(() => { + setProcessingPlaylistId(null); + }, 500); + } + }; + + const handleCreateNew = () => { + onCreateNewPlaylist?.(); + onClose(); + }; + + if (!isOpen) return null; + + const inlinePositionClass = + direction === "below" + ? "absolute left-0 top-full mt-2" + : "absolute right-0 bottom-full mb-2"; + + const dropdownContent = ( +
e.stopPropagation()} + > +
+ Add to playlist +
+ + {loading ? ( +
+
+
+ ) : createdPlaylists && createdPlaylists.length > 0 ? ( + createdPlaylists.map((playlist) => { + const isProcessing = processingPlaylistId === playlist.id; + const isChecked = containingPlaylistIds.includes(playlist.id); + + return ( + + ); + }) + ) : ( +
+ No playlists created +
+ )} + + +
+ ); + + return usePortal + ? createPortal(dropdownContent, document.body) + : dropdownContent; +}; + +export default PlaylistDropdown; Index: frontend/src/components/Sidebar.tsx =================================================================== --- frontend/src/components/Sidebar.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/components/Sidebar.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -48,5 +48,5 @@ await axiosInstance.post("/playlists", { name: playlistName }); toast.success("Playlist created successfully!"); - await refreshPlaylists(); + await refreshPlaylists(false); } catch (error) { toast.error(getErrorMessage(error)); Index: frontend/src/components/SongItem.tsx =================================================================== --- frontend/src/components/SongItem.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/components/SongItem.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -1,259 +1,248 @@ -import { useEffect, useRef, useState } from "react"; +import { useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import { baseURL } from "../api/axiosInstance"; import { usePlayer } from "../context/playerContext"; import { toEmbedUrl } from "../utils/utils"; +import PlaylistDropdown from "./PlaylistDropdown"; export interface SongItemData { - id: number; - title: string; - cover?: string | null; - genre?: string; - link?: string | null; - releasedBy?: string; - isLikedByCurrentUser?: boolean; + id: number; + title: string; + cover?: string | null; + genre?: string; + link?: string | null; + releasedBy?: string; + isLikedByCurrentUser?: boolean; } interface SongItemProps { - song: SongItemData; - /** Optional label shown before the artist, e.g. "Song" for search results */ - label?: string; - /** Optional role badge for artist contributions, e.g. "PERFORMER" */ - role?: string; - /** Optional index number for playlist/collection views */ - index?: number; - /** Callback when the like button is clicked */ - onLikeToggle?: (songId: number) => void; + song: SongItemData; + /** Optional label shown before the artist, e.g. "Song" for search results */ + label?: string; + /** Optional role badge for artist contributions, e.g. "PERFORMER" */ + role?: string; + /** Optional index number for playlist/collection views */ + index?: number; + /** Callback when the like button is clicked */ + onLikeToggle?: (songId: number) => void; + /** Controlled: whether the playlist dropdown is open */ + isDropdownOpen?: boolean; + /** Controlled: callback when dropdown should open/close */ + onDropdownToggle?: (songId: number | null) => void; } const ROLE_COLORS: { [key: string]: string } = { - COMPOSER: "bg-purple-500/20 text-purple-300", - PERFORMER: "bg-blue-500/20 text-blue-300", - PRODUCER: "bg-green-500/20 text-green-300", - MAIN_VOCAL: "bg-pink-500/20 text-pink-300", + COMPOSER: "bg-purple-500/20 text-purple-300", + PERFORMER: "bg-blue-500/20 text-blue-300", + PRODUCER: "bg-green-500/20 text-green-300", + MAIN_VOCAL: "bg-pink-500/20 text-pink-300", }; const SongItem = ({ - song, - label, - role, - index, - onLikeToggle, + song, + label, + role, + index, + onLikeToggle, + isDropdownOpen, + onDropdownToggle, }: SongItemProps) => { - const navigate = useNavigate(); - const { play, currentSong } = usePlayer(); - const [playlistOpen, setPlaylistOpen] = useState(false); - const dropdownRef = useRef(null); - - const isPlaying = currentSong?.id === song.id; - - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if ( - dropdownRef.current && - !dropdownRef.current.contains(event.target as Node) - ) { - setPlaylistOpen(false); - } - }; - if (playlistOpen) { - document.addEventListener("mousedown", handleClickOutside); - } - return () => document.removeEventListener("mousedown", handleClickOutside); - }, [playlistOpen]); - - const handleAddToPlaylist = (playlistName: string) => { - console.log(`Adding song ${song.id} to ${playlistName}`); - // TODO: Implement actual API call - setPlaylistOpen(false); - }; - - const handleCreateNewPlaylist = () => { - console.log(`Creating new playlist for song ${song.id}`); - // TODO: Implement actual playlist creation - setPlaylistOpen(false); - }; - - // Build subtitle - const subtitleParts: string[] = []; - if (label) subtitleParts.push(label); - if (song.releasedBy) subtitleParts.push(song.releasedBy); - const subtitle = subtitleParts.join(" • "); - - return ( -
navigate(`/songs/${song.id}`)} - className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group" - > - {/* Optional index */} - {index != null && ( - - {index} - - )} - - {/* Cover */} - {song.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> - - {/* Title & subtitle */} -
-

- {song.title} -

- {subtitle && ( -

{subtitle}

- )} -
- - {/* Role badge (artist contributions) */} - {role && ( - - )} - - {/* Genre */} - {song.genre && ( - - {song.genre} - - )} - - {/* Play button */} - {song.link && ( - - )} - - {/* Like button */} - {onLikeToggle && ( - - )} - - {/* Three-dot menu */} -
- - - {playlistOpen && ( -
-
- Add to playlist -
- - - -
- )} -
-
- ); + const navigate = useNavigate(); + const { play, currentSong } = usePlayer(); + const [internalOpen, setInternalOpen] = useState(false); + const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 }); + const [dropdownDirection, setDropdownDirection] = useState<"above" | "below">( + "below", + ); + const buttonRef = useRef(null); + + const playlistOpen = isDropdownOpen ?? internalOpen; + const setPlaylistOpen = (open: boolean) => { + if (onDropdownToggle) { + onDropdownToggle(open ? song.id : null); + } else { + setInternalOpen(open); + } + }; + + const isPlaying = currentSong?.id === song.id; + + const handleCreateNewPlaylist = () => { + console.log(`Creating new playlist for song ${song.id}`); + // TODO: Implement actual playlist creation + setPlaylistOpen(false); + }; + + const subtitleParts: string[] = []; + if (label) subtitleParts.push(label); + if (song.releasedBy) subtitleParts.push(song.releasedBy); + const subtitle = subtitleParts.join(" • "); + + return ( +
navigate(`/songs/${song.id}`)} + onMouseEnter={() => { + if (onDropdownToggle && !playlistOpen) { + onDropdownToggle(null); + } + }} + className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group" + > + {/* Optional index */} + {index != null && ( + + {index} + + )} + + {/* Cover */} + {song.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + {/* Title & subtitle */} +
+

+ {song.title} +

+ {subtitle && ( +

{subtitle}

+ )} +
+ + {/* Role badge (artist contributions) */} + {role && ( + + )} + + {/* Genre */} + {song.genre && ( + + {song.genre} + + )} + + {/* Play button */} + {song.link && ( + + )} + + {/* Like button */} + {onLikeToggle && ( + + )} + + {/* Three-dot menu */} +
+ + + setPlaylistOpen(false)} + position={dropdownPosition} + usePortal={true} + direction={dropdownDirection} + onCreateNewPlaylist={handleCreateNewPlaylist} + /> +
+
+ ); }; Index: frontend/src/components/userProfile/ArtistView.tsx =================================================================== --- frontend/src/components/userProfile/ArtistView.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/components/userProfile/ArtistView.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -8,144 +8,149 @@ interface ArtistViewProps { - contributions: ArtistContribution[]; + contributions: ArtistContribution[]; } const ArtistView = ({ contributions }: ArtistViewProps) => { - const navigate = useNavigate(); - const [items, setItems] = useState(contributions); + const navigate = useNavigate(); + const [items, setItems] = useState(contributions); + const [openDropdownSongId, setOpenDropdownSongId] = useState( + null, + ); - const albums = items.filter((c) => c.entityType === "ALBUM"); - const songs = items.filter((c) => c.entityType === "SONG"); + const albums = items.filter((c) => c.entityType === "ALBUM"); + const songs = items.filter((c) => c.entityType === "SONG"); - const getRoleColor = (role: string) => { - const colors: { [key: string]: string } = { - COMPOSER: "bg-purple-500/20 text-purple-300", - PERFORMER: "bg-blue-500/20 text-blue-300", - PRODUCER: "bg-green-500/20 text-green-300", - MAIN_VOCAL: "bg-pink-500/20 text-pink-300", - }; - return colors[role] || "bg-white/10 text-gray-300"; - }; + const getRoleColor = (role: string) => { + const colors: { [key: string]: string } = { + COMPOSER: "bg-purple-500/20 text-purple-300", + PERFORMER: "bg-blue-500/20 text-blue-300", + PRODUCER: "bg-green-500/20 text-green-300", + MAIN_VOCAL: "bg-pink-500/20 text-pink-300", + }; + return colors[role] || "bg-white/10 text-gray-300"; + }; - const handleLike = async (id: number, title: string) => { - try { - const response = await axiosInstance.post(`/musical-entity/${id}/like`); - const data = response.data; + const handleLike = async (id: number, title: string) => { + try { + const response = await axiosInstance.post(`/musical-entity/${id}/like`); + const data = response.data; - setItems((prevItems) => - prevItems.map((item) => - item.id === data.entityId - ? { ...item, isLikedByCurrentUser: data.isLiked } - : item, - ), - ); - toast.success( - data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, - ); - } catch (err: any) { - toast.error(err.response?.data?.error || "Failed to like the item"); - } - }; + setItems((prevItems) => + prevItems.map((item) => + item.id === data.entityId + ? { ...item, isLikedByCurrentUser: data.isLiked } + : item, + ), + ); + toast.success( + data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, + ); + } catch (err: any) { + toast.error(err.response?.data?.error || "Failed to like the item"); + } + }; - return ( -
- {albums.length > 0 && ( -
-
- -

Albums

-
-
- {albums.map((album) => ( -
navigate(`/collection/album/${album.id}`)} - > -
- {album.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> + return ( +
+ {albums.length > 0 && ( +
+
+ +

Albums

+
+
+ {albums.map((album) => ( +
navigate(`/collection/album/${album.id}`)} + > +
+ {album.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> - + -
- - {album.role.replace("_", " ")} - -
-
-

- {album.title} -

-
- ))} -
-
- )} +
+ + {album.role.replace("_", " ")} + +
+
+

+ {album.title} +

+
+ ))} +
+
+ )} - {songs.length > 0 && ( -
-
- -

Songs

-
-
- {songs.map((song) => ( - handleLike(song.id, song.title)} - /> - ))} -
-
- )} + {songs.length > 0 && ( +
+
+ +

Songs

+
+
+ {songs.map((song) => ( + handleLike(song.id, song.title)} + isDropdownOpen={openDropdownSongId === song.id} + onDropdownToggle={setOpenDropdownSongId} + /> + ))} +
+
+ )} - {contributions.length === 0 && ( -
- -

No contributions yet

-

Start creating music to see it here

-
- )} -
- ); + {contributions.length === 0 && ( +
+ +

No contributions yet

+

Start creating music to see it here

+
+ )} +
+ ); }; Index: frontend/src/components/userProfile/ListenerView.tsx =================================================================== --- frontend/src/components/userProfile/ListenerView.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/components/userProfile/ListenerView.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -25,4 +25,7 @@ const [createdItems, setCreatedItems] = useState(createdPlaylists); const [savedItems, setSavedItems] = useState(savedPlaylists); + const [openDropdownSongId, setOpenDropdownSongId] = useState( + null, + ); const likedSongs = items.filter((e) => e.type === "SONG"); @@ -258,4 +261,6 @@ index={index + 1} onLikeToggle={() => handleLike(song.id, song.title)} + isDropdownOpen={openDropdownSongId === song.id} + onDropdownToggle={setOpenDropdownSongId} /> ))} Index: frontend/src/context/playlistContext.tsx =================================================================== --- frontend/src/context/playlistContext.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/context/playlistContext.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -17,5 +17,5 @@ setCreatedPlaylists: Dispatch>; isLoading: boolean; - refreshPlaylists: () => Promise; + refreshPlaylists: (addedSong: boolean) => Promise; } @@ -28,5 +28,5 @@ setCreatedPlaylists: () => {}, isLoading: false, - refreshPlaylists: async () => {}, + refreshPlaylists: async (addedSong: boolean) => {}, }); @@ -38,6 +38,8 @@ const [isLoading, setIsLoading] = useState(false); - const fetchCreatedPlaylists = async () => { - setIsLoading(true); + const fetchCreatedPlaylists = async (addedSong: boolean) => { + if (!addedSong) { + setIsLoading(true); + } try { const data = await axiosInstance.get("/playlists/user"); @@ -52,5 +54,5 @@ useEffect(() => { if (user) { - fetchCreatedPlaylists(); + fetchCreatedPlaylists(false); } else { setCreatedPlaylists(undefined); Index: frontend/src/pages/LandingPage.tsx =================================================================== --- frontend/src/pages/LandingPage.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/pages/LandingPage.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -1,5 +1,6 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import axiosInstance, { baseURL } from "../api/axiosInstance"; +import PlaylistDropdown from "../components/PlaylistDropdown"; import AlbumResult from "../components/search/AlbumResult"; import SongResult from "../components/search/SongResult"; @@ -7,568 +8,503 @@ import { usePlayer } from "../context/playerContext"; import type { - Album, - BaseNonAdminUser, - SearchCategory, - Song, + Album, + BaseNonAdminUser, + SearchCategory, + Song, } from "../utils/types"; import { toEmbedUrl } from "../utils/utils"; const CATEGORIES: { value: SearchCategory; label: string }[] = [ - { value: "songs", label: "Songs" }, - { value: "albums", label: "Albums" }, - { value: "artists", label: "Artists" }, - { value: "users", label: "Users" }, + { value: "songs", label: "Songs" }, + { value: "albums", label: "Albums" }, + { value: "artists", label: "Artists" }, + { value: "users", label: "Users" }, ]; const LandingPage = () => { - const navigate = useNavigate(); - const { play, currentSong } = usePlayer(); - const [songs, setSongs] = useState([]); - const [loading, setLoading] = useState(true); - - // search state - const [searchInput, setSearchInput] = useState(""); - const [activeQuery, setActiveQuery] = useState(""); - const [searchCategory, setSearchCategory] = useState("songs"); - const [searchResults, setSearchResults] = useState([]); - const [searchLoading, setSearchLoading] = useState(false); - const [hasSearched, setHasSearched] = useState(false); - - // playlist dropdown state - const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState< - number | null - >(null); - const playlistDropdownRefs = useRef<{ [key: number]: HTMLDivElement | null }>( - {}, - ); - - useEffect(() => { - const fetchSongs = async () => { - try { - const response = await axiosInstance.get("/songs/top"); - setSongs(response.data); - } catch (error) { - console.error("Error fetching songs:", error); - } finally { - setLoading(false); - } - }; - fetchSongs(); - }, []); - - // Handle click outside for playlist dropdown - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (openPlaylistDropdown !== null) { - const ref = playlistDropdownRefs.current[openPlaylistDropdown]; - if (ref && !ref.contains(event.target as Node)) { - setOpenPlaylistDropdown(null); - } - } - }; - - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, [openPlaylistDropdown]); - - const toggleLike = async (songId: number) => { - try { - await axiosInstance.post(`/musical-entity/${songId}/like`); - setSongs((prevSongs) => - prevSongs.map((song) => - song.id === songId - ? { ...song, isLikedByCurrentUser: !song.isLikedByCurrentUser } - : song, - ), - ); - } catch (error) { - console.error("Error toggling like:", error); - } - }; - - const togglePlaylistDropdown = (songId: number) => { - setOpenPlaylistDropdown((prev) => (prev === songId ? null : songId)); - }; - - const handleAddToPlaylist = (songId: number, playlistName: string) => { - console.log(`Adding song ${songId} to ${playlistName}`); - // TODO: Implement actual API call - setOpenPlaylistDropdown(null); - }; - - const handleCreateNewPlaylist = (songId: number) => { - console.log(`Creating new playlist for song ${songId}`); - // TODO: Implement actual playlist creation - setOpenPlaylistDropdown(null); - }; - - const performSearch = async (query: string, category: SearchCategory) => { - if (!query.trim()) return; - - setSearchLoading(true); - setHasSearched(true); - setActiveQuery(query); - setSearchCategory(category); - - try { - let endpoint = ""; - switch (category) { - case "songs": - endpoint = `/songs/search?q=${encodeURIComponent(query)}`; - break; - case "albums": - endpoint = `/albums/search?q=${encodeURIComponent(query)}`; - break; - case "artists": - endpoint = `/users/search?type=ARTIST&q=${encodeURIComponent(query)}`; - break; - case "users": - endpoint = `/users/search?type=LISTENER&q=${encodeURIComponent(query)}`; - break; - } - - const response = await axiosInstance.get(endpoint); - setSearchResults(response.data); - } catch (error) { - console.error("Search error:", error); - setSearchResults([]); - } finally { - setSearchLoading(false); - } - }; - - const handleSearch = () => { - performSearch(searchInput, searchCategory); - }; - - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - handleSearch(); - } - }; - - const handleCategorySwitch = (category: SearchCategory) => { - performSearch(activeQuery, category); - }; - - const clearSearch = () => { - setSearchInput(""); - setActiveQuery(""); - setHasSearched(false); - setSearchResults([]); - }; - - const renderResults = () => { - if (searchLoading) { - return ( -
-
-
- ); - } - - if (searchResults.length === 0) { - return ( -
-

- No {searchCategory} found for "{activeQuery}" -

-
- ); - } - - return ( -
- {searchResults.map((result, index) => { - switch (searchCategory) { - case "songs": - return ( - - ); - case "albums": - return ( - - ); - case "artists": - return ( - - ); - case "users": - return ( - - ); - } - })} -
- ); - }; - - return ( -
-
-
-
- {/* Search Bar */} -
-
- {/* Category Dropdown */} - - - {/* Search Input */} - setSearchInput(e.target.value)} - onKeyDown={handleKeyDown} - className="flex-1 bg-[#282828] border border-white/10 border-r-0 py-2 px-4 text-white focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all" - /> - - {/* Search Button */} - -
-
- - {/* Search Results Section */} - {hasSearched ? ( -
-
-

- Results for "{activeQuery}" -

- -
- - {/* Quick category switch buttons */} -
- {CATEGORIES.map((cat) => ( - - ))} -
- - {/* Results list */} -
- {renderResults()} -
-
- ) : ( - /* Default song grid */ - <> -
-

- Top Songs -

-

- Listen to the newest tracks on FinkWave -

-
- - {loading ? ( -
-
-

Loading songs...

-
- ) : ( -
- {songs.map((song) => ( -
navigate(`/songs/${song.id}`)} - className="bg-[#282828] rounded-xl overflow-hidden cursor-pointer shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-2 hover:shadow-2xl group" - > -
- {song.title} { - (e.target as HTMLImageElement).src = - "/favicon.png"; - }} - /> -
- {song.link ? ( - - ) : ( -
- ▶ -
- )} -
-
-
-

- {song.title} -

- {song.album && ( -

{ - e.stopPropagation(); - if (song.albumId) { - navigate(`/collection/album/${song.albumId}`); - } - }} - className={`text-sm text-gray-400 mb-3 overflow-hidden text-ellipsis whitespace-nowrap ${ - song.albumId - ? "hover:underline cursor-pointer hover:text-white" - : "" - }`} - > - {song.album} -

- )} -

{ - e.stopPropagation(); - if (song.artistUsername) { - navigate(`/users/${song.artistUsername}`); - } - }} - className={`text-sm text-gray-400 mb-3 overflow-hidden text-ellipsis whitespace-nowrap ${ - song.artistUsername - ? "hover:underline cursor-pointer hover:text-white" - : "" - }`} - > - {song.releasedBy} -

-
- {/* Like button */} - - - {/* Add to playlist button */} -
{ - if (el) - playlistDropdownRefs.current[song.id] = el; - }} - > - - - {/* Playlist dropdown */} - {openPlaylistDropdown === song.id && ( -
-
- Add to playlist -
- - - -
- )} -
-
-
-
- ))} -
- )} - - )} -
-
-
-
- ); + const navigate = useNavigate(); + const { play, currentSong } = usePlayer(); + const [songs, setSongs] = useState([]); + const [loading, setLoading] = useState(true); + + // search state + const [searchInput, setSearchInput] = useState(""); + const [activeQuery, setActiveQuery] = useState(""); + const [searchCategory, setSearchCategory] = useState("songs"); + const [searchResults, setSearchResults] = useState([]); + const [searchLoading, setSearchLoading] = useState(false); + const [hasSearched, setHasSearched] = useState(false); + + // playlist dropdown state + const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState< + number | null + >(null); + + useEffect(() => { + const fetchSongs = async () => { + try { + const response = await axiosInstance.get("/songs/top"); + setSongs(response.data); + } catch (error) { + console.error("Error fetching songs:", error); + } finally { + setLoading(false); + } + }; + fetchSongs(); + }, []); + + const toggleLike = async (songId: number) => { + try { + await axiosInstance.post(`/musical-entity/${songId}/like`); + setSongs((prevSongs) => + prevSongs.map((song) => + song.id === songId + ? { ...song, isLikedByCurrentUser: !song.isLikedByCurrentUser } + : song, + ), + ); + } catch (error) { + console.error("Error toggling like:", error); + } + }; + + const togglePlaylistDropdown = (songId: number) => { + if (openPlaylistDropdown === songId) { + setOpenPlaylistDropdown(null); + } else { + setOpenPlaylistDropdown(songId); + } + }; + + const handleCreateNewPlaylist = (songId: number) => { + console.log(`Creating new playlist for song ${songId}`); + // TODO: Implement actual playlist creation + setOpenPlaylistDropdown(null); + }; + + const performSearch = async (query: string, category: SearchCategory) => { + if (!query.trim()) return; + + setSearchLoading(true); + setHasSearched(true); + setActiveQuery(query); + setSearchCategory(category); + + try { + let endpoint = ""; + switch (category) { + case "songs": + endpoint = `/songs/search?q=${encodeURIComponent(query)}`; + break; + case "albums": + endpoint = `/albums/search?q=${encodeURIComponent(query)}`; + break; + case "artists": + endpoint = `/users/search?type=ARTIST&q=${encodeURIComponent(query)}`; + break; + case "users": + endpoint = `/users/search?type=LISTENER&q=${encodeURIComponent(query)}`; + break; + } + + const response = await axiosInstance.get(endpoint); + setSearchResults(response.data); + } catch (error) { + console.error("Search error:", error); + setSearchResults([]); + } finally { + setSearchLoading(false); + } + }; + + const handleSearch = () => { + performSearch(searchInput, searchCategory); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + handleSearch(); + } + }; + + const handleCategorySwitch = (category: SearchCategory) => { + performSearch(activeQuery, category); + }; + + const clearSearch = () => { + setSearchInput(""); + setActiveQuery(""); + setHasSearched(false); + setSearchResults([]); + }; + + const renderResults = () => { + if (searchLoading) { + return ( +
+
+
+ ); + } + + if (searchResults.length === 0) { + return ( +
+

+ No {searchCategory} found for "{activeQuery}" +

+
+ ); + } + + return ( +
+ {searchResults.map((result, index) => { + switch (searchCategory) { + case "songs": + return ( + + ); + case "albums": + return ( + + ); + case "artists": + return ( + + ); + case "users": + return ( + + ); + } + })} +
+ ); + }; + + return ( +
+
+
+
+ {/* Search Bar */} +
+
+ {/* Category Dropdown */} + + + {/* Search Input */} + setSearchInput(e.target.value)} + onKeyDown={handleKeyDown} + className="flex-1 bg-[#282828] border border-white/10 border-r-0 py-2 px-4 text-white focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all" + /> + + {/* Search Button */} + +
+
+ + {/* Search Results Section */} + {hasSearched ? ( +
+
+

+ Results for "{activeQuery}" +

+ +
+ + {/* Quick category switch buttons */} +
+ {CATEGORIES.map((cat) => ( + + ))} +
+ + {/* Results list */} +
+ {renderResults()} +
+
+ ) : ( + /* Default song grid */ + <> +
+

+ Top Songs +

+

+ Listen to the newest tracks on FinkWave +

+
+ + {loading ? ( +
+
+

Loading songs...

+
+ ) : ( +
+ {songs.map((song) => ( +
navigate(`/songs/${song.id}`)} + onMouseEnter={() => { + if ( + openPlaylistDropdown !== null && + openPlaylistDropdown !== song.id + ) { + setOpenPlaylistDropdown(null); + } + }} + className="bg-[#282828] rounded-xl cursor-pointer shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-2 hover:shadow-2xl group relative" + > +
+ {song.title} { + (e.target as HTMLImageElement).src = + "/favicon.png"; + }} + /> +
+ {song.link ? ( + + ) : ( +
+ ▶ +
+ )} +
+
+
+

+ {song.title} +

+ {song.album && ( +

{ + e.stopPropagation(); + if (song.albumId) { + navigate(`/collection/album/${song.albumId}`); + } + }} + className={`text-sm text-gray-400 mb-3 overflow-hidden text-ellipsis whitespace-nowrap ${ + song.albumId + ? "hover:underline cursor-pointer hover:text-white" + : "" + }`} + > + {song.album} +

+ )} +

{ + e.stopPropagation(); + if (song.artistUsername) { + navigate(`/users/${song.artistUsername}`); + } + }} + className={`text-sm text-gray-400 mb-3 overflow-hidden text-ellipsis whitespace-nowrap ${ + song.artistUsername + ? "hover:underline cursor-pointer hover:text-white" + : "" + }`} + > + {song.releasedBy} +

+
+ {/* Like button */} + + + {/* Add to playlist button */} +
+ + + setOpenPlaylistDropdown(null)} + onCreateNewPlaylist={() => + handleCreateNewPlaylist(song.id) + } + direction="above" + /> +
+
+
+
+ ))} +
+ )} + + )} +
+
+
+
+ ); }; Index: frontend/src/pages/MusicalCollection.tsx =================================================================== --- frontend/src/pages/MusicalCollection.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/pages/MusicalCollection.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -21,4 +21,7 @@ const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); + const [openDropdownSongId, setOpenDropdownSongId] = useState( + null, + ); const normalizeCollection = ( @@ -236,4 +239,6 @@ index={index + 1} onLikeToggle={() => toggleLike(song.id)} + isDropdownOpen={openDropdownSongId === song.id} + onDropdownToggle={setOpenDropdownSongId} /> ))} Index: frontend/src/pages/SongDetail.tsx =================================================================== --- frontend/src/pages/SongDetail.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/pages/SongDetail.tsx (revision ce45c7a7871379455b3a3c55a48f767ca2e0e739) @@ -1,6 +1,7 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; import { toast } from "react-toastify"; import axiosInstance, { baseURL } from "../api/axiosInstance"; +import PlaylistDropdown from "../components/PlaylistDropdown"; import { useAuth } from "../context/authContext"; import { usePlayer } from "../context/playerContext"; @@ -9,654 +10,590 @@ const ROLE_LABELS: Record = { - MAIN_VOCAL: "Main Vocal", - FEATURED: "Featured", - PRODUCER: "Producer", - SONGWRITER: "Songwriter", - COMPOSER: "Composer", - MIXER: "Mixer", - ENGINEER: "Engineer", + MAIN_VOCAL: "Main Vocal", + FEATURED: "Featured", + PRODUCER: "Producer", + SONGWRITER: "Songwriter", + COMPOSER: "Composer", + MIXER: "Mixer", + ENGINEER: "Engineer", }; const formatRole = (role: string): string => { - return ROLE_LABELS[role] || role.replace(/_/g, " "); + return ROLE_LABELS[role] || role.replace(/_/g, " "); }; const renderStars = (grade: number) => { - return ( -
- {[1, 2, 3, 4, 5].map((star) => ( - - - - ))} -
- ); + return ( +
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ ); }; const SongDetail = () => { - const { id } = useParams<{ id: string }>(); - const { user } = useAuth(); - const { play, currentSong } = usePlayer(); - const [song, setSong] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const [showReviewModal, setShowReviewModal] = useState(false); - const [reviewRating, setReviewRating] = useState(0); - const [reviewComment, setReviewComment] = useState(""); - const [hoverRating, setHoverRating] = useState(0); - const [showPlaylistDropdown, setShowPlaylistDropdown] = useState(false); - const playlistDropdownRef = useRef(null); - console.log(user); - useEffect(() => { - const fetchSong = async () => { - try { - setLoading(true); - const response = await axiosInstance.get(`/songs/${id}/details`); - setSong(response.data); - } catch (err) { - console.error("Error fetching song details:", err); - setError("Failed to load song details."); - } finally { - setLoading(false); - } - }; - if (id) fetchSong(); - }, [id]); - - // handle click outside for playlist dropdown - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if ( - playlistDropdownRef.current && - !playlistDropdownRef.current.contains(event.target as Node) - ) { - setShowPlaylistDropdown(false); - } - }; - - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); - - const handleSubmitReview = async () => { - if (reviewRating === 0) { - // todo: replace with toast - alert("Please select a rating"); - return; - } - try { - await axiosInstance.post(`reviews/${song?.id}`, { - grade: reviewRating, - comment: reviewComment, - }); - const response = await axiosInstance.get(`/songs/${id}/details`); - setSong(response.data); - } catch (err) { - // todo: replace with toast - console.error("Error submitting review:", err); - } finally { - setShowReviewModal(false); - setReviewRating(0); - setReviewComment(""); - setHoverRating(0); - } - }; - - const deleteReview = async () => { - try { - await axiosInstance.delete(`reviews/${song?.id}`); - const response = await axiosInstance.get(`/songs/${id}/details`); - setSong(response.data); - } catch (err) { - toast.error("Failed to delete review"); - console.error("Error deleting review:", err); - } - }; - - const toggleLike = async () => { - if (!song) return; - try { - await axiosInstance.post(`/musical-entity/${song.id}/like`); - setSong((prev) => - prev - ? { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser } - : prev, - ); - } catch (err) { - toast.error("Failed to toggle like"); - console.error("Error toggling like:", err); - } - }; - - const handleAddToPlaylist = (playlistName: string) => { - console.log(`Adding song ${song?.id} to ${playlistName}`); - // TODO: actual API call - setShowPlaylistDropdown(false); - }; - - const handleCreateNewPlaylist = () => { - console.log(`Creating new playlist for song ${song?.id}`); - // TODO: actual playlist creation - setShowPlaylistDropdown(false); - }; - - if (loading) { - return ( -
-
-
-

Loading song…

-
-
- ); - } - - if (error || !song) { - return ( -
-
-

- {error ?? "Song not found"} -

- - ← Back to Home - -
-
- ); - } - - const otherContributors = song.contributions.filter( - (c) => c.artistName !== song.releasedBy, - ); - - const avgRating = - song.reviews.length > 0 - ? ( - song.reviews.reduce((sum, r) => sum + r.grade, 0) / - song.reviews.length - ).toFixed(1) - : null; - - return ( -
-
- {/* Back link */} - - - - - Back to Home - - - {/* Hero section */} -
- {/* Cover art */} -
-
- {song.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> -
-
- - {/* Song info */} -
- - {song.genre} • Song - -

- {song.title} -

- - {/* Main artist */} -

- {song.releasedBy} -

- - {/* Album */} - {song.album && ( -

- Album: {song.album} -

- )} - - {/* Rating summary */} - {avgRating && ( -
- {renderStars(Math.round(Number(avgRating)))} - - {avgRating} · {song.reviews.length}{" "} - {song.reviews.length === 1 ? "review" : "reviews"} - -
- )} - - {/* Action buttons */} -
- {/* Play button */} - {song.link && ( - - )} - - {user && ( - <> - - - {/* Add to Playlist button */} -
- - - {/* Playlist dropdown */} - {showPlaylistDropdown && ( -
-
- Add to playlist -
- - - - -
- )} -
- - )} -
-
-
- - {/* Credits / Contributions */} - {song.contributions.length > 0 && ( -
-

Credits

-
- {/* Main artist first */} - {song.contributions - .filter((c) => c.artistName === song.releasedBy) - .map((c, i) => ( -
-
-
- {c.artistName.charAt(0).toUpperCase()} -
-
-

- {c.artistName} -

-
-
- - {formatRole(c.role)} - -
- ))} - - {/* Other contributors */} - {otherContributors.map((c, i) => ( -
-
-
- {c.artistName.charAt(0).toUpperCase()} -
-

{c.artistName}

-
- - {formatRole(c.role)} - -
- ))} -
-
- )} - - {/* Reviews */} -
-
-

- Reviews - {song.reviews.length > 0 && ( - - ({song.reviews.length}) - - )} -

- -
- - {song.reviews.length === 0 ? ( -
-

No reviews yet.

-

- Be the first to share your thoughts! -

-
- ) : ( -
- {song.reviews.map((review) => ( -
-
-
-
- - {review.author.charAt(0).toUpperCase()} - -
-
-

- {review.author} -

- {renderStars(review.grade)} -
-
- {user?.username === review.authorUsername && ( - - )} -
-

- {review.comment} -

-
- ))} -
- )} -
-
- - {/* Review Modal */} - {showReviewModal && ( -
-
-
-

Add Review

- -
- - {/* Star Rating */} -
- -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} -
-
- - {/* Comment */} -
- -