feat(settings): make SettingsProfileCard collapsible

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,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. */
+/** Renders a collapsible card for managing user profile details, status, and theme color. */
-export function SettingsProfileCard({ onUpdate }: SettingsProfileCardProps) {
+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">
+    <div className="bg-surface border border-muted/20 rounded-xl overflow-hidden transition-all">
-      {/* User Info Header */}
+      {/* 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>
   );
 }