feat: share post to other apps

components/profile/profile-header.tsx

@@ -8,18 +8,21 @@
  * 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.
+ *   • Reading-settings gear — for every signed-in viewer. It links to
+ *     /u/me/settings (a focused page that mounts ReadingSettings in
+ *     inline mode) rather than opening a popover here. A popover
+ *     triggered from this centred row tends to spill off the left edge
+ *     on narrow viewports, so the page-navigation pattern matches Edit
+ *     Profile and dodges the problem entirely.
  *
  * Anonymous visitors don't see this row at all — they read SiteHeader's
- * gear instead.
+ * popover gear instead.
  */
 
 import Image from "next/image";
 import Link from "next/link";
-import { ReadingSettings } from "@/components/reading-settings";
+import { Settings } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { useAuth } from "@/components/auth/auth-provider";
 
 export function ProfileHeader({
@@ -77,7 +80,21 @@ export function ProfileHeader({
               Edit profile
             </Link>
           ) : null}
-          {showReadingSettings ? <ReadingSettings /> : null}
+          {showReadingSettings ? (
+            <Link
+              href="/u/me/settings"
+              aria-label="Reading settings"
+              title="Reading settings"
+              className={cn(
+                "size-9 inline-flex items-center justify-center rounded-lg",
+                "border border-border text-foreground hover:bg-muted",
+                "transition-colors outline-none",
+                "focus-visible:ring-2 focus-visible:ring-ring",
+              )}
+            >
+              <Settings className="size-4" />
+            </Link>
+          ) : null}
         </div>
       ) : null}
     </header>