864 lines
35 KiB
TypeScript
864 lines
35 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { usePreferences } from "@/contexts/preferences-context"
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { UserAvatar } from "@/components/ui/user-avatar"
|
|
import {
|
|
User,
|
|
Palette,
|
|
Bell,
|
|
Eye,
|
|
Shield,
|
|
Sparkles,
|
|
Check,
|
|
ArrowLeft,
|
|
Lock
|
|
} from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
// Avatar color palette - Jewel Tones with XP unlock tiers
|
|
const PRESET_COLORS = [
|
|
// Starter Tier (0 XP) - Always unlocked
|
|
{ value: "#0F4C81", name: "Sapphire", tier: "Starter", xpRequired: 0 },
|
|
{ value: "#9B111E", name: "Ruby", tier: "Starter", xpRequired: 0 },
|
|
{ value: "#50C878", name: "Emerald", tier: "Starter", xpRequired: 0 },
|
|
{ value: "#9966CC", name: "Amethyst", tier: "Starter", xpRequired: 0 },
|
|
// Bronze Tier (100 XP)
|
|
{ value: "#0D98BA", name: "Topaz", tier: "Bronze", xpRequired: 100 },
|
|
{ value: "#E0115F", name: "Rose Quartz", tier: "Bronze", xpRequired: 100 },
|
|
{ value: "#082567", name: "Lapis", tier: "Bronze", xpRequired: 100 },
|
|
{ value: "#FF7518", name: "Carnelian", tier: "Bronze", xpRequired: 100 },
|
|
// Silver Tier (500 XP)
|
|
{ value: "#006B3C", name: "Jade", tier: "Silver", xpRequired: 500 },
|
|
{ value: "#1C1C1C", name: "Onyx", tier: "Silver", xpRequired: 500 },
|
|
// Gold Tier (1000 XP)
|
|
{ value: "#E6E200", name: "Citrine", tier: "Gold", xpRequired: 1000 },
|
|
{ value: "#702963", name: "Garnet", tier: "Gold", xpRequired: 1000 },
|
|
]
|
|
|
|
export default function SettingsPage() {
|
|
const { preferences, updatePreferences, loading } = usePreferences()
|
|
const { user, refreshUser } = useAuth()
|
|
|
|
// Profile state
|
|
const [bio, setBio] = useState("")
|
|
const [username, setUsername] = useState("")
|
|
const [location, setLocation] = useState("")
|
|
const [blueskyHandle, setBlueskyHandle] = useState("")
|
|
const [mastodonHandle, setMastodonHandle] = useState("")
|
|
const [instagramHandle, setInstagramHandle] = useState("")
|
|
const [profileSaving, setProfileSaving] = useState(false)
|
|
const [profileSaved, setProfileSaved] = useState(false)
|
|
|
|
// Avatar state
|
|
const [avatarBgColor, setAvatarBgColor] = useState("#0F4C81")
|
|
const [avatarText, setAvatarText] = useState("")
|
|
const [avatarSaving, setAvatarSaving] = useState(false)
|
|
const [avatarSaved, setAvatarSaved] = useState(false)
|
|
const [avatarError, setAvatarError] = useState("")
|
|
|
|
// Privacy state
|
|
const [privacySettings, setPrivacySettings] = useState({
|
|
profile_public: true,
|
|
show_attendance_public: true,
|
|
appear_in_leaderboards: true
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
const extUser = user as any
|
|
setBio(extUser.bio || "")
|
|
setUsername(extUser.email?.split('@')[0] || "")
|
|
setLocation(extUser.location || "")
|
|
setBlueskyHandle(extUser.bluesky_handle || "")
|
|
setMastodonHandle(extUser.mastodon_handle || "")
|
|
setInstagramHandle(extUser.instagram_handle || "")
|
|
setAvatarBgColor(extUser.avatar_bg_color || "#0F4C81")
|
|
setAvatarText(extUser.avatar_text || "")
|
|
setPrivacySettings({
|
|
profile_public: extUser.profile_public ?? true,
|
|
show_attendance_public: extUser.show_attendance_public ?? true,
|
|
appear_in_leaderboards: extUser.appear_in_leaderboards ?? true
|
|
})
|
|
}
|
|
}, [user])
|
|
|
|
const handleSaveProfile = async () => {
|
|
setProfileSaving(true)
|
|
setProfileSaved(false)
|
|
const token = localStorage.getItem("token")
|
|
try {
|
|
await fetch(`${getApiUrl()}/users/me`, {
|
|
method: "PATCH",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Authorization": `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({
|
|
bio,
|
|
username,
|
|
location,
|
|
bluesky_handle: blueskyHandle,
|
|
mastodon_handle: mastodonHandle,
|
|
instagram_handle: instagramHandle
|
|
})
|
|
})
|
|
setProfileSaved(true)
|
|
setTimeout(() => setProfileSaved(false), 2000)
|
|
} catch (e) {
|
|
console.error(e)
|
|
} finally {
|
|
setProfileSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleAvatarTextChange = (value: string) => {
|
|
const cleaned = value.replace(/[^A-Za-z0-9]/g, '').slice(0, 3).toUpperCase()
|
|
setAvatarText(cleaned)
|
|
setAvatarError("")
|
|
}
|
|
|
|
const handleSaveAvatar = async () => {
|
|
setAvatarSaving(true)
|
|
setAvatarSaved(false)
|
|
setAvatarError("")
|
|
|
|
try {
|
|
const token = localStorage.getItem("token")
|
|
const res = await fetch(`${getApiUrl()}/users/me/avatar`, {
|
|
method: "PATCH",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
bg_color: avatarBgColor,
|
|
text: avatarText || null,
|
|
}),
|
|
})
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json()
|
|
throw new Error(data.detail || "Failed to save")
|
|
}
|
|
|
|
setAvatarSaved(true)
|
|
refreshUser?.()
|
|
setTimeout(() => setAvatarSaved(false), 2000)
|
|
} catch (e: any) {
|
|
setAvatarError(e.message || "Failed to save avatar")
|
|
} finally {
|
|
setAvatarSaving(false)
|
|
}
|
|
}
|
|
|
|
const handlePrivacyChange = async (key: string, value: boolean) => {
|
|
// Optimistic update
|
|
setPrivacySettings(prev => ({ ...prev, [key]: value }))
|
|
|
|
try {
|
|
const token = localStorage.getItem("token")
|
|
await fetch(`${getApiUrl()}/users/me/privacy`, {
|
|
method: "PATCH",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ [key]: value }),
|
|
})
|
|
} catch (e) {
|
|
// Revert on error
|
|
setPrivacySettings(prev => ({ ...prev, [key]: !value }))
|
|
console.error("Failed to update privacy setting:", e)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[50vh]">
|
|
<div className="animate-pulse text-muted-foreground">Loading settings...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-4 py-20 min-h-[50vh]">
|
|
<h1 className="text-2xl font-bold">Please Log In</h1>
|
|
<p className="text-muted-foreground">You need to be logged in to access settings.</p>
|
|
<Link href="/login">
|
|
<Button>Log In</Button>
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="container max-w-6xl py-8">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<Link href="/profile">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
|
|
<p className="text-muted-foreground">Manage your account and preferences</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop: Side-by-side layout, Mobile: Tabs */}
|
|
<div className="hidden lg:grid lg:grid-cols-[280px_1fr] lg:gap-8">
|
|
{/* Sidebar Navigation - Sticky */}
|
|
<nav className="space-y-1 sticky top-24 self-start">
|
|
<SidebarLink icon={User} label="Profile" href="#profile" active />
|
|
<SidebarLink icon={Palette} label="Appearance" href="#appearance" />
|
|
<SidebarLink icon={Eye} label="Display" href="#display" />
|
|
<SidebarLink icon={Bell} label="Notifications" href="#notifications" />
|
|
<SidebarLink icon={Shield} label="Privacy" href="#privacy" />
|
|
</nav>
|
|
|
|
{/* Settings Content */}
|
|
<div className="space-y-8">
|
|
<ProfileSection
|
|
bio={bio}
|
|
setBio={setBio}
|
|
username={username}
|
|
setUsername={setUsername}
|
|
location={location}
|
|
setLocation={setLocation}
|
|
blueskyHandle={blueskyHandle}
|
|
setBlueskyHandle={setBlueskyHandle}
|
|
mastodonHandle={mastodonHandle}
|
|
setMastodonHandle={setMastodonHandle}
|
|
instagramHandle={instagramHandle}
|
|
setInstagramHandle={setInstagramHandle}
|
|
saving={profileSaving}
|
|
saved={profileSaved}
|
|
onSave={handleSaveProfile}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<AppearanceSection
|
|
avatarBgColor={avatarBgColor}
|
|
setAvatarBgColor={setAvatarBgColor}
|
|
avatarText={avatarText}
|
|
handleAvatarTextChange={handleAvatarTextChange}
|
|
username={username}
|
|
saving={avatarSaving}
|
|
saved={avatarSaved}
|
|
error={avatarError}
|
|
onSave={handleSaveAvatar}
|
|
userXp={(user as any)?.xp || 0}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<DisplaySection
|
|
preferences={preferences}
|
|
updatePreferences={updatePreferences}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<NotificationsSection preferences={preferences} updatePreferences={updatePreferences} />
|
|
|
|
<Separator />
|
|
|
|
<PrivacySection settings={privacySettings} onChange={handlePrivacyChange} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile: Tabs Layout */}
|
|
<div className="lg:hidden">
|
|
<Tabs defaultValue="profile" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-5 mb-6">
|
|
<TabsTrigger value="profile" className="text-xs">
|
|
<User className="h-4 w-4" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="appearance" className="text-xs">
|
|
<Palette className="h-4 w-4" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="display" className="text-xs">
|
|
<Eye className="h-4 w-4" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="notifications" className="text-xs">
|
|
<Bell className="h-4 w-4" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="privacy" className="text-xs">
|
|
<Shield className="h-4 w-4" />
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="profile">
|
|
<ProfileSection
|
|
bio={bio}
|
|
setBio={setBio}
|
|
username={username}
|
|
setUsername={setUsername}
|
|
location={location}
|
|
setLocation={setLocation}
|
|
blueskyHandle={blueskyHandle}
|
|
setBlueskyHandle={setBlueskyHandle}
|
|
mastodonHandle={mastodonHandle}
|
|
setMastodonHandle={setMastodonHandle}
|
|
instagramHandle={instagramHandle}
|
|
setInstagramHandle={setInstagramHandle}
|
|
saving={profileSaving}
|
|
saved={profileSaved}
|
|
onSave={handleSaveProfile}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="appearance">
|
|
<AppearanceSection
|
|
avatarBgColor={avatarBgColor}
|
|
setAvatarBgColor={setAvatarBgColor}
|
|
avatarText={avatarText}
|
|
handleAvatarTextChange={handleAvatarTextChange}
|
|
username={username}
|
|
saving={avatarSaving}
|
|
saved={avatarSaved}
|
|
error={avatarError}
|
|
onSave={handleSaveAvatar}
|
|
userXp={(user as any)?.xp || 0}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="display">
|
|
<DisplaySection
|
|
preferences={preferences}
|
|
updatePreferences={updatePreferences}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="notifications">
|
|
<NotificationsSection preferences={preferences} updatePreferences={updatePreferences} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="privacy">
|
|
<PrivacySection settings={privacySettings} onChange={handlePrivacyChange} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Sidebar Link Component
|
|
function SidebarLink({ icon: Icon, label, href, active }: {
|
|
icon: any,
|
|
label: string,
|
|
href: string,
|
|
active?: boolean
|
|
}) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${active
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-muted'
|
|
}`}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{label}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
// Profile Section
|
|
function ProfileSection({
|
|
bio, setBio, username, setUsername,
|
|
location, setLocation,
|
|
blueskyHandle, setBlueskyHandle,
|
|
mastodonHandle, setMastodonHandle,
|
|
instagramHandle, setInstagramHandle,
|
|
saving, saved, onSave
|
|
}: any) {
|
|
return (
|
|
<Card id="profile">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<User className="h-5 w-5" />
|
|
Profile
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Your public profile information visible to other users
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">Username</Label>
|
|
<Input
|
|
id="username"
|
|
placeholder="Your display name"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
This will be shown on your profile and comments
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="location">Location / Local Scene</Label>
|
|
<Input
|
|
id="location"
|
|
placeholder="e.g. Portland, OR"
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Your hometown or local music scene
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bio">Bio</Label>
|
|
<Textarea
|
|
id="bio"
|
|
placeholder="Tell other fans about yourself... When did you start following the band?"
|
|
value={bio}
|
|
onChange={(e) => setBio(e.target.value)}
|
|
rows={4}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Markdown is supported. Max 500 characters.
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Social Handles Section */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-medium text-sm mb-1">Social Links</h4>
|
|
<p className="text-xs text-muted-foreground">Connect your accounts (displayed on your public profile)</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bluesky" className="flex items-center gap-2">
|
|
BlueSky
|
|
</Label>
|
|
<Input
|
|
id="bluesky"
|
|
placeholder="handle.bsky.social"
|
|
value={blueskyHandle}
|
|
onChange={(e) => setBlueskyHandle(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="mastodon" className="flex items-center gap-2">
|
|
Mastodon
|
|
</Label>
|
|
<Input
|
|
id="mastodon"
|
|
placeholder="@user@instance.social"
|
|
value={mastodonHandle}
|
|
onChange={(e) => setMastodonHandle(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="instagram" className="flex items-center gap-2">
|
|
Instagram
|
|
</Label>
|
|
<Input
|
|
id="instagram"
|
|
placeholder="@username"
|
|
value={instagramHandle}
|
|
onChange={(e) => setInstagramHandle(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button onClick={onSave} disabled={saving}>
|
|
{saving ? "Saving..." : saved ? "Saved ✓" : "Save Changes"}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Appearance Section
|
|
function AppearanceSection({
|
|
avatarBgColor,
|
|
setAvatarBgColor,
|
|
avatarText,
|
|
handleAvatarTextChange,
|
|
username,
|
|
saving,
|
|
saved,
|
|
error,
|
|
onSave,
|
|
userXp = 0
|
|
}: any) {
|
|
return (
|
|
<Card id="appearance">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Palette className="h-5 w-5" />
|
|
Appearance
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Customize how you appear across the site. Earn XP to unlock more colors!
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* Avatar Preview */}
|
|
<div className="flex flex-col md:flex-row gap-6 items-start md:items-center">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<UserAvatar
|
|
bgColor={avatarBgColor}
|
|
text={avatarText}
|
|
username={username}
|
|
size="xl"
|
|
/>
|
|
<span className="text-xs text-muted-foreground">Preview</span>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Avatar Text (1-3 characters)</Label>
|
|
<Input
|
|
placeholder="e.g. ABC or 42"
|
|
value={avatarText}
|
|
onChange={(e) => handleAvatarTextChange(e.target.value)}
|
|
maxLength={3}
|
|
className="max-w-[200px] text-center text-lg font-bold uppercase"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Leave empty to show first letter of username
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Color Grid with Tiers */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label>Background Color</Label>
|
|
<span className="text-xs text-muted-foreground">Your XP: {userXp}</span>
|
|
</div>
|
|
<div className="grid grid-cols-6 gap-3">
|
|
{PRESET_COLORS.map((color) => {
|
|
const isLocked = userXp < color.xpRequired
|
|
return (
|
|
<button
|
|
key={color.value}
|
|
onClick={() => !isLocked && setAvatarBgColor(color.value)}
|
|
disabled={isLocked}
|
|
className={`relative aspect-square rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring ${isLocked
|
|
? 'opacity-40 cursor-not-allowed'
|
|
: 'hover:scale-110'
|
|
}`}
|
|
style={{ backgroundColor: color.value }}
|
|
title={isLocked
|
|
? `${color.name} - Unlock at ${color.xpRequired} XP`
|
|
: `${color.name} (${color.tier})`
|
|
}
|
|
>
|
|
{avatarBgColor === color.value && !isLocked && (
|
|
<Check className="absolute inset-0 m-auto h-5 w-5 text-white drop-shadow-lg" />
|
|
)}
|
|
{isLocked && (
|
|
<Lock className="absolute inset-0 m-auto h-4 w-4 text-white/70 drop-shadow-lg" />
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Earn XP by attending shows, writing reviews, and rating performances
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
)}
|
|
|
|
<div className="flex justify-end">
|
|
<Button onClick={onSave} disabled={saving}>
|
|
{saving ? "Saving..." : saved ? "Saved" : "Save Avatar"}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Display Section
|
|
function DisplaySection({ preferences, updatePreferences }: any) {
|
|
return (
|
|
<Card id="display">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Eye className="h-5 w-5" />
|
|
Display Preferences
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Control what you see while browsing
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<SettingRow
|
|
label="Wiki Mode"
|
|
description="Hide all social features (comments, ratings, reviews) for a pure archive experience"
|
|
checked={preferences.wiki_mode}
|
|
onChange={(checked: boolean) => updatePreferences({ wiki_mode: checked })}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Show Ratings"
|
|
description="Display community ratings on shows, songs, and performances"
|
|
checked={preferences.show_ratings}
|
|
onChange={(checked: boolean) => updatePreferences({ show_ratings: checked })}
|
|
disabled={preferences.wiki_mode}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Show Comments"
|
|
description="Display comment sections on pages"
|
|
checked={preferences.show_comments}
|
|
onChange={(checked: boolean) => updatePreferences({ show_comments: checked })}
|
|
disabled={preferences.wiki_mode}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Show Heady Badges"
|
|
description="Display special badges for top-rated performances"
|
|
checked={true}
|
|
onChange={() => { }}
|
|
comingSoon
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Notifications Section
|
|
function NotificationsSection({ preferences, updatePreferences }: any) {
|
|
return (
|
|
<Card id="notifications">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Bell className="h-5 w-5" />
|
|
Notifications
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Choose what email notifications you receive
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<SettingRow
|
|
label="Comment Replies"
|
|
description="Get an email when someone replies to your review or comment"
|
|
checked={preferences.email_on_reply ?? true}
|
|
onChange={(checked: boolean) => updatePreferences({ email_on_reply: checked })}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Chase Song Alerts"
|
|
description="Get an email when a song on your chase list gets played at a show"
|
|
checked={preferences.email_on_chase ?? true}
|
|
onChange={(checked: boolean) => updatePreferences({ email_on_chase: checked })}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Weekly Digest"
|
|
description="Receive a weekly email with site highlights and new shows"
|
|
checked={preferences.email_digest ?? false}
|
|
onChange={(checked: boolean) => updatePreferences({ email_digest: checked })}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Privacy Section
|
|
function PrivacySection({ settings, onChange }: {
|
|
settings: { profile_public: boolean; show_attendance_public: boolean; appear_in_leaderboards: boolean };
|
|
onChange: (key: string, value: boolean) => void;
|
|
}) {
|
|
return (
|
|
<Card id="privacy">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Shield className="h-5 w-5" />
|
|
Privacy
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Control your privacy and data
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<SettingRow
|
|
label="Public Profile"
|
|
description="Allow other users to view your profile, attendance history, and reviews"
|
|
checked={settings.profile_public}
|
|
onChange={(checked) => onChange("profile_public", checked)}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Show Attendance"
|
|
description="Display which shows you've attended on your public profile"
|
|
checked={settings.show_attendance_public}
|
|
onChange={(checked) => onChange("show_attendance_public", checked)}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<SettingRow
|
|
label="Appear in Leaderboards"
|
|
description="Allow your name to appear on community leaderboards"
|
|
checked={settings.appear_in_leaderboards}
|
|
onChange={(checked) => onChange("appear_in_leaderboards", checked)}
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<div className="pt-4">
|
|
<h4 className="text-sm font-medium mb-2">Danger Zone</h4>
|
|
<div className="flex flex-col gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-fit"
|
|
onClick={async () => {
|
|
const token = localStorage.getItem("token")
|
|
if (!token) return
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/users/me/export`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
})
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = 'my-fediversion-data.json'
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
} catch (err) {
|
|
console.error('Export failed', err)
|
|
}
|
|
}}
|
|
>
|
|
Export My Data
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="w-fit"
|
|
onClick={async () => {
|
|
const email = prompt("To delete your account, please type your email address:")
|
|
if (!email) return
|
|
const confirm = window.confirm("Are you absolutely sure? This action cannot be undone. All your data will be permanently deleted.")
|
|
if (!confirm) return
|
|
|
|
const token = localStorage.getItem("token")
|
|
if (!token) return
|
|
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/users/me`, {
|
|
method: "DELETE",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({ confirm_email: email })
|
|
})
|
|
if (res.ok) {
|
|
alert("Account deleted. Goodbye!")
|
|
localStorage.removeItem("token")
|
|
window.location.href = "/"
|
|
} else {
|
|
const data = await res.json()
|
|
alert(data.detail || "Deletion failed")
|
|
}
|
|
} catch (err) {
|
|
console.error('Deletion failed', err)
|
|
alert("Error deleting account")
|
|
}
|
|
}}
|
|
>
|
|
Delete Account
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Account deletion is permanent and cannot be undone.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Reusable Setting Row
|
|
function SettingRow({
|
|
label,
|
|
description,
|
|
checked,
|
|
onChange,
|
|
disabled,
|
|
comingSoon
|
|
}: {
|
|
label: string
|
|
description: string
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
disabled?: boolean
|
|
comingSoon?: boolean
|
|
}) {
|
|
return (
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-0.5 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<Label className="text-base font-medium">{label}</Label>
|
|
{comingSoon && (
|
|
<span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground">
|
|
Coming soon
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={checked}
|
|
onCheckedChange={onChange}
|
|
disabled={disabled || comingSoon}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|