some fixes and refactors

frontend/app/profile/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useEffect, useState, useCallback, useRef } from "react";
-import { useRouter } from "next/navigation";
 import { bech32 } from "bech32";
-import { useAuth } from "../auth-context";
-import { API_URL } from "../config";
+import { api, ApiError } from "../api";
 import { sharedStyles } from "../styles/shared";
+import { Header } from "../components/Header";
+import { useRequireAuth } from "../hooks/useRequireAuth";
 
 interface ProfileData {
   contact_email: string | null;
@@ -111,8 +111,10 @@ function toFormData(data: ProfileData): FormData {
 }
 
 export default function ProfilePage() {
-  const { user, isLoading, logout, hasRole } = useAuth();
-  const router = useRouter();
+  const { user, isLoading, isAuthorized } = useRequireAuth({
+    requiredRole: "regular",
+    fallbackRedirect: "/audit",
+  });
   const [originalData, setOriginalData] = useState<FormData | null>(null);
   const [formData, setFormData] = useState<FormData>({
     contact_email: "",
@@ -126,8 +128,6 @@ export default function ProfilePage() {
   const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
   const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const isRegularUser = hasRole("regular");
-
   // Check if form has changes
   const hasChanges = useCallback(() => {
     if (!originalData) return false;
@@ -144,42 +144,25 @@ export default function ProfilePage() {
     return Object.keys(errors).length === 0;
   }, [errors]);
 
-  useEffect(() => {
-    if (!isLoading) {
-      if (!user) {
-        router.push("/login");
-      } else if (!isRegularUser) {
-        router.push("/audit");
-      }
-    }
-  }, [isLoading, user, router, isRegularUser]);
-
   const fetchProfile = useCallback(async () => {
     try {
-      const res = await fetch(`${API_URL}/api/profile`, {
-        credentials: "include",
-      });
-      if (res.ok) {
-        const data: ProfileData = await res.json();
-        const formValues = toFormData(data);
-        setFormData(formValues);
-        setOriginalData(formValues);
-      } else {
-        setToast({ message: "Failed to load profile", type: "error" });
-      }
+      const data = await api.get<ProfileData>("/api/profile");
+      const formValues = toFormData(data);
+      setFormData(formValues);
+      setOriginalData(formValues);
     } catch (err) {
       console.error("Profile load error:", err);
-      setToast({ message: "Network error. Please try again.", type: "error" });
+      setToast({ message: "Failed to load profile", type: "error" });
     } finally {
       setIsLoadingProfile(false);
     }
   }, []);
 
   useEffect(() => {
-    if (user && isRegularUser) {
+    if (user && isAuthorized) {
       fetchProfile();
     }
-  }, [user, isRegularUser, fetchProfile]);
+  }, [user, isAuthorized, fetchProfile]);
 
   // Auto-dismiss toast after 3 seconds
   useEffect(() => {
@@ -238,47 +221,32 @@ export default function ProfilePage() {
     setIsSubmitting(true);
 
     try {
-      const res = await fetch(`${API_URL}/api/profile`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({
-          contact_email: formData.contact_email || null,
-          telegram: formData.telegram || null,
-          signal: formData.signal || null,
-          nostr_npub: formData.nostr_npub || null,
-        }),
+      const data = await api.put<ProfileData>("/api/profile", {
+        contact_email: formData.contact_email || null,
+        telegram: formData.telegram || null,
+        signal: formData.signal || null,
+        nostr_npub: formData.nostr_npub || null,
       });
-
-      if (res.ok) {
-        const data: ProfileData = await res.json();
-        const formValues = toFormData(data);
-        setFormData(formValues);
-        setOriginalData(formValues);
-        setToast({ message: "Profile saved successfully!", type: "success" });
-      } else if (res.status === 422) {
-        // Handle validation errors from backend
-        const errorData = await res.json();
-        if (errorData.detail?.field_errors) {
+      const formValues = toFormData(data);
+      setFormData(formValues);
+      setOriginalData(formValues);
+      setToast({ message: "Profile saved successfully!", type: "success" });
+    } catch (err) {
+      console.error("Profile save error:", err);
+      if (err instanceof ApiError && err.status === 422) {
+        const errorData = err.data as { detail?: { field_errors?: FieldErrors } };
+        if (errorData?.detail?.field_errors) {
           setErrors(errorData.detail.field_errors);
         }
         setToast({ message: "Please fix the errors below", type: "error" });
       } else {
-        setToast({ message: "Failed to save profile", type: "error" });
+        setToast({ message: "Network error. Please try again.", type: "error" });
       }
-    } catch (err) {
-      console.error("Profile save error:", err);
-      setToast({ message: "Network error. Please try again.", type: "error" });
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  const handleLogout = async () => {
-    await logout();
-    router.push("/login");
-  };
-
   if (isLoading || isLoadingProfile) {
     return (
       <main style={styles.main}>
@@ -287,7 +255,7 @@ export default function ProfilePage() {
     );
   }
 
-  if (!user || !isRegularUser) {
+  if (!user || !isAuthorized) {
     return null;
   }
 
@@ -307,21 +275,7 @@ export default function ProfilePage() {
         </div>
       )}
 
-      <div style={styles.header}>
-        <div style={styles.nav}>
-          <a href="/" style={styles.navLink}>Counter</a>
-          <span style={styles.navDivider}>•</span>
-          <a href="/sum" style={styles.navLink}>Sum</a>
-          <span style={styles.navDivider}>•</span>
-          <span style={styles.navCurrent}>My Profile</span>
-        </div>
-        <div style={styles.userInfo}>
-          <span style={styles.userEmail}>{user.email}</span>
-          <button onClick={handleLogout} style={styles.logoutBtn}>
-            Sign out
-          </button>
-        </div>
-      </div>
+      <Header currentPage="profile" />
 
       <div style={styles.content}>
         <div style={styles.profileCard}>