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} /> ))}