fix: user session management

src/App.jsx

@@ -1,4 +1,7 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useContext } from "react";
+import { AuthContext } from "./AuthContext";
+import Login from "./Login";
+import Register from "./Register";
 
 // ─── Storage helpers ───
 const STORAGE_KEY = "coffee-logbook-data";
@@ -714,6 +717,8 @@ function BrewCard({ log, beanName }) {
 
 // ─── Main App ───
 export default function CoffeeLogbook() {
+  const { token, user, loading, logout } = useContext(AuthContext);
+  const [authView, setAuthView] = useState("login"); // login | register
   const [data, setData] = useState(null);
   const [view, setView] = useState("dashboard"); // dashboard | beans | brews
   const [modal, setModal] = useState(null); // null | "addBean" | "editBean" | "addBrew"
@@ -731,6 +736,56 @@ export default function CoffeeLogbook() {
     await saveData(newData);
   }, []);
 
+  if (loading) {
+    return (
+      <div className="app" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
+        <style>{styles}</style>
+        <div style={{ textAlign: "center", color: "var(--text3)" }}>
+          <div style={{ fontSize: 32 }}>☕</div>
+          <div style={{ marginTop: 8 }}>Loading…</div>
+        </div>
+      </div>
+    );
+  }
+
+  // If not authenticated, show login/register
+  if (!token || !user) {
+    return (
+      <div className="app">
+        <style>{styles}</style>
+        {authView === "login" ? (
+          <>
+            <Login onLoginSuccess={() => {}} />
+            <div style={{ textAlign: "center", marginTop: "20px" }}>
+              <p style={{ color: "var(--text3)" }}>Don't have an account?{' '}
+                <button 
+                  onClick={() => setAuthView("register")}
+                  style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', textDecoration: 'underline' }}
+                >
+                  Register
+                </button>
+              </p>
+            </div>
+          </>
+        ) : (
+          <>
+            <Register onRegisterSuccess={() => setAuthView("login")} />
+            <div style={{ textAlign: "center", marginTop: "20px" }}>
+              <p style={{ color: "var(--text3)" }}>Already have an account?{' '}
+                <button 
+                  onClick={() => setAuthView("login")}
+                  style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', textDecoration: 'underline' }}
+                >
+                  Login
+                </button>
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
   if (!data) return <div className="app" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}><div style={{ textAlign: "center", color: "var(--text3)" }}><div style={{ fontSize: 32 }}>☕</div><div style={{ marginTop: 8 }}>Loading…</div></div></div>;
 
   const { beans, brewLogs } = data;
@@ -777,7 +832,22 @@ export default function CoffeeLogbook() {
           <div className="header-sub">Coffee Logbook</div>
           <h1>Brew Journal</h1>
         </div>
-        <div style={{ fontSize: 28 }}>☕</div>
+        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+          <span style={{ fontSize: "12px", color: "var(--text2)" }}>{user?.username}</span>
+          <button 
+            onClick={() => logout()}
+            style={{
+              fontSize: 28,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px 8px'
+            }}
+            title="Logout"
+          >
+            🚪
+          </button>
+        </div>
       </div>
 
       {/* Nav */}