refactor: everything

src/pages/ProfilePage.jsx

@@ -0,0 +1,73 @@
+import React, { useContext } from "react";
+import { AuthContext } from "../AuthContext";
+
+export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus }) {
+  const { logout } = useContext(AuthContext);
+  return (
+    <div>
+      {/* Avatar & Name */}
+      <div className="flex flex-col items-center pt-6 pb-8">
+        <div className="w-20 h-20 rounded-full bg-[#2C1810] flex items-center justify-center text-3xl text-[#FAF6F1] font-serif font-bold mb-3">
+          {user?.username?.[0]?.toUpperCase() || "☕"}
+        </div>
+        <div className="font-serif text-xl font-semibold text-[#2C1810]">{user?.username}</div>
+        <div className="text-sm text-[#9C8B7A] mt-0.5">{user?.email}</div>
+        {showSyncedStatus && (
+          <div className={`flex items-center gap-1.5 text-[11px] font-medium px-3 py-1.5 rounded-full mt-3 transition-all ${isOnline ? "text-[#4A7C59] bg-[rgba(74,124,89,0.1)]" : "text-[#B44040] bg-[rgba(180,64,64,0.1)]"}`}>
+            <span className={`text-[10px] ${syncing ? "animate-sync-pulse" : ""}`}>●</span>
+            <span>{isOnline ? (syncing ? "Syncing…" : "All data synced") : "Offline — saved locally"}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Account section */}
+      <div className="mb-6">
+        <div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] mb-2 px-1">Account</div>
+        <div className="bg-white rounded-2xl border border-[#E8DFD3] overflow-hidden">
+          <div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#F3EDE4]">
+            <span className="text-lg">👤</span>
+            <div>
+              <div className="text-xs text-[#9C8B7A]">Username</div>
+              <div className="text-sm font-medium text-[#2C1810]">{user?.username}</div>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-3.5">
+            <span className="text-lg">✉️</span>
+            <div>
+              <div className="text-xs text-[#9C8B7A]">Email</div>
+              <div className="text-sm font-medium text-[#2C1810]">{user?.email}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* App info */}
+      <div className="mb-6">
+        <div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] mb-2 px-1">App</div>
+        <div className="bg-white rounded-2xl border border-[#E8DFD3] overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3.5 border-b border-[#F3EDE4]">
+            <div className="flex items-center gap-3">
+              <span className="text-lg">☕</span>
+              <div className="text-sm font-medium text-[#2C1810]">Brew Journal</div>
+            </div>
+            <div className="text-xs text-[#9C8B7A] font-mono">{__APP_VERSION__}</div>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-3.5">
+            <span className="text-lg">🗄️</span>
+            <div>
+              <div className="text-xs text-[#9C8B7A]">Storage</div>
+              <div className="text-sm font-medium text-[#2C1810]">Local + PostgreSQL</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Sign out */}
+      <button
+        onClick={() => logout()}
+        className="w-full py-3.5 border border-[#B44040] rounded-2xl text-sm font-semibold text-[#B44040] bg-transparent cursor-pointer hover:bg-[rgba(180,64,64,0.05)] transition-colors">
+        Sign Out
+      </button>
+    </div>
+  );
+}