feat: add user centric features

2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
@@ -0,0 +1,105 @@
+"use client";
+
+/**
+ * SiteBottomNav — mobile-only bottom tab bar.
+ *
+ * Four items: Home (Feed) · Knowledgebase · Search · 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 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 { cn } from "@/lib/utils";
+
+type Item = {
+  href: string;
+  label: 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: user ? "/u/me" : "/login",
+      label: user ? "You" : "Sign in",
+      icon: <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">
+        {items.map((item) => {
+          const active = isActive(item);
+          return (
+            <li key={item.href} className="flex-1">
+              <Link
+                href={item.href}
+                aria-label={item.label}
+                aria-current={active ? "page" : undefined}
+                className={cn(
+                  "h-14 flex flex-col items-center justify-center gap-0.5",
+                  active
+                    ? "text-primary"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {item.icon}
+                <span className="text-[0.65rem] font-medium">
+                  {item.label}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}