├── src
    ├── app
    │   ├── favicon.ico
    │   ├── you
    │   │   ├── artists
    │   │   │   └── page.tsx
    │   │   ├── tracks
    │   │   │   └── page.tsx
    │   │   └── recents
    │   │   │   └── page.tsx
    │   ├── globals.css
    │   ├── api
    │   │   ├── logout
    │   │   │   └── route.js
    │   │   ├── validate
    │   │   │   └── route.js
    │   │   ├── you
    │   │   │   ├── recent
    │   │   │   │   └── route.js
    │   │   │   ├── artists
    │   │   │   │   └── [period]
    │   │   │   │   │   └── route.js
    │   │   │   └── tracks
    │   │   │   │   └── [period]
    │   │   │   │       └── route.js
    │   │   └── auth
    │   │   │   └── route.js
    │   ├── logout
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── page.tsx
    │   └── auth
    │   │   └── page.tsx
    ├── components
    │   ├── Footer.tsx
    │   ├── featured
    │   │   ├── LoadingCard.js
    │   │   ├── ArtistCard.js
    │   │   └── TrackCard.js
    │   ├── other-cards
    │   │   ├── OtherLoadingCard.js
    │   │   ├── OtherArtistCard.js
    │   │   └── OtherTrackCard.js
    │   ├── UpdateBanner.tsx
    │   ├── gust-ui
    │   │   └── SlidingTabs.js
    │   ├── layout
    │   │   └── TopPage.js
    │   └── Navbar.tsx
    └── lib
    │   └── spotify.js
├── public
    └── assets
    │   ├── homepage-art.png
    │   └── homepage-browser.png
├── postcss.config.mjs
├── .env.sample
├── next.config.ts
├── next-env.d.ts
├── .gitignore
├── eslint.config.mjs
├── tsconfig.json
├── package.json
└── README.md


/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/makandz/myspotify/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/assets/homepage-art.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/makandz/myspotify/HEAD/public/assets/homepage-art.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/assets/homepage-browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/makandz/myspotify/HEAD/public/assets/homepage-browser.png


--------------------------------------------------------------------------------
/.env.sample:
--------------------------------------------------------------------------------
1 | # Spotify API details
2 | NEXT_PUBLIC_CLIENT_ID=
3 | CLIENT_SECRET=
4 | NEXT_PUBLIC_REDIRECT_URL=http://127.0.0.1:3000/auth


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/src/app/you/artists/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import TopPage from "@/components/layout/TopPage";
4 | 
5 | export default function ArtistsPage() {
6 |   return <TopPage title="Top Artists" type="artists" />;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/you/tracks/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import TopPage from "@/components/layout/TopPage";
4 | 
5 | export default function ArtistsPage() {
6 |   return <TopPage title="Top Tracks" type="tracks" />;
7 | }
8 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | /// <reference path="./.next/types/routes.d.ts" />
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | :root {
 4 |   --background: #ffffff;
 5 |   --foreground: #171717;
 6 | }
 7 | 
 8 | body {
 9 |   background: var(--background);
10 |   color: var(--foreground);
11 |   font-family: var(--font-roboto), sans-serif;
12 | }
13 | 
14 | .font-display {
15 |   font-family: var(--font-manrope), sans-serif;
16 | }


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | export default function Footer() {
 2 |   return (
 3 |     <div className="mt-auto bg-black text-center p-4 text-gray-500">
 4 |       <span>
 5 |         All assets related to artists, albums, and songs are retrieved from
 6 |         Spotify. This website is not affiliated with Spotify.
 7 |       </span>
 8 |       <br />
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/api/logout/route.js:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | 
 3 | export async function POST() {
 4 |   const isProduction = process.env.NODE_ENV === "production";
 5 | 
 6 |   const response = NextResponse.json({ success: true });
 7 |   response.cookies.set("sp-at", "", {
 8 |     httpOnly: true,
 9 |     secure: isProduction,
10 |     sameSite: "lax",
11 |     path: "/",
12 |     maxAge: 0, // Immediately expire the cookie
13 |   });
14 | 
15 |   return response;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/featured/LoadingCard.js:
--------------------------------------------------------------------------------
 1 | export default function LoadingCard() {
 2 |   return (
 3 |     <div className="animate-pulse">
 4 |       <div
 5 |         className="bg-gray-400 rounded w-full h-full"
 6 |         style={{paddingBottom: "100%"}}
 7 |       ></div>
 8 |       <div className="w-full mt-2">
 9 |         <div className="bg-gray-400 rounded w-full h-6"></div>
10 |         <div className="bg-gray-400 rounded w-full h-4 mt-2"></div>
11 |       </div>
12 |     </div>
13 |   );
14 | }


--------------------------------------------------------------------------------
/src/lib/spotify.js:
--------------------------------------------------------------------------------
 1 | import { cookies } from "next/headers";
 2 | import SpotifyWebApi from "spotify-web-api-node";
 3 | 
 4 | export function getSpotify() {
 5 |   const token = cookies().get("sp-at")?.value ?? "";
 6 | 
 7 |   const spotify = new SpotifyWebApi({
 8 |     clientId: process.env.NEXT_PUBLIC_CLIENT_ID,
 9 |     clientSecret: process.env.CLIENT_SECRET,
10 |     redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URL,
11 |   });
12 | 
13 |   spotify.setAccessToken(token);
14 |   return spotify;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/logout/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useEffect } from "react";
 4 | 
 5 | export default function LogoutPage() {
 6 |   useEffect(() => {
 7 |     const logout = async () => {
 8 |       // Clear the httpOnly cookie via the logout API
 9 |       await fetch("/api/logout", { method: "POST", credentials: "include" });
10 |       localStorage.removeItem("ms-user-name");
11 |       localStorage.removeItem("ms-user-img");
12 |       window.location.href = "/";
13 |     };
14 |     logout();
15 |   }, []);
16 | 
17 |   return <></>;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/api/validate/route.js:
--------------------------------------------------------------------------------
 1 | import { getSpotify } from "@/lib/spotify";
 2 | import { NextResponse } from "next/server";
 3 | 
 4 | export async function GET() {
 5 |   try {
 6 |     const spotify = getSpotify();
 7 |     const data = await spotify.getMe();
 8 |     const resBody = data.body;
 9 | 
10 |     return NextResponse.json({
11 |       id: resBody.id,
12 |       name: resBody.display_name,
13 |       image: resBody.images?.length > 0 ? resBody.images[0].url : "",
14 |     });
15 |   } catch {
16 |     return NextResponse.json("Invalid token", { status: 401 });
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | .vscode/
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | # other
38 | .idea/
39 | .env
40 | tsconfig.tsbuildinfo
41 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 |   {
15 |     ignores: [
16 |       "node_modules/**",
17 |       ".next/**",
18 |       "out/**",
19 |       "build/**",
20 |       "next-env.d.ts",
21 |     ],
22 |   },
23 | ];
24 | 
25 | export default eslintConfig;
26 | 


--------------------------------------------------------------------------------
/src/components/other-cards/OtherLoadingCard.js:
--------------------------------------------------------------------------------
 1 | export default function OtherLoadingCard() {
 2 |   return (
 3 |     <div className="animate-pulse">
 4 |       <div className="w-full grid grid-cols-12 gap-3">
 5 |         <div className="col-span-3">
 6 |           <div className="bg-gray-400 w-full aspect-square rounded-lg" />
 7 |         </div>
 8 |         <div className="px-4 pt-0 col-span-9 my-auto min-w-0">
 9 |           <div className="bg-gray-400 rounded w-full h-5" />
10 |           <div className="bg-gray-400 rounded w-full h-5 mt-2" />
11 |           <div className="bg-gray-400 rounded w-full h-5 mt-2" />
12 |         </div>
13 |       </div>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/api/you/recent/route.js:
--------------------------------------------------------------------------------
 1 | import { getSpotify } from "@/lib/spotify";
 2 | import { NextResponse } from "next/server";
 3 | 
 4 | export async function GET() {
 5 |   try {
 6 |     const spotify = getSpotify();
 7 |     const data = await spotify.getMyRecentlyPlayedTracks({ limit: 50 });
 8 | 
 9 |     const responseData = data.body.items.map((item) => {
10 |       const t = item.track || {};
11 |       return {
12 |         name: t.name || "",
13 |         artist: t.artists?.[0]?.name || "",
14 |         album: t.album?.name || "",
15 |         image: t.album?.images?.[0]?.url || "",
16 |         href: t.album?.external_urls?.spotify || "",
17 |       };
18 |     });
19 | 
20 |     return NextResponse.json(responseData);
21 |   } catch {
22 |     return NextResponse.json("Invalid token", { status: 401 });
23 |   }
24 | }


--------------------------------------------------------------------------------
/src/components/featured/ArtistCard.js:
--------------------------------------------------------------------------------
 1 | export default function ArtistCard(props) {
 2 |   return (
 3 |     <>
 4 |       <a href={props.artistData.href}>
 5 |         <img
 6 |           className="rounded-lg shadow-lg hover:shadow-xl"
 7 |           src={props.artistData.image}
 8 |           alt={`${props.artistData.name}'s Spotify cover art`}
 9 |         />
10 |       </a>
11 |       <div className="mt-2">
12 |         <h2
13 |           className="text-lg font-bold font-display truncate"
14 |           title={props.artistData.name}
15 |         >
16 |           {`${props.rank}. ${props.artistData.name}`}
17 |         </h2>
18 |         <p
19 |           className="text-gray-500 truncate capitalize"
20 |           title={props.artistData.genre}
21 |         >
22 |           {props.artistData.genre}
23 |         </p>
24 |       </div>
25 |     </>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "newtunes",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build --turbopack",
 8 |     "start": "next start",
 9 |     "lint": "eslint"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^2.2.9",
13 |     "@heroicons/react": "^2.2.0",
14 |     "axios": "^1.12.2",
15 |     "next": "15.5.4",
16 |     "nookies": "^2.5.2",
17 |     "react": "19.1.0",
18 |     "react-dom": "19.1.0",
19 |     "spotify-web-api-node": "^5.0.2"
20 |   },
21 |   "devDependencies": {
22 |     "@eslint/eslintrc": "^3",
23 |     "@tailwindcss/postcss": "^4",
24 |     "@types/node": "^20",
25 |     "@types/react": "^19",
26 |     "@types/react-dom": "^19",
27 |     "eslint": "^9",
28 |     "eslint-config-next": "15.5.4",
29 |     "tailwindcss": "^4",
30 |     "typescript": "^5"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/featured/TrackCard.js:
--------------------------------------------------------------------------------
 1 | export default function TrackCard(props) {
 2 |   return (
 3 |     <>
 4 |       <a href={props.songData.href}>
 5 |         <img
 6 |           className="rounded-lg shadow-lg hover:shadow-xl"
 7 |           src={props.songData.image}
 8 |           alt={`${props.songData.name}'s Spotify cover art`}
 9 |         />
10 |       </a>
11 |       <div className="mt-2">
12 |         <h2
13 |           className="text-lg font-bold font-display truncate"
14 |           title={props.songData.name}
15 |         >
16 |           {`${props.rank}. ${props.songData.name}`}
17 |         </h2>
18 |         <p className="truncate" title={props.songData.artist}>
19 |           {props.songData.artist}
20 |         </p>
21 |         <p className="text-gray-500 truncate" title={props.songData.album}>
22 |           {props.songData.album}
23 |         </p>
24 |       </div>
25 |     </>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/api/you/artists/[period]/route.js:
--------------------------------------------------------------------------------
 1 | import { getSpotify } from "@/lib/spotify";
 2 | import { NextResponse } from "next/server";
 3 | 
 4 | const VALID = ["short_term", "medium_term", "long_term"];
 5 | 
 6 | export async function GET(_req, { params }) {
 7 |   const { period } = await params;
 8 |   if (!VALID.includes(period)) {
 9 |     return NextResponse.json("Bad time period", { status: 405 });
10 |   }
11 | 
12 |   try {
13 |     const spotify = getSpotify();
14 |     const data = await spotify.getMyTopArtists({
15 |       limit: 50,
16 |       time_range: period,
17 |     });
18 | 
19 |     const responseData = data.body.items.map((artist) => ({
20 |       name: artist.name,
21 |       image: artist.images?.[0]?.url || "",
22 |       genre: artist.genres?.[0] || "",
23 |       href: artist.external_urls?.spotify || "",
24 |     }));
25 | 
26 |     return NextResponse.json(responseData);
27 |   } catch {
28 |     return NextResponse.json("Invalid token", { status: 401 });
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/other-cards/OtherArtistCard.js:
--------------------------------------------------------------------------------
 1 | export default function OtherArtistCard(props) {
 2 |   return (
 3 |     <div className="w-full grid grid-cols-12">
 4 |       <div className="col-span-2 sm:col-span-3">
 5 |         <a href={props.artistData.href}>
 6 |           <img
 7 |             src={props.artistData.image}
 8 |             className="rounded-lg shadow-lg hover:shadow-xl"
 9 |             alt={`${props.artistData.name}'s Spotify cover art`}
10 |           />
11 |         </a>
12 |       </div>
13 |       <div className="px-4 pt-0 col-span-10 sm:col-span-9 my-auto min-w-0">
14 |         <h2
15 |           className="font-display font-bold text-lg truncate"
16 |           title={props.artistData.name}
17 |         >
18 |           {props.rank}. {props.artistData.name}
19 |         </h2>
20 |         <p
21 |           className="text-gray-500 truncate capitalize"
22 |           title={props.artistData.genre}
23 |         >
24 |           {props.artistData.genre}
25 |         </p>
26 |       </div>
27 |     </div>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/api/you/tracks/[period]/route.js:
--------------------------------------------------------------------------------
 1 | import { getSpotify } from "@/lib/spotify";
 2 | import { NextResponse } from "next/server";
 3 | 
 4 | const VALID = ["short_term", "medium_term", "long_term"];
 5 | 
 6 | export async function GET(_req, { params }) {
 7 |   const { period } = await params;
 8 |   if (!VALID.includes(period)) {
 9 |     return NextResponse.json("Bad time period", { status: 405 });
10 |   }
11 | 
12 |   try {
13 |     const spotify = getSpotify();
14 |     const data = await spotify.getMyTopTracks({
15 |       limit: 50,
16 |       time_range: period,
17 |     });
18 | 
19 |     const responseData = data.body.items.map((track) => ({
20 |       name: track.name,
21 |       artist: track.artists?.[0]?.name || "",
22 |       album: track.album?.name || "",
23 |       image: track.album?.images?.[0]?.url || "",
24 |       href: track.album?.external_urls?.spotify || "",
25 |     }));
26 | 
27 |     return NextResponse.json(responseData);
28 |   } catch {
29 |     return NextResponse.json("Invalid token", { status: 401 });
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/other-cards/OtherTrackCard.js:
--------------------------------------------------------------------------------
 1 | export default function OtherTrackCard(props) {
 2 |   return (
 3 |     <div className="w-full grid grid-cols-12">
 4 |       <div className="col-span-2 sm:col-span-3">
 5 |         <a href={props.songData.href}>
 6 |           <img
 7 |             src={props.songData.image}
 8 |             className="rounded-lg shadow-lg hover:shadow-xl"
 9 |             alt={`${props.songData.name}'s Spotify cover art`}
10 |           />
11 |         </a>
12 |       </div>
13 |       <div className="px-4 pt-0 col-span-10 sm:col-span-9 my-auto min-w-0">
14 |         <h2
15 |           className="font-display font-bold text-lg truncate"
16 |           title={props.songData.name}
17 |         >
18 |           {props.rank ? `${props.rank}. ` : null}
19 |           {props.songData.name}
20 |         </h2>
21 |         <p className="truncate" title={props.songData.artist}>
22 |           {props.songData.artist}
23 |         </p>
24 |         <p className="text-gray-500 truncate" title={props.songData.album}>
25 |           {props.songData.album}
26 |         </p>
27 |       </div>
28 |     </div>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from "@/components/Footer";
 2 | import Navbar from "@/components/Navbar";
 3 | import UpdateBanner from "@/components/UpdateBanner";
 4 | import { Manrope, Roboto } from "next/font/google";
 5 | import "./globals.css";
 6 | 
 7 | export const metadata = {
 8 |   title: "NewTunes – Your Spotify Stats",
 9 |   description:
10 |     "Discover your top tracks, artists, and recent listens with NewTunes. Connect with Spotify to see how your music speaks.",
11 | };
12 | 
13 | // Roboto for body
14 | const roboto = Roboto({
15 |   subsets: ["latin"],
16 |   weight: ["400", "500", "700"],
17 |   variable: "--font-roboto",
18 | });
19 | 
20 | // Manrope for display
21 | const manrope = Manrope({
22 |   subsets: ["latin"],
23 |   weight: ["400", "600", "700"],
24 |   variable: "--font-manrope",
25 | });
26 | 
27 | export default function RootLayout({
28 |   children,
29 | }: Readonly<{
30 |   children: React.ReactNode;
31 | }>) {
32 |   return (
33 |     <html lang="en">
34 |       <body className={`${roboto.variable} ${manrope.variable}`}>
35 |         <div className="min-h-screen flex flex-col">
36 |           <Navbar />
37 |           <UpdateBanner />
38 |           <div className="flex-1">{children}</div>
39 |           <Footer />
40 |         </div>
41 |       </body>
42 |     </html>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/api/auth/route.js:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | 
 3 | export async function POST(request) {
 4 |   const { code } = await request.json();
 5 | 
 6 |   const clientId = process.env.NEXT_PUBLIC_CLIENT_ID;
 7 |   const clientSecret = process.env.CLIENT_SECRET;
 8 |   const redirectUri = process.env.NEXT_PUBLIC_REDIRECT_URL;
 9 | 
10 |   const tokenResponse = await fetch("https://accounts.spotify.com/api/token", {
11 |     method: "POST",
12 |     headers: {
13 |       "Content-Type": "application/x-www-form-urlencoded",
14 |       Authorization:
15 |         "Basic " +
16 |         Buffer.from(`${clientId}:${clientSecret}`).toString("base64"),
17 |     },
18 |     body: new URLSearchParams({
19 |       grant_type: "authorization_code",
20 |       code,
21 |       redirect_uri: redirectUri,
22 |     }),
23 |   });
24 | 
25 |   if (!tokenResponse.ok) {
26 |     const error = await tokenResponse.json();
27 |     return NextResponse.json(
28 |       { error: error.error_description },
29 |       { status: 400 }
30 |     );
31 |   }
32 | 
33 |   const data = await tokenResponse.json();
34 |   const isProduction = process.env.NODE_ENV === "production";
35 | 
36 |   const response = NextResponse.json({ success: true });
37 |   response.cookies.set("sp-at", data.access_token, {
38 |     httpOnly: true,
39 |     secure: isProduction,
40 |     sameSite: "lax",
41 |     path: "/",
42 |     maxAge: 3600, // 1 hour
43 |   });
44 | 
45 |   return response;
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NewTunes (formerly MySpotify)
 2 | 
 3 | Discover your top tracks, artists, and recent listens from Spotify. Filter by last month, six months, or all time and share your profile with friends. No server-side storage - your access token stays in a cookie on your device.
 4 | 
 5 | ## Quick Start
 6 | 
 7 | 1. Prerequisites
 8 | 
 9 | - Node.js 22+ and npm
10 | - A Spotify Developer application (https://developer.spotify.com/dashboard)
11 | 
12 | 2. Configure your Spotify app
13 | 
14 | - In your Spotify app settings, add a redirect URI for development: `http://localhost:3000/auth`
15 | - Scopes required: `user-top-read user-read-recently-played`
16 | 
17 | 3. Environment variables
18 | 
19 | Create a `.env.local` in the project root:
20 | 
21 | ```bash
22 | # Spotify app credentials
23 | NEXT_PUBLIC_CLIENT_ID=your_spotify_client_id
24 | CLIENT_SECRET=your_spotify_client_secret
25 | 
26 | # Where Spotify should send users after auth (must match your app settings)
27 | # For local dev you can omit this — the app defaults to window.origin + /auth
28 | NEXT_PUBLIC_REDIRECT_URL=http://localhost:3000/auth
29 | ```
30 | 
31 | Notes:
32 | 
33 | - `NEXT_PUBLIC_CLIENT_ID` and `NEXT_PUBLIC_REDIRECT_URL` are used by the client during the implicit grant redirect.
34 | - `CLIENT_SECRET` is only needed when constructing the SDK server-side; no refresh tokens are stored.
35 | 
36 | 4. Install and run
37 | 
38 | ```bash
39 | npm install
40 | npm run dev
41 | # Visit http://localhost:3000
42 | ```
43 | 


--------------------------------------------------------------------------------
/src/components/UpdateBanner.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { useEffect, useState } from "react";
 5 | 
 6 | export default function UpdateBanner() {
 7 |   const [visible, setVisible] = useState(false);
 8 | 
 9 |   useEffect(() => {
10 |     const dismissed = localStorage.getItem("updateBannerDismissed");
11 |     if (!dismissed) {
12 |       setVisible(true);
13 |     }
14 |   }, []);
15 | 
16 |   const dismiss = () => {
17 |     localStorage.setItem("updateBannerDismissed", "true");
18 |     setVisible(false);
19 |   };
20 | 
21 |   if (!visible) return null;
22 | 
23 |   return (
24 |     <div className="w-full bg-gray-100 border-b border-gray-200">
25 |       <div className="mx-auto max-w-6xl px-4 py-2 flex items-center justify-between text-sm">
26 |         {/* Left: can wrap to multiple lines */}
27 |         <span className="flex-1 min-w-0 text-gray-800">
28 |           🎉 New major update! Check out the new features and improvements.
29 |         </span>
30 | 
31 |         {/* Right: fixed, no wrap */}
32 |         <div className="flex flex-none items-center gap-4 whitespace-nowrap pl-4">
33 |           <Link
34 |             href="https://www.notion.so/mkn/Big-Update-to-NewTunes-2812894fe3e6804fb5affd07be8ff93a?source=newtunes"
35 |             className="inline-flex items-center text-gray-700 hover:text-gray-900 hover:underline"
36 |             target="_blank"
37 |             rel="noopener noreferrer"
38 |           >
39 |             Learn more →
40 |           </Link>
41 |           <button
42 |             onClick={dismiss}
43 |             className="inline-flex items-center text-gray-500 hover:text-gray-700 cursor-pointer"
44 |             aria-label="Dismiss banner"
45 |           >
46 |             ✕
47 |           </button>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/gust-ui/SlidingTabs.js:
--------------------------------------------------------------------------------
 1 | import React, { useMemo, useState } from "react";
 2 | 
 3 | function SlidingTabs({
 4 |   className = "",
 5 |   tabs = [],
 6 |   onChange = () => {},
 7 |   ...newProps
 8 | }) {
 9 |   const [activeTab, setActiveTab] = useState(0);
10 |   const numTabs = tabs.length || 1;
11 | 
12 |   const sliderStyle = useMemo(
13 |     () => ({
14 |       width: `${100 / numTabs}%`,
15 |       transform: `translateX(${activeTab * 100}%)`,
16 |     }),
17 |     [activeTab, numTabs]
18 |   );
19 | 
20 |   const tabBase =
21 |     "flex-1 text-center font-medium pb-3 cursor-pointer hover:text-blue-400";
22 | 
23 |   return (
24 |     <div
25 |       className={`${className} w-full flex border-b border-gray-300 relative`}
26 |       {...newProps}
27 |     >
28 |       {tabs.map((t, index) => {
29 |         const isObject = typeof t === "object";
30 |         const name = isObject ? t.label : t;
31 |         const value = isObject ? t.value : t;
32 |         const icon = isObject ? t.icon : null;
33 |         return (
34 |           <button
35 |             type="button"
36 |             key={`${value}-${index}`}
37 |             className={`${tabBase} ${
38 |               activeTab === index ? "text-blue-400" : ""
39 |             }`}
40 |             onClick={() => {
41 |               if (activeTab !== index) {
42 |                 setActiveTab(index);
43 |                 onChange(value);
44 |               }
45 |             }}
46 |           >
47 |             {icon ? (
48 |               <span className="inline-block mr-2">
49 |                 {React.cloneElement(icon, { className: "mr-2" })}
50 |               </span>
51 |             ) : null}
52 |             {name}
53 |           </button>
54 |         );
55 |       })}
56 |       <span
57 |         className="block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out"
58 |         style={sliderStyle}
59 |       />
60 |     </div>
61 |   );
62 | }
63 | 
64 | export default SlidingTabs;
65 | 


--------------------------------------------------------------------------------
/src/app/you/recents/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import OtherLoadingCard from "@/components/other-cards/OtherLoadingCard";
 4 | import OtherTrackCard from "@/components/other-cards/OtherTrackCard";
 5 | import { useRouter } from "next/navigation";
 6 | import { JSX, useEffect, useState } from "react";
 7 | 
 8 | type RecentTrack = unknown; // replace with your API type if you have one
 9 | 
10 | export default function RecentsPage() {
11 |   const router = useRouter();
12 |   const [cards, setCards] = useState<JSX.Element[]>(getLoadingCards());
13 | 
14 |   function getLoadingCards() {
15 |     const loading: JSX.Element[] = [];
16 |     for (let i = 0; i < 50; i++) {
17 |       loading.push(
18 |         <div key={`loading-${i}`}>
19 |           <OtherLoadingCard />
20 |         </div>
21 |       );
22 |     }
23 |     return loading;
24 |   }
25 | 
26 |   useEffect(() => {
27 |     const load = async () => {
28 |       try {
29 |         const res = await fetch("/api/you/recent", { credentials: "include" });
30 |         if (res.status === 401) {
31 |           router.push("/auth");
32 |           return;
33 |         }
34 |         if (!res.ok) {
35 |           router.push("/");
36 |           return;
37 |         }
38 |         const data: RecentTrack[] = await res.json();
39 |         const loaded = data.map((item, i) => (
40 |           <div key={`recent-${i}`}>
41 |             <OtherTrackCard songData={item} />
42 |           </div>
43 |         ));
44 |         setCards(loaded);
45 |       } catch {
46 |         router.push("/");
47 |       }
48 |     };
49 | 
50 |     load();
51 |   }, [router]);
52 | 
53 |   return (
54 |     <div className="mb-6">
55 |       <h1 className="mt-6 text-center font-display text-4xl font-bold">
56 |         Recents
57 |       </h1>
58 |       <div className="container mx-auto px-3 pt-7">
59 |         <div className="mx-auto max-w-8xl">
60 |           <div className="mx-auto grid gap-5 xs:grid-cols-1 sm:grid-cols-2 sm:gap-7 lg:grid-cols-3 xl:grid-cols-4">
61 |             {cards}
62 |           </div>
63 |         </div>
64 |       </div>
65 |     </div>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/layout/TopPage.js:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import axios from "axios";
  4 | import { useRouter } from "next/navigation";
  5 | import { useEffect, useState } from "react";
  6 | import ArtistCard from "../featured/ArtistCard";
  7 | import LoadingCard from "../featured/LoadingCard";
  8 | import TrackCard from "../featured/TrackCard";
  9 | import SlidingTabs from "../gust-ui/SlidingTabs";
 10 | import OtherArtistCard from "../other-cards/OtherArtistCard";
 11 | import OtherLoadingCard from "../other-cards/OtherLoadingCard";
 12 | import OtherTrackCard from "../other-cards/OtherTrackCard";
 13 | 
 14 | export default function TopPage(props) {
 15 |   const [cards, setCards] = useState(loadingCards());
 16 |   const [period, setPeriod] = useState("short_term");
 17 |   const router = useRouter();
 18 | 
 19 |   function loadingCards() {
 20 |     let loading = { featured: [], other: [] };
 21 |     for (let i = 0; i < 6; i++) {
 22 |       loading.featured.push(
 23 |         <div key={i}>
 24 |           <LoadingCard key={i} />
 25 |         </div>
 26 |       );
 27 |     }
 28 | 
 29 |     for (let i = 0; i < 20; i++) {
 30 |       loading.other.push(
 31 |         <div key={i + 5}>
 32 |           <OtherLoadingCard />
 33 |         </div>
 34 |       );
 35 |     }
 36 | 
 37 |     return loading;
 38 |   }
 39 | 
 40 |   function onPeriodChange(newPeriod) {
 41 |     setCards(loadingCards());
 42 |     setPeriod(newPeriod);
 43 |   }
 44 | 
 45 |   useEffect(() => {
 46 |     axios.get("/api/you/" + props.type + "/" + period).then(
 47 |       (response) => {
 48 |         let loadedCards = { featured: [], other: [] };
 49 |         response.data.slice(0, 6).forEach((item, i) => {
 50 |           loadedCards.featured.push(
 51 |             <div key={i}>
 52 |               {props.type === "tracks" ? (
 53 |                 <TrackCard songData={item} rank={i + 1} />
 54 |               ) : (
 55 |                 <ArtistCard artistData={item} rank={i + 1} />
 56 |               )}
 57 |             </div>
 58 |           );
 59 |         });
 60 | 
 61 |         response.data.slice(6).forEach((item, i) => {
 62 |           loadedCards.other.push(
 63 |             <div key={i + 6}>
 64 |               {props.type === "tracks" ? (
 65 |                 <OtherTrackCard songData={item} rank={i + 7} />
 66 |               ) : (
 67 |                 <OtherArtistCard artistData={item} rank={i + 7} />
 68 |               )}
 69 |             </div>
 70 |           );
 71 |         });
 72 | 
 73 |         setCards(loadedCards);
 74 |       },
 75 |       (err) => {
 76 |         if (err.response.status === 401) router.push("/auth");
 77 |         else router.push("/");
 78 |       }
 79 |     );
 80 |   }, [period, props.type]);
 81 | 
 82 |   return (
 83 |     <div className="mb-6">
 84 |       <h1 className="text-center text-4xl font-display font-bold mt-6">
 85 |         {props.title}
 86 |       </h1>
 87 |       <div className="container px-3 mx-auto pt-6">
 88 |         <div className="max-w-8xl mx-auto">
 89 |           <SlidingTabs
 90 |             tabs={[
 91 |               {
 92 |                 label: "Four Weeks",
 93 |                 value: "short_term",
 94 |               },
 95 |               {
 96 |                 label: "Six Months",
 97 |                 value: "medium_term",
 98 |               },
 99 |               {
100 |                 label: "All Time",
101 |                 value: "long_term",
102 |               },
103 |             ]}
104 |             onChange={(e) => onPeriodChange(e)}
105 |           />
106 | 
107 |           <div className="grid grid-cols-3 gap-4 md:gap-8 lg:grid-cols-6 lg:gap-7 mx-auto my-10">
108 |             {cards.featured}
109 |           </div>
110 | 
111 |           <div className="mx-auto grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-7 lg:grid-cols-3 xl:grid-cols-4">
112 |             {cards.other}
113 |           </div>
114 |         </div>
115 |       </div>
116 |     </div>
117 |   );
118 | }
119 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | 
  3 | export default function Home() {
  4 |   return (
  5 |     <main className="bg-white">
  6 |       {/* Hero */}
  7 |       <section className="relative">
  8 |         {/* light decorative background */}
  9 |         <div className="absolute inset-0 -z-10">
 10 |           <div className="pointer-events-none h-[420px] bg-[radial-gradient(ellipse_at_top,rgba(16,185,129,0.10),rgba(255,255,255,0)_60%)]" />
 11 |         </div>
 12 | 
 13 |         <div className="mx-auto max-w-6xl px-4 sm:px-6">
 14 |           <div className="text-center pt-16 sm:pt-20">
 15 |             <h1 className="font-display font-extrabold tracking-tight text-5xl sm:text-6xl md:text-7xl">
 16 |               What have you been{" "}
 17 |               <span className="text-emerald-600">listening</span> to?
 18 |             </h1>
 19 |             <p className="mx-auto mt-4 max-w-2xl text-lg sm:text-xl text-gray-600">
 20 |               See and share your top Spotify artists and tracks. Filter by last
 21 |               month, six months, or all time.
 22 |             </p>
 23 | 
 24 |             <div className="mx-auto mt-8 flex items-center justify-center gap-4">
 25 |               <Link
 26 |                 href="/auth"
 27 |                 className="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
 28 |               >
 29 |                 Sign in with Spotify
 30 |               </Link>
 31 |             </div>
 32 | 
 33 |             <div className="mt-4 text-sm text-gray-500">
 34 |               No data is saved or shared without your permission.
 35 |             </div>
 36 | 
 37 |             <div className="mx-auto mt-10 w-full max-w-md">
 38 |               <hr className="border-gray-200" />
 39 |             </div>
 40 |           </div>
 41 |         </div>
 42 |       </section>
 43 | 
 44 |       {/* Feature 1 */}
 45 |       <section className="mx-auto max-w-6xl px-4 sm:px-6 mt-20 md:mt-28">
 46 |         <div className="grid md:grid-cols-2 gap-10 items-center">
 47 |           <div>
 48 |             <h2 className="font-display text-3xl sm:text-4xl font-bold">
 49 |               Find the music and artists you play the most
 50 |             </h2>
 51 |             <p className="mt-4 max-w-prose text-lg text-gray-600">
 52 |               Your top lists update automatically. Quickly switch time ranges to
 53 |               see what changed and what stuck around.
 54 |             </p>
 55 |           </div>
 56 | 
 57 |           {/* Image block */}
 58 |           <div className="overflow-hidden">
 59 |             <img
 60 |               src="/assets/homepage-art.png"
 61 |               alt="Album artwork grid"
 62 |               className="w-full h-auto object-cover"
 63 |             />
 64 |           </div>
 65 |         </div>
 66 |       </section>
 67 | 
 68 |       {/* Feature 2 */}
 69 |       <section className="mx-auto max-w-6xl px-4 sm:px-6 mt-20 md:mt-28">
 70 |         <div className="grid md:grid-cols-2 gap-10 items-center">
 71 |           {/* Image block */}
 72 |           <div className="order-last md:order-first overflow-hidden">
 73 |             <img
 74 |               src="/assets/homepage-browser.png"
 75 |               alt="Shareable profile link in a browser"
 76 |               className="w-full h-auto object-cover"
 77 |             />
 78 |           </div>
 79 | 
 80 |           {/* Text block */}
 81 |           <div>
 82 |             <span className="inline-block mb-2 text-[11px] font-semibold text-white bg-amber-600 px-2 py-0.5 rounded-full uppercase tracking-wide">
 83 |               Coming Soon
 84 |             </span>
 85 |             <h2 className="font-display text-3xl sm:text-4xl font-bold">
 86 |               Share with friends in one click
 87 |             </h2>
 88 |             <p className="mt-4 max-w-prose text-lg text-gray-600">
 89 |               Generate a clean link to your profile and post it anywhere. No
 90 |               setup, no fuss.
 91 |             </p>
 92 |           </div>
 93 |         </div>
 94 |       </section>
 95 | 
 96 |       {/* CTA */}
 97 |       <section className="mx-auto max-w-6xl px-4 sm:px-6 mt-24 md:mt-32 mb-16 text-center">
 98 |         <h3 className="font-display text-4xl sm:text-5xl font-extrabold">
 99 |           Ready to see your Spotify stats?
100 |         </h3>
101 |         <p className="mt-3 text-lg text-gray-600">
102 |           Sign in takes just a few seconds, and your data always stays private.
103 |         </p>
104 |         <div className="mt-8">
105 |           <Link
106 |             href="/auth"
107 |             className="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
108 |           >
109 |             Get started
110 |           </Link>
111 |         </div>
112 |       </section>
113 |     </main>
114 |   );
115 | }
116 | 


--------------------------------------------------------------------------------
/src/app/auth/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRouter } from "next/navigation";
  4 | import { useCallback, useEffect, useState } from "react";
  5 | 
  6 | type User = {
  7 |   name: string;
  8 |   image: string;
  9 | };
 10 | 
 11 | const SCOPES = "user-top-read user-read-recently-played";
 12 | 
 13 | export default function AuthPage() {
 14 |   const router = useRouter();
 15 |   const [status, setStatus] = useState("Just a moment..");
 16 |   const [user, setUser] = useState<User | null>(null);
 17 | 
 18 |   // Persist user info for later use in the app
 19 |   useEffect(() => {
 20 |     if (user) {
 21 |       localStorage.setItem("ms-user-name", user.name);
 22 |       localStorage.setItem("ms-user-img", user.image);
 23 |     }
 24 |   }, [user]);
 25 | 
 26 |   const validateToken = useCallback(async () => {
 27 |     try {
 28 |       const res = await fetch("/api/validate", { credentials: "include" });
 29 |       if (!res.ok) throw new Error("Invalid token");
 30 |       const data = (await res.json()) as User;
 31 |       setUser(data);
 32 |       router.replace("/you/tracks");
 33 |       return true;
 34 |     } catch {
 35 |       // Clear the httpOnly cookie via the logout API
 36 |       await fetch("/api/logout", { method: "POST", credentials: "include" });
 37 |       setStatus("Taking you home...");
 38 |       router.replace("/");
 39 |       return false;
 40 |     }
 41 |   }, [router]);
 42 | 
 43 |   useEffect(() => {
 44 |     const handleAuth = async () => {
 45 |       // 1) If redirected back from Spotify with an authorization code
 46 |       const urlParams = new URLSearchParams(window.location.search);
 47 |       const codeFromUrl = urlParams.get("code");
 48 | 
 49 |       if (codeFromUrl) {
 50 |         setStatus("Finishing up...");
 51 |         try {
 52 |           const res = await fetch("/api/auth", {
 53 |             method: "POST",
 54 |             headers: { "Content-Type": "application/json" },
 55 |             body: JSON.stringify({ code: codeFromUrl }),
 56 |             credentials: "include",
 57 |           });
 58 |           if (!res.ok) throw new Error("Token exchange failed");
 59 |           // The httpOnly cookie is set by the server response
 60 |           validateToken();
 61 |         } catch {
 62 |           setStatus("Something went wrong...");
 63 |           router.replace("/");
 64 |         }
 65 |         return;
 66 |       }
 67 | 
 68 |       // 2) Try validating an existing cookie (httpOnly, so we can't read it client-side)
 69 |       const validateRes = await fetch("/api/validate", {
 70 |         credentials: "include",
 71 |       });
 72 |       if (validateRes.ok) {
 73 |         const data = (await validateRes.json()) as User;
 74 |         setUser(data);
 75 |         router.replace("/you/tracks");
 76 |         return;
 77 |       }
 78 | 
 79 |       // 3) Otherwise, send the user to Spotify login
 80 |       const clientId = process.env.NEXT_PUBLIC_CLIENT_ID;
 81 |       const redirectUri =
 82 |         process.env.NEXT_PUBLIC_REDIRECT_URL ??
 83 |         `${window.location.origin}/auth`;
 84 | 
 85 |       setStatus("Taking you to Spotify...");
 86 |       const authorizeUrl =
 87 |         "https://accounts.spotify.com/authorize" +
 88 |         `?response_type=code` +
 89 |         `&client_id=${encodeURIComponent(String(clientId))}` +
 90 |         `&scope=${encodeURIComponent(SCOPES)}` +
 91 |         `&redirect_uri=${encodeURIComponent(redirectUri)}`;
 92 | 
 93 |       window.location.href = authorizeUrl;
 94 |     };
 95 | 
 96 |     handleAuth();
 97 |   }, [validateToken, router]); // run once on mount
 98 | 
 99 |   return (
100 |     <div className="flex items-center justify-center py-16 px-6">
101 |       {/* Left: animated loader */}
102 |       <div className="mr-6 h-12 w-12 flex-shrink-0">
103 |         <div className="loader" />
104 |       </div>
105 | 
106 |       {/* Right: text */}
107 |       <div className="text-left">
108 |         <h1 className="font-display text-2xl sm:text-3xl font-bold text-gray-900">
109 |           {status}
110 |         </h1>
111 |         <p className="mt-1 text-base text-gray-600">
112 |           This only takes a few seconds.
113 |         </p>
114 |       </div>
115 | 
116 |       <style jsx>{`
117 |         .loader {
118 |           width: 40px;
119 |           aspect-ratio: 1;
120 |           --c: linear-gradient(#000 0 0); /* gray-400 to match your cards */
121 |           --r1: radial-gradient(farthest-side at bottom, #000 93%, #0000);
122 |           --r2: radial-gradient(farthest-side at top, #000 93%, #0000);
123 |           background: var(--c), var(--r1), var(--r2), var(--c), var(--r1),
124 |             var(--r2), var(--c), var(--r1), var(--r2);
125 |           background-repeat: no-repeat;
126 |           animation: bars 1s infinite alternate;
127 |         }
128 | 
129 |         @keyframes bars {
130 |           0%,
131 |           25% {
132 |             background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px,
133 |               8px 0, 8px 4px, 8px 4px;
134 |             background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px),
135 |               50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%,
136 |               100% calc(50% - 2px), 100% calc(50% + 2px);
137 |           }
138 |           50% {
139 |             background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px,
140 |               8px 0, 8px 4px, 8px 4px;
141 |             background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px),
142 |               50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%,
143 |               100% calc(50% - 2px), 100% calc(50% + 2px);
144 |           }
145 |           75% {
146 |             background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px,
147 |               8px 4px, 8px 0, 8px 4px, 8px 4px;
148 |             background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px),
149 |               50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%,
150 |               100% calc(50% - 2px), 100% calc(50% + 2px);
151 |           }
152 |           95%,
153 |           100% {
154 |             background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px,
155 |               8px 4px, 8px 100%, 8px 4px, 8px 4px;
156 |             background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px),
157 |               50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%,
158 |               100% calc(0% - 2px), 100% calc(100% + 2px);
159 |           }
160 |         }
161 | 
162 |         @media (prefers-reduced-motion: reduce) {
163 |           .loader {
164 |             animation: none;
165 |           }
166 |         }
167 |       `}</style>
168 |     </div>
169 |   );
170 | }
171 | 


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Disclosure, Menu, Transition } from "@headlessui/react";
  4 | import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
  5 | import Link from "next/link";
  6 | import { Fragment, useEffect, useState } from "react";
  7 | 
  8 | type NavItem = { name: string; href: string };
  9 | 
 10 | const navigation: NavItem[] = [
 11 |   { name: "Tracks", href: "/you/tracks" },
 12 |   { name: "Artists", href: "/you/artists" },
 13 |   { name: "Recent", href: "/you/recents" },
 14 | ];
 15 | 
 16 | function classNames(...classes: Array<string | false | null | undefined>) {
 17 |   return classes.filter(Boolean).join(" ");
 18 | }
 19 | 
 20 | export default function Navbar() {
 21 |   const [userPicture, setUserPicture] = useState(
 22 |     "https://cdn.mkn.cx/myspotify/dev/profile.png"
 23 |   );
 24 |   const [loggedIn, setLoggedIn] = useState(false);
 25 | 
 26 |   useEffect(() => {
 27 |     const picture = localStorage.getItem("ms-user-img");
 28 |     if (picture) setUserPicture(picture);
 29 |     // Use localStorage to check login status (set by auth page when user info is stored)
 30 |     const userName = localStorage.getItem("ms-user-name");
 31 |     if (userName) setLoggedIn(true);
 32 |   }, []);
 33 | 
 34 |   return (
 35 |     <Disclosure as="nav" className="bg-black">
 36 |       {({ open }) => (
 37 |         <>
 38 |           <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
 39 |             <div className="relative flex h-16 items-center justify-between">
 40 |               {/* Mobile menu button */}
 41 |               <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
 42 |                 <Disclosure.Button
 43 |                   className="inline-flex items-center justify-center rounded-md p-2 text-gray-400
 44 |                              hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2
 45 |                              focus:ring-inset focus:ring-white"
 46 |                 >
 47 |                   <span className="sr-only">Open main menu</span>
 48 |                   {open ? (
 49 |                     <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
 50 |                   ) : (
 51 |                     <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
 52 |                   )}
 53 |                 </Disclosure.Button>
 54 |               </div>
 55 | 
 56 |               {/* Brand + desktop nav */}
 57 |               <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
 58 |                 <div className="flex flex-shrink-0 items-center text-white font-display font-bold">
 59 |                   <Link href="/">NewTunes</Link>
 60 |                 </div>
 61 |                 <div className="hidden sm:ml-6 sm:block">
 62 |                   <div className="flex space-x-4">
 63 |                     {navigation.map((item) => (
 64 |                       <Link
 65 |                         key={item.name}
 66 |                         href={item.href}
 67 |                         className="rounded-md px-3 py-2 text-sm font-medium text-gray-300
 68 |                                    hover:bg-gray-700 hover:text-white"
 69 |                       >
 70 |                         {item.name}
 71 |                       </Link>
 72 |                     ))}
 73 |                   </div>
 74 |                 </div>
 75 |               </div>
 76 | 
 77 |               {/* User menu */}
 78 |               <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
 79 |                 <Menu as="div" className="relative ml-3">
 80 |                   <div>
 81 |                     <Menu.Button
 82 |                       className="flex rounded-full bg-gray-800 text-sm focus:outline-none
 83 |                                  focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
 84 |                     >
 85 |                       <span className="sr-only">Open user menu</span>
 86 |                       {/* Keeping <img> for simplicity, swap to next/image if you prefer */}
 87 |                       <img
 88 |                         className="h-8 w-8 rounded-full"
 89 |                         src={userPicture}
 90 |                         alt="User avatar"
 91 |                       />
 92 |                     </Menu.Button>
 93 |                   </div>
 94 |                   <Transition
 95 |                     as={Fragment}
 96 |                     enter="transition ease-out duration-100"
 97 |                     enterFrom="transform opacity-0 scale-95"
 98 |                     enterTo="transform opacity-100 scale-100"
 99 |                     leave="transition ease-in duration-75"
100 |                     leaveFrom="transform opacity-100 scale-100"
101 |                     leaveTo="transform opacity-0 scale-95"
102 |                   >
103 |                     <Menu.Items
104 |                       className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1
105 |                                  shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
106 |                     >
107 |                       <Menu.Item>
108 |                         {({ active }) => (
109 |                           <a
110 |                             href={loggedIn ? "/logout" : "/auth"}
111 |                             className={classNames(
112 |                               active && "bg-gray-100",
113 |                               "block px-4 py-2 text-sm text-gray-700"
114 |                             )}
115 |                           >
116 |                             {loggedIn ? "Sign out" : "Sign in"}
117 |                           </a>
118 |                         )}
119 |                       </Menu.Item>
120 |                     </Menu.Items>
121 |                   </Transition>
122 |                 </Menu>
123 |               </div>
124 |             </div>
125 |           </div>
126 | 
127 |           {/* Mobile nav */}
128 |           <Disclosure.Panel className="sm:hidden">
129 |             <div className="space-y-1 px-2 pt-2 pb-3">
130 |               {navigation.map((item) => (
131 |                 <Link
132 |                   key={item.name}
133 |                   href={item.href}
134 |                   className="block rounded-md px-3 py-2 text-base font-medium text-gray-300
135 |                              hover:bg-gray-700 hover:text-white"
136 |                 >
137 |                   {item.name}
138 |                 </Link>
139 |               ))}
140 |             </div>
141 |           </Disclosure.Panel>
142 |         </>
143 |       )}
144 |     </Disclosure>
145 |   );
146 | }
147 | 


--------------------------------------------------------------------------------