fix: Resolve all TypeScript build errors

package.json

@@ -5,8 +5,9 @@
   "description": "A democratic Spotify jukebox where everyone gets to contribute songs. Track order is determined by the D'Hondt method for fair distribution.",
   "type": "module",
   "scripts": {
+    "start": "node --import tsx src/server.ts",
     "dev": "vite",
-    "build": "vite build && tsc src/server.ts --outDir dist --module es2022 --target es2022 --moduleResolution node --skipLibCheck --esModuleInterop --allowSyntheticDefaultImports",
+    "build": "vite build && tsc --project tsconfig.app.json",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "echo \"No tests specified\" && exit 0"
@@ -77,6 +78,7 @@
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.21.0",
     "vaul": "^0.9.9",
     "zod": "^3.25.76"
   },

src/App.tsx

@@ -5,7 +5,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "@/contexts/AuthContext";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
-import { Suspense, lazy } from "react";
+import { lazy, Suspense } from "react";
+
 
 // Lazy load pages for better performance
 const Index = lazy(() => import("./pages/Index"));
@@ -24,15 +25,17 @@ const App = () => (
           <Toaster />
           <Sonner />
           <BrowserRouter>
-            <Routes>
-              <Route path="/" element={<Login />} />
-              <Route path="/rooms" element={<Rooms />} />
-              <Route path="/callback" element={<Callback />} />
-              <Route path="/app" element={<Index />} />
-              <Route path="/room/:roomId" element={<Index />} />
-              {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-              <Route path="*" element={<NotFound />} />
-            </Routes>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Routes>
+                <Route path="/" element={<Login />} />
+                <Route path="/rooms" element={<Rooms />} />
+                <Route path="/callback" element={<Callback />} />
+                <Route path="/app" element={<Index />} />
+                <Route path="/room/:roomId" element={<Index />} />
+                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </Suspense>
           </BrowserRouter>
         </TooltipProvider>
       </AuthProvider>

src/components/ui/button.tsx

@@ -18,4 +18,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button };
+export { Button, buttonVariants };

src/components/ui/calendar.tsx

@@ -42,8 +42,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />

src/components/ui/toggle.tsx

@@ -13,4 +13,4 @@ const Toggle = React.forwardRef<
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
-export { Toggle };
+export { Toggle, toggleVariants };

src/hooks/useSocket.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 import { Room, Track, SpotifyUser } from '@/types/wejay';
-import { toast } from '@/lib/toast';
+
 import { io, Socket } from 'socket.io-client';
 
 interface SocketState {

src/hooks/useSpotifyPlayer.ts

@@ -1,6 +1,18 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 
+interface WebPlaybackError {
+  message: string;
+}
+
+interface WebPlaybackReady {
+  device_id: string;
+}
+
+interface WebPlaybackNotReady {
+  device_id: string;
+}
+
 interface SpotifyPlayer {
   connect: () => Promise<boolean>;
   disconnect: () => void;
@@ -80,37 +92,44 @@ export function useSpotifyPlayer() {
       });
 
       // Error handling
-      spotifyPlayer.addListener('initialization_error', ({ message }) => {
+      spotifyPlayer.addListener('initialization_error', (data: unknown) => {
+        const { message } = data as WebPlaybackError;
         console.error('Spotify Player initialization error:', message);
       });
 
-      spotifyPlayer.addListener('authentication_error', ({ message }) => {
+      spotifyPlayer.addListener('authentication_error', (data: unknown) => {
+        const { message } = data as WebPlaybackError;
         console.error('Spotify Player authentication error:', message);
       });
 
-      spotifyPlayer.addListener('account_error', ({ message }) => {
+      spotifyPlayer.addListener('account_error', (data: unknown) => {
+        const { message } = data as WebPlaybackError;
         console.error('Spotify Player account error:', message);
       });
 
-      spotifyPlayer.addListener('playback_error', ({ message }) => {
+      spotifyPlayer.addListener('playback_error', (data: unknown) => {
+        const { message } = data as WebPlaybackError;
         console.error('Spotify Player playback error:', message);
       });
 
       // Ready
-      spotifyPlayer.addListener('ready', ({ device_id }) => {
+      spotifyPlayer.addListener('ready', (data: unknown) => {
+        const { device_id } = data as WebPlaybackReady;
         console.log('Spotify Player: Ready with device ID', device_id);
         setDeviceId(device_id);
         setIsReady(true);
       });
 
       // Not Ready
-      spotifyPlayer.addListener('not_ready', ({ device_id }) => {
+      spotifyPlayer.addListener('not_ready', (data: unknown) => {
+        const { device_id } = data as WebPlaybackNotReady;
         console.log('Spotify Player: Device has gone offline', device_id);
         setIsReady(false);
       });
 
       // Player state changed
-      spotifyPlayer.addListener('player_state_changed', (state: WebPlaybackState | null) => {
+      spotifyPlayer.addListener('player_state_changed', (data: unknown) => {
+        const state = data as WebPlaybackState | null;
         if (!state) {
           setCurrentTrack(null);
           setIsPlaying(false);

src/hooks/useSpotifySearch.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { searchSpotify, SpotifyTrack } from "@/lib/spotify";
 
 export function useSpotifySearch(query: string, enabled: boolean = true) {

src/lib/mockData.ts

@@ -41,6 +41,7 @@ export const mockSearchResults: Track[] = [
     duration: 200,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:0VjIjW4GlUZAmydPCpM16n",
   },
   {
     id: "track-2",
@@ -51,6 +52,7 @@ export const mockSearchResults: Track[] = [
     duration: 194,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:2FxmhksIbx3ea33S43A0D5",
   },
   {
     id: "track-3",
@@ -61,6 +63,7 @@ export const mockSearchResults: Track[] = [
     duration: 233,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:7qiZfU4dY1Kw1owLsZvIzS",
   },
   {
     id: "track-4",
@@ -71,6 +74,7 @@ export const mockSearchResults: Track[] = [
     duration: 209,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:1W6XKfQhNulGfsmlGpZOXb",
   },
   {
     id: "track-5",
@@ -81,6 +85,7 @@ export const mockSearchResults: Track[] = [
     duration: 174,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:6UelLqjlWMvsIVP0YcZSPc",
   },
   {
     id: "track-6",
@@ -91,6 +96,7 @@ export const mockSearchResults: Track[] = [
     duration: 203,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:5y2XqVxcqW8Gdil9KbdJXt",
   },
 ];
 
@@ -104,6 +110,7 @@ export const mockFavorites: Track[] = [
     duration: 354,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:4cOdK2wGLETOMsVvXh5gSd",
   },
   {
     id: "fav-2",
@@ -114,6 +121,7 @@ export const mockFavorites: Track[] = [
     duration: 390,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:40riOy7x9W7GXjyGp4pjAv",
   },
   {
     id: "fav-3",
@@ -124,6 +132,7 @@ export const mockFavorites: Track[] = [
     duration: 482,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:5CQ30WqJwPSw3PlHxlgVjM",
   },
   {
     id: "fav-4",
@@ -134,6 +143,7 @@ export const mockFavorites: Track[] = [
     duration: 187,
     addedBy: "",
     addedAt: new Date(),
+    spotifyId: "spotify:track:73vAVHHpwXecj4cPTuRJ2x",
   },
 ];
 
@@ -147,6 +157,7 @@ export const mockPlaylistTracks: Track[] = [
     duration: 230,
     addedBy: "user-2",
     addedAt: new Date(Date.now() - 300000),
+    spotifyId: "spotify:track:7lpZ3Xs5cLGLXoLwPcFj0Z",
   },
   {
     id: "pl-2",
@@ -157,12 +168,14 @@ export const mockPlaylistTracks: Track[] = [
     duration: 187,
     addedBy: "user-2",
     addedAt: new Date(Date.now() - 200000),
+    spotifyId: "spotify:track:4S29IqW2q5tA51yFkQ9T6F",
   },
   {
     id: "pl-3",
     name: "Uptown Funk",
     artist: "Bruno Mars",
     album: "Uptown Special",
+    spotifyId: "spotify:track:7yu7Wl9v1SG8bGrKb7c3Q4",
     albumArt: "https://i.scdn.co/image/ab67616d0000b273e419ccba0baa8bd3f3d7abf2",
     duration: 269,
     addedBy: "user-3",

src/pages/Index.tsx

@@ -29,7 +29,7 @@ const Index = () => {
     isConnected, 
     currentRoom, 
     tracks: socketTracks,
-    playbackState: socketPlaybackState,
+
     joinRoom, 
     leaveRoom,
     addTrack: socketAddTrack,
@@ -184,11 +184,7 @@ const Index = () => {
     }
   }, [arrangedPlaylist, isConnected, currentRoom, trackEnded]);
 
-  const handleSkip = useCallback(() => {
-    if (arrangedPlaylist.length > 0) {
-      handleTrackEnd();
-    }
-  }, [handleTrackEnd, arrangedPlaylist]);
+
 
   // handlePlayPause is now handled by SpotifyPlayer component