From 662be1c818266c378bb30939eb548ef04e72c12e Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sat, 30 May 2026 19:31:07 +0530
Subject: [PATCH 01/20] Update AGENTS.md and README.md for Spotofy project
 overview and architecture

- Expanded AGENTS.md to provide detailed guidance on the Spotofy app, including project structure, tech stack, and environment variables.
- Revised README.md to introduce Spotofy, explain its functionality, and outline the architecture, including components and their interactions.
- Added prerequisites and local setup instructions for running the application.
---
 AGENTS.md | 246 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 README.md | 156 ++++++++++++++++++++++++++--------
 2 files changed, 343 insertions(+), 59 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index e5c1199..f822a34 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,31 +1,233 @@
-# agents.md
+# AGENTS.md
 
-This repository uses Windsurf Agents. Follow these rules whenever generating or editing code.
+Guidance for AI agents working in this repository.
 
-## Package Manager
+## Project overview
 
-- **Always use `bun`** as the package manager for all operations.
-  - Install packages: `bun add <package>`
-  - Install dev dependencies: `bun add -d <package>`
-  - Run scripts: `bun run <script>`
-  - Do NOT use `npm`, `yarn`, or `pnpm`.
+**Spotofy** is a collaborative Spotify listening app. Room admins create listening rooms; guests join, request songs, and upvote tracks. The room admin plays music through Spotify and controls the queue in real time.
 
-## UI & Components
+The repo is a **Turborepo monorepo** managed with **Bun** workspaces.
 
-- Prefer **shadcn/ui** components wherever possible.
-- If the required shadcn/ui component is not available in the project, **install it first** using `bun add` (then use it).
-- Keep styling consistent with the existing design system:
-  - Use Tailwind utility classes.
-  - Use the existing theme tokens/colors already defined in the project (avoid introducing arbitrary new colors).
+## Repository layout
 
-## React Component Conventions
+```
+spotofy-app/
+├── apps/
+│   ├── web/              # Next.js 16 App Router frontend + REST API routes
+│   └── room-server/      # Bun WebSocket server for real-time room state
+├── packages/
+│   ├── db/               # Prisma schema, migrations, shared DB client (@repo/db)
+│   ├── ui/               # Shared shadcn/ui component library (@repo/ui)
+│   ├── tailwind-config/  # Shared Tailwind v4 config
+│   ├── eslint-config/    # Shared ESLint configs (@repo/eslint-config)
+│   └── typescript-config/# Shared tsconfigs (@repo/typescript-config)
+├── docker/
+│   └── docker-compose.dev.yml  # Local PostgreSQL
+└── .env                    # Root env file (not committed; copy from .env.example)
+```
 
-- **New React component filenames must be kebab-case**.
-  - Example: `user-avatar.tsx`, `sign-in-form.tsx`
-- **React component names must be PascalCase**.
-  - Example: `UserAvatar`, `SignInForm`
+## Tech stack
 
-## General
+| Layer | Technology |
+| --- | --- |
+| Frontend | Next.js 16 (App Router), React 19, Tailwind CSS v4 |
+| UI library | shadcn/ui (`base-nova` style), `@base-ui/react`, Lucide icons |
+| Auth | [better-auth](https://www.better-auth.com/) with Google OAuth + Prisma adapter |
+| Database | PostgreSQL 17, Prisma 7 (`@prisma/adapter-pg`) |
+| Real-time | WebSocket server (`ws`) in `apps/room-server` |
+| Music | Spotify OAuth + Web Playback SDK (admin only) |
+| Validation | Zod 4 |
+| Monorepo | Turborepo 2 |
 
-- Keep changes minimal and aligned with the requested task.
-- Do not add backend logic unless explicitly requested.
+## Architecture
+
+Two runtimes share `@repo/db`:
+
+1. **`apps/web`** — HTTP layer
+   - Pages, layouts, and client UI
+   - REST API routes under `app/api/`
+   - Auth via better-auth (`/api/auth/[...all]`)
+   - Spotify OAuth/token/search routes under `/api/spotify/`
+   - Room CRUD under `/api/rooms`
+
+2. **`apps/room-server`** — Real-time layer
+   - WebSocket server on `WS_PORT` (default **3001**)
+   - In-memory room state (`Room` class) backed by Prisma for persistence
+   - Handles join flow, song requests, upvotes, queue updates, admin approvals
+
+The web app connects to the room server via `NEXT_PUBLIC_WS_URL` (see `apps/web/hooks/useWebSocket.ts`).
+
+### Key routes (web)
+
+| Path | Purpose |
+| --- | --- |
+| `/` | Landing page |
+| `/login` | Google sign-in |
+| `/admin` | Create/manage rooms (admin dashboard) |
+| `/join` | Join a room by code |
+| `/room/[code]` | Live room UI (`code` = room `id` from Prisma) |
+
+Route protection is defined in `apps/web/lib/routes.ts`. Auth redirects live in `apps/web/proxy.ts` (Next.js 16 replacement for `middleware.ts`). Pages also perform their own session checks (e.g. `app/room/[code]/page.tsx`).
+
+### Database models
+
+Defined in `packages/db/prisma/schema.prisma`:
+
+- **User** — auth + Spotify token fields
+- **Room** — admin, limits (`maxUpvotes`, `maxUsers`), auto-approve flags
+- **Song** — queue items with `SongStatus` enum (`REQUESTED`, `QUEUED`, `PLAYING`, `REJECTED`)
+- **SongUpvoteHistory** — one upvote per user per song per room
+
+After schema changes, run migrations from the repo root (see Commands below).
+
+### WebSocket protocol
+
+Message type constants are duplicated in:
+
+- `apps/web/lib/constants.ts`
+- `apps/room-server/src/constants.ts`
+
+Zod schemas and TypeScript types live in:
+
+- `apps/web/types/websocket.ts` (client)
+- `apps/room-server/src/types.ts` (server)
+
+**When adding or changing WebSocket message types, update both apps and keep constants in sync.**
+
+Server handlers: `apps/room-server/src/handerFunctions.ts` (note the filename spelling).
+
+## Environment variables
+
+Root `.env` is loaded by apps via `dotenv-cli` (e.g. `dotenv -e ../../.env`).
+
+| Variable | Used by | Purpose |
+| --- | --- | --- |
+| `DATABASE_URL` | db, web, room-server | PostgreSQL connection string |
+| `BETTER_AUTH_SECRET` | web | Auth signing secret |
+| `WEB_APP_URL` | web | better-auth base URL (server) |
+| `NEXT_PUBLIC_WEB_APP_URL` | web (client) | Public app URL for OAuth callbacks |
+| `GOOGLE_CLIENT_ID` / `GOOGLE_CLIENT_SECRET` | web | Google OAuth |
+| `SPOTIFY_CLIENT_ID` / `SPOTIFY_CLIENT_SECRET` | web | Spotify OAuth + API |
+| `WS_PORT` | room-server | WebSocket listen port (default 3001) |
+| `NEXT_PUBLIC_WS_URL` | web (client) | WebSocket URL (default `ws://localhost:3001`) |
+
+Copy `.env.example` to `.env` and fill in values. Spotify vars are required for music features but are not yet listed in `.env.example`.
+
+Local DB: `docker compose -f docker/docker-compose.dev.yml up -d` (Postgres on port 5432, user/db/password: `spotofy`).
+
+## Commands
+
+Always use **Bun** — do not use npm, yarn, or pnpm.
+
+```bash
+bun install                  # Install all workspace dependencies
+bun run dev                  # Start all apps (web :3000, room-server :3001)
+bun run build                # Build all packages/apps
+bun run lint                 # Lint entire monorepo
+bun run check-types          # Type-check entire monorepo
+bun run format               # Prettier format
+
+# Database (runs via turbo → @repo/db)
+bun run db:generate          # Generate Prisma client
+bun run db:migrate           # Create/apply migrations (dev)
+bun run db:deploy            # Apply migrations (production)
+bun run db:studio            # Prisma Studio
+
+# Filter to a single package
+bunx turbo run dev --filter=web
+bunx turbo run dev --filter=room-server
+bunx turbo run build --filter=@repo/db
+```
+
+Prisma client output: `packages/db/generated/prisma/`. Import via `@repo/db`.
+
+## Package manager
+
+- Install packages: `bun add <package>` (from the relevant workspace directory, or `-w` at root)
+- Dev dependencies: `bun add -d <package>`
+- Run scripts: `bun run <script>`
+
+## UI & components
+
+- Prefer **shadcn/ui** components from `@repo/ui`.
+- Components live in `packages/ui/src/components/ui/`.
+- Import pattern: `@repo/ui/components/ui/<component>` (e.g. `@repo/ui/components/ui/button`).
+- Global styles: `@repo/ui/globals.css` (imported in `apps/web/app/layout.tsx`).
+- Theme: dark default via `next-themes` (`apps/web/components/theme-provider.tsx`).
+- Toasts: `@repo/ui/components/ui/sonner`.
+
+### Adding shadcn components
+
+Install new components into **`packages/ui`** using its `components.json` (`style: base-nova`). Do not add shadcn components directly under `apps/web` unless they are app-specific.
+
+- Use Tailwind utility classes and existing CSS variables from `packages/ui/src/styles/globals.css`.
+- Avoid arbitrary new colors; follow the neutral theme tokens.
+- Spotify album art is allowed via `next/image` remote pattern for `i.scdn.co`.
+
+## React & Next.js conventions
+
+### File naming
+
+- **New component files: kebab-case** — e.g. `room-header.tsx`, `sign-in-form.tsx`
+- **Component names: PascalCase** — e.g. `RoomHeader`, `SignInForm`
+- Some legacy files use camelCase (e.g. `signIn.tsx`); follow kebab-case for new files.
+
+### App Router patterns
+
+- **Server pages** fetch session/data, then render a **`_client.tsx`** client component for interactivity.
+- Co-locate route-specific components in `_components/` next to the page.
+- Path alias in web: `@/*` → `apps/web/*`
+- Path alias for UI: `@repo/ui/*` → `packages/ui/src/*`
+
+Example (room page):
+
+```
+app/room/[code]/
+├── page.tsx              # Server component: auth + data loading
+└── _components/
+    ├── _client.tsx       # Client shell: WebSocket + layout
+    ├── room-header.tsx
+    └── queue-sidebar.tsx
+```
+
+### API routes
+
+- Use Route Handlers in `app/api/**/route.ts`.
+- Validate request bodies with Zod (`safeParse`).
+- Check session via `auth.api.getSession({ headers: req.headers })`.
+- Use `prisma` from `@repo/db` for database access.
+
+### Auth
+
+- Server: `auth` from `@/lib/auth`
+- Client: `signIn` / `signOut` from `@/lib/auth-client`
+- Do not put heavy auth logic in `proxy.ts`; keep detailed checks in pages and route handlers.
+
+## Shared packages
+
+| Package | Import | Notes |
+| --- | --- | --- |
+| `@repo/db` | `import { prisma } from "@repo/db"` | Also re-exports Prisma types |
+| `@repo/ui` | `@repo/ui/components/ui/*` | Transpiled by Next via `transpilePackages` |
+| `@repo/eslint-config` | Extended in each app's `eslint.config.*` | `--max-warnings 0` in CI |
+| `@repo/typescript-config` | Extended in each `tsconfig.json` | |
+
+## CI
+
+GitHub Actions workflows (path-filtered per package):
+
+- `ci-web.yml` — build, lint, type-check for `web` (+ db/ui deps)
+- `ci-room-server.yml` — build, lint, type-check for `room-server`
+- `ci-db.yml` — build, type-check for `@repo/db`
+- `ci-ui.yml` — build, lint, type-check for `@repo/ui`
+
+All use Bun 1.3.6 and `bun install --frozen-lockfile`.
+
+## General guidelines
+
+- Keep changes minimal and scoped to the requested task.
+- Match existing patterns in the file or directory you are editing.
+- When touching Prisma schema, add a migration — do not only edit the schema file.
+- When touching WebSocket messages, update web client, room-server, and Zod schemas together.
+- `apps/web/next.config.ts` has `typescript.ignoreBuildErrors: true` — still run `bun run check-types` locally.
+- Do not commit `.env` or secrets.
diff --git a/README.md b/README.md
index 438763d..617f25d 100644
--- a/README.md
+++ b/README.md
@@ -1,58 +1,140 @@
-# Turborepo Tailwind CSS starter
+# Spotofy
 
-This Turborepo starter is maintained by the Turborepo core team.
+Listen to music together. Spotofy lets a room host create a shared listening session on Spotify — guests join, request songs, upvote tracks, and everyone sees the queue update in real time.
 
-## Using this example
+## How it works
 
-Run the following command:
+1. **Sign in** with Google.
+2. **Create a room** from the admin dashboard and share the room code.
+3. **Guests join** the room, request songs, and upvote what they want to hear next.
+4. **The room host** connects their Spotify account, plays music, and manages the queue.
 
-```sh
-npx create-turbo@latest -e with-tailwind
+The host is the only person who needs Spotify connected — everyone else participates through the web app.
+
+## Architecture
+
+Spotofy is split into three main pieces that work together:
+
+```mermaid
+flowchart LR
+  Browser["Browser\n(Next.js web app)"]
+  RoomServer["Room server\n(WebSockets)"]
+  DB["PostgreSQL\n(database)"]
+  Spotify["Spotify API"]
+
+  Browser <-->|"real-time updates"| RoomServer
+  Browser -->|"pages, auth, API"| DB
+  RoomServer -->|"rooms, songs, votes"| DB
+  Browser -->|"search & playback"| Spotify
+```
+
+| Part | What it does |
+| --- | --- |
+| **Web app** (`apps/web`) | The website you interact with — login, create/join rooms, search songs, and the live room UI. Runs on [http://localhost:3000](http://localhost:3000). |
+| **Room server** (`apps/room-server`) | Keeps rooms in sync in real time — who joined, song requests, upvotes, and queue changes. Runs on port **3001**. |
+| **Database** (`packages/db`) | Stores users, rooms, songs, and votes. Uses PostgreSQL with Prisma. |
+
+Shared UI components live in `packages/ui`. The repo uses [Turborepo](https://turbo.build/) and [Bun](https://bun.sh/) to manage everything as a monorepo.
+
+For deeper technical details (file layout, conventions, env vars), see [AGENTS.md](./AGENTS.md).
+
+## Prerequisites
+
+- [Bun](https://bun.sh/) (v1.3+)
+- [Docker](https://www.docker.com/) (for local PostgreSQL)
+- A **Google OAuth** app (for sign-in)
+- A **Spotify Developer** app (for music search and playback)
+
+## Run locally
+
+### 1. Clone and install
+
+```bash
+git clone <repo-url>
+cd spotofy-app
+bun install
+```
+
+### 2. Start the database
+
+```bash
+docker compose -f docker/docker-compose.dev.yml up -d
 ```
 
-## What's inside?
+This starts PostgreSQL on port `5432` with database `spotofy` and password `spotofy`.
+
+### 3. Configure environment variables
+
+Copy the example env file and fill in your values:
+
+```bash
+cp .env.example .env
+```
 
-This Turborepo includes the following packages/apps:
+At minimum, set these in `.env`:
 
-### Apps and Packages
+```env
+DATABASE_URL="postgresql://postgres:spotofy@localhost:5432/spotofy"
 
-- `docs`: a [Next.js](https://nextjs.org/) app with [Tailwind CSS](https://tailwindcss.com/)
-- `web`: another [Next.js](https://nextjs.org/) app with [Tailwind CSS](https://tailwindcss.com/)
-- `ui`: a stub React component library with [Tailwind CSS](https://tailwindcss.com/) shared by both `web` and `docs` applications
-- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
+BETTER_AUTH_SECRET="generate-a-long-random-string"
+WEB_APP_URL="http://localhost:3000"
+NEXT_PUBLIC_WEB_APP_URL="http://localhost:3000"
 
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+GOOGLE_CLIENT_ID="your-google-client-id"
+GOOGLE_CLIENT_SECRET="your-google-client-secret"
 
-### Building packages/ui
+SPOTIFY_CLIENT_ID="your-spotify-client-id"
+SPOTIFY_CLIENT_SECRET="your-spotify-client-secret"
 
-This example is set up to produce compiled styles for `ui` components into the `dist` directory. The component `.tsx` files are consumed by the Next.js apps directly using `transpilePackages` in `next.config.ts`. This was chosen for several reasons:
+NEXT_PUBLIC_WS_URL="ws://localhost:3001"
+WS_PORT=3001
+```
 
-- Make sharing one `tailwind.config.ts` to apps and packages as easy as possible.
-- Make package compilation simple by only depending on the Next.js Compiler and `tailwindcss`.
-- Ensure Tailwind classes do not overwrite each other. The `ui` package uses a `ui-` prefix for it's classes.
-- Maintain clear package export boundaries.
+**Google OAuth:** Create credentials in the [Google Cloud Console](https://console.cloud.google.com/). Add `http://localhost:3000` as an authorized origin and `http://localhost:3000/api/auth/callback/google` as a redirect URI.
 
-Another option is to consume `packages/ui` directly from source without building. If using this option, you will need to update the `tailwind.config.ts` in your apps to be aware of your package locations, so it can find all usages of the `tailwindcss` class names for CSS compilation.
+**Spotify:** Create an app in the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard). Add `http://localhost:3000/api/spotify/callback` as a redirect URI.
 
-For example, in [tailwind.config.ts](packages/tailwind-config/tailwind.config.ts):
+### 4. Set up the database
 
-```js
-  content: [
-    // app content
-    `src/**/*.{js,ts,jsx,tsx}`,
-    // include packages if not transpiling
-    "../../packages/ui/*.{js,ts,jsx,tsx}",
-  ],
+```bash
+bun run db:generate
+bun run db:migrate
 ```
 
-If you choose this strategy, you can remove the `tailwindcss` and `autoprefixer` dependencies from the `ui` package.
+### 5. Start the app
+
+```bash
+bun run dev
+```
 
-### Utilities
+This starts both the web app and the room server. Open [http://localhost:3000](http://localhost:3000) in your browser.
 
-This Turborepo has some additional tools already setup for you:
+## Useful commands
 
-- [Tailwind CSS](https://tailwindcss.com/) for styles
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+| Command | Description |
+| --- | --- |
+| `bun run dev` | Start web app + room server in development |
+| `bun run build` | Build all packages |
+| `bun run lint` | Lint the codebase |
+| `bun run check-types` | Run TypeScript checks |
+| `bun run db:studio` | Open Prisma Studio (database GUI) |
+
+To run a single app:
+
+```bash
+bunx turbo run dev --filter=web
+bunx turbo run dev --filter=room-server
+```
+
+## Project structure
+
+```
+spotofy-app/
+├── apps/
+│   ├── web/           # Next.js frontend + API
+│   └── room-server/   # WebSocket server for live rooms
+├── packages/
+│   ├── db/            # Database schema & client
+│   └── ui/            # Shared UI components
+└── docker/            # Local PostgreSQL setup
+```

From fd98cad80802e8047e8a2451a4bbcd7173abdf42 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 31 May 2026 12:46:17 +0530
Subject: [PATCH 02/20] Refactor Spotify player and enhance user authentication

- Updated the import path for route types in next-env.d.ts.
- Added a Sign Out button in the LandingPage component to allow user logout.
- Modified SpotifyPlaybackState to include previous_tracks for better playback tracking.
- Refactored SpotifyWebPlayer to streamline state management and improve track end detection logic.
- Consolidated useEffect hooks for better performance and clarity.
---
 apps/web/app/_components/_client.tsx          |   2 +
 .../[code]/_components/spotify-player.tsx     | 140 +++++++++---------
 apps/web/next-env.d.ts                        |   2 +-
 3 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/apps/web/app/_components/_client.tsx b/apps/web/app/_components/_client.tsx
index bb13f11..93f964e 100644
--- a/apps/web/app/_components/_client.tsx
+++ b/apps/web/app/_components/_client.tsx
@@ -22,6 +22,7 @@ import {
   Music,
 } from "lucide-react";
 import Navbar from "@/components/navbar";
+import { signOut } from "@/lib/auth-client";
 
 export default function LandingPage() {
   const fadeInUp = {
@@ -130,6 +131,7 @@ export default function LandingPage() {
               </Button>
             </motion.div>
           </Link>
+          <Button onClick={async () => await signOut()}>Sign Out</Button>
         </Navbar>
 
         {/* Hero Section */}
diff --git a/apps/web/app/room/[code]/_components/spotify-player.tsx b/apps/web/app/room/[code]/_components/spotify-player.tsx
index 2b83fa1..e1fe760 100644
--- a/apps/web/app/room/[code]/_components/spotify-player.tsx
+++ b/apps/web/app/room/[code]/_components/spotify-player.tsx
@@ -27,7 +27,10 @@ type SpotifyPlayer = {
 
 type SpotifyPlaybackState = {
   paused: boolean;
-  track_window: { current_track: SpotifyTrack };
+  track_window: {
+    previous_tracks: SpotifyTrack[];
+    current_track: SpotifyTrack;
+  };
 };
 
 declare global {
@@ -44,6 +47,7 @@ declare global {
 }
 
 type SpotifyTrack = {
+  id: string;
   uri: string;
   name: string;
   artists: { name: string }[];
@@ -119,27 +123,31 @@ export default function SpotifyWebPlayer({
   const nowPlayingUrlRef = useRef<string | null | undefined>(nowPlayingUrl);
   const onReadyRef = useRef(onReady);
   const onSongEndRef = useRef(onSongEnd);
-  const prevPlaybackRef = useRef<PlaybackSnapshot | null>(null);
-  const songEndFiredRef = useRef(false);
   const [isPaused, setPaused] = useState(false);
   const [isActive, setActive] = useState(false);
   const [currentTrack, setCurrentTrack] = useState<SpotifyTrack | null>(null);
+  const lastEndedTrackIdRef = useRef<string | null>(null);
+  const endOfTrackDebounceRef = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    tokenRef.current = token;
-  }, [token]);
-
-  useEffect(() => {
-    nowPlayingUrlRef.current = nowPlayingUrl;
-  }, [nowPlayingUrl]);
-
-  // useEffect(() => {
-  //   onReadyRef.current = onReady;
-  // }, [onReady]);
+  tokenRef.current = token;
+  nowPlayingUrlRef.current = nowPlayingUrl;
+  onReadyRef.current = onReady;
+  onSongEndRef.current = onSongEnd;
 
-  useEffect(() => {
-    onSongEndRef.current = onSongEnd;
-  }, [onSongEnd]);
+  const stopRepeat = useCallback(async () => {
+    const fresh = await fetchFreshToken();
+    const accessToken = fresh ?? tokenRef.current;
+    await fetch(
+      `https://api.spotify.com/v1/me/player/repeat?state=off&device_id=${deviceIdRef.current}`,
+      {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+      },
+    );
+  }, []);
 
   const play = useCallback(async () => {
     const currentNowPlayingUrl = nowPlayingUrlRef.current;
@@ -172,36 +180,11 @@ export default function SpotifyWebPlayer({
         "spotify-player-play-error",
       );
     }
-  }, []);
 
-  const stopRepeat = useCallback(async () => {
-    const fresh = await fetchFreshToken();
-    const accessToken = fresh ?? tokenRef.current;
-    await fetch(
-      `https://api.spotify.com/v1/me/player/repeat?state=off&device_id=${deviceIdRef.current}`,
-      {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
-        },
-      },
-    );
+    // Disable repeat
+    await stopRepeat();
   }, []);
 
-  useEffect(() => {
-    console.log("Nowplaying URL:", nowPlayingUrl);
-    console.log("Player active status:", isActive);
-    if (!nowPlayingUrl || !deviceIdRef.current || !isActive) return;
-    // prevTrackNameRef.current = nowPlayingUrl;
-    play().catch(console.error);
-  }, [nowPlayingUrl, isActive, play]);
-
-  // useEffect(() => {
-  //   if (!isActive || !nowPlayingUrl) return;
-  //   play().catch(console.error);
-  // }, [isActive]);
-
   async function activateDevice(deviceId: string) {
     const fresh = await fetchFreshToken();
     const accessToken = fresh ?? tokenRef.current;
@@ -226,6 +209,7 @@ export default function SpotifyWebPlayer({
     }
   }
 
+  // --- Effects ---
   useEffect(() => {
     const script = document.createElement("script");
     script.src = "https://sdk.scdn.co/spotify-player.js";
@@ -269,39 +253,44 @@ export default function SpotifyWebPlayer({
         const s = state as ExtendedPlaybackState | null;
         if (!s) {
           setActive(false);
-          prevPlaybackRef.current = null;
           return;
         }
-        const track = s.track_window.current_track;
-        const prev = prevPlaybackRef.current;
-
-        const endedNaturally =
-          !!prev &&
-          !prev.paused &&
-          s.paused &&
-          s.position === 0 &&
-          prev.uri === track.uri &&
-          prev.duration > 0 &&
-          prev.position >= Math.max(0, prev.duration - 1500);
-
-        console.log("Ended naturally:", endedNaturally);
-        if (endedNaturally && !songEndFiredRef.current) {
-          songEndFiredRef.current = true;
-          onSongEndRef.current?.();
-        }
 
-        if (prev?.uri !== track.uri || (!s.paused && s.position > 0)) {
-          songEndFiredRef.current = false;
-        }
+        const { paused, position, track_window } = s;
+        const { previous_tracks, current_track } = track_window;
 
-        prevPlaybackRef.current = {
-          uri: track.uri,
-          paused: s.paused,
-          position: s.position,
-          duration: s.duration,
-        };
+        console.log("[SpotifyPlayer] Player state changed:", {
+          paused,
+          position,
+          track_window,
+          previous_tracks,
+          current_track,
+        });
 
-        setCurrentTrack(track);
+        const trackJustEnded =
+          paused &&
+          position === 0 &&
+          previous_tracks.length > 0 &&
+          previous_tracks[0]?.id === current_track.id;
+
+        console.log("Track just ended:", trackJustEnded);
+        if (trackJustEnded) {
+          if (lastEndedTrackIdRef.current !== current_track.id) {
+            lastEndedTrackIdRef.current = current_track.id;
+
+            if (endOfTrackDebounceRef.current)
+              clearTimeout(endOfTrackDebounceRef.current);
+            endOfTrackDebounceRef.current = setTimeout(() => {
+              onSongEndRef.current?.();
+            }, 1000);
+          }
+        } else {
+          if (!paused && position > 0) {
+            lastEndedTrackIdRef.current = null;
+          }
+        }
+
+        setCurrentTrack(current_track);
         setPaused(s.paused);
         player.getCurrentState().then((currentState) => {
           // console.log("CURRENT_STATE:", !!currentState);
@@ -326,6 +315,13 @@ export default function SpotifyWebPlayer({
     };
   }, [token, play]);
 
+  useEffect(() => {
+    console.log("Nowplaying URL:", nowPlayingUrl);
+    console.log("Player active status:", isActive);
+    if (!nowPlayingUrl || !deviceIdRef.current || !isActive) return;
+    play().catch(console.error);
+  }, [nowPlayingUrl, isActive, play]);
+
   if (!isActive || !currentTrack) {
     return (
       <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-center sm:items-start p-2">
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

From 322c2dd381a15deb2d9fc063e0f38b6ca03ae807 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 31 May 2026 13:06:33 +0530
Subject: [PATCH 03/20] Refactor message types in room-server and web
 components

- Renamed CLIENT_TO_SERVER_MESSAGE_TYPES and SERVER_TO_CLIENT_MESSAGE_TYPES to ClientEvents and ServerEvents for improved clarity and consistency.
- Updated all references to the new message type constants across the room-server and web components.
- Enhanced message structure to follow a more descriptive naming convention, aligning with event-driven architecture.
---
 apps/room-server/src/constants.ts       |  60 ++++++-----
 apps/room-server/src/handerFunctions.ts | 128 ++++++++++++------------
 apps/room-server/src/types.ts           |  54 +++++-----
 apps/web/hooks/useWebSocket.ts          |  50 ++++-----
 apps/web/lib/constants.ts               |  60 ++++++-----
 apps/web/next-env.d.ts                  |   2 +-
 apps/web/types/websocket.ts             |  54 +++++-----
 7 files changed, 200 insertions(+), 208 deletions(-)

diff --git a/apps/room-server/src/constants.ts b/apps/room-server/src/constants.ts
index 7b5a263..33e23d5 100644
--- a/apps/room-server/src/constants.ts
+++ b/apps/room-server/src/constants.ts
@@ -1,38 +1,34 @@
-export const CLIENT_TO_SERVER_MESSAGE_TYPES = {
-  JOIN_ROOM: "join_room",
-  REQUEST_SONG: "request_song",
-  UPVOTE_SONG: "upvote_song",
-  APPROVE_SONG: "approve_song",
-  REJECT_SONG: "reject_song",
-  APPROVE_USER: "approve_user",
-  REJECT_USER: "reject_user",
-  BROADCAST_NOW_PLAYING: "broadcast_now_playing",
-  NEXT_SONG: "next_song",
+export const ClientEvents = {
+  JOIN_ROOM: "room.join",
+  REQUEST_SONG: "song.request",
+  UPVOTE_SONG: "song.upvote",
+  APPROVE_SONG: "song.approve",
+  REJECT_SONG: "song.reject",
+  APPROVE_USER: "user.approve",
+  REJECT_USER: "user.reject",
+  SYNC_NOW_PLAYING: "now_playing.sync",
+  SKIP_TO_NEXT: "queue.next",
 } as const;
 
-export const SERVER_TO_CLIENT_MESSAGE_TYPES = {
-  QUEUE_UPDATE: "queue_update",
-  SONG_REQUESTED: "song_requested",
-  SONG_APPROVED: "song_approved",
-  SONG_REJECTED: "song_rejected",
+export const ServerEvents = {
+  QUEUE_UPDATED: "queue.updated",
+  SONG_REQUESTED: "song.requested",
+  SONG_APPROVED: "song.approved",
+  SONG_REJECTED: "song.rejected",
   ERROR: "error",
-  ADMIN_NOT_JOINED: "admin_not_joined",
-  ADMIN_LEFT: "admin_left",
-  JOINED_ROOM: "joined_room",
-  LIST_USERS: "list_users",
-  JOIN_REQUESTED: "join_requested",
-  REQUEST_ALREADY_SENT: "request_already_sent",
-  ADMIN_JOINED: "admin_joined",
-  USER_APPROVED: "user_approved",
-  USER_REJECTED: "user_rejected",
-  USERS_REQUESTED_LIST: "users_requested_list",
-  NOW_PLAYING_UPDATE: "now_playing_update",
+  WAITING_FOR_ADMIN: "room.waiting_for_admin",
+  ADMIN_LEFT: "room.admin_left",
+  ADMIN_JOINED: "room.admin_joined",
+  ROOM_JOINED: "room.joined",
+  MEMBERS_UPDATED: "room.members_updated",
+  USER_JOIN_REQUESTED: "user.join_requested",
+  JOIN_ALREADY_PENDING: "user.join_already_pending",
+  USER_APPROVED: "user.approved",
+  USER_REJECTED: "user.rejected",
+  PENDING_JOIN_REQUESTS: "room.pending_join_requests",
+  NOW_PLAYING_UPDATED: "now_playing.updated",
 } as const;
 
-export const ALL_CLIENT_TO_SERVER_MESSAGE_TYPES = Object.values(
-  CLIENT_TO_SERVER_MESSAGE_TYPES,
-);
+export const ALL_CLIENT_EVENTS = Object.values(ClientEvents);
 
-export const ALL_SERVER_TO_CLIENT_MESSAGE_TYPES = Object.values(
-  SERVER_TO_CLIENT_MESSAGE_TYPES,
-);
+export const ALL_SERVER_EVENTS = Object.values(ServerEvents);
diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index f67c29c..e853180 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -1,7 +1,7 @@
 import type { WebSocket } from "ws";
 import {
-  CLIENT_TO_SERVER_MESSAGE_TYPES,
-  SERVER_TO_CLIENT_MESSAGE_TYPES,
+  ClientEvents,
+  ServerEvents,
 } from "./constants";
 import { Room } from "./room";
 import {
@@ -57,7 +57,7 @@ function sendToUser(userId: string, message: OutgoingMessage) {
 async function sendQueueUpdate(roomId: string, room: Room) {
   const queue = await room.loadSongs();
   broadcastToRoom(roomId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.QUEUE_UPDATE,
+    type: ServerEvents.QUEUE_UPDATED,
     payload: { queue },
   });
 }
@@ -80,7 +80,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
   if (user.userId === room.getAdminId()) {
     room.setAdminStatus(true);
     broadcastToRoom(roomId, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_JOINED,
+      type: ServerEvents.ADMIN_JOINED,
       payload: {},
     });
 
@@ -88,7 +88,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
     const userRequests = room.getUsersRequestedList();
     if (userRequests.length > 0) {
       send(ws, {
-        type: SERVER_TO_CLIENT_MESSAGE_TYPES.USERS_REQUESTED_LIST,
+        type: ServerEvents.PENDING_JOIN_REQUESTS,
         payload: { users: userRequests },
       });
     }
@@ -96,7 +96,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
     if (!room.isAdminJoined()) {
       // send message to user that admin has not joined yet
       send(ws, {
-        type: SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_NOT_JOINED,
+        type: ServerEvents.WAITING_FOR_ADMIN,
         payload: {},
       });
 
@@ -107,7 +107,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
       if (room.checkUserRequestedAlready(user.userId)) {
         // send message to user that request is already sent
         send(ws, {
-          type: SERVER_TO_CLIENT_MESSAGE_TYPES.REQUEST_ALREADY_SENT,
+          type: ServerEvents.JOIN_ALREADY_PENDING,
           payload: {},
         });
         return;
@@ -117,7 +117,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
 
       // send to admin for approval
       sendToAdmin(roomId, room, {
-        type: SERVER_TO_CLIENT_MESSAGE_TYPES.JOIN_REQUESTED,
+        type: ServerEvents.USER_JOIN_REQUESTED,
         payload: {
           userId: user.userId,
           username: user.username,
@@ -134,7 +134,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
 
   // send joined room message to self
   send(ws, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.JOINED_ROOM,
+    type: ServerEvents.ROOM_JOINED,
     payload: {
       roomId,
       config: room.getConfig(),
@@ -144,20 +144,20 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
 
   // send list users message to all users in room
   broadcastToRoom(roomId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.LIST_USERS,
+    type: ServerEvents.MEMBERS_UPDATED,
     payload: { users: room.getUsers() },
   });
 
   // send current song to this user
   const currentSong = await room.playCurrentSong();
   send(ws, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE,
+    type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: currentSong ?? null },
   });
 
   // send queue update to this user
   send(ws, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.QUEUE_UPDATE,
+    type: ServerEvents.QUEUE_UPDATED,
     payload: { queue },
   });
 }
@@ -166,7 +166,7 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -174,7 +174,7 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
   // check if user is admin
   if (!conn.user.isAdmin) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "User is not admin" },
     });
   }
@@ -183,7 +183,7 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
@@ -193,7 +193,7 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
 
   // send to user that request is rejected
   sendToUser(msg.payload.userId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.USER_REJECTED,
+    type: ServerEvents.USER_REJECTED,
   });
 }
 
@@ -201,7 +201,7 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -209,7 +209,7 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
@@ -217,7 +217,7 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
   // check if user is admin
   if (!conn.user.isAdmin) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "User is not admin" },
     });
   }
@@ -226,7 +226,7 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
   const user = room.getUserRequested(msg.payload.userId);
   if (!user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "User not found in requested list" },
     });
   }
@@ -257,7 +257,7 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
 
   // send joined message to user
   sendToUser(msg.payload.userId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.JOINED_ROOM,
+    type: ServerEvents.ROOM_JOINED,
     payload: {
       roomId: conn.roomId,
       config: room.getConfig(),
@@ -267,26 +267,26 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
 
   // send list users message to all users in room
   broadcastToRoom(conn.roomId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.LIST_USERS,
+    type: ServerEvents.MEMBERS_UPDATED,
     payload: { users: room.getUsers() },
   });
 
   // send current song to this user
   const currentSong = await room.playCurrentSong();
   sendToUser(msg.payload.userId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE,
+    type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: currentSong ?? null },
   });
 
   // send queue update to this user
   sendToUser(msg.payload.userId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.QUEUE_UPDATE,
+    type: ServerEvents.QUEUE_UPDATED,
     payload: { queue },
   });
 
   // send to user that request is approved
   sendToUser(msg.payload.userId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.USER_APPROVED,
+    type: ServerEvents.USER_APPROVED,
     payload: {
       userId: msg.payload.userId,
       username: msg.payload.username,
@@ -298,7 +298,7 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -306,7 +306,7 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
@@ -319,7 +319,7 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
     await sendQueueUpdate(conn.roomId, room);
   } else {
     sendToAdmin(conn.roomId, room, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REQUESTED,
+      type: ServerEvents.SONG_REQUESTED,
       payload: { song: songData },
     });
   }
@@ -329,7 +329,7 @@ async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -337,14 +337,14 @@ async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
 
   if (msg.payload.userId !== conn.user.userId) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Invalid upvote user" },
     });
   }
@@ -356,13 +356,13 @@ async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
 
   if (result === "already_upvoted") {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "You have already upvoted this song in this room" },
     });
   }
 
   return send(ws, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+    type: ServerEvents.ERROR,
     payload: { message: "Song not found in queue" },
   });
 }
@@ -371,7 +371,7 @@ async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -379,14 +379,14 @@ async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
 
   if (conn.user.userId !== room.getAdminId()) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Only admin can approve songs" },
     });
   }
@@ -394,13 +394,13 @@ async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
   const success = await room.approveSong(msg.payload.songId);
   if (success) {
     broadcastToRoom(conn.roomId, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_APPROVED,
+      type: ServerEvents.SONG_APPROVED,
       payload: { songId: msg.payload.songId },
     });
     await sendQueueUpdate(conn.roomId, room);
   } else {
     send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Song not found in requests" },
     });
   }
@@ -410,7 +410,7 @@ async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -418,14 +418,14 @@ async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
 
   if (conn.user.userId !== room.getAdminId()) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Only admin can reject songs" },
     });
   }
@@ -433,12 +433,12 @@ async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
   const success = await room.rejectSong(msg.payload.songId);
   if (success) {
     broadcastToRoom(conn.roomId, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REJECTED,
+      type: ServerEvents.SONG_REJECTED,
       payload: { songId: msg.payload.songId },
     });
   } else {
     send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Song not found in requests" },
     });
   }
@@ -448,7 +448,7 @@ async function handleNextSong(ws: WebSocket) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -456,14 +456,14 @@ async function handleNextSong(ws: WebSocket) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
 
   if (conn.user.userId !== room.getAdminId()) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Only admin can skip to next song" },
     });
   }
@@ -471,7 +471,7 @@ async function handleNextSong(ws: WebSocket) {
   const song = await room.playNextSong();
 
   broadcastToRoom(conn.roomId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE,
+    type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: song ?? null },
   });
 
@@ -482,7 +482,7 @@ async function handlePlayCurrentSong(ws: WebSocket) {
   const conn = connections.get(ws);
   if (!conn || !conn.user) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Not in a room" },
     });
   }
@@ -490,7 +490,7 @@ async function handlePlayCurrentSong(ws: WebSocket) {
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Room not found" },
     });
   }
@@ -498,7 +498,7 @@ async function handlePlayCurrentSong(ws: WebSocket) {
   const song = await room.playCurrentSong();
 
   broadcastToRoom(conn.roomId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE,
+    type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: song ?? null },
   });
 
@@ -512,7 +512,7 @@ export async function handleMessage(ws: WebSocket, raw: string) {
 
     if (!parsedMessage.success) {
       return send(ws, {
-        type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+        type: ServerEvents.ERROR,
         payload: { message: "Invalid message payload" },
       });
     }
@@ -520,34 +520,34 @@ export async function handleMessage(ws: WebSocket, raw: string) {
     msg = parsedMessage.data;
   } catch {
     return send(ws, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+      type: ServerEvents.ERROR,
       payload: { message: "Invalid JSON" },
     });
   }
 
   switch (msg.type) {
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.JOIN_ROOM:
+    case ClientEvents.JOIN_ROOM:
       return handleJoinRoom(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.REQUEST_SONG:
+    case ClientEvents.REQUEST_SONG:
       return handleRequestSong(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.UPVOTE_SONG:
+    case ClientEvents.UPVOTE_SONG:
       return handleUpvote(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_SONG:
+    case ClientEvents.APPROVE_SONG:
       return handleApproveSong(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_SONG:
+    case ClientEvents.REJECT_SONG:
       return handleRejectSong(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_USER:
+    case ClientEvents.APPROVE_USER:
       return handleApproveUser(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_USER:
+    case ClientEvents.REJECT_USER:
       return handleRejectUser(ws, msg);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.BROADCAST_NOW_PLAYING:
+    case ClientEvents.SYNC_NOW_PLAYING:
       return handlePlayCurrentSong(ws);
-    case CLIENT_TO_SERVER_MESSAGE_TYPES.NEXT_SONG:
+    case ClientEvents.SKIP_TO_NEXT:
       return handleNextSong(ws);
     default:
       console.log("MESSAGE_TYPE: ", msg);
       return send(ws, {
-        type: SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR,
+        type: ServerEvents.ERROR,
         payload: { message: "Unknown message type" },
       });
   }
@@ -568,7 +568,7 @@ export function handleDisconnect(ws: WebSocket) {
 
     // TODO: notify other users that admin left
     broadcastToRoom(conn.roomId, {
-      type: SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_LEFT,
+      type: ServerEvents.ADMIN_LEFT,
       payload: {},
     });
   }
@@ -580,7 +580,7 @@ export function handleDisconnect(ws: WebSocket) {
   }
 
   broadcastToRoom(conn.roomId, {
-    type: SERVER_TO_CLIENT_MESSAGE_TYPES.LIST_USERS,
+    type: ServerEvents.MEMBERS_UPDATED,
     payload: { users: room.getUsers() },
   });
 }
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index 21f3256..cecd3ba 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -3,8 +3,8 @@ import { WebSocket } from "ws";
 
 import { z } from "zod";
 import {
-  CLIENT_TO_SERVER_MESSAGE_TYPES,
-  SERVER_TO_CLIENT_MESSAGE_TYPES,
+  ClientEvents,
+  ServerEvents,
 } from "./constants";
 
 export const SongStatusSchema = z.enum([
@@ -78,7 +78,7 @@ export type ClientConnection = {
 // --- WS Message Types ---
 
 export const JoinRoomMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.JOIN_ROOM),
+  type: z.literal(ClientEvents.JOIN_ROOM),
   payload: z.object({
     roomId: z.string().min(1),
     user: UserPayloadSchema,
@@ -88,7 +88,7 @@ export const JoinRoomMessageSchema = z.object({
 export type JoinRoomMessage = z.infer<typeof JoinRoomMessageSchema>;
 
 export const RequestSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.REQUEST_SONG),
+  type: z.literal(ClientEvents.REQUEST_SONG),
   payload: z.object({
     song: SongPayloadSchema,
   }),
@@ -97,7 +97,7 @@ export const RequestSongMessageSchema = z.object({
 export type RequestSongMessage = z.infer<typeof RequestSongMessageSchema>;
 
 export const UpvoteSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.UPVOTE_SONG),
+  type: z.literal(ClientEvents.UPVOTE_SONG),
   payload: z.object({
     songId: z.string().min(1),
     userId: z.string().min(1),
@@ -107,7 +107,7 @@ export const UpvoteSongMessageSchema = z.object({
 export type UpvoteSongMessage = z.infer<typeof UpvoteSongMessageSchema>;
 
 export const ApproveSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_SONG),
+  type: z.literal(ClientEvents.APPROVE_SONG),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -116,7 +116,7 @@ export const ApproveSongMessageSchema = z.object({
 export type ApproveSongMessage = z.infer<typeof ApproveSongMessageSchema>;
 
 export const RejectSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_SONG),
+  type: z.literal(ClientEvents.REJECT_SONG),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -125,21 +125,21 @@ export const RejectSongMessageSchema = z.object({
 export type RejectSongMessage = z.infer<typeof RejectSongMessageSchema>;
 
 export const ApproveUserMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_USER),
+  type: z.literal(ClientEvents.APPROVE_USER),
   payload: UserShortPayloadSchema,
 });
 
 export type ApproveUserMessage = z.infer<typeof ApproveUserMessageSchema>;
 
 export const RejectUserMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_USER),
+  type: z.literal(ClientEvents.REJECT_USER),
   payload: UserShortPayloadSchema,
 });
 
 export type RejectUserMessage = z.infer<typeof RejectUserMessageSchema>;
 
 export const BroadcastNowPlayingMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.BROADCAST_NOW_PLAYING),
+  type: z.literal(ClientEvents.SYNC_NOW_PLAYING),
 });
 
 export type BroadcastNowPlayingMessage = z.infer<
@@ -147,7 +147,7 @@ export type BroadcastNowPlayingMessage = z.infer<
 >;
 
 export const NextSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.NEXT_SONG),
+  type: z.literal(ClientEvents.SKIP_TO_NEXT),
 });
 
 export type NextSongMessage = z.infer<typeof NextSongMessageSchema>;
@@ -169,7 +169,7 @@ export type IncomingMessage = z.infer<typeof IncomingMessageSchema>;
 // --- Server -> Client Messages ---
 
 export const QueueUpdateMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.QUEUE_UPDATE),
+  type: z.literal(ServerEvents.QUEUE_UPDATED),
   payload: z.object({
     queue: z.array(SongDataSchema),
   }),
@@ -178,7 +178,7 @@ export const QueueUpdateMessageSchema = z.object({
 export type QueueUpdateMessage = z.infer<typeof QueueUpdateMessageSchema>;
 
 export const SongRequestedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REQUESTED),
+  type: z.literal(ServerEvents.SONG_REQUESTED),
   payload: z.object({
     song: SongDataSchema,
   }),
@@ -187,7 +187,7 @@ export const SongRequestedMessageSchema = z.object({
 export type SongRequestedMessage = z.infer<typeof SongRequestedMessageSchema>;
 
 export const SongApprovedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_APPROVED),
+  type: z.literal(ServerEvents.SONG_APPROVED),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -196,7 +196,7 @@ export const SongApprovedMessageSchema = z.object({
 export type SongApprovedMessage = z.infer<typeof SongApprovedMessageSchema>;
 
 export const SongRejectedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REJECTED),
+  type: z.literal(ServerEvents.SONG_REJECTED),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -205,7 +205,7 @@ export const SongRejectedMessageSchema = z.object({
 export type SongRejectedMessage = z.infer<typeof SongRejectedMessageSchema>;
 
 export const ErrorMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR),
+  type: z.literal(ServerEvents.ERROR),
   payload: z.object({
     message: z.string().min(1),
   }),
@@ -214,21 +214,21 @@ export const ErrorMessageSchema = z.object({
 export type ErrorMessage = z.infer<typeof ErrorMessageSchema>;
 
 export const AdminNotJoinedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_NOT_JOINED),
+  type: z.literal(ServerEvents.WAITING_FOR_ADMIN),
   payload: z.object({}),
 });
 
 export type AdminNotJoinedMessage = z.infer<typeof AdminNotJoinedMessageSchema>;
 
 export const AdminLeftMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_LEFT),
+  type: z.literal(ServerEvents.ADMIN_LEFT),
   payload: z.object({}),
 });
 
 export type AdminLeftMessage = z.infer<typeof AdminLeftMessageSchema>;
 
 export const JoinedRoomMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.JOINED_ROOM),
+  type: z.literal(ServerEvents.ROOM_JOINED),
   payload: z.object({
     roomId: z.string().min(1),
     config: RoomConfigSchema,
@@ -239,7 +239,7 @@ export const JoinedRoomMessageSchema = z.object({
 export type JoinedRoomMessage = z.infer<typeof JoinedRoomMessageSchema>;
 
 export const ListUsersMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.LIST_USERS),
+  type: z.literal(ServerEvents.MEMBERS_UPDATED),
   payload: z.object({
     users: z.array(UserPayloadSchema),
   }),
@@ -248,14 +248,14 @@ export const ListUsersMessageSchema = z.object({
 export type ListUsersMessage = z.infer<typeof ListUsersMessageSchema>;
 
 export const JoinRequestedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.JOIN_REQUESTED),
+  type: z.literal(ServerEvents.USER_JOIN_REQUESTED),
   payload: UserShortPayloadSchema,
 });
 
 export type JoinRequestedMessage = z.infer<typeof JoinRequestedMessageSchema>;
 
 export const RequestAlreadySentMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.REQUEST_ALREADY_SENT),
+  type: z.literal(ServerEvents.JOIN_ALREADY_PENDING),
   payload: z.object({}),
 });
 
@@ -264,27 +264,27 @@ export type RequestAlreadySentMessage = z.infer<
 >;
 
 export const AdminJoinedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_JOINED),
+  type: z.literal(ServerEvents.ADMIN_JOINED),
   payload: z.object({}),
 });
 
 export type AdminJoinedMessage = z.infer<typeof AdminJoinedMessageSchema>;
 
 export const UserApprovedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.USER_APPROVED),
+  type: z.literal(ServerEvents.USER_APPROVED),
   payload: UserShortPayloadSchema,
 });
 
 export type UserApprovedMessage = z.infer<typeof UserApprovedMessageSchema>;
 
 export const UserRejectedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.USER_REJECTED),
+  type: z.literal(ServerEvents.USER_REJECTED),
 });
 
 export type UserRejectedMessage = z.infer<typeof UserRejectedMessageSchema>;
 
 export const UsersRequestedListMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.USERS_REQUESTED_LIST),
+  type: z.literal(ServerEvents.PENDING_JOIN_REQUESTS),
   payload: z.object({
     users: z.array(UserShortPayloadSchema),
   }),
@@ -295,7 +295,7 @@ export type UsersRequestedListMessage = z.infer<
 >;
 
 export const NowPlayingUpdateMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE),
+  type: z.literal(ServerEvents.NOW_PLAYING_UPDATED),
   payload: z.object({
     song: SongDataSchema.nullable(),
   }),
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 2de9a9d..365a87c 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import {
-  CLIENT_TO_SERVER_MESSAGE_TYPES,
-  SERVER_TO_CLIENT_MESSAGE_TYPES,
+  ClientEvents,
+  ServerEvents,
 } from "@/lib/constants";
 import type {
   UserPayload,
@@ -45,12 +45,12 @@ export function useWebSocket() {
   const handleServerMessage = useCallback(
     (message: ServerMessage) => {
       switch (message.type) {
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.LIST_USERS: {
+        case ServerEvents.MEMBERS_UPDATED: {
           setUsers(message.payload.users);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.JOINED_ROOM: {
+        case ServerEvents.ROOM_JOINED: {
           setJoinState("joined");
           setJoinError(null);
           setRoomConfig(message.payload.config);
@@ -58,7 +58,7 @@ export function useWebSocket() {
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_NOT_JOINED: {
+        case ServerEvents.WAITING_FOR_ADMIN: {
           setJoinState("blocked");
           setJoinError(null);
           setRoomConfig(null);
@@ -70,7 +70,7 @@ export function useWebSocket() {
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.USER_REJECTED: {
+        case ServerEvents.USER_REJECTED: {
           setJoinState("rejected");
           setJoinError("Your entry request was rejected by the admin.");
           setRoomConfig(null);
@@ -83,46 +83,46 @@ export function useWebSocket() {
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_JOINED: {
+        case ServerEvents.ADMIN_JOINED: {
           setIsAdminJoined(true);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_LEFT: {
+        case ServerEvents.ADMIN_LEFT: {
           setIsAdminJoined(false);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.QUEUE_UPDATE: {
+        case ServerEvents.QUEUE_UPDATED: {
           setQueue(message.payload.queue);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REQUESTED: {
+        case ServerEvents.SONG_REQUESTED: {
           setPendingRequests((prev) => [...prev, message.payload.song]);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_APPROVED: {
+        case ServerEvents.SONG_APPROVED: {
           setPendingRequests((prev) =>
             prev.filter((song) => song.id !== message.payload.songId),
           );
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REJECTED: {
+        case ServerEvents.SONG_REJECTED: {
           setPendingRequests((prev) =>
             prev.filter((song) => song.id !== message.payload.songId),
           );
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.USERS_REQUESTED_LIST: {
+        case ServerEvents.PENDING_JOIN_REQUESTS: {
           setPendingUsers(message.payload.users);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.JOIN_REQUESTED: {
+        case ServerEvents.USER_JOIN_REQUESTED: {
           setPendingUsers((prev) => {
             if (prev.some((u) => u.userId === message.payload.userId)) {
               return prev;
@@ -132,12 +132,12 @@ export function useWebSocket() {
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE: {
+        case ServerEvents.NOW_PLAYING_UPDATED: {
           setNowPlaying(message.payload.song);
           break;
         }
 
-        case SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR: {
+        case ServerEvents.ERROR: {
           reportError(
             message.payload.message,
             undefined,
@@ -257,7 +257,7 @@ export function useWebSocket() {
       setJoinState("joining");
       setJoinError(null);
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.JOIN_ROOM,
+        type: ClientEvents.JOIN_ROOM,
         payload: { roomId, user },
       });
     },
@@ -267,7 +267,7 @@ export function useWebSocket() {
   const requestSong = useCallback(
     (song: SongPayload) => {
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.REQUEST_SONG,
+        type: ClientEvents.REQUEST_SONG,
         payload: { song },
       });
     },
@@ -277,7 +277,7 @@ export function useWebSocket() {
   const upvoteSong = useCallback(
     (songId: string, userId: string) => {
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.UPVOTE_SONG,
+        type: ClientEvents.UPVOTE_SONG,
         payload: { songId, userId },
       });
     },
@@ -287,7 +287,7 @@ export function useWebSocket() {
   const approveSong = useCallback(
     (songId: string) => {
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_SONG,
+        type: ClientEvents.APPROVE_SONG,
         payload: { songId },
       });
     },
@@ -297,7 +297,7 @@ export function useWebSocket() {
   const rejectSong = useCallback(
     (songId: string) => {
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_SONG,
+        type: ClientEvents.REJECT_SONG,
         payload: { songId },
       });
     },
@@ -308,7 +308,7 @@ export function useWebSocket() {
     (userId: string, username: string) => {
       setPendingUsers((prev) => prev.filter((u) => u.userId !== userId));
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_USER,
+        type: ClientEvents.APPROVE_USER,
         payload: { userId, username },
       });
     },
@@ -319,7 +319,7 @@ export function useWebSocket() {
     (userId: string, username: string) => {
       setPendingUsers((prev) => prev.filter((u) => u.userId !== userId));
       sendMessage({
-        type: CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_USER,
+        type: ClientEvents.REJECT_USER,
         payload: { userId, username },
       });
     },
@@ -327,11 +327,11 @@ export function useWebSocket() {
   );
 
   const broadcastNowPlaying = useCallback(() => {
-    sendMessage({ type: CLIENT_TO_SERVER_MESSAGE_TYPES.BROADCAST_NOW_PLAYING });
+    sendMessage({ type: ClientEvents.SYNC_NOW_PLAYING });
   }, [sendMessage]);
 
   const requestNextSong = useCallback(() => {
-    sendMessage({ type: CLIENT_TO_SERVER_MESSAGE_TYPES.NEXT_SONG });
+    sendMessage({ type: ClientEvents.SKIP_TO_NEXT });
   }, [sendMessage]);
 
   useEffect(() => {
diff --git a/apps/web/lib/constants.ts b/apps/web/lib/constants.ts
index 82f61a8..db17ce5 100644
--- a/apps/web/lib/constants.ts
+++ b/apps/web/lib/constants.ts
@@ -2,41 +2,37 @@ export const SPOTIFY_BASE_URL = "https://accounts.spotify.com/";
 export const SPOTIFY_AUTHORIZE_PATH = "authorize";
 export const SPOTIFY_TOKEN_PATH = "api/token";
 
-export const CLIENT_TO_SERVER_MESSAGE_TYPES = {
-  JOIN_ROOM: "join_room",
-  REQUEST_SONG: "request_song",
-  UPVOTE_SONG: "upvote_song",
-  APPROVE_SONG: "approve_song",
-  REJECT_SONG: "reject_song",
-  APPROVE_USER: "approve_user",
-  REJECT_USER: "reject_user",
-  BROADCAST_NOW_PLAYING: "broadcast_now_playing",
-  NEXT_SONG: "next_song",
+export const ClientEvents = {
+  JOIN_ROOM: "room.join",
+  REQUEST_SONG: "song.request",
+  UPVOTE_SONG: "song.upvote",
+  APPROVE_SONG: "song.approve",
+  REJECT_SONG: "song.reject",
+  APPROVE_USER: "user.approve",
+  REJECT_USER: "user.reject",
+  SYNC_NOW_PLAYING: "now_playing.sync",
+  SKIP_TO_NEXT: "queue.next",
 } as const;
 
-export const SERVER_TO_CLIENT_MESSAGE_TYPES = {
-  QUEUE_UPDATE: "queue_update",
-  SONG_REQUESTED: "song_requested",
-  SONG_APPROVED: "song_approved",
-  SONG_REJECTED: "song_rejected",
+export const ServerEvents = {
+  QUEUE_UPDATED: "queue.updated",
+  SONG_REQUESTED: "song.requested",
+  SONG_APPROVED: "song.approved",
+  SONG_REJECTED: "song.rejected",
   ERROR: "error",
-  ADMIN_NOT_JOINED: "admin_not_joined",
-  ADMIN_LEFT: "admin_left",
-  ADMIN_JOINED: "admin_joined",
-  JOINED_ROOM: "joined_room",
-  LIST_USERS: "list_users",
-  JOIN_REQUESTED: "join_requested",
-  REQUEST_ALREADY_SENT: "request_already_sent",
-  USER_APPROVED: "user_approved",
-  USER_REJECTED: "user_rejected",
-  USERS_REQUESTED_LIST: "users_requested_list",
-  NOW_PLAYING_UPDATE: "now_playing_update",
+  WAITING_FOR_ADMIN: "room.waiting_for_admin",
+  ADMIN_LEFT: "room.admin_left",
+  ADMIN_JOINED: "room.admin_joined",
+  ROOM_JOINED: "room.joined",
+  MEMBERS_UPDATED: "room.members_updated",
+  USER_JOIN_REQUESTED: "user.join_requested",
+  JOIN_ALREADY_PENDING: "user.join_already_pending",
+  USER_APPROVED: "user.approved",
+  USER_REJECTED: "user.rejected",
+  PENDING_JOIN_REQUESTS: "room.pending_join_requests",
+  NOW_PLAYING_UPDATED: "now_playing.updated",
 } as const;
 
-export const ALL_CLIENT_TO_SERVER_MESSAGE_TYPES = Object.values(
-  CLIENT_TO_SERVER_MESSAGE_TYPES,
-);
+export const ALL_CLIENT_EVENTS = Object.values(ClientEvents);
 
-export const ALL_SERVER_TO_CLIENT_MESSAGE_TYPES = Object.values(
-  SERVER_TO_CLIENT_MESSAGE_TYPES,
-);
+export const ALL_SERVER_EVENTS = Object.values(ServerEvents);
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index 73bc6b8..0dae951 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -2,8 +2,8 @@ import type { SongStatus } from "@repo/db";
 
 import { z } from "zod";
 import {
-  CLIENT_TO_SERVER_MESSAGE_TYPES,
-  SERVER_TO_CLIENT_MESSAGE_TYPES,
+  ClientEvents,
+  ServerEvents,
 } from "@/lib/constants";
 
 export const SongStatusSchema = z.enum([
@@ -68,7 +68,7 @@ export type RoomConfig = z.infer<typeof RoomConfigSchema>;
 // --- Client -> Server Messages (Outgoing from client) ---
 
 export const JoinRoomMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.JOIN_ROOM),
+  type: z.literal(ClientEvents.JOIN_ROOM),
   payload: z.object({
     roomId: z.string().min(1),
     user: UserPayloadSchema,
@@ -78,7 +78,7 @@ export const JoinRoomMessageSchema = z.object({
 export type JoinRoomMessage = z.infer<typeof JoinRoomMessageSchema>;
 
 export const RequestSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.REQUEST_SONG),
+  type: z.literal(ClientEvents.REQUEST_SONG),
   payload: z.object({
     song: SongPayloadSchema,
   }),
@@ -87,7 +87,7 @@ export const RequestSongMessageSchema = z.object({
 export type RequestSongMessage = z.infer<typeof RequestSongMessageSchema>;
 
 export const UpvoteSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.UPVOTE_SONG),
+  type: z.literal(ClientEvents.UPVOTE_SONG),
   payload: z.object({
     songId: z.string().min(1),
     userId: z.string().min(1),
@@ -97,7 +97,7 @@ export const UpvoteSongMessageSchema = z.object({
 export type UpvoteSongMessage = z.infer<typeof UpvoteSongMessageSchema>;
 
 export const ApproveSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_SONG),
+  type: z.literal(ClientEvents.APPROVE_SONG),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -106,7 +106,7 @@ export const ApproveSongMessageSchema = z.object({
 export type ApproveSongMessage = z.infer<typeof ApproveSongMessageSchema>;
 
 export const RejectSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_SONG),
+  type: z.literal(ClientEvents.REJECT_SONG),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -115,7 +115,7 @@ export const RejectSongMessageSchema = z.object({
 export type RejectSongMessage = z.infer<typeof RejectSongMessageSchema>;
 
 export const BroadcastNowPlayingMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.BROADCAST_NOW_PLAYING),
+  type: z.literal(ClientEvents.SYNC_NOW_PLAYING),
 });
 
 export type BroadcastNowPlayingMessage = z.infer<
@@ -123,20 +123,20 @@ export type BroadcastNowPlayingMessage = z.infer<
 >;
 
 export const NextSongMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.NEXT_SONG),
+  type: z.literal(ClientEvents.SKIP_TO_NEXT),
 });
 
 export type NextSongMessage = z.infer<typeof NextSongMessageSchema>;
 
 export const ApproveUserMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.APPROVE_USER),
+  type: z.literal(ClientEvents.APPROVE_USER),
   payload: UserShortPayloadSchema,
 });
 
 export type ApproveUserMessage = z.infer<typeof ApproveUserMessageSchema>;
 
 export const RejectUserMessageSchema = z.object({
-  type: z.literal(CLIENT_TO_SERVER_MESSAGE_TYPES.REJECT_USER),
+  type: z.literal(ClientEvents.REJECT_USER),
   payload: UserShortPayloadSchema,
 });
 
@@ -159,7 +159,7 @@ export type ClientMessage = z.infer<typeof ClientMessageSchema>;
 // --- Server -> Client Messages (Incoming to client) ---
 
 export const QueueUpdateMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.QUEUE_UPDATE),
+  type: z.literal(ServerEvents.QUEUE_UPDATED),
   payload: z.object({
     queue: z.array(SongDataSchema),
   }),
@@ -168,7 +168,7 @@ export const QueueUpdateMessageSchema = z.object({
 export type QueueUpdateMessage = z.infer<typeof QueueUpdateMessageSchema>;
 
 export const SongRequestedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REQUESTED),
+  type: z.literal(ServerEvents.SONG_REQUESTED),
   payload: z.object({
     song: SongDataSchema,
   }),
@@ -177,7 +177,7 @@ export const SongRequestedMessageSchema = z.object({
 export type SongRequestedMessage = z.infer<typeof SongRequestedMessageSchema>;
 
 export const SongApprovedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_APPROVED),
+  type: z.literal(ServerEvents.SONG_APPROVED),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -186,7 +186,7 @@ export const SongApprovedMessageSchema = z.object({
 export type SongApprovedMessage = z.infer<typeof SongApprovedMessageSchema>;
 
 export const SongRejectedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.SONG_REJECTED),
+  type: z.literal(ServerEvents.SONG_REJECTED),
   payload: z.object({
     songId: z.string().min(1),
   }),
@@ -195,7 +195,7 @@ export const SongRejectedMessageSchema = z.object({
 export type SongRejectedMessage = z.infer<typeof SongRejectedMessageSchema>;
 
 export const ErrorMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ERROR),
+  type: z.literal(ServerEvents.ERROR),
   payload: z.object({
     message: z.string().min(1),
   }),
@@ -204,28 +204,28 @@ export const ErrorMessageSchema = z.object({
 export type ErrorMessage = z.infer<typeof ErrorMessageSchema>;
 
 export const AdminNotJoinedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_NOT_JOINED),
+  type: z.literal(ServerEvents.WAITING_FOR_ADMIN),
   payload: z.object({}),
 });
 
 export type AdminNotJoinedMessage = z.infer<typeof AdminNotJoinedMessageSchema>;
 
 export const AdminLeftMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_LEFT),
+  type: z.literal(ServerEvents.ADMIN_LEFT),
   payload: z.object({}),
 });
 
 export type AdminLeftMessage = z.infer<typeof AdminLeftMessageSchema>;
 
 export const AdminJoinedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.ADMIN_JOINED),
+  type: z.literal(ServerEvents.ADMIN_JOINED),
   payload: z.object({}),
 });
 
 export type AdminJoinedMessage = z.infer<typeof AdminJoinedMessageSchema>;
 
 export const JoinedRoomMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.JOINED_ROOM),
+  type: z.literal(ServerEvents.ROOM_JOINED),
   payload: z.object({
     roomId: z.string().min(1),
     config: RoomConfigSchema,
@@ -236,7 +236,7 @@ export const JoinedRoomMessageSchema = z.object({
 export type JoinedRoomMessage = z.infer<typeof JoinedRoomMessageSchema>;
 
 export const ListUsersMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.LIST_USERS),
+  type: z.literal(ServerEvents.MEMBERS_UPDATED),
   payload: z.object({
     users: z.array(UserPayloadSchema),
   }),
@@ -245,14 +245,14 @@ export const ListUsersMessageSchema = z.object({
 export type ListUsersMessage = z.infer<typeof ListUsersMessageSchema>;
 
 export const JoinRequestedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.JOIN_REQUESTED),
+  type: z.literal(ServerEvents.USER_JOIN_REQUESTED),
   payload: UserShortPayloadSchema,
 });
 
 export type JoinRequestedMessage = z.infer<typeof JoinRequestedMessageSchema>;
 
 export const RequestAlreadySentMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.REQUEST_ALREADY_SENT),
+  type: z.literal(ServerEvents.JOIN_ALREADY_PENDING),
   payload: z.object({}),
 });
 
@@ -261,20 +261,20 @@ export type RequestAlreadySentMessage = z.infer<
 >;
 
 export const UserApprovedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.USER_APPROVED),
+  type: z.literal(ServerEvents.USER_APPROVED),
   payload: UserShortPayloadSchema,
 });
 
 export type UserApprovedMessage = z.infer<typeof UserApprovedMessageSchema>;
 
 export const UserRejectedMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.USER_REJECTED),
+  type: z.literal(ServerEvents.USER_REJECTED),
 });
 
 export type UserRejectedMessage = z.infer<typeof UserRejectedMessageSchema>;
 
 export const UsersRequestedListMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.USERS_REQUESTED_LIST),
+  type: z.literal(ServerEvents.PENDING_JOIN_REQUESTS),
   payload: z.object({
     users: z.array(UserShortPayloadSchema),
   }),
@@ -285,7 +285,7 @@ export type UsersRequestedListMessage = z.infer<
 >;
 
 export const NowPlayingUpdateMessageSchema = z.object({
-  type: z.literal(SERVER_TO_CLIENT_MESSAGE_TYPES.NOW_PLAYING_UPDATE),
+  type: z.literal(ServerEvents.NOW_PLAYING_UPDATED),
   payload: z.object({
     song: SongDataSchema.nullable(),
   }),

From cdf74a05598113d75cb112218e95e1f5cbaba991 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 31 May 2026 21:50:05 +0530
Subject: [PATCH 04/20] Implement user admission and notification enhancements
 in room-server

- Introduced `admitUserToRoom` function to streamline user admission process, including sending relevant updates to the user and broadcasting room status.
- Added `notifyPendingUsersOnAdminJoin` function to automatically admit users if auto-approval is enabled, or notify them when the admin joins.
- Updated `Room` class to include a method for retrieving pending user requests.
- Enhanced join status messages in the web component to provide clearer feedback to users regarding their entry status.
- Adjusted WebSocket handling to update join states based on admin presence.
---
 apps/room-server/src/handerFunctions.ts       | 171 ++++++++++--------
 apps/room-server/src/room.ts                  |  12 +-
 .../[code]/_components/join-status-screen.tsx |  20 +-
 apps/web/hooks/useWebSocket.ts                |   2 +
 4 files changed, 124 insertions(+), 81 deletions(-)

diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index e853180..51c2dce 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -1,8 +1,5 @@
 import type { WebSocket } from "ws";
-import {
-  ClientEvents,
-  ServerEvents,
-} from "./constants";
+import { ClientEvents, ServerEvents } from "./constants";
 import { Room } from "./room";
 import {
   IncomingMessageSchema,
@@ -16,6 +13,7 @@ import {
   type RejectSongMessage,
   type RequestSongMessage,
   type UpvoteSongMessage,
+  type UserPayload,
 } from "./types";
 
 const roomCache = new Map<string, Room>();
@@ -54,6 +52,83 @@ function sendToUser(userId: string, message: OutgoingMessage) {
   }
 }
 
+type UserPayloadWithWs = UserPayload & { ws: WebSocket };
+
+async function admitUserToRoom(
+  roomId: string,
+  room: Room,
+  user: UserPayloadWithWs,
+) {
+  connections.set(user.ws, {
+    ws: user.ws,
+    user: {
+      userId: user.userId,
+      username: user.username,
+      email: user.email,
+      isAdmin: user.isAdmin,
+    },
+    roomId,
+    status: "joined",
+  });
+  room.addUser({
+    userId: user.userId,
+    email: user.email,
+    username: user.username,
+    isAdmin: user.isAdmin,
+  });
+  room.removeUserRequest(user.userId);
+
+  const queue = await room.loadSongs();
+
+  send(user.ws, {
+    type: ServerEvents.ROOM_JOINED,
+    payload: {
+      roomId,
+      config: room.getConfig(),
+      queue,
+    },
+  });
+
+  broadcastToRoom(roomId, {
+    type: ServerEvents.MEMBERS_UPDATED,
+    payload: { users: room.getUsers() },
+  });
+
+  const currentSong = await room.playCurrentSong();
+  send(user.ws, {
+    type: ServerEvents.NOW_PLAYING_UPDATED,
+    payload: { song: currentSong ?? null },
+  });
+
+  send(user.ws, {
+    type: ServerEvents.QUEUE_UPDATED,
+    payload: { queue },
+  });
+
+  send(user.ws, {
+    type: ServerEvents.USER_APPROVED,
+    payload: {
+      userId: user.userId,
+      username: user.username,
+    },
+  });
+}
+
+async function notifyPendingUsersOnAdminJoin(roomId: string, room: Room) {
+  const pendingUsers = room.getPendingUserRequests();
+
+  for (const pendingUser of pendingUsers) {
+    if (room.isAutoApproveUsers()) {
+      await admitUserToRoom(roomId, room, pendingUser);
+    } else {
+      send(pendingUser.ws, {
+        type: ServerEvents.ADMIN_JOINED,
+        payload: {},
+      });
+    }
+  }
+}
+
 async function sendQueueUpdate(roomId: string, room: Room) {
   const queue = await room.loadSongs();
   broadcastToRoom(roomId, {
@@ -84,6 +159,8 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
       payload: {},
     });
 
+    await notifyPendingUsersOnAdminJoin(roomId, room);
+
     // send list of users requested to join
     const userRequests = room.getUsersRequestedList();
     if (userRequests.length > 0) {
@@ -231,67 +308,7 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
     });
   }
 
-  // add to connection and user list
-  connections.set(user.ws, {
-    ws: user.ws,
-    user: {
-      userId: user.userId,
-      username: user.username,
-      email: user.email,
-      isAdmin: user.isAdmin,
-    },
-    roomId: conn.roomId,
-    status: "joined",
-  });
-  room.addUser({
-    userId: user.userId,
-    email: user.email,
-    username: user.username,
-    isAdmin: user.isAdmin,
-  });
-
-  // remove the user from requested list
-  room.removeUserRequest(msg.payload.userId);
-
-  const queue = await room.loadSongs();
-
-  // send joined message to user
-  sendToUser(msg.payload.userId, {
-    type: ServerEvents.ROOM_JOINED,
-    payload: {
-      roomId: conn.roomId,
-      config: room.getConfig(),
-      queue,
-    },
-  });
-
-  // send list users message to all users in room
-  broadcastToRoom(conn.roomId, {
-    type: ServerEvents.MEMBERS_UPDATED,
-    payload: { users: room.getUsers() },
-  });
-
-  // send current song to this user
-  const currentSong = await room.playCurrentSong();
-  sendToUser(msg.payload.userId, {
-    type: ServerEvents.NOW_PLAYING_UPDATED,
-    payload: { song: currentSong ?? null },
-  });
-
-  // send queue update to this user
-  sendToUser(msg.payload.userId, {
-    type: ServerEvents.QUEUE_UPDATED,
-    payload: { queue },
-  });
-
-  // send to user that request is approved
-  sendToUser(msg.payload.userId, {
-    type: ServerEvents.USER_APPROVED,
-    payload: {
-      userId: msg.payload.userId,
-      username: msg.payload.username,
-    },
-  });
+  await admitUserToRoom(conn.roomId, room, user);
 }
 
 async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
@@ -392,18 +409,28 @@ async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
   }
 
   const success = await room.approveSong(msg.payload.songId);
-  if (success) {
-    broadcastToRoom(conn.roomId, {
-      type: ServerEvents.SONG_APPROVED,
-      payload: { songId: msg.payload.songId },
-    });
-    await sendQueueUpdate(conn.roomId, room);
-  } else {
+  if (!success) {
     send(ws, {
       type: ServerEvents.ERROR,
       payload: { message: "Song not found in requests" },
     });
+    return;
   }
+
+  broadcastToRoom(conn.roomId, {
+    type: ServerEvents.SONG_APPROVED,
+    payload: { songId: msg.payload.songId },
+  });
+
+  // if there is no current song, play the next song
+  const currentSong = await room.playCurrentSong();
+
+  broadcastToRoom(conn.roomId, {
+    type: ServerEvents.NOW_PLAYING_UPDATED,
+    payload: { song: currentSong ?? null },
+  });
+
+  await sendQueueUpdate(conn.roomId, room);
 }
 
 async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
diff --git a/apps/room-server/src/room.ts b/apps/room-server/src/room.ts
index 86a6baf..0c2c666 100644
--- a/apps/room-server/src/room.ts
+++ b/apps/room-server/src/room.ts
@@ -90,6 +90,10 @@ export class Room {
     return this.usersRequested.get(userId);
   }
 
+  getPendingUserRequests(): UserPayloadWithWs[] {
+    return Array.from(this.usersRequested.values());
+  }
+
   clearUsersRequested(): void {
     this.usersRequested.clear();
   }
@@ -209,8 +213,14 @@ export class Room {
       //   clearTimeout(timeout);
       //   songRequestTimeouts.delete(songId);
       // }
+      // if no current song, play the new song
+      const currentSong = await this.playCurrentSong();
+      if (!currentSong) {
+        await this.playNextSong();
+      }
       return true;
-    } catch {
+    } catch (error) {
+      console.error("Error approving song:", error);
       return false;
     }
   }
diff --git a/apps/web/app/room/[code]/_components/join-status-screen.tsx b/apps/web/app/room/[code]/_components/join-status-screen.tsx
index 9ca5029..3c78e89 100644
--- a/apps/web/app/room/[code]/_components/join-status-screen.tsx
+++ b/apps/web/app/room/[code]/_components/join-status-screen.tsx
@@ -16,22 +16,26 @@ export default function JoinStatusScreen({
   joinState,
   joinError,
 }: JoinStatusScreenProps) {
-  const isWaitingForAdminApproval =
-    joinState === "blocked" || joinState === "joining";
+  const isWaitingForAdmin = joinState === "blocked";
+  const isWaitingForAdminApproval = joinState === "joining";
   const isRejected = joinState === "rejected";
 
   const joinStatusTitle = isRejected
     ? "Entry rejected by admin"
-    : isWaitingForAdminApproval
-      ? "Waiting for your entry approval by admin"
-      : "Joining room";
+    : isWaitingForAdmin
+      ? "Waiting for the room admin"
+      : isWaitingForAdminApproval
+        ? "Waiting for your entry approval"
+        : "Joining room";
 
   const joinStatusDescription = isRejected
     ? (joinError ??
       "Your entry request was rejected by the admin. Please go back and try again later.")
-    : isWaitingForAdminApproval
-      ? "Please wait while the admin approves your entry into the room."
-      : connectionState === "error"
+    : isWaitingForAdmin
+      ? "The admin has not joined this room yet. You will be notified once they arrive."
+      : isWaitingForAdminApproval
+        ? "The admin is online. Please wait while they approve your entry into the room."
+        : connectionState === "error"
         ? "There was a problem connecting to the room server."
         : connectionState === "disconnected"
           ? "Connecting you back to the room server."
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 365a87c..c071af5 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -85,11 +85,13 @@ export function useWebSocket() {
 
         case ServerEvents.ADMIN_JOINED: {
           setIsAdminJoined(true);
+          setJoinState((prev) => (prev === "blocked" ? "joining" : prev));
           break;
         }
 
         case ServerEvents.ADMIN_LEFT: {
           setIsAdminJoined(false);
+          setJoinState((prev) => (prev === "joining" ? "blocked" : prev));
           break;
         }
 

From 299e5a1b6e516304a55aa021bb800821c4e80a4d Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 31 May 2026 23:59:16 +0530
Subject: [PATCH 05/20] Enhance song request handling and add songId to Song
 model

- Updated `requestSong` method in the Room class to check for duplicate song requests and return an appropriate error message.
- Modified the Song model to include a new `songId` field for better identification of songs.
- Adjusted the request song section in the web component to accommodate the new `songId` field.
- Added a new WebSocket event documentation to clarify the flow of song requests and responses.
- Implemented database migration to backfill existing songs with their corresponding Spotify track IDs.
---
 apps/room-server/src/handerFunctions.ts       |  13 +-
 apps/room-server/src/room.ts                  |  22 +-
 apps/room-server/src/types.ts                 |   1 +
 .../_components/request-song-section.tsx      |   2 +
 apps/web/types/websocket.ts                   |   1 +
 docs/websocket-events.md                      | 193 ++++++++++++++++++
 .../migration.sql                             |  17 ++
 packages/db/prisma/schema.prisma              |   2 +
 8 files changed, 248 insertions(+), 3 deletions(-)
 create mode 100644 docs/websocket-events.md
 create mode 100644 packages/db/prisma/migrations/20260531120000_add_song_spotify_id/migration.sql

diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index 51c2dce..0a6dea4 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -328,9 +328,18 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
     });
   }
 
-  // Need to add a check if same song requested by someone already
+  const result = await room.requestSong(msg.payload.song);
 
-  const songData = await room.requestSong(msg.payload.song);
+  if (result === "duplicate") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: {
+        message: "This song is already in the queue or pending approval",
+      },
+    });
+  }
+
+  const songData = result;
 
   if (room.isAutoApproveSongs()) {
     await sendQueueUpdate(conn.roomId, room);
diff --git a/apps/room-server/src/room.ts b/apps/room-server/src/room.ts
index 0c2c666..4ea4bba 100644
--- a/apps/room-server/src/room.ts
+++ b/apps/room-server/src/room.ts
@@ -11,6 +11,8 @@ import type { WebSocket } from "ws";
 
 type UpvoteResult = "success" | "already_upvoted" | "song_not_found";
 
+export type RequestSongResult = SongData | "duplicate";
+
 type UserPayloadWithWs = UserPayload & {
   ws: WebSocket;
 };
@@ -134,9 +136,22 @@ export class Room {
     });
   }
 
-  async requestSong(songPayload: SongPayload): Promise<SongData> {
+  async requestSong(songPayload: SongPayload): Promise<RequestSongResult> {
+    const existing = await prisma.song.findFirst({
+      where: {
+        roomId: this.config.id,
+        songId: songPayload.songId,
+        status: { in: ["REQUESTED", "QUEUED", "PLAYING"] },
+      },
+    });
+
+    if (existing) {
+      return "duplicate";
+    }
+
     const song = await prisma.song.create({
       data: {
+        songId: songPayload.songId,
         name: songPayload.name,
         artist: songPayload.artist,
         url: songPayload.url,
@@ -161,6 +176,7 @@ export class Room {
 
     return {
       id: song.id,
+      songId: song.songId,
       name: song.name,
       artist: song.artist,
       url: song.url,
@@ -249,6 +265,7 @@ export class Room {
     });
     return songs.map((s) => ({
       id: s.id,
+      songId: s.songId,
       name: s.name,
       artist: s.artist,
       url: s.url,
@@ -265,6 +282,7 @@ export class Room {
     });
     return songs.map((s) => ({
       id: s.id,
+      songId: s.songId,
       name: s.name,
       artist: s.artist,
       url: s.url,
@@ -281,6 +299,7 @@ export class Room {
     if (song) {
       return {
         id: song.id,
+        songId: song.songId,
         name: song.name,
         artist: song.artist,
         url: song.url,
@@ -315,6 +334,7 @@ export class Room {
 
     return {
       id: updated.id,
+      songId: updated.songId,
       name: updated.name,
       artist: updated.artist,
       url: updated.url,
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index cecd3ba..d713d9e 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -32,6 +32,7 @@ export type UserShortPayload = z.infer<typeof UserShortPayloadSchema>;
 
 export const SongSchema = z.object({
   id: z.string().min(1),
+  songId: z.string().min(1),
   name: z.string().min(1),
   artist: z.string().min(1),
   url: z.url(),
diff --git a/apps/web/app/room/[code]/_components/request-song-section.tsx b/apps/web/app/room/[code]/_components/request-song-section.tsx
index a20399e..e78803a 100644
--- a/apps/web/app/room/[code]/_components/request-song-section.tsx
+++ b/apps/web/app/room/[code]/_components/request-song-section.tsx
@@ -30,6 +30,7 @@ type RequestSongSectionProps = {
   isConnected: boolean;
   autoApproveSongs: boolean;
   requestSong: (song: {
+    songId: string;
     name: string;
     artist: string;
     url: string;
@@ -92,6 +93,7 @@ export default function RequestSongSection({
   const handleRequestSong = () => {
     if (!selectedSong) return;
     requestSong({
+      songId: selectedSong.id,
       name: selectedSong.name,
       artist: selectedSong.artist,
       url: selectedSong.url,
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index 0dae951..1d24f43 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -31,6 +31,7 @@ export type UserShortPayload = z.infer<typeof UserShortPayloadSchema>;
 
 export const SongSchema = z.object({
   id: z.string().min(1),
+  songId: z.string().min(1),
   name: z.string().min(1),
   artist: z.string().min(1),
   url: z.url(),
diff --git a/docs/websocket-events.md b/docs/websocket-events.md
new file mode 100644
index 0000000..9e944ae
--- /dev/null
+++ b/docs/websocket-events.md
@@ -0,0 +1,193 @@
+# WebSocket Event Flow
+
+Spotofy uses a single persistent WebSocket (`NEXT_PUBLIC_WS_URL` → room-server). Messages are JSON with a `type` field (see `ClientEvents` / `ServerEvents` in `apps/*/src/constants.ts` or `apps/web/lib/constants.ts`).
+
+**Client state** lives in `useWebSocket` (`apps/web/hooks/useWebSocket.ts`). **Server state** is in-memory per room (`Room` class + `connections` map in `handerFunctions.ts`), with songs/users persisted via Prisma.
+
+---
+
+## Client → Server (`ClientEvents`)
+
+| Event | Who | Server handler | DB / room ops | Server replies |
+|-------|-----|----------------|---------------|----------------|
+| `room.join` | Anyone | `handleJoinRoom` | Load/create room; track connection as `pending` then maybe `joined` | See [Join flow](#join-flow) |
+| `song.request` | Joined user* | `handleRequestSong` | Create song (`REQUESTED` or `QUEUED`) | `queue.updated` (auto-approve) **or** `song.requested` → admin |
+| `song.upvote` | Joined user* | `handleUpvote` | Insert upvote history; increment count | `queue.updated` or `error` |
+| `song.approve` | Admin* | `handleApproveSong` | `REQUESTED` → `QUEUED` | `song.approved` + `queue.updated` |
+| `song.reject` | Admin* | `handleRejectSong` | `REQUESTED` → `REJECTED` | `song.rejected` |
+| `user.approve` | Admin* | `handleApproveUser` | Move user from pending → joined | `room.joined`, `room.members_updated`, `now_playing.updated`, `queue.updated`, `user.approved` |
+| `user.reject` | Admin* | `handleRejectUser` | Remove from pending list | `user.rejected` → target user |
+| `now_playing.sync` | Any connected* | `handlePlayCurrentSong` | Read `PLAYING` or advance queue | `now_playing.updated` + `queue.updated` (broadcast) |
+| `queue.next` | Admin* | `handleNextSong` | Delete current `PLAYING`; promote top `QUEUED` | `now_playing.updated` + `queue.updated` (broadcast) |
+
+\*Handlers check room exists and admin where needed, but **do not verify `conn.status === "joined"`** (see gaps).
+
+### Client-side after send
+
+| Action | Hook / UI effect |
+|--------|------------------|
+| `joinRoom()` | Sets `joinState: "joining"`; waits for server events |
+| `requestSong()` | No local state until server pushes queue or admin sees pending |
+| `upvoteSong()` | Queue refreshed via `queue.updated` |
+| `approveSong` / `rejectSong` | Admin optimistically removes from `pendingRequests` only after server events |
+| `approveUser` / `rejectUser` | **Optimistically** removes from `pendingUsers` before server ack |
+| `broadcastNowPlaying()` | **Exported but unused** in room UI |
+| `requestNextSong()` | Called from admin Spotify player on track end / skip button → `queue.next` |
+
+---
+
+## Server → Client (`ServerEvents`)
+
+| Event | Trigger | Client handler (`useWebSocket`) | UI effect |
+|-------|---------|----------------------------------|-----------|
+| `room.joined` | User fully joined | `joinState → joined`, set `roomConfig`, `queue` | Room layout shown (guest/admin) |
+| `room.waiting_for_admin` | Guest joined before admin | `joinState → blocked`, clear room state | Join status screen |
+| `user.join_already_pending` | Duplicate join request | **Not handled** (falls through to `console.warn`) | No UI change |
+| `user.join_requested` | Guest needs approval | Append to `pendingUsers` | Admin: pending users panel |
+| `room.pending_join_requests` | Admin joined with backlog | Set `pendingUsers` | Admin: pending users panel |
+| `user.approved` | Admin approved guest | **Not handled** | Redundant if `room.joined` already received |
+| `user.rejected` | Admin rejected guest | `joinState → rejected`, clear state | Join status screen |
+| `room.admin_joined` | Admin connected | `isAdminJoined → true` | **Not consumed by room UI** |
+| `room.admin_left` | Admin disconnected | `isAdminJoined → false` | **Not consumed by room UI** |
+| `room.members_updated` | Join / leave / approve | Set `users` | Users sidebar |
+| `queue.updated` | Queue changed | Set `queue` | Queue sidebar |
+| `song.requested` | Manual song approval | Append to `pendingRequests` | Admin: pending songs panel |
+| `song.approved` / `song.rejected` | Admin action | Remove from `pendingRequests` | Admin panel |
+| `now_playing.updated` | Join / skip / sync / next | Set `nowPlaying` | Now playing section; admin Spotify player uses `nowPlaying.url` |
+| `error` | Validation / auth failure | Toast via `reportError` | Sonner toast |
+
+---
+
+## Key end-to-end flows
+
+### Join flow
+
+```mermaid
+sequenceDiagram
+  participant C as Web client
+  participant S as Room server
+  participant DB as PostgreSQL
+
+  C->>S: room.join
+  S->>DB: findOrCreate room
+  alt Admin
+    S->>S: setAdminStatus(true)
+    S-->>C: room.admin_joined (broadcast to joined*)
+    S-->>C: room.pending_join_requests (if backlog)
+    S->>S: status = joined, addUser
+    S-->>C: room.joined + room.members_updated + now_playing.updated + queue.updated
+  else Guest, admin offline
+    S-->>C: room.waiting_for_admin
+    S->>S: addUserRequest (pending)
+  else Guest, manual user approval
+    S-->>C: user.join_requested → admin OR join_already_pending
+    S->>S: addUserRequest (pending)
+  else Guest, auto-approve users
+    S->>S: status = joined, addUser
+    S-->>C: room.joined + ...
+  end
+```
+
+\* `broadcastToRoom` only reaches connections with `status === "joined"`.
+
+**After join (admin):** `playCurrentSong()` runs on join — if nothing is `PLAYING`, it **calls `playNextSong()`** and may start playback immediately.
+
+**After join (guest):** Sees queue/users/now playing; playback is display-only from `nowPlaying`.
+
+### Song request flow
+
+```
+Guest/Admin → song.request → DB create
+  ├─ autoApproveSongs: queue.updated (all joined)
+  └─ manual: song.requested → admin only
+Admin → song.approve → song.approved + queue.updated
+Admin → song.reject → song.rejected (no queue.updated; song leaves pending UI only)
+```
+
+### Playback flow
+
+```
+Admin Spotify SDK track ends / skip
+  → requestNextSong() → queue.next
+  → server playNextSong() (delete PLAYING, promote top QUEUED)
+  → now_playing.updated + queue.updated → all joined clients
+
+Admin player loads new nowPlaying.url → plays via Spotify Web API
+Guests see now_playing.updated → static album art + metadata
+```
+
+`now_playing.sync` exists to re-broadcast current track but **nothing in the UI calls it**.
+
+### Disconnect flow
+
+```
+WebSocket close/error → handleDisconnect
+  ├─ Admin: setAdminStatus(false), room.admin_left (broadcast)
+  ├─ Joined: removeUser
+  └─ Pending: removeUserRequest
+  → room.members_updated (broadcast)
+```
+
+No client rejoin logic; commented-out rejoin stub in `useWebSocket`.
+
+---
+
+## Gaps & edge cases
+
+### Critical
+
+1. **Guests stuck when joining before admin** — They receive `room.waiting_for_admin` and sit in `usersRequested`. When admin later joins, they are **not** notified (`room.admin_joined` is not broadcast to pending connections). With `autoApproveUsers: true`, they are still never auto-admitted; admin must manually approve users who were queued before admin arrived.
+
+2. **No `joined` guard on actions** — Pending/waiting users can send `song.request`, `song.upvote`, etc. if they bypass UI. Server only checks `conn.user` exists, not `conn.status === "joined"`.
+
+3. **Duplicate `room.join`** — Re-calling join (e.g. React effect re-run) resets connection to `pending` and re-processes join with no idempotency guard.
+
+4. **Unhandled server events on client** — `user.join_already_pending` and `user.approved` have schemas but no `useWebSocket` cases.
+
+5. **Admin song backlog on reconnect** — On admin join, pending **users** are sent via `room.pending_join_requests`, but pending **songs** in DB (`loadRequestedSongs`) are never loaded or sent. Admin only sees songs requested while they are online (`song.requested`).
+
+### Moderate
+
+6. **`playCurrentSong()` side effect on join** — Joining (or approving a user) can start playback by promoting the queue without admin explicitly pressing play.
+
+7. **`room.admin_joined` / `room.admin_left` unused in UI** — `isAdminJoined` is tracked but room page ignores it; guests waiting for admin see a generic “blocked” message that reads like approval wait, not “admin offline”.
+
+8. **`now_playing.sync` unused** — No path to resync guests after missed broadcasts or admin reconnect.
+
+9. **Optimistic pending-user removal** — `approveUser` / `rejectUser` remove from UI before server confirms; failed requests leave UI out of sync.
+
+10. **Duplicate song requests allowed** — Server comment acknowledges missing dedup (`handleRequestSong`).
+
+11. **`maxUsers` / `maxUpvotes` not enforced** — Room config fields exist but handlers never check them.
+
+12. **Admin multi-tab** — `sendToAdmin` delivers to first matching connection only; other admin tabs miss `song.requested` / `user.join_requested`.
+
+13. **Room cache never evicted** — `roomCache` grows; empty rooms stay in memory until process restart.
+
+14. **No WebSocket reconnect/rejoin** — Disconnect clears server-side presence; client stays on page with stale state until manual refresh.
+
+### Minor
+
+15. **Redundant payloads on join** — `room.joined` includes `queue`, then server also sends `queue.updated` with the same data.
+
+16. **`USER_REJECTED` schema** — Server sends `{ type: "user.rejected" }` with no payload; client clears state (works, but asymmetric with other events).
+
+17. **`findOrCreate` fallback** — If DB room missing, first joiner's `userId` is passed as `adminId` to `Room.findOrCreate` regardless of `user.isAdmin` flag.
+
+18. **Song reject does not broadcast queue** — Correct for queue (song was never `QUEUED`), but requester gets no feedback event.
+
+19. **Commented song-request timeout** — Auto-reject after timeout is stubbed in `room.ts`, not active.
+
+---
+
+## File map
+
+| Layer | File |
+|-------|------|
+| Event constants | `apps/room-server/src/constants.ts`, `apps/web/lib/constants.ts` |
+| Zod schemas | `apps/room-server/src/types.ts`, `apps/web/types/websocket.ts` |
+| Server routing | `apps/room-server/src/handerFunctions.ts` |
+| Room logic / DB | `apps/room-server/src/room.ts` |
+| Client hook | `apps/web/hooks/useWebSocket.ts` |
+| Room UI | `apps/web/app/room/[code]/_components/_client.tsx` |
+| Admin playback | `now-playing-section.tsx`, `spotify-player.tsx` |
diff --git a/packages/db/prisma/migrations/20260531120000_add_song_spotify_id/migration.sql b/packages/db/prisma/migrations/20260531120000_add_song_spotify_id/migration.sql
new file mode 100644
index 0000000..a01ead1
--- /dev/null
+++ b/packages/db/prisma/migrations/20260531120000_add_song_spotify_id/migration.sql
@@ -0,0 +1,17 @@
+-- AlterTable
+ALTER TABLE "song" ADD COLUMN "songId" TEXT;
+
+-- Backfill Spotify track IDs from existing URLs where possible
+UPDATE "song"
+SET "songId" = (regexp_match("url", 'track/([^/?]+)'))[1]
+WHERE "songId" IS NULL;
+
+-- Fall back to internal id for legacy rows without a parseable track URL
+UPDATE "song"
+SET "songId" = "id"
+WHERE "songId" IS NULL OR "songId" = '';
+
+ALTER TABLE "song" ALTER COLUMN "songId" SET NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "song_roomId_songId_idx" ON "song"("roomId", "songId");
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 2963857..67d4db4 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -121,6 +121,7 @@ enum SongStatus {
 
 model Song {
   id        String     @id @default(cuid())
+  songId    String
   name      String
   artist    String
   url       String
@@ -132,6 +133,7 @@ model Song {
   createdAt DateTime   @default(now())
 
   @@index([roomId])
+  @@index([roomId, songId])
   @@map("song")
 }
 

From fede398b524ee407f6ea37430cf4a309d12aa989 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Wed, 3 Jun 2026 00:05:32 +0530
Subject: [PATCH 06/20] Add user and upvote limit handling in room-server

- Introduced new server events for user and upvote limits: ROOM_USER_LIMIT_REACHED, ROOM_UPVOTE_LIMIT_REACHED, and USER_UPVOTES_USAGE.
- Enhanced the Room class with methods to check user capacity and track upvote usage.
- Updated admission logic to handle cases when user or upvote limits are reached, sending appropriate messages to clients.
- Modified web components to display upvote usage and room capacity status, providing clearer feedback to users.
- Adjusted WebSocket handling to manage new event types and update state accordingly.
---
 apps/room-server/src/constants.ts             |  3 +
 apps/room-server/src/handerFunctions.ts       | 65 ++++++++++++++++++-
 apps/room-server/src/room.ts                  | 39 ++++++++++-
 apps/room-server/src/types.ts                 | 38 +++++++++++
 .../app/room/[code]/_components/_client.tsx   | 11 +++-
 .../[code]/_components/join-status-screen.tsx | 40 +++++++-----
 .../room/[code]/_components/queue-sidebar.tsx | 31 ++++++++-
 .../room/[code]/_components/users-sidebar.tsx | 22 ++++++-
 apps/web/hooks/useWebSocket.ts                | 36 ++++++++++
 apps/web/lib/constants.ts                     |  3 +
 apps/web/types/websocket.ts                   | 46 ++++++++++++-
 11 files changed, 307 insertions(+), 27 deletions(-)

diff --git a/apps/room-server/src/constants.ts b/apps/room-server/src/constants.ts
index 33e23d5..9189cf8 100644
--- a/apps/room-server/src/constants.ts
+++ b/apps/room-server/src/constants.ts
@@ -27,6 +27,9 @@ export const ServerEvents = {
   USER_REJECTED: "user.rejected",
   PENDING_JOIN_REQUESTS: "room.pending_join_requests",
   NOW_PLAYING_UPDATED: "now_playing.updated",
+  ROOM_USER_LIMIT_REACHED: "room.user_limit_reached",
+  ROOM_UPVOTE_LIMIT_REACHED: "room.upvote_limit_reached",
+  USER_UPVOTES_USAGE: "user.upvotes_usage",
 } as const;
 
 export const ALL_CLIENT_EVENTS = Object.values(ClientEvents);
diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index 0a6dea4..0489e43 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -52,6 +52,21 @@ function sendToUser(userId: string, message: OutgoingMessage) {
   }
 }
 
+function sendUserLimitReached(ws: WebSocket, maxUsers: number) {
+  send(ws, {
+    type: ServerEvents.ROOM_USER_LIMIT_REACHED,
+    payload: { maxUsers },
+  });
+}
+
+async function sendUserUpvotesUsage(ws: WebSocket, room: Room, userId: string) {
+  const used = await room.getUserUpvoteCount(userId);
+  send(ws, {
+    type: ServerEvents.USER_UPVOTES_USAGE,
+    payload: { used, maxUpvotes: room.getConfig().maxUpvotes },
+  });
+}
+
 type UserPayloadWithWs = UserPayload & { ws: WebSocket };
 
 async function admitUserToRoom(
@@ -59,6 +74,11 @@ async function admitUserToRoom(
   room: Room,
   user: UserPayloadWithWs,
 ) {
+  if (room.isAtUserCapacity(user.userId)) {
+    sendUserLimitReached(user.ws, room.getConfig().maxUsers);
+    return false;
+  }
+
   connections.set(user.ws, {
     ws: user.ws,
     user: {
@@ -79,6 +99,7 @@ async function admitUserToRoom(
   room.removeUserRequest(user.userId);
 
   const queue = await room.loadSongs();
+  const upvotesUsed = await room.getUserUpvoteCount(user.userId);
 
   send(user.ws, {
     type: ServerEvents.ROOM_JOINED,
@@ -86,6 +107,7 @@ async function admitUserToRoom(
       roomId,
       config: room.getConfig(),
       queue,
+      upvotesUsed,
     },
   });
 
@@ -112,6 +134,8 @@ async function admitUserToRoom(
       username: user.username,
     },
   });
+
+  return true;
 }
 
 async function notifyPendingUsersOnAdminJoin(roomId: string, room: Room) {
@@ -119,8 +143,11 @@ async function notifyPendingUsersOnAdminJoin(roomId: string, room: Room) {
 
   for (const pendingUser of pendingUsers) {
     if (room.isAutoApproveUsers()) {
-      await admitUserToRoom(roomId, room, pendingUser);
-    } else {
+      const admitted = await admitUserToRoom(roomId, room, pendingUser);
+      if (!admitted) {
+        room.removeUserRequest(pendingUser.userId);
+      }
+    } else if (!room.isAtUserCapacity(pendingUser.userId)) {
       send(pendingUser.ws, {
         type: ServerEvents.ADMIN_JOINED,
         payload: {},
@@ -170,6 +197,11 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
       });
     }
   } else {
+    if (room.isAtUserCapacity(user.userId)) {
+      sendUserLimitReached(ws, room.getConfig().maxUsers);
+      return;
+    }
+
     if (!room.isAdminJoined()) {
       // send message to user that admin has not joined yet
       send(ws, {
@@ -208,6 +240,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
   room.addUser(user);
 
   const queue = await room.loadSongs();
+  const upvotesUsed = await room.getUserUpvoteCount(user.userId);
 
   // send joined room message to self
   send(ws, {
@@ -216,6 +249,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
       roomId,
       config: room.getConfig(),
       queue,
+      upvotesUsed,
     },
   });
 
@@ -308,7 +342,24 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
     });
   }
 
-  await admitUserToRoom(conn.roomId, room, user);
+  if (room.isAtUserCapacity(user.userId)) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: {
+        message: `Room is full (${room.getConfig().maxUsers} users max)`,
+      },
+    });
+  }
+
+  const admitted = await admitUserToRoom(conn.roomId, room, user);
+  if (!admitted) {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: {
+        message: `Room is full (${room.getConfig().maxUsers} users max)`,
+      },
+    });
+  }
 }
 
 async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
@@ -377,9 +428,17 @@ async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
 
   const result = await room.upvote(msg.payload.songId, conn.user.userId);
   if (result === "success") {
+    await sendUserUpvotesUsage(ws, room, conn.user.userId);
     return await sendQueueUpdate(conn.roomId, room);
   }
 
+  if (result === "upvote_limit_reached") {
+    return send(ws, {
+      type: ServerEvents.ROOM_UPVOTE_LIMIT_REACHED,
+      payload: { maxUpvotes: room.getConfig().maxUpvotes },
+    });
+  }
+
   if (result === "already_upvoted") {
     return send(ws, {
       type: ServerEvents.ERROR,
diff --git a/apps/room-server/src/room.ts b/apps/room-server/src/room.ts
index 4ea4bba..47ca08a 100644
--- a/apps/room-server/src/room.ts
+++ b/apps/room-server/src/room.ts
@@ -9,7 +9,11 @@ import type {
 import { createId } from "@paralleldrive/cuid2";
 import type { WebSocket } from "ws";
 
-type UpvoteResult = "success" | "already_upvoted" | "song_not_found";
+type UpvoteResult =
+  | "success"
+  | "already_upvoted"
+  | "song_not_found"
+  | "upvote_limit_reached";
 
 export type RequestSongResult = SongData | "duplicate";
 
@@ -39,6 +43,27 @@ export class Room {
     return Array.from(this.users.values());
   }
 
+  getMemberCount(): number {
+    return this.users.size;
+  }
+
+  hasUser(userId: string): boolean {
+    return this.users.has(userId);
+  }
+
+  isAtUserCapacity(userId: string): boolean {
+    if (this.hasUser(userId) || userId === this.config.admin) {
+      return false;
+    }
+    return this.getMemberCount() >= this.config.maxUsers;
+  }
+
+  async getUserUpvoteCount(userId: string): Promise<number> {
+    return prisma.songUpvoteHistory.count({
+      where: { roomId: this.config.id, userId },
+    });
+  }
+
   getConfig(): RoomConfig {
     return this.config;
   }
@@ -187,6 +212,11 @@ export class Room {
   }
 
   async upvote(songId: string, userId: string): Promise<UpvoteResult> {
+    const upvotesUsed = await this.getUserUpvoteCount(userId);
+    if (upvotesUsed >= this.config.maxUpvotes) {
+      return "upvote_limit_reached";
+    }
+
     const result = await prisma.$transaction(async (tx) => {
       const song = await tx.song.findFirst({
         where: { id: songId, roomId: this.config.id, status: "QUEUED" },
@@ -197,6 +227,13 @@ export class Room {
         return "song_not_found" satisfies UpvoteResult;
       }
 
+      const upvotesInRoom = await tx.songUpvoteHistory.count({
+        where: { roomId: this.config.id, userId },
+      });
+      if (upvotesInRoom >= this.config.maxUpvotes) {
+        return "upvote_limit_reached" satisfies UpvoteResult;
+      }
+
       const insertedRows = await tx.$executeRaw`
         INSERT INTO "song_upvote_history" ("id", "roomId", "songId", "userId", "createdAt")
         VALUES (${createId()}, ${this.config.id}, ${songId}, ${userId}, NOW())
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index d713d9e..513781b 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -234,9 +234,44 @@ export const JoinedRoomMessageSchema = z.object({
     roomId: z.string().min(1),
     config: RoomConfigSchema,
     queue: z.array(SongDataSchema),
+    upvotesUsed: z.number().int().nonnegative(),
   }),
 });
 
+export const RoomUserLimitReachedMessageSchema = z.object({
+  type: z.literal(ServerEvents.ROOM_USER_LIMIT_REACHED),
+  payload: z.object({
+    maxUsers: z.number().int().nonnegative(),
+  }),
+});
+
+export type RoomUserLimitReachedMessage = z.infer<
+  typeof RoomUserLimitReachedMessageSchema
+>;
+
+export const RoomUpvoteLimitReachedMessageSchema = z.object({
+  type: z.literal(ServerEvents.ROOM_UPVOTE_LIMIT_REACHED),
+  payload: z.object({
+    maxUpvotes: z.number().int().nonnegative(),
+  }),
+});
+
+export type RoomUpvoteLimitReachedMessage = z.infer<
+  typeof RoomUpvoteLimitReachedMessageSchema
+>;
+
+export const UserUpvotesUsageMessageSchema = z.object({
+  type: z.literal(ServerEvents.USER_UPVOTES_USAGE),
+  payload: z.object({
+    used: z.number().int().nonnegative(),
+    maxUpvotes: z.number().int().nonnegative(),
+  }),
+});
+
+export type UserUpvotesUsageMessage = z.infer<
+  typeof UserUpvotesUsageMessageSchema
+>;
+
 export type JoinedRoomMessage = z.infer<typeof JoinedRoomMessageSchema>;
 
 export const ListUsersMessageSchema = z.object({
@@ -316,6 +351,9 @@ export const OutgoingMessageSchema = z.discriminatedUnion("type", [
   AdminJoinedMessageSchema,
   AdminLeftMessageSchema,
   JoinedRoomMessageSchema,
+  RoomUserLimitReachedMessageSchema,
+  RoomUpvoteLimitReachedMessageSchema,
+  UserUpvotesUsageMessageSchema,
   ListUsersMessageSchema,
   JoinRequestedMessageSchema,
   RequestAlreadySentMessageSchema,
diff --git a/apps/web/app/room/[code]/_components/_client.tsx b/apps/web/app/room/[code]/_components/_client.tsx
index dea8cf9..95e42c8 100644
--- a/apps/web/app/room/[code]/_components/_client.tsx
+++ b/apps/web/app/room/[code]/_components/_client.tsx
@@ -42,6 +42,8 @@ export default function ClientPage({
     requestNextSong,
     users,
     nowPlaying,
+    upvotesUsed,
+    canUpvote,
   } = useWebSocket();
 
   const [isAdmin] = useState(user.isAdmin);
@@ -107,10 +109,17 @@ export default function ClientPage({
                   queue={queue}
                   userId={user.userId}
                   isConnected={isConnected}
+                  canUpvote={canUpvote}
+                  upvotesUsed={upvotesUsed}
+                  maxUpvotes={roomConfig?.maxUpvotes ?? 0}
                   upvoteSong={upvoteSong}
                 />
 
-                <UsersSidebar users={users} currentUserId={user.userId} />
+                <UsersSidebar
+                  users={users}
+                  currentUserId={user.userId}
+                  maxUsers={roomConfig?.maxUsers}
+                />
               </div>
             </div>
           )}
diff --git a/apps/web/app/room/[code]/_components/join-status-screen.tsx b/apps/web/app/room/[code]/_components/join-status-screen.tsx
index 3c78e89..a6a91d9 100644
--- a/apps/web/app/room/[code]/_components/join-status-screen.tsx
+++ b/apps/web/app/room/[code]/_components/join-status-screen.tsx
@@ -19,27 +19,33 @@ export default function JoinStatusScreen({
   const isWaitingForAdmin = joinState === "blocked";
   const isWaitingForAdminApproval = joinState === "joining";
   const isRejected = joinState === "rejected";
+  const isRoomFull = joinState === "full";
 
   const joinStatusTitle = isRejected
     ? "Entry rejected by admin"
-    : isWaitingForAdmin
-      ? "Waiting for the room admin"
-      : isWaitingForAdminApproval
-        ? "Waiting for your entry approval"
-        : "Joining room";
+    : isRoomFull
+      ? "Room is full"
+      : isWaitingForAdmin
+        ? "Waiting for the room admin"
+        : isWaitingForAdminApproval
+          ? "Waiting for your entry approval"
+          : "Joining room";
 
   const joinStatusDescription = isRejected
     ? (joinError ??
       "Your entry request was rejected by the admin. Please go back and try again later.")
-    : isWaitingForAdmin
-      ? "The admin has not joined this room yet. You will be notified once they arrive."
-      : isWaitingForAdminApproval
-        ? "The admin is online. Please wait while they approve your entry into the room."
-        : connectionState === "error"
-        ? "There was a problem connecting to the room server."
-        : connectionState === "disconnected"
-          ? "Connecting you back to the room server."
-          : "We’re connecting you to the room. This screen will update once your join succeeds.";
+    : isRoomFull
+      ? (joinError ??
+        "This room has reached its member limit. Try again later or ask the admin to raise the limit.")
+      : isWaitingForAdmin
+        ? "The admin has not joined this room yet. You will be notified once they arrive."
+        : isWaitingForAdminApproval
+          ? "The admin is online. Please wait while they approve your entry into the room."
+          : connectionState === "error"
+            ? "There was a problem connecting to the room server."
+            : connectionState === "disconnected"
+              ? "Connecting you back to the room server."
+              : "We’re connecting you to the room. This screen will update once your join succeeds.";
 
   return (
     <motion.section
@@ -52,8 +58,10 @@ export default function JoinStatusScreen({
         <div className="absolute inset-0 bg-linear-to-b from-primary/5 via-transparent to-transparent pointer-events-none" />
         <div className="relative flex flex-col items-center text-center gap-5">
           <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-primary/20 to-accent/20">
-            {isRejected ? (
-              <AlertCircle className="w-8 h-8 text-red-500" />
+            {isRejected || isRoomFull ? (
+              <AlertCircle
+                className={`w-8 h-8 ${isRoomFull ? "text-amber-500" : "text-red-500"}`}
+              />
             ) : joinState === "blocked" ? (
               <Clock className="w-8 h-8 text-primary" />
             ) : (
diff --git a/apps/web/app/room/[code]/_components/queue-sidebar.tsx b/apps/web/app/room/[code]/_components/queue-sidebar.tsx
index b69d333..6f10604 100644
--- a/apps/web/app/room/[code]/_components/queue-sidebar.tsx
+++ b/apps/web/app/room/[code]/_components/queue-sidebar.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import { Clock, Music, ThumbsUp } from "lucide-react";
+import { Clock, Music, ThumbsUp, AlertTriangle } from "lucide-react";
 import Image from "next/image";
 
 import { Button } from "@repo/ui/components/ui/button";
@@ -9,6 +9,9 @@ type QueueSidebarProps = {
   queue: SongData[];
   userId: string;
   isConnected: boolean;
+  canUpvote: boolean;
+  upvotesUsed: number;
+  maxUpvotes: number;
   upvoteSong: (songId: string, userId: string) => void;
 };
 
@@ -16,8 +19,12 @@ export default function QueueSidebar({
   queue,
   userId,
   isConnected,
+  canUpvote,
+  upvotesUsed,
+  maxUpvotes,
   upvoteSong,
 }: QueueSidebarProps) {
+  const upvoteLimitReached = maxUpvotes > 0 && upvotesUsed >= maxUpvotes;
   return (
     <motion.aside
       initial={{ opacity: 0, y: 18 }}
@@ -33,6 +40,21 @@ export default function QueueSidebar({
         <span className="text-xs text-muted-foreground">{queue.length} songs</span>
       </div>
 
+      {upvoteLimitReached && (
+        <div className="mx-3 mt-3 flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
+          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <p>
+            You&apos;ve used all {maxUpvotes} upvotes allowed in this room.
+          </p>
+        </div>
+      )}
+
+      {!upvoteLimitReached && maxUpvotes > 0 && upvotesUsed > 0 && (
+        <p className="px-4 pt-3 text-xs text-muted-foreground">
+          {upvotesUsed} / {maxUpvotes} upvotes used
+        </p>
+      )}
+
       <div className="p-3 space-y-2 max-h-80 sm:max-h-100 overflow-y-auto">
         {queue.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground">
@@ -67,7 +89,12 @@ export default function QueueSidebar({
                   <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                     <Button
                       onClick={() => upvoteSong(song.id, userId)}
-                      disabled={!isConnected}
+                      disabled={!isConnected || !canUpvote}
+                      title={
+                        !canUpvote
+                          ? `Upvote limit reached (${maxUpvotes} per room)`
+                          : undefined
+                      }
                       variant="outline"
                       className="h-auto rounded-lg bg-primary/10 hover:bg-primary/20 px-2 py-1 text-xs font-medium text-primary"
                       type="button"
diff --git a/apps/web/app/room/[code]/_components/users-sidebar.tsx b/apps/web/app/room/[code]/_components/users-sidebar.tsx
index b455fff..74775d0 100644
--- a/apps/web/app/room/[code]/_components/users-sidebar.tsx
+++ b/apps/web/app/room/[code]/_components/users-sidebar.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import { Crown, Users } from "lucide-react";
+import { AlertTriangle, Crown, Users } from "lucide-react";
 
 import { Badge } from "@repo/ui/components/ui/badge";
 import type { UserPayload } from "@/types/websocket";
@@ -7,12 +7,16 @@ import type { UserPayload } from "@/types/websocket";
 type UsersSidebarProps = {
   users: UserPayload[];
   currentUserId: string;
+  maxUsers?: number;
 };
 
 export default function UsersSidebar({
   users,
   currentUserId,
+  maxUsers,
 }: UsersSidebarProps) {
+  const isAtCapacity =
+    maxUsers !== undefined && maxUsers > 0 && users.length >= maxUsers;
   return (
     <motion.aside
       initial={{ opacity: 0, y: 18 }}
@@ -27,12 +31,24 @@ export default function UsersSidebar({
         </div>
         <Badge
           variant="outline"
-          className="text-xs px-2 py-1 h-auto rounded-full bg-primary/10 border-primary/20 text-primary font-medium"
+          className={`text-xs px-2 py-1 h-auto rounded-full font-medium ${
+            isAtCapacity
+              ? "bg-amber-500/10 border-amber-500/30 text-amber-200"
+              : "bg-primary/10 border-primary/20 text-primary"
+          }`}
         >
-          {users.length} online
+          {users.length}
+          {maxUsers !== undefined ? ` / ${maxUsers}` : ""} online
         </Badge>
       </div>
 
+      {isAtCapacity && (
+        <div className="mb-3 flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
+          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <p>Room is at capacity. New guests cannot join until someone leaves.</p>
+        </div>
+      )}
+
       <div className="flex flex-wrap gap-2">
         {users.map((user) => {
           const isSelf = user.userId === currentUserId;
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index c071af5..3878c54 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -30,6 +30,7 @@ export function useWebSocket() {
   const [users, setUsers] = useState<UserPayload[]>([]);
   const [nowPlaying, setNowPlaying] = useState<SongData | null>(null);
   const [isAdminJoined, setIsAdminJoined] = useState(false);
+  const [upvotesUsed, setUpvotesUsed] = useState(0);
 
   const reportError = useCallback(
     (message: string, details?: unknown, toastId?: string) => {
@@ -55,6 +56,36 @@ export function useWebSocket() {
           setJoinError(null);
           setRoomConfig(message.payload.config);
           setQueue(message.payload.queue);
+          setUpvotesUsed(message.payload.upvotesUsed);
+          break;
+        }
+
+        case ServerEvents.ROOM_USER_LIMIT_REACHED: {
+          setJoinState("full");
+          setJoinError(
+            `This room is full (${message.payload.maxUsers} users max). Try again later.`,
+          );
+          setRoomConfig(null);
+          setQueue([]);
+          setPendingRequests([]);
+          setPendingUsers([]);
+          setUsers([]);
+          setNowPlaying(null);
+          setUpvotesUsed(0);
+          break;
+        }
+
+        case ServerEvents.ROOM_UPVOTE_LIMIT_REACHED: {
+          reportError(
+            `You've used all ${message.payload.maxUpvotes} upvotes for this room`,
+            undefined,
+            "websocket-upvote-limit",
+          );
+          break;
+        }
+
+        case ServerEvents.USER_UPVOTES_USAGE: {
+          setUpvotesUsed(message.payload.used);
           break;
         }
 
@@ -345,6 +376,9 @@ export function useWebSocket() {
     };
   }, [connect]);
 
+  const maxUpvotes = roomConfig?.maxUpvotes ?? 0;
+  const canUpvote = joinState === "joined" && upvotesUsed < maxUpvotes;
+
   return {
     connectionState,
     joinState,
@@ -355,6 +389,8 @@ export function useWebSocket() {
     queue,
     pendingRequests,
     pendingUsers,
+    upvotesUsed,
+    canUpvote,
     joinRoom,
     requestSong,
     upvoteSong,
diff --git a/apps/web/lib/constants.ts b/apps/web/lib/constants.ts
index db17ce5..2259403 100644
--- a/apps/web/lib/constants.ts
+++ b/apps/web/lib/constants.ts
@@ -31,6 +31,9 @@ export const ServerEvents = {
   USER_REJECTED: "user.rejected",
   PENDING_JOIN_REQUESTS: "room.pending_join_requests",
   NOW_PLAYING_UPDATED: "now_playing.updated",
+  ROOM_USER_LIMIT_REACHED: "room.user_limit_reached",
+  ROOM_UPVOTE_LIMIT_REACHED: "room.upvote_limit_reached",
+  USER_UPVOTES_USAGE: "user.upvotes_usage",
 } as const;
 
 export const ALL_CLIENT_EVENTS = Object.values(ClientEvents);
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index 1d24f43..c76ebab 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -231,9 +231,44 @@ export const JoinedRoomMessageSchema = z.object({
     roomId: z.string().min(1),
     config: RoomConfigSchema,
     queue: z.array(SongDataSchema),
+    upvotesUsed: z.number().int().nonnegative(),
   }),
 });
 
+export const RoomUserLimitReachedMessageSchema = z.object({
+  type: z.literal(ServerEvents.ROOM_USER_LIMIT_REACHED),
+  payload: z.object({
+    maxUsers: z.number().int().nonnegative(),
+  }),
+});
+
+export type RoomUserLimitReachedMessage = z.infer<
+  typeof RoomUserLimitReachedMessageSchema
+>;
+
+export const RoomUpvoteLimitReachedMessageSchema = z.object({
+  type: z.literal(ServerEvents.ROOM_UPVOTE_LIMIT_REACHED),
+  payload: z.object({
+    maxUpvotes: z.number().int().nonnegative(),
+  }),
+});
+
+export type RoomUpvoteLimitReachedMessage = z.infer<
+  typeof RoomUpvoteLimitReachedMessageSchema
+>;
+
+export const UserUpvotesUsageMessageSchema = z.object({
+  type: z.literal(ServerEvents.USER_UPVOTES_USAGE),
+  payload: z.object({
+    used: z.number().int().nonnegative(),
+    maxUpvotes: z.number().int().nonnegative(),
+  }),
+});
+
+export type UserUpvotesUsageMessage = z.infer<
+  typeof UserUpvotesUsageMessageSchema
+>;
+
 export type JoinedRoomMessage = z.infer<typeof JoinedRoomMessageSchema>;
 
 export const ListUsersMessageSchema = z.object({
@@ -306,6 +341,9 @@ export const ServerMessageSchema = z.discriminatedUnion("type", [
   AdminLeftMessageSchema,
   AdminJoinedMessageSchema,
   JoinedRoomMessageSchema,
+  RoomUserLimitReachedMessageSchema,
+  RoomUpvoteLimitReachedMessageSchema,
+  UserUpvotesUsageMessageSchema,
   ListUsersMessageSchema,
   JoinRequestedMessageSchema,
   RequestAlreadySentMessageSchema,
@@ -325,7 +363,13 @@ export type ConnectionState =
   | "disconnected"
   | "error";
 
-export type JoinState = "idle" | "joining" | "joined" | "blocked" | "rejected";
+export type JoinState =
+  | "idle"
+  | "joining"
+  | "joined"
+  | "blocked"
+  | "rejected"
+  | "full";
 
 export type UseWebSocketReturn = {
   connectionState: ConnectionState;

From 04570d69362a811f658493dad3d0b2a354eadd6d Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sat, 6 Jun 2026 13:40:00 +0530
Subject: [PATCH 07/20] Enhance song request functionality and update event
 handling

- Added a new event `SONG_REQUEST_SUBMITTED` to the ServerEvents for better tracking of song requests.
- Updated the `requestSong` method in the Room class to include the requesting user's ID.
- Modified the `rejectSong` method to return detailed information about rejected songs, including the requester.
- Enhanced WebSocket handling to notify users when their song requests are submitted and provide feedback on approval or rejection.
- Updated message schemas to accommodate new event types and payload structures.
---
 apps/room-server/src/constants.ts             |  1 +
 apps/room-server/src/handerFunctions.ts       | 48 ++++++++++--------
 apps/room-server/src/room.ts                  | 49 ++++++++++---------
 apps/room-server/src/types.ts                 | 16 ++++++
 apps/web/hooks/useWebSocket.ts                | 15 ++++++
 apps/web/lib/constants.ts                     |  1 +
 apps/web/next-env.d.ts                        |  2 +-
 apps/web/types/websocket.ts                   | 16 ++++++
 .../migration.sql                             | 11 +++++
 packages/db/prisma/schema.prisma              |  4 ++
 10 files changed, 119 insertions(+), 44 deletions(-)
 create mode 100644 packages/db/prisma/migrations/20260606000000_add_requested_by_user_to_song/migration.sql

diff --git a/apps/room-server/src/constants.ts b/apps/room-server/src/constants.ts
index 9189cf8..37462e5 100644
--- a/apps/room-server/src/constants.ts
+++ b/apps/room-server/src/constants.ts
@@ -13,6 +13,7 @@ export const ClientEvents = {
 export const ServerEvents = {
   QUEUE_UPDATED: "queue.updated",
   SONG_REQUESTED: "song.requested",
+  SONG_REQUEST_SUBMITTED: "song.request_submitted",
   SONG_APPROVED: "song.approved",
   SONG_REJECTED: "song.rejected",
   ERROR: "error",
diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index 0489e43..d2e100c 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -98,6 +98,7 @@ async function admitUserToRoom(
   });
   room.removeUserRequest(user.userId);
 
+  const currentSong = await room.playCurrentSong();
   const queue = await room.loadSongs();
   const upvotesUsed = await room.getUserUpvoteCount(user.userId);
 
@@ -116,25 +117,16 @@ async function admitUserToRoom(
     payload: { users: room.getUsers() },
   });
 
-  const currentSong = await room.playCurrentSong();
-  send(user.ws, {
+  broadcastToRoom(roomId, {
     type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: currentSong ?? null },
   });
 
-  send(user.ws, {
+  broadcastToRoom(roomId, {
     type: ServerEvents.QUEUE_UPDATED,
     payload: { queue },
   });
 
-  send(user.ws, {
-    type: ServerEvents.USER_APPROVED,
-    payload: {
-      userId: user.userId,
-      username: user.username,
-    },
-  });
-
   return true;
 }
 
@@ -171,9 +163,17 @@ async function getRoom(roomId: string): Promise<Room | null> {
 async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
   const { roomId, user } = msg.payload;
 
-  let room = roomCache.get(roomId);
+  let room: Room | null = roomCache.get(roomId) ?? null;
   if (!room) {
-    room = await Room.findOrCreate(roomId, user.userId);
+    room = await Room.find(roomId);
+    if (!room) {
+      send(ws, {
+        type: ServerEvents.ERROR,
+        payload: { message: "Room not found" },
+      });
+      connections.delete(ws);
+      return;
+    }
     roomCache.set(roomId, room);
   }
 
@@ -239,6 +239,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
   connections.get(ws)!.status = "joined";
   room.addUser(user);
 
+  const currentSong = await room.playCurrentSong();
   const queue = await room.loadSongs();
   const upvotesUsed = await room.getUserUpvoteCount(user.userId);
 
@@ -259,15 +260,12 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
     payload: { users: room.getUsers() },
   });
 
-  // send current song to this user
-  const currentSong = await room.playCurrentSong();
-  send(ws, {
+  broadcastToRoom(roomId, {
     type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: currentSong ?? null },
   });
 
-  // send queue update to this user
-  send(ws, {
+  broadcastToRoom(roomId, {
     type: ServerEvents.QUEUE_UPDATED,
     payload: { queue },
   });
@@ -305,6 +303,7 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
   // send to user that request is rejected
   sendToUser(msg.payload.userId, {
     type: ServerEvents.USER_REJECTED,
+    payload: {},
   });
 }
 
@@ -379,7 +378,7 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
     });
   }
 
-  const result = await room.requestSong(msg.payload.song);
+  const result = await room.requestSong(msg.payload.song, conn.user.userId);
 
   if (result === "duplicate") {
     return send(ws, {
@@ -395,6 +394,10 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
   if (room.isAutoApproveSongs()) {
     await sendQueueUpdate(conn.roomId, room);
   } else {
+    send(conn.ws, {
+      type: ServerEvents.SONG_REQUEST_SUBMITTED,
+      payload: { song: songData },
+    });
     sendToAdmin(conn.roomId, room, {
       type: ServerEvents.SONG_REQUESTED,
       payload: { song: songData },
@@ -529,7 +532,12 @@ async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
   if (success) {
     broadcastToRoom(conn.roomId, {
       type: ServerEvents.SONG_REJECTED,
-      payload: { songId: msg.payload.songId },
+      payload: {
+        songId: success.id,
+        name: success.name,
+        artist: success.artist,
+        requestedByUserId: success.requestedByUserId,
+      },
     });
   } else {
     send(ws, {
diff --git a/apps/room-server/src/room.ts b/apps/room-server/src/room.ts
index 47ca08a..5cdf0d0 100644
--- a/apps/room-server/src/room.ts
+++ b/apps/room-server/src/room.ts
@@ -16,6 +16,12 @@ type UpvoteResult =
   | "upvote_limit_reached";
 
 export type RequestSongResult = SongData | "duplicate";
+export type RejectedSongResult = {
+  id: string;
+  name: string;
+  artist: string;
+  requestedByUserId: string | null;
+} | null;
 
 type UserPayloadWithWs = UserPayload & {
   ws: WebSocket;
@@ -133,21 +139,11 @@ export class Room {
     return song;
   }
 
-  static async findOrCreate(roomId: string, adminId: string): Promise<Room> {
-    let dbRoom = await prisma.room.findUnique({ where: { id: roomId } });
+  static async find(roomId: string): Promise<Room | null> {
+    const dbRoom = await prisma.room.findUnique({ where: { id: roomId } });
 
     if (!dbRoom) {
-      dbRoom = await prisma.room.create({
-        data: {
-          id: roomId,
-          name: roomId,
-          adminId,
-          maxUpvotes: 10,
-          maxUsers: 10,
-          autoApproveSongs: false,
-          autoApproveUsers: false,
-        },
-      });
+      return null;
     }
 
     return new Room({
@@ -161,7 +157,10 @@ export class Room {
     });
   }
 
-  async requestSong(songPayload: SongPayload): Promise<RequestSongResult> {
+  async requestSong(
+    songPayload: SongPayload,
+    requestedByUserId: string,
+  ): Promise<RequestSongResult> {
     const existing = await prisma.song.findFirst({
       where: {
         roomId: this.config.id,
@@ -181,6 +180,7 @@ export class Room {
         artist: songPayload.artist,
         url: songPayload.url,
         imgUrl: songPayload.imgUrl,
+        requestedByUserId,
         roomId: this.config.id,
         status: this.config.autoApproveSongs ? "QUEUED" : "REQUESTED",
       },
@@ -278,20 +278,23 @@ export class Room {
     }
   }
 
-  async rejectSong(songId: string): Promise<boolean> {
+  async rejectSong(
+    songId: string,
+  ): Promise<RejectedSongResult> {
     try {
-      await prisma.song.update({
+      const song = await prisma.song.update({
         where: { id: songId, roomId: this.config.id, status: "REQUESTED" },
         data: { status: "REJECTED" },
+        select: {
+          id: true,
+          name: true,
+          artist: true,
+          requestedByUserId: true,
+        },
       });
-      // const timeout = songRequestTimeouts.get(songId);
-      // if (timeout) {
-      //   clearTimeout(timeout);
-      //   songRequestTimeouts.delete(songId);
-      // }
-      return true;
+      return song;
     } catch {
-      return false;
+      return null;
     }
   }
 
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index 513781b..1663caa 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -187,6 +187,17 @@ export const SongRequestedMessageSchema = z.object({
 
 export type SongRequestedMessage = z.infer<typeof SongRequestedMessageSchema>;
 
+export const SongRequestSubmittedMessageSchema = z.object({
+  type: z.literal(ServerEvents.SONG_REQUEST_SUBMITTED),
+  payload: z.object({
+    song: SongDataSchema,
+  }),
+});
+
+export type SongRequestSubmittedMessage = z.infer<
+  typeof SongRequestSubmittedMessageSchema
+>;
+
 export const SongApprovedMessageSchema = z.object({
   type: z.literal(ServerEvents.SONG_APPROVED),
   payload: z.object({
@@ -200,6 +211,9 @@ export const SongRejectedMessageSchema = z.object({
   type: z.literal(ServerEvents.SONG_REJECTED),
   payload: z.object({
     songId: z.string().min(1),
+    name: z.string().min(1),
+    artist: z.string().min(1),
+    requestedByUserId: z.string().min(1).nullable(),
   }),
 });
 
@@ -315,6 +329,7 @@ export type UserApprovedMessage = z.infer<typeof UserApprovedMessageSchema>;
 
 export const UserRejectedMessageSchema = z.object({
   type: z.literal(ServerEvents.USER_REJECTED),
+  payload: z.object({}),
 });
 
 export type UserRejectedMessage = z.infer<typeof UserRejectedMessageSchema>;
@@ -344,6 +359,7 @@ export type NowPlayingUpdateMessage = z.infer<
 export const OutgoingMessageSchema = z.discriminatedUnion("type", [
   QueueUpdateMessageSchema,
   SongRequestedMessageSchema,
+  SongRequestSubmittedMessageSchema,
   SongApprovedMessageSchema,
   SongRejectedMessageSchema,
   ErrorMessageSchema,
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 3878c54..1f65c7e 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -19,6 +19,7 @@ import { ClientMessageSchema, ServerMessageSchema } from "@/types/websocket";
 
 export function useWebSocket() {
   const wsRef = useRef<WebSocket | null>(null);
+  const currentUserIdRef = useRef<string | null>(null);
   const [connectionState, setConnectionState] =
     useState<ConnectionState>("disconnected");
   const [joinState, setJoinState] = useState<JoinState>("idle");
@@ -136,6 +137,11 @@ export function useWebSocket() {
           break;
         }
 
+        case ServerEvents.SONG_REQUEST_SUBMITTED: {
+          toast.success("Song submitted for approval");
+          break;
+        }
+
         case ServerEvents.SONG_APPROVED: {
           setPendingRequests((prev) =>
             prev.filter((song) => song.id !== message.payload.songId),
@@ -147,6 +153,14 @@ export function useWebSocket() {
           setPendingRequests((prev) =>
             prev.filter((song) => song.id !== message.payload.songId),
           );
+          if (
+            message.payload.requestedByUserId &&
+            message.payload.requestedByUserId === currentUserIdRef.current
+          ) {
+            toast.error(
+              `"${message.payload.name}" by ${message.payload.artist} was not approved`,
+            );
+          }
           break;
         }
 
@@ -287,6 +301,7 @@ export function useWebSocket() {
 
   const joinRoom = useCallback(
     (roomId: string, user: UserPayload) => {
+      currentUserIdRef.current = user.userId;
       setJoinState("joining");
       setJoinError(null);
       sendMessage({
diff --git a/apps/web/lib/constants.ts b/apps/web/lib/constants.ts
index 2259403..dea8e43 100644
--- a/apps/web/lib/constants.ts
+++ b/apps/web/lib/constants.ts
@@ -17,6 +17,7 @@ export const ClientEvents = {
 export const ServerEvents = {
   QUEUE_UPDATED: "queue.updated",
   SONG_REQUESTED: "song.requested",
+  SONG_REQUEST_SUBMITTED: "song.request_submitted",
   SONG_APPROVED: "song.approved",
   SONG_REJECTED: "song.rejected",
   ERROR: "error",
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index c76ebab..60a1cfa 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -177,6 +177,17 @@ export const SongRequestedMessageSchema = z.object({
 
 export type SongRequestedMessage = z.infer<typeof SongRequestedMessageSchema>;
 
+export const SongRequestSubmittedMessageSchema = z.object({
+  type: z.literal(ServerEvents.SONG_REQUEST_SUBMITTED),
+  payload: z.object({
+    song: SongDataSchema,
+  }),
+});
+
+export type SongRequestSubmittedMessage = z.infer<
+  typeof SongRequestSubmittedMessageSchema
+>;
+
 export const SongApprovedMessageSchema = z.object({
   type: z.literal(ServerEvents.SONG_APPROVED),
   payload: z.object({
@@ -190,6 +201,9 @@ export const SongRejectedMessageSchema = z.object({
   type: z.literal(ServerEvents.SONG_REJECTED),
   payload: z.object({
     songId: z.string().min(1),
+    name: z.string().min(1),
+    artist: z.string().min(1),
+    requestedByUserId: z.string().min(1).nullable(),
   }),
 });
 
@@ -305,6 +319,7 @@ export type UserApprovedMessage = z.infer<typeof UserApprovedMessageSchema>;
 
 export const UserRejectedMessageSchema = z.object({
   type: z.literal(ServerEvents.USER_REJECTED),
+  payload: z.object({}),
 });
 
 export type UserRejectedMessage = z.infer<typeof UserRejectedMessageSchema>;
@@ -334,6 +349,7 @@ export type NowPlayingUpdateMessage = z.infer<
 export const ServerMessageSchema = z.discriminatedUnion("type", [
   QueueUpdateMessageSchema,
   SongRequestedMessageSchema,
+  SongRequestSubmittedMessageSchema,
   SongApprovedMessageSchema,
   SongRejectedMessageSchema,
   ErrorMessageSchema,
diff --git a/packages/db/prisma/migrations/20260606000000_add_requested_by_user_to_song/migration.sql b/packages/db/prisma/migrations/20260606000000_add_requested_by_user_to_song/migration.sql
new file mode 100644
index 0000000..fb201d0
--- /dev/null
+++ b/packages/db/prisma/migrations/20260606000000_add_requested_by_user_to_song/migration.sql
@@ -0,0 +1,11 @@
+-- AlterTable
+ALTER TABLE "song" ADD COLUMN "requestedByUserId" TEXT;
+
+-- CreateIndex
+CREATE INDEX "song_requestedByUserId_idx" ON "song"("requestedByUserId");
+
+-- AddForeignKey
+ALTER TABLE "song"
+ADD CONSTRAINT "song_requestedByUserId_fkey"
+FOREIGN KEY ("requestedByUserId") REFERENCES "user"("id")
+ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 67d4db4..60c7caa 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -30,6 +30,7 @@ model User {
   sessions              Session[]
   accounts              Account[]
   rooms                 Room[]
+  requestedSongs        Song[]
   spotifyOAuthState     SpotifyOAuthState?
 
   @@unique([email])
@@ -128,11 +129,14 @@ model Song {
   upvotes   Int        @default(0)
   imgUrl    String
   status    SongStatus @default(REQUESTED)
+  requestedByUserId String?
+  requestedBy       User?      @relation(fields: [requestedByUserId], references: [id], onDelete: SetNull)
   roomId    String
   room      Room       @relation(fields: [roomId], references: [id], onDelete: Cascade)
   createdAt DateTime   @default(now())
 
   @@index([roomId])
+  @@index([requestedByUserId])
   @@index([roomId, songId])
   @@map("song")
 }

From 844f76192d216b54539c0d4f882eb59664624850 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sat, 6 Jun 2026 13:53:49 +0530
Subject: [PATCH 08/20] Refactor room admission and rejection message handling

- Removed the queue property from the payload in user admission and join messages for simplification.
- Enhanced the user rejection message to include the room ID and a descriptive message for better user feedback.
- Updated message schemas to reflect the changes in payload structure for user admission and rejection events.
---
 apps/room-server/src/handerFunctions.ts | 7 ++++---
 apps/room-server/src/types.ts           | 6 ++++--
 apps/web/hooks/useWebSocket.ts          | 3 +--
 apps/web/next-env.d.ts                  | 2 +-
 apps/web/types/websocket.ts             | 6 ++++--
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index d2e100c..3ffc140 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -107,7 +107,6 @@ async function admitUserToRoom(
     payload: {
       roomId,
       config: room.getConfig(),
-      queue,
       upvotesUsed,
     },
   });
@@ -249,7 +248,6 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
     payload: {
       roomId,
       config: room.getConfig(),
-      queue,
       upvotesUsed,
     },
   });
@@ -303,7 +301,10 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
   // send to user that request is rejected
   sendToUser(msg.payload.userId, {
     type: ServerEvents.USER_REJECTED,
-    payload: {},
+    payload: {
+      roomId: conn.roomId,
+      message: "Your entry request was rejected by the admin.",
+    },
   });
 }
 
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index 1663caa..8c0bec8 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -247,7 +247,6 @@ export const JoinedRoomMessageSchema = z.object({
   payload: z.object({
     roomId: z.string().min(1),
     config: RoomConfigSchema,
-    queue: z.array(SongDataSchema),
     upvotesUsed: z.number().int().nonnegative(),
   }),
 });
@@ -329,7 +328,10 @@ export type UserApprovedMessage = z.infer<typeof UserApprovedMessageSchema>;
 
 export const UserRejectedMessageSchema = z.object({
   type: z.literal(ServerEvents.USER_REJECTED),
-  payload: z.object({}),
+  payload: z.object({
+    roomId: z.string().min(1),
+    message: z.string().min(1),
+  }),
 });
 
 export type UserRejectedMessage = z.infer<typeof UserRejectedMessageSchema>;
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 1f65c7e..9eae4b2 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -56,7 +56,6 @@ export function useWebSocket() {
           setJoinState("joined");
           setJoinError(null);
           setRoomConfig(message.payload.config);
-          setQueue(message.payload.queue);
           setUpvotesUsed(message.payload.upvotesUsed);
           break;
         }
@@ -104,7 +103,7 @@ export function useWebSocket() {
 
         case ServerEvents.USER_REJECTED: {
           setJoinState("rejected");
-          setJoinError("Your entry request was rejected by the admin.");
+          setJoinError(message.payload.message);
           setRoomConfig(null);
           setQueue([]);
           setPendingRequests([]);
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index 60a1cfa..c4aef96 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -244,7 +244,6 @@ export const JoinedRoomMessageSchema = z.object({
   payload: z.object({
     roomId: z.string().min(1),
     config: RoomConfigSchema,
-    queue: z.array(SongDataSchema),
     upvotesUsed: z.number().int().nonnegative(),
   }),
 });
@@ -319,7 +318,10 @@ export type UserApprovedMessage = z.infer<typeof UserApprovedMessageSchema>;
 
 export const UserRejectedMessageSchema = z.object({
   type: z.literal(ServerEvents.USER_REJECTED),
-  payload: z.object({}),
+  payload: z.object({
+    roomId: z.string().min(1),
+    message: z.string().min(1),
+  }),
 });
 
 export type UserRejectedMessage = z.infer<typeof UserRejectedMessageSchema>;

From a26acad1e227e8e9aefc615af940cfea3b1f255a Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sat, 6 Jun 2026 23:59:47 +0530
Subject: [PATCH 09/20] Refactor room song handling and enhance WebSocket
 communication

- Replaced `playCurrentSong` method with `getCurrentSong` in the Room class for clearer intent and improved functionality.
- Introduced `sendPendingListToAdmin` function to synchronize pending user requests with the admin.
- Updated WebSocket handling to ensure the current song is broadcasted correctly and playback starts when necessary.
- Enhanced client components to support new player readiness events and improved state management for song requests.
---
 apps/room-server/src/handerFunctions.ts       | 58 +++++++++----
 apps/room-server/src/room.ts                  | 48 +++++------
 .../app/room/[code]/_components/_client.tsx   |  2 +
 .../_components/now-playing-section.tsx       |  3 +
 .../[code]/_components/spotify-player.tsx     |  9 +--
 apps/web/hooks/useWebSocket.ts                | 81 +++++++++++++++----
 6 files changed, 134 insertions(+), 67 deletions(-)

diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index 3ffc140..9b57a0e 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -38,7 +38,6 @@ function sendToAdmin(roomId: string, room: Room, message: OutgoingMessage) {
   for (const [, conn] of connections) {
     if (conn.roomId === roomId && conn.user?.userId === adminId) {
       send(conn.ws, message);
-      break;
     }
   }
 }
@@ -47,7 +46,6 @@ function sendToUser(userId: string, message: OutgoingMessage) {
   for (const [, conn] of connections) {
     if (conn.user?.userId === userId) {
       send(conn.ws, message);
-      break;
     }
   }
 }
@@ -98,7 +96,7 @@ async function admitUserToRoom(
   });
   room.removeUserRequest(user.userId);
 
-  const currentSong = await room.playCurrentSong();
+  const currentSong = await room.getCurrentSong();
   const queue = await room.loadSongs();
   const upvotesUsed = await room.getUserUpvoteCount(user.userId);
 
@@ -155,6 +153,13 @@ async function sendQueueUpdate(roomId: string, room: Room) {
   });
 }
 
+function sendPendingListToAdmin(roomId: string, room: Room) {
+  sendToAdmin(roomId, room, {
+    type: ServerEvents.PENDING_JOIN_REQUESTS,
+    payload: { users: room.getUsersRequestedList() },
+  });
+}
+
 async function getRoom(roomId: string): Promise<Room | null> {
   return roomCache.get(roomId) ?? null;
 }
@@ -238,7 +243,7 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
   connections.get(ws)!.status = "joined";
   room.addUser(user);
 
-  const currentSong = await room.playCurrentSong();
+  const currentSong = await room.getCurrentSong();
   const queue = await room.loadSongs();
   const upvotesUsed = await room.getUserUpvoteCount(user.userId);
 
@@ -306,6 +311,9 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
       message: "Your entry request was rejected by the admin.",
     },
   });
+
+  // push authoritative pending list back to admin so all tabs are in sync
+  sendPendingListToAdmin(conn.roomId, room);
 }
 
 async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
@@ -359,7 +367,11 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
         message: `Room is full (${room.getConfig().maxUsers} users max)`,
       },
     });
+    return;
   }
+
+  // push authoritative pending list back to admin so all tabs are in sync
+  sendPendingListToAdmin(conn.roomId, room);
 }
 
 async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
@@ -394,6 +406,15 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
 
   if (room.isAutoApproveSongs()) {
     await sendQueueUpdate(conn.roomId, room);
+    // Start playback if nothing is currently playing
+    const currentSong = await room.getCurrentSong();
+    if (!currentSong) {
+      const next = await room.playNextSong();
+      broadcastToRoom(conn.roomId, {
+        type: ServerEvents.NOW_PLAYING_UPDATED,
+        payload: { song: next ?? null },
+      });
+    }
   } else {
     send(conn.ws, {
       type: ServerEvents.SONG_REQUEST_SUBMITTED,
@@ -494,13 +515,15 @@ async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
     payload: { songId: msg.payload.songId },
   });
 
-  // if there is no current song, play the next song
-  const currentSong = await room.playCurrentSong();
-
-  broadcastToRoom(conn.roomId, {
-    type: ServerEvents.NOW_PLAYING_UPDATED,
-    payload: { song: currentSong ?? null },
-  });
+  // Start playback only if nothing is currently playing
+  let currentSong = await room.getCurrentSong();
+  if (!currentSong) {
+    currentSong = await room.playNextSong();
+    broadcastToRoom(conn.roomId, {
+      type: ServerEvents.NOW_PLAYING_UPDATED,
+      payload: { song: currentSong ?? null },
+    });
+  }
 
   await sendQueueUpdate(conn.roomId, room);
 }
@@ -599,14 +622,13 @@ async function handlePlayCurrentSong(ws: WebSocket) {
     });
   }
 
-  const song = await room.playCurrentSong();
+  // Read-only resync: broadcast the current PLAYING song without promoting queue
+  const song = await room.getCurrentSong();
 
   broadcastToRoom(conn.roomId, {
     type: ServerEvents.NOW_PLAYING_UPDATED,
     payload: { song: song ?? null },
   });
-
-  await sendQueueUpdate(conn.roomId, room);
 }
 
 export async function handleMessage(ws: WebSocket, raw: string) {
@@ -687,4 +709,12 @@ export function handleDisconnect(ws: WebSocket) {
     type: ServerEvents.MEMBERS_UPDATED,
     payload: { users: room.getUsers() },
   });
+
+  // Evict room from cache when no connections remain to free memory
+  const hasRemaining = Array.from(connections.values()).some(
+    (c) => c.roomId === conn.roomId,
+  );
+  if (!hasRemaining) {
+    roomCache.delete(conn.roomId);
+  }
 }
diff --git a/apps/room-server/src/room.ts b/apps/room-server/src/room.ts
index 5cdf0d0..b0f6c38 100644
--- a/apps/room-server/src/room.ts
+++ b/apps/room-server/src/room.ts
@@ -255,22 +255,29 @@ export class Room {
     return result;
   }
 
+  async getCurrentSong(): Promise<SongData | null> {
+    const song = await prisma.song.findFirst({
+      where: { roomId: this.config.id, status: "PLAYING" },
+    });
+    if (!song) return null;
+    return {
+      id: song.id,
+      songId: song.songId,
+      name: song.name,
+      artist: song.artist,
+      url: song.url,
+      upvotes: song.upvotes,
+      imgUrl: song.imgUrl,
+      status: song.status,
+    };
+  }
+
   async approveSong(songId: string): Promise<boolean> {
     try {
       await prisma.song.update({
         where: { id: songId, roomId: this.config.id, status: "REQUESTED" },
         data: { status: "QUEUED" },
       });
-      // const timeout = songRequestTimeouts.get(songId);
-      // if (timeout) {
-      //   clearTimeout(timeout);
-      //   songRequestTimeouts.delete(songId);
-      // }
-      // if no current song, play the new song
-      const currentSong = await this.playCurrentSong();
-      if (!currentSong) {
-        await this.playNextSong();
-      }
       return true;
     } catch (error) {
       console.error("Error approving song:", error);
@@ -278,9 +285,7 @@ export class Room {
     }
   }
 
-  async rejectSong(
-    songId: string,
-  ): Promise<RejectedSongResult> {
+  async rejectSong(songId: string): Promise<RejectedSongResult> {
     try {
       const song = await prisma.song.update({
         where: { id: songId, roomId: this.config.id, status: "REQUESTED" },
@@ -333,22 +338,7 @@ export class Room {
   }
 
   async playCurrentSong(): Promise<SongData | null> {
-    const song = await prisma.song.findFirst({
-      where: { roomId: this.config.id, status: "PLAYING" },
-    });
-    if (song) {
-      return {
-        id: song.id,
-        songId: song.songId,
-        name: song.name,
-        artist: song.artist,
-        url: song.url,
-        upvotes: song.upvotes,
-        imgUrl: song.imgUrl,
-        status: song.status,
-      };
-    }
-    return await this.playNextSong();
+    return this.getCurrentSong();
   }
 
   async playNextSong(): Promise<SongData | null> {
diff --git a/apps/web/app/room/[code]/_components/_client.tsx b/apps/web/app/room/[code]/_components/_client.tsx
index 95e42c8..3535656 100644
--- a/apps/web/app/room/[code]/_components/_client.tsx
+++ b/apps/web/app/room/[code]/_components/_client.tsx
@@ -40,6 +40,7 @@ export default function ClientPage({
     approveUser,
     rejectUser,
     requestNextSong,
+    broadcastNowPlaying,
     users,
     nowPlaying,
     upvotesUsed,
@@ -79,6 +80,7 @@ export default function ClientPage({
                   spotifyToken={spotifyToken}
                   nowPlaying={nowPlaying}
                   requestNextSong={requestNextSong}
+                  onPlayerReady={broadcastNowPlaying}
                 />
 
                 <RequestSongSection
diff --git a/apps/web/app/room/[code]/_components/now-playing-section.tsx b/apps/web/app/room/[code]/_components/now-playing-section.tsx
index 9ed8a9f..33ac7e1 100644
--- a/apps/web/app/room/[code]/_components/now-playing-section.tsx
+++ b/apps/web/app/room/[code]/_components/now-playing-section.tsx
@@ -11,6 +11,7 @@ type NowPlayingSectionProps = {
   spotifyToken: string | null;
   nowPlaying: SongData | null;
   requestNextSong: () => void;
+  onPlayerReady?: () => void;
 };
 
 export default function NowPlayingSection({
@@ -18,6 +19,7 @@ export default function NowPlayingSection({
   spotifyToken,
   nowPlaying,
   requestNextSong,
+  onPlayerReady,
 }: NowPlayingSectionProps) {
   return (
     <motion.section
@@ -66,6 +68,7 @@ export default function NowPlayingSection({
                 token={spotifyToken}
                 nowPlayingUrl={nowPlaying.url}
                 onSongEnd={requestNextSong}
+                onReady={onPlayerReady}
               />
             ) : (
               <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-center sm:items-start">
diff --git a/apps/web/app/room/[code]/_components/spotify-player.tsx b/apps/web/app/room/[code]/_components/spotify-player.tsx
index e1fe760..ea22eae 100644
--- a/apps/web/app/room/[code]/_components/spotify-player.tsx
+++ b/apps/web/app/room/[code]/_components/spotify-player.tsx
@@ -66,13 +66,6 @@ type ExtendedPlaybackState = SpotifyPlaybackState & {
   duration: number;
 };
 
-type PlaybackSnapshot = {
-  uri: string;
-  paused: boolean;
-  position: number;
-  duration: number;
-};
-
 function reportPlayerError(
   message: string,
   details?: unknown,
@@ -183,7 +176,7 @@ export default function SpotifyWebPlayer({
 
     // Disable repeat
     await stopRepeat();
-  }, []);
+  }, [stopRepeat]);
 
   async function activateDevice(deviceId: string) {
     const fresh = await fetchFreshToken();
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 9eae4b2..38b1cff 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -17,9 +17,19 @@ import type {
 import { toast } from "@repo/ui/components/ui/sonner";
 import { ClientMessageSchema, ServerMessageSchema } from "@/types/websocket";
 
+const RECONNECT_BASE_MS = 1000;
+const RECONNECT_MAX_MS = 30000;
+
 export function useWebSocket() {
   const wsRef = useRef<WebSocket | null>(null);
   const currentUserIdRef = useRef<string | null>(null);
+  const currentRoomIdRef = useRef<string | null>(null);
+  const currentUserRef = useRef<UserPayload | null>(null);
+  const shouldReconnectRef = useRef(true);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const reconnectAttemptRef = useRef(0);
+  const joinStateRef = useRef<JoinState>("idle");
+
   const [connectionState, setConnectionState] =
     useState<ConnectionState>("disconnected");
   const [joinState, setJoinState] = useState<JoinState>("idle");
@@ -33,6 +43,15 @@ export function useWebSocket() {
   const [isAdminJoined, setIsAdminJoined] = useState(false);
   const [upvotesUsed, setUpvotesUsed] = useState(0);
 
+  // Keep a ref in sync with joinState so reconnect closures can read it
+  const setJoinStateAndRef = useCallback((next: JoinState | ((prev: JoinState) => JoinState)) => {
+    setJoinState((prev) => {
+      const value = typeof next === "function" ? next(prev) : next;
+      joinStateRef.current = value;
+      return value;
+    });
+  }, []);
+
   const reportError = useCallback(
     (message: string, details?: unknown, toastId?: string) => {
       toast.error(message, toastId ? { id: toastId } : undefined);
@@ -53,7 +72,7 @@ export function useWebSocket() {
         }
 
         case ServerEvents.ROOM_JOINED: {
-          setJoinState("joined");
+          setJoinStateAndRef("joined");
           setJoinError(null);
           setRoomConfig(message.payload.config);
           setUpvotesUsed(message.payload.upvotesUsed);
@@ -61,7 +80,7 @@ export function useWebSocket() {
         }
 
         case ServerEvents.ROOM_USER_LIMIT_REACHED: {
-          setJoinState("full");
+          setJoinStateAndRef("full");
           setJoinError(
             `This room is full (${message.payload.maxUsers} users max). Try again later.`,
           );
@@ -90,7 +109,7 @@ export function useWebSocket() {
         }
 
         case ServerEvents.WAITING_FOR_ADMIN: {
-          setJoinState("blocked");
+          setJoinStateAndRef("blocked");
           setJoinError(null);
           setRoomConfig(null);
           setQueue([]);
@@ -102,7 +121,7 @@ export function useWebSocket() {
         }
 
         case ServerEvents.USER_REJECTED: {
-          setJoinState("rejected");
+          setJoinStateAndRef("rejected");
           setJoinError(message.payload.message);
           setRoomConfig(null);
           setQueue([]);
@@ -116,13 +135,13 @@ export function useWebSocket() {
 
         case ServerEvents.ADMIN_JOINED: {
           setIsAdminJoined(true);
-          setJoinState((prev) => (prev === "blocked" ? "joining" : prev));
+          setJoinStateAndRef((prev) => (prev === "blocked" ? "joining" : prev));
           break;
         }
 
         case ServerEvents.ADMIN_LEFT: {
           setIsAdminJoined(false);
-          setJoinState((prev) => (prev === "joining" ? "blocked" : prev));
+          setJoinStateAndRef((prev) => (prev === "joining" ? "blocked" : prev));
           break;
         }
 
@@ -200,7 +219,7 @@ export function useWebSocket() {
         }
       }
     },
-    [reportError],
+    [reportError, setJoinStateAndRef],
   );
 
   const connect = useCallback(() => {
@@ -213,13 +232,22 @@ export function useWebSocket() {
       wsRef.current = new WebSocket(wsUrl);
 
       wsRef.current.onopen = () => {
+        reconnectAttemptRef.current = 0;
         setConnectionState("connected");
         console.log("WebSocket connected");
 
-        // // Rejoin room if we were in one
-        // if (currentRoomId) {
-        //   // Note: User needs to be passed, this is handled by joinRoom
-        // }
+        // Auto-rejoin the room if we were in one before disconnecting
+        const roomId = currentRoomIdRef.current;
+        const user = currentUserRef.current;
+        if (roomId && user) {
+          setJoinStateAndRef("joining");
+          wsRef.current?.send(
+            JSON.stringify({
+              type: ClientEvents.JOIN_ROOM,
+              payload: { roomId, user },
+            }),
+          );
+        }
       };
 
       wsRef.current.onmessage = (event) => {
@@ -252,6 +280,21 @@ export function useWebSocket() {
       wsRef.current.onclose = () => {
         setConnectionState("disconnected");
         console.log("WebSocket disconnected");
+
+        // Don't reconnect for terminal join states or if unmounted
+        const terminal = joinStateRef.current === "rejected" || joinStateRef.current === "full";
+        if (!shouldReconnectRef.current || terminal) return;
+
+        const attempt = reconnectAttemptRef.current;
+        const delay = Math.min(
+          RECONNECT_BASE_MS * Math.pow(2, attempt),
+          RECONNECT_MAX_MS,
+        );
+        reconnectAttemptRef.current = attempt + 1;
+        console.log(`Reconnecting in ${delay}ms (attempt ${attempt + 1})`);
+        reconnectTimerRef.current = setTimeout(() => {
+          if (shouldReconnectRef.current) connect();
+        }, delay);
       };
 
       wsRef.current.onerror = (err) => {
@@ -270,7 +313,7 @@ export function useWebSocket() {
         "websocket-create-error",
       );
     }
-  }, [handleServerMessage, reportError]);
+  }, [handleServerMessage, reportError, setJoinStateAndRef]);
 
   const sendMessage = useCallback(
     (message: ClientMessage) => {
@@ -301,14 +344,16 @@ export function useWebSocket() {
   const joinRoom = useCallback(
     (roomId: string, user: UserPayload) => {
       currentUserIdRef.current = user.userId;
-      setJoinState("joining");
+      currentRoomIdRef.current = roomId;
+      currentUserRef.current = user;
+      setJoinStateAndRef("joining");
       setJoinError(null);
       sendMessage({
         type: ClientEvents.JOIN_ROOM,
         payload: { roomId, user },
       });
     },
-    [sendMessage],
+    [sendMessage, setJoinStateAndRef],
   );
 
   const requestSong = useCallback(
@@ -353,7 +398,6 @@ export function useWebSocket() {
 
   const approveUser = useCallback(
     (userId: string, username: string) => {
-      setPendingUsers((prev) => prev.filter((u) => u.userId !== userId));
       sendMessage({
         type: ClientEvents.APPROVE_USER,
         payload: { userId, username },
@@ -364,7 +408,6 @@ export function useWebSocket() {
 
   const rejectUser = useCallback(
     (userId: string, username: string) => {
-      setPendingUsers((prev) => prev.filter((u) => u.userId !== userId));
       sendMessage({
         type: ClientEvents.REJECT_USER,
         payload: { userId, username },
@@ -382,8 +425,14 @@ export function useWebSocket() {
   }, [sendMessage]);
 
   useEffect(() => {
+    shouldReconnectRef.current = true;
     connect();
     return () => {
+      shouldReconnectRef.current = false;
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
       if (wsRef.current) {
         wsRef.current.close();
       }

From 941c0b6a8d0475b7373268fd938b4dc70a00ab3d Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 7 Jun 2026 13:47:02 +0530
Subject: [PATCH 10/20] Add pending song requests handling and improve
 WebSocket communication

- Introduced a new event `PENDING_SONG_REQUESTS` to notify clients of songs awaiting admin approval.
- Enhanced the `handleJoinRoom` function to send a backlog of pending song requests to users upon joining.
- Updated message schemas to include the new `PendingSongRequestsMessage` type for better structure and validation.
- Improved error handling for users attempting actions before joining a room, providing clearer feedback.
- Adjusted WebSocket handling to manage new event types and ensure seamless communication regarding song requests.
---
 apps/room-server/src/constants.ts       |   1 +
 apps/room-server/src/handerFunctions.ts | 101 ++++++++++++++++++++++++
 apps/room-server/src/types.ts           |  12 +++
 apps/web/hooks/useWebSocket.ts          |  11 +++
 apps/web/lib/constants.ts               |   1 +
 apps/web/types/websocket.ts             |  12 +++
 6 files changed, 138 insertions(+)

diff --git a/apps/room-server/src/constants.ts b/apps/room-server/src/constants.ts
index 37462e5..7ed1584 100644
--- a/apps/room-server/src/constants.ts
+++ b/apps/room-server/src/constants.ts
@@ -27,6 +27,7 @@ export const ServerEvents = {
   USER_APPROVED: "user.approved",
   USER_REJECTED: "user.rejected",
   PENDING_JOIN_REQUESTS: "room.pending_join_requests",
+  PENDING_SONG_REQUESTS: "room.pending_song_requests",
   NOW_PLAYING_UPDATED: "now_playing.updated",
   ROOM_USER_LIMIT_REACHED: "room.user_limit_reached",
   ROOM_UPVOTE_LIMIT_REACHED: "room.upvote_limit_reached",
diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index 9b57a0e..527f300 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -141,6 +141,9 @@ async function notifyPendingUsersOnAdminJoin(roomId: string, room: Room) {
         type: ServerEvents.ADMIN_JOINED,
         payload: {},
       });
+    } else {
+      sendUserLimitReached(pendingUser.ws, room.getConfig().maxUsers);
+      room.removeUserRequest(pendingUser.userId);
     }
   }
 }
@@ -167,6 +170,39 @@ async function getRoom(roomId: string): Promise<Room | null> {
 async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
   const { roomId, user } = msg.payload;
 
+  // Idempotency: if this socket is already joined for the same room+user, just
+  // resend authoritative state instead of resetting the connection to pending.
+  const existing = connections.get(ws);
+  if (
+    existing?.status === "joined" &&
+    existing.roomId === roomId &&
+    existing.user?.userId === user.userId
+  ) {
+    const cachedRoom = roomCache.get(roomId);
+    if (cachedRoom) {
+      const currentSong = await cachedRoom.getCurrentSong();
+      const queue = await cachedRoom.loadSongs();
+      const upvotesUsed = await cachedRoom.getUserUpvoteCount(user.userId);
+      send(ws, {
+        type: ServerEvents.ROOM_JOINED,
+        payload: { roomId, config: cachedRoom.getConfig(), upvotesUsed },
+      });
+      send(ws, {
+        type: ServerEvents.MEMBERS_UPDATED,
+        payload: { users: cachedRoom.getUsers() },
+      });
+      send(ws, {
+        type: ServerEvents.NOW_PLAYING_UPDATED,
+        payload: { song: currentSong ?? null },
+      });
+      send(ws, {
+        type: ServerEvents.QUEUE_UPDATED,
+        payload: { queue },
+      });
+    }
+    return;
+  }
+
   let room: Room | null = roomCache.get(roomId) ?? null;
   if (!room) {
     room = await Room.find(roomId);
@@ -200,6 +236,15 @@ async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
         payload: { users: userRequests },
       });
     }
+
+    // send backlog of songs pending admin approval
+    const requestedSongs = await room.loadRequestedSongs();
+    if (requestedSongs.length > 0) {
+      send(ws, {
+        type: ServerEvents.PENDING_SONG_REQUESTS,
+        payload: { songs: requestedSongs },
+      });
+    }
   } else {
     if (room.isAtUserCapacity(user.userId)) {
       sendUserLimitReached(ws, room.getConfig().maxUsers);
@@ -283,6 +328,13 @@ async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   // check if user is admin
   if (!conn.user.isAdmin) {
     return send(ws, {
@@ -325,6 +377,13 @@ async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
@@ -383,6 +442,13 @@ async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
@@ -436,6 +502,13 @@ async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
@@ -486,6 +559,13 @@ async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
@@ -537,6 +617,13 @@ async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
@@ -580,6 +667,13 @@ async function handleNextSong(ws: WebSocket) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
@@ -614,6 +708,13 @@ async function handlePlayCurrentSong(ws: WebSocket) {
     });
   }
 
+  if (conn.status !== "joined") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have not joined this room yet" },
+    });
+  }
+
   const room = await getRoom(conn.roomId);
   if (!room) {
     return send(ws, {
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index 8c0bec8..5a48c34 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -347,6 +347,17 @@ export type UsersRequestedListMessage = z.infer<
   typeof UsersRequestedListMessageSchema
 >;
 
+export const PendingSongRequestsMessageSchema = z.object({
+  type: z.literal(ServerEvents.PENDING_SONG_REQUESTS),
+  payload: z.object({
+    songs: z.array(SongDataSchema),
+  }),
+});
+
+export type PendingSongRequestsMessage = z.infer<
+  typeof PendingSongRequestsMessageSchema
+>;
+
 export const NowPlayingUpdateMessageSchema = z.object({
   type: z.literal(ServerEvents.NOW_PLAYING_UPDATED),
   payload: z.object({
@@ -379,6 +390,7 @@ export const OutgoingMessageSchema = z.discriminatedUnion("type", [
   UserRejectedMessageSchema,
   UsersRequestedListMessageSchema,
   NowPlayingUpdateMessageSchema,
+  PendingSongRequestsMessageSchema,
 ]);
 
 export type OutgoingMessage = z.infer<typeof OutgoingMessageSchema>;
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 38b1cff..7140820 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -133,6 +133,12 @@ export function useWebSocket() {
           break;
         }
 
+        case ServerEvents.JOIN_ALREADY_PENDING: {
+          setJoinStateAndRef("joining");
+          setJoinError(null);
+          break;
+        }
+
         case ServerEvents.ADMIN_JOINED: {
           setIsAdminJoined(true);
           setJoinStateAndRef((prev) => (prev === "blocked" ? "joining" : prev));
@@ -187,6 +193,11 @@ export function useWebSocket() {
           break;
         }
 
+        case ServerEvents.PENDING_SONG_REQUESTS: {
+          setPendingRequests(message.payload.songs);
+          break;
+        }
+
         case ServerEvents.USER_JOIN_REQUESTED: {
           setPendingUsers((prev) => {
             if (prev.some((u) => u.userId === message.payload.userId)) {
diff --git a/apps/web/lib/constants.ts b/apps/web/lib/constants.ts
index dea8e43..90bb086 100644
--- a/apps/web/lib/constants.ts
+++ b/apps/web/lib/constants.ts
@@ -31,6 +31,7 @@ export const ServerEvents = {
   USER_APPROVED: "user.approved",
   USER_REJECTED: "user.rejected",
   PENDING_JOIN_REQUESTS: "room.pending_join_requests",
+  PENDING_SONG_REQUESTS: "room.pending_song_requests",
   NOW_PLAYING_UPDATED: "now_playing.updated",
   ROOM_USER_LIMIT_REACHED: "room.user_limit_reached",
   ROOM_UPVOTE_LIMIT_REACHED: "room.upvote_limit_reached",
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index c4aef96..dd6f012 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -337,6 +337,17 @@ export type UsersRequestedListMessage = z.infer<
   typeof UsersRequestedListMessageSchema
 >;
 
+export const PendingSongRequestsMessageSchema = z.object({
+  type: z.literal(ServerEvents.PENDING_SONG_REQUESTS),
+  payload: z.object({
+    songs: z.array(SongDataSchema),
+  }),
+});
+
+export type PendingSongRequestsMessage = z.infer<
+  typeof PendingSongRequestsMessageSchema
+>;
+
 export const NowPlayingUpdateMessageSchema = z.object({
   type: z.literal(ServerEvents.NOW_PLAYING_UPDATED),
   payload: z.object({
@@ -369,6 +380,7 @@ export const ServerMessageSchema = z.discriminatedUnion("type", [
   UserRejectedMessageSchema,
   UsersRequestedListMessageSchema,
   NowPlayingUpdateMessageSchema,
+  PendingSongRequestsMessageSchema,
 ]);
 
 export type ServerMessage = z.infer<typeof ServerMessageSchema>;

From fdc1930d378c4bc16bd2fc0f3a1fed71d3d1b2d5 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 7 Jun 2026 13:56:23 +0530
Subject: [PATCH 11/20] Refactor WebSocket handlers and improve room management
 functionality

---
 AGENTS.md                                 |   2 +-
 apps/room-server/src/handerFunctions.ts   | 744 +---------------------
 apps/room-server/src/handlers/join.ts     | 115 ++++
 apps/room-server/src/handlers/playback.ts |  59 ++
 apps/room-server/src/handlers/songs.ts    | 206 ++++++
 apps/room-server/src/handlers/users.ts    |  99 +++
 apps/room-server/src/lib/context.ts       |  10 +
 apps/room-server/src/lib/guards.ts        |  27 +
 apps/room-server/src/lib/join-helpers.ts  | 164 +++++
 apps/room-server/src/lib/messaging.ts     |  55 ++
 10 files changed, 747 insertions(+), 734 deletions(-)
 create mode 100644 apps/room-server/src/handlers/join.ts
 create mode 100644 apps/room-server/src/handlers/playback.ts
 create mode 100644 apps/room-server/src/handlers/songs.ts
 create mode 100644 apps/room-server/src/handlers/users.ts
 create mode 100644 apps/room-server/src/lib/context.ts
 create mode 100644 apps/room-server/src/lib/guards.ts
 create mode 100644 apps/room-server/src/lib/join-helpers.ts
 create mode 100644 apps/room-server/src/lib/messaging.ts

diff --git a/AGENTS.md b/AGENTS.md
index f822a34..66aafce 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -94,7 +94,7 @@ Zod schemas and TypeScript types live in:
 
 **When adding or changing WebSocket message types, update both apps and keep constants in sync.**
 
-Server handlers: `apps/room-server/src/handerFunctions.ts` (note the filename spelling).
+Server handlers: `apps/room-server/src/handerFunctions.ts` (router; note the filename spelling). Handler logic lives in `apps/room-server/src/handlers/`; shared helpers in `apps/room-server/src/lib/`.
 
 ## Environment variables
 
diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index 527f300..c8852a9 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -1,736 +1,17 @@
 import type { WebSocket } from "ws";
 import { ClientEvents, ServerEvents } from "./constants";
-import { Room } from "./room";
+import { handleJoinRoom } from "./handlers/join";
+import { handleNextSong, handlePlayCurrentSong } from "./handlers/playback";
 import {
-  IncomingMessageSchema,
-  type ApproveSongMessage,
-  type ApproveUserMessage,
-  type ClientConnection,
-  type IncomingMessage,
-  type JoinRoomMessage,
-  type OutgoingMessage,
-  type RejectUserMessage,
-  type RejectSongMessage,
-  type RequestSongMessage,
-  type UpvoteSongMessage,
-  type UserPayload,
-} from "./types";
-
-const roomCache = new Map<string, Room>();
-const connections = new Map<WebSocket, ClientConnection>();
-
-function send(ws: WebSocket, message: OutgoingMessage) {
-  if (ws.readyState === ws.OPEN) {
-    ws.send(JSON.stringify(message));
-  }
-}
-
-function broadcastToRoom(roomId: string, message: OutgoingMessage) {
-  for (const [, conn] of connections) {
-    if (conn.roomId === roomId && conn.status === "joined") {
-      send(conn.ws, message);
-    }
-  }
-}
-
-function sendToAdmin(roomId: string, room: Room, message: OutgoingMessage) {
-  const adminId = room.getAdminId();
-  for (const [, conn] of connections) {
-    if (conn.roomId === roomId && conn.user?.userId === adminId) {
-      send(conn.ws, message);
-    }
-  }
-}
-
-function sendToUser(userId: string, message: OutgoingMessage) {
-  for (const [, conn] of connections) {
-    if (conn.user?.userId === userId) {
-      send(conn.ws, message);
-    }
-  }
-}
-
-function sendUserLimitReached(ws: WebSocket, maxUsers: number) {
-  send(ws, {
-    type: ServerEvents.ROOM_USER_LIMIT_REACHED,
-    payload: { maxUsers },
-  });
-}
-
-async function sendUserUpvotesUsage(ws: WebSocket, room: Room, userId: string) {
-  const used = await room.getUserUpvoteCount(userId);
-  send(ws, {
-    type: ServerEvents.USER_UPVOTES_USAGE,
-    payload: { used, maxUpvotes: room.getConfig().maxUpvotes },
-  });
-}
-
-type UserPayloadWithWs = UserPayload & { ws: WebSocket };
-
-async function admitUserToRoom(
-  roomId: string,
-  room: Room,
-  user: UserPayloadWithWs,
-) {
-  if (room.isAtUserCapacity(user.userId)) {
-    sendUserLimitReached(user.ws, room.getConfig().maxUsers);
-    return false;
-  }
-
-  connections.set(user.ws, {
-    ws: user.ws,
-    user: {
-      userId: user.userId,
-      username: user.username,
-      email: user.email,
-      isAdmin: user.isAdmin,
-    },
-    roomId,
-    status: "joined",
-  });
-  room.addUser({
-    userId: user.userId,
-    email: user.email,
-    username: user.username,
-    isAdmin: user.isAdmin,
-  });
-  room.removeUserRequest(user.userId);
-
-  const currentSong = await room.getCurrentSong();
-  const queue = await room.loadSongs();
-  const upvotesUsed = await room.getUserUpvoteCount(user.userId);
-
-  send(user.ws, {
-    type: ServerEvents.ROOM_JOINED,
-    payload: {
-      roomId,
-      config: room.getConfig(),
-      upvotesUsed,
-    },
-  });
-
-  broadcastToRoom(roomId, {
-    type: ServerEvents.MEMBERS_UPDATED,
-    payload: { users: room.getUsers() },
-  });
-
-  broadcastToRoom(roomId, {
-    type: ServerEvents.NOW_PLAYING_UPDATED,
-    payload: { song: currentSong ?? null },
-  });
-
-  broadcastToRoom(roomId, {
-    type: ServerEvents.QUEUE_UPDATED,
-    payload: { queue },
-  });
-
-  return true;
-}
-
-async function notifyPendingUsersOnAdminJoin(roomId: string, room: Room) {
-  const pendingUsers = room.getPendingUserRequests();
-
-  for (const pendingUser of pendingUsers) {
-    if (room.isAutoApproveUsers()) {
-      const admitted = await admitUserToRoom(roomId, room, pendingUser);
-      if (!admitted) {
-        room.removeUserRequest(pendingUser.userId);
-      }
-    } else if (!room.isAtUserCapacity(pendingUser.userId)) {
-      send(pendingUser.ws, {
-        type: ServerEvents.ADMIN_JOINED,
-        payload: {},
-      });
-    } else {
-      sendUserLimitReached(pendingUser.ws, room.getConfig().maxUsers);
-      room.removeUserRequest(pendingUser.userId);
-    }
-  }
-}
-
-async function sendQueueUpdate(roomId: string, room: Room) {
-  const queue = await room.loadSongs();
-  broadcastToRoom(roomId, {
-    type: ServerEvents.QUEUE_UPDATED,
-    payload: { queue },
-  });
-}
-
-function sendPendingListToAdmin(roomId: string, room: Room) {
-  sendToAdmin(roomId, room, {
-    type: ServerEvents.PENDING_JOIN_REQUESTS,
-    payload: { users: room.getUsersRequestedList() },
-  });
-}
-
-async function getRoom(roomId: string): Promise<Room | null> {
-  return roomCache.get(roomId) ?? null;
-}
-
-async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
-  const { roomId, user } = msg.payload;
-
-  // Idempotency: if this socket is already joined for the same room+user, just
-  // resend authoritative state instead of resetting the connection to pending.
-  const existing = connections.get(ws);
-  if (
-    existing?.status === "joined" &&
-    existing.roomId === roomId &&
-    existing.user?.userId === user.userId
-  ) {
-    const cachedRoom = roomCache.get(roomId);
-    if (cachedRoom) {
-      const currentSong = await cachedRoom.getCurrentSong();
-      const queue = await cachedRoom.loadSongs();
-      const upvotesUsed = await cachedRoom.getUserUpvoteCount(user.userId);
-      send(ws, {
-        type: ServerEvents.ROOM_JOINED,
-        payload: { roomId, config: cachedRoom.getConfig(), upvotesUsed },
-      });
-      send(ws, {
-        type: ServerEvents.MEMBERS_UPDATED,
-        payload: { users: cachedRoom.getUsers() },
-      });
-      send(ws, {
-        type: ServerEvents.NOW_PLAYING_UPDATED,
-        payload: { song: currentSong ?? null },
-      });
-      send(ws, {
-        type: ServerEvents.QUEUE_UPDATED,
-        payload: { queue },
-      });
-    }
-    return;
-  }
-
-  let room: Room | null = roomCache.get(roomId) ?? null;
-  if (!room) {
-    room = await Room.find(roomId);
-    if (!room) {
-      send(ws, {
-        type: ServerEvents.ERROR,
-        payload: { message: "Room not found" },
-      });
-      connections.delete(ws);
-      return;
-    }
-    roomCache.set(roomId, room);
-  }
-
-  connections.set(ws, { ws, user, roomId, status: "pending" });
-
-  if (user.userId === room.getAdminId()) {
-    room.setAdminStatus(true);
-    broadcastToRoom(roomId, {
-      type: ServerEvents.ADMIN_JOINED,
-      payload: {},
-    });
-
-    await notifyPendingUsersOnAdminJoin(roomId, room);
-
-    // send list of users requested to join
-    const userRequests = room.getUsersRequestedList();
-    if (userRequests.length > 0) {
-      send(ws, {
-        type: ServerEvents.PENDING_JOIN_REQUESTS,
-        payload: { users: userRequests },
-      });
-    }
-
-    // send backlog of songs pending admin approval
-    const requestedSongs = await room.loadRequestedSongs();
-    if (requestedSongs.length > 0) {
-      send(ws, {
-        type: ServerEvents.PENDING_SONG_REQUESTS,
-        payload: { songs: requestedSongs },
-      });
-    }
-  } else {
-    if (room.isAtUserCapacity(user.userId)) {
-      sendUserLimitReached(ws, room.getConfig().maxUsers);
-      return;
-    }
-
-    if (!room.isAdminJoined()) {
-      // send message to user that admin has not joined yet
-      send(ws, {
-        type: ServerEvents.WAITING_FOR_ADMIN,
-        payload: {},
-      });
-
-      room.addUserRequest(user, ws);
-      return;
-    }
-    if (!room.isAutoApproveUsers()) {
-      if (room.checkUserRequestedAlready(user.userId)) {
-        // send message to user that request is already sent
-        send(ws, {
-          type: ServerEvents.JOIN_ALREADY_PENDING,
-          payload: {},
-        });
-        return;
-      }
-
-      room.addUserRequest(user, ws);
-
-      // send to admin for approval
-      sendToAdmin(roomId, room, {
-        type: ServerEvents.USER_JOIN_REQUESTED,
-        payload: {
-          userId: user.userId,
-          username: user.username,
-        },
-      });
-      return;
-    }
-  }
-
-  connections.get(ws)!.status = "joined";
-  room.addUser(user);
-
-  const currentSong = await room.getCurrentSong();
-  const queue = await room.loadSongs();
-  const upvotesUsed = await room.getUserUpvoteCount(user.userId);
-
-  // send joined room message to self
-  send(ws, {
-    type: ServerEvents.ROOM_JOINED,
-    payload: {
-      roomId,
-      config: room.getConfig(),
-      upvotesUsed,
-    },
-  });
-
-  // send list users message to all users in room
-  broadcastToRoom(roomId, {
-    type: ServerEvents.MEMBERS_UPDATED,
-    payload: { users: room.getUsers() },
-  });
-
-  broadcastToRoom(roomId, {
-    type: ServerEvents.NOW_PLAYING_UPDATED,
-    payload: { song: currentSong ?? null },
-  });
-
-  broadcastToRoom(roomId, {
-    type: ServerEvents.QUEUE_UPDATED,
-    payload: { queue },
-  });
-}
-
-async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  // check if user is admin
-  if (!conn.user.isAdmin) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "User is not admin" },
-    });
-  }
-
-  // get room
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  // remove from the user requested list
-  room.removeUserRequest(msg.payload.userId);
-
-  // send to user that request is rejected
-  sendToUser(msg.payload.userId, {
-    type: ServerEvents.USER_REJECTED,
-    payload: {
-      roomId: conn.roomId,
-      message: "Your entry request was rejected by the admin.",
-    },
-  });
-
-  // push authoritative pending list back to admin so all tabs are in sync
-  sendPendingListToAdmin(conn.roomId, room);
-}
-
-async function handleApproveUser(ws: WebSocket, msg: ApproveUserMessage) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  // check if user is admin
-  if (!conn.user.isAdmin) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "User is not admin" },
-    });
-  }
-
-  // get the user from requested list
-  const user = room.getUserRequested(msg.payload.userId);
-  if (!user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "User not found in requested list" },
-    });
-  }
-
-  if (room.isAtUserCapacity(user.userId)) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: {
-        message: `Room is full (${room.getConfig().maxUsers} users max)`,
-      },
-    });
-  }
-
-  const admitted = await admitUserToRoom(conn.roomId, room, user);
-  if (!admitted) {
-    send(ws, {
-      type: ServerEvents.ERROR,
-      payload: {
-        message: `Room is full (${room.getConfig().maxUsers} users max)`,
-      },
-    });
-    return;
-  }
-
-  // push authoritative pending list back to admin so all tabs are in sync
-  sendPendingListToAdmin(conn.roomId, room);
-}
-
-async function handleRequestSong(ws: WebSocket, msg: RequestSongMessage) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  const result = await room.requestSong(msg.payload.song, conn.user.userId);
-
-  if (result === "duplicate") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: {
-        message: "This song is already in the queue or pending approval",
-      },
-    });
-  }
-
-  const songData = result;
-
-  if (room.isAutoApproveSongs()) {
-    await sendQueueUpdate(conn.roomId, room);
-    // Start playback if nothing is currently playing
-    const currentSong = await room.getCurrentSong();
-    if (!currentSong) {
-      const next = await room.playNextSong();
-      broadcastToRoom(conn.roomId, {
-        type: ServerEvents.NOW_PLAYING_UPDATED,
-        payload: { song: next ?? null },
-      });
-    }
-  } else {
-    send(conn.ws, {
-      type: ServerEvents.SONG_REQUEST_SUBMITTED,
-      payload: { song: songData },
-    });
-    sendToAdmin(conn.roomId, room, {
-      type: ServerEvents.SONG_REQUESTED,
-      payload: { song: songData },
-    });
-  }
-}
-
-async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  if (msg.payload.userId !== conn.user.userId) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Invalid upvote user" },
-    });
-  }
-
-  const result = await room.upvote(msg.payload.songId, conn.user.userId);
-  if (result === "success") {
-    await sendUserUpvotesUsage(ws, room, conn.user.userId);
-    return await sendQueueUpdate(conn.roomId, room);
-  }
-
-  if (result === "upvote_limit_reached") {
-    return send(ws, {
-      type: ServerEvents.ROOM_UPVOTE_LIMIT_REACHED,
-      payload: { maxUpvotes: room.getConfig().maxUpvotes },
-    });
-  }
-
-  if (result === "already_upvoted") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have already upvoted this song in this room" },
-    });
-  }
-
-  return send(ws, {
-    type: ServerEvents.ERROR,
-    payload: { message: "Song not found in queue" },
-  });
-}
-
-async function handleApproveSong(ws: WebSocket, msg: ApproveSongMessage) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  if (conn.user.userId !== room.getAdminId()) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Only admin can approve songs" },
-    });
-  }
-
-  const success = await room.approveSong(msg.payload.songId);
-  if (!success) {
-    send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Song not found in requests" },
-    });
-    return;
-  }
-
-  broadcastToRoom(conn.roomId, {
-    type: ServerEvents.SONG_APPROVED,
-    payload: { songId: msg.payload.songId },
-  });
-
-  // Start playback only if nothing is currently playing
-  let currentSong = await room.getCurrentSong();
-  if (!currentSong) {
-    currentSong = await room.playNextSong();
-    broadcastToRoom(conn.roomId, {
-      type: ServerEvents.NOW_PLAYING_UPDATED,
-      payload: { song: currentSong ?? null },
-    });
-  }
-
-  await sendQueueUpdate(conn.roomId, room);
-}
-
-async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  if (conn.user.userId !== room.getAdminId()) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Only admin can reject songs" },
-    });
-  }
-
-  const success = await room.rejectSong(msg.payload.songId);
-  if (success) {
-    broadcastToRoom(conn.roomId, {
-      type: ServerEvents.SONG_REJECTED,
-      payload: {
-        songId: success.id,
-        name: success.name,
-        artist: success.artist,
-        requestedByUserId: success.requestedByUserId,
-      },
-    });
-  } else {
-    send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Song not found in requests" },
-    });
-  }
-}
-
-async function handleNextSong(ws: WebSocket) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  if (conn.user.userId !== room.getAdminId()) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Only admin can skip to next song" },
-    });
-  }
-
-  const song = await room.playNextSong();
-
-  broadcastToRoom(conn.roomId, {
-    type: ServerEvents.NOW_PLAYING_UPDATED,
-    payload: { song: song ?? null },
-  });
-
-  await sendQueueUpdate(conn.roomId, room);
-}
-
-async function handlePlayCurrentSong(ws: WebSocket) {
-  const conn = connections.get(ws);
-  if (!conn || !conn.user) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Not in a room" },
-    });
-  }
-
-  if (conn.status !== "joined") {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "You have not joined this room yet" },
-    });
-  }
-
-  const room = await getRoom(conn.roomId);
-  if (!room) {
-    return send(ws, {
-      type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
-    });
-  }
-
-  // Read-only resync: broadcast the current PLAYING song without promoting queue
-  const song = await room.getCurrentSong();
-
-  broadcastToRoom(conn.roomId, {
-    type: ServerEvents.NOW_PLAYING_UPDATED,
-    payload: { song: song ?? null },
-  });
-}
+  handleApproveSong,
+  handleRejectSong,
+  handleRequestSong,
+  handleUpvote,
+} from "./handlers/songs";
+import { handleApproveUser, handleRejectUser } from "./handlers/users";
+import { connections, roomCache } from "./lib/context";
+import { broadcastToRoom, send } from "./lib/messaging";
+import { IncomingMessageSchema, type IncomingMessage } from "./types";
 
 export async function handleMessage(ws: WebSocket, raw: string) {
   let msg: IncomingMessage;
@@ -789,11 +70,9 @@ export function handleDisconnect(ws: WebSocket) {
   const room = roomCache.get(conn.roomId);
   if (!room) return;
 
-  // check if admin left
   if (conn.user.isAdmin) {
     room.setAdminStatus(false);
 
-    // TODO: notify other users that admin left
     broadcastToRoom(conn.roomId, {
       type: ServerEvents.ADMIN_LEFT,
       payload: {},
@@ -811,7 +90,6 @@ export function handleDisconnect(ws: WebSocket) {
     payload: { users: room.getUsers() },
   });
 
-  // Evict room from cache when no connections remain to free memory
   const hasRemaining = Array.from(connections.values()).some(
     (c) => c.roomId === conn.roomId,
   );
diff --git a/apps/room-server/src/handlers/join.ts b/apps/room-server/src/handlers/join.ts
new file mode 100644
index 0000000..84ae14c
--- /dev/null
+++ b/apps/room-server/src/handlers/join.ts
@@ -0,0 +1,115 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import { connections, roomCache } from "../lib/context";
+import {
+  completeDirectJoin,
+  notifyPendingUsersOnAdminJoin,
+  sendJoinedSnapshotToClient,
+} from "../lib/join-helpers";
+import {
+  broadcastToRoom,
+  send,
+  sendToAdmin,
+  sendUserLimitReached,
+} from "../lib/messaging";
+import { Room } from "../room";
+import type { JoinRoomMessage } from "../types";
+
+export async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
+  const { roomId, user } = msg.payload;
+
+  const existing = connections.get(ws);
+  if (
+    existing?.status === "joined" &&
+    existing.roomId === roomId &&
+    existing.user?.userId === user.userId
+  ) {
+    const cachedRoom = roomCache.get(roomId);
+    if (cachedRoom) {
+      await sendJoinedSnapshotToClient(ws, roomId, cachedRoom, user.userId);
+    }
+    return;
+  }
+
+  let room: Room | null = roomCache.get(roomId) ?? null;
+  if (!room) {
+    room = await Room.find(roomId);
+    if (!room) {
+      send(ws, {
+        type: ServerEvents.ERROR,
+        payload: { message: "Room not found" },
+      });
+      connections.delete(ws);
+      return;
+    }
+    roomCache.set(roomId, room);
+  }
+
+  connections.set(ws, { ws, user, roomId, status: "pending" });
+
+  if (user.userId === room.getAdminId()) {
+    room.setAdminStatus(true);
+    broadcastToRoom(roomId, {
+      type: ServerEvents.ADMIN_JOINED,
+      payload: {},
+    });
+
+    await notifyPendingUsersOnAdminJoin(roomId, room);
+
+    const userRequests = room.getUsersRequestedList();
+    if (userRequests.length > 0) {
+      send(ws, {
+        type: ServerEvents.PENDING_JOIN_REQUESTS,
+        payload: { users: userRequests },
+      });
+    }
+
+    const requestedSongs = await room.loadRequestedSongs();
+    if (requestedSongs.length > 0) {
+      send(ws, {
+        type: ServerEvents.PENDING_SONG_REQUESTS,
+        payload: { songs: requestedSongs },
+      });
+    }
+  } else {
+    if (room.isAtUserCapacity(user.userId)) {
+      sendUserLimitReached(ws, room.getConfig().maxUsers);
+      return;
+    }
+
+    if (!room.isAdminJoined()) {
+      send(ws, {
+        type: ServerEvents.WAITING_FOR_ADMIN,
+        payload: {},
+      });
+
+      room.addUserRequest(user, ws);
+      return;
+    }
+    if (!room.isAutoApproveUsers()) {
+      if (room.checkUserRequestedAlready(user.userId)) {
+        send(ws, {
+          type: ServerEvents.JOIN_ALREADY_PENDING,
+          payload: {},
+        });
+        return;
+      }
+
+      room.addUserRequest(user, ws);
+
+      sendToAdmin(roomId, room, {
+        type: ServerEvents.USER_JOIN_REQUESTED,
+        payload: {
+          userId: user.userId,
+          username: user.username,
+        },
+      });
+      return;
+    }
+  }
+
+  connections.get(ws)!.status = "joined";
+  room.addUser(user);
+
+  await completeDirectJoin(ws, roomId, room, user.userId);
+}
diff --git a/apps/room-server/src/handlers/playback.ts b/apps/room-server/src/handlers/playback.ts
new file mode 100644
index 0000000..d2ac116
--- /dev/null
+++ b/apps/room-server/src/handlers/playback.ts
@@ -0,0 +1,59 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import { getRoom } from "../lib/context";
+import { getJoinedConnection } from "../lib/guards";
+import { sendQueueUpdate } from "../lib/join-helpers";
+import { broadcastToRoom, send } from "../lib/messaging";
+
+export async function handleNextSong(ws: WebSocket) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  if (conn.user!.userId !== room.getAdminId()) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Only admin can skip to next song" },
+    });
+  }
+
+  const song = await room.playNextSong();
+
+  broadcastToRoom(conn.roomId, {
+    type: ServerEvents.NOW_PLAYING_UPDATED,
+    payload: { song: song ?? null },
+  });
+
+  await sendQueueUpdate(conn.roomId, room);
+}
+
+export async function handlePlayCurrentSong(ws: WebSocket) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  const song = await room.getCurrentSong();
+
+  broadcastToRoom(conn.roomId, {
+    type: ServerEvents.NOW_PLAYING_UPDATED,
+    payload: { song: song ?? null },
+  });
+}
diff --git a/apps/room-server/src/handlers/songs.ts b/apps/room-server/src/handlers/songs.ts
new file mode 100644
index 0000000..739be9c
--- /dev/null
+++ b/apps/room-server/src/handlers/songs.ts
@@ -0,0 +1,206 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import { getRoom } from "../lib/context";
+import { getJoinedConnection } from "../lib/guards";
+import { sendQueueUpdate } from "../lib/join-helpers";
+import {
+  broadcastToRoom,
+  send,
+  sendToAdmin,
+  sendUserUpvotesUsage,
+} from "../lib/messaging";
+import type {
+  ApproveSongMessage,
+  RejectSongMessage,
+  RequestSongMessage,
+  UpvoteSongMessage,
+} from "../types";
+
+export async function handleRequestSong(
+  ws: WebSocket,
+  msg: RequestSongMessage,
+) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  const result = await room.requestSong(msg.payload.song, conn.user!.userId);
+
+  if (result === "duplicate") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: {
+        message: "This song is already in the queue or pending approval",
+      },
+    });
+  }
+
+  const songData = result;
+
+  if (room.isAutoApproveSongs()) {
+    await sendQueueUpdate(conn.roomId, room);
+    const currentSong = await room.getCurrentSong();
+    if (!currentSong) {
+      const next = await room.playNextSong();
+      broadcastToRoom(conn.roomId, {
+        type: ServerEvents.NOW_PLAYING_UPDATED,
+        payload: { song: next ?? null },
+      });
+    }
+  } else {
+    send(conn.ws, {
+      type: ServerEvents.SONG_REQUEST_SUBMITTED,
+      payload: { song: songData },
+    });
+    sendToAdmin(conn.roomId, room, {
+      type: ServerEvents.SONG_REQUESTED,
+      payload: { song: songData },
+    });
+  }
+}
+
+export async function handleUpvote(ws: WebSocket, msg: UpvoteSongMessage) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  if (msg.payload.userId !== conn.user!.userId) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Invalid upvote user" },
+    });
+  }
+
+  const result = await room.upvote(msg.payload.songId, conn.user!.userId);
+  if (result === "success") {
+    await sendUserUpvotesUsage(ws, room, conn.user!.userId);
+    return await sendQueueUpdate(conn.roomId, room);
+  }
+
+  if (result === "upvote_limit_reached") {
+    return send(ws, {
+      type: ServerEvents.ROOM_UPVOTE_LIMIT_REACHED,
+      payload: { maxUpvotes: room.getConfig().maxUpvotes },
+    });
+  }
+
+  if (result === "already_upvoted") {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "You have already upvoted this song in this room" },
+    });
+  }
+
+  return send(ws, {
+    type: ServerEvents.ERROR,
+    payload: { message: "Song not found in queue" },
+  });
+}
+
+export async function handleApproveSong(
+  ws: WebSocket,
+  msg: ApproveSongMessage,
+) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  if (conn.user!.userId !== room.getAdminId()) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Only admin can approve songs" },
+    });
+  }
+
+  const success = await room.approveSong(msg.payload.songId);
+  if (!success) {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Song not found in requests" },
+    });
+    return;
+  }
+
+  broadcastToRoom(conn.roomId, {
+    type: ServerEvents.SONG_APPROVED,
+    payload: { songId: msg.payload.songId },
+  });
+
+  let currentSong = await room.getCurrentSong();
+  if (!currentSong) {
+    currentSong = await room.playNextSong();
+    broadcastToRoom(conn.roomId, {
+      type: ServerEvents.NOW_PLAYING_UPDATED,
+      payload: { song: currentSong ?? null },
+    });
+  }
+
+  await sendQueueUpdate(conn.roomId, room);
+}
+
+export async function handleRejectSong(ws: WebSocket, msg: RejectSongMessage) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  if (conn.user!.userId !== room.getAdminId()) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Only admin can reject songs" },
+    });
+  }
+
+  const success = await room.rejectSong(msg.payload.songId);
+  if (success) {
+    broadcastToRoom(conn.roomId, {
+      type: ServerEvents.SONG_REJECTED,
+      payload: {
+        songId: success.id,
+        name: success.name,
+        artist: success.artist,
+        requestedByUserId: success.requestedByUserId,
+      },
+    });
+  } else {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Song not found in requests" },
+    });
+  }
+}
diff --git a/apps/room-server/src/handlers/users.ts b/apps/room-server/src/handlers/users.ts
new file mode 100644
index 0000000..aee8492
--- /dev/null
+++ b/apps/room-server/src/handlers/users.ts
@@ -0,0 +1,99 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import { getRoom } from "../lib/context";
+import { getJoinedConnection } from "../lib/guards";
+import {
+  admitUserToRoom,
+  sendPendingListToAdmin,
+} from "../lib/join-helpers";
+import { send, sendToUser } from "../lib/messaging";
+import type { ApproveUserMessage, RejectUserMessage } from "../types";
+
+export async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  if (!conn.user!.isAdmin) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "User is not admin" },
+    });
+  }
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  room.removeUserRequest(msg.payload.userId);
+
+  sendToUser(msg.payload.userId, {
+    type: ServerEvents.USER_REJECTED,
+    payload: {
+      roomId: conn.roomId,
+      message: "Your entry request was rejected by the admin.",
+    },
+  });
+
+  sendPendingListToAdmin(conn.roomId, room);
+}
+
+export async function handleApproveUser(
+  ws: WebSocket,
+  msg: ApproveUserMessage,
+) {
+  const ctx = getJoinedConnection(ws);
+  if (!ctx) return;
+
+  const { conn } = ctx;
+
+  const room = getRoom(conn.roomId);
+  if (!room) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Room not found" },
+    });
+  }
+
+  if (!conn.user!.isAdmin) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "User is not admin" },
+    });
+  }
+
+  const user = room.getUserRequested(msg.payload.userId);
+  if (!user) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "User not found in requested list" },
+    });
+  }
+
+  if (room.isAtUserCapacity(user.userId)) {
+    return send(ws, {
+      type: ServerEvents.ERROR,
+      payload: {
+        message: `Room is full (${room.getConfig().maxUsers} users max)`,
+      },
+    });
+  }
+
+  const admitted = await admitUserToRoom(conn.roomId, room, user);
+  if (!admitted) {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: {
+        message: `Room is full (${room.getConfig().maxUsers} users max)`,
+      },
+    });
+    return;
+  }
+
+  sendPendingListToAdmin(conn.roomId, room);
+}
diff --git a/apps/room-server/src/lib/context.ts b/apps/room-server/src/lib/context.ts
new file mode 100644
index 0000000..c499eca
--- /dev/null
+++ b/apps/room-server/src/lib/context.ts
@@ -0,0 +1,10 @@
+import type { WebSocket } from "ws";
+import { Room } from "../room";
+import type { ClientConnection } from "../types";
+
+export const roomCache = new Map<string, Room>();
+export const connections = new Map<WebSocket, ClientConnection>();
+
+export function getRoom(roomId: string): Room | null {
+  return roomCache.get(roomId) ?? null;
+}
diff --git a/apps/room-server/src/lib/guards.ts b/apps/room-server/src/lib/guards.ts
new file mode 100644
index 0000000..3b2d2e3
--- /dev/null
+++ b/apps/room-server/src/lib/guards.ts
@@ -0,0 +1,27 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import type { ClientConnection } from "../types";
+import { connections } from "./context";
+import { send } from "./messaging";
+
+export type HandlerContext = {
+  ws: WebSocket;
+  conn: ClientConnection;
+};
+
+function sendError(ws: WebSocket, message: string) {
+  send(ws, { type: ServerEvents.ERROR, payload: { message } });
+}
+
+export function getJoinedConnection(ws: WebSocket): HandlerContext | null {
+  const conn = connections.get(ws);
+  if (!conn || !conn.user) {
+    sendError(ws, "Not in a room");
+    return null;
+  }
+  if (conn.status !== "joined") {
+    sendError(ws, "You have not joined this room yet");
+    return null;
+  }
+  return { ws, conn };
+}
diff --git a/apps/room-server/src/lib/join-helpers.ts b/apps/room-server/src/lib/join-helpers.ts
new file mode 100644
index 0000000..5dce11b
--- /dev/null
+++ b/apps/room-server/src/lib/join-helpers.ts
@@ -0,0 +1,164 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import type { Room } from "../room";
+import type { UserPayload } from "../types";
+import { connections } from "./context";
+import {
+  broadcastToRoom,
+  send,
+  sendToAdmin,
+  sendUserLimitReached,
+} from "./messaging";
+
+export type UserPayloadWithWs = UserPayload & { ws: WebSocket };
+
+export async function sendQueueUpdate(roomId: string, room: Room) {
+  const queue = await room.loadSongs();
+  broadcastToRoom(roomId, {
+    type: ServerEvents.QUEUE_UPDATED,
+    payload: { queue },
+  });
+}
+
+export function sendPendingListToAdmin(roomId: string, room: Room) {
+  sendToAdmin(roomId, room, {
+    type: ServerEvents.PENDING_JOIN_REQUESTS,
+    payload: { users: room.getUsersRequestedList() },
+  });
+}
+
+async function broadcastRoomSnapshot(roomId: string, room: Room) {
+  const currentSong = await room.getCurrentSong();
+  const queue = await room.loadSongs();
+
+  broadcastToRoom(roomId, {
+    type: ServerEvents.MEMBERS_UPDATED,
+    payload: { users: room.getUsers() },
+  });
+
+  broadcastToRoom(roomId, {
+    type: ServerEvents.NOW_PLAYING_UPDATED,
+    payload: { song: currentSong ?? null },
+  });
+
+  broadcastToRoom(roomId, {
+    type: ServerEvents.QUEUE_UPDATED,
+    payload: { queue },
+  });
+}
+
+export async function sendJoinedSnapshotToClient(
+  ws: WebSocket,
+  roomId: string,
+  room: Room,
+  userId: string,
+) {
+  const currentSong = await room.getCurrentSong();
+  const queue = await room.loadSongs();
+  const upvotesUsed = await room.getUserUpvoteCount(userId);
+
+  send(ws, {
+    type: ServerEvents.ROOM_JOINED,
+    payload: { roomId, config: room.getConfig(), upvotesUsed },
+  });
+  send(ws, {
+    type: ServerEvents.MEMBERS_UPDATED,
+    payload: { users: room.getUsers() },
+  });
+  send(ws, {
+    type: ServerEvents.NOW_PLAYING_UPDATED,
+    payload: { song: currentSong ?? null },
+  });
+  send(ws, {
+    type: ServerEvents.QUEUE_UPDATED,
+    payload: { queue },
+  });
+}
+
+export async function admitUserToRoom(
+  roomId: string,
+  room: Room,
+  user: UserPayloadWithWs,
+) {
+  if (room.isAtUserCapacity(user.userId)) {
+    sendUserLimitReached(user.ws, room.getConfig().maxUsers);
+    return false;
+  }
+
+  connections.set(user.ws, {
+    ws: user.ws,
+    user: {
+      userId: user.userId,
+      username: user.username,
+      email: user.email,
+      isAdmin: user.isAdmin,
+    },
+    roomId,
+    status: "joined",
+  });
+  room.addUser({
+    userId: user.userId,
+    email: user.email,
+    username: user.username,
+    isAdmin: user.isAdmin,
+  });
+  room.removeUserRequest(user.userId);
+
+  const upvotesUsed = await room.getUserUpvoteCount(user.userId);
+
+  send(user.ws, {
+    type: ServerEvents.ROOM_JOINED,
+    payload: {
+      roomId,
+      config: room.getConfig(),
+      upvotesUsed,
+    },
+  });
+
+  await broadcastRoomSnapshot(roomId, room);
+  return true;
+}
+
+export async function notifyPendingUsersOnAdminJoin(
+  roomId: string,
+  room: Room,
+) {
+  const pendingUsers = room.getPendingUserRequests();
+
+  for (const pendingUser of pendingUsers) {
+    if (room.isAutoApproveUsers()) {
+      const admitted = await admitUserToRoom(roomId, room, pendingUser);
+      if (!admitted) {
+        room.removeUserRequest(pendingUser.userId);
+      }
+    } else if (!room.isAtUserCapacity(pendingUser.userId)) {
+      send(pendingUser.ws, {
+        type: ServerEvents.ADMIN_JOINED,
+        payload: {},
+      });
+    } else {
+      sendUserLimitReached(pendingUser.ws, room.getConfig().maxUsers);
+      room.removeUserRequest(pendingUser.userId);
+    }
+  }
+}
+
+export async function completeDirectJoin(
+  ws: WebSocket,
+  roomId: string,
+  room: Room,
+  userId: string,
+) {
+  const upvotesUsed = await room.getUserUpvoteCount(userId);
+
+  send(ws, {
+    type: ServerEvents.ROOM_JOINED,
+    payload: {
+      roomId,
+      config: room.getConfig(),
+      upvotesUsed,
+    },
+  });
+
+  await broadcastRoomSnapshot(roomId, room);
+}
diff --git a/apps/room-server/src/lib/messaging.ts b/apps/room-server/src/lib/messaging.ts
new file mode 100644
index 0000000..554d21b
--- /dev/null
+++ b/apps/room-server/src/lib/messaging.ts
@@ -0,0 +1,55 @@
+import type { WebSocket } from "ws";
+import { ServerEvents } from "../constants";
+import type { Room } from "../room";
+import type { OutgoingMessage } from "../types";
+import { connections } from "./context";
+
+export function send(ws: WebSocket, message: OutgoingMessage) {
+  if (ws.readyState === ws.OPEN) {
+    ws.send(JSON.stringify(message));
+  }
+}
+
+export function broadcastToRoom(roomId: string, message: OutgoingMessage) {
+  for (const [, conn] of connections) {
+    if (conn.roomId === roomId && conn.status === "joined") {
+      send(conn.ws, message);
+    }
+  }
+}
+
+export function sendToAdmin(roomId: string, room: Room, message: OutgoingMessage) {
+  const adminId = room.getAdminId();
+  for (const [, conn] of connections) {
+    if (conn.roomId === roomId && conn.user?.userId === adminId) {
+      send(conn.ws, message);
+    }
+  }
+}
+
+export function sendToUser(userId: string, message: OutgoingMessage) {
+  for (const [, conn] of connections) {
+    if (conn.user?.userId === userId) {
+      send(conn.ws, message);
+    }
+  }
+}
+
+export function sendUserLimitReached(ws: WebSocket, maxUsers: number) {
+  send(ws, {
+    type: ServerEvents.ROOM_USER_LIMIT_REACHED,
+    payload: { maxUsers },
+  });
+}
+
+export async function sendUserUpvotesUsage(
+  ws: WebSocket,
+  room: Room,
+  userId: string,
+) {
+  const used = await room.getUserUpvoteCount(userId);
+  send(ws, {
+    type: ServerEvents.USER_UPVOTES_USAGE,
+    payload: { used, maxUpvotes: room.getConfig().maxUpvotes },
+  });
+}

From 33c88306a36ff797ec970c5b31983b0ed189ec12 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 7 Jun 2026 20:40:57 +0530
Subject: [PATCH 12/20] Enhance Spotify player functionality with repeat mode
 support

- Introduced repeat mode handling in the SpotifyWebPlayer component, allowing users to toggle between repeat states (off, track, context).
- Updated state management to track the current repeat mode and reflect changes in the UI.
- Improved error handling for repeat mode updates and adjusted button styles based on repeat state.
- Refactored related functions to streamline repeat mode logic and enhance overall player experience.
---
 .../[code]/_components/spotify-player.tsx     | 72 ++++++++++++++++---
 1 file changed, 62 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/room/[code]/_components/spotify-player.tsx b/apps/web/app/room/[code]/_components/spotify-player.tsx
index ea22eae..60f0dfb 100644
--- a/apps/web/app/room/[code]/_components/spotify-player.tsx
+++ b/apps/web/app/room/[code]/_components/spotify-player.tsx
@@ -12,8 +12,13 @@ import {
   Pause,
   ChevronRight,
   Repeat,
+  Repeat1,
 } from "lucide-react";
 
+/** SDK repeat_mode: 0 = off, 1 = context, 2 = track */
+type SdkRepeatMode = 0 | 1 | 2;
+type RepeatApiState = "off" | "track" | "context";
+
 type SpotifyPlayer = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   addListener: (event: string, cb: (arg: any) => void) => void;
@@ -64,6 +69,7 @@ type Props = {
 type ExtendedPlaybackState = SpotifyPlaybackState & {
   position: number;
   duration: number;
+  repeat_mode: SdkRepeatMode;
 };
 
 function reportPlayerError(
@@ -119,6 +125,7 @@ export default function SpotifyWebPlayer({
   const [isPaused, setPaused] = useState(false);
   const [isActive, setActive] = useState(false);
   const [currentTrack, setCurrentTrack] = useState<SpotifyTrack | null>(null);
+  const [repeatMode, setRepeatMode] = useState<SdkRepeatMode>(0);
   const lastEndedTrackIdRef = useRef<string | null>(null);
   const endOfTrackDebounceRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -127,11 +134,14 @@ export default function SpotifyWebPlayer({
   onReadyRef.current = onReady;
   onSongEndRef.current = onSongEnd;
 
-  const stopRepeat = useCallback(async () => {
+  const setRepeat = useCallback(async (state: RepeatApiState): Promise<boolean> => {
+    const deviceId = deviceIdRef.current;
+    if (!deviceId) return false;
+
     const fresh = await fetchFreshToken();
     const accessToken = fresh ?? tokenRef.current;
-    await fetch(
-      `https://api.spotify.com/v1/me/player/repeat?state=off&device_id=${deviceIdRef.current}`,
+    const response = await fetch(
+      `https://api.spotify.com/v1/me/player/repeat?state=${state}&device_id=${deviceId}`,
       {
         method: "PUT",
         headers: {
@@ -140,8 +150,24 @@ export default function SpotifyWebPlayer({
         },
       },
     );
+
+    if (!response.ok) {
+      reportPlayerError(
+        "Failed to update repeat mode.",
+        undefined,
+        "spotify-player-repeat-error",
+      );
+      return false;
+    }
+
+    return true;
   }, []);
 
+  const toggleRepeat = useCallback(async () => {
+    const nextState: RepeatApiState = repeatMode === 0 ? "track" : "off";
+    await setRepeat(nextState);
+  }, [repeatMode, setRepeat]);
+
   const play = useCallback(async () => {
     const currentNowPlayingUrl = nowPlayingUrlRef.current;
     if (!currentNowPlayingUrl) {
@@ -172,11 +198,11 @@ export default function SpotifyWebPlayer({
         undefined,
         "spotify-player-play-error",
       );
+      return;
     }
 
-    // Disable repeat
-    await stopRepeat();
-  }, [stopRepeat]);
+    await setRepeat("off");
+  }, [setRepeat]);
 
   async function activateDevice(deviceId: string) {
     const fresh = await fetchFreshToken();
@@ -249,12 +275,15 @@ export default function SpotifyWebPlayer({
           return;
         }
 
-        const { paused, position, track_window } = s;
+        const { paused, position, track_window, repeat_mode } = s;
         const { previous_tracks, current_track } = track_window;
 
+        setRepeatMode(repeat_mode ?? 0);
+
         console.log("[SpotifyPlayer] Player state changed:", {
           paused,
           position,
+          repeat_mode,
           track_window,
           previous_tracks,
           current_track,
@@ -400,11 +429,34 @@ export default function SpotifyWebPlayer({
             <Button
               size="icon"
               variant="secondary"
-              className="w-12 h-12 rounded-full bg-background/80 hover:bg-muted text-muted-foreground hover:text-foreground shrink-0 shadow-xs"
+              className={`w-12 h-12 rounded-full shrink-0 shadow-xs ${
+                repeatMode !== 0
+                  ? "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary"
+                  : "bg-background/80 hover:bg-muted text-muted-foreground hover:text-foreground"
+              }`}
               type="button"
-              onClick={() => stopRepeat()}
+              title={
+                repeatMode === 2
+                  ? "Repeat track on — click to turn off"
+                  : repeatMode === 1
+                    ? "Repeat context on — click to turn off"
+                    : "Repeat off — click to repeat track"
+              }
+              aria-label={
+                repeatMode === 2
+                  ? "Repeat track on"
+                  : repeatMode === 1
+                    ? "Repeat context on"
+                    : "Repeat off"
+              }
+              aria-pressed={repeatMode !== 0}
+              onClick={() => toggleRepeat()}
             >
-              <Repeat className="w-5 h-5" />
+              {repeatMode === 2 ? (
+                <Repeat1 className="w-5 h-5" />
+              ) : (
+                <Repeat className="w-5 h-5" />
+              )}
             </Button>
           </div>
 

From d85adb54366dc536cd57f7b4e1ed22a4c0d9816f Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Mon, 8 Jun 2026 21:48:31 +0530
Subject: [PATCH 13/20] Refactor sign-out functionality and improve session
 handling in Navbar component

- Removed the sign-out button from the LandingPage component.
- Integrated sign-out functionality into the Navbar component, utilizing the useSession hook to conditionally render the button based on user session state.
- Enhanced sign-out process to redirect users to the homepage upon successful sign-out.
---
 apps/web/app/_components/_client.tsx |  2 --
 apps/web/components/navbar.tsx       | 22 ++++++++++++++++++++++
 apps/web/lib/auth-client.ts          |  9 +++++----
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/_components/_client.tsx b/apps/web/app/_components/_client.tsx
index 93f964e..bb13f11 100644
--- a/apps/web/app/_components/_client.tsx
+++ b/apps/web/app/_components/_client.tsx
@@ -22,7 +22,6 @@ import {
   Music,
 } from "lucide-react";
 import Navbar from "@/components/navbar";
-import { signOut } from "@/lib/auth-client";
 
 export default function LandingPage() {
   const fadeInUp = {
@@ -131,7 +130,6 @@ export default function LandingPage() {
               </Button>
             </motion.div>
           </Link>
-          <Button onClick={async () => await signOut()}>Sign Out</Button>
         </Navbar>
 
         {/* Hero Section */}
diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
index 8e5a29a..40e8291 100644
--- a/apps/web/components/navbar.tsx
+++ b/apps/web/components/navbar.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { useRouter } from "next/navigation";
+import { Button } from "@repo/ui/components/ui/button";
+import { signOut, useSession } from "@/lib/auth-client";
 import ThemeToggle from "./theme-toggle";
 import Logo from "./logo";
 
@@ -18,6 +21,20 @@ export default function Navbar({
   className = "fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-background/70 border-b border-border/50",
   containerClassName = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
 }: NavbarProps) {
+  const router = useRouter();
+  const { data: session } = useSession();
+
+  const handleSignOut = async () => {
+    await signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push("/");
+          router.refresh();
+        },
+      },
+    });
+  };
+
   return (
     <nav className={className}>
       <div className={containerClassName}>
@@ -34,6 +51,11 @@ export default function Navbar({
 
           <div className="flex items-center gap-2 sm:gap-3">
             {children}
+            {session && (
+              <Button variant="outline" size="sm" onClick={handleSignOut}>
+                Sign Out
+              </Button>
+            )}
             <ThemeToggle />
           </div>
         </div>
diff --git a/apps/web/lib/auth-client.ts b/apps/web/lib/auth-client.ts
index 41aa5ca..90ea8c6 100644
--- a/apps/web/lib/auth-client.ts
+++ b/apps/web/lib/auth-client.ts
@@ -1,6 +1,7 @@
-import { createAuthClient } from "better-auth/client";
-const authClient = createAuthClient({
-  baseURL: process.env.WEB_APP_URL,
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: process.env.NEXT_PUBLIC_WEB_APP_URL ?? process.env.WEB_APP_URL,
 });
 
-export const { signIn, signOut } = authClient;
+export const { signIn, signOut, useSession } = authClient;

From f93fcdc52d64590e1f9aed8e8f9f2d25908df0be Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Fri, 12 Jun 2026 00:39:54 +0530
Subject: [PATCH 14/20] Refactor song handling and improve queue management in
 Room class

- Introduced queue locking mechanism to prevent race conditions during song requests and promotions.
- Updated `requestSong` method to utilize transactions for better integrity and to prevent duplicate song requests.
- Enhanced `promoteNextIfIdle` method to manage song promotion more effectively, ensuring the next song is played when the current one is idle.
- Adjusted WebSocket event handling to reflect changes in song promotion and playback status.
- Updated metadata in the web app to better describe the application functionality.
---
 apps/room-server/src/handlers/songs.ts        |  14 +-
 apps/room-server/src/room.ts                  | 217 ++++++++++++------
 apps/web/app/layout.tsx                       |   5 +-
 .../migration.sql                             |   2 +
 4 files changed, 152 insertions(+), 86 deletions(-)
 create mode 100644 packages/db/prisma/migrations/20260609000000_drop_song_active_track_unique/migration.sql

diff --git a/apps/room-server/src/handlers/songs.ts b/apps/room-server/src/handlers/songs.ts
index 739be9c..ec4afd8 100644
--- a/apps/room-server/src/handlers/songs.ts
+++ b/apps/room-server/src/handlers/songs.ts
@@ -48,12 +48,11 @@ export async function handleRequestSong(
 
   if (room.isAutoApproveSongs()) {
     await sendQueueUpdate(conn.roomId, room);
-    const currentSong = await room.getCurrentSong();
-    if (!currentSong) {
-      const next = await room.playNextSong();
+    const { song, started } = await room.promoteNextIfIdle();
+    if (started) {
       broadcastToRoom(conn.roomId, {
         type: ServerEvents.NOW_PLAYING_UPDATED,
-        payload: { song: next ?? null },
+        payload: { song },
       });
     }
   } else {
@@ -153,12 +152,11 @@ export async function handleApproveSong(
     payload: { songId: msg.payload.songId },
   });
 
-  let currentSong = await room.getCurrentSong();
-  if (!currentSong) {
-    currentSong = await room.playNextSong();
+  const { song, started } = await room.promoteNextIfIdle();
+  if (started) {
     broadcastToRoom(conn.roomId, {
       type: ServerEvents.NOW_PLAYING_UPDATED,
-      payload: { song: currentSong ?? null },
+      payload: { song },
     });
   }
 
diff --git a/apps/room-server/src/room.ts b/apps/room-server/src/room.ts
index b0f6c38..5249b26 100644
--- a/apps/room-server/src/room.ts
+++ b/apps/room-server/src/room.ts
@@ -1,4 +1,4 @@
-import { prisma } from "@repo/db";
+import { prisma, Prisma, type Song } from "@repo/db";
 import type {
   RoomConfig,
   SongPayload,
@@ -9,6 +9,11 @@ import type {
 import { createId } from "@paralleldrive/cuid2";
 import type { WebSocket } from "ws";
 
+type PromoteNextIfIdleResult = {
+  song: SongData | null;
+  started: boolean;
+};
+
 type UpvoteResult =
   | "success"
   | "already_upvoted"
@@ -32,11 +37,50 @@ export class Room {
   private users: Map<string, UserPayload> = new Map();
   private adminJoined: boolean = false;
   private usersRequested: Map<string, UserPayloadWithWs> = new Map();
+  private queueLock: Promise<unknown> = Promise.resolve();
 
   constructor(config: RoomConfig) {
     this.config = config;
   }
 
+  private async withQueueLock<T>(fn: () => Promise<T>): Promise<T> {
+    const result = this.queueLock.then(fn);
+    this.queueLock = result.then(
+      () => undefined,
+      () => undefined,
+    );
+    return result;
+  }
+
+  private toSongData(song: Song): SongData {
+    return {
+      id: song.id,
+      songId: song.songId,
+      name: song.name,
+      artist: song.artist,
+      url: song.url,
+      upvotes: song.upvotes,
+      imgUrl: song.imgUrl,
+      status: song.status,
+    };
+  }
+
+  private async findTopQueuedSongForUpdate(
+    tx: Prisma.TransactionClient,
+  ): Promise<string | null> {
+    const rows = await tx.$queryRaw<{ id: string }[]>`
+      SELECT id
+      FROM "song"
+      WHERE "roomId" = ${this.config.id}
+        AND status = 'QUEUED'::"SongStatus"
+      ORDER BY upvotes DESC, "createdAt" ASC
+      LIMIT 1
+      FOR UPDATE SKIP LOCKED
+    `;
+
+    return rows[0]?.id ?? null;
+  }
+
   addUser(user: UserPayload): void {
     this.users.set(user.userId, user);
   }
@@ -161,54 +205,36 @@ export class Room {
     songPayload: SongPayload,
     requestedByUserId: string,
   ): Promise<RequestSongResult> {
-    const existing = await prisma.song.findFirst({
-      where: {
-        roomId: this.config.id,
-        songId: songPayload.songId,
-        status: { in: ["REQUESTED", "QUEUED", "PLAYING"] },
-      },
-    });
-
-    if (existing) {
-      return "duplicate";
-    }
-
-    const song = await prisma.song.create({
-      data: {
-        songId: songPayload.songId,
-        name: songPayload.name,
-        artist: songPayload.artist,
-        url: songPayload.url,
-        imgUrl: songPayload.imgUrl,
-        requestedByUserId,
-        roomId: this.config.id,
-        status: this.config.autoApproveSongs ? "QUEUED" : "REQUESTED",
-      },
-    });
-
-    // if (!this.config.autoApproveSongs) {
-    //   const timeout = setTimeout(async () => {
-    //     songRequestTimeouts.delete(song.id);
-    //     await prisma.song
-    //       .update({
-    //         where: { id: song.id },
-    //         data: { status: "REJECTED" },
-    //       })
-    //       .catch(() => {});
-    //   }, SONG_REQUEST_TIMEOUT);
-    //   songRequestTimeouts.set(song.id, timeout);
-    // }
-
-    return {
-      id: song.id,
-      songId: song.songId,
-      name: song.name,
-      artist: song.artist,
-      url: song.url,
-      upvotes: song.upvotes,
-      imgUrl: song.imgUrl,
-      status: song.status,
-    };
+    return this.withQueueLock(async () =>
+      prisma.$transaction(async (tx) => {
+        const existing = await tx.song.findFirst({
+          where: {
+            roomId: this.config.id,
+            songId: songPayload.songId,
+            status: { in: ["REQUESTED", "QUEUED", "PLAYING"] },
+          },
+        });
+
+        if (existing) {
+          return "duplicate";
+        }
+
+        const song = await tx.song.create({
+          data: {
+            songId: songPayload.songId,
+            name: songPayload.name,
+            artist: songPayload.artist,
+            url: songPayload.url,
+            imgUrl: songPayload.imgUrl,
+            requestedByUserId,
+            roomId: this.config.id,
+            status: this.config.autoApproveSongs ? "QUEUED" : "REQUESTED",
+          },
+        });
+
+        return this.toSongData(song);
+      }),
+    );
   }
 
   async upvote(songId: string, userId: string): Promise<UpvoteResult> {
@@ -341,36 +367,75 @@ export class Room {
     return this.getCurrentSong();
   }
 
-  async playNextSong(): Promise<SongData | null> {
-    // Delete the currently playing song (if any)
-    await prisma.song.deleteMany({
-      where: { roomId: this.config.id, status: "PLAYING" },
-    });
+  async promoteNextIfIdle(): Promise<PromoteNextIfIdleResult> {
+    return this.withQueueLock(async () =>
+      prisma.$transaction(async (tx) => {
+        const playing = await tx.song.findFirst({
+          where: { roomId: this.config.id, status: "PLAYING" },
+        });
 
-    // Get the top queued song (highest upvotes, earliest created)
-    const next = await prisma.song.findFirst({
-      where: { roomId: this.config.id, status: "QUEUED" },
-      orderBy: [{ upvotes: "desc" }, { createdAt: "asc" }],
-    });
+        if (playing) {
+          return { song: this.toSongData(playing), started: false };
+        }
 
-    if (!next) {
-      return null;
-    }
+        const nextSongId = await this.findTopQueuedSongForUpdate(tx);
+        if (!nextSongId) {
+          return { song: null, started: false };
+        }
 
-    const updated = await prisma.song.update({
-      where: { id: next.id },
-      data: { status: "PLAYING" },
-    });
+        const promoted = await tx.song.updateMany({
+          where: {
+            id: nextSongId,
+            roomId: this.config.id,
+            status: "QUEUED",
+          },
+          data: { status: "PLAYING" },
+        });
 
-    return {
-      id: updated.id,
-      songId: updated.songId,
-      name: updated.name,
-      artist: updated.artist,
-      url: updated.url,
-      upvotes: updated.upvotes,
-      imgUrl: updated.imgUrl,
-      status: updated.status,
-    };
+        if (promoted.count === 0) {
+          return { song: null, started: false };
+        }
+
+        const updated = await tx.song.findUniqueOrThrow({
+          where: { id: nextSongId },
+        });
+
+        return { song: this.toSongData(updated), started: true };
+      }),
+    );
+  }
+
+  async playNextSong(): Promise<SongData | null> {
+    return this.withQueueLock(async () =>
+      prisma.$transaction(async (tx) => {
+        await tx.song.deleteMany({
+          where: { roomId: this.config.id, status: "PLAYING" },
+        });
+
+        const nextSongId = await this.findTopQueuedSongForUpdate(tx);
+        if (!nextSongId) {
+          return null;
+        }
+
+        const promoted = await tx.song.updateMany({
+          where: {
+            id: nextSongId,
+            roomId: this.config.id,
+            status: "QUEUED",
+          },
+          data: { status: "PLAYING" },
+        });
+
+        if (promoted.count === 0) {
+          return null;
+        }
+
+        const updated = await tx.song.findUniqueOrThrow({
+          where: { id: nextSongId },
+        });
+
+        return this.toSongData(updated);
+      }),
+    );
   }
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index d548a77..3b61703 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -21,8 +21,9 @@ const fontMono = Fira_Code({
 });
 
 export const metadata: Metadata = {
-  title: "Create Turborepo",
-  description: "Generated by create turbo",
+  title: "Spotofy",
+  description:
+    "Spotofy is a collaborative Spotify listening app. Room admins create listening rooms; guests join, request songs, and upvote tracks. The room admin plays music through Spotify and controls the queue in real time.",
 };
 
 export default function RootLayout({
diff --git a/packages/db/prisma/migrations/20260609000000_drop_song_active_track_unique/migration.sql b/packages/db/prisma/migrations/20260609000000_drop_song_active_track_unique/migration.sql
new file mode 100644
index 0000000..4fe1571
--- /dev/null
+++ b/packages/db/prisma/migrations/20260609000000_drop_song_active_track_unique/migration.sql
@@ -0,0 +1,2 @@
+-- Remove partial unique index; duplicate prevention is handled in room-server queue logic.
+DROP INDEX IF EXISTS "song_roomId_songId_active_key";

From bb7b96b1903dc9b8d930080394bdb755895ca5e9 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Fri, 12 Jun 2026 21:41:08 +0530
Subject: [PATCH 15/20] Refactor admin user checks in room handling functions

- Updated user permission checks to validate admin status based on user ID instead of a boolean flag.
- Enhanced error handling in user rejection and approval functions to provide clearer feedback when the room is not found or the user is not an admin.
- Improved session handling in the proxy function to include callback URLs for login redirection.
---
 apps/room-server/src/handerFunctions.ts |  2 +-
 apps/room-server/src/handlers/users.ts  | 12 ++++++------
 apps/web/proxy.ts                       | 25 ++++++++++---------------
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index c8852a9..ccb5a59 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -70,7 +70,7 @@ export function handleDisconnect(ws: WebSocket) {
   const room = roomCache.get(conn.roomId);
   if (!room) return;
 
-  if (conn.user.isAdmin) {
+  if (conn.user.userId === room.getAdminId()) {
     room.setAdminStatus(false);
 
     broadcastToRoom(conn.roomId, {
diff --git a/apps/room-server/src/handlers/users.ts b/apps/room-server/src/handlers/users.ts
index aee8492..8fa3d77 100644
--- a/apps/room-server/src/handlers/users.ts
+++ b/apps/room-server/src/handlers/users.ts
@@ -15,18 +15,18 @@ export async function handleRejectUser(ws: WebSocket, msg: RejectUserMessage) {
 
   const { conn } = ctx;
 
-  if (!conn.user!.isAdmin) {
+  const room = getRoom(conn.roomId);
+  if (!room) {
     return send(ws, {
       type: ServerEvents.ERROR,
-      payload: { message: "User is not admin" },
+      payload: { message: "Room not found" },
     });
   }
 
-  const room = getRoom(conn.roomId);
-  if (!room) {
+  if (conn.user!.userId !== room.getAdminId()) {
     return send(ws, {
       type: ServerEvents.ERROR,
-      payload: { message: "Room not found" },
+      payload: { message: "User is not admin" },
     });
   }
 
@@ -60,7 +60,7 @@ export async function handleApproveUser(
     });
   }
 
-  if (!conn.user!.isAdmin) {
+  if (conn.user!.userId !== room.getAdminId()) {
     return send(ws, {
       type: ServerEvents.ERROR,
       payload: { message: "User is not admin" },
diff --git a/apps/web/proxy.ts b/apps/web/proxy.ts
index adb2d49..c7e2d81 100644
--- a/apps/web/proxy.ts
+++ b/apps/web/proxy.ts
@@ -14,21 +14,14 @@ export async function proxy(request: NextRequest) {
     headers: await headers(),
   });
 
-  // THIS IS NOT SECURE!
-  // This is the recommended approach to optimistically redirect users
-  // We recommend handling auth checks in each page/route
-  // if (!session) {
-  //   return NextResponse.redirect(new URL("/login", request.url));
-  // }
-
-  // console.log(session);
-
+  const { pathname } = request.nextUrl;
   const isLoggedIn = !!session;
-  const isAuthRoute = authRoutes.includes(request.nextUrl.pathname);
-  const isPublicRoute = publicRoutes.includes(request.nextUrl.pathname);
-  const isApiAuthRoute = authPrefix.includes(request.nextUrl.pathname);
-  const isProtectedRoute = protectedRoutes.includes(request.nextUrl.pathname);
-  // const isAuthProtectedRoute=authProtectedRoutes.includes(request.nextUrl.pathname);
+  const isAuthRoute = authRoutes.includes(pathname);
+  const isPublicRoute = publicRoutes.includes(pathname);
+  const isApiAuthRoute = pathname.startsWith(authPrefix);
+  const isProtectedRoute = protectedRoutes.some(
+    (route) => pathname === route || pathname.startsWith(route + "/"),
+  );
 
   if (isApiAuthRoute || isPublicRoute) {
     return NextResponse.next();
@@ -41,7 +34,9 @@ export async function proxy(request: NextRequest) {
   }
 
   if (!isLoggedIn && isProtectedRoute) {
-    return NextResponse.redirect(new URL("/login", request.url));
+    return NextResponse.redirect(
+      new URL(`/login?callbackUrl=${encodeURIComponent(pathname)}`, request.url),
+    );
   }
 
   return NextResponse.next();

From d22420bb34ada621f4f03acfee68eb77f6446eca Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sat, 13 Jun 2026 20:46:06 +0530
Subject: [PATCH 16/20] Update .env.example with new configuration values

---
 .env.example | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/.env.example b/.env.example
index 4455476..6acb527 100644
--- a/.env.example
+++ b/.env.example
@@ -1,7 +1,14 @@
-DATABASE_URL="your-db-url"
+DATABASE_URL="postgresql://postgres:spotofy@localhost:5432/spotofy"
 
-BETTER_AUTH_SECRET="your-secret"
-WEB_APP_URL="your-web-app-url"
+BETTER_AUTH_SECRET="generate-a-long-random-string"
+WEB_APP_URL="http://localhost:3000"
+NEXT_PUBLIC_WEB_APP_URL="http://localhost:3000"
 
-GOOGLE_CLIENT_ID=""
-GOOGLE_CLIENT_SECRET=""
+GOOGLE_CLIENT_ID="your-google-client-id"
+GOOGLE_CLIENT_SECRET="your-google-client-secret"
+
+SPOTIFY_CLIENT_ID="your-spotify-client-id"
+SPOTIFY_CLIENT_SECRET="your-spotify-client-secret"
+
+NEXT_PUBLIC_WS_URL="ws://localhost:3001"
+WS_PORT=3001

From d2ce1114122e81bf7eb2aa40baa007058aabe679 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 14 Jun 2026 00:00:07 +0530
Subject: [PATCH 17/20] Update WebSocket authentication and improve room
 handling

- Added WS_SECRET to .env.example for WebSocket authentication.
- Introduced token-based authentication for WebSocket connections, enhancing security.
- Updated connection handling to verify user authorization before allowing access to rooms.
- Refactored join room logic to ensure proper user validation and error handling.
- Enhanced user payload resolution to include user details and admin status.
- Improved WebSocket event handling to manage user connections and disconnections more effectively.
---
 .env.example                                  |   1 +
 apps/room-server/package.json                 |   1 +
 apps/room-server/src/handerFunctions.ts       |   6 +
 apps/room-server/src/handlers/join.ts         |  53 ++++++--
 apps/room-server/src/index.ts                 |  44 ++++++-
 apps/room-server/src/lib/join-helpers.ts      |   7 +-
 apps/room-server/src/lib/user.ts              |  21 ++++
 apps/room-server/src/lib/ws-auth.ts           |  33 +++++
 apps/room-server/src/types.ts                 |   7 +-
 apps/web/app/api/ws/token/route.ts            |  38 ++++++
 .../app/room/[code]/_components/_client.tsx   |   6 +-
 apps/web/hooks/useWebSocket.ts                | 115 +++++++++++-------
 apps/web/lib/room-utils.ts                    |  16 +++
 apps/web/package.json                         |   1 +
 apps/web/types/websocket.ts                   |   3 +-
 bun.lock                                      |  12 +-
 turbo.json                                    |  10 +-
 17 files changed, 305 insertions(+), 69 deletions(-)
 create mode 100644 apps/room-server/src/lib/user.ts
 create mode 100644 apps/room-server/src/lib/ws-auth.ts
 create mode 100644 apps/web/app/api/ws/token/route.ts

diff --git a/.env.example b/.env.example
index 6acb527..338c445 100644
--- a/.env.example
+++ b/.env.example
@@ -12,3 +12,4 @@ SPOTIFY_CLIENT_SECRET="your-spotify-client-secret"
 
 NEXT_PUBLIC_WS_URL="ws://localhost:3001"
 WS_PORT=3001
+WS_SECRET="generate-a-long-random-string"
diff --git a/apps/room-server/package.json b/apps/room-server/package.json
index 47597a5..a420f53 100644
--- a/apps/room-server/package.json
+++ b/apps/room-server/package.json
@@ -24,6 +24,7 @@
     "@paralleldrive/cuid2": "^3.3.0",
     "@repo/db": "*",
     "dotenv-cli": "^11.0.0",
+    "jose": "^6.2.3",
     "ws": "^8.19.0"
   }
 }
diff --git a/apps/room-server/src/handerFunctions.ts b/apps/room-server/src/handerFunctions.ts
index ccb5a59..306d1aa 100644
--- a/apps/room-server/src/handerFunctions.ts
+++ b/apps/room-server/src/handerFunctions.ts
@@ -14,6 +14,12 @@ import { broadcastToRoom, send } from "./lib/messaging";
 import { IncomingMessageSchema, type IncomingMessage } from "./types";
 
 export async function handleMessage(ws: WebSocket, raw: string) {
+  const conn = connections.get(ws);
+  if (!conn?.auth) {
+    ws.close(4401, "Unauthorized");
+    return;
+  }
+
   let msg: IncomingMessage;
   try {
     const parsedMessage = IncomingMessageSchema.safeParse(JSON.parse(raw));
diff --git a/apps/room-server/src/handlers/join.ts b/apps/room-server/src/handlers/join.ts
index 84ae14c..d5a4113 100644
--- a/apps/room-server/src/handlers/join.ts
+++ b/apps/room-server/src/handlers/join.ts
@@ -12,22 +12,28 @@ import {
   sendToAdmin,
   sendUserLimitReached,
 } from "../lib/messaging";
+import { resolveUserPayload } from "../lib/user";
 import { Room } from "../room";
 import type { JoinRoomMessage } from "../types";
 
 export async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
-  const { roomId, user } = msg.payload;
+  const conn = connections.get(ws);
+  if (!conn?.auth) {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Unauthorized" },
+    });
+    ws.close(4401, "Unauthorized");
+    return;
+  }
 
-  const existing = connections.get(ws);
-  if (
-    existing?.status === "joined" &&
-    existing.roomId === roomId &&
-    existing.user?.userId === user.userId
-  ) {
-    const cachedRoom = roomCache.get(roomId);
-    if (cachedRoom) {
-      await sendJoinedSnapshotToClient(ws, roomId, cachedRoom, user.userId);
-    }
+  const { roomId } = msg.payload;
+
+  if (roomId !== conn.auth.roomId) {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "Token is not valid for this room" },
+    });
     return;
   }
 
@@ -45,7 +51,30 @@ export async function handleJoinRoom(ws: WebSocket, msg: JoinRoomMessage) {
     roomCache.set(roomId, room);
   }
 
-  connections.set(ws, { ws, user, roomId, status: "pending" });
+  const user = await resolveUserPayload(conn.auth.userId, room.getAdminId());
+  if (!user) {
+    send(ws, {
+      type: ServerEvents.ERROR,
+      payload: { message: "User not found" },
+    });
+    connections.delete(ws);
+    return;
+  }
+
+  const existing = connections.get(ws);
+  if (
+    existing?.status === "joined" &&
+    existing.roomId === roomId &&
+    existing.user?.userId === user.userId
+  ) {
+    const cachedRoom = roomCache.get(roomId);
+    if (cachedRoom) {
+      await sendJoinedSnapshotToClient(ws, roomId, cachedRoom, user.userId);
+    }
+    return;
+  }
+
+  connections.set(ws, { ...conn, user, roomId, status: "pending" });
 
   if (user.userId === room.getAdminId()) {
     room.setAdminStatus(true);
diff --git a/apps/room-server/src/index.ts b/apps/room-server/src/index.ts
index 9a03b37..23f3b18 100644
--- a/apps/room-server/src/index.ts
+++ b/apps/room-server/src/index.ts
@@ -1,11 +1,49 @@
 import { WebSocketServer } from "ws";
 import { handleMessage, handleDisconnect } from "./handerFunctions";
+import { connections } from "./lib/context";
+import { verifyRoomToken } from "./lib/ws-auth";
 
 const PORT = Number(process.env.WS_PORT) || 3001;
-const wss = new WebSocketServer({ port: PORT });
+const ALLOWED_ORIGIN =
+  process.env.NEXT_PUBLIC_WEB_APP_URL || process.env.WEB_APP_URL;
 
-wss.on("connection", (ws) => {
-  console.log("A client connected");
+const wss = new WebSocketServer({
+  port: PORT,
+  maxPayload: 64 * 1024,
+  verifyClient: (info, callback) => {
+    if (!ALLOWED_ORIGIN) {
+      callback(true);
+      return;
+    }
+
+    const origin = info.origin;
+    if (!origin || origin === ALLOWED_ORIGIN) {
+      callback(true);
+      return;
+    }
+
+    callback(false, 403, "Forbidden");
+  },
+});
+
+wss.on("connection", async (ws, req) => {
+  const url = new URL(req.url ?? "/", "http://localhost");
+  const auth = await verifyRoomToken(url.searchParams.get("token"));
+
+  if (!auth) {
+    ws.close(4401, "Unauthorized");
+    return;
+  }
+
+  connections.set(ws, {
+    ws,
+    auth,
+    user: null,
+    roomId: "",
+    status: "pending",
+  });
+
+  console.log(`Client connected (user=${auth.userId}, room=${auth.roomId})`);
 
   ws.on("message", (data) => {
     handleMessage(ws, data.toString()).catch((err) => {
diff --git a/apps/room-server/src/lib/join-helpers.ts b/apps/room-server/src/lib/join-helpers.ts
index 5dce11b..9d6c18f 100644
--- a/apps/room-server/src/lib/join-helpers.ts
+++ b/apps/room-server/src/lib/join-helpers.ts
@@ -85,8 +85,13 @@ export async function admitUserToRoom(
     return false;
   }
 
+  const existing = connections.get(user.ws);
+  if (!existing?.auth) {
+    return false;
+  }
+
   connections.set(user.ws, {
-    ws: user.ws,
+    ...existing,
     user: {
       userId: user.userId,
       username: user.username,
diff --git a/apps/room-server/src/lib/user.ts b/apps/room-server/src/lib/user.ts
new file mode 100644
index 0000000..afe67f3
--- /dev/null
+++ b/apps/room-server/src/lib/user.ts
@@ -0,0 +1,21 @@
+import { prisma } from "@repo/db";
+import type { UserPayload } from "../types";
+
+export async function resolveUserPayload(
+  userId: string,
+  roomAdminId: string,
+): Promise<UserPayload | null> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { id: true, email: true, name: true },
+  });
+
+  if (!user) return null;
+
+  return {
+    userId: user.id,
+    email: user.email,
+    username: user.name || user.email.split("@")[0] || "User",
+    isAdmin: userId === roomAdminId,
+  };
+}
diff --git a/apps/room-server/src/lib/ws-auth.ts b/apps/room-server/src/lib/ws-auth.ts
new file mode 100644
index 0000000..798210c
--- /dev/null
+++ b/apps/room-server/src/lib/ws-auth.ts
@@ -0,0 +1,33 @@
+import * as jose from "jose";
+
+export type WsTokenPayload = {
+  userId: string;
+  roomId: string;
+};
+
+function getWsSecret(): Uint8Array {
+  const secret = process.env.WS_SECRET;
+  if (!secret) {
+    throw new Error("WS_SECRET is not configured");
+  }
+  return new TextEncoder().encode(secret);
+}
+
+export async function verifyRoomToken(
+  token: string | null | undefined,
+): Promise<WsTokenPayload | null> {
+  if (!token) return null;
+
+  try {
+    const { payload } = await jose.jwtVerify(token, getWsSecret());
+    const userId = payload.userId;
+    const roomId = payload.roomId;
+
+    if (typeof userId !== "string" || !userId) return null;
+    if (typeof roomId !== "string" || !roomId) return null;
+
+    return { userId, roomId };
+  } catch {
+    return null;
+  }
+}
diff --git a/apps/room-server/src/types.ts b/apps/room-server/src/types.ts
index 5a48c34..61ff0a7 100644
--- a/apps/room-server/src/types.ts
+++ b/apps/room-server/src/types.ts
@@ -69,8 +69,14 @@ export const RoomConfigSchema = z.object({
 
 export type RoomConfig = z.infer<typeof RoomConfigSchema>;
 
+export type WsAuth = {
+  userId: string;
+  roomId: string;
+};
+
 export type ClientConnection = {
   ws: WebSocket;
+  auth: WsAuth;
   user: UserPayload | null;
   roomId: string;
   status: "joined" | "pending";
@@ -82,7 +88,6 @@ export const JoinRoomMessageSchema = z.object({
   type: z.literal(ClientEvents.JOIN_ROOM),
   payload: z.object({
     roomId: z.string().min(1),
-    user: UserPayloadSchema,
   }),
 });
 
diff --git a/apps/web/app/api/ws/token/route.ts b/apps/web/app/api/ws/token/route.ts
new file mode 100644
index 0000000..a8836a1
--- /dev/null
+++ b/apps/web/app/api/ws/token/route.ts
@@ -0,0 +1,38 @@
+import { auth } from "@/lib/auth";
+import { generateRoomToken } from "@/lib/room-utils";
+import { prisma } from "@repo/db";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  const session = await auth.api.getSession({
+    headers: req.headers,
+  });
+
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const roomId = req.nextUrl.searchParams.get("roomId");
+  if (!roomId) {
+    return NextResponse.json({ error: "Room ID is required" }, { status: 400 });
+  }
+
+  const room = await prisma.room.findUnique({
+    where: { id: roomId },
+    select: { id: true },
+  });
+
+  if (!room) {
+    return NextResponse.json({ error: "Room not found" }, { status: 404 });
+  }
+
+  try {
+    const token = await generateRoomToken(session.user.id, roomId);
+    return NextResponse.json({ token });
+  } catch {
+    return NextResponse.json(
+      { error: "WebSocket authentication is not configured" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/apps/web/app/room/[code]/_components/_client.tsx b/apps/web/app/room/[code]/_components/_client.tsx
index 3535656..ac016a7 100644
--- a/apps/web/app/room/[code]/_components/_client.tsx
+++ b/apps/web/app/room/[code]/_components/_client.tsx
@@ -45,15 +45,15 @@ export default function ClientPage({
     nowPlaying,
     upvotesUsed,
     canUpvote,
-  } = useWebSocket();
+  } = useWebSocket(code, user.userId);
 
   const [isAdmin] = useState(user.isAdmin);
 
   useEffect(() => {
     if (isConnected) {
-      joinRoom(code, user);
+      joinRoom(code);
     }
-  }, [isConnected, code, user, joinRoom, isAdmin]);
+  }, [isConnected, code, joinRoom]);
 
   const isJoiningScreenVisible = !isAdmin && joinState !== "joined";
 
diff --git a/apps/web/hooks/useWebSocket.ts b/apps/web/hooks/useWebSocket.ts
index 7140820..3544050 100644
--- a/apps/web/hooks/useWebSocket.ts
+++ b/apps/web/hooks/useWebSocket.ts
@@ -4,7 +4,6 @@ import {
   ServerEvents,
 } from "@/lib/constants";
 import type {
-  UserPayload,
   RoomConfig,
   SongData,
   SongPayload,
@@ -13,6 +12,7 @@ import type {
   ConnectionState,
   JoinState,
   UserShortPayload,
+  UserPayload,
 } from "@/types/websocket";
 import { toast } from "@repo/ui/components/ui/sonner";
 import { ClientMessageSchema, ServerMessageSchema } from "@/types/websocket";
@@ -20,15 +20,27 @@ import { ClientMessageSchema, ServerMessageSchema } from "@/types/websocket";
 const RECONNECT_BASE_MS = 1000;
 const RECONNECT_MAX_MS = 30000;
 
-export function useWebSocket() {
+async function fetchWsToken(roomId: string): Promise<string | null> {
+  const res = await fetch(
+    `/api/ws/token?roomId=${encodeURIComponent(roomId)}`,
+    { credentials: "include" },
+  );
+
+  if (!res.ok) return null;
+
+  const data = (await res.json()) as { token?: string };
+  return data.token ?? null;
+}
+
+export function useWebSocket(roomId: string, userId: string) {
   const wsRef = useRef<WebSocket | null>(null);
-  const currentUserIdRef = useRef<string | null>(null);
-  const currentRoomIdRef = useRef<string | null>(null);
-  const currentUserRef = useRef<UserPayload | null>(null);
+  const currentUserIdRef = useRef(userId);
+  const currentRoomIdRef = useRef(roomId);
   const shouldReconnectRef = useRef(true);
   const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const reconnectAttemptRef = useRef(0);
   const joinStateRef = useRef<JoinState>("idle");
+  const connectRef = useRef<() => void>(() => {});
 
   const [connectionState, setConnectionState] =
     useState<ConnectionState>("disconnected");
@@ -43,7 +55,9 @@ export function useWebSocket() {
   const [isAdminJoined, setIsAdminJoined] = useState(false);
   const [upvotesUsed, setUpvotesUsed] = useState(0);
 
-  // Keep a ref in sync with joinState so reconnect closures can read it
+  currentUserIdRef.current = userId;
+  currentRoomIdRef.current = roomId;
+
   const setJoinStateAndRef = useCallback((next: JoinState | ((prev: JoinState) => JoinState)) => {
     setJoinState((prev) => {
       const value = typeof next === "function" ? next(prev) : next;
@@ -63,6 +77,16 @@ export function useWebSocket() {
     [],
   );
 
+  const sendJoinMessage = useCallback((ws: WebSocket, targetRoomId: string) => {
+    setJoinStateAndRef("joining");
+    ws.send(
+      JSON.stringify({
+        type: ClientEvents.JOIN_ROOM,
+        payload: { roomId: targetRoomId },
+      }),
+    );
+  }, [setJoinStateAndRef]);
+
   const handleServerMessage = useCallback(
     (message: ServerMessage) => {
       switch (message.type) {
@@ -233,35 +257,40 @@ export function useWebSocket() {
     [reportError, setJoinStateAndRef],
   );
 
-  const connect = useCallback(() => {
+  const connect = useCallback(async () => {
     if (wsRef.current?.readyState === WebSocket.OPEN) return;
 
     setConnectionState("connecting");
 
     try {
+      const token = await fetchWsToken(roomId);
+      if (!token) {
+        setConnectionState("error");
+        reportError(
+          "Failed to authenticate WebSocket connection",
+          undefined,
+          "websocket-auth-error",
+        );
+        return;
+      }
+
       const wsUrl = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:3001";
-      wsRef.current = new WebSocket(wsUrl);
+      const ws = new WebSocket(
+        `${wsUrl}?token=${encodeURIComponent(token)}`,
+      );
+      wsRef.current = ws;
 
-      wsRef.current.onopen = () => {
+      ws.onopen = () => {
         reconnectAttemptRef.current = 0;
         setConnectionState("connected");
         console.log("WebSocket connected");
 
-        // Auto-rejoin the room if we were in one before disconnecting
-        const roomId = currentRoomIdRef.current;
-        const user = currentUserRef.current;
-        if (roomId && user) {
-          setJoinStateAndRef("joining");
-          wsRef.current?.send(
-            JSON.stringify({
-              type: ClientEvents.JOIN_ROOM,
-              payload: { roomId, user },
-            }),
-          );
+        if (currentRoomIdRef.current) {
+          sendJoinMessage(ws, currentRoomIdRef.current);
         }
       };
 
-      wsRef.current.onmessage = (event) => {
+      ws.onmessage = (event) => {
         try {
           console.log("Received message:", event.data);
 
@@ -288,12 +317,12 @@ export function useWebSocket() {
         }
       };
 
-      wsRef.current.onclose = () => {
+      ws.onclose = () => {
         setConnectionState("disconnected");
         console.log("WebSocket disconnected");
 
-        // Don't reconnect for terminal join states or if unmounted
-        const terminal = joinStateRef.current === "rejected" || joinStateRef.current === "full";
+        const terminal =
+          joinStateRef.current === "rejected" || joinStateRef.current === "full";
         if (!shouldReconnectRef.current || terminal) return;
 
         const attempt = reconnectAttemptRef.current;
@@ -304,11 +333,11 @@ export function useWebSocket() {
         reconnectAttemptRef.current = attempt + 1;
         console.log(`Reconnecting in ${delay}ms (attempt ${attempt + 1})`);
         reconnectTimerRef.current = setTimeout(() => {
-          if (shouldReconnectRef.current) connect();
+          if (shouldReconnectRef.current) connectRef.current();
         }, delay);
       };
 
-      wsRef.current.onerror = (err) => {
+      ws.onerror = (err) => {
         setConnectionState("error");
         reportError(
           "WebSocket connection error",
@@ -324,7 +353,9 @@ export function useWebSocket() {
         "websocket-create-error",
       );
     }
-  }, [handleServerMessage, reportError, setJoinStateAndRef]);
+  }, [handleServerMessage, reportError, roomId, sendJoinMessage]);
+
+  connectRef.current = connect;
 
   const sendMessage = useCallback(
     (message: ClientMessage) => {
@@ -353,18 +384,15 @@ export function useWebSocket() {
   );
 
   const joinRoom = useCallback(
-    (roomId: string, user: UserPayload) => {
-      currentUserIdRef.current = user.userId;
-      currentRoomIdRef.current = roomId;
-      currentUserRef.current = user;
-      setJoinStateAndRef("joining");
+    (targetRoomId: string) => {
+      currentRoomIdRef.current = targetRoomId;
       setJoinError(null);
-      sendMessage({
-        type: ClientEvents.JOIN_ROOM,
-        payload: { roomId, user },
-      });
+
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        sendJoinMessage(wsRef.current, targetRoomId);
+      }
     },
-    [sendMessage, setJoinStateAndRef],
+    [sendJoinMessage],
   );
 
   const requestSong = useCallback(
@@ -378,10 +406,10 @@ export function useWebSocket() {
   );
 
   const upvoteSong = useCallback(
-    (songId: string, userId: string) => {
+    (songId: string, upvoteUserId: string) => {
       sendMessage({
         type: ClientEvents.UPVOTE_SONG,
-        payload: { songId, userId },
+        payload: { songId, userId: upvoteUserId },
       });
     },
     [sendMessage],
@@ -408,20 +436,20 @@ export function useWebSocket() {
   );
 
   const approveUser = useCallback(
-    (userId: string, username: string) => {
+    (approveUserId: string, username: string) => {
       sendMessage({
         type: ClientEvents.APPROVE_USER,
-        payload: { userId, username },
+        payload: { userId: approveUserId, username },
       });
     },
     [sendMessage],
   );
 
   const rejectUser = useCallback(
-    (userId: string, username: string) => {
+    (rejectUserId: string, username: string) => {
       sendMessage({
         type: ClientEvents.REJECT_USER,
-        payload: { userId, username },
+        payload: { userId: rejectUserId, username },
       });
     },
     [sendMessage],
@@ -438,6 +466,7 @@ export function useWebSocket() {
   useEffect(() => {
     shouldReconnectRef.current = true;
     connect();
+
     return () => {
       shouldReconnectRef.current = false;
       if (reconnectTimerRef.current) {
diff --git a/apps/web/lib/room-utils.ts b/apps/web/lib/room-utils.ts
index 22e2553..b142ae4 100644
--- a/apps/web/lib/room-utils.ts
+++ b/apps/web/lib/room-utils.ts
@@ -1,4 +1,5 @@
 import { prisma } from "@repo/db";
+import * as jose from "jose";
 
 export async function isRoomAdmin(code: string, userId: string) {
   const room = await prisma.room.findUnique({
@@ -13,3 +14,18 @@ export async function isRoomAdmin(code: string, userId: string) {
 
   return room.adminId === userId;
 }
+
+function getWsSecret(): Uint8Array {
+  const secret = process.env.WS_SECRET;
+  if (!secret) {
+    throw new Error("WS_SECRET is not configured");
+  }
+  return new TextEncoder().encode(secret);
+}
+
+export async function generateRoomToken(userId: string, roomId: string) {
+  return new jose.SignJWT({ userId, roomId })
+    .setProtectedHeader({ alg: "HS256" })
+    .setExpirationTime("15m")
+    .sign(getWsSecret());
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 4cffc90..6140b35 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -17,6 +17,7 @@
     "@repo/ui": "*",
     "better-auth": "^1.4.17",
     "dotenv-cli": "^11.0.0",
+    "jose": "^6.2.3",
     "lucide-react": "^0.563.0",
     "motion": "^12.31.0",
     "next": "16.0.10",
diff --git a/apps/web/types/websocket.ts b/apps/web/types/websocket.ts
index dd6f012..752241e 100644
--- a/apps/web/types/websocket.ts
+++ b/apps/web/types/websocket.ts
@@ -72,7 +72,6 @@ export const JoinRoomMessageSchema = z.object({
   type: z.literal(ClientEvents.JOIN_ROOM),
   payload: z.object({
     roomId: z.string().min(1),
-    user: UserPayloadSchema,
   }),
 });
 
@@ -410,7 +409,7 @@ export type UseWebSocketReturn = {
   roomConfig: RoomConfig | null;
   queue: SongData[];
   pendingRequests: SongData[];
-  joinRoom: (roomId: string, user: UserPayload) => void;
+  joinRoom: (roomId: string) => void;
   requestSong: (song: SongPayload) => void;
   upvoteSong: (songId: string, userId: string) => void;
   approveSong: (songId: string) => void;
diff --git a/bun.lock b/bun.lock
index be070d8..89d9703 100644
--- a/bun.lock
+++ b/bun.lock
@@ -21,6 +21,7 @@
         "@paralleldrive/cuid2": "^3.3.0",
         "@repo/db": "*",
         "dotenv-cli": "^11.0.0",
+        "jose": "^6.2.3",
         "ws": "^8.19.0",
       },
       "devDependencies": {
@@ -45,6 +46,7 @@
         "@repo/ui": "*",
         "better-auth": "^1.4.17",
         "dotenv-cli": "^11.0.0",
+        "jose": "^6.2.3",
         "lucide-react": "^0.563.0",
         "motion": "^12.31.0",
         "next": "16.0.10",
@@ -505,7 +507,7 @@
 
     "@ts-morph/common": ["@ts-morph/common@0.27.0", "", { "dependencies": { "fast-glob": "^3.3.3", "minimatch": "^10.0.1", "path-browserify": "^1.0.1" } }, "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ=="],
 
-    "@types/bun": ["@types/bun@1.3.10", "", { "dependencies": { "bun-types": "1.3.10" } }, "sha512-0+rlrUrOrTSskibryHbvQkDOWRJwJZqZlxrUs1u4oOoTln8+WIXBPmAuCF35SWB2z4Zl3E84Nl/D0P7803nigQ=="],
+    "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
@@ -611,7 +613,7 @@
 
     "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
 
-    "bun-types": ["bun-types@1.3.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-tcpfCCl6XWo6nCVnpcVrxQ+9AYN1iqMIzgrSKYMB/fjLtV2eyAVEg7AxQJuCq/26R6HpKWykQXuSOq/21RYcbg=="],
+    "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
     "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
 
@@ -1065,7 +1067,7 @@
 
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
-    "jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="],
+    "jose": ["jose@6.2.3", "", {}, "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw=="],
 
     "js-cookie": ["js-cookie@2.2.1", "", {}, "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="],
 
@@ -1687,6 +1689,8 @@
 
     "@modelcontextprotocol/sdk/hono": ["hono@4.12.0", "", {}, "sha512-NekXntS5M94pUfiVZ8oXXK/kkri+5WpX2/Ik+LVsl+uvw+soj4roXIsPqO+XsWrAw20mOzaXOZf3Q7PfB9A/IA=="],
 
+    "@modelcontextprotocol/sdk/jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="],
+
     "@modelcontextprotocol/sdk/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "@noble/curves/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
@@ -1723,6 +1727,8 @@
 
     "ajv-formats/ajv": ["ajv@8.18.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A=="],
 
+    "better-auth/jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="],
+
     "c12/dotenv": ["dotenv@16.6.1", "", {}, "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="],
 
     "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
diff --git a/turbo.json b/turbo.json
index 2c4e0e5..b8a3e1d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -9,14 +9,22 @@
       "env": [
         "DATABASE_URL",
         "WEB_APP_URL",
+        "NEXT_PUBLIC_WEB_APP_URL",
         "BETTER_AUTH_SECRET",
         "GOOGLE_CLIENT_*",
         "WS_PORT",
+        "WS_SECRET",
         "SPOTIFY_*"
       ]
     },
     "lint": {
-      "dependsOn": ["^lint"]
+      "dependsOn": ["^lint"],
+      "env": [
+        "WEB_APP_URL",
+        "NEXT_PUBLIC_WEB_APP_URL",
+        "WS_PORT",
+        "WS_SECRET"
+      ]
     },
     "check-types": {
       "dependsOn": ["^check-types"]

From 4ce93fde0e88706ad3c58d0626df5e6cefac2c94 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 14 Jun 2026 14:16:39 +0530
Subject: [PATCH 18/20] Refactor authentication handling in API routes

- Replaced direct session retrieval with a centralized `requireSession` function across multiple API routes to streamline authentication.
- Improved error handling for unauthorized access by returning consistent response structures.
- Updated related API routes to ensure proper session validation before processing requests.
---
 apps/web/app/api/rooms/[id]/route.ts          |  9 ++--
 apps/web/app/api/rooms/route.ts               | 18 +++----
 apps/web/app/api/spotify/search/route.ts      |  9 ++--
 apps/web/app/api/spotify/status/route.ts      | 12 ++---
 apps/web/app/api/spotify/token/route.ts       | 12 ++---
 apps/web/app/api/ws/token/route.ts            | 12 ++---
 apps/web/lib/require-session.ts               | 23 ++++++++
 .../migration.sql                             | 17 ++++++
 packages/db/prisma/schema.prisma              | 52 +++++++++++--------
 9 files changed, 102 insertions(+), 62 deletions(-)
 create mode 100644 apps/web/lib/require-session.ts
 create mode 100644 packages/db/prisma/migrations/20260614000000_song_upvote_history_fks/migration.sql

diff --git a/apps/web/app/api/rooms/[id]/route.ts b/apps/web/app/api/rooms/[id]/route.ts
index 0f287b9..47ea87b 100644
--- a/apps/web/app/api/rooms/[id]/route.ts
+++ b/apps/web/app/api/rooms/[id]/route.ts
@@ -1,15 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
+import { requireSession } from "@/lib/require-session";
 import { prisma } from "@repo/db";
 
 export async function GET(
   req: NextRequest,
   { params }: { params: Promise<{ id: string }> },
 ) {
-  const session = await auth.api.getSession({ headers: req.headers });
-
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
 
   const { id } = await params;
diff --git a/apps/web/app/api/rooms/route.ts b/apps/web/app/api/rooms/route.ts
index a7bee90..55382e5 100644
--- a/apps/web/app/api/rooms/route.ts
+++ b/apps/web/app/api/rooms/route.ts
@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
+import { requireSession } from "@/lib/require-session";
 import { prisma } from "@repo/db";
 import { z } from "zod";
 
@@ -10,11 +10,11 @@ const createRoomBodySchema = z.object({
 });
 
 export async function GET(req: NextRequest) {
-  const session = await auth.api.getSession({ headers: req.headers });
-
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
+  const { session } = authResult;
 
   const rooms = await prisma.room.findMany({
     where: { adminId: session.user.id },
@@ -32,11 +32,11 @@ export async function GET(req: NextRequest) {
 }
 
 export async function POST(req: NextRequest) {
-  const session = await auth.api.getSession({ headers: req.headers });
-
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
+  const { session } = authResult;
 
   const parsedBody = createRoomBodySchema.safeParse(await req.json());
 
diff --git a/apps/web/app/api/spotify/search/route.ts b/apps/web/app/api/spotify/search/route.ts
index 39c3236..35cedba 100644
--- a/apps/web/app/api/spotify/search/route.ts
+++ b/apps/web/app/api/spotify/search/route.ts
@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
+import { requireSession } from "@/lib/require-session";
 import { prisma } from "@repo/db";
 import { SPOTIFY_BASE_URL, SPOTIFY_TOKEN_PATH } from "@/lib/constants";
 
@@ -91,10 +91,11 @@ async function getValidToken(userId: string): Promise<string | null> {
 }
 
 export async function GET(req: NextRequest) {
-  const session = await auth.api.getSession({ headers: req.headers });
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
+  const { session } = authResult;
 
   const q = req.nextUrl.searchParams.get("q")?.trim();
   if (!q) {
diff --git a/apps/web/app/api/spotify/status/route.ts b/apps/web/app/api/spotify/status/route.ts
index 33a0db8..6794f16 100644
--- a/apps/web/app/api/spotify/status/route.ts
+++ b/apps/web/app/api/spotify/status/route.ts
@@ -1,15 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@repo/db";
-import { auth } from "@/lib/auth";
+import { requireSession } from "@/lib/require-session";
 
 export async function GET(req: NextRequest) {
-  const session = await auth.api.getSession({
-    headers: req.headers,
-  });
-
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
+  const { session } = authResult;
 
   const user = await prisma.user.findUnique({
     where: { id: session.user.id },
diff --git a/apps/web/app/api/spotify/token/route.ts b/apps/web/app/api/spotify/token/route.ts
index bc92726..2ba05b3 100644
--- a/apps/web/app/api/spotify/token/route.ts
+++ b/apps/web/app/api/spotify/token/route.ts
@@ -1,4 +1,4 @@
-import { auth } from "@/lib/auth";
+import { requireSession } from "@/lib/require-session";
 import { SPOTIFY_BASE_URL, SPOTIFY_TOKEN_PATH } from "@/lib/constants";
 import { prisma } from "@repo/db";
 import { NextRequest, NextResponse } from "next/server";
@@ -12,13 +12,11 @@ type SpotifyRefreshResponse = {
 };
 
 export async function GET(req: NextRequest) {
-  const session = await auth.api.getSession({
-    headers: req.headers,
-  });
-
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
+  const { session } = authResult;
 
   const user = await prisma.user.findUnique({
     where: { id: session.user.id },
diff --git a/apps/web/app/api/ws/token/route.ts b/apps/web/app/api/ws/token/route.ts
index a8836a1..33de6b1 100644
--- a/apps/web/app/api/ws/token/route.ts
+++ b/apps/web/app/api/ws/token/route.ts
@@ -1,16 +1,14 @@
-import { auth } from "@/lib/auth";
+import { requireSession } from "@/lib/require-session";
 import { generateRoomToken } from "@/lib/room-utils";
 import { prisma } from "@repo/db";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(req: NextRequest) {
-  const session = await auth.api.getSession({
-    headers: req.headers,
-  });
-
-  if (!session?.user) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const authResult = await requireSession(req);
+  if (!authResult.ok) {
+    return authResult.response;
   }
+  const { session } = authResult;
 
   const roomId = req.nextUrl.searchParams.get("roomId");
   if (!roomId) {
diff --git a/apps/web/lib/require-session.ts b/apps/web/lib/require-session.ts
new file mode 100644
index 0000000..5abc1b1
--- /dev/null
+++ b/apps/web/lib/require-session.ts
@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+
+type Session = NonNullable<Awaited<ReturnType<typeof auth.api.getSession>>>;
+
+type RequireSessionResult =
+  | { ok: true; session: Session }
+  | { ok: false; response: NextResponse };
+
+export async function requireSession(
+  req: NextRequest,
+): Promise<RequireSessionResult> {
+  const session = await auth.api.getSession({ headers: req.headers });
+
+  if (!session?.user) {
+    return {
+      ok: false,
+      response: NextResponse.json({ error: "Unauthorized" }, { status: 401 }),
+    };
+  }
+
+  return { ok: true, session };
+}
diff --git a/packages/db/prisma/migrations/20260614000000_song_upvote_history_fks/migration.sql b/packages/db/prisma/migrations/20260614000000_song_upvote_history_fks/migration.sql
new file mode 100644
index 0000000..ff47030
--- /dev/null
+++ b/packages/db/prisma/migrations/20260614000000_song_upvote_history_fks/migration.sql
@@ -0,0 +1,17 @@
+-- Clean up orphaned rows that would violate the new FK constraints
+DELETE FROM "song_upvote_history" h
+WHERE NOT EXISTS (SELECT 1 FROM "room" r WHERE r."id" = h."roomId")
+   OR NOT EXISTS (SELECT 1 FROM "song" s WHERE s."id" = h."songId")
+   OR NOT EXISTS (SELECT 1 FROM "user" u WHERE u."id" = h."userId");
+
+-- AddForeignKey
+ALTER TABLE "song_upvote_history" ADD CONSTRAINT "song_upvote_history_roomId_fkey"
+  FOREIGN KEY ("roomId") REFERENCES "room"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "song_upvote_history" ADD CONSTRAINT "song_upvote_history_songId_fkey"
+  FOREIGN KEY ("songId") REFERENCES "song"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "song_upvote_history" ADD CONSTRAINT "song_upvote_history_userId_fkey"
+  FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 60c7caa..22ccd4e 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -32,6 +32,7 @@ model User {
   rooms                 Room[]
   requestedSongs        Song[]
   spotifyOAuthState     SpotifyOAuthState?
+  songUpvoteHistory     SongUpvoteHistory[]
 
   @@unique([email])
   @@map("user")
@@ -97,17 +98,18 @@ model Verification {
 }
 
 model Room {
-  id               String   @id @default(cuid())
-  name             String
-  adminId          String
-  admin            User     @relation(fields: [adminId], references: [id], onDelete: Cascade)
-  maxUpvotes       Int      @default(5)
-  maxUsers         Int      @default(10)
-  autoApproveSongs Boolean  @default(false)
-  autoApproveUsers Boolean  @default(false)
-  createdAt        DateTime @default(now())
-  updatedAt        DateTime @updatedAt
-  songs            Song[]
+  id                 String               @id @default(cuid())
+  name               String
+  adminId            String
+  admin              User                 @relation(fields: [adminId], references: [id], onDelete: Cascade)
+  maxUpvotes         Int                  @default(5)
+  maxUsers           Int                  @default(10)
+  autoApproveSongs   Boolean              @default(false)
+  autoApproveUsers   Boolean              @default(false)
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  songs              Song[]
+  songUpvoteHistory  SongUpvoteHistory[]
 
   @@index([adminId])
   @@map("room")
@@ -121,19 +123,20 @@ enum SongStatus {
 }
 
 model Song {
-  id        String     @id @default(cuid())
-  songId    String
-  name      String
-  artist    String
-  url       String
-  upvotes   Int        @default(0)
-  imgUrl    String
-  status    SongStatus @default(REQUESTED)
+  id                String              @id @default(cuid())
+  songId            String
+  name              String
+  artist            String
+  url               String
+  upvotes           Int                 @default(0)
+  imgUrl            String
+  status            SongStatus          @default(REQUESTED)
   requestedByUserId String?
-  requestedBy       User?      @relation(fields: [requestedByUserId], references: [id], onDelete: SetNull)
-  roomId    String
-  room      Room       @relation(fields: [roomId], references: [id], onDelete: Cascade)
-  createdAt DateTime   @default(now())
+  requestedBy       User?               @relation(fields: [requestedByUserId], references: [id], onDelete: SetNull)
+  roomId            String
+  room              Room                @relation(fields: [roomId], references: [id], onDelete: Cascade)
+  createdAt         DateTime            @default(now())
+  upvoteHistory     SongUpvoteHistory[]
 
   @@index([roomId])
   @@index([requestedByUserId])
@@ -144,8 +147,11 @@ model Song {
 model SongUpvoteHistory {
   id        String   @id @default(cuid())
   roomId    String
+  room      Room     @relation(fields: [roomId], references: [id], onDelete: Cascade)
   songId    String
+  song      Song     @relation(fields: [songId], references: [id], onDelete: Cascade)
   userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
   createdAt DateTime @default(now())
 
   @@unique([roomId, songId, userId])

From 5571e38c07e0b102d9208332c31b519a6ea73896 Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 14 Jun 2026 19:21:53 +0530
Subject: [PATCH 19/20] small Readme changes

---
 README.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 617f25d..8fa1160 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ bun install
 docker compose -f docker/docker-compose.dev.yml up -d
 ```
 
-This starts PostgreSQL on port `5432` with database `spotofy` and password `spotofy`.
+This starts PostgreSQL on port `5432` (user `postgres`, database `spotofy`, password `spotofy`).
 
 ### 3. Configure environment variables
 
@@ -88,8 +88,11 @@ SPOTIFY_CLIENT_SECRET="your-spotify-client-secret"
 
 NEXT_PUBLIC_WS_URL="ws://localhost:3001"
 WS_PORT=3001
+WS_SECRET="generate-a-long-random-string"
 ```
 
+`WS_SECRET` signs room-scoped WebSocket JWTs. Use the same value in both the web app and room server (see `.env.example`).
+
 **Google OAuth:** Create credentials in the [Google Cloud Console](https://console.cloud.google.com/). Add `http://localhost:3000` as an authorized origin and `http://localhost:3000/api/auth/callback/google` as a redirect URI.
 
 **Spotify:** Create an app in the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard). Add `http://localhost:3000/api/spotify/callback` as a redirect URI.
@@ -117,6 +120,8 @@ This starts both the web app and the room server. Open [http://localhost:3000](h
 | `bun run build` | Build all packages |
 | `bun run lint` | Lint the codebase |
 | `bun run check-types` | Run TypeScript checks |
+| `bun run db:migrate` | Create and apply database migrations (development) |
+| `bun run db:deploy` | Apply migrations (production) |
 | `bun run db:studio` | Open Prisma Studio (database GUI) |
 
 To run a single app:
@@ -135,6 +140,9 @@ spotofy-app/
 │   └── room-server/   # WebSocket server for live rooms
 ├── packages/
 │   ├── db/            # Database schema & client
-│   └── ui/            # Shared UI components
+│   ├── ui/            # Shared UI components
+│   ├── tailwind-config/
+│   ├── eslint-config/
+│   └── typescript-config/
 └── docker/            # Local PostgreSQL setup
 ```

From f2bd831ff9ef5f6767948ca604852a7c97acec5a Mon Sep 17 00:00:00 2001
From: Nil2000 <nilabhra09b.net@gmail.com>
Date: Sun, 14 Jun 2026 19:25:25 +0530
Subject: [PATCH 20/20] remove unndecessary file

---
 docs/websocket-events.md | 193 ---------------------------------------
 1 file changed, 193 deletions(-)
 delete mode 100644 docs/websocket-events.md

diff --git a/docs/websocket-events.md b/docs/websocket-events.md
deleted file mode 100644
index 9e944ae..0000000
--- a/docs/websocket-events.md
+++ /dev/null
@@ -1,193 +0,0 @@
-# WebSocket Event Flow
-
-Spotofy uses a single persistent WebSocket (`NEXT_PUBLIC_WS_URL` → room-server). Messages are JSON with a `type` field (see `ClientEvents` / `ServerEvents` in `apps/*/src/constants.ts` or `apps/web/lib/constants.ts`).
-
-**Client state** lives in `useWebSocket` (`apps/web/hooks/useWebSocket.ts`). **Server state** is in-memory per room (`Room` class + `connections` map in `handerFunctions.ts`), with songs/users persisted via Prisma.
-
----
-
-## Client → Server (`ClientEvents`)
-
-| Event | Who | Server handler | DB / room ops | Server replies |
-|-------|-----|----------------|---------------|----------------|
-| `room.join` | Anyone | `handleJoinRoom` | Load/create room; track connection as `pending` then maybe `joined` | See [Join flow](#join-flow) |
-| `song.request` | Joined user* | `handleRequestSong` | Create song (`REQUESTED` or `QUEUED`) | `queue.updated` (auto-approve) **or** `song.requested` → admin |
-| `song.upvote` | Joined user* | `handleUpvote` | Insert upvote history; increment count | `queue.updated` or `error` |
-| `song.approve` | Admin* | `handleApproveSong` | `REQUESTED` → `QUEUED` | `song.approved` + `queue.updated` |
-| `song.reject` | Admin* | `handleRejectSong` | `REQUESTED` → `REJECTED` | `song.rejected` |
-| `user.approve` | Admin* | `handleApproveUser` | Move user from pending → joined | `room.joined`, `room.members_updated`, `now_playing.updated`, `queue.updated`, `user.approved` |
-| `user.reject` | Admin* | `handleRejectUser` | Remove from pending list | `user.rejected` → target user |
-| `now_playing.sync` | Any connected* | `handlePlayCurrentSong` | Read `PLAYING` or advance queue | `now_playing.updated` + `queue.updated` (broadcast) |
-| `queue.next` | Admin* | `handleNextSong` | Delete current `PLAYING`; promote top `QUEUED` | `now_playing.updated` + `queue.updated` (broadcast) |
-
-\*Handlers check room exists and admin where needed, but **do not verify `conn.status === "joined"`** (see gaps).
-
-### Client-side after send
-
-| Action | Hook / UI effect |
-|--------|------------------|
-| `joinRoom()` | Sets `joinState: "joining"`; waits for server events |
-| `requestSong()` | No local state until server pushes queue or admin sees pending |
-| `upvoteSong()` | Queue refreshed via `queue.updated` |
-| `approveSong` / `rejectSong` | Admin optimistically removes from `pendingRequests` only after server events |
-| `approveUser` / `rejectUser` | **Optimistically** removes from `pendingUsers` before server ack |
-| `broadcastNowPlaying()` | **Exported but unused** in room UI |
-| `requestNextSong()` | Called from admin Spotify player on track end / skip button → `queue.next` |
-
----
-
-## Server → Client (`ServerEvents`)
-
-| Event | Trigger | Client handler (`useWebSocket`) | UI effect |
-|-------|---------|----------------------------------|-----------|
-| `room.joined` | User fully joined | `joinState → joined`, set `roomConfig`, `queue` | Room layout shown (guest/admin) |
-| `room.waiting_for_admin` | Guest joined before admin | `joinState → blocked`, clear room state | Join status screen |
-| `user.join_already_pending` | Duplicate join request | **Not handled** (falls through to `console.warn`) | No UI change |
-| `user.join_requested` | Guest needs approval | Append to `pendingUsers` | Admin: pending users panel |
-| `room.pending_join_requests` | Admin joined with backlog | Set `pendingUsers` | Admin: pending users panel |
-| `user.approved` | Admin approved guest | **Not handled** | Redundant if `room.joined` already received |
-| `user.rejected` | Admin rejected guest | `joinState → rejected`, clear state | Join status screen |
-| `room.admin_joined` | Admin connected | `isAdminJoined → true` | **Not consumed by room UI** |
-| `room.admin_left` | Admin disconnected | `isAdminJoined → false` | **Not consumed by room UI** |
-| `room.members_updated` | Join / leave / approve | Set `users` | Users sidebar |
-| `queue.updated` | Queue changed | Set `queue` | Queue sidebar |
-| `song.requested` | Manual song approval | Append to `pendingRequests` | Admin: pending songs panel |
-| `song.approved` / `song.rejected` | Admin action | Remove from `pendingRequests` | Admin panel |
-| `now_playing.updated` | Join / skip / sync / next | Set `nowPlaying` | Now playing section; admin Spotify player uses `nowPlaying.url` |
-| `error` | Validation / auth failure | Toast via `reportError` | Sonner toast |
-
----
-
-## Key end-to-end flows
-
-### Join flow
-
-```mermaid
-sequenceDiagram
-  participant C as Web client
-  participant S as Room server
-  participant DB as PostgreSQL
-
-  C->>S: room.join
-  S->>DB: findOrCreate room
-  alt Admin
-    S->>S: setAdminStatus(true)
-    S-->>C: room.admin_joined (broadcast to joined*)
-    S-->>C: room.pending_join_requests (if backlog)
-    S->>S: status = joined, addUser
-    S-->>C: room.joined + room.members_updated + now_playing.updated + queue.updated
-  else Guest, admin offline
-    S-->>C: room.waiting_for_admin
-    S->>S: addUserRequest (pending)
-  else Guest, manual user approval
-    S-->>C: user.join_requested → admin OR join_already_pending
-    S->>S: addUserRequest (pending)
-  else Guest, auto-approve users
-    S->>S: status = joined, addUser
-    S-->>C: room.joined + ...
-  end
-```
-
-\* `broadcastToRoom` only reaches connections with `status === "joined"`.
-
-**After join (admin):** `playCurrentSong()` runs on join — if nothing is `PLAYING`, it **calls `playNextSong()`** and may start playback immediately.
-
-**After join (guest):** Sees queue/users/now playing; playback is display-only from `nowPlaying`.
-
-### Song request flow
-
-```
-Guest/Admin → song.request → DB create
-  ├─ autoApproveSongs: queue.updated (all joined)
-  └─ manual: song.requested → admin only
-Admin → song.approve → song.approved + queue.updated
-Admin → song.reject → song.rejected (no queue.updated; song leaves pending UI only)
-```
-
-### Playback flow
-
-```
-Admin Spotify SDK track ends / skip
-  → requestNextSong() → queue.next
-  → server playNextSong() (delete PLAYING, promote top QUEUED)
-  → now_playing.updated + queue.updated → all joined clients
-
-Admin player loads new nowPlaying.url → plays via Spotify Web API
-Guests see now_playing.updated → static album art + metadata
-```
-
-`now_playing.sync` exists to re-broadcast current track but **nothing in the UI calls it**.
-
-### Disconnect flow
-
-```
-WebSocket close/error → handleDisconnect
-  ├─ Admin: setAdminStatus(false), room.admin_left (broadcast)
-  ├─ Joined: removeUser
-  └─ Pending: removeUserRequest
-  → room.members_updated (broadcast)
-```
-
-No client rejoin logic; commented-out rejoin stub in `useWebSocket`.
-
----
-
-## Gaps & edge cases
-
-### Critical
-
-1. **Guests stuck when joining before admin** — They receive `room.waiting_for_admin` and sit in `usersRequested`. When admin later joins, they are **not** notified (`room.admin_joined` is not broadcast to pending connections). With `autoApproveUsers: true`, they are still never auto-admitted; admin must manually approve users who were queued before admin arrived.
-
-2. **No `joined` guard on actions** — Pending/waiting users can send `song.request`, `song.upvote`, etc. if they bypass UI. Server only checks `conn.user` exists, not `conn.status === "joined"`.
-
-3. **Duplicate `room.join`** — Re-calling join (e.g. React effect re-run) resets connection to `pending` and re-processes join with no idempotency guard.
-
-4. **Unhandled server events on client** — `user.join_already_pending` and `user.approved` have schemas but no `useWebSocket` cases.
-
-5. **Admin song backlog on reconnect** — On admin join, pending **users** are sent via `room.pending_join_requests`, but pending **songs** in DB (`loadRequestedSongs`) are never loaded or sent. Admin only sees songs requested while they are online (`song.requested`).
-
-### Moderate
-
-6. **`playCurrentSong()` side effect on join** — Joining (or approving a user) can start playback by promoting the queue without admin explicitly pressing play.
-
-7. **`room.admin_joined` / `room.admin_left` unused in UI** — `isAdminJoined` is tracked but room page ignores it; guests waiting for admin see a generic “blocked” message that reads like approval wait, not “admin offline”.
-
-8. **`now_playing.sync` unused** — No path to resync guests after missed broadcasts or admin reconnect.
-
-9. **Optimistic pending-user removal** — `approveUser` / `rejectUser` remove from UI before server confirms; failed requests leave UI out of sync.
-
-10. **Duplicate song requests allowed** — Server comment acknowledges missing dedup (`handleRequestSong`).
-
-11. **`maxUsers` / `maxUpvotes` not enforced** — Room config fields exist but handlers never check them.
-
-12. **Admin multi-tab** — `sendToAdmin` delivers to first matching connection only; other admin tabs miss `song.requested` / `user.join_requested`.
-
-13. **Room cache never evicted** — `roomCache` grows; empty rooms stay in memory until process restart.
-
-14. **No WebSocket reconnect/rejoin** — Disconnect clears server-side presence; client stays on page with stale state until manual refresh.
-
-### Minor
-
-15. **Redundant payloads on join** — `room.joined` includes `queue`, then server also sends `queue.updated` with the same data.
-
-16. **`USER_REJECTED` schema** — Server sends `{ type: "user.rejected" }` with no payload; client clears state (works, but asymmetric with other events).
-
-17. **`findOrCreate` fallback** — If DB room missing, first joiner's `userId` is passed as `adminId` to `Room.findOrCreate` regardless of `user.isAdmin` flag.
-
-18. **Song reject does not broadcast queue** — Correct for queue (song was never `QUEUED`), but requester gets no feedback event.
-
-19. **Commented song-request timeout** — Auto-reject after timeout is stubbed in `room.ts`, not active.
-
----
-
-## File map
-
-| Layer | File |
-|-------|------|
-| Event constants | `apps/room-server/src/constants.ts`, `apps/web/lib/constants.ts` |
-| Zod schemas | `apps/room-server/src/types.ts`, `apps/web/types/websocket.ts` |
-| Server routing | `apps/room-server/src/handerFunctions.ts` |
-| Room logic / DB | `apps/room-server/src/room.ts` |
-| Client hook | `apps/web/hooks/useWebSocket.ts` |
-| Room UI | `apps/web/app/room/[code]/_components/_client.tsx` |
-| Admin playback | `now-playing-section.tsx`, `spotify-player.tsx` |