Merge branch 'main' into fix/landing-page-ui-improvements

Rashi1404 · web-flow · commit 5ef8fe3fb380 · 2026-05-30T16:51:49.000+05:30
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -16,6 +16,8 @@ import RepoAnalyticsExplorer from "@/components/repo-analytics/RepoAnalyticsExpl
 import dynamic from "next/dynamic";
 import WeeklySummaryCard from "@/components/WeeklySummaryCard";
 import { AIMentorWidget } from "@/components/AIMentorWidget";
+import ExportButton from "@/components/ExportButton";
+import Link from "next/link";
 import PersonalRecords from "@/components/PersonalRecords";
 import LocalCodingTime from "@/components/LocalCodingTime";
 import CodingTimeWidget from "@/components/CodingTimeWidget";
@@ -105,7 +107,28 @@ export default async function DashboardPage() {
       <div className="min-h-screen bg-[var(--background)] p-4 text-[var(--foreground)] transition-colors md:p-8">
         <DashboardHeader />
 
-        <StreakAtRiskBanner />
+        {/* Quick actions */}
+        <div className="mt-4 flex flex-wrap items-center gap-2 sm:gap-3">
+          <Link
+            href="/wrapped"
+            className="inline-flex items-center gap-2 rounded-lg border border-[var(--accent)] bg-[var(--accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--accent)] transition-opacity hover:opacity-90"
+          >
+            ✨ Year in Code
+          </Link>
+          <Link
+            href="/dashboard/settings"
+            className="secondary-button inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium"
+          >
+            Settings
+          </Link>
+          <div className="sm:ml-auto">
+            <ExportButton />
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <StreakAtRiskBanner />
+        </div>
 
         <div className="mt-6 mb-6">
           <TodayFocusHero userName={session.user?.name ?? null} />
diff --git a/src/components/AppNavbar.tsx b/src/components/AppNavbar.tsx
@@ -1,54 +1,54 @@
-﻿"use client";
+"use client";
 
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
-type NavItem = {
-  href: string;
-  label: string;
-};
+type NavItem = { href: string; label: string };
 
 function isActivePath(pathname: string, href: string) {
-  if (href === "/") {
-    return pathname === "/";
-  }
-
+  if (href === "/") return pathname === "/";
   if (href.includes("#")) {
     const [base] = href.split("#");
     return pathname === base;
   }
-
   return pathname === href || pathname.startsWith(`${href}/`);
 }
+
+const MONO = "var(--font-jetbrains, ui-monospace, monospace)";
+
 export default function AppNavbar() {
   const pathname = usePathname();
   const { data: session, status } = useSession();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => { setMobileOpen(false); }, [pathname]);
 
   useEffect(() => {
-    setMobileOpen(false);
-  }, [pathname]);
+    const fn = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", fn, { passive: true });
+    return () => window.removeEventListener("scroll", fn);
+  }, []);
 
   const isAuthenticated = status === "authenticated" && Boolean(session);
   const isPublicProfileRoute = pathname.startsWith("/u/");
   const identityLabel =
-    session?.user?.name ?? session?.githubLogin ?? session?.user?.email ?? "GitHub user";
+    session?.githubLogin ?? session?.user?.name ?? session?.user?.email ?? "user";
 
   const navItems = useMemo<NavItem[]>(() => {
     if (isAuthenticated) {
       return [
         { href: "/dashboard", label: "Dashboard" },
         { href: "/dashboard#streaks", label: "Streaks" },
-        { href: "/dashboard#pull-requests", label: "Pull Requests" },
+        { href: "/dashboard#pull-requests", label: "PRs" },
         { href: "/dashboard#goals", label: "Goals" },
         { href: "/leaderboard", label: "Leaderboard" },
         { href: "/dashboard/settings", label: "Settings" },
       ];
     }
-
     return [
       { href: "/", label: "Home" },
       { href: "/#features", label: "Features" },
@@ -57,126 +57,164 @@ export default function AppNavbar() {
     ];
   }, [isAuthenticated]);
 
+  const headerStyle: React.CSSProperties = {
+    position: "sticky",
+    top: 0,
+    zIndex: 50,
+    background: scrolled ? "rgba(6,11,24,0.92)" : "var(--background)",
+    backdropFilter: scrolled ? "blur(16px)" : "none",
+    WebkitBackdropFilter: scrolled ? "blur(16px)" : "none",
+    borderBottom: "1px solid var(--border)",
+    transition: "background 0.3s ease",
+  };
+
   return (
-    <header className="sticky top-0 z-50 border-b border-[var(--border)] bg-[var(--background)] backdrop-blur-md">
+    <header style={headerStyle}>
       <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8">
+
+        {/* Logo */}
         <Link
           href={isAuthenticated ? "/dashboard" : "/"}
-          className="inline-flex items-center gap-2 text-sm font-semibold tracking-[0.16em] text-[var(--foreground)]"
-          style={{ fontFamily: "var(--font-jetbrains, ui-monospace, monospace)" }}
+          className="inline-flex items-center gap-2 select-none"
+          style={{ fontFamily: MONO }}
         >
-          <span className="text-[var(--accent)]">{">"}</span>
-          <span>DEVTRACK</span>
+          <span className="text-base font-bold" style={{ color: "var(--accent)" }}>▲</span>
+          <span className="text-sm font-bold tracking-[0.18em] text-[var(--foreground)]">DEVTRACK</span>
         </Link>
 
-        <nav className="hidden items-center gap-2 lg:flex">
+        {/* Desktop nav */}
+        <nav className="hidden items-center lg:flex" aria-label="Main navigation">
           {navItems.map((item) => {
             const active = isActivePath(pathname, item.href);
-
             return (
               <Link
                 key={item.href}
                 href={item.href}
-                className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
-                  active
-                    ? "bg-[var(--accent-soft)] text-[var(--accent)]"
-                    : "text-[var(--muted-foreground)] hover:bg-[var(--card)] hover:text-[var(--foreground)]"
-                }`}
+                className="relative px-3 py-2 text-[12px] font-medium transition-colors duration-150"
+                style={{
+                  fontFamily: MONO,
+                  color: active ? "var(--accent)" : "var(--muted-foreground)",
+                }}
+                onMouseEnter={(e) => {
+                  if (!active) (e.currentTarget as HTMLAnchorElement).style.color = "var(--foreground)";
+                }}
+                onMouseLeave={(e) => {
+                  if (!active) (e.currentTarget as HTMLAnchorElement).style.color = "var(--muted-foreground)";
+                }}
               >
                 {item.label}
+                {active && (
+                  <span
+                    className="absolute inset-x-2 bottom-0 h-px"
+                    style={{ background: "var(--accent)" }}
+                  />
+                )}
               </Link>
             );
           })}
         </nav>
 
+        {/* Desktop right */}
         <div className="hidden items-center gap-3 lg:flex">
           {isAuthenticated ? (
             <>
-              <div className="hidden max-w-48 truncate rounded-full border border-[var(--border)] bg-[var(--card)] px-4 py-2 text-sm text-[var(--card-foreground)] xl:block">
-                {identityLabel}
-              </div>
+              <span
+                className="hidden max-w-44 truncate text-[11px] text-[var(--muted-foreground)] xl:block"
+                style={{ fontFamily: MONO }}
+              >
+                @{identityLabel}
+              </span>
               <button
                 type="button"
                 onClick={() => signOut({ callbackUrl: "/" })}
-                className="rounded-full bg-[var(--destructive)] px-4 py-2 text-sm font-semibold text-[var(--destructive-foreground)] transition-opacity hover:opacity-90"
+                className="rounded-md border border-[var(--border)] px-3 py-1.5 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:border-red-500/60 hover:text-red-400"
+                style={{ fontFamily: MONO }}
               >
-                Sign out
+                sign out →
               </button>
             </>
           ) : (
             !isPublicProfileRoute && (
               <Link
                 href="/api/auth/signin/github?callbackUrl=/dashboard"
-                className="rounded-full bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-[var(--accent-foreground)] transition-opacity hover:opacity-90"
+                className="rounded-md px-4 py-2 text-[12px] font-semibold text-[var(--accent-foreground)] transition-opacity hover:opacity-90"
+                style={{ fontFamily: MONO, background: "var(--accent)" }}
               >
-                Sign in with GitHub
+                SIGN IN →
               </Link>
             )
           )}
         </div>
 
+        {/* Mobile hamburger */}
         <button
           type="button"
-          onClick={() => setMobileOpen((open) => !open)}
-          className="inline-flex items-center justify-center rounded-full border border-[var(--border)] bg-[var(--card)] p-2 text-[var(--foreground)] lg:hidden"
+          onClick={() => setMobileOpen((o) => !o)}
+          className="inline-flex items-center justify-center rounded-md border border-[var(--border)] p-2 text-[var(--foreground)] lg:hidden"
           aria-expanded={mobileOpen}
           aria-controls="app-mobile-nav"
           aria-label={mobileOpen ? "Close navigation menu" : "Open navigation menu"}
         >
-          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          {mobileOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
         </button>
       </div>
 
-      {mobileOpen ? (
+      {/* Mobile menu */}
+      {mobileOpen && (
         <div
           id="app-mobile-nav"
-          className="border-t border-[var(--border)] bg-[var(--background)] lg:hidden"
+          className="border-t border-[var(--border)] lg:hidden"
+          style={{ background: "rgba(6,11,24,0.97)", backdropFilter: "blur(16px)" }}
         >
-          <div className="mx-auto flex w-full max-w-7xl flex-col gap-2 px-4 py-4 sm:px-6 lg:px-8">
+          <div className="mx-auto flex w-full max-w-7xl flex-col gap-1 px-4 py-4 sm:px-6">
             {navItems.map((item) => {
               const active = isActivePath(pathname, item.href);
-
               return (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className={`rounded-2xl px-4 py-3 text-sm font-medium transition-colors ${
-                    active
-                      ? "bg-[var(--accent-soft)] text-[var(--accent)]"
-                      : "bg-[var(--card)] text-[var(--card-foreground)] hover:bg-[var(--control)]"
-                  }`}
+                  className="rounded-lg px-4 py-3 text-sm font-medium transition-colors"
+                  style={{
+                    fontFamily: MONO,
+                    color: active ? "var(--accent)" : "var(--muted-foreground)",
+                    background: active ? "var(--accent-soft)" : "transparent",
+                  }}
                 >
                   {item.label}
                 </Link>
               );
             })}
 
-            {isAuthenticated ? (
-              <>
-                <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-sm text-[var(--card-foreground)]">
-                  {identityLabel}
-                </div>
-                <button
-                  type="button"
-                  onClick={() => signOut({ callbackUrl: "/" })}
-                  className="rounded-2xl bg-[var(--destructive)] px-4 py-3 text-left text-sm font-semibold text-[var(--destructive-foreground)]"
-                >
-                  Sign out
-                </button>
-              </>
-            ) : (
-              !isPublicProfileRoute && (
-                <Link
-                  href="/api/auth/signin/github?callbackUrl=/dashboard"
-                  className="rounded-2xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-[var(--accent-foreground)]"
-                >
-                  Sign in with GitHub
-                </Link>
-              )
-            )}
+            <div className="mt-3 border-t border-[var(--border)] pt-3">
+              {isAuthenticated ? (
+                <>
+                  <p className="px-4 py-1.5 text-[11px] text-[var(--muted-foreground)]" style={{ fontFamily: MONO }}>
+                    @{identityLabel}
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => signOut({ callbackUrl: "/" })}
+                    className="w-full rounded-lg px-4 py-3 text-left text-sm font-medium text-red-400 transition-colors hover:bg-red-500/10"
+                    style={{ fontFamily: MONO }}
+                  >
+                    sign out →
+                  </button>
+                </>
+              ) : (
+                !isPublicProfileRoute && (
+                  <Link
+                    href="/api/auth/signin/github?callbackUrl=/dashboard"
+                    className="block rounded-lg px-4 py-3 text-center text-sm font-semibold text-[var(--accent-foreground)]"
+                    style={{ background: "var(--accent)" }}
+                  >
+                    SIGN IN →
+                  </Link>
+                )
+              )}
+            </div>
           </div>
         </div>
-      ) : null}
+      )}
     </header>
   );
 }
