YouTube Integration

.dockerignore

@@ -0,0 +1,69 @@
+# Dependencies
+**/node_modules
+**/dist
+**/build
+**/.next
+**/out
+
+# Logs
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+**/lerna-debug.log*
+
+# Runtime data
+**/pids
+**/*.pid
+**/*.seed
+**/*.pid.lock
+
+# Coverage directory used by tools like istanbul
+**/coverage
+**/*.lcov
+
+# nyc test coverage
+**/.nyc_output
+
+# Git
+**/.git
+**/.gitignore
+
+# Docker
+**/.dockerignore
+**/Dockerfile*
+**/docker-compose*.yml
+
+# IDEs
+**/.vscode
+**/.idea
+**/*.swp
+**/*.swo
+
+# OS
+**/.DS_Store
+**/Thumbs.db
+
+# Build artifacts
+**/tsconfig.tsbuildinfo
+**/.turbo
+
+# Environment files
+**/.env
+**/.env.local
+**/.env.development.local
+**/.env.test.local
+**/.env.production.local
+
+# Temporary files
+**/tmp
+**/temp
+
+# Test files
+**/__tests__
+**/*.test.*
+**/*.spec.*
+
+# Audio files (these should be uploaded separately)
+**/*.mp3
+**/*.wav
+**/*.ogg

DockerfileClient

@@ -0,0 +1,22 @@
+# apps/client/Dockerfile
+FROM oven/bun:1.1.38
+
+WORKDIR /app
+
+# Copy full monorepo to Docker
+COPY . .
+
+WORKDIR /app/apps/client
+
+# Install deps using workspaces
+RUN bun install
+
+# Set NODE_ENV for production build
+ENV NODE_ENV=production
+
+# Build the Next.js application
+RUN bun run build
+
+EXPOSE 3000
+
+CMD ["bun", "run", "start"]

DockerfileServer

@@ -0,0 +1,19 @@
+# apps/server/Dockerfile
+FROM oven/bun:1.2.18
+
+WORKDIR /app
+
+# Copy full monorepo to Docker
+COPY . .
+
+WORKDIR /app/apps/server
+
+# Install deps using workspaces
+RUN bun install
+
+# Optional: if you use tsc, vite, etc.
+# RUN bun run build
+
+EXPOSE 3001
+
+CMD ["bun", "run", "start"]

apps/client/next.config.ts

@@ -20,6 +20,16 @@ const nextConfig: NextConfig = {
   },
   // This is required to support PostHog trailing slash API requests
   skipTrailingSlashRedirect: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "i.ytimg.com",
+        port: "",
+        pathname: "/**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

apps/client/src/app/layout.tsx

@@ -46,7 +46,7 @@ export default function RootLayout({
         <PostHogProvider>
           <TQProvider>
             {children}
-            <Toaster />
+            <Toaster richColors={true} />
             <Analytics />
           </TQProvider>
         </PostHogProvider>

apps/client/src/components/Queue.tsx

@@ -10,6 +10,7 @@ import { AudioSourceType } from "@beatsync/shared";
 import { MoreHorizontal, Pause, Play, UploadCloud } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { usePostHog } from "posthog-js/react";
+import { Button } from "./ui/button";
 
 export const Queue = ({ className, ...rest }: React.ComponentProps<"div">) => {
   const posthog = usePostHog();
@@ -80,13 +81,13 @@ export const Queue = ({ className, ...rest }: React.ComponentProps<"div">) => {
                   {/* Track number / Play icon */}
                   <div className="w-6 h-6 flex-shrink-0 flex items-center justify-center relative cursor-default select-none">
                     {/* Play/Pause button (shown on hover) */}
-                    <button className="text-white text-sm hover:scale-110 transition-transform w-full h-full flex items-center justify-center absolute inset-0 opacity-0 group-hover:opacity-100 select-none">
+                    <Button variant={"ghost"} className="text-white text-sm hover:scale-110 transition-transform w-full h-full flex items-center justify-center absolute inset-0 opacity-0 group-hover:opacity-100 select-none">
                       {isSelected && isPlaying ? (
                         <Pause className="fill-current size-3.5 stroke-1" />
                       ) : (
                         <Play className="fill-current size-3.5" />
                       )}
-                    </button>
+                    </Button>
 
                     {/* Playing indicator or track number (hidden on hover) */}
                     <div className="w-full h-full flex items-center justify-center group-hover:opacity-0 select-none">
@@ -133,9 +134,9 @@ export const Queue = ({ className, ...rest }: React.ComponentProps<"div">) => {
                         asChild
                         onClick={(e) => e.stopPropagation()}
                       >
-                        <button className="p-1 rounded-full text-neutral-500 hover:text-white transition-colors hover:scale-110 duration-150 focus:outline-none focus:text-white focus:scale-110">
+                        <Button variant={"ghost"} className="p-1 rounded-full text-neutral-500 hover:text-white transition-colors hover:scale-110 duration-150 focus:outline-none focus:text-white focus:scale-110">
                           <MoreHorizontal className="size-4" />
-                        </button>
+                        </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent
                         side="top"