Reorder settings: Notifications, Profile, Family + collapsible theme

src/app/settings/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTheme } from "../ThemeProvider";
@@ -7,6 +8,7 @@ import { useTheme } from "../ThemeProvider";
 export default function SettingsPage() {
   const router = useRouter();
   const { theme, mode, setMode } = useTheme();
+  const [themeOpen, setThemeOpen] = useState(false);
 
   const themeOptions = [
     { value: "light", label: "Light" },
@@ -18,50 +20,74 @@ export default function SettingsPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
       <div className="p-4 flex items-center gap-4">
-        <button onClick={() => router.back()} className="p-2">
+        <button onClick={() => router.back()} className="p-2">←</button>
-          ←
-        </button>
         <h1 className="text-xl font-bold">Settings</h1>
       </div>
 
       <div className="px-4 space-y-3">
-        {/* Theme Mode */}
+        {/* Notifications */}
-        <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+        <Link href="/notifications" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
-          <div className="font-medium mb-3">Theme</div>
+          <div className="flex items-center gap-3">
-          <div className="grid grid-cols-2 gap-2">
+            <span className="text-xl">🔔</span>
-            {themeOptions.map((opt) => (
+            <div className="font-medium">Notifications</div>
-              <button
-                key={opt.value}
-                onClick={() => setMode(opt.value)}
-                className={`p-3 rounded-lg text-sm ${
-                  mode === opt.value
-                    ? "bg-rose-400 text-white"
-                    : "bg-gray-100 dark:bg-gray-700"
-                }`}
-              >
-                {opt.label}
-              </button>
-            ))}
           </div>
+          <span className="text-gray-400">→</span>
+        </Link>
+
+        {/* Profile */}
+        <Link href="/profile" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div className="flex items-center gap-3">
+            <span className="text-xl">👤</span>
+            <div className="font-medium">Profile</div>
+          </div>
+          <span className="text-gray-400">→</span>
+        </Link>
+
+        {/* Family */}
+        <Link href="/family" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div className="flex items-center gap-3">
+            <span className="text-xl">👨‍👩‍👧</span>
+            <div className="font-medium">Family</div>
+          </div>
+          <span className="text-gray-400">→</span>
+        </Link>
+
+        {/* Theme - Collapsible */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
+          <button
+            onClick={() => setThemeOpen(!themeOpen)}
+            className="w-full flex items-center justify-between p-4"
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-xl">{theme === "dark" ? "🌙" : "☀️"}</span>
+              <div className="font-medium">Theme</div>
+            </div>
+            <span className={`text-gray-400 transition-transform ${themeOpen ? "rotate-180" : ""}`}>▼</span>
+          </button>
+
+          {themeOpen && (
+            <div className="px-4 pb-4">
+              <div className="grid grid-cols-2 gap-2">
+                {themeOptions.map((opt) => (
+                  <button
+                    key={opt.value}
+                    onClick={() => setMode(opt.value)}
+                    className={`p-3 rounded-lg text-sm ${
+                      mode === opt.value
+                        ? "bg-rose-400 text-white"
+                        : "bg-gray-100 dark:bg-gray-700"
+                    }`}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
 
-        {/* Links */}
+        {/* App Version */}
-        <Link href="/profile" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+        <div className="p-4 bg-white dark:bg-gray-800 rounded-xl mt-4">
-          <div className="font-medium">Profile</div>
-          <div className="text-gray-400">→</div>
-        </Link>
-
-        <Link href="/notifications" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
-          <div className="font-medium">Notifications</div>
-          <div className="text-gray-400">→</div>
-        </Link>
-
-        <Link href="/family" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
-          <div className="font-medium">Family Members</div>
-          <div className="text-gray-400">→</div>
-        </Link>
-
-        <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
           <div className="font-medium">App Version</div>
           <div className="text-sm text-gray-500">Tia v1.0.0</div>
         </div>