feat: add password reset email

components/reading-settings.tsx

@@ -242,8 +242,12 @@ type Placement = "below-right" | "above-left";
  *     can push the panel off-screen, which is why auth users get the
  *     dedicated settings page instead.
  *   - "inline" — render the controls flat as part of normal page flow,
- *     full-width up to a sensible cap. Used by /u/me/settings. */
-type Variant = "popover" | "inline";
+ *     full-width up to a sensible cap, wrapped in a subtle card.
+ *   - "bare" — like "inline" but with no card chrome at all. The controls
+ *     blend into the surrounding page as a normal section. Used by the
+ *     top-level /settings screen where reading prefs are just one of
+ *     several stacked sections. */
+type Variant = "popover" | "inline" | "bare";
 
 export function ReadingSettings({
   variant = "popover",
@@ -468,9 +472,9 @@ export function ReadingSettings({
     visiblePalettes.find((p) => p.id === activePaletteId)?.name ?? "";
 
   if (!mounted) {
-    // Inline variant: render nothing until mounted so we don't flash a
-    // misaligned skeleton on the dedicated settings page.
-    if (variant === "inline") return null;
+    // Inline / bare variants: render nothing until mounted so we don't
+    // flash a misaligned skeleton on the dedicated settings page.
+    if (variant === "inline" || variant === "bare") return null;
     return (
       <Button variant="ghost" size="icon-sm" aria-label="Reading settings">
         <Settings className="size-4" />
@@ -611,8 +615,7 @@ export function ReadingSettings({
 
   // ── Inline variant ──────────────────────────────────────────────────
   // Renders the same controls as a flush, full-width card. No popover
-  // positioning, so it can't drift off-viewport on a narrow screen. Used
-  // by /u/me/settings.
+  // positioning, so it can't drift off-viewport on a narrow screen.
   if (variant === "inline") {
     return (
       <div className="w-full max-w-xl rounded-lg border border-border bg-card p-4 sm:p-5">
@@ -621,6 +624,15 @@ export function ReadingSettings({
     );
   }
 
+  // ── Bare variant ────────────────────────────────────────────────────
+  // No card, no border — controls render flush with the surrounding page
+  // so the section reads as part of the main flow rather than a callout.
+  // Used by /settings, where reading prefs sit alongside several other
+  // unstyled sections.
+  if (variant === "bare") {
+    return <div className="w-full">{panelInner}</div>;
+  }
+
   // ── Popover variant (default) ───────────────────────────────────────
   const toggle = () => setOpen((v) => !v);