+
+ );
+ }
+
+ if (error) {
+ return Failed to load about section.
;
+ }
+
+ return (
+
+ About
+
+ {monthlyListeners} monthly listeners
+
+
+ {artistBio || `${artistName} has no bio yet...`}
+
+
+ );
+};
+
+export default memo(ArtistAbout);
diff --git a/client/src/components/ArtistPage/ArtistActions/ArtistActions.module.css b/client/src/components/ArtistPage/ArtistActions/ArtistActions.module.css
new file mode 100644
index 0000000..a4ee388
--- /dev/null
+++ b/client/src/components/ArtistPage/ArtistActions/ArtistActions.module.css
@@ -0,0 +1,97 @@
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ min-height: 15vh;
+}
+
+.error {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.artistActionsContainer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ background: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ padding: var(--spacing-md);
+ min-width: 0;
+}
+
+.actionsLayout {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ align-items: center;
+ row-gap: var(--spacing-md);
+ column-gap: var(--spacing-sm);
+}
+
+.actionButton,
+.actionButtonAlt {
+ font-family: "Inter", sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ border-radius: var(--border-radius-sm);
+ cursor: pointer;
+ font-size: var(--font-size-sm);
+ padding: var(--spacing-sm) var(--spacing-md);
+ transition: background-color var(--transition-speed) ease-in-out;
+}
+
+.actionButton {
+ background: var(--color-red);
+ border: 1px solid var(--color-red);
+ border: none;
+ color: var(--color-red-200);
+}
+
+.actionButton:hover {
+ background-color: var(--color-red-700);
+}
+
+.actionButtonAlt {
+ background: var(--color-gray-button);
+ border: 1px solid var(--color-gray-button-border);
+ color: var(--color-white);
+}
+
+.actionButtonAlt:hover {
+ background-color: var(--color-gray-button-hover);
+}
+
+.artistStat {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: var(--spacing-xs);
+}
+
+.artistStatLarge {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 700;
+}
+
+.artistStatLabel {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.artistStatLarge,
+.artistStatLabel {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
diff --git a/client/src/components/ArtistPage/ArtistActions/ArtistActions.tsx b/client/src/components/ArtistPage/ArtistActions/ArtistActions.tsx
new file mode 100644
index 0000000..bcf0ddb
--- /dev/null
+++ b/client/src/components/ArtistPage/ArtistActions/ArtistActions.tsx
@@ -0,0 +1,174 @@
+import { useState, memo, useMemo, useCallback } from "react";
+import { PuffLoader } from "react-spinners";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@contexts";
+import { useAsyncData } from "@hooks";
+import { formatNumber } from "@util";
+import { artistApi } from "@api";
+import { ShareModal } from "@components";
+import styles from "./ArtistActions.module.css";
+import {
+ LuCirclePlay,
+ LuUserRoundPlus,
+ LuShare,
+ LuCircleAlert,
+ LuUsersRound,
+ LuMusic,
+ LuAudioLines,
+ LuUserRoundCheck,
+} from "react-icons/lu";
+
+const StatItem = memo(
+ ({
+ icon: Icon,
+ value,
+ label,
+ }: {
+ icon: React.ElementType;
+ value: string;
+ label: string;
+ }) => (
+
+
+ )
+);
+
+export interface ArtistActionsProps {
+ artistId: string;
+ userId: string;
+ artistName: string;
+ shareLink: string;
+}
+
+const ArtistActions: React.FC
+ {value}
+
+ {label}
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+ {!error && (
+ <>
+
+
+ 
+
+
+
+
+
+ {artistLocation && (
+ {artistLocation}
+ )}
+ {artistName}
+ {isVerified && ( +
+
+ )}
+ Verified by CoogMusic
+ )}
+
+
+ );
+ }
+
+ if (error) {
+ return Failed to load playlists.
;
+ }
+
+ const playlists = data?.playlists;
+
+ if (!playlists || playlists.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+ Playlists Featuring {artistName}
+
+
+ );
+};
+
+export default memo(ArtistPlaylists);
diff --git a/client/src/components/ArtistPage/RelatedArtists/RelatedArtists.module.css b/client/src/components/ArtistPage/RelatedArtists/RelatedArtists.module.css
new file mode 100644
index 0000000..6d8aecf
--- /dev/null
+++ b/client/src/components/ArtistPage/RelatedArtists/RelatedArtists.module.css
@@ -0,0 +1,134 @@
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ min-height: 15vh;
+}
+
+.error {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.relatedArtistsContainer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+}
+
+.sectionTitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.relatedArtistsList {
+ display: flex;
+ gap: var(--spacing-lg);
+ justify-content: space-between;
+ min-width: 0;
+ transition: transform 0.3s ease;
+ width: 100%;
+ overflow-x: hidden;
+}
+
+.relatedArtistItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--spacing-sm);
+}
+
+.relatedArtistImage {
+ width: 14rem;
+ height: 14rem;
+ border-radius: 50%;
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ flex-shrink: 0;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+ transition: opacity var(--transition-speed) ease;
+}
+
+.relatedArtistImage:hover {
+ opacity: 0.8;
+}
+
+.relatedArtistName {
+ font-size: var(--font-size-md);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+ cursor: pointer;
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.relatedArtistName:hover {
+ color: var(--color-red);
+}
+
+@media (max-width: 1700px) {
+ .relatedArtistsList .relatedArtistItem:last-child {
+ display: none;
+ }
+}
+
+@media (max-width: 1550px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 2) {
+ display: none;
+ }
+}
+
+@media (max-width: 1390px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 3) {
+ display: none;
+ }
+}
+
+@media (max-width: 1230px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 4) {
+ display: none;
+ }
+}
+
+@media (max-width: 1072px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 5) {
+ display: none;
+ }
+}
+
+@media (max-width: 915px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 6) {
+ display: none;
+ }
+}
+
+@media (max-width: 670px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 7) {
+ display: none;
+ }
+}
+
+@media (max-width: 512px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 8) {
+ display: none;
+ }
+}
+
+@media (max-width: 355px) {
+ .relatedArtistsList .relatedArtistItem:nth-last-child(-n + 9) {
+ display: none;
+ }
+}
diff --git a/client/src/components/ArtistPage/RelatedArtists/RelatedArtists.tsx b/client/src/components/ArtistPage/RelatedArtists/RelatedArtists.tsx
new file mode 100644
index 0000000..15ac659
--- /dev/null
+++ b/client/src/components/ArtistPage/RelatedArtists/RelatedArtists.tsx
@@ -0,0 +1,72 @@
+import { memo } from "react";
+import { PuffLoader } from "react-spinners";
+import { Link } from "react-router-dom";
+import type { UUID } from "@types";
+import { artistApi } from "@api";
+import { useAsyncData } from "@hooks";
+import styles from "./RelatedArtists.module.css";
+import artistPlaceholder from "@assets/artist-placeholder.png";
+
+export interface RelatedArtistsProps {
+ artistId: UUID;
+}
+
+const RelatedArtists: React.FC
+ {data?.playlists?.map((playlist) => (
+
+
+
+ );
+ }
+
+ if (error) {
+ return Failed to load related artists.
;
+ }
+
+ const relatedArtists = data?.relatedArtists;
+
+ if (!relatedArtists || relatedArtists.length === 0) {
+ return null;
+ }
+
+ return (
+ Fans Also Like
+
+ {relatedArtists.map((related) => (
+
+
+
+ 
+
+
+ {related.display_name}
+
+
+ ))}
+
+
+ );
+ }
+
+ if (loadError) {
+ return (
+ AudioQueue Test
+Loading songs from API...
+
+
+ );
+ }
+
+ if (testSongs.length === 0) {
+ return (
+ AudioQueue Test
+Error: {loadError}
+
+
+ );
+ }
+
+ return (
+ AudioQueue Test Component
+No test songs available.
+
+
+ );
+};
+
+export default AudioQueueTest;
diff --git a/client/src/components/CoverLightbox/CoverLightbox.module.css b/client/src/components/CoverLightbox/CoverLightbox.module.css
new file mode 100644
index 0000000..3875feb
--- /dev/null
+++ b/client/src/components/CoverLightbox/CoverLightbox.module.css
@@ -0,0 +1,73 @@
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(4px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ animation: fadeIn var(--transition-speed) ease-out;
+ cursor: pointer;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.lightbox {
+ position: relative;
+ animation: slideIn var(--transition-speed) ease-out;
+ cursor: default;
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95) translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+.closeButton {
+ position: absolute;
+ top: 1.6rem;
+ right: 1.6rem;
+ background: var(--color-panel-gray);
+ border: 1px solid var(--color-panel-border);
+ border-radius: var(--border-radius-sm);
+ width: 3.2rem;
+ height: 3.2rem;
+ color: var(--color-white);
+ font-size: 1.8rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all var(--transition-speed) ease;
+ backdrop-filter: blur(4px);
+}
+
+.closeButton:hover {
+ background: var(--color-panel-border);
+}
+
+.coverImage {
+ width: 75rem;
+ height: 75rem;
+ object-fit: contain;
+ border-radius: var(--border-radius-sm);
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
+ 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
diff --git a/client/src/components/CoverLightbox/CoverLightbox.tsx b/client/src/components/CoverLightbox/CoverLightbox.tsx
new file mode 100644
index 0000000..dd1e28d
--- /dev/null
+++ b/client/src/components/CoverLightbox/CoverLightbox.tsx
@@ -0,0 +1,50 @@
+import { memo, useEffect } from "react";
+import { LuX } from "react-icons/lu";
+import styles from "./CoverLightbox.module.css";
+
+interface CoverLightboxProps {
+ isOpen: boolean;
+ onClose: () => void;
+ imageUrl: string;
+ altText: string;
+}
+
+const CoverLightbox: React.FCAudioQueue Test
++ Loaded {testSongs.length} songs from API +
+ +
+ Current Song: {state.currentSong?.title || "None"}
+
+
+
+ Status: {state.isPlaying ? "Playing" : "Paused"}
+ {state.isLoading && " (Loading...)"}
+
+
+
+ Progress: {formatTime(state.progress)} /{" "}
+ {formatTime(state.duration)}
+
+
+
+ Queue: {state.queue.length} songs
+
+
+
+ Current Index: {state.currentIndex}
+
+
+
+ Navigation:
+ Previous: {state.hasPreviousSong ? "Available" : "Disabled"}
+ {state.progress > 3 && " (→ Start)"} | Next:{" "}
+ {state.hasNextSong ? "Available" : "Disabled"}
+
+
+
+ Volume: {Math.round(state.volume * 100)}%
+
+
+
+ Repeat Mode: {state.repeatMode}
+
+
+
+ Shuffle: {state.isShuffled ? "On" : "Off"}
+
+
+ {state.error && (
+
+ Error: {state.error}
+
+ )}
+
+
+
+
+ Playback :
+ + + + + + + + +
+
+
+ Queue :
+ + + + +
+
+
+
+
+
+
+
+
+ Persistence:
+ + + +
+
+
+ Volume:
+ actions.setVolume(parseInt(e.target.value) / 100)} + /> +
+
+
+ Seek:
+ { + const seekTime = (state.duration * parseInt(e.target.value)) / 100; + actions.seek(seekTime); + }} + disabled={!state.currentSong} + /> +
+
+
+ Test Songs:
+-
+ {testSongs.map((song) => (
+
- + {song.title} + + + ))} +
+
+ Current Queue:
+-
+ {state.queue.map((item, index) => (
+
- + {item.song.title} + {item.isQueued && " (User Queued)"} + {item.originalIndex !== undefined && + ` [Orig: ${item.originalIndex}]`} + {index === state.currentIndex && " ← Current"} + + ))} +
+
+
+ );
+};
+
+export default memo(CoverLightbox);
diff --git a/client/src/components/DevBanner/DevBanner.module.css b/client/src/components/DevBanner/DevBanner.module.css
new file mode 100644
index 0000000..812ff5d
--- /dev/null
+++ b/client/src/components/DevBanner/DevBanner.module.css
@@ -0,0 +1,42 @@
+.banner {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-md);
+ padding: var(--spacing-xs) var(--spacing-md);
+ background-color: var(--color-red);
+ color: var(--color-white);
+ font-size: var(--font-size-xs);
+ font-weight: 500;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.text {
+ flex: 1;
+ text-align: center;
+}
+
+.closeButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: none;
+ color: var(--color-white);
+ cursor: pointer;
+ transition: color var(--transition-speed) ease-in-out;
+ font-size: var(--icon-size-xs);
+}
+
+.closeButton:hover {
+ color: var(--color-white-hover);
+}
+
+.closeButton:active {
+ color: var(--color-white-hover);
+}
diff --git a/client/src/components/DevBanner/DevBanner.tsx b/client/src/components/DevBanner/DevBanner.tsx
new file mode 100644
index 0000000..bb76dcc
--- /dev/null
+++ b/client/src/components/DevBanner/DevBanner.tsx
@@ -0,0 +1,44 @@
+import { useState, useEffect, memo } from "react";
+import { LuX } from "react-icons/lu";
+import styles from "./DevBanner.module.css";
+
+const DevBanner: React.FC = () => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [buildVersion, setBuildVersion] = useState e.stopPropagation()}>
+ 
+
+
+ Development Build: {buildVersion}
+
+
+ );
+};
+
+export default memo(DevBanner);
diff --git a/client/src/components/EntityItem/EntityItem.module.css b/client/src/components/EntityItem/EntityItem.module.css
new file mode 100644
index 0000000..b15968d
--- /dev/null
+++ b/client/src/components/EntityItem/EntityItem.module.css
@@ -0,0 +1,130 @@
+.entityItem {
+ display: flex;
+ gap: var(--spacing-md);
+ align-items: center;
+ min-width: 0;
+ width: 100%;
+ position: relative;
+}
+
+.entityImage {
+ width: 8rem;
+ height: 8rem;
+ border-radius: var(--border-radius-sm);
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ flex-shrink: 0;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+}
+
+.entityInfo {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+ min-width: 0;
+ width: 100%;
+}
+
+.entityAuthor {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.entityTitle {
+ font-size: var(--font-size-md);
+ color: var(--color-white);
+ font-weight: 500;
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.entityTitle:hover {
+ color: var(--color-red);
+}
+
+.entitySubtitle {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.entityTitle,
+.entityAuthor,
+.entitySubtitle,
+.entitySubtitle {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+}
+
+.entityActionButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-panel-gray);
+ border-radius: var(--border-radius-sm);
+ border: 2px solid var(--color-panel-border);
+ color: var(--color-white);
+ cursor: pointer;
+ font-size: var(--icon-size-xs);
+ padding: var(--spacing-sm);
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.entityActionButton:hover {
+ color: var(--color-red);
+}
+
+.queueButtonContainer {
+ position: relative;
+}
+
+.entityActionButtonContainer {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ opacity: 0;
+ visibility: hidden;
+ transition: all var(--transition-speed) ease;
+ background: linear-gradient(
+ to left,
+ var(--color-black) 0%,
+ var(--color-black) 75%,
+ transparent 100%
+ );
+ padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
+ var(--spacing-xl);
+ border-radius: var(--border-radius-sm);
+}
+
+.entityItem:hover .entityActionButtonContainer {
+ opacity: 1;
+ visibility: visible;
+}
+
+.entityActionButtonContainerWide {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ flex-shrink: 0;
+}
+
+.entityIndex {
+ font-size: var(--font-size-sm);
+ color: var(--color-white);
+ font-weight: 500;
+ width: 2rem;
+ min-width: 2rem;
+ max-width: 2rem;
+ flex-shrink: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-align: center;
+}
diff --git a/client/src/components/EntityItem/EntityItem.tsx b/client/src/components/EntityItem/EntityItem.tsx
new file mode 100644
index 0000000..6f4d055
--- /dev/null
+++ b/client/src/components/EntityItem/EntityItem.tsx
@@ -0,0 +1,193 @@
+import { memo, useState, useCallback, useRef, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAudioQueue, useAuth } from "@contexts";
+import type { Song, Playlist, Album } from "@types";
+import { QueueMenu } from "@components";
+import styles from "./EntityItem.module.css";
+import musicPlaceholder from "@assets/music-placeholder.png";
+import artistPlaceholder from "@assets/artist-placeholder.png";
+import { LuPlay, LuListEnd } from "react-icons/lu";
+
+interface EntityActionButtonsProps {
+ type: "song" | "list" | "artist";
+ entity?: Song | Playlist | Album;
+ isHovered: boolean;
+ isSmall: boolean;
+}
+
+const EntityActionButtons: React.FC
+ {type === "song" && (
+
+ );
+ }
+
+ return (
+
+
+ setQueueMenuOpen(false)}
+ song={entity as Song}
+ buttonRef={queueButtonRef}
+ justification="right"
+ />
+
+ )}
+ {(type === "song" || type === "list") && (
+
+ )}
+
+ {type === "song" && (
+
+ );
+ }
+);
+
+type EntityItemProps =
+ | {
+ type: "artist";
+ linkTo: string;
+ author?: string;
+ title: string;
+ subtitle?: string;
+ imageUrl?: string;
+ entity?: never;
+ isSmall?: boolean;
+ index?: number;
+ }
+ | {
+ type: "song" | "list";
+ linkTo: string;
+ author?: string;
+ title: string;
+ subtitle?: string;
+ imageUrl?: string;
+ entity: Song | Playlist | Album;
+ isSmall?: boolean;
+ index?: number;
+ };
+
+/**
+ * @param EntityItemProps
+ * @param entity The entity object to play when clicking play (Song, Playlist, or Album)
+ * @param imageUrl Image URL for the entity
+ * @param linkTo Link to navigate to when clicking the title
+ * @param author Author name to display (text above title)
+ * @param title Title of the entity
+ * @param subtitle Subtitle text to display (text below title)
+ * @param type Type of entity: "song", "list", or "artist"
+ * @param isSmall Whether to use small layout (default: true).
+ * @param index Optional index number to display (for non-small layout)
+ */
+const EntityItem: React.FC
+
+ setQueueMenuOpen(false)}
+ song={entity as Song}
+ buttonRef={queueButtonRef}
+ justification="right"
+ />
+
+ )}
+ {(type === "song" || type === "list") && (
+
+ )}
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {!isSmall && index !== undefined && (
+ {index}
+ )}
+ 
+
+ );
+};
+
+export default memo(EntityItem);
diff --git a/client/src/components/EntityItemCard/EntityItemCard.module.css b/client/src/components/EntityItemCard/EntityItemCard.module.css
new file mode 100644
index 0000000..2790870
--- /dev/null
+++ b/client/src/components/EntityItemCard/EntityItemCard.module.css
@@ -0,0 +1,113 @@
+.entityItemCard {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 18rem;
+ position: relative;
+}
+
+.entityImageContainer {
+ position: relative;
+ width: 18rem;
+ height: 18rem;
+ flex-shrink: 0;
+}
+
+.entityImage {
+ width: 100%;
+ height: 100%;
+ border-radius: var(--border-radius-sm);
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ transition: all var(--transition-speed) ease;
+}
+
+.entityInfo {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+ min-width: 0;
+ width: 100%;
+}
+
+.entityAuthor {
+ font-size: var(--font-size-md);
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.entityTitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 500;
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.entityTitle:hover {
+ color: var(--color-red);
+}
+
+.entitySubtitle {
+ font-size: var(--font-size-md);
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.entityTitle,
+.entityAuthor,
+.entitySubtitle,
+.entitySubtitle {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+}
+
+.entityActionButtonContainer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-md);
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: var(--border-radius-sm);
+ opacity: 0;
+ visibility: hidden;
+ transition: all var(--transition-speed) ease;
+ z-index: 2;
+}
+
+.entityItemCard:hover .entityActionButtonContainer {
+ opacity: 1;
+ visibility: visible;
+}
+
+.entityActionButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-panel-gray);
+ border-radius: 50%;
+ border: 2px solid var(--color-panel-border);
+ color: var(--color-white);
+ cursor: pointer;
+ font-size: var(--icon-size-md);
+ padding: var(--spacing-md);
+ transition: all var(--transition-speed) ease;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.entityActionButton:hover {
+ color: var(--color-red);
+}
+
+.queueButtonContainer {
+ position: relative;
+}
diff --git a/client/src/components/EntityItemCard/EntityItemCard.tsx b/client/src/components/EntityItemCard/EntityItemCard.tsx
new file mode 100644
index 0000000..a222505
--- /dev/null
+++ b/client/src/components/EntityItemCard/EntityItemCard.tsx
@@ -0,0 +1,153 @@
+import { memo, useState, useCallback, useRef, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAudioQueue, useAuth } from "@contexts";
+import type { Song, Playlist, Album } from "@types";
+import { QueueMenu } from "@components";
+import styles from "./EntityItemCard.module.css";
+import musicPlaceholder from "@assets/music-placeholder.png";
+import artistPlaceholder from "@assets/artist-placeholder.png";
+import { LuPlay, LuListEnd } from "react-icons/lu";
+
+interface EntityActionButtonsProps {
+ type: "song" | "list" | "artist";
+ entity?: Song | Playlist | Album;
+ isHovered: boolean;
+}
+
+const EntityActionButtons: React.FC
+ {author && {author}}
+
+ {title}
+
+ {subtitle && {subtitle}}
+
+
+ {type === "song" && (
+
+ );
+ }
+);
+
+type EntityItemCardProps =
+ | {
+ type: "artist";
+ linkTo: string;
+ author: string;
+ title: string;
+ subtitle: string;
+ imageUrl?: string;
+ entity?: never;
+ }
+ | {
+ type: "song" | "list";
+ linkTo: string;
+ author: string;
+ title: string;
+ subtitle: string;
+ imageUrl?: string;
+ entity: Song | Playlist | Album;
+ };
+
+/**
+ * @param EntityItemProps
+ * @param entity The entity object to play when clicking play (Song, Playlist, or Album)
+ * @param imageUrl Image URL for the entity
+ * @param linkTo Link to navigate to when clicking the title
+ * @param author Author name to display (text above title)
+ * @param title Title of the entity
+ * @param subtitle Subtitle text to display (text below title)
+ * @param type Type of entity: "song", "list", or "artist"
+ */
+const EntityItemCard: React.FC
+
+ setQueueMenuOpen(false)}
+ song={entity as Song}
+ buttonRef={queueButtonRef}
+ justification="center"
+ />
+
+ )}
+ {(type === "song" || type === "list") && (
+
+ )}
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+ );
+};
+
+export default memo(EntityItemCard);
diff --git a/client/src/components/ErrorPage/ErrorPage.module.css b/client/src/components/ErrorPage/ErrorPage.module.css
new file mode 100644
index 0000000..bdb6ef9
--- /dev/null
+++ b/client/src/components/ErrorPage/ErrorPage.module.css
@@ -0,0 +1,57 @@
+.errorPageContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ height: 75vh;
+ width: 100%;
+ gap: var(--spacing-sm);
+}
+
+.errorIcon {
+ font-size: var(--icon-size-2xl);
+ color: var(--color-red);
+}
+
+.errorTitle {
+ font-size: var(--font-size-2xl);
+ font-weight: 600;
+}
+
+.errorMessage {
+ font-size: var(--font-size-lg);
+ max-width: 60rem;
+ line-height: 1.5;
+ color: var(--color-text-gray);
+}
+
+.statusCode {
+ font-size: var(--font-size-md);
+ color: var(--color-text-gray);
+}
+
+.homeButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ padding: var(--spacing-md);
+ background-color: var(--color-red);
+ color: var(--color-white);
+ border: none;
+ border-radius: var(--border-radius-sm);
+ font-family: "Inter", sans-serif;
+ font-size: var(--font-size-sm);
+ cursor: pointer;
+ transition: background-color var(--transition-speed) ease-in-out;
+}
+
+.homeButton:hover:not(:disabled) {
+ background-color: var(--color-red-700);
+}
+
+.homeButton:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
diff --git a/client/src/components/ErrorPage/ErrorPage.tsx b/client/src/components/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000..d214784
--- /dev/null
+++ b/client/src/components/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,38 @@
+import { memo } from "react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
+import { LuBan } from "react-icons/lu";
+import styles from "./ErrorPage.module.css";
+
+type ErrorPageProps = {
+ title?: string;
+ message?: string;
+};
+
+const ErrorPage: React.FC
+
+
+
+ {author}
+
+ {title}
+
+ {subtitle}
+
+
+
+
+ );
+};
+
+export default memo(ErrorPage);
diff --git a/client/src/components/FollowProfiles/FollowProfiles.module.css b/client/src/components/FollowProfiles/FollowProfiles.module.css
new file mode 100644
index 0000000..a71d5fa
--- /dev/null
+++ b/client/src/components/FollowProfiles/FollowProfiles.module.css
@@ -0,0 +1,106 @@
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ min-height: 10vh;
+}
+
+.error {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.sectionTitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.followContainer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+}
+
+.avatarStack {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0;
+ position: relative;
+}
+
+.avatarLink {
+ position: relative;
+ margin-left: calc(-1 * var(--spacing-md));
+}
+
+.avatarLink:first-child {
+ margin-left: 0;
+}
+
+.avatarLink::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 50%;
+ background-color: rgba(0, 0, 0, 0);
+ transition: background-color var(--transition-speed) ease;
+ pointer-events: none;
+}
+
+.avatarLink:hover::after {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+.avatar {
+ width: var(--icon-size-3xl);
+ height: var(--icon-size-3xl);
+ border-radius: 50%;
+ object-fit: cover;
+ border: 0.2rem solid var(--color-black);
+ display: block;
+}
+
+.avatarMore {
+ position: relative;
+ width: var(--icon-size-3xl);
+ height: var(--icon-size-3xl);
+ border-radius: 50%;
+ background-color: #2f2f2f;
+ border: 0.2rem solid var(--color-black);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #454545;
+ font-size: 2rem;
+ margin-left: calc(-1 * var(--spacing-md));
+}
+
+.avatarMore::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 50%;
+ background-color: rgba(0, 0, 0, 0);
+ transition: background-color var(--transition-speed) ease;
+ pointer-events: none;
+}
+
+.avatarMore:hover::after {
+ background-color: rgba(0, 0, 0, 0.2);
+}
diff --git a/client/src/components/FollowProfiles/FollowProfiles.tsx b/client/src/components/FollowProfiles/FollowProfiles.tsx
new file mode 100644
index 0000000..77a02b5
--- /dev/null
+++ b/client/src/components/FollowProfiles/FollowProfiles.tsx
@@ -0,0 +1,105 @@
+import { memo, useMemo } from "react";
+import { PuffLoader } from "react-spinners";
+import { Link } from "react-router-dom";
+import { LuPlus } from "react-icons/lu";
+import { artistApi } from "@api";
+import { useAsyncData } from "@hooks";
+import type { UUID } from "@types";
+import styles from "./FollowProfiles.module.css";
+import userPlaceholder from "@assets/user-placeholder.png";
+
+export interface FollowProfilesProps {
+ title: string;
+ userId: UUID;
+ following?: boolean;
+ profileLimit: number;
+ profileMin?: number;
+}
+
+const FollowProfiles: React.FC{title || "An Error Occurred"}
+ + {message || "Sorry, something went wrong. Please try again later."} + + +
+
+ );
+ }
+
+ if (error) {
+ return (
+ Failed to load {title.toLowerCase()}.
+ );
+ }
+
+ if (!profiles || profiles.length === 0) {
+ return null;
+ }
+
+ if (profiles.length < profileMin) {
+ return null;
+ }
+
+ return (
+
+ {title}
+
+ );
+};
+
+export default memo(FollowProfiles);
diff --git a/client/src/components/Forms/FormButton/FormSubmitButton.module.css b/client/src/components/Forms/FormButton/FormSubmitButton.module.css
new file mode 100644
index 0000000..a6d04ed
--- /dev/null
+++ b/client/src/components/Forms/FormButton/FormSubmitButton.module.css
@@ -0,0 +1,25 @@
+.formSubmitButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ padding: var(--spacing-md);
+ background-color: var(--color-red);
+ color: var(--color-white);
+ border: none;
+ border-radius: var(--border-radius-md);
+ font-family: "Inter", sans-serif;
+ font-size: var(--font-size-md);
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color var(--transition-speed) ease-in-out;
+}
+
+.formSubmitButton:hover:not(:disabled) {
+ background-color: var(--color-red-700);
+}
+
+.formSubmitButton:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
diff --git a/client/src/components/Forms/FormButton/FormSubmitButton.tsx b/client/src/components/Forms/FormButton/FormSubmitButton.tsx
new file mode 100644
index 0000000..3f0f5d0
--- /dev/null
+++ b/client/src/components/Forms/FormButton/FormSubmitButton.tsx
@@ -0,0 +1,24 @@
+import styles from "./FormSubmitButton.module.css";
+
+export interface FormSubmitButtonProps {
+ text: string;
+ disabled?: boolean;
+}
+
+const FormSubmitButton: React.FC
+ {displayProfiles.map((profile) => (
+
+ 
+
+ ))}
+ {hasMore && (
+
+
+
+ )}
+
+
+
+
+ {error && {error}}
+ {hint && (
+
+ );
+};
+
+export default InputGroup;
diff --git a/client/src/components/Layout/HorizontalRule/HorizontalRule.module.css b/client/src/components/Layout/HorizontalRule/HorizontalRule.module.css
new file mode 100644
index 0000000..761e63b
--- /dev/null
+++ b/client/src/components/Layout/HorizontalRule/HorizontalRule.module.css
@@ -0,0 +1,8 @@
+.horizontalRule {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-text-gray);
+ opacity: 0.25;
+ border-radius: 1px;
+ margin: 0.2rem 0;
+}
diff --git a/client/src/components/Layout/HorizontalRule/HorizontalRule.tsx b/client/src/components/Layout/HorizontalRule/HorizontalRule.tsx
new file mode 100644
index 0000000..7ef7ead
--- /dev/null
+++ b/client/src/components/Layout/HorizontalRule/HorizontalRule.tsx
@@ -0,0 +1,8 @@
+import { memo } from "react";
+import styles from "./HorizontalRule.module.css";
+
+const HorizontalRule: React.FC = () => {
+ return ;
+};
+
+export default memo(HorizontalRule);
diff --git a/client/src/components/Layout/VerticalRule/VerticalRule.module.css b/client/src/components/Layout/VerticalRule/VerticalRule.module.css
new file mode 100644
index 0000000..0d5edbd
--- /dev/null
+++ b/client/src/components/Layout/VerticalRule/VerticalRule.module.css
@@ -0,0 +1,7 @@
+.verticalRule {
+ width: 1.25px;
+ height: 100%;
+ background-color: var(--color-text-gray);
+ opacity: 0.25;
+ border-radius: 1px;
+}
diff --git a/client/src/components/Layout/VerticalRule/VerticalRule.tsx b/client/src/components/Layout/VerticalRule/VerticalRule.tsx
new file mode 100644
index 0000000..2a8534f
--- /dev/null
+++ b/client/src/components/Layout/VerticalRule/VerticalRule.tsx
@@ -0,0 +1,8 @@
+import { memo } from "react";
+import styles from "./VerticalRule.module.css";
+
+const VerticalRule: React.FC = () => {
+ return ;
+};
+
+export default memo(VerticalRule);
diff --git a/client/src/components/MainLayout/MainLayout.module.css b/client/src/components/MainLayout/MainLayout.module.css
new file mode 100644
index 0000000..99886de
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayout.module.css
@@ -0,0 +1,44 @@
+body {
+ font-family: "Inter", sans-serif;
+ background-color: var(--color-black);
+ color: var(--color-white);
+ font-size: var(--font-size-md);
+}
+
+/* Layout Container */
+.layoutContainer {
+ display: flex;
+ height: 100vh;
+ overflow: hidden;
+ padding: var(--spacing-sm);
+}
+
+/* Main Content */
+.mainContent {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ padding-left: var(--spacing-sm);
+ position: relative;
+}
+
+/* Content Area */
+.contentArea {
+ flex: 1;
+ overflow-y: auto;
+ padding: var(--spacing-xl) calc(var(--spacing-xl) - var(--spacing-sm))
+ calc(var(--now-playing-height) + var(--spacing-xl))
+ calc(var(--spacing-xl) - var(--spacing-sm));
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+ :root {
+ --sidebar-width: 0;
+ }
+
+ .mainContent {
+ padding-left: 0;
+ }
+}
diff --git a/client/src/components/MainLayout/MainLayout.tsx b/client/src/components/MainLayout/MainLayout.tsx
new file mode 100644
index 0000000..fa2c11d
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayout.tsx
@@ -0,0 +1,21 @@
+import styles from "./MainLayout.module.css";
+import {
+ MainLayoutHeader,
+ MainLayoutNowPlayingBar,
+ MainLayoutSidebar,
+} from "@components";
+
+const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ return (
+
+ {hint}
+
+ )}
+
+
+ );
+};
+
+export default MainLayout;
diff --git a/client/src/components/MainLayout/MainLayoutHeader/MainLayoutHeader.module.css b/client/src/components/MainLayout/MainLayoutHeader/MainLayoutHeader.module.css
new file mode 100644
index 0000000..55728cb
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayoutHeader/MainLayoutHeader.module.css
@@ -0,0 +1,121 @@
+/* Header */
+.header {
+ height: var(--header-height);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ z-index: 50;
+}
+
+.headerNav {
+ height: var(--header-height);
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ display: flex;
+ align-items: center;
+}
+
+.navbarLink,
+.navbarLinkActive {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ padding: 0 var(--spacing-md);
+ color: var(--color-text-gray) !important;
+ font-size: var(--font-size-sm);
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.navbarLink:hover {
+ color: var(--color-white) !important;
+}
+
+.navbarLinkActive {
+ color: var(--color-red) !important;
+}
+
+.navIcon {
+ font-size: var(--icon-size-sm);
+}
+
+/* Header Actions */
+.headerActions {
+ height: var(--header-height);
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ display: flex;
+}
+
+.iconButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 var(--spacing-md);
+ background: none;
+ border: none;
+ color: var(--color-text-gray) !important;
+ cursor: pointer;
+ border-radius: var(--border-radius-md);
+ transition: color var(--transition-speed) ease-in-out;
+ text-decoration: none;
+}
+
+.iconButton:hover {
+ color: var(--color-white) !important;
+}
+
+.actionIcon {
+ font-size: var(--icon-size-md);
+}
+
+/* Header shadow */
+.headerNav,
+.searchContainer,
+.headerActions {
+ position: relative;
+}
+
+.headerNav::after,
+.searchContainer::after,
+.headerActions::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ border-radius: inherit;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
+ pointer-events: none;
+}
+
+@media (max-width: 768px) {
+ .nowPlayingInfo {
+ max-width: 16rem;
+ }
+
+ .playlistButton {
+ display: none;
+ }
+
+ .progressContainer {
+ max-width: 40rem;
+ }
+
+ .navbarLink span,
+ .navbarLinkActive span {
+ display: none;
+ }
+
+ .nowPlayingBar {
+ left: var(--spacing-sm);
+ }
+}
+
+@media (max-width: 480px) {
+ .headerActions {
+ display: none;
+ }
+}
diff --git a/client/src/components/MainLayout/MainLayoutHeader/MainLayoutHeader.tsx b/client/src/components/MainLayout/MainLayoutHeader/MainLayoutHeader.tsx
new file mode 100644
index 0000000..3af3f5b
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayoutHeader/MainLayoutHeader.tsx
@@ -0,0 +1,78 @@
+import React, { memo } from "react";
+import { NavLink, Link } from "react-router-dom";
+import classNames from "classnames";
+
+import { useAuth } from "@contexts";
+import { MainLayoutSearchBar } from "@components";
+
+import styles from "./MainLayoutHeader.module.css";
+import {
+ LuHouse,
+ LuRss,
+ LuBell,
+ LuSettings,
+ LuCircleUser,
+} from "react-icons/lu";
+
+const MainLayoutHeader: React.FC = () => {
+ const { user, isAuthenticated } = useAuth();
+
+ return (
+
+ {children}
+
+
+ {isAuthenticated ? (
+ <>
+
+
+
+
+ setIsShareModalOpen(false)}
+ pageUrl={`${window.location.origin}/songs/${currentSong?.id}`}
+ pageTitle={currentSong?.title}
+ />
+
+ {currentSong && currentSong.image_url && (
+ setIsLightboxOpen(false)}
+ imageUrl={currentSong.image_url}
+ altText={`${currentSong.title} Cover`}
+ />
+ )}
+
+ );
+};
+
+export default memo(NowPlayingBar);
diff --git a/client/src/components/MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.module.css b/client/src/components/MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.module.css
new file mode 100644
index 0000000..f313c4c
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.module.css
@@ -0,0 +1,70 @@
+.searchContainer {
+ height: var(--header-height);
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.searchIcon {
+ position: absolute;
+ left: var(--spacing-md);
+ font-size: var(--icon-size-sm);
+ color: var(--color-text-gray);
+ pointer-events: none;
+}
+
+.searchInput {
+ font-family: "Inter", sans-serif;
+ width: 100%;
+ padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
+ calc(var(--spacing-md) * 3);
+ background-color: transparent;
+ border: none;
+ border-radius: var(--border-radius-lg);
+ color: var(--color-white);
+ font-size: var(--font-size-sm);
+ outline: none;
+}
+
+.searchInput::placeholder {
+ color: var(--color-text-gray);
+}
+.searchContainer {
+ height: var(--header-height);
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.searchIcon {
+ position: absolute;
+ left: var(--spacing-md);
+ font-size: var(--icon-size-sm);
+ color: var(--color-text-gray);
+ pointer-events: none;
+}
+
+.searchInput {
+ font-family: "Inter", sans-serif;
+ width: 100%;
+ padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
+ calc(var(--spacing-md) * 3);
+ background-color: transparent;
+ border: none;
+ border-radius: var(--border-radius-lg);
+ color: var(--color-white);
+ font-size: var(--font-size-sm);
+ outline: none;
+}
+
+.searchInput::placeholder {
+ color: var(--color-text-gray);
+}
diff --git a/client/src/components/MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.tsx b/client/src/components/MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.tsx
new file mode 100644
index 0000000..18e72ca
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.tsx
@@ -0,0 +1,18 @@
+import styles from "./MainLayoutSearchBar.module.css";
+import { LuSearch } from "react-icons/lu";
+
+const MainLayoutSearchBar: React.FC = () => {
+ return (
+ ;
+}
+
+const QueueManager: React.FC = ({
+ isOpen,
+ onClose,
+ buttonRef,
+}) => {
+ const { state, actions } = useAudioQueue();
+ const modalRef = useRef(null);
+ const [draggedIndex, setDraggedIndex] = useState(null);
+ const [dragOverIndex, setDragOverIndex] = useState(null);
+
+ const queueItems = state.queue.slice(state.currentIndex + 1);
+
+ useEffect(() => {
+ const handleEscape = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ onClose();
+ }
+ };
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ modalRef.current &&
+ !modalRef.current.contains(event.target as Node) &&
+ buttonRef.current &&
+ !buttonRef.current.contains(event.target as Node)
+ ) {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener("keydown", handleEscape);
+ document.addEventListener("mousedown", handleClickOutside);
+ document.body.style.overflow = "hidden";
+ }
+
+ return () => {
+ document.removeEventListener("keydown", handleEscape);
+ document.removeEventListener("mousedown", handleClickOutside);
+ document.body.style.overflow = "unset";
+ };
+ }, [isOpen, onClose, buttonRef]);
+
+ const handleRemoveFromQueue = useCallback(
+ (queueId: string) => {
+ actions.removeFromQueue(queueId);
+ },
+ [actions]
+ );
+
+ const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
+ setDraggedIndex(index);
+ e.dataTransfer.effectAllowed = "move";
+ e.dataTransfer.setData("text/html", "");
+ }, []);
+
+ const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = "move";
+ setDragOverIndex(index);
+ }, []);
+
+ const handleDragLeave = useCallback(() => {
+ setDragOverIndex(null);
+ }, []);
+
+ const handleDrop = useCallback(
+ (e: React.DragEvent, dropIndex: number) => {
+ e.preventDefault();
+
+ if (draggedIndex !== null && draggedIndex !== dropIndex) {
+ // add 1 for current song
+ const actualFromIndex = state.currentIndex + 1 + draggedIndex;
+ const actualToIndex = state.currentIndex + 1 + dropIndex;
+
+ actions.moveQueueItem(actualFromIndex, actualToIndex);
+ }
+
+ setDraggedIndex(null);
+ setDragOverIndex(null);
+ },
+ [draggedIndex, state.currentIndex, actions]
+ );
+
+ const handleDragEnd = useCallback(() => {
+ setDraggedIndex(null);
+ setDragOverIndex(null);
+ }, []);
+
+ const handleClearQueue = useCallback(() => {
+ actions.clearQueue(false, true);
+ }, [actions]);
+
+ if (!isOpen) return null;
+
+ return (
+ = ({ children }) => {
+ const { isAuthenticated, isLoading } = useAuth();
+ const location = useLocation();
+
+ if (isLoading) {
+ return ;
+ justification?: "left" | "center" | "right";
+}
+
+const QueueMenu: React.FC = ({
+ isOpen,
+ onClose,
+ song,
+ buttonRef,
+ justification = "center",
+}) => {
+ const { actions } = useAudioQueue();
+ const menuRef = useRef(null);
+
+ const handleEscape = useCallback(
+ (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ onClose();
+ }
+ },
+ [onClose]
+ );
+
+ const handleClickOutside = useCallback(
+ (event: MouseEvent) => {
+ if (
+ menuRef.current &&
+ !menuRef.current.contains(event.target as Node) &&
+ buttonRef.current &&
+ !buttonRef.current.contains(event.target as Node)
+ ) {
+ onClose();
+ }
+ },
+ [onClose, buttonRef]
+ );
+
+ useEffect(() => {
+ if (isOpen) {
+ document.addEventListener("keydown", handleEscape);
+ document.addEventListener("mousedown", handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener("keydown", handleEscape);
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [isOpen, handleEscape, handleClickOutside]);
+
+ const handleQueueNext = () => {
+ actions.queueNext(song);
+ onClose();
+ };
+
+ const handleQueueLast = () => {
+ actions.queueLast(song);
+ onClose();
+ };
+
+ if (!isOpen) return null;
+
+ return (
+ = ({
+ isOpen,
+ onClose,
+ pageUrl = window.location.href,
+ pageTitle = document.title,
+}) => {
+ const [copied, setCopied] = useState(false);
+
+ if (!isOpen) return null;
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(pageUrl);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ console.error("Failed to copy:", error);
+ }
+ };
+
+ interface ShareLink {
+ name: string;
+ icon: React.ComponentType;
+ url: string;
+ isEmail?: boolean;
+ }
+
+ const shareLinks: ShareLink[] = [
+ {
+ name: "Twitter",
+ icon: FaXTwitter,
+ url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+ pageUrl
+ )}&text=${encodeURIComponent(pageTitle)}`,
+ },
+ {
+ name: "Facebook",
+ icon: FaFacebook,
+ url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+ pageUrl
+ )}`,
+ },
+ {
+ name: "Reddit",
+ icon: FaReddit,
+ url: `https://reddit.com/submit?url=${encodeURIComponent(
+ pageUrl
+ )}&title=${encodeURIComponent(pageTitle)}`,
+ },
+ {
+ name: "Email",
+ icon: FaEnvelope,
+ url: `mailto:?subject=${encodeURIComponent(
+ pageTitle
+ )}&body=${encodeURIComponent(pageUrl)}`,
+ isEmail: true,
+ },
+ ];
+
+ const handleShareClick = (link: ShareLink): void => {
+ if (link.isEmail) {
+ window.location.href = link.url;
+ } else {
+ window.open(
+ link.url,
+ "_blank",
+ "noopener,noreferrer,width=600,height=400"
+ );
+ }
+ };
+
+ return (
+ ;
+ type: CardEntityType;
+ itemsPerView?: number;
+ cacheKey: string;
+ dependencies?: any[];
+}
+
+const SlidingCardList: React.FC = ({
+ title,
+ artistName,
+ fetchData,
+ type,
+ itemsPerView = 6,
+ cacheKey,
+ dependencies = [],
+}) => {
+ const [scrollPosition, setScrollPosition] = useState(0);
+ const [isScrolling, setIsScrolling] = useState(false);
+
+ const timeoutRef = useRef(undefined);
+
+ const asyncConfig = useMemo(
+ () => ({
+ items: fetchData,
+ }),
+ [fetchData]
+ );
+
+ const { data, loading, error } = useAsyncData(asyncConfig, dependencies, {
+ cacheKey,
+ hasBlobUrl: true,
+ });
+
+ const items = data?.items || [];
+ const scrollState = useMemo(() => {
+ const totalItems = items.length;
+ const maxScrollPosition = Math.max(0, totalItems - itemsPerView);
+ const needsScrolling = totalItems > itemsPerView;
+ const canScrollNext = scrollPosition < maxScrollPosition;
+ const canScrollPrevious = scrollPosition > 0;
+
+ return {
+ totalItems,
+ maxScrollPosition,
+ needsScrolling,
+ canScrollNext,
+ canScrollPrevious,
+ };
+ }, [items.length, itemsPerView, scrollPosition]);
+
+ const transformStyle = useMemo(
+ () => ({
+ transform: `translateX(-${scrollPosition * (CARD_WIDTH + CARD_GAP)}rem)`,
+ }),
+ [scrollPosition]
+ );
+
+ const handleScrollNext = useCallback(() => {
+ setIsScrolling(true);
+ setScrollPosition((prev) =>
+ Math.min(prev + itemsPerView, scrollState.maxScrollPosition)
+ );
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(
+ () => setIsScrolling(false),
+ SCROLL_TRANSITION_DURATION
+ );
+ }, [scrollState.maxScrollPosition, itemsPerView]);
+
+ const handleScrollPrevious = useCallback(() => {
+ setIsScrolling(true);
+ setScrollPosition((prev) => Math.max(prev - itemsPerView, 0));
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(
+ () => setIsScrolling(false),
+ SCROLL_TRANSITION_DURATION
+ );
+ }, [itemsPerView]);
+
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ };
+ }, []);
+
+ useEffect(() => {
+ setScrollPosition(0);
+ }, [cacheKey]);
+
+ const getEntityProps = useCallback(
+ (item: Song | Album | Playlist) => {
+ switch (type) {
+ case "song": {
+ const song = item as Song;
+ return {
+ type: "song" as const,
+ linkTo: `/songs/${song.id}`,
+ author:
+ getMainArtist(song.artists ?? [])?.display_name ||
+ artistName ||
+ "",
+ title: song.title,
+ subtitle: formatDateString(song.release_date),
+ imageUrl: song.image_url || musicPlaceholder,
+ entity: song,
+ };
+ }
+ case "album": {
+ const album = item as Album;
+ return {
+ type: "list" as const,
+ linkTo: `/albums/${album.id}`,
+ author: artistName || "",
+ title: album.title,
+ subtitle: formatDateString(album.release_date),
+ imageUrl: album.image_url || musicPlaceholder,
+ entity: album,
+ };
+ }
+ case "playlist": {
+ const playlist = item as Playlist;
+ return {
+ type: "list" as const,
+ linkTo: `/playlists/${playlist.id}`,
+ author: playlist.user?.username || "Unknown",
+ title: playlist.title,
+ subtitle: "",
+ imageUrl: playlist.image_url || musicPlaceholder,
+ entity: playlist,
+ };
+ }
+ default:
+ throw new Error(`Unknown entity type: ${type}`);
+ }
+ },
+ [type, artistName]
+ );
+
+ if (loading) {
+ return (
+ = ({
+ image,
+ title,
+ artist,
+ plays,
+ likes,
+ comments,
+}) => {
+ return (
+ = ({
+ mainArtist,
+ otherArtists,
+}) => {
+ //! user
+ const { isAuthenticated } = useAuth();
+ const navigate = useNavigate();
+
+ const [isFollowed, setIsFollowed] = useState(false);
+ const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+ const handleFollowArtist = useCallback(async () => {
+ try {
+ if (isAuthenticated) {
+ //! send request here
+ setIsFollowed((prev) => !prev);
+ } else {
+ navigate("/login");
+ }
+ } catch (error) {
+ console.error("Toggling follow artist failed:", error);
+ }
+ }, [isAuthenticated, navigate]);
+
+ const artistDisplayName = useMemo(
+ () => mainArtist?.display_name || mainArtist?.user?.username,
+ [mainArtist]
+ );
+
+ const artistImageUrl = useMemo(
+ () => mainArtist?.user?.profile_picture_url || userPlaceholder,
+ [mainArtist]
+ );
+
+ const OtherArtistItem = memo(({ artist }: { artist: SongArtist }) => (
+ = ({ song, songUrl }) => {
+ const { user, isAuthenticated } = useAuth();
+ const queryClient = useQueryClient();
+ const navigate = useNavigate();
+ const {
+ isLiked,
+ toggleLike,
+ isLoading: isLikeLoading,
+ } = useLikeStatus({
+ userId: user?.id || "",
+ entityId: song.id,
+ entityType: "song",
+ isAuthenticated,
+ });
+
+ const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+ const [queueMenuOpen, setQueueMenuOpen] = useState(false);
+
+ const queueButtonRef = useRef(null);
+
+ useEffect(() => {
+ if (user?.id && song?.id) {
+ queryClient.invalidateQueries({
+ queryKey: ["likeStatus", user.id, song.id, "song"],
+ });
+ }
+ }, [user?.id, song?.id]);
+
+ const handleToggleSongLike = async () => {
+ try {
+ if (!isAuthenticated) return navigate("/login");
+ await toggleLike();
+ } catch (error) {
+ console.error("Toggling song like failed:", error);
+ }
+ };
+
+ const handleAddToPlaylist = async () => {
+ try {
+ if (isAuthenticated) {
+ //! send request here
+ console.log("added to playlist: " + song.id);
+ } else {
+ navigate("/login");
+ }
+ } catch (error) {
+ console.error("Adding to playlist failed:", error);
+ }
+ };
+
+ const handleAddToQueue = async () => {
+ try {
+ if (isAuthenticated) {
+ setQueueMenuOpen((prev) => !prev);
+ } else {
+ navigate("/login");
+ }
+ } catch (error) {
+ console.error("Adding to queue failed:", error);
+ }
+ };
+
+ const handleShare = () => {
+ setIsShareModalOpen(true);
+ };
+
+ const handleReport = () => {
+ //! open report modal...
+ };
+
+ return (
+ <>
+ setIsShareModalOpen(false)}
+ pageUrl={songUrl}
+ pageTitle={song.title}
+ />
+
+ );
+};
+
+export default memo(SongActions);
diff --git a/client/src/components/SongPage/SongComments/SongComments.module.css b/client/src/components/SongPage/SongComments/SongComments.module.css
new file mode 100644
index 0000000..0bbe81a
--- /dev/null
+++ b/client/src/components/SongPage/SongComments/SongComments.module.css
@@ -0,0 +1,103 @@
+.commentsContainer {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+}
+
+.error {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.noComments {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.commentsContainerTop {
+ display: flex;
+ gap: var(--spacing-md);
+ align-items: center;
+}
+
+.commentUserPfp {
+ width: 4.8rem;
+ height: 4.8rem;
+ border-radius: 50%;
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ flex-shrink: 0;
+}
+
+.commentInputContainer {
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-sm);
+ border: 2px solid var(--color-panel-border);
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.commentInput {
+ font-family: "Inter", sans-serif;
+ width: 96%;
+ padding: var(--spacing-md);
+ background-color: transparent;
+ border: none;
+ border-radius: var(--border-radius-lg);
+ color: var(--color-white);
+ font-size: var(--font-size-sm);
+ outline: none;
+}
+
+.commentInput::placeholder {
+ color: var(--color-text-gray);
+}
+
+.commentButton {
+ position: absolute;
+ right: var(--spacing-sm);
+ font-size: var(--icon-size-md);
+ color: var(--color-text-gray);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-red);
+ border-radius: var(--border-radius-sm);
+ border: none;
+ color: var(--color-red-200);
+ cursor: pointer;
+ padding: var(--spacing-sm);
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.commentButton:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.commentButton:not(:disabled):hover {
+ color: var(--color-red-950) !important;
+}
+
+.commentLoaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ min-height: 15vh;
+}
+
+.commentsList {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-lg);
+ min-width: 0;
+ width: 100%;
+}
diff --git a/client/src/components/SongPage/SongComments/SongComments.tsx b/client/src/components/SongPage/SongComments/SongComments.tsx
new file mode 100644
index 0000000..bc14a77
--- /dev/null
+++ b/client/src/components/SongPage/SongComments/SongComments.tsx
@@ -0,0 +1,142 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAsyncData } from "@hooks";
+import { useAuth } from "@contexts";
+import { PuffLoader } from "react-spinners";
+import { commentApi } from "@api";
+import { CommentItem, HorizontalRule } from "@components";
+import styles from "./SongComments.module.css";
+import userPlaceholder from "@assets/user-placeholder.png";
+import { LuSend } from "react-icons/lu";
+
+export interface SongCommentsProps {
+ songId: string;
+}
+
+const SongComments: React.FC = ({ songId }) => {
+ const { user, isAuthenticated } = useAuth();
+ const navigate = useNavigate();
+
+ const [commentText, setCommentText] = useState("");
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const { data, loading, error } = useAsyncData(
+ {
+ comments: () =>
+ commentApi.getCommentsBySongId(songId, {
+ includeLikes: true,
+ currentUserId: isAuthenticated && user ? user.id : undefined,
+ limit: 25,
+ }),
+ },
+ [songId],
+ { cacheKey: `comments_${songId}`, hasBlobUrl: true }
+ );
+
+ const comments = data?.comments;
+
+ const handleCommentChange = useCallback(
+ (e: React.ChangeEvent) => {
+ setCommentText(e.target.value);
+ },
+ []
+ );
+
+ const handleAddComment = useCallback(() => {
+ if (!commentText.trim()) return;
+
+ try {
+ if (isAuthenticated) {
+ setIsSubmitting(true);
+ //! send request with commentText
+ console.log("added comment to song: " + songId, commentText);
+ setCommentText("");
+ } else {
+ navigate("/login");
+ }
+ } catch (error) {
+ console.error("Adding comment failed:", error);
+ } finally {
+ setIsSubmitting(false);
+ }
+ }, [isAuthenticated, navigate, songId, commentText, isSubmitting]);
+
+ const handleKeyPress = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleAddComment();
+ }
+ },
+ [handleAddComment]
+ );
+
+ const userProfilePic = useMemo(
+ () => user?.profile_picture_url || userPlaceholder,
+ [user]
+ );
+
+ if (error) {
+ return = ({
+ coverGradient,
+ song,
+ mainArtist,
+ numberComments,
+}) => {
+ const { actions } = useAudioQueue();
+ const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+ useStreamTracking();
+
+ const gradientStyle = useMemo(
+ () =>
+ ({
+ "--cover-gradient-color1": `rgba(${coverGradient.color1.r}, ${coverGradient.color1.g}, ${coverGradient.color1.b}, 0.2)`,
+ "--cover-gradient-color2": `rgba(${coverGradient.color2.r}, ${coverGradient.color2.g}, ${coverGradient.color2.b}, 0.2)`,
+ } as React.CSSProperties),
+ [coverGradient]
+ );
+
+ const InteractionStat = memo(
+ ({ icon: Icon, value }: { icon: React.ElementType; value: number }) => (
+ = ({ genre, releaseDate }) => {
+ const formattedDate = useMemo(
+ () => formatDateString(releaseDate),
+ [releaseDate]
+ );
+
+ return (
+ = ({ songId }) => {
+ const { data, loading, error } = useAsyncData(
+ {
+ weeklyPlays: () => songApi.getWeeklyPlays(songId),
+ },
+ [songId],
+ { cacheKey: `weekly_plays_${songId}` }
+ );
+
+ const playsData = data?.weeklyPlays || { weeks: [], plays: [] };
+ const plays = playsData.plays ?? [];
+ const weeks = playsData.weeks ?? [];
+
+ const domainLimit = useCallback(
+ (_: any, maxValue: number) => ({
+ min: -maxValue / 6,
+ max: maxValue,
+ }),
+ []
+ );
+
+ const sparkLineSettings = useMemo(
+ () => ({
+ data: plays,
+ baseline: "min",
+ xAxis: { id: "week-axis", data: weeks },
+ yAxis: {
+ domainLimit: domainLimit,
+ },
+ sx: CHART_SX,
+ slotProps: CHART_SLOT_PROPS,
+ clipAreaOffset: CLIP_AREA_OFFSET,
+ axisHighlight: { x: "line" },
+ }),
+ [plays, weeks]
+ );
+
+ if (
+ !playsData ||
+ !plays.length ||
+ !weeks.length ||
+ plays.length == 1 ||
+ weeks.length == 1 ||
+ error
+ ) {
+ return (
+ = ({
+ song,
+ mainArtist,
+}) => {
+ const songId = song.id;
+ const { user, isAuthenticated } = useAuth();
+
+ const asyncConfig = useMemo(
+ () => ({
+ ...(mainArtist && {
+ moreSongsByArtist: async () =>
+ artistApi.getSongs(mainArtist.id, {
+ includeArtists: true,
+ limit: 5,
+ }),
+ }),
+ suggestedSongs: () =>
+ songApi.getSuggestedSongs(songId, {
+ userId: isAuthenticated && user ? user.id : undefined,
+ includeArtists: true,
+ limit: 5,
+ }),
+ }),
+ [songId, mainArtist, isAuthenticated, user]
+ );
+
+ const { data, loading, error } = useAsyncData(
+ asyncConfig,
+ [songId, mainArtist],
+ { cacheKey: `suggestions_song_${songId}`, hasBlobUrl: true }
+ );
+
+ if (error) {
+ return = ({
+ audioSrc,
+ captureKeyboard,
+ onPlay,
+ disabled,
+}) => {
+ const [isReady, setIsReady] = useState(false);
+ const [showSkeleton, setShowSkeleton] = useState(true);
+
+ const { state, actions } = useAudioQueue();
+ const { isPlaying, progress, duration, currentSong, error } = state;
+
+ const waveformRef = useRef(null);
+ const wavesurferRef = useRef(null);
+ const measureRef = useRef(null);
+ const skeletonBarsRef = useRef([]);
+ const prevCurrentSongRef = useRef(null);
+
+ const isCurrentSong = currentSong?.audio_url === audioSrc;
+
+ const rawWidth = useElementWidth(measureRef);
+ const wrapperWidth = useMemo(
+ () => Math.floor(rawWidth / 10) * 10,
+ [rawWidth]
+ );
+
+ const barSlot = BAR_WIDTH + BAR_GAP;
+ const skeletonCount = Math.max(
+ 1,
+ Math.floor((wrapperWidth - SKELETON_PADDING) / barSlot)
+ );
+
+ if (skeletonBarsRef.current.length !== skeletonCount) {
+ skeletonBarsRef.current = new Array(skeletonCount)
+ .fill(0)
+ .map(() => 20 + Math.floor(Math.random() * 80));
+ }
+
+ const skeletonBars = skeletonBarsRef.current;
+
+ const togglePlay = useCallback(() => {
+ if (isCurrentSong) {
+ if (isPlaying) {
+ actions.pause();
+ } else {
+ actions.resume();
+ }
+ } else {
+ onPlay?.();
+ }
+ }, [isCurrentSong, isPlaying, actions, onPlay]);
+
+ const handleReady = useCallback(() => {
+ setIsReady(true);
+ setTimeout(() => setShowSkeleton(false), 100);
+ }, []);
+
+ const handleWaveformClick = useCallback(
+ (relativeX: number) => {
+ const ws = wavesurferRef.current;
+ if (!ws) return;
+
+ if (state.currentSong?.audio_url !== audioSrc) return;
+
+ if (state.duration > 0) {
+ const seekTime = relativeX * state.duration;
+ actions.seek(seekTime);
+ }
+ },
+ [audioSrc, actions]
+ );
+
+ const handleError = useCallback((error: any) => {
+ console.error("WaveSurfer error:", error);
+ setIsReady(false);
+ }, []);
+
+ useEffect(() => {
+ if (!captureKeyboard || !isCurrentSong) return;
+
+ const handleKeyPress = (e: KeyboardEvent) => {
+ if (
+ e.code === "Space" &&
+ e.target instanceof HTMLElement &&
+ !["INPUT", "TEXTAREA"].includes(e.target.tagName)
+ ) {
+ e.preventDefault();
+ e.stopPropagation();
+ togglePlay();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyPress, { capture: true });
+ return () =>
+ window.removeEventListener("keydown", handleKeyPress, {
+ capture: true,
+ });
+ }, [captureKeyboard, togglePlay, isCurrentSong]);
+
+ useEffect(() => {
+ setShowSkeleton(true);
+ setIsReady(false);
+ }, [audioSrc]);
+
+ const hoverPlugin = useMemo(
+ () =>
+ Hover.create({
+ lineColor: "#B22323",
+ lineWidth: LINE_WIDTH,
+ labelBackground: "#B22323",
+ labelColor: "#F6F6F6",
+ labelSize: "11px",
+ }),
+ []
+ );
+
+ useEffect(() => {
+ if (!waveformRef.current || !audioSrc) return;
+
+ const loadAudioWithCORSBypass = async () => {
+ try {
+ const ws = WaveSurfer.create({
+ container: waveformRef.current!,
+ height: WAVEFORM_HEIGHT,
+ waveColor: "#F6F6F6",
+ progressColor: "#d53131",
+ barWidth: BAR_WIDTH,
+ barRadius: BAR_RADIUS,
+ barGap: BAR_GAP,
+ normalize: true,
+ backend: "MediaElement" as const,
+ sampleRate: 44100,
+ autoplay: false,
+ plugins: [hoverPlugin],
+ });
+
+ ws.on("ready", handleReady);
+ ws.on("error", handleError);
+ wavesurferRef.current = ws;
+
+ const urlParts = audioSrc.split("/");
+ const filename = urlParts[urlParts.length - 1].split("?")[0];
+
+ const proxyUrl = `/api/proxy/audio/${filename}`;
+ const response = await fetch(proxyUrl);
+ if (!response.ok) {
+ throw new Error(`Failed to fetch audio: ${response.status}`);
+ }
+
+ const arrayBuffer = await response.arrayBuffer();
+
+ const audioContext = new (window.AudioContext ||
+ (window as any).webkitAudioContext)();
+ const decodedData = await audioContext.decodeAudioData(arrayBuffer);
+
+ const channelsNumber = decodedData.numberOfChannels;
+ const peaks =
+ channelsNumber > 1
+ ? [decodedData.getChannelData(0), decodedData.getChannelData(1)]
+ : [decodedData.getChannelData(0)];
+ const duration = decodedData.duration;
+
+ ws.load(proxyUrl, peaks, duration);
+ } catch (error) {
+ console.error("Failed to load audio:", error);
+ handleError(error);
+ }
+ };
+
+ loadAudioWithCORSBypass();
+
+ return () => {
+ if (wavesurferRef.current) {
+ wavesurferRef.current.un("ready", handleReady);
+ wavesurferRef.current.un("error", handleError);
+ wavesurferRef.current.destroy();
+ }
+ };
+ }, [audioSrc, handleReady, handleError, hoverPlugin]);
+
+ useEffect(() => {
+ const ws = wavesurferRef.current;
+ if (!ws) return;
+
+ ws.on("click", handleWaveformClick);
+ return () => {
+ ws.un("click", handleWaveformClick);
+ };
+ }, [handleWaveformClick]);
+
+ useEffect(() => {
+ if (!wavesurferRef.current) return;
+
+ const currentAudioUrl = currentSong?.audio_url || null;
+ const prevAudioUrl = prevCurrentSongRef.current;
+
+ if (currentAudioUrl !== prevAudioUrl) {
+ prevCurrentSongRef.current = currentAudioUrl;
+
+ if (currentAudioUrl === audioSrc) {
+ return;
+ } else {
+ wavesurferRef.current.seekTo(0);
+ return;
+ }
+ }
+
+ if (isCurrentSong && duration > 0 && progress > 1) {
+ const progressPercent = progress / duration;
+ wavesurferRef.current.seekTo(progressPercent);
+ }
+ }, [currentSong?.audio_url, audioSrc, isCurrentSong, progress, duration]);
+
+ return (
+ ;
+ cacheKey: string;
+ dependencies?: any[];
+ viewMoreLink?: string;
+}
+
+const SongsList: React.FC = ({
+ title,
+ fetchData,
+ cacheKey,
+ dependencies = [],
+ viewMoreLink,
+}) => {
+ const asyncConfig = useMemo(
+ () => ({
+ songs: fetchData,
+ }),
+ [fetchData]
+ );
+
+ const { data, loading, error } = useAsyncData(asyncConfig, dependencies, {
+ cacheKey,
+ hasBlobUrl: true,
+ });
+
+ if (loading) {
+ return (
+
+
+
+
+
+ ({});
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!query.trim()) return;
+
+ const loadResults = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const data = await fetchSearch(query, "all", 20, 0);
+ setResults(data);
+ } catch (err) {
+ console.error("Search failed:", err);
+ setError("Failed to load search results. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadResults();
+ }, [query]);
+
+ const songs = results.songs ?? [];
+ const artists = results.artists ?? [];
+ const albums = results.albums ?? [];
+ const playlists = results.playlists ?? [];
+
+ return (
+ <>
+
+
+
+
Test Page
-
+
-
+
+ 
setIsLightboxOpen(true)}
+ />
+
+
+
+ {mainArtist.id ? (
+
+ {mainArtist.display_name || "Unknown Artist"}
+
+ ) : (
+
+ {mainArtist.display_name || "Unknown Artist"}
+
+ )}
+
+ {currentSong?.title || "Unknown Song"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatPlaybackTime(progress)}
+
+
+
+
+
+ 0 ? (progress / duration) * 100 : 0}%`,
+ }}
+ />
+
+
+
+ {formatPlaybackTime(duration)}
+
+
+
+
+
+
+ setIsQueueManagerOpen(false)}
+ buttonRef={queueButtonRef}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default MainLayoutSearchBar;
diff --git a/client/src/components/MainLayout/MainLayoutSidebar/MainLayoutSidebar.module.css b/client/src/components/MainLayout/MainLayoutSidebar/MainLayoutSidebar.module.css
new file mode 100644
index 0000000..64e1f21
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayoutSidebar/MainLayoutSidebar.module.css
@@ -0,0 +1,72 @@
+.sidebar {
+ width: var(--sidebar-width);
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: var(--spacing-lg) 0;
+ border: 2px solid var(--color-panel-border);
+ z-index: 100;
+}
+
+.sidebarTop {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xl);
+}
+
+.sidebarLogo {
+ display: flex;
+ justify-content: center;
+}
+
+.logoImage {
+ width: var(--icon-size-xl);
+ height: var(--icon-size-xl);
+}
+
+.sidebarNav {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xl);
+}
+
+.sidebarLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-text-gray) !important;
+ border-radius: var(--border-radius-md);
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.sidebarLink:hover {
+ color: var(--color-white) !important;
+}
+
+.sidebarIcon {
+ font-size: var(--icon-size-md);
+}
+
+.logoutButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-text-gray) !important;
+ border-radius: var(--border-radius-md);
+ transition: color var(--transition-speed) ease-in-out;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.logoutButton:hover {
+ color: var(--color-white) !important;
+}
+
+@media (max-width: 768px) {
+ .sidebar {
+ display: none;
+ }
+}
diff --git a/client/src/components/MainLayout/MainLayoutSidebar/MainLayoutSidebar.tsx b/client/src/components/MainLayout/MainLayoutSidebar/MainLayoutSidebar.tsx
new file mode 100644
index 0000000..36b50f6
--- /dev/null
+++ b/client/src/components/MainLayout/MainLayoutSidebar/MainLayoutSidebar.tsx
@@ -0,0 +1,61 @@
+import React, { useCallback } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "@contexts";
+import styles from "./MainLayoutSidebar.module.css";
+import logo from "@assets/logo.svg";
+import {
+ LuListMusic,
+ LuLibrary,
+ LuDisc3,
+ LuUserPen,
+ LuHistory,
+ LuLogOut,
+} from "react-icons/lu";
+
+const MainLayoutSidebar: React.FC = () => {
+ const { logout, isAuthenticated } = useAuth();
+ const navigate = useNavigate();
+
+ const handleLogout = useCallback(async () => {
+ try {
+ await logout();
+ navigate("/");
+ } catch (error) {
+ console.error("Logout failed:", error);
+ }
+ }, [logout, navigate]);
+
+ return (
+
+ );
+};
+
+export default MainLayoutSidebar;
diff --git a/client/src/components/MainLayout/QueueManager/QueueManager.module.css b/client/src/components/MainLayout/QueueManager/QueueManager.module.css
new file mode 100644
index 0000000..db9a1b1
--- /dev/null
+++ b/client/src/components/MainLayout/QueueManager/QueueManager.module.css
@@ -0,0 +1,222 @@
+.queueManager {
+ position: absolute;
+ bottom: calc(var(--now-playing-height) - var(--spacing-md));
+ right: 0;
+ background: var(--color-panel-gray);
+ border: 2px solid var(--color-panel-border);
+ border-radius: var(--border-radius-md);
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ z-index: 1000;
+ animation: menuFadeIn var(--transition-speed) ease-out;
+ width: 32rem;
+ max-height: 40rem;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-x: hidden;
+}
+
+@keyframes menuFadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--spacing-md);
+ border-bottom: 1px solid var(--color-panel-border);
+}
+
+.headerButtons {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+}
+
+.title {
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-white);
+ margin: 0;
+}
+
+.closeButton {
+ background: none;
+ border: none;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-lg);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-xs);
+ border-radius: var(--border-radius-sm);
+ transition: all var(--transition-speed) ease;
+}
+
+.closeButton:hover {
+ color: var(--color-white);
+ background: var(--color-panel-border);
+}
+
+.clearButton {
+ background: none;
+ border: none;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-lg);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-xs);
+ transition: all var(--transition-speed) ease;
+}
+
+.clearButton:hover {
+ color: var(--color-red);
+}
+
+.clearButton:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.clearButton:disabled:hover {
+ color: var(--color-text-gray);
+ background: none;
+}
+
+.queueContent {
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.emptyQueue {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-lg);
+}
+
+.emptyText {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.queueList {
+ overflow-y: auto;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ max-height: 32rem;
+}
+
+.queueItem {
+ background: var(--color-panel-gray);
+ padding: var(--spacing-md);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+ cursor: grab;
+ transition: all var(--transition-speed) ease;
+ user-select: none;
+ border-bottom: 1px solid var(--color-panel-border);
+}
+
+.queueItem:hover {
+ background: var(--color-panel-border);
+}
+
+.queueItem:last-child {
+ border-bottom: none;
+}
+
+.queueItemUserQueued {
+ background: var(--color-gray-button);
+}
+
+.queueItemUserQueued:hover {
+ background: var(--color-gray-button-hover);
+}
+
+.queueItemDragging {
+ opacity: 0.5;
+ cursor: grabbing;
+}
+
+.queueItemDragOver {
+ background: var(--color-gray-button-hover);
+ border-top: 2px solid var(--color-red);
+}
+
+.dragHandle {
+ color: var(--color-text-gray);
+ font-size: var(--font-size-md);
+ cursor: grab;
+ display: flex;
+ align-items: center;
+ transition: color var(--transition-speed) ease;
+}
+
+.queueItem:hover .dragHandle {
+ color: var(--color-white);
+}
+
+.queueItemDragging .dragHandle {
+ cursor: grabbing;
+}
+
+.songInfo {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+ min-width: 0;
+}
+
+.artistName {
+ font-size: var(--font-size-xs);
+ color: var(--color-text-gray);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.songTitle {
+ font-size: var(--font-size-sm);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.removeButton {
+ background: none;
+ border: none;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-md);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-xs);
+ border-radius: var(--border-radius-sm);
+ transition: all var(--transition-speed) ease;
+}
+
+.removeButton:hover {
+ color: var(--color-red);
+ background: rgba(213, 49, 49, 0.1);
+}
diff --git a/client/src/components/MainLayout/QueueManager/QueueManager.tsx b/client/src/components/MainLayout/QueueManager/QueueManager.tsx
new file mode 100644
index 0000000..327bede
--- /dev/null
+++ b/client/src/components/MainLayout/QueueManager/QueueManager.tsx
@@ -0,0 +1,183 @@
+import { memo, useEffect, useRef, useState, useCallback } from "react";
+import { LuX, LuGripHorizontal, LuTrash } from "react-icons/lu";
+import { useAudioQueue } from "@contexts";
+import { getMainArtist } from "@util";
+import classNames from "classnames";
+import styles from "./QueueManager.module.css";
+
+interface QueueManagerProps {
+ isOpen: boolean;
+ onClose: () => void;
+ buttonRef: React.RefObject
+
+ );
+};
+
+export default memo(QueueManager);
diff --git a/client/src/components/PageLoader/PageLoader.module.css b/client/src/components/PageLoader/PageLoader.module.css
new file mode 100644
index 0000000..6a30b67
--- /dev/null
+++ b/client/src/components/PageLoader/PageLoader.module.css
@@ -0,0 +1,8 @@
+.loaderContainer {
+ position: fixed;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+}
diff --git a/client/src/components/PageLoader/PageLoader.tsx b/client/src/components/PageLoader/PageLoader.tsx
new file mode 100644
index 0000000..beda0d8
--- /dev/null
+++ b/client/src/components/PageLoader/PageLoader.tsx
@@ -0,0 +1,13 @@
+import styles from "./PageLoader.module.css";
+import { PuffLoader } from "react-spinners";
+import React from "react";
+
+const PageLoader: React.FC = () => {
+ return (
+
+
+
+ Queue
+
+
+
+
+
+ {queueItems.length === 0 ? (
+
+
+ No songs in queue
+
+ ) : (
+
+ {queueItems.map((item, index) => {
+ const mainArtist = getMainArtist(item.song.artists ?? []);
+ const isDragging = draggedIndex === index;
+ const isDragOver = dragOverIndex === index;
+
+ return (
+
+ )}
+ handleDragStart(e, index)}
+ onDragOver={(e) => handleDragOver(e, index)}
+ onDragLeave={handleDragLeave}
+ onDrop={(e) => handleDrop(e, index)}
+ onDragEnd={handleDragEnd}
+ >
+
+ );
+ })}
+
+
+
+
+
+ {mainArtist?.display_name || "Unknown Artist"}
+
+ {item.song.title}
+
+
+
+
+
+ );
+};
+
+export default PageLoader;
diff --git a/client/src/components/ProtectedRoute/ProtectedRoute.tsx b/client/src/components/ProtectedRoute/ProtectedRoute.tsx
new file mode 100644
index 0000000..01f9243
--- /dev/null
+++ b/client/src/components/ProtectedRoute/ProtectedRoute.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "../../contexts";
+import { PageLoader } from "../";
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC
+
+
+
+ );
+};
+
+export default memo(QueueMenu);
diff --git a/client/src/components/ShareModal/ShareModal.module.css b/client/src/components/ShareModal/ShareModal.module.css
new file mode 100644
index 0000000..080a60b
--- /dev/null
+++ b/client/src/components/ShareModal/ShareModal.module.css
@@ -0,0 +1,192 @@
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(4px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.modal {
+ background: var(--color-panel-gray);
+ border: 2px solid var(--color-panel-border);
+ border-radius: var(--border-radius-md);
+ width: 90%;
+ max-width: 46rem;
+ padding: var(--spacing-lg);
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
+ 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ animation: slideIn 0.2s ease-out;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-lg);
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95) translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.title {
+ font-size: 2rem;
+ font-weight: 600;
+ color: var(--color-white);
+ margin: 0;
+}
+
+.closeButton {
+ background: none;
+ border: none;
+ color: var(--color-text-gray);
+ font-size: 2rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all var(--transition-speed) ease;
+}
+
+.closeButton:hover {
+ color: var(--color-white);
+}
+
+.socialIcons {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: var(--spacing-sm);
+}
+
+.socialButton {
+ font-family: "Inter", sans-serif;
+ background: var(--color-gray-button);
+ border: 1px solid var(--color-gray-button-border);
+ border-radius: var(--border-radius-md);
+ padding: 2rem 1.2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 1.2rem;
+ cursor: pointer;
+ transition: background var(--transition-speed) ease;
+ color: var(--color-white);
+ font-size: var(--font-size-lg);
+}
+
+.socialButton:hover {
+ background: var(--color-gray-button-border);
+}
+
+.socialLabel {
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ color: var(--color-white-hover);
+}
+
+.linkSection {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ line-height: 1.1;
+}
+
+.linkLabel {
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ color: var(--color-white-hover);
+}
+
+.linkInputWrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.linkInput {
+ font-family: "Inter", sans-serif;
+ width: 100%;
+ background: var(--color-gray-button);
+ border: 1px solid var(--color-gray-button-border);
+ border-radius: var(--border-radius-md);
+ padding: 1.04rem 4.58rem 1.04rem 1.25rem;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+ font-family: inherit;
+ transition: all var(--transition-speed) ease;
+}
+
+.copyButton {
+ position: absolute;
+ right: 0.3125rem;
+ background: var(--color-gray-button-border);
+ border: none;
+ border-radius: 0.6rem;
+ padding: 0.8rem;
+ color: var(--color-white-hover);
+ font-size: var(--font-size-md);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all var(--transition-speed) ease;
+}
+
+.copyButton:hover {
+ background: #5d5d5d;
+ color: var(--color-white);
+}
+
+.tooltip {
+ position: absolute;
+ bottom: calc(100% + 0.8rem);
+ left: 50%;
+ transform: translateX(-50%);
+ background: var(--color-white);
+ color: var(--color-panel-gray);
+ padding: 0.6rem 1.2rem;
+ border-radius: 0.6rem;
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ white-space: nowrap;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+ animation: tooltipFadeIn var(--transition-speed) ease-out;
+ pointer-events: none;
+}
+
+@keyframes tooltipFadeIn {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+}
diff --git a/client/src/components/ShareModal/ShareModal.tsx b/client/src/components/ShareModal/ShareModal.tsx
new file mode 100644
index 0000000..50ce23c
--- /dev/null
+++ b/client/src/components/ShareModal/ShareModal.tsx
@@ -0,0 +1,135 @@
+import { useState, memo } from "react";
+import { FaXTwitter, FaFacebook, FaReddit, FaEnvelope } from "react-icons/fa6";
+import { LuCopy, LuX } from "react-icons/lu";
+import styles from "./ShareModal.module.css";
+
+interface ShareModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ pageUrl?: string;
+ pageTitle?: string;
+}
+
+const ShareModal: React.FC
+
+ );
+};
+
+export default memo(ShareModal);
diff --git a/client/src/components/SlidingCardList/SlidingCardList.module.css b/client/src/components/SlidingCardList/SlidingCardList.module.css
new file mode 100644
index 0000000..7a34501
--- /dev/null
+++ b/client/src/components/SlidingCardList/SlidingCardList.module.css
@@ -0,0 +1,100 @@
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-xl);
+ min-height: 10rem;
+}
+
+.error {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-xl);
+ color: var(--color-text-gray);
+ font-size: var(--font-size-md);
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+}
+
+.sectionTitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.withNavigation {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+ width: 100%;
+}
+
+.scrollContainer {
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+ min-width: 0;
+ width: 0;
+}
+
+.list {
+ display: flex;
+ gap: var(--spacing-lg);
+ min-width: 0;
+ transition: transform 0.3s ease;
+ width: max-content;
+}
+
+.navButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: none;
+ color: var(--color-text-gray);
+ cursor: pointer;
+ font-size: var(--icon-size-lg);
+ padding: var(--spacing-sm);
+ transition: all var(--transition-speed) ease;
+ flex-shrink: 0;
+}
+
+.navButton:hover:not(:disabled) {
+ color: var(--color-white);
+ transform: scale(1.1);
+}
+
+.navButton:disabled {
+ opacity: 0.3;
+ cursor: not-allowed;
+}
+
+.scrollGradient {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(
+ to right,
+ rgba(8, 8, 8, 0.7) 0%,
+ transparent 8%,
+ transparent 92%,
+ rgba(8, 8, 8, 0.7) 100%
+ );
+ pointer-events: none;
+ z-index: 2;
+ opacity: 1;
+ transition: opacity var(--transition-speed) ease;
+}
diff --git a/client/src/components/SlidingCardList/SlidingCardList.tsx b/client/src/components/SlidingCardList/SlidingCardList.tsx
new file mode 100644
index 0000000..f65e1fe
--- /dev/null
+++ b/client/src/components/SlidingCardList/SlidingCardList.tsx
@@ -0,0 +1,222 @@
+import { memo, useCallback, useState, useMemo, useRef, useEffect } from "react";
+import { PuffLoader } from "react-spinners";
+import { LuChevronLeft, LuChevronRight } from "react-icons/lu";
+import type { Song, Album, Playlist } from "@types";
+import { useAsyncData } from "@hooks";
+import { EntityItemCard } from "@components";
+import { formatDateString, getMainArtist } from "@util";
+import styles from "./SlidingCardList.module.css";
+import musicPlaceholder from "@assets/music-placeholder.png";
+
+type CardEntityType = "song" | "album" | "playlist";
+
+const CARD_WIDTH = 18;
+const CARD_GAP = 2.4;
+const SCROLL_TRANSITION_DURATION = 300;
+
+export interface SlidingCardListProps {
+ title: string;
+ artistName?: string;
+ fetchData: () => Promise e.stopPropagation()}>
+
+
+
+
+ Share
+ +
+ {shareLinks.map((link) => {
+ const Icon = link.icon;
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ {copied &&
+ Copied!
}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+ Failed to load {title.toLowerCase()}.
+ );
+ }
+
+ if (!items || items.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {title}
+ {scrollState.needsScrolling ? (
+
+ );
+};
+
+export default memo(SlidingCardList);
diff --git a/client/src/components/SongCard/SongCard.module.css b/client/src/components/SongCard/SongCard.module.css
new file mode 100644
index 0000000..7357313
--- /dev/null
+++ b/client/src/components/SongCard/SongCard.module.css
@@ -0,0 +1,105 @@
+.songCard {
+ background-color: #181818;
+ border-radius: 12px;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ transition: background-color 0.2s ease, transform 0.2s ease;
+ cursor: pointer;
+}
+
+.songCard:hover {
+ background-color: #202020;
+ transform: translateY(-4px);
+}
+
+.imageContainer {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.songImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+}
+
+.overlay {
+ position: absolute;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ opacity: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: opacity 0.2s ease;
+}
+
+.imageContainer:hover .overlay {
+ opacity: 1;
+}
+
+.playButton {
+ width: 48px;
+ height: 48px;
+ background-color: #e63946;
+ border: none;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.playButton:hover {
+ transform: scale(1.1);
+ background-color: #ff4d5a;
+}
+
+.songInfo {
+ text-align: center;
+}
+
+.songTitle {
+ font-weight: 600;
+ color: #ffffff;
+ margin-bottom: 4px;
+ font-size: 0.95rem;
+}
+
+.songArtist {
+ font-size: 0.8rem;
+ color: #aaa;
+}
+
+.songStats {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ margin-top: 8px;
+}
+
+.statItem {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: #aaa;
+ font-size: 0.8rem;
+ transition: color 0.2s ease;
+}
+
+.statItem:hover {
+ color: #fff;
+}
+
+.statIcon {
+ width: 14px;
+ height: 14px;
+ fill: currentColor;
+}
diff --git a/client/src/components/SongCard/SongCard.tsx b/client/src/components/SongCard/SongCard.tsx
new file mode 100644
index 0000000..83dcfe2
--- /dev/null
+++ b/client/src/components/SongCard/SongCard.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styles from "./SongCard.module.css";
+
+export interface SongCardProps {
+ image: string;
+ title: string;
+ artist: string;
+ plays: number;
+ likes: number;
+ comments: number;
+}
+
+const SongCard: React.FC
+
+
+ ) : (
+
+
+
+
+ {items.map((item) => {
+ const props = getEntityProps(item);
+ return
+
+
+ {items.map((item) => {
+ const props = getEntityProps(item);
+ return
+ )}
+
+
+ );
+};
+
+export default SongCard;
diff --git a/client/src/components/SongPage/ArtistInfo/ArtistInfo.module.css b/client/src/components/SongPage/ArtistInfo/ArtistInfo.module.css
new file mode 100644
index 0000000..49a235e
--- /dev/null
+++ b/client/src/components/SongPage/ArtistInfo/ArtistInfo.module.css
@@ -0,0 +1,231 @@
+.artistInfoLayout {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ min-width: 0;
+ width: 100%;
+}
+
+.artistInfoContainer {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--spacing-md);
+ height: auto;
+ background: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ padding: var(--spacing-md);
+ min-width: 0;
+}
+
+.artistInfoLeft {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1.2rem;
+ width: 11rem;
+}
+
+.artistImage {
+ width: 11rem;
+ height: 11rem;
+ border-radius: 50%;
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ flex-shrink: 0;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+}
+
+.artistFollowButton {
+ font-family: "Inter", sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ background: var(--color-red);
+ border-radius: var(--border-radius-sm);
+ border: none;
+ color: var(--color-red-200);
+ cursor: pointer;
+ font-size: var(--font-size-sm);
+ padding: var(--spacing-sm) var(--spacing-md);
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.artistFollowButton:hover {
+ background-color: var(--color-red-700);
+}
+
+.artistFollowButtonActive {
+ background-color: var(--color-red-700);
+}
+
+.artistInfoRight {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ min-width: 0;
+ font-size: var(--font-size-sm);
+ padding: var(--spacing-sm) 0;
+}
+
+.artistNameContainer {
+ min-width: 0;
+ display: flex;
+ gap: var(--spacing-sm);
+ align-items: center;
+}
+
+.artistInfoName {
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+ transition: color var(--transition-speed) ease-in-out;
+ cursor: pointer;
+}
+
+.artistInfoName:hover {
+ color: var(--color-red);
+}
+
+.badgeWrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.tooltip {
+ position: absolute;
+ bottom: calc(100% + var(--spacing-sm));
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(246, 246, 246, 0.8);
+ color: var(--color-black);
+ padding: 0.6rem 1.2rem;
+ border-radius: var(--border-radius-sm);
+ font-size: 13px;
+ font-weight: 500;
+ white-space: nowrap;
+ pointer-events: none;
+ z-index: 1000;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+ opacity: 0;
+ animation: tooltipFadeIn 0.15s ease-out forwards;
+}
+
+.tooltip::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ border: 5px solid transparent;
+ border-top-color: rgba(246, 246, 246, 0.75);
+}
+
+@keyframes tooltipFadeIn {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+}
+
+.verifiedBadge {
+ font-size: var(--icon-size-sm);
+ flex-shrink: 0;
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.verifiedBadge:hover {
+ color: var(--color-white-hover);
+}
+
+.artistBio {
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+ white-space: normal;
+ overflow-wrap: anywhere;
+ word-break: break-word;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ hyphens: auto;
+ width: 100%;
+ max-width: 100%;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 6;
+ line-clamp: 6;
+ min-width: 0;
+ line-height: 1.2;
+}
+
+.otherArtistsContainer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ background: var(--color-panel-gray);
+ border-radius: var(--border-radius-md);
+ border: 2px solid var(--color-panel-border);
+ padding: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+ font-size: var(--font-size-sm);
+}
+
+.otherArtistWrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+.otherArtistItem {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ min-width: 0;
+ width: 100%;
+}
+
+.otherArtistIcon {
+ color: var(--color-text-gray);
+}
+
+.otherArtistInfo {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ min-width: 0;
+ gap: var(--spacing-sm);
+}
+
+.otherArtistName {
+ color: var(--color-white);
+ transition: color var(--transition-speed) ease-in-out;
+ cursor: pointer;
+ min-width: 0;
+ width: fit-content;
+}
+
+.otherArtistName:hover {
+ color: var(--color-red);
+}
+
+.otherArtistRole {
+ color: var(--color-text-gray);
+ min-width: 0;
+}
+
+.otherArtistName,
+.otherArtistRole {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
diff --git a/client/src/components/SongPage/ArtistInfo/ArtistInfo.tsx b/client/src/components/SongPage/ArtistInfo/ArtistInfo.tsx
new file mode 100644
index 0000000..84bcab5
--- /dev/null
+++ b/client/src/components/SongPage/ArtistInfo/ArtistInfo.tsx
@@ -0,0 +1,139 @@
+import { useState, Fragment, memo, useCallback, useMemo } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import type { SongArtist } from "@types";
+import { useAuth } from "@contexts";
+import styles from "./ArtistInfo.module.css";
+import { HorizontalRule } from "@components";
+import classNames from "classnames";
+import userPlaceholder from "@assets/user-placeholder.png";
+import {
+ LuUserRoundCheck,
+ LuUserRoundPlus,
+ LuBadgeCheck,
+ LuUserRoundPen,
+} from "react-icons/lu";
+
+export interface ArtistInfoProps {
+ mainArtist: SongArtist | undefined;
+ otherArtists: SongArtist[];
+}
+
+const ArtistInfo: React.FC
+ 
+
+
+
+
+
+
+
+
+ {title}
+ {artist} +
+
+
+ {plays}
+
+
+ {likes}
+
+
+ {comments}
+
+
+
+
+ ));
+
+ if (!mainArtist) {
+ return null;
+ }
+
+ return (
+
+
+ {artist.display_name}
+
+ {artist.role}
+
+
+
+ );
+};
+
+export default memo(ArtistInfo);
diff --git a/client/src/components/SongPage/CommentItem/CommentItem.module.css b/client/src/components/SongPage/CommentItem/CommentItem.module.css
new file mode 100644
index 0000000..9faab9d
--- /dev/null
+++ b/client/src/components/SongPage/CommentItem/CommentItem.module.css
@@ -0,0 +1,129 @@
+.comment {
+ display: flex;
+ gap: var(--spacing-sm);
+ align-items: center;
+ min-width: 0;
+ width: 100%;
+}
+
+.commentListUserPfp {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 50%;
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ flex-shrink: 0;
+}
+
+.commentContentWrapper {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ min-width: 0;
+ width: 100%;
+}
+
+.commentContent {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+ min-width: 0;
+ width: 100%;
+ padding-right: var(--spacing-md);
+}
+
+.commentHeader {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ width: 100%;
+ gap: 0;
+}
+
+.commentSeparator {
+ margin: 0 var(--spacing-xs);
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+ flex-shrink: 0;
+}
+
+.commentUsername {
+ font-size: var(--font-size-sm);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+ min-width: 0;
+ flex-shrink: 1;
+}
+
+.commentTimestamp {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray);
+ white-space: nowrap;
+ flex-shrink: 0;
+}
+
+.commentText {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray-light);
+ line-height: 1.2;
+}
+
+.commentTag {
+ color: var(--color-red) !important;
+ font-weight: 600;
+ text-decoration: underline transparent !important;
+ transition: text-decoration var(--transition-speed) ease-in-out;
+}
+
+.commentTag:hover {
+ text-decoration: underline var(--color-red) !important;
+}
+
+.commentLikesContainer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: none;
+ border-radius: var(--border-radius-md);
+ border: 1px solid var(--color-panel-border);
+ padding: var(--spacing-sm);
+ min-width: 6.4rem;
+}
+
+.commentLikesContainerActive {
+ background-color: var(--color-panel-gray-dark);
+}
+
+.commentLikeCount {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray-light);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+}
+
+.commentLikeButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ color: var(--color-text-gray-light);
+ border: none;
+ font-size: var(--icon-size-sm);
+ transition: color var(--transition-speed) ease-in-out;
+ cursor: pointer;
+}
+
+.commentLikeButton:hover {
+ color: var(--color-red);
+}
+
+.commentLikeButtonActive {
+ color: var(--color-red);
+}
diff --git a/client/src/components/SongPage/CommentItem/CommentItem.tsx b/client/src/components/SongPage/CommentItem/CommentItem.tsx
new file mode 100644
index 0000000..86f1edf
--- /dev/null
+++ b/client/src/components/SongPage/CommentItem/CommentItem.tsx
@@ -0,0 +1,127 @@
+import { memo, useCallback, useMemo, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { useState } from "react";
+import { useAuth } from "@contexts";
+import { formatRelativeDate } from "@util";
+import type { Comment } from "@types";
+import userPlaceholder from "@assets/user-placeholder.png";
+import styles from "./CommentItem.module.css";
+import classNames from "classnames";
+import { LuThumbsUp } from "react-icons/lu";
+
+const CommentItem: React.FC<{ comment: Comment }> = ({ comment }) => {
+ const [isLiked, setIsLiked] = useState(comment.user_liked ?? false);
+ const [likeCount, setLikeCount] = useState(Number(comment.likes) || 0);
+
+ const { isAuthenticated } = useAuth();
+ const navigate = useNavigate();
+
+ //! send request here too
+ const toggleCommentLike = useCallback(() => {
+ if (!isAuthenticated) {
+ navigate("/login");
+ return;
+ }
+
+ if (isLiked) {
+ setLikeCount((prev) => prev - 1);
+ setIsLiked(false);
+ } else {
+ setLikeCount((prev) => prev + 1);
+ setIsLiked(true);
+ }
+ }, [isAuthenticated, navigate, isLiked]);
+
+ useEffect(() => {
+ setIsLiked(comment.user_liked ?? false);
+ setLikeCount(Number(comment.likes) || 0);
+ }, [comment.id, comment.user_liked, comment.likes]);
+
+ const { comment_text, tags } = comment;
+
+ const segments = useMemo(() => {
+ const result: React.ReactNode[] = [];
+ let lastIndex = 0;
+
+ if (tags && tags.length > 0) {
+ const sortedTags = [...tags].sort((a, b) => a.start - b.start);
+
+ for (const tag of sortedTags) {
+ if (tag.start > lastIndex) {
+ result.push(comment_text.slice(lastIndex, tag.start));
+ }
+
+ result.push(
+
+ {comment_text.slice(tag.start, tag.end)}
+
+ );
+
+ lastIndex = tag.end;
+ }
+ }
+
+ if (lastIndex < comment_text.length) {
+ result.push(
+
+ {comment_text.slice(lastIndex)}
+
+ );
+ }
+
+ return result;
+ }, [comment_text, tags]);
+
+ const profilePicUrl = useMemo(
+ () => comment.profile_picture_url || userPlaceholder,
+ [comment.profile_picture_url]
+ );
+
+ const formattedDate = useMemo(
+ () => formatRelativeDate(comment.commented_at),
+ [comment.commented_at]
+ );
+
+ return (
+
+
+
+ {otherArtists.length > 0 && (
+
+ 
+
+
+
+
+
+
+ {artistDisplayName}
+
+ {mainArtist?.verified && (
+
+ setIsTooltipVisible(true)}
+ onMouseLeave={() => setIsTooltipVisible(false)}
+ >
+
+ )}
+ Verified by CoogMusic
+ )}
+
+ {mainArtist?.bio || `${artistDisplayName} has no bio yet...`}
+
+
+ {otherArtists.map((artist: SongArtist, i: number) => (
+
+
+ ))}
+
+ )}
+
+ 
+
+ );
+};
+
+export default memo(CommentItem);
diff --git a/client/src/components/SongPage/SongActions/SongActions.module.css b/client/src/components/SongPage/SongActions/SongActions.module.css
new file mode 100644
index 0000000..064f2f2
--- /dev/null
+++ b/client/src/components/SongPage/SongActions/SongActions.module.css
@@ -0,0 +1,32 @@
+.songActionsContainer {
+ flex: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.actionButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-panel-gray);
+ border-radius: var(--border-radius-sm);
+ border: 2px solid var(--color-panel-border);
+ color: var(--color-white);
+ cursor: pointer;
+ font-size: var(--icon-size-md);
+ padding: var(--spacing-md) 2.1rem;
+ transition: color var(--transition-speed) ease-in-out;
+}
+
+.actionButton:hover {
+ color: var(--color-red);
+}
+
+.actionButtonActive {
+ color: var(--color-red);
+}
+
+.queueButtonContainer {
+ position: relative;
+}
diff --git a/client/src/components/SongPage/SongActions/SongActions.tsx b/client/src/components/SongPage/SongActions/SongActions.tsx
new file mode 100644
index 0000000..32cee1a
--- /dev/null
+++ b/client/src/components/SongPage/SongActions/SongActions.tsx
@@ -0,0 +1,141 @@
+import React, { memo, useEffect, useState, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import type { Song } from "@types";
+import { useLikeStatus } from "@hooks";
+import { useAuth } from "@contexts";
+import { ShareModal, QueueMenu } from "@components";
+import { useQueryClient } from "@tanstack/react-query";
+import styles from "./SongActions.module.css";
+import classNames from "classnames";
+import {
+ LuThumbsUp,
+ LuListPlus,
+ LuListEnd,
+ LuShare,
+ LuCircleAlert,
+} from "react-icons/lu";
+
+export interface SongActionsProps {
+ song: Song;
+ songUrl?: string;
+}
+
+const SongActions: React.FC
+
+
+
+
+ {comment.username}
+ •
+ {formattedDate}
+
+ {segments}
+
+ {likeCount}
+
+
+
+
+
+
+
+
+
+ setQueueMenuOpen(false)}
+ song={song}
+ buttonRef={queueButtonRef}
+ />
+
+
+
+ Failed to load comments.
;
+ }
+
+ return (
+
+
+ );
+};
+
+export default memo(SongComments);
diff --git a/client/src/components/SongPage/SongContainer/SongContainer.module.css b/client/src/components/SongPage/SongContainer/SongContainer.module.css
new file mode 100644
index 0000000..4f5443a
--- /dev/null
+++ b/client/src/components/SongPage/SongContainer/SongContainer.module.css
@@ -0,0 +1,105 @@
+.songContainer {
+ position: relative;
+ display: flex;
+ gap: var(--spacing-lg);
+ flex: 1;
+ padding: var(--spacing-lg);
+ background: linear-gradient(to bottom, #181818, #0f0f0f);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ border-radius: var(--border-radius-sm);
+ overflow: hidden;
+}
+
+.songContainer::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 65deg,
+ var(--cover-gradient-color1) 0%,
+ var(--cover-gradient-color2) 15%,
+ transparent 35%
+ );
+ pointer-events: none;
+ border-radius: var(--border-radius-sm);
+}
+
+.coverImage {
+ width: 24rem;
+ height: 24rem;
+ border-radius: var(--border-radius-sm);
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+ flex-shrink: 0;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ transition: box-shadow var(--transition-speed) ease;
+}
+
+.coverImageClickable {
+ cursor: pointer;
+}
+
+.coverImage:hover {
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
+}
+
+.songRight {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: var(--spacing-sm) 0;
+ gap: var(--spacing-md);
+ flex: 1;
+}
+
+.songInfoContainer {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.artistName {
+ font-size: 2.4rem;
+ color: var(--color-text-gray-light);
+ font-weight: 500;
+}
+
+.songTitle {
+ font-size: 4.2rem;
+ color: var(--color-white);
+ font-weight: 700;
+}
+
+.songTitle,
+.artistName {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+}
+
+.interactionsContainer {
+ padding-top: 1rem;
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-lg);
+ color: var(--color-text-gray) !important;
+}
+
+.interactionStat {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ font-size: var(--font-size-md);
+}
+
+.interactionText {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
diff --git a/client/src/components/SongPage/SongContainer/SongContainer.tsx b/client/src/components/SongPage/SongContainer/SongContainer.tsx
new file mode 100644
index 0000000..2eee9c7
--- /dev/null
+++ b/client/src/components/SongPage/SongContainer/SongContainer.tsx
@@ -0,0 +1,101 @@
+import { useMemo, useCallback, memo, useState } from "react";
+import { useStreamTracking } from "@hooks";
+import { WaveformPlayer, CoverLightbox } from "@components";
+import type { Song, CoverGradient, SongArtist } from "@types";
+import { useAudioQueue } from "@contexts";
+import { LuPlay, LuThumbsUp, LuMessageSquareText } from "react-icons/lu";
+import styles from "./SongContainer.module.css";
+import classNames from "classnames";
+import musicPlaceholder from "@assets/music-placeholder.png";
+
+export interface SongContainerProps {
+ coverGradient: CoverGradient;
+ song: Song;
+ mainArtist: SongArtist | undefined;
+ numberComments?: number;
+}
+
+const SongContainer: React.FC
+ 
+
+
+ {loading ? (
+
+
+
+
+
+
+ ) : (
+ comments &&
+ comments.length > 0 && (
+ <>
+
+ {comments.map((comment: any) => (
+
+
+ )
+ )}
+ {!loading && comments && comments.length === 0 && (
+
+ No comments yet. Be the first to comment!
+
+ )}
+
+
+ )
+ );
+
+ const handlePlay = useCallback(() => {
+ actions.play(song);
+ }, [actions, song]);
+
+ const handleImageClick = useCallback(() => {
+ setIsLightboxOpen(true);
+ }, []);
+
+ return (
+
+ 
+ setIsLightboxOpen(false)}
+ imageUrl={song.image_url}
+ altText={`${song.title} Cover`}
+ />
+ )}
+
+ );
+};
+
+export default SongContainer;
diff --git a/client/src/components/SongPage/SongDetails/SongDetails.module.css b/client/src/components/SongPage/SongDetails/SongDetails.module.css
new file mode 100644
index 0000000..ffb3032
--- /dev/null
+++ b/client/src/components/SongPage/SongDetails/SongDetails.module.css
@@ -0,0 +1,57 @@
+.detailsContainer {
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-sm);
+ border: 2px solid var(--color-panel-border);
+ color: var(--color-white);
+ padding: var(--spacing-md);
+ display: grid;
+ grid-template-columns: 1fr 2rem 1fr;
+ column-gap: 0.4rem;
+ align-items: center;
+ flex: 1;
+}
+
+.detailsColumn {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ align-items: flex-start;
+ min-width: 0;
+ width: 100%;
+}
+
+.detailLabel {
+ color: var(--color-text-gray);
+}
+
+.detailWrapper {
+ display: flex;
+ gap: var(--spacing-sm);
+ align-items: center;
+ min-width: 0;
+ width: 100%;
+}
+
+.detailIcon {
+ font-size: var(--font-size-lg);
+ min-width: var(--font-size-lg);
+ color: var(--color-text-gray);
+}
+
+.detailName {
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.genreName {
+ transition: color var(--transition-speed) ease-in-out;
+ cursor: pointer;
+}
+
+.genreName:hover {
+ color: var(--color-red);
+}
diff --git a/client/src/components/SongPage/SongDetails/SongDetails.tsx b/client/src/components/SongPage/SongDetails/SongDetails.tsx
new file mode 100644
index 0000000..896cc55
--- /dev/null
+++ b/client/src/components/SongPage/SongDetails/SongDetails.tsx
@@ -0,0 +1,45 @@
+import { memo, useMemo } from "react";
+import { formatDateString } from "@util";
+import { VerticalRule } from "@components";
+import styles from "./SongDetails.module.css";
+import classNames from "classnames";
+import { LuMusic, LuCalendar } from "react-icons/lu";
+
+export interface SongDetailsProps {
+ genre: string;
+ releaseDate: string;
+}
+
+const SongDetails: React.FC
+
+
+ {song.image_url && (
+
+ {mainArtist?.display_name}
+ {song.title}
+
+ {song.audio_url && (
+
+
+
+
+
+
+ );
+};
+
+export default memo(SongDetails);
diff --git a/client/src/components/SongPage/SongStats/SongStats.module.css b/client/src/components/SongPage/SongStats/SongStats.module.css
new file mode 100644
index 0000000..c2ba10f
--- /dev/null
+++ b/client/src/components/SongPage/SongStats/SongStats.module.css
@@ -0,0 +1,32 @@
+.songStatsContainer {
+ padding: var(--spacing-sm);
+ background-color: var(--color-panel-gray);
+ border-radius: var(--border-radius-sm);
+ border: 2px solid var(--color-panel-border);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-sm);
+}
+
+.statsText {
+ color: var(--color-text-gray);
+ font-weight: 500;
+}
+
+.noDataMessage {
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 8.33rem;
+}
+
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 8.33rem;
+}
diff --git a/client/src/components/SongPage/SongStats/SongStats.tsx b/client/src/components/SongPage/SongStats/SongStats.tsx
new file mode 100644
index 0000000..3a5f202
--- /dev/null
+++ b/client/src/components/SongPage/SongStats/SongStats.tsx
@@ -0,0 +1,114 @@
+import { useMemo, memo, useCallback } from "react";
+import { useAsyncData } from "@hooks";
+import { songApi } from "@api";
+import { PuffLoader } from "react-spinners";
+import { SparkLineChart } from "@mui/x-charts/SparkLineChart";
+import type { SparkLineChartProps } from "@mui/x-charts/SparkLineChart";
+import {
+ areaElementClasses,
+ lineElementClasses,
+} from "@mui/x-charts/LineChart";
+import { chartsAxisHighlightClasses } from "@mui/x-charts/ChartsAxisHighlight";
+import styles from "./SongStats.module.css";
+
+const CHART_HEIGHT = 80;
+const CHART_WIDTH = 330;
+const CHART_COLOR = "rgb(213, 49, 49)";
+
+const CHART_SX = {
+ [`& .${areaElementClasses.root}`]: { opacity: 0.2 },
+ [`& .${lineElementClasses.root}`]: { strokeWidth: 3 },
+ [`& .${chartsAxisHighlightClasses.root}`]: {
+ stroke: CHART_COLOR,
+ strokeDasharray: "none",
+ strokeWidth: 2,
+ },
+};
+
+const CHART_SLOT_PROPS = {
+ lineHighlight: { r: 4 },
+};
+
+const CLIP_AREA_OFFSET = { top: 2, bottom: 2 };
+
+export interface SongStatsProps {
+ songId: string;
+}
+
+const SongStats: React.FC
+ Genre
+
+
+
+
+ Release Date
+
+
+
+
+ Weekly Plays
+
+ );
+ }
+
+ return (
+ No play data available
+
+ Weekly Plays
+ {loading ? (
+
+ );
+};
+
+export default memo(SongStats);
diff --git a/client/src/components/SongPage/SongSuggestions/SongSuggestions.module.css b/client/src/components/SongPage/SongSuggestions/SongSuggestions.module.css
new file mode 100644
index 0000000..84901bd
--- /dev/null
+++ b/client/src/components/SongPage/SongSuggestions/SongSuggestions.module.css
@@ -0,0 +1,39 @@
+.error {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ min-height: 25vh;
+}
+
+.suggestionsContainer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-lg);
+}
+
+.suggestionsWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+}
+
+.suggestionLabel {
+ font-size: var(--font-size-md);
+}
+
+.suggestionsSection {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+}
diff --git a/client/src/components/SongPage/SongSuggestions/SongSuggestions.tsx b/client/src/components/SongPage/SongSuggestions/SongSuggestions.tsx
new file mode 100644
index 0000000..aea40d5
--- /dev/null
+++ b/client/src/components/SongPage/SongSuggestions/SongSuggestions.tsx
@@ -0,0 +1,133 @@
+import { useMemo, memo } from "react";
+import { useAsyncData } from "@hooks";
+import { PuffLoader } from "react-spinners";
+import { useAuth } from "@contexts";
+import { songApi, artistApi } from "@api";
+import { formatDateString } from "@util";
+import { EntityItem } from "@components";
+import type { Song, Album, Artist, ArtistSong, SuggestedSong } from "@types";
+import styles from "./SongSuggestions.module.css";
+
+export interface SongSuggestionsProps {
+ song: Song;
+ mainArtist?: Artist;
+}
+
+const SongSuggestions: React.FC
+
+ ) : (
+ Failed to load suggestions.
;
+ }
+
+ const moreSongsByArtist = data?.moreSongsByArtist;
+ const filteredMoreSongs = useMemo(
+ () =>
+ moreSongsByArtist?.filter(
+ (songItem: ArtistSong) => songItem.id !== songId
+ ) ?? [],
+ [moreSongsByArtist, songId]
+ );
+ const suggestedSongs = data?.suggestedSongs;
+
+ return loading ? (
+
+
+ ) : (
+
+ {song.albums && song.albums.length > 0 && (
+
+ );
+};
+
+export default memo(SongSuggestions);
diff --git a/client/src/components/SongPage/WaveformPlayer/WaveformPlayer.module.css b/client/src/components/SongPage/WaveformPlayer/WaveformPlayer.module.css
new file mode 100644
index 0000000..5484f0f
--- /dev/null
+++ b/client/src/components/SongPage/WaveformPlayer/WaveformPlayer.module.css
@@ -0,0 +1,102 @@
+.playerContainer {
+ display: flex;
+ gap: var(--spacing-md);
+ flex: 1;
+ align-items: center;
+}
+
+.playerPlayBtn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: none;
+ color: var(--color-white);
+ cursor: pointer;
+ font-size: var(--icon-size-md);
+ transition: color var(--transition-speed) ease-in-out;
+ font-size: 6.4rem;
+}
+
+.playerPlayBtn:hover {
+ color: var(--color-red);
+}
+
+.playerPlayBtn:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.playerPlayBtnActive {
+ color: var(--color-red);
+}
+
+.playerPlayBtn svg {
+ padding: 0;
+}
+
+.skeletonContainer {
+ position: relative;
+}
+
+.waveWrapper {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 1fr;
+ position: relative;
+ width: 100%;
+ min-width: 0;
+ height: 80px; /* WAVEFORM_HEIGHT */
+ box-sizing: border-box;
+}
+
+.playerWaveform {
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ width: 100%;
+ height: 100%;
+ min-width: 0;
+ overflow: hidden;
+}
+
+.hiddenWaveform {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.skeletonWaveform {
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ display: flex;
+ align-items: center;
+ gap: 5px; /* BAR_GAP */
+ padding: 0 4px;
+ height: 100%;
+ box-sizing: border-box;
+ pointer-events: none;
+ z-index: 2;
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+.skeletonBar {
+ flex: 0 0 auto;
+ border-radius: 6px;
+ background: var(--color-white);
+ opacity: 0.8;
+ box-sizing: border-box;
+}
+
+.playerWaveform,
+.skeletonWaveform {
+ overflow: hidden;
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ opacity: 0.8;
+ }
+ 50% {
+ opacity: 0.2;
+ }
+}
diff --git a/client/src/components/SongPage/WaveformPlayer/WaveformPlayer.tsx b/client/src/components/SongPage/WaveformPlayer/WaveformPlayer.tsx
new file mode 100644
index 0000000..2257558
--- /dev/null
+++ b/client/src/components/SongPage/WaveformPlayer/WaveformPlayer.tsx
@@ -0,0 +1,281 @@
+import { useState, useRef, useEffect, useCallback, memo, useMemo } from "react";
+import Hover from "wavesurfer.js/dist/plugins/hover.esm.js";
+import WaveSurfer from "wavesurfer.js";
+import { useElementWidth } from "@hooks";
+import { useAudioQueue } from "@contexts";
+import classNames from "classnames";
+import styles from "./WaveformPlayer.module.css";
+import { LuCirclePause, LuCirclePlay } from "react-icons/lu";
+
+const BAR_WIDTH = 3;
+const BAR_GAP = 5;
+const WAVEFORM_HEIGHT = 80;
+const BAR_RADIUS = 6;
+const LINE_WIDTH = 2;
+const SKELETON_PADDING = 8;
+
+export interface WaveformPlayerProps {
+ audioSrc: string;
+ captureKeyboard?: boolean;
+ onPlay?: () => void;
+ disabled?: boolean;
+}
+
+const WaveformPlayer: React.FC
+ On Albums
+
+ )}
+
+ {filteredMoreSongs && filteredMoreSongs.length > 0 && (
+
+ {song.albums.map((album: Album) => (
+
+
+
+ More by {mainArtist?.display_name}
+
+
+ )}
+
+ {suggestedSongs && suggestedSongs.length > 0 && (
+
+ {filteredMoreSongs.map((songItem: ArtistSong) => (
+
+
+ Related Songs
+
+ )}
+
+ {suggestedSongs.map((songItem: SuggestedSong) => (
+
+
+
+
+
+ );
+};
+
+export default memo(WaveformPlayer);
diff --git a/client/src/components/SongsList/SongsList.module.css b/client/src/components/SongsList/SongsList.module.css
new file mode 100644
index 0000000..eb04fcf
--- /dev/null
+++ b/client/src/components/SongsList/SongsList.module.css
@@ -0,0 +1,55 @@
+.loaderContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ min-height: 15vh;
+}
+
+.error {
+ text-align: center;
+ color: var(--color-text-gray);
+ font-size: var(--font-size-sm);
+}
+
+.songsContainer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+ width: 100%;
+}
+
+.sectionHeader {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+}
+
+.viewMoreLink {
+ font-size: var(--font-size-sm);
+ color: var(--color-text-gray) !important;
+ text-decoration: none;
+}
+
+.viewMoreLink:hover {
+ color: var(--color-white) !important;
+}
+
+.sectionTitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-white);
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.songsList {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ min-width: 0;
+}
diff --git a/client/src/components/SongsList/SongsList.tsx b/client/src/components/SongsList/SongsList.tsx
new file mode 100644
index 0000000..fc247b0
--- /dev/null
+++ b/client/src/components/SongsList/SongsList.tsx
@@ -0,0 +1,90 @@
+import { memo, useMemo } from "react";
+import { PuffLoader } from "react-spinners";
+import type { Song } from "@types";
+import { useAsyncData } from "@hooks";
+import { EntityItem } from "@components";
+import { getMainArtist } from "@util";
+import styles from "./SongsList.module.css";
+import { Link } from "react-router-dom";
+
+export interface SongsListProps {
+ title: string;
+ fetchData: () => Promise
+ {showSkeleton && (
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+ Failed to load {title.toLowerCase()}.
+ );
+ }
+
+ const songs = data?.songs;
+
+ if (!songs || songs.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {viewMoreLink ? (
+
+ );
+};
+
+export default memo(SongsList);
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index e69de29..f7c0482 100644
--- a/client/src/components/index.ts
+++ b/client/src/components/index.ts
@@ -0,0 +1,59 @@
+/* ================================= Layout ================================= */
+export { default as HorizontalRule } from "./Layout/HorizontalRule/HorizontalRule.js";
+export { default as VerticalRule } from "./Layout/VerticalRule/VerticalRule.js";
+
+/* =============================== MainLayout =============================== */
+export { default as MainLayout } from "./MainLayout/MainLayout.js";
+export { default as MainLayoutHeader } from "./MainLayout/MainLayoutHeader/MainLayoutHeader.js";
+export { default as MainLayoutSidebar } from "./MainLayout/MainLayoutSidebar/MainLayoutSidebar.js";
+export { default as MainLayoutSearchBar } from "./MainLayout/MainLayoutSearchBar/MainLayoutSearchBar.js";
+export { default as MainLayoutNowPlayingBar } from "./MainLayout/MainLayoutNowPlayingBar/MainLayoutNowPlayingBar.js";
+
+/* ================================== Forms ================================= */
+export { default as InputGroup } from "./Forms/InputGroup/InputGroup.js";
+export { default as FormSubmitButton } from "./Forms/FormButton/FormSubmitButton.js";
+
+/* ================================= Routes ================================= */
+export { default as ProtectedRoute } from "./ProtectedRoute/ProtectedRoute.js";
+export { default as AppLayout } from "./AppLayout/AppLayout.js";
+
+/* ================================ SongPage ================================ */
+export { default as WaveformPlayer } from "./SongPage/WaveformPlayer/WaveformPlayer.js";
+export { default as SongContainer } from "./SongPage/SongContainer/SongContainer.js";
+export { default as SongStats } from "./SongPage/SongStats/SongStats.js";
+export { default as SongDetails } from "./SongPage/SongDetails/SongDetails.js";
+export { default as SongActions } from "./SongPage/SongActions/SongActions.js";
+export { default as ArtistInfo } from "./SongPage/ArtistInfo/ArtistInfo.js";
+export { default as SongComments } from "./SongPage/SongComments/SongComments.js";
+export { default as CommentItem } from "./SongPage/CommentItem/CommentItem.js";
+export { default as SongSuggestions } from "./SongPage/SongSuggestions/SongSuggestions.js";
+
+/* =============================== ArtistPage =============================== */
+export { default as ArtistBanner } from "./ArtistPage/ArtistBanner/ArtistBanner.js";
+export { default as RelatedArtists } from "./ArtistPage/RelatedArtists/RelatedArtists.js";
+export { default as ArtistActions } from "./ArtistPage/ArtistActions/ArtistActions.js";
+export { default as ArtistPlaylists } from "./ArtistPage/ArtistPlaylists/ArtistPlaylists.js";
+export { default as ArtistAbout } from "./ArtistPage/ArtistAbout/ArtistAbout.js";
+
+/* ================================== Lists ================================= */
+export { default as SongsList } from "./SongsList/SongsList.js";
+export { default as FollowProfiles } from "./FollowProfiles/FollowProfiles.js";
+
+/* ================================== Cards ================================== */
+export { default as SongCard } from "./SongCard/SongCard.js";
+export { default as EntityItem } from "./EntityItem/EntityItem.js";
+export { default as EntityItemCard } from "./EntityItemCard/EntityItemCard.js";
+export { default as SlidingCardList } from "./SlidingCardList/SlidingCardList.js";
+
+/* ================================= Modals ================================= */
+export { default as ShareModal } from "./ShareModal/ShareModal.js";
+export { default as QueueMenu } from "./QueueMenu/QueueMenu.js";
+export { default as CoverLightbox } from "./CoverLightbox/CoverLightbox.js";
+export { default as QueueManager } from "./MainLayout/QueueManager/QueueManager.js";
+
+/* =============================== Page States ============================== */
+export { default as PageLoader } from "./PageLoader/PageLoader.js";
+export { default as ErrorPage } from "./ErrorPage/ErrorPage.js";
+
+/* ================================ Dev Tools =============================== */
+export { default as DevBanner } from "./DevBanner/DevBanner.js";
diff --git a/client/src/hooks/useAsyncData.ts b/client/src/hooks/useAsyncData.ts
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pages/ArtistPage/ArtistPage.module.css b/client/src/pages/ArtistPage/ArtistPage.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pages/ArtistPage/ArtistPage.tsx b/client/src/pages/ArtistPage/ArtistPage.tsx
new file mode 100644
index 0000000..390e71e
--- /dev/null
+++ b/client/src/pages/ArtistPage/ArtistPage.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import Topbar from "../../components/TopBar/topBar";
+import Sidebar from "../../components/SideBar/sidebar";
+import PlayerBar from "../../components/PlayerBar/playerBar";
+import homeStyles from "../HomePage/HomePage.module.css";
+
+const ArtistPage: React.FC = () => {
+ const { id } = useParams();
+
+ return (
+ <>
+
+
+ ) : (
+ {title}
+ + View More + +{title}
+ )} + +
+ {songs.map((song, i) => (
+
+
+
+
+
+
+
+ Artist
+Artist ID: {id}
+
+
+ );
+}
+
+const HomePage: React.FC = () => {
+ // Mock data
+ const recentSongs = Array(8).fill({
+ title: "Song Title",
+ artist: "Artist Name",
+ image: "/PlayerBar/Mask group.png",
+ plays: 1234,
+ likes: 234,
+ comments: 12,
+ });
+
+ const newSongs = Array(5).fill({
+ title: "New Release",
+ artist: "Artist Name",
+ image: "/PlayerBar/Mask group.png",
+ });
+
+ return (
+ <>
+ {title}
+{description}
+
+
+
+
+
+ Likes: {likes.toLocaleString()}
+Tracks: {tracks}
+Duration: {duration}
+
+ {/* Top Grid Layout */}
+
+
+
+
+ {/* Featured Column */}
+
+
+
+ {/* Recently Played Column */}
+
+
+
+
+ {/* New Releases Section - Full Width */}
+
+
+ Recently Played
+ View More +
+ {recentSongs.map((song, index) => (
+
+
+ 
+
+ ))}
+
+
+ {song.title}
+{song.artist}
+
+
+ New Releases
+ View More +
+ {newSongs.map((song, index) => (
+
+
+ {loading &&
+
+
+ {/* Artists Section */}
+
+
+
+ {/* Albums Section */}
+
+
+
+ {/* Playlists Section */}
+
+
+
+ )}
+
+ Loading...
} + {error &&{error}
} + + {!loading && !error && ( + <> +
+
+ Songs
+
+ {songs.map((song, index) => (
+
+
+
+
+ ))}
+
+
+ {song.title}
++ {song.artists && song.artists.length > 0 ? ( + song.artists.map((a, i) => ( + + {a.name} + {i < song.artists!.length - 1 ? ", " : ""} + + )) + ) : ( + song.artist || "" + )} +
+
+
+ Artists
+
+ {artists.map((artist, index) => (
+
+
+
+ Albums
+
+ {albums.map((album, index) => (
+
+
+
+ Playlists
+
+ {playlists.map((pl, index) => (
+
+