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,134 @@
+"use client";
+
+/**
+ * SiteBottomNav — mobile-only bottom tab bar.
+ *
+ * Four items: Home · Search · Kautilya · Account.
+ * Mirrors the Instagram pattern — fixed to the viewport bottom, full
+ * width, equal-width tabs, the active tab uses the primary color.
+ *
+ * Hidden on md+ — desktop uses SiteSidebar.
+ */
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, Search, User as UserIcon } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { KautilyaIcon } from "@/components/selection-toolbar/shared";
+import { cn } from "@/lib/utils";
+
+type Item = {
+  /** Tab label, used for the aria-label. Bottom nav is icon-only. */
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  matchPrefixes?: string[];
+};
+
+export function SiteBottomNav() {
+  const pathname = usePathname();
+  const { user } = useAuth();
+
+  const items: Item[] = [
+    { href: "/", label: "Home", icon: <Home className="size-5" /> },
+    {
+      href: "/search",
+      label: "Search",
+      icon: <Search className="size-5" />,
+      // Search is the knowledgebase entry point too — keep the tab lit
+      // while the user is reading anywhere in the library.
+      matchPrefixes: [
+        "/search",
+        "/books",
+        "/letters",
+        "/transcriptions",
+        "/essays",
+        "/glossary",
+        "/journals",
+        "/magazines",
+        "/other-documents",
+        "/disciples",
+      ],
+    },
+    {
+      href: "/chat",
+      label: "Kautilya",
+      icon: <KautilyaIcon className="size-5" />,
+    },
+    {
+      href: user ? "/u/me" : "/login",
+      label: user ? "You" : "Sign in",
+      // Show the user's uploaded avatar when available so the nav
+      // feels personalized. Falls back to the generic person glyph
+      // for anonymous viewers and signed-in users who haven't
+      // uploaded a picture yet. The avatar circle is slightly larger
+      // (size-6 vs the size-5 icons elsewhere) so it reads as an
+      // identifying glyph rather than fading in with the other tabs.
+      icon: user?.avatar_url ? (
+        <Image
+          src={user.avatar_url}
+          alt=""
+          width={28}
+          height={28}
+          className="size-7 rounded-full object-cover ring-1 ring-foreground/10"
+          unoptimized
+        />
+      ) : (
+        <UserIcon className="size-5" />
+      ),
+      matchPrefixes: ["/u/me", "/login", "/signup"],
+    },
+  ];
+
+  function isActive(item: Item): boolean {
+    if (item.matchPrefixes) {
+      return item.matchPrefixes.some((p) =>
+        p === "/" ? pathname === "/" : pathname.startsWith(p),
+      );
+    }
+    if (item.href === "/") return pathname === "/";
+    return pathname === item.href || pathname.startsWith(`${item.href}/`);
+  }
+
+  return (
+    <nav
+      aria-label="Primary"
+      className={cn(
+        "md:hidden fixed inset-x-0 bottom-0 z-40",
+        "bg-background/95 backdrop-blur border-t border-border",
+        "pb-[env(safe-area-inset-bottom)]",
+      )}
+    >
+      <ul className="flex items-stretch justify-around py-2">
+        {items.map((item) => {
+          const active = isActive(item);
+          return (
+            <li
+              key={item.label}
+              // flex + items-center + justify-center so the fixed-size
+              // pill below sits centred inside its equal-width cell;
+              // without these the pill collapses to the left edge of
+              // each `flex-1` slot.
+              className="flex-1 flex items-center justify-center"
+            >
+              <Link
+                href={item.href}
+                aria-label={item.label}
+                aria-current={active ? "page" : undefined}
+                className={cn(
+                  "w-12 h-12 rounded-md flex flex-col items-center justify-center",
+                  active
+                    ? "text-white bg-primary"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {item.icon}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}