refactor(settings): split SettingsView into SettingsHeader and SettingsProfileCard
All checks were successful
Deploy Waveform to VPS / deploy (push) Successful in 1m10s
All checks were successful
Deploy Waveform to VPS / deploy (push) Successful in 1m10s
This commit is contained in:
Chneemann
parent
db0616aa9a
commit
80fa74605f
3 changed files with 129 additions and 92 deletions
18
components/settings/SettingsHeader.tsx
Normal file
18
components/settings/SettingsHeader.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* @file components/settings/SettingsHeader.tsx
|
||||
* @description Header section for the settings view with title and subtitle.
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
/** Renders the settings view header containing the main title and description. */
|
||||
export function SettingsHeader() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">User Settings</h1>
|
||||
<p className="text-sm text-muted">
|
||||
Manage your profile, status, and account settings.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
components/settings/SettingsProfileCard.tsx
Normal file
105
components/settings/SettingsProfileCard.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
/**
|
||||
* @file components/settings/SettingsProfileCard.tsx
|
||||
* @description Card component managing user profile overview, status picker, and color selection.
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { UserAvatar } from "@/components/ui/UserAvatar";
|
||||
import { UserStatus } from "@/db/schema";
|
||||
import {
|
||||
MEMBER_STATUS_COLOR_CLASSES,
|
||||
MEMBER_COLOR_OPTIONS,
|
||||
} from "@/lib/constants/member.styles";
|
||||
import { UserRound, Palette } from "lucide-react";
|
||||
import { useUser } from "@/lib/context/UserContext";
|
||||
|
||||
/** Props for the SettingsProfileCard component. */
|
||||
interface SettingsProfileCardProps {
|
||||
onUpdate: (fields: Partial<{ status: UserStatus; color: string }>) => void;
|
||||
}
|
||||
|
||||
const STATUSES: { label: string; value: UserStatus }[] = [
|
||||
{ label: "Online", value: "ONLINE" },
|
||||
{ label: "Offline", value: "OFFLINE" },
|
||||
{ label: "AFK", value: "AFK" },
|
||||
{ label: "DND", value: "DND" },
|
||||
];
|
||||
|
||||
/** Renders a card for managing user profile details, online status, and theme color preferences. */
|
||||
export function SettingsProfileCard({ onUpdate }: SettingsProfileCardProps) {
|
||||
const { currentUser } = useUser();
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
return (
|
||||
<div className="bg-surface border border-muted/20 rounded-xl p-6 space-y-6">
|
||||
{/* User Info Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<UserAvatar user={currentUser} size="md" />
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">
|
||||
{currentUser.username}
|
||||
</h2>
|
||||
<p className="text-sm text-muted">{currentUser.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Selection */}
|
||||
<div className="border-t border-muted/20 pt-6 space-y-4">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<UserRound className="w-4 h-4 text-muted" /> Online Status
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{STATUSES.map((status) => {
|
||||
const isSelected = currentUser.status === status.value;
|
||||
return (
|
||||
<button
|
||||
key={status.value}
|
||||
type="button"
|
||||
onClick={() => onUpdate({ status: status.value })}
|
||||
className={`flex items-center gap-2.5 p-3 rounded-lg border text-sm font-medium transition-all ${
|
||||
isSelected
|
||||
? "border-accent bg-accent/10 text-white font-semibold"
|
||||
: "border-muted/20 hover:border-muted/40 text-muted hover:text-white cursor-pointer"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full ${
|
||||
MEMBER_STATUS_COLOR_CLASSES[status.value]
|
||||
}`}
|
||||
/>
|
||||
{status.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Palette Selection */}
|
||||
<div className="border-t border-muted/20 pt-6 space-y-4">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<Palette className="w-4 h-4 text-muted" /> Profile Color
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{MEMBER_COLOR_OPTIONS.map((colorClass) => {
|
||||
const isSelected = currentUser.color === colorClass;
|
||||
return (
|
||||
<button
|
||||
key={colorClass}
|
||||
type="button"
|
||||
onClick={() => onUpdate({ color: colorClass })}
|
||||
className={`w-8 h-8 rounded-full ${colorClass} transition-all flex items-center justify-center ${
|
||||
isSelected
|
||||
? "ring-2 ring-white ring-offset-2 ring-offset-surface scale-110"
|
||||
: "hover:scale-105 opacity-80 hover:opacity-100 cursor-pointer"
|
||||
}`}
|
||||
aria-label={`Select ${colorClass}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,30 +1,18 @@
|
|||
/**
|
||||
* @file components/settings/SettingsView.tsx
|
||||
* @description Settings view component for updating user profile attributes like online status and avatar color.
|
||||
* @description Main container for user settings view displaying header and profile card.
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { UserAvatar } from "@/components/ui/UserAvatar";
|
||||
import { UserStatus } from "@/db/schema";
|
||||
import {
|
||||
MEMBER_STATUS_COLOR_CLASSES,
|
||||
MEMBER_COLOR_OPTIONS,
|
||||
} from "@/lib/constants/member.styles";
|
||||
import { UserRound, Palette } from "lucide-react";
|
||||
import { useUser } from "@/lib/context/UserContext";
|
||||
import { SettingsHeader } from "./SettingsHeader";
|
||||
import { SettingsProfileCard } from "./SettingsProfileCard";
|
||||
|
||||
/** Renders the user settings view allowing profile, online status, and color customizations. */
|
||||
/** Renders the settings view layout for managing user profile settings. */
|
||||
export function SettingsView() {
|
||||
const { currentUser, updateCurrentUser } = useUser();
|
||||
|
||||
const statuses: { label: string; value: UserStatus }[] = [
|
||||
{ label: "Online", value: "ONLINE" },
|
||||
{ label: "Offline", value: "OFFLINE" },
|
||||
{ label: "AFK", value: "AFK" },
|
||||
{ label: "DND", value: "DND" },
|
||||
];
|
||||
|
||||
/** Sends optimistic updates to context and persists profile changes to the server API. */
|
||||
const updateProfile = (fields: Partial<typeof currentUser>) => {
|
||||
updateCurrentUser(fields);
|
||||
|
|
@ -39,82 +27,8 @@ export function SettingsView() {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col h-full w-full bg-background text-white gap-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">User Settings</h1>
|
||||
<p className="text-sm text-muted">
|
||||
Manage your profile, status, and account settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Profile Overview Card */}
|
||||
<div className="bg-surface border border-muted/20 rounded-xl p-6 space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<UserAvatar user={currentUser} size="md" />
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">
|
||||
{currentUser.username}
|
||||
</h2>
|
||||
<p className="text-sm text-muted">{currentUser.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Selection */}
|
||||
<div className="border-t border-muted/20 pt-6 space-y-4">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<UserRound className="w-4 h-4 text-muted" /> Online Status
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{statuses.map((status) => {
|
||||
const isSelected = currentUser.status === status.value;
|
||||
return (
|
||||
<button
|
||||
key={status.value}
|
||||
type="button"
|
||||
onClick={() => updateProfile({ status: status.value })}
|
||||
className={`flex items-center gap-2.5 p-3 rounded-lg border text-sm font-medium transition-all ${
|
||||
isSelected
|
||||
? "border-accent bg-accent/10 text-white font-semibold"
|
||||
: "border-muted/20 hover:border-muted/40 text-muted hover:text-white cursor-pointer"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full ${
|
||||
MEMBER_STATUS_COLOR_CLASSES[status.value]
|
||||
}`}
|
||||
/>
|
||||
{status.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Palette Selection */}
|
||||
<div className="border-t border-muted/20 pt-6 space-y-4">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<Palette className="w-4 h-4 text-muted" /> Profile Color
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{MEMBER_COLOR_OPTIONS.map((colorClass) => {
|
||||
const isSelected = currentUser.color === colorClass;
|
||||
return (
|
||||
<button
|
||||
key={colorClass}
|
||||
type="button"
|
||||
onClick={() => updateProfile({ color: colorClass })}
|
||||
className={`w-8 h-8 rounded-full ${colorClass} transition-all flex items-center justify-center ${
|
||||
isSelected
|
||||
? "ring-2 ring-white ring-offset-2 ring-offset-surface scale-110"
|
||||
: "hover:scale-105 opacity-80 hover:opacity-100 cursor-pointer"
|
||||
}`}
|
||||
aria-label={`Select ${colorClass}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsHeader />
|
||||
<SettingsProfileCard onUpdate={updateProfile} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue