chore: code refactor

2026-06-13 02:24:42 +05:30
parent cc5633c37a
commit 439664a97d
151 changed files with 1387 additions and 1138 deletions
@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * SiteHeader — minimal sticky transparent header with the brand wordmark
+ * centred. Navigation lives in SiteSidebar (desktop) and SiteBottomNav
+ * (mobile), so the header's only job here is to anchor the brand.
+ *
+ * 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, anonymous):
+ *
+ *   ┌─────────────────────────────────────────────────────┐
+ *   │                  Prabhupāda                   ⚙     │
+ *   │                    SAYS                             │
+ *   └─────────────────────────────────────────────────────┘
+ *
+ * On md+ the gear hides and the sidebar carries it instead.
+ */
+
+import Link from "next/link";
+import { ReadingSettings } from "@/components/reading-settings";
+import { NotificationBell } from "@/components/layout/notification-bell";
+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">
+        <Link
+          href="/"
+          aria-label="Prabhupāda Says — home"
+          className="leading-none text-foreground font-[family-name:var(--font-title)] transition-opacity hover:opacity-80"
+        >
+          <span className="block text-center text-[0.8rem] sm:text-base font-semibold uppercase tracking-[0.12em]">
+            Prabhupāda
+          </span>
+          <span className="block text-center text-[0.55rem] sm:text-[0.7rem] font-medium uppercase text-muted-foreground tracking-[0.22em] mt-0.5">
+            Says
+          </span>
+        </Link>
+        {showMobileGear ? (
+          <div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
+            <ReadingSettings />
+          </div>
+        ) : null}
+        {/* Notification bell — signed-in users only (anonymous viewers get
+            the reading-settings gear above instead). */}
+        {!loading && user ? (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2">
+            <NotificationBell />
+          </div>
+        ) : null}
+      </div>
+    </header>
+  );
+}