feat: Redesign settings page with comprehensive sections, sidebar nav, and distinct avatar colors
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
a4d63a9e2c
commit
f989414323
3 changed files with 656 additions and 119 deletions
|
|
@ -17,29 +17,28 @@ class UserProfileUpdate(BaseModel):
|
|||
avatar_bg_color: Optional[str] = None
|
||||
avatar_text: Optional[str] = None
|
||||
|
||||
# Preset avatar colors
|
||||
# Preset avatar colors - more distinct palette
|
||||
AVATAR_COLORS = [
|
||||
"#3B82F6", # Blue
|
||||
"#EF4444", # Red
|
||||
"#10B981", # Green
|
||||
"#F59E0B", # Amber
|
||||
"#8B5CF6", # Purple
|
||||
"#EC4899", # Pink
|
||||
"#6366F1", # Indigo
|
||||
"#14B8A6", # Teal
|
||||
"#1E3A8A", # Deep Blue
|
||||
"#DC2626", # Bright Red
|
||||
"#059669", # Emerald
|
||||
"#D97706", # Amber/Orange
|
||||
"#7C3AED", # Vibrant Purple
|
||||
"#DB2777", # Magenta Pink
|
||||
"#0F766E", # Teal
|
||||
"#1F2937", # Dark Gray
|
||||
"#B45309", # Burnt Orange
|
||||
"#4338CA", # Indigo
|
||||
"#0891B2", # Cyan
|
||||
"#65A30D", # Lime Green
|
||||
]
|
||||
|
||||
class AvatarUpdate(BaseModel):
|
||||
bg_color: Optional[str] = None
|
||||
text: Optional[str] = None # 1-3 alphanumeric chars
|
||||
|
||||
@router.get("/{user_id}", response_model=UserRead)
|
||||
def get_user_public(user_id: int, session: Session = Depends(get_session)):
|
||||
"""Get public user profile"""
|
||||
user = session.get(User, user_id)
|
||||
if not user:
|
||||
raise HTTPException(status_code=404, detail="User not found")
|
||||
return user
|
||||
# Note: Dynamic routes like /{user_id} are placed at the END of this file
|
||||
# to avoid conflicts with static routes like /me and /avatar
|
||||
|
||||
@router.patch("/me", response_model=UserRead)
|
||||
def update_my_profile(
|
||||
|
|
@ -241,3 +240,13 @@ def get_user_groups(
|
|||
.limit(limit)
|
||||
).all()
|
||||
return groups
|
||||
|
||||
# --- Dynamic ID Routes (must be last to avoid conflicts with /me, /avatar) ---
|
||||
|
||||
@router.get("/{user_id}", response_model=UserRead)
|
||||
def get_user_public(user_id: int, session: Session = Depends(get_session)):
|
||||
"""Get public user profile"""
|
||||
user = session.get(User, user_id)
|
||||
if not user:
|
||||
raise HTTPException(status_code=404, detail="User not found")
|
||||
return user
|
||||
|
|
|
|||
|
|
@ -7,28 +7,70 @@ 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 { AvatarSettings } from "@/components/profile/avatar-settings"
|
||||
import { UserAvatar } from "@/components/ui/user-avatar"
|
||||
import {
|
||||
User,
|
||||
Palette,
|
||||
Bell,
|
||||
Eye,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Check,
|
||||
ArrowLeft
|
||||
} from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
// Avatar color palette - more distinct colors
|
||||
const PRESET_COLORS = [
|
||||
{ value: "#1E3A8A", name: "Deep Blue" },
|
||||
{ value: "#DC2626", name: "Bright Red" },
|
||||
{ value: "#059669", name: "Emerald" },
|
||||
{ value: "#D97706", name: "Amber" },
|
||||
{ value: "#7C3AED", name: "Violet" },
|
||||
{ value: "#DB2777", name: "Magenta" },
|
||||
{ value: "#0F766E", name: "Teal" },
|
||||
{ value: "#1F2937", name: "Slate" },
|
||||
{ value: "#B45309", name: "Burnt Orange" },
|
||||
{ value: "#4338CA", name: "Indigo" },
|
||||
{ value: "#0891B2", name: "Cyan" },
|
||||
{ value: "#65A30D", name: "Lime" },
|
||||
]
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { preferences, updatePreferences, loading } = usePreferences()
|
||||
const { user } = useAuth()
|
||||
const { user, refreshUser } = useAuth()
|
||||
|
||||
// Profile state
|
||||
const [bio, setBio] = useState("")
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [username, setUsername] = useState("")
|
||||
const [profileSaving, setProfileSaving] = useState(false)
|
||||
const [profileSaved, setProfileSaved] = useState(false)
|
||||
|
||||
// Avatar state
|
||||
const [avatarBgColor, setAvatarBgColor] = useState("#1E3A8A")
|
||||
const [avatarText, setAvatarText] = useState("")
|
||||
const [avatarSaving, setAvatarSaving] = useState(false)
|
||||
const [avatarSaved, setAvatarSaved] = useState(false)
|
||||
const [avatarError, setAvatarError] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
// Bio might be in extended user response - check dynamically
|
||||
if (user && 'bio' in user && typeof (user as Record<string, unknown>).bio === 'string') {
|
||||
setBio((user as Record<string, unknown>).bio as string)
|
||||
if (user) {
|
||||
const extUser = user as any
|
||||
setBio(extUser.bio || "")
|
||||
setUsername(extUser.email?.split('@')[0] || "")
|
||||
setAvatarBgColor(extUser.avatar_bg_color || "#1E3A8A")
|
||||
setAvatarText(extUser.avatar_text || "")
|
||||
}
|
||||
}, [user])
|
||||
|
||||
const handleSaveProfile = async () => {
|
||||
setSaving(true)
|
||||
setSaved(false)
|
||||
setProfileSaving(true)
|
||||
setProfileSaved(false)
|
||||
const token = localStorage.getItem("token")
|
||||
try {
|
||||
await fetch(`${getApiUrl()}/users/me`, {
|
||||
|
|
@ -37,111 +79,593 @@ export default function SettingsPage() {
|
|||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ bio })
|
||||
body: JSON.stringify({ bio, username })
|
||||
})
|
||||
setSaved(true)
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
setProfileSaved(true)
|
||||
setTimeout(() => setProfileSaved(false), 2000)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading settings...</div>
|
||||
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="max-w-2xl mx-auto space-y-6">
|
||||
<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>
|
||||
|
||||
{/* Profile Section */}
|
||||
<Card>
|
||||
{/* Desktop: Side-by-side layout, Mobile: Tabs */}
|
||||
<div className="hidden lg:grid lg:grid-cols-[280px_1fr] lg:gap-8">
|
||||
{/* Sidebar Navigation */}
|
||||
<nav className="space-y-1">
|
||||
<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}
|
||||
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}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<DisplaySection
|
||||
preferences={preferences}
|
||||
updatePreferences={updatePreferences}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<NotificationsSection />
|
||||
|
||||
<Separator />
|
||||
|
||||
<PrivacySection />
|
||||
</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}
|
||||
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}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="display">
|
||||
<DisplaySection
|
||||
preferences={preferences}
|
||||
updatePreferences={updatePreferences}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="notifications">
|
||||
<NotificationsSection />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="privacy">
|
||||
<PrivacySection />
|
||||
</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, saving, saved, onSave }: any) {
|
||||
return (
|
||||
<Card id="profile">
|
||||
<CardHeader>
|
||||
<CardTitle>Profile</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<User className="h-5 w-5" />
|
||||
Profile
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Tell other fans about yourself.
|
||||
Your public profile information visible to other users
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<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="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
disabled
|
||||
value="(cannot be changed)"
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Bio</Label>
|
||||
<Textarea
|
||||
id="bio"
|
||||
placeholder="Been following the band since 2019..."
|
||||
placeholder="Tell other fans about yourself... When did you start following the band?"
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
rows={3}
|
||||
rows={4}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Markdown is supported. Max 500 characters.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleSaveProfile} disabled={saving}>
|
||||
{saving ? "Saving..." : saved ? "Saved ✓" : "Save Profile"}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={onSave} disabled={saving}>
|
||||
{saving ? "Saving..." : saved ? "Saved ✓" : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
{/* Avatar Section */}
|
||||
<AvatarSettings
|
||||
currentBgColor={(user as any)?.avatar_bg_color || "#3B82F6"}
|
||||
currentText={(user as any)?.avatar_text || ""}
|
||||
username={(user as any)?.email?.split('@')[0] || "User"}
|
||||
/>
|
||||
|
||||
{/* Preferences Section */}
|
||||
<Card>
|
||||
// Appearance Section
|
||||
function AppearanceSection({
|
||||
avatarBgColor,
|
||||
setAvatarBgColor,
|
||||
avatarText,
|
||||
handleAvatarTextChange,
|
||||
username,
|
||||
saving,
|
||||
saved,
|
||||
error,
|
||||
onSave
|
||||
}: any) {
|
||||
return (
|
||||
<Card id="appearance">
|
||||
<CardHeader>
|
||||
<CardTitle>Preferences</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Palette className="h-5 w-5" />
|
||||
Appearance
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Customize your browsing experience.
|
||||
Customize how you appear across the site
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="wiki-mode">Wiki Mode</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hide all social features (comments, ratings, reviews) for a pure archive experience.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="wiki-mode"
|
||||
checked={preferences.wiki_mode}
|
||||
onChange={(e) => updatePreferences({ wiki_mode: e.target.checked })}
|
||||
{/* 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 items-center justify-between space-x-2">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="show-ratings">Show Ratings</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Display 1-10 ratings on shows and songs.
|
||||
<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>
|
||||
<Switch
|
||||
id="show-ratings"
|
||||
checked={preferences.show_ratings}
|
||||
disabled={preferences.wiki_mode}
|
||||
onChange={(e) => updatePreferences({ show_ratings: e.target.checked })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="show-comments">Show Comments</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Display comment sections on pages.
|
||||
</p>
|
||||
{/* Color Grid */}
|
||||
<div className="space-y-3">
|
||||
<Label>Background Color</Label>
|
||||
<div className="grid grid-cols-6 gap-3">
|
||||
{PRESET_COLORS.map((color) => (
|
||||
<button
|
||||
key={color.value}
|
||||
onClick={() => setAvatarBgColor(color.value)}
|
||||
className="relative aspect-square rounded-xl transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
|
||||
style={{ backgroundColor: color.value }}
|
||||
title={color.name}
|
||||
>
|
||||
{avatarBgColor === color.value && (
|
||||
<Check className="absolute inset-0 m-auto h-5 w-5 text-white drop-shadow-lg" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Switch
|
||||
id="show-comments"
|
||||
checked={preferences.show_comments}
|
||||
disabled={preferences.wiki_mode}
|
||||
onChange={(e) => updatePreferences({ show_comments: e.target.checked })}
|
||||
/>
|
||||
</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() {
|
||||
return (
|
||||
<Card id="notifications">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
Notifications
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Choose what updates you receive
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<SettingRow
|
||||
label="Comment Replies"
|
||||
description="Get notified when someone replies to your comment"
|
||||
checked={true}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<SettingRow
|
||||
label="New Show Added"
|
||||
description="Get notified when a new show is added to the archive"
|
||||
checked={true}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<SettingRow
|
||||
label="Chase Song Played"
|
||||
description="Get notified when a song on your chase list gets played"
|
||||
checked={true}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<SettingRow
|
||||
label="Weekly Digest"
|
||||
description="Receive a weekly email with site highlights"
|
||||
checked={false}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// Privacy Section
|
||||
function PrivacySection() {
|
||||
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={true}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<SettingRow
|
||||
label="Show Attendance"
|
||||
description="Display which shows you've attended on your public profile"
|
||||
checked={true}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<SettingRow
|
||||
label="Appear in Leaderboards"
|
||||
description="Allow your name to appear on community leaderboards"
|
||||
checked={true}
|
||||
onChange={() => { }}
|
||||
comingSoon
|
||||
/>
|
||||
|
||||
<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" disabled>
|
||||
Export My Data
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" className="w-fit" disabled>
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,18 @@ import { getApiUrl } from "@/lib/api-config"
|
|||
import { Check } from "lucide-react"
|
||||
|
||||
const PRESET_COLORS = [
|
||||
{ value: "#3B82F6", name: "Blue" },
|
||||
{ value: "#EF4444", name: "Red" },
|
||||
{ value: "#10B981", name: "Green" },
|
||||
{ value: "#F59E0B", name: "Amber" },
|
||||
{ value: "#8B5CF6", name: "Purple" },
|
||||
{ value: "#EC4899", name: "Pink" },
|
||||
{ value: "#6366F1", name: "Indigo" },
|
||||
{ value: "#14B8A6", name: "Teal" },
|
||||
{ value: "#1E3A8A", name: "Deep Blue" },
|
||||
{ value: "#DC2626", name: "Bright Red" },
|
||||
{ value: "#059669", name: "Emerald" },
|
||||
{ value: "#D97706", name: "Amber" },
|
||||
{ value: "#7C3AED", name: "Violet" },
|
||||
{ value: "#DB2777", name: "Magenta" },
|
||||
{ value: "#0F766E", name: "Teal" },
|
||||
{ value: "#1F2937", name: "Slate" },
|
||||
{ value: "#B45309", name: "Burnt Orange" },
|
||||
{ value: "#4338CA", name: "Indigo" },
|
||||
{ value: "#0891B2", name: "Cyan" },
|
||||
{ value: "#65A30D", name: "Lime" },
|
||||
]
|
||||
|
||||
interface AvatarSettingsProps {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue