From 2bc0a508ea7ed4cc98977c5ceeef6abb97e61d72 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sat, 26 Sep 2026 17:14:40 +0200
Subject: [PATCH] feat(settings): make SettingsProfileCard collapsible

---
 components/settings/SettingsProfileCard.tsx | 157 +++++++++++---------
 1 file changed, 90 insertions(+), 67 deletions(-)

diff --git a/components/settings/SettingsProfileCard.tsx b/components/settings/SettingsProfileCard.tsx
index 8d4b953..acc64fb 100644
--- a/components/settings/SettingsProfileCard.tsx
+++ b/components/settings/SettingsProfileCard.tsx
@@ -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,80 +28,101 @@ 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="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 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>
+            <h2 className="text-lg font-bold text-white">
+              {currentUser.username}
+            </h2>
+            <p className="text-sm text-muted">{currentUser.email}</p>
+          </div>
         </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>
+        <ChevronDown
+          className={`w-5 h-5 text-muted transition-transform duration-200 ${
+            isOpen ? "rotate-180" : "rotate-0"
+          }`}
+        />
+      </button>
 
-      {/* 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}`}
-              />
-            );
-          })}
+      {/* Collapsible Content */}
+      {isOpen && (
+        <div className="p-4 pt-0 space-y-4">
+          {/* Status Selection */}
+          <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>
+            <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 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>
+            <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>
-      </div>
+      )}
     </div>
   );
 }