feat: add reading settings sync

components/site-header.tsx

@@ -5,11 +5,14 @@
  * centred. Navigation lives in SiteSidebar (desktop) and SiteBottomNav
  * (mobile), so the header's only job here is to anchor the brand.
  *
- * Mobile also gets a Reading-settings affordance pinned to the right —
- * the sidebar rail is hidden on mobile, so this is the only easy entry
- * point to the theme + palette + font controls.
+ * Mobile gets a Reading-settings affordance pinned to the right ONLY for
+ * anonymous visitors — auth users access the same controls from the
+ * gear next to Edit Profile in ProfileHeader (and from the desktop
+ * sidebar rail). The split avoids two icons doing the same job for
+ * signed-in users while keeping the affordance reachable for guests who
+ * have no profile.
  *
- * Layout (mobile):
+ * Layout (mobile, anonymous):
  *
  *   ┌─────────────────────────────────────────────────────┐
  *   │                  Prabhupāda                   ⚙     │
@@ -21,8 +24,15 @@
 
 import Link from "next/link";
 import { ReadingSettings } from "@/components/reading-settings";
+import { useAuth } from "@/components/auth/auth-provider";
 
 export function SiteHeader() {
+  const { user, loading } = useAuth();
+  // Only show the mobile gear for anonymous viewers. During the initial
+  // auth check we treat `loading` as anonymous so the gear doesn't flash
+  // in and out — once auth resolves, it hides for signed-in users.
+  const showMobileGear = !loading && !user;
+
   return (
     <header className="sticky top-0 z-30 bg-background/60 backdrop-blur-md">
       <div className="relative h-12 sm:h-14 flex items-center justify-center px-4">
@@ -38,9 +48,11 @@ export function SiteHeader() {
             Says
           </span>
         </Link>
-        <div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
-          <ReadingSettings />
-        </div>
+        {showMobileGear ? (
+          <div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
+            <ReadingSettings />
+          </div>
+        ) : null}
       </div>
     </header>
   );