add user settings

src/app/api/settings/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireAuth } from '@/lib/auth'
+import { getUserSettings, updateUserSettings } from '@/lib/settings'
+import type { UserSettings } from '@/types'
+
+export async function GET(req: NextRequest) {
+  const auth = await requireAuth(req)
+  if (auth instanceof NextResponse) return auth
+
+  const settings = getUserSettings(auth.session.userId)
+  return NextResponse.json(settings)
+}
+
+export async function PUT(req: NextRequest) {
+  const auth = await requireAuth(req)
+  if (auth instanceof NextResponse) return auth
+
+  let body: unknown
+  try {
+    body = await req.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 })
+  }
+
+  const s = body as Record<string, unknown>
+  const boolFields: (keyof UserSettings)[] = [
+    'mixedAutoplay', 'mixedLoop', 'mixedMuted',
+    'moviesAutoplay', 'moviesLoop', 'moviesMuted',
+    'tvAutoplay', 'tvLoop', 'tvMuted',
+  ]
+  for (const field of boolFields) {
+    if (typeof s[field] !== 'boolean') {
+      return NextResponse.json({ error: `Invalid value for ${field}` }, { status: 400 })
+    }
+  }
+
+  updateUserSettings(auth.session.userId, s as unknown as UserSettings)
+  return NextResponse.json({ ok: true })
+}

src/app/settings/SettingsForm.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import { useState } from 'react'
+import type { UserSettings } from '@/types'
+
+interface Props {
+  initialSettings: UserSettings
+}
+
+interface ToggleProps {
+  label: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}
+
+function Toggle({ label, checked, onChange }: ToggleProps) {
+  return (
+    <label className="flex items-center justify-between py-2 cursor-pointer select-none">
+      <span className="text-sm" style={{ color: 'var(--text-primary)' }}>
+        {label}
+      </span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        onClick={() => onChange(!checked)}
+        className="relative w-10 h-6 rounded-full transition-colors flex-shrink-0"
+        style={{
+          backgroundColor: checked ? 'var(--accent)' : 'var(--border)',
+        }}
+      >
+        <span
+          className="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
+          style={{ transform: checked ? 'translateX(16px)' : 'translateX(0)' }}
+        />
+      </button>
+    </label>
+  )
+}
+
+interface SectionProps {
+  title: string
+  icon: string
+  children: React.ReactNode
+}
+
+function SettingsSection({ title, icon, children }: SectionProps) {
+  return (
+    <div
+      className="rounded-xl p-5 mb-4"
+      style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+    >
+      <h2 className="text-sm font-semibold uppercase tracking-wider mb-3 flex items-center gap-2"
+        style={{ color: 'var(--text-secondary)' }}>
+        <span>{icon}</span>
+        {title}
+      </h2>
+      <div className="divide-y" style={{ borderColor: 'var(--border)' }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default function SettingsForm({ initialSettings }: Props) {
+  const [settings, setSettings] = useState<UserSettings>(initialSettings)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  function set<K extends keyof UserSettings>(key: K, value: boolean) {
+    setSettings((prev) => ({ ...prev, [key]: value }))
+    setSaved(false)
+  }
+
+  async function handleSave() {
+    setSaving(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      })
+      if (!res.ok) throw new Error('Failed to save')
+      setSaved(true)
+    } catch {
+      setError('Failed to save settings. Please try again.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="max-w-md">
+      <SettingsSection title="Mixed Library" icon="🗂️">
+        <Toggle label="Autoplay" checked={settings.mixedAutoplay} onChange={(v) => set('mixedAutoplay', v)} />
+        <Toggle label="Loop" checked={settings.mixedLoop} onChange={(v) => set('mixedLoop', v)} />
+        <Toggle label="Start muted" checked={settings.mixedMuted} onChange={(v) => set('mixedMuted', v)} />
+      </SettingsSection>
+
+      <SettingsSection title="Movies" icon="🎬">
+        <Toggle label="Autoplay" checked={settings.moviesAutoplay} onChange={(v) => set('moviesAutoplay', v)} />
+        <Toggle label="Loop" checked={settings.moviesLoop} onChange={(v) => set('moviesLoop', v)} />
+        <Toggle label="Start muted" checked={settings.moviesMuted} onChange={(v) => set('moviesMuted', v)} />
+      </SettingsSection>
+
+      <SettingsSection title="TV Shows" icon="📺">
+        <Toggle label="Autoplay" checked={settings.tvAutoplay} onChange={(v) => set('tvAutoplay', v)} />
+        <Toggle label="Loop" checked={settings.tvLoop} onChange={(v) => set('tvLoop', v)} />
+        <Toggle label="Start muted" checked={settings.tvMuted} onChange={(v) => set('tvMuted', v)} />
+      </SettingsSection>
+
+      <div className="flex items-center gap-3 mt-2">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="px-4 py-2 rounded-lg text-sm font-medium transition-opacity"
+          style={{ backgroundColor: 'var(--accent)', color: '#fff', opacity: saving ? 0.6 : 1 }}
+        >
+          {saving ? 'Saving…' : 'Save Settings'}
+        </button>
+        {saved && (
+          <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            Saved
+          </span>
+        )}
+        {error && (
+          <span className="text-sm" style={{ color: '#ef4444' }}>
+            {error}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

src/app/settings/page.tsx

@@ -0,0 +1,27 @@
+import { redirect } from 'next/navigation'
+import { getServerSession } from '@/lib/auth'
+import { getUserSettings } from '@/lib/settings'
+import SettingsForm from './SettingsForm'
+
+export default async function SettingsPage() {
+  const session = await getServerSession()
+  if (!session.userId) redirect('/login')
+
+  const settings = getUserSettings(session.userId)
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-2xl font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+        Settings
+      </h1>
+      <p className="text-sm mb-8" style={{ color: 'var(--text-secondary)' }}>
+        Signed in as <strong>{session.username}</strong>
+      </p>
+
+      <h2 className="text-base font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+        Video Playback
+      </h2>
+      <SettingsForm initialSettings={settings} />
+    </div>
+  )
+}