feat: add reading settings sync

components/profile/profile-header.tsx

@@ -3,13 +3,24 @@
 /**
  * ProfileHeader — Instagram-style centered header used at the top of
  * /u/me and /u/[handle]. Avatar, display name, @handle, a single stat
- * line, and an optional action slot (Edit profile button on owner view).
+ * line, and an action row.
  *
- * Replaces the older ProfileViewHeader (left-aligned avatar + sidebar).
+ * The action row hosts:
+ *   • "Edit profile" link — only on the owner's own profile (via the
+ *     `editHref` prop set by /u/me layout).
+ *   • ReadingSettings gear — for every signed-in viewer, regardless of
+ *     whose profile they're on. SiteHeader drops its own mobile gear
+ *     for auth users (see comment there) so this is the single source
+ *     of truth for that affordance once you're signed in.
+ *
+ * Anonymous visitors don't see this row at all — they read SiteHeader's
+ * gear instead.
  */
 
 import Image from "next/image";
 import Link from "next/link";
+import { ReadingSettings } from "@/components/reading-settings";
+import { useAuth } from "@/components/auth/auth-provider";
 
 export function ProfileHeader({
   avatarURL,
@@ -27,6 +38,14 @@ export function ProfileHeader({
   /** When provided, shows an "Edit profile" CTA below the handle. */
   editHref?: string;
 }) {
+  const { user, loading } = useAuth();
+  // ReadingSettings appears for every authenticated viewer (own profile
+  // OR someone else's), so an auth user reading a friend's profile can
+  // still reach theme/palette/font controls. Anonymous viewers fall back
+  // to SiteHeader's mobile gear.
+  const showReadingSettings = !loading && !!user;
+  const showActions = !!editHref || showReadingSettings;
+
   return (
     <header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
       <Avatar src={avatarURL} name={name} />
@@ -48,13 +67,18 @@ export function ProfileHeader({
           </p>
         ) : null}
       </div>
-      {editHref ? (
-        <Link
-          href={editHref}
-          className="inline-flex items-center justify-center h-9 px-5 rounded-lg border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors"
-        >
-          Edit profile
-        </Link>
+      {showActions ? (
+        <div className="flex items-center gap-2">
+          {editHref ? (
+            <Link
+              href={editHref}
+              className="inline-flex items-center justify-center h-9 px-5 rounded-lg border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors"
+            >
+              Edit profile
+            </Link>
+          ) : null}
+          {showReadingSettings ? <ReadingSettings /> : null}
+        </div>
       ) : null}
     </header>
   );