Chneemann/waveform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(settings): make SettingsProfileCard collapsible
All checks were successful
Deploy Waveform to VPS / deploy (push) Successful in 1m19s
Details

Browse source
This commit is contained in:
Chneemann 2026-09-26 17:14:40 +02:00
parent 3e1d21f259
commit 2bc0a508ea
No known key found for this signature in database
1 changed files with 90 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
components/settings/SettingsProfileCard.tsx
View file

@ -1,22 +1,24 @@
/**
* @file components/settings/SettingsProfileCard.tsx
* @description Card component managing user profile overview, status picker, and color selection.
* @description Collapsible card component managing user profile overview, status picker, and color selection.
*/
"use client";
import { useState } from "react";
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 { UserRound, Palette, ChevronDown } from "lucide-react";
import { useUser } from "@/lib/context/UserContext";
/** Props for the SettingsProfileCard component. */
interface SettingsProfileCardProps {
onUpdate: (fields: Partial<{ status: UserStatus; color: string }>) => void;
defaultOpen?: boolean;
}
const STATUSES: { label: string; value: UserStatus }[] = [
@ -26,15 +28,24 @@ const STATUSES: { label: string; value: UserStatus }[] = [
{ label: "DND", value: "DND" },
];
/** Renders a card for managing user profile details, online status, and theme color preferences. */
export function SettingsProfileCard({ onUpdate }: SettingsProfileCardProps) {
/** Renders a collapsible card for managing user profile details, status, and theme color. */
export function SettingsProfileCard({
onUpdate,
defaultOpen = true,
}: SettingsProfileCardProps) {
const [isOpen, setIsOpen] = useState(defaultOpen);
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="bg-surface border border-muted/20 rounded-xl overflow-hidden transition-all">
{/* Clickable Header / Toggle Bar */}
<button
type="button"
onClick={() => setIsOpen((prev) => !prev)}
className="w-full p-4 flex items-center justify-between hover:bg-white/5 transition-colors cursor-pointer text-left"
>
<div className="flex items-center gap-4">
<UserAvatar user={currentUser} size="md" />
<div>
@ -45,8 +56,18 @@ export function SettingsProfileCard({ onUpdate }: SettingsProfileCardProps) {
</div>
</div>
<ChevronDown
className={`w-5 h-5 text-muted transition-transform duration-200 ${
isOpen ? "rotate-180" : "rotate-0"
}`}
/>
</button>
{/* Collapsible Content */}
{isOpen && (
<div className="p-4 pt-0 space-y-4">
{/* Status Selection */}
<div className="border-t border-muted/20 pt-6 space-y-4">
<div className="border-t border-muted/20 pt-4 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>
@ -77,7 +98,7 @@ export function SettingsProfileCard({ onUpdate }: SettingsProfileCardProps) {
</div>
{/* Color Palette Selection */}
<div className="border-t border-muted/20 pt-6 space-y-4">
<div className="border-t border-muted/20 py-4 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>
@ -101,5 +122,7 @@ export function SettingsProfileCard({ onUpdate }: SettingsProfileCardProps) {
</div>
</div>
</div>
)}
</div>
);
}