@lukoweb/apitogo 0.1.53 → 0.1.55

package/src/lib/authentication/providers/dev-portal.tsx

@@ -12,17 +12,25 @@ import {
   useAuthState,
   waitForAuthStateHydration,
 } from "../state.js";
+import {
+  DevPortalForgotPasswordPage,
+  DevPortalLoginPage,
+  DevPortalRegisterPage,
+  DevPortalResetPasswordPage,
+  DevPortalVerifyEmailPage,
+} from "./dev-portal-auth-pages.js";
 import type {
   DevPortalAuthMode,
   EndUserMeResponse,
 } from "./dev-portal-constants.js";
 import {
-  buildDevPortalLoginUrl,
   buildDevPortalLogoutUrl,
+  isNativeAuthEnabled,
   isPlaceholderDevPortalApiUrl,
   mapEndUserMeToProfile,
   probeDevPortalBackend,
   resolveDevPortalApiBaseUrl,
+  toAbsoluteReturnUrl,
 } from "./dev-portal-utils.js";
 
 export type DevPortalProviderData = {
@@ -49,6 +57,8 @@ export class DevPortalAuthenticationProvider
   private refreshGeneration = 0;
   private refreshInFlight: Promise<boolean> | null = null;
 
+  private authConfigNativeEnabled: boolean | null = null;
+
   constructor({
     apiBaseUrl,
     redirectToAfterSignIn,
@@ -62,6 +72,27 @@ export class DevPortalAuthenticationProvider
     this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
+  getRoutes() {
+    const pageProps = { apiBaseUrl: this.apiBaseUrl };
+    return [
+      ...super.getRoutes(),
+      { path: "/login", element: <DevPortalLoginPage {...pageProps} /> },
+      { path: "/register", element: <DevPortalRegisterPage {...pageProps} /> },
+      {
+        path: "/verify-email",
+        element: <DevPortalVerifyEmailPage {...pageProps} />,
+      },
+      {
+        path: "/forgot-password",
+        element: <DevPortalForgotPasswordPage {...pageProps} />,
+      },
+      {
+        path: "/reset-password",
+        element: <DevPortalResetPasswordPage {...pageProps} />,
+      },
+    ];
+  }
+
   async initialize(_context: ZudokuContext): Promise<void> {
     // Node SSR cannot reach local HTTPS backends with self-signed certs.
     if (typeof window === "undefined") {
@@ -70,6 +101,16 @@ export class DevPortalAuthenticationProvider
 
     await waitForAuthStateHydration();
     await this.syncBackendAvailability();
+    if (this.backendAvailable && this.apiBaseUrl) {
+      try {
+        const { fetchDevPortalAuthConfig } =
+          await import("./dev-portal-utils.js");
+        const config = await fetchDevPortalAuthConfig(this.apiBaseUrl);
+        this.authConfigNativeEnabled = isNativeAuthEnabled(config);
+      } catch {
+        this.authConfigNativeEnabled = null;
+      }
+    }
     if (!this.backendAvailable) {
       this.setPreviewState();
       return;
@@ -235,20 +276,24 @@ export class DevPortalAuthenticationProvider
     _: AuthActionContext,
     { redirectTo }: AuthActionOptions = {},
   ): Promise<void> {
-    const apiBaseUrl = this.ensureConfiguredBackend();
+    this.ensureConfiguredBackend();
     const target =
       redirectTo ?? this.redirectToAfterSignIn ?? window.location.href;
-    window.location.assign(buildDevPortalLoginUrl(apiBaseUrl, target));
+    const url = new URL("/login", window.location.origin);
+    url.searchParams.set("redirect", toAbsoluteReturnUrl(target));
+    window.location.assign(url.toString());
   }
 
   async signUp(
     _: AuthActionContext,
     { redirectTo }: AuthActionOptions = {},
   ): Promise<void> {
-    const apiBaseUrl = this.ensureConfiguredBackend();
+    this.ensureConfiguredBackend();
     const target =
       redirectTo ?? this.redirectToAfterSignUp ?? window.location.href;
-    window.location.assign(buildDevPortalLoginUrl(apiBaseUrl, target));
+    const url = new URL("/register", window.location.origin);
+    url.searchParams.set("redirect", toAbsoluteReturnUrl(target));
+    window.location.assign(url.toString());
   }
 
   async signOut(_: AuthActionContext): Promise<void> {
@@ -259,7 +304,7 @@ export class DevPortalAuthenticationProvider
   }
 
   hasDistinctSignUpFlow(): boolean {
-    return false;
+    return this.authConfigNativeEnabled !== false;
   }
 
   async signRequest(request: Request): Promise<Request> {

package/src/lib/components/Header.tsx

@@ -20,9 +20,11 @@ import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { HeaderAuthActions } from "./HeaderAuthActions.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
 import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
+import { SiteTitle } from "./SiteTitle.js";
 import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
@@ -78,8 +80,17 @@ const ProfileMenu = () => {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
-        <Button size="lg" variant="ghost">
-          {profile?.name ?? "My Account"}
+        <Button
+          size="lg"
+          variant="outline"
+          className="gap-2 rounded-[10px] border-border bg-muted/40 px-2.5"
+        >
+          <span className="flex size-7 items-center justify-center rounded-[7px] bg-primary text-xs font-bold text-primary-foreground">
+            {(profile?.name ?? "A").slice(0, 1).toUpperCase()}
+          </span>
+          <span className="max-w-32 truncate font-semibold">
+            {profile?.name ?? "My Account"}
+          </span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
@@ -116,24 +127,25 @@ const ProfileMenu = () => {
           ))}
         <DropdownMenuSeparator />
         <Link to="/signout">
-          <DropdownMenuItem className="flex gap-2">
+          <DropdownMenuItem className="flex gap-2 text-primary">
             <LogOutIcon size={16} strokeWidth={1} absoluteStrokeWidth />
-            Logout
+            Log out
           </DropdownMenuItem>
         </Link>
       </DropdownMenuContent>
     </DropdownMenu>
   );
 };
+
 export const Header = memo(function HeaderInner() {
   const context = useZudoku();
   const {
     options: { site, header, basePath },
   } = context;
 
-  const searchPosition = header?.placements?.search ?? "center";
-  const navPosition = header?.placements?.navigation ?? "end";
-  const authPlacement = header?.placements?.auth ?? "navigation";
+  const searchPosition = header?.placements?.search ?? "end";
+  const navPosition = header?.placements?.navigation ?? "start";
+  const authPlacement = header?.placements?.auth ?? "end";
   const authPosition =
     authPlacement === "navigation" ? navPosition : authPlacement;
 
@@ -148,18 +160,18 @@ export const Header = memo(function HeaderInner() {
       : joinUrl(basePath, site.logo.src.dark)
     : undefined;
 
-  const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
+  const borderBottom = "border-b border-border";
 
   return (
     <header
-      className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full"
+      className="sticky lg:top-0 z-10 w-full bg-background/82 backdrop-blur-[14px]"
       data-pagefind-ignore="all"
     >
       <Banner />
       <div className={cn(borderBottom, "relative")}>
         <PageProgress />
-        <div className="max-w-screen-2xl mx-auto flex lg:grid lg:grid-cols-[1fr_auto_1fr] gap-2 items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
-          <div className="flex items-center gap-4 min-w-0 justify-self-start">
+        <div className="mx-auto flex h-(--top-header-height) max-w-[1200px] items-center justify-between gap-6 px-6">
+          <div className="flex min-w-0 items-center gap-2">
             <Link
               to={site?.logo?.href ?? "/"}
               reloadDocument={site?.logo?.reloadDocument ?? true}
@@ -182,69 +194,67 @@ export const Header = memo(function HeaderInner() {
                       className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
+                    {site.title && site.showTitleInHeader !== false ? (
+                      <SiteTitle title={site.title} />
+                    ) : null}
                   </>
                 ) : (
-                  <span className="font-semibold text-2xl">{site?.title}</span>
+                  <span className="text-xl font-bold tracking-tight">
+                    {site?.title}
+                  </span>
                 )}
               </div>
             </Link>
             <Slot.Target name="head-navigation-start" />
+            <div className="hidden lg:flex min-w-0 items-center ml-2">
+              <Slot.Target name="top-navigation-before" />
+              <TopNavigation />
+              <Slot.Target name="top-navigation-after" />
+            </div>
             {searchPosition === "start" && (
               <Search className="hidden lg:flex" />
             )}
-            {authPosition === "start" && (
-              <div className="hidden lg:flex">
-                <ProfileMenu />
-              </div>
-            )}
             {navPosition === "start" && (
-              <div className="hidden lg:block min-w-0">
+              <div className="hidden lg:block min-w-0 ml-2">
                 <SuspendedHeaderNavigation />
               </div>
             )}
           </div>
 
-          <div className="flex items-center justify-center">
+          <div className="hidden lg:flex items-center justify-center">
             <Search
-              className={cn(
-                searchPosition === "center" ? "flex" : "flex lg:hidden",
-              )}
+              className={cn(searchPosition === "center" ? "flex" : "hidden")}
             />
             {navPosition === "center" && (
-              <div className="hidden lg:block min-w-0">
+              <div className="min-w-0">
                 <SuspendedHeaderNavigation />
               </div>
             )}
-            {authPosition === "center" && (
-              <div className="hidden lg:flex">
-                <ProfileMenu />
-              </div>
-            )}
           </div>
 
-          <div className="flex items-center gap-2 justify-self-end">
+          <div className="flex items-center gap-2.5 justify-self-end">
             <MobileTopNavigation />
-            <div className="hidden lg:flex items-center text-sm gap-2">
+            <div className="hidden lg:flex items-center gap-2.5 text-sm">
               {navPosition === "end" && (
                 <div className="min-w-0">
                   <SuspendedHeaderNavigation />
                 </div>
               )}
-              {authPosition === "end" && <ProfileMenu />}
               {searchPosition === "end" && <Search />}
               <Slot.Target name="head-navigation-end" />
-              <ThemeSwitch />
+              <ThemeSwitch variant="compact" />
+              {authPosition === "end" ? (
+                <>
+                  <HeaderAuthActions />
+                  <ProfileMenu />
+                </>
+              ) : (
+                <ProfileMenu />
+              )}
             </div>
           </div>
         </div>
       </div>
-      <div className={cn("hidden lg:block", borderBottom)}>
-        <div className="max-w-screen-2xl mx-auto border-transparent relative">
-          <Slot.Target name="top-navigation-before" />
-          <TopNavigation />
-          <Slot.Target name="top-navigation-after" />
-        </div>
-      </div>
     </header>
   );
 });

package/src/lib/components/HeaderAuthActions.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { ArrowRightIcon } from "lucide-react";
+import { useLocation } from "react-router";
+import { useAuth } from "../authentication/hook.js";
+import { cn } from "../util/cn.js";
+
+export const HeaderAuthActions = ({ className }: { className?: string }) => {
+  const auth = useAuth();
+  const location = useLocation();
+  const { isAuthEnabled, isAuthenticated } = auth;
+
+  if (!isAuthEnabled || isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className={cn("hidden lg:flex items-center gap-2.5", className)}>
+      <Button
+        variant="ghost"
+        size="lg"
+        className="font-semibold text-foreground hover:text-primary px-3"
+        onClick={() => void auth.login({ redirectTo: location.pathname })}
+      >
+        Sign in
+      </Button>
+      <Button
+        size="lg"
+        className="gap-1.5 rounded-[9px] px-4 font-semibold shadow-[0_4px_14px_-4px] shadow-primary/30"
+        onClick={() => void auth.signup({ redirectTo: location.pathname })}
+      >
+        Start free
+        <ArrowRightIcon size={15} strokeWidth={2} />
+      </Button>
+    </div>
+  );
+};

package/src/lib/components/HeaderNavigation.tsx

@@ -6,6 +6,7 @@ import {
   type HeaderNavItem,
   type HeaderNavLinkItem,
 } from "../../config/validators/HeaderNavigationSchema.js";
+import { withoutMarketingCtaHeaderNavigation } from "../authentication/header-nav-filter.js";
 import { useAuth } from "../authentication/hook.js";
 import type { ZudokuContext } from "../core/ZudokuContext.js";
 import {
@@ -15,12 +16,14 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
 } from "../ui/NavigationMenu.js";
 import { cn } from "../util/cn.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { shouldShowItem } from "./navigation/utils.js";
 
+const marketingNavLinkClassName =
+  "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+
 const NavLinkItem = ({ item }: { item: HeaderNavLinkItem }) => {
   const Icon = item.icon as LucideIcon | undefined;
   return (
@@ -118,10 +121,7 @@ const HeaderNavItemComponent = ({
             to={item.to}
             target={item.target}
             rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
-            className={cn(
-              navigationMenuTriggerStyle(),
-              "flex items-center gap-2",
-            )}
+            className={marketingNavLinkClassName}
           >
             {Icon && <Icon size={16} />}
             {item.label}
@@ -146,8 +146,10 @@ const HeaderNavItemComponent = ({
 export const HeaderNavigation = () => {
   const context = useZudoku();
   const auth = useAuth();
-  const items = context.options.header?.navigation;
-  const navPosition = context.options.header?.placements?.navigation ?? "end";
+  const items = withoutMarketingCtaHeaderNavigation(
+    context.options.header?.navigation ?? [],
+  );
+  const navPosition = context.options.header?.placements?.navigation ?? "start";
   if (!items || items.length === 0) return null;
 
   const viewportAlign =
@@ -158,8 +160,8 @@ export const HeaderNavigation = () => {
         : undefined;
 
   return (
-    <NavigationMenu className={viewportAlign}>
-      <NavigationMenuList>
+    <NavigationMenu className={cn("max-w-none", viewportAlign)}>
+      <NavigationMenuList className="gap-1">
         {items.map((item) => (
           <HeaderNavItemComponent
             key={"to" in item ? item.to : item.label}

package/src/lib/components/MobileTopNavigation.tsx

@@ -3,6 +3,7 @@ import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { deepEqual } from "fast-equals";
 import {
+  ArrowRightIcon,
   ChevronDownIcon,
   LogOutIcon,
   MenuIcon,
@@ -15,6 +16,7 @@ import {
   type HeaderNavItem,
   type HeaderNavLinkItem,
 } from "../../config/validators/HeaderNavigationSchema.js";
+import { withoutMarketingCtaHeaderNavigation } from "../authentication/header-nav-filter.js";
 import { useAuth } from "../authentication/hook.js";
 import {
   Collapsible,
@@ -127,8 +129,10 @@ export const MobileTopNavigation = () => {
     options: { header, navigation = [], site },
     getProfileMenuItems,
   } = context;
-  const headerNavigation = header?.navigation ?? [];
-  const { isAuthenticated, profile, isAuthEnabled } = authState;
+  const headerNavigation = withoutMarketingCtaHeaderNavigation(
+    header?.navigation ?? [],
+  );
+  const { isAuthenticated, profile, isAuthEnabled, login, signup } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
@@ -158,18 +162,6 @@ export const MobileTopNavigation = () => {
               <DrawerTitle>Navigation</DrawerTitle>
             </VisuallyHidden>
             <ul className="flex flex-col gap-1 px-4">
-              {headerNavigation.map((item) => (
-                <MobileHeaderNavItem
-                  key={item.label}
-                  item={item}
-                  onNavigate={() => setDrawerOpen(false)}
-                />
-              ))}
-              {headerNavigation.length > 0 && <Separator className="my-2" />}
-              <li className="empty:hidden">
-                <Slot.Target name="top-navigation-side" />
-              </li>
-
               {filteredItems.map((item) => {
                 if (item.type === "separator") {
                   return <Separator className="my-2" key={item.label} />;
@@ -192,6 +184,19 @@ export const MobileTopNavigation = () => {
                   </li>
                 );
               })}
+              {filteredItems.length > 0 && headerNavigation.length > 0 && (
+                <Separator className="my-2" />
+              )}
+              <li className="empty:hidden">
+                <Slot.Target name="top-navigation-side" />
+              </li>
+              {headerNavigation.map((item) => (
+                <MobileHeaderNavItem
+                  key={item.label}
+                  item={item}
+                  onNavigate={() => setDrawerOpen(false)}
+                />
+              ))}
               {isAuthEnabled && isAuthenticated && (
                 <>
                   <Separator className="my-2" />
@@ -227,7 +232,7 @@ export const MobileTopNavigation = () => {
             </ul>
           </div>
           <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between gap-2">
               {isAuthEnabled &&
                 (isAuthenticated ? (
                   <Button asChild variant="outline">
@@ -241,20 +246,34 @@ export const MobileTopNavigation = () => {
                         strokeWidth={1}
                         absoluteStrokeWidth
                       />
-                      Logout
+                      Log out
                     </Link>
                   </Button>
                 ) : (
-                  <Button asChild variant="outline">
-                    <Link
-                      to={`/signin?redirect=${encodeURIComponent(location.pathname)}`}
-                      onClick={() => setDrawerOpen(false)}
+                  <div className="flex flex-1 items-center gap-2">
+                    <Button
+                      variant="ghost"
+                      className="font-semibold"
+                      onClick={() => {
+                        setDrawerOpen(false);
+                        void login({ redirectTo: location.pathname });
+                      }}
                     >
-                      Login
-                    </Link>
-                  </Button>
+                      Sign in
+                    </Button>
+                    <Button
+                      className="gap-1.5"
+                      onClick={() => {
+                        setDrawerOpen(false);
+                        void signup({ redirectTo: location.pathname });
+                      }}
+                    >
+                      Start free
+                      <ArrowRightIcon size={15} strokeWidth={2} />
+                    </Button>
+                  </div>
                 ))}
-              <ThemeSwitch />
+              <ThemeSwitch variant="compact" />
             </div>
             {site?.showPoweredBy !== false && (
               <PoweredByZudoku className="grow-0 justify-center gap-1" />

package/src/lib/components/SiteTitle.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../util/cn.js";
+
+type SiteTitleProps = {
+  title: string;
+  className?: string;
+};
+
+export const SiteTitle = ({ title, className }: SiteTitleProps) => {
+  return (
+    <div
+      className={cn(
+        "shrink-0 font-bold text-[19px] tracking-[-0.02em] text-foreground",
+        className,
+      )}
+      style={{ fontFamily: '"Space Grotesk", var(--font-sans, sans-serif)' }}
+    >
+      {title}
+    </div>
+  );
+};

package/src/lib/components/ThemeSwitch.tsx

@@ -4,17 +4,51 @@ import { focusRing } from "../ui/util.js";
 import { cn } from "../util/cn.js";
 import { useIsClient } from "./ClientOnly.js";
 
-export const ThemeSwitch = () => {
+export const ThemeSwitch = ({
+  variant = "default",
+}: {
+  variant?: "default" | "compact";
+}) => {
   const { resolvedTheme, setTheme } = useTheme();
   const isClient = useIsClient();
 
   const theme = isClient ? resolvedTheme : undefined;
 
+  const handleThemeToggle = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
+  if (variant === "compact") {
+    return (
+      <button
+        type="button"
+        className={cn(
+          "grid size-[38px] place-items-center rounded-[9px] border border-border text-muted-foreground transition-colors hover:border-border hover:text-foreground",
+          focusRing,
+        )}
+        onClick={handleThemeToggle}
+        aria-label={
+          !isClient
+            ? "Toggle theme"
+            : theme === "dark"
+              ? "Switch to light mode"
+              : "Switch to dark mode"
+        }
+      >
+        {!isClient || theme === "dark" ? (
+          <SunIcon size={17} strokeWidth={1.8} />
+        ) : (
+          <MoonIcon size={17} strokeWidth={1.8} />
+        )}
+      </button>
+    );
+  }
+
   return (
     <button
       type="button"
       className={cn("flex rounded-full border p-0.5 gap-0.5 group", focusRing)}
-      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      onClick={handleThemeToggle}
       aria-label={
         !isClient
           ? "Toggle theme"

package/src/lib/components/TopNavigation.tsx

@@ -7,8 +7,6 @@ import type { NavigationItem } from "../../config/validators/NavigationSchema.js
 import { useAuth } from "../authentication/hook.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
-import { Slot } from "./Slot.js";
-
 export const TopNavigation = () => {
   const context = useZudoku();
   const {
@@ -18,30 +16,26 @@ export const TopNavigation = () => {
   const filteredItems = navigation.filter(shouldShowItem({ auth, context }));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
-    return <style>{`:root { --top-nav-height: 0px; }`}</style>;
+    return null;
   }
 
   return (
     <Suspense>
-      <div className="items-center justify-between px-8 h-(--top-nav-height) hidden lg:flex text-sm relative">
-        <nav className="text-sm">
-          <ul className="flex flex-row items-center gap-8">
-            {filteredItems.map((item) =>
-              item.type === "separator" ? (
-                <li key={item.label} className="-mx-4 h-7">
-                  <Separator orientation="vertical" />
-                </li>
-              ) : item.type !== "section" && item.type !== "filter" ? (
-                <li key={item.label + item.type}>
-                  <TopNavItem {...item} />
-                </li>
-              ) : null,
-            )}
-          </ul>
-        </nav>
-        <Slot.Target name="top-navigation-side" />
-      </div>
-      {/* <PageProgress /> */}
+      <nav className="min-w-0 text-sm">
+        <ul className="flex flex-row items-center gap-1">
+          {filteredItems.map((item) =>
+            item.type === "separator" ? (
+              <li key={item.label} className="mx-1 h-5">
+                <Separator orientation="vertical" />
+              </li>
+            ) : item.type !== "section" && item.type !== "filter" ? (
+              <li key={item.label + item.type}>
+                <TopNavItem {...item} />
+              </li>
+            ) : null,
+          )}
+        </ul>
+      </nav>
     </Suspense>
   );
 };
@@ -60,18 +54,11 @@ export const TopNavLink = ({
       className={({ isActive: isActiveNavLink, isPending }) => {
         const isActiveReal = isActiveNavLink || isActive;
         return cx(
-          "flex items-center gap-2 lg:py-3.5 font-medium -mb-px transition duration-150 delay-75 relative",
+          "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
           isActiveReal || isPending
-            ? [
-                "text-foreground",
-                // underline with view transition animation
-                "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0",
-                "after:h-0.5 after:bg-primary",
-                isActiveReal &&
-                  "after:[view-transition-name:top-nav-underline]",
-                isPending && "after:bg-primary/25",
-              ]
-            : "text-foreground/75 hover:text-foreground",
+            ? "bg-muted text-foreground"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          isPending && "opacity-75",
         );
       }}
       {...props}