Various improvements

app/(auth)/login/page.tsx

@@ -0,0 +1,11 @@
+import { LoginForm } from "@/components/login-form"
+
+export default function LoginPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

app/(auth)/signup/page.tsx

@@ -0,0 +1,11 @@
+import { SignupForm } from "@/components/signup-form"
+
+export default function SignupPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <SignupForm />
+      </div>
+    </div>
+  )
+}

app/api/auth/[...all]/route.ts

@@ -1,4 +1,4 @@
-import { auth } from "@/lib/auth";
+import { auth } from "@/lib/auth/auth";
 import { toNextJsHandler } from "better-auth/next-js";
 
 export const { POST, GET } = toNextJsHandler(auth);

app/api/spotify/route.ts

@@ -1,5 +1,15 @@
 import { NextResponse } from "next/server";
 
+/**
+ * Spotify "Now Playing" API
+ * 
+ * Setup (one-time):
+ * 1. Go to https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REDIRECT_URI&scope=user-read-currently-playing%20user-read-playback-state
+ * 2. Authorize and copy the `code` from the redirect URL
+ * 3. Exchange it for tokens via POST to https://accounts.spotify.com/api/token
+ * 4. Save the refresh_token to SPOTIFY_REFRESH_TOKEN in .env.local
+ */
+
 // In-memory store for access token and expiration
 let accessToken: string | null = null;
 let tokenExpiration: number | null = null;

components/footer/Footer.tsx

@@ -1,31 +1,39 @@
 import Image from "next/image";
-import SpotifyStatus from './SpotifyStatus';
-import SocialMediaLinks from './SocialMediaLinks';
-import Copyright from './Copyright';
+import SpotifyStatus from "./SpotifyStatus";
+import SocialMediaLinks from "./SocialMediaLinks";
+import Copyright from "./Copyright";
+import { ASSETS } from "@/lib/constants";
 
 export default function Footer() {
-  const baseUrl = "/svgs/";
-
   return (
     <footer className="relative max-w-5xl mx-auto w-full mb-3 flex flex-col rounded-2xl px-8 saturate-100 backdrop-blur-[10px] overflow-hidden bg-linear-to-t from-white/30 via-white/10 to-white/0 dark:from-black/30 dark:via-black/10 dark:to-black/0 shadow-xs">
       {/* Main content container */}
       <div className="relative z-10 flex flex-col md:flex-row items-center md:justify-between w-full md:gap-0">
-
         {/* Left side: Spotify Logo and Status */}
         <div className="flex items-center gap-2">
-          <a href="https://open.spotify.com/user/223qjmi62hl4nilhilo6lsdea" target="_blank" rel="noopener noreferrer" className="cursor-pointer">
-            <Image src={`${baseUrl}Spotify.svg`} alt="Spotify Logo" width={20} height={20} className="h-6 w-6" />
+          <a
+            href={process.env.Spotify_URL!}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cursor-pointer"
+          >
+            <Image
+              src={ASSETS.spotifyIcon}
+              alt="Spotify Logo"
+              width={20}
+              height={20}
+              className="h-6 w-6"
+            />
           </a>
           <SpotifyStatus />
         </div>
 
         {/* Right side: Social Media Links */}
         <SocialMediaLinks />
-
       </div>
       <div className="relative flex justify-center items-center">
         <Copyright />
       </div>
     </footer>
   );
-}
+}

components/footer/SocialMediaLinks.tsx

@@ -1,21 +1,26 @@
-import Image from 'next/image';
-import { socialMedia } from '@/lib/socialMedia';
-
-
-export interface SocialMediaItem {
-    name: string;
-    url: string;
-    icon: string;
-}   
+import Image from "next/image";
+import { socialMedia } from "@/lib/socialMedia";
 
 export default function SocialMediaLinks() {
   return (
     <div className="flex flex-row justify-center items-center gap-4 p-4">
       {socialMedia.map((media) => (
-        <a href={media.url} target="_blank" rel="noopener noreferrer" key={media.name} className="cursor-pointer">
-          <Image src={media.icon} alt={`${media.name} Icon`} width={20} height={20} className="filter dark:invert" />
+        <a
+          href={media.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          key={media.name}
+          className="cursor-pointer"
+        >
+          <Image
+            src={media.icon}
+            alt={`${media.name} Icon`}
+            width={20}
+            height={20}
+            className="filter dark:invert"
+          />
         </a>
       ))}
     </div>
   );
-}
+}

components/footer/SpotifyStatus.tsx

@@ -1,26 +1,19 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+"use client";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import type { SpotifyStatus } from "@/lib/types";
 
-interface SpotifyStatus {
-  isListening: boolean;
-  trackName?: string;
-  artistName?: string;
-  message?: string;
-  itemType?: string;
-}
-
-export default function SpotifyStatus() {
+export default function SpotifyStatusComponent() {
   const [status, setStatus] = useState<SpotifyStatus>({ isListening: false });
 
   useEffect(() => {
     async function fetchSpotifyStatus() {
       try {
-        const response = await fetch('api/spotify');
+        const response = await fetch("api/spotify");
         const data: SpotifyStatus = await response.json();
         setStatus(data);
       } catch {
-        setStatus({ isListening: false, message: 'Error fetching Spotify data' });
+        setStatus({ isListening: false, message: "Error fetching Spotify data" });
       }
     }
     fetchSpotifyStatus();
@@ -30,23 +23,27 @@ export default function SpotifyStatus() {
 
   const formatNowPlaying = () => {
     if (!status.isListening) {
-      return status.message || 'Not listening to Spotify';
+      return status.message || "Not listening to Spotify";
     }
 
-    if (status.itemType === 'episode') {
+    if (status.itemType === "episode") {
       return `Now Playing: ${status.trackName} from ${status.artistName}`;
     } else {
       return `Now Playing: ${status.trackName} by ${status.artistName}`;
     }
   };
 
   return (
-    <>
-      <AnimatePresence mode="wait">
-        <motion.p key={`${status.isListening}-${status.trackName}`} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.3 }} className="">
-          {formatNowPlaying()}
-        </motion.p>
-      </AnimatePresence>
-    </>
+    <AnimatePresence mode="wait">
+      <motion.p
+        key={`${status.isListening}-${status.trackName}`}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -10 }}
+        transition={{ duration: 0.3 }}
+      >
+        {formatNowPlaying()}
+      </motion.p>
+    </AnimatePresence>
   );
-}
+}

components/header/MobileMenuToggle.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useState } from "react";
+import NavbarLinks from "./NavbarLinks";
+
+export default function MobileMenuToggle() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        className="md:hidden text-foreground"
+        onClick={() => setIsOpen((prev) => !prev)}
+        aria-label={isOpen ? "Close menu" : "Open menu"}
+        aria-expanded={isOpen}
+      >
+        <svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
+          />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 z-50 md:hidden px-4 mt-2 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="py-4 flex flex-col bg-background border rounded-2xl shadow-xl w-full">
+            <NavbarLinks
+              className="flex flex-col items-center space-y-4 w-full"
+              onLinkClick={() => setIsOpen(false)}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}