@lukoweb/apitogo 0.1.54 → 0.1.55

package/src/lib/authentication/auth-header-nav.ts

@@ -27,22 +27,12 @@ export function applyAuthenticationHeaderNav<T extends ZudokuConfig>(
   const authNavEnabled = config.__meta?.authenticationEnabled === true;
   const navigation = config.header?.navigation ?? [];
 
-  if (!authNavEnabled) {
-    const filtered = withoutLoginNavigation(navigation);
-    if (filtered.length === navigation.length) {
-      return config;
-    }
-
-    return {
-      ...config,
-      header: {
-        ...config.header,
-        navigation: filtered,
-      },
-    };
+  if (authNavEnabled) {
+    return config;
   }
 
-  if (navigation.some((item) => "to" in item && item.to === LOGIN_NAV_PATH)) {
+  const filtered = withoutLoginNavigation(navigation);
+  if (filtered.length === navigation.length) {
     return config;
   }
 
@@ -50,7 +40,7 @@ export function applyAuthenticationHeaderNav<T extends ZudokuConfig>(
     ...config,
     header: {
       ...config.header,
-      navigation: [...navigation, LOGIN_HEADER_NAV_ITEM],
+      navigation: filtered,
     },
   };
 }

package/src/lib/authentication/header-nav-filter.ts

@@ -0,0 +1,36 @@
+import type { HeaderNavigation } from "../../config/validators/HeaderNavigationSchema.js";
+import { LOGIN_NAV_PATH } from "./auth-header-nav.js";
+
+const AUTH_HEADER_PATHS = new Set([
+  LOGIN_NAV_PATH,
+  "/signin",
+  "/login",
+  "/signup",
+  "/register",
+]);
+
+const PRICING_HEADER_PATHS = new Set(["/pricing"]);
+
+export function withoutAuthHeaderNavigation(
+  navigation: HeaderNavigation,
+): HeaderNavigation {
+  return navigation.filter(
+    (item) => !("to" in item) || !AUTH_HEADER_PATHS.has(item.to),
+  );
+}
+
+export function withoutPricingHeaderNavigation(
+  navigation: HeaderNavigation,
+): HeaderNavigation {
+  return navigation.filter(
+    (item) => !("to" in item) || !PRICING_HEADER_PATHS.has(item.to),
+  );
+}
+
+export function withoutMarketingCtaHeaderNavigation(
+  navigation: HeaderNavigation,
+): HeaderNavigation {
+  return withoutPricingHeaderNavigation(
+    withoutAuthHeaderNavigation(navigation),
+  );
+}

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

@@ -33,7 +33,9 @@ function AuthPageShell({ title, description, children }: AuthPageShellProps) {
       <Card className="max-w-md w-full">
         <CardHeader>
           <CardTitle className="text-lg">{title}</CardTitle>
-          {description ? <CardDescription>{description}</CardDescription> : null}
+          {description ? (
+            <CardDescription>{description}</CardDescription>
+          ) : null}
         </CardHeader>
         <CardContent className="space-y-4">{children}</CardContent>
       </Card>
@@ -71,7 +73,9 @@ function OidcProviderButtons({
   return (
     <div className="space-y-2">
       {isNativeAuthEnabled(config) ? (
-        <p className="text-sm text-muted-foreground text-center">or continue with</p>
+        <p className="text-sm text-muted-foreground text-center">
+          or continue with
+        </p>
       ) : null}
       {config.providers.map((provider) => (
         <Button
@@ -81,7 +85,11 @@ function OidcProviderButtons({
           className="w-full"
           onClick={() => {
             window.location.assign(
-              buildDevPortalOidcChallengeUrl(apiBaseUrl, provider.id, returnUrl),
+              buildDevPortalOidcChallengeUrl(
+                apiBaseUrl,
+                provider.id,
+                returnUrl,
+              ),
             );
           }}
         >
@@ -92,14 +100,12 @@ function OidcProviderButtons({
   );
 }
 
-export function DevPortalLoginPage({
-  apiBaseUrl,
-}: {
-  apiBaseUrl?: string;
-}) {
+export function DevPortalLoginPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
   const baseUrl = useApiBaseUrl(apiBaseUrl);
   const returnUrl = useReturnUrl();
-  const [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(null);
+  const [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(
+    null,
+  );
   const [configLoading, setConfigLoading] = useState(true);
   const [configError, setConfigError] = useState<string | null>(null);
   const [email, setEmail] = useState("");
@@ -132,7 +138,10 @@ export function DevPortalLoginPage({
       setPending(true);
       setError(null);
       try {
-        await postDevPortalAuth(baseUrl, "/api/v1/auth/login", { email, password });
+        await postDevPortalAuth(baseUrl, "/api/v1/auth/login", {
+          email,
+          password,
+        });
         window.location.assign(toAbsoluteReturnUrl(returnUrl));
       } catch (err) {
         setError(err instanceof Error ? err.message : "Login failed.");
@@ -145,8 +154,13 @@ export function DevPortalLoginPage({
 
   if (!baseUrl) {
     return (
-      <AuthPageShell title="Sign in" description="Dev portal API is not configured.">
-        <p className="text-sm text-muted-foreground">Set authentication.apiBaseUrl to continue.</p>
+      <AuthPageShell
+        title="Sign in"
+        description="Dev portal API is not configured."
+      >
+        <p className="text-sm text-muted-foreground">
+          Set authentication.apiBaseUrl to continue.
+        </p>
       </AuthPageShell>
     );
   }
@@ -182,10 +196,16 @@ export function DevPortalLoginPage({
             {pending ? <Spinner /> : "Sign in"}
           </Button>
           <div className="flex justify-between text-sm">
-            <Link className="text-primary hover:underline" to="/forgot-password">
+            <Link
+              className="text-primary hover:underline"
+              to="/forgot-password"
+            >
               Forgot password?
             </Link>
-            <Link className="text-primary hover:underline" to={`/register?redirect=${encodeURIComponent(returnUrl)}`}>
+            <Link
+              className="text-primary hover:underline"
+              to={`/register?redirect=${encodeURIComponent(returnUrl)}`}
+            >
               Create account
             </Link>
           </div>
@@ -198,7 +218,11 @@ export function DevPortalLoginPage({
         </div>
       ) : config ? (
         <>
-          <OidcProviderButtons apiBaseUrl={baseUrl} config={config} returnUrl={returnUrl} />
+          <OidcProviderButtons
+            apiBaseUrl={baseUrl}
+            config={config}
+            returnUrl={returnUrl}
+          />
           {!isNativeAuthEnabled(config) && !config.providers.length ? (
             <p className="text-sm text-muted-foreground text-center">
               No sign-in methods are configured.
@@ -210,11 +234,7 @@ export function DevPortalLoginPage({
   );
 }
 
-export function DevPortalRegisterPage({
-  apiBaseUrl,
-}: {
-  apiBaseUrl?: string;
-}) {
+export function DevPortalRegisterPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
   const baseUrl = useApiBaseUrl(apiBaseUrl);
   const returnUrl = useReturnUrl();
   const [email, setEmail] = useState("");
@@ -249,14 +269,22 @@ export function DevPortalRegisterPage({
 
   if (!baseUrl) {
     return (
-      <AuthPageShell title="Create account" description="Dev portal API is not configured.">
-        <p className="text-sm text-muted-foreground">Set authentication.apiBaseUrl to continue.</p>
+      <AuthPageShell
+        title="Create account"
+        description="Dev portal API is not configured."
+      >
+        <p className="text-sm text-muted-foreground">
+          Set authentication.apiBaseUrl to continue.
+        </p>
       </AuthPageShell>
     );
   }
 
   return (
-    <AuthPageShell title="Create account" description="Register for API access.">
+    <AuthPageShell
+      title="Create account"
+      description="Register for API access."
+    >
       <form className="space-y-4" onSubmit={onSubmit}>
         <div className="space-y-2">
           <Label htmlFor="displayName">Name</Label>
@@ -289,12 +317,17 @@ export function DevPortalRegisterPage({
           />
         </div>
         <AuthError message={error} />
-        {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+        {message ? (
+          <p className="text-sm text-muted-foreground">{message}</p>
+        ) : null}
         <Button type="submit" className="w-full" disabled={pending}>
           {pending ? <Spinner /> : "Create account"}
         </Button>
         <p className="text-sm text-center">
-          <Link className="text-primary hover:underline" to={`/login?redirect=${encodeURIComponent(returnUrl)}`}>
+          <Link
+            className="text-primary hover:underline"
+            to={`/login?redirect=${encodeURIComponent(returnUrl)}`}
+          >
             Back to sign in
           </Link>
         </p>
@@ -303,7 +336,11 @@ export function DevPortalRegisterPage({
   );
 }
 
-export function DevPortalVerifyEmailPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+export function DevPortalVerifyEmailPage({
+  apiBaseUrl,
+}: {
+  apiBaseUrl?: string;
+}) {
   const baseUrl = useApiBaseUrl(apiBaseUrl);
   const [search] = useSearchParams();
   const [message, setMessage] = useState<string | null>(null);
@@ -312,9 +349,13 @@ export function DevPortalVerifyEmailPage({ apiBaseUrl }: { apiBaseUrl?: string }
   useEffect(() => {
     const token = search.get("token");
     if (!baseUrl || !token) return;
-    void postDevPortalAuth<{ message: string }>(baseUrl, "/api/v1/auth/verify-email", {
-      token,
-    })
+    void postDevPortalAuth<{ message: string }>(
+      baseUrl,
+      "/api/v1/auth/verify-email",
+      {
+        token,
+      },
+    )
       .then((response) => setMessage(response.message))
       .catch((err) =>
         setError(err instanceof Error ? err.message : "Verification failed."),
@@ -324,7 +365,11 @@ export function DevPortalVerifyEmailPage({ apiBaseUrl }: { apiBaseUrl?: string }
   return (
     <AuthPageShell title="Verify email">
       <AuthError message={error} />
-      {message ? <p className="text-sm text-muted-foreground">{message}</p> : <Spinner />}
+      {message ? (
+        <p className="text-sm text-muted-foreground">{message}</p>
+      ) : (
+        <Spinner />
+      )}
       <Link className="text-sm text-primary hover:underline" to="/login">
         Sign in
       </Link>
@@ -332,7 +377,11 @@ export function DevPortalVerifyEmailPage({ apiBaseUrl }: { apiBaseUrl?: string }
   );
 }
 
-export function DevPortalForgotPasswordPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+export function DevPortalForgotPasswordPage({
+  apiBaseUrl,
+}: {
+  apiBaseUrl?: string;
+}) {
   const baseUrl = useApiBaseUrl(apiBaseUrl);
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState<string | null>(null);
@@ -362,7 +411,10 @@ export function DevPortalForgotPasswordPage({ apiBaseUrl }: { apiBaseUrl?: strin
   );
 
   return (
-    <AuthPageShell title="Reset password" description="We'll email you a reset link.">
+    <AuthPageShell
+      title="Reset password"
+      description="We'll email you a reset link."
+    >
       <form className="space-y-4" onSubmit={onSubmit}>
         <div className="space-y-2">
           <Label htmlFor="email">Email</Label>
@@ -375,7 +427,9 @@ export function DevPortalForgotPasswordPage({ apiBaseUrl }: { apiBaseUrl?: strin
           />
         </div>
         <AuthError message={error} />
-        {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+        {message ? (
+          <p className="text-sm text-muted-foreground">{message}</p>
+        ) : null}
         <Button type="submit" className="w-full" disabled={pending}>
           {pending ? <Spinner /> : "Send reset link"}
         </Button>
@@ -384,7 +438,11 @@ export function DevPortalForgotPasswordPage({ apiBaseUrl }: { apiBaseUrl?: strin
   );
 }
 
-export function DevPortalResetPasswordPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+export function DevPortalResetPasswordPage({
+  apiBaseUrl,
+}: {
+  apiBaseUrl?: string;
+}) {
   const baseUrl = useApiBaseUrl(apiBaseUrl);
   const [search] = useSearchParams();
   const [password, setPassword] = useState("");
@@ -429,7 +487,9 @@ export function DevPortalResetPasswordPage({ apiBaseUrl }: { apiBaseUrl?: string
           />
         </div>
         <AuthError message={error} />
-        {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+        {message ? (
+          <p className="text-sm text-muted-foreground">{message}</p>
+        ) : null}
         <Button type="submit" className="w-full" disabled={pending}>
           {pending ? <Spinner /> : "Update password"}
         </Button>

package/src/lib/authentication/providers/dev-portal-utils.ts

@@ -58,7 +58,10 @@ export function buildDevPortalOidcChallengeUrl(
   providerId: string,
   returnUrl: string,
 ): string {
-  const url = new URL(`/api/v1/auth/oidc/${encodeURIComponent(providerId)}/challenge`, apiBaseUrl);
+  const url = new URL(
+    `/api/v1/auth/oidc/${encodeURIComponent(providerId)}/challenge`,
+    apiBaseUrl,
+  );
   url.searchParams.set("returnUrl", toAbsoluteReturnUrl(returnUrl));
   return url.toString();
 }
@@ -122,15 +125,19 @@ export function normalizeDevPortalAuthConfig(
 }
 
 export function isNativeAuthEnabled(
-  config: import("./dev-portal-constants.js").DevPortalAuthConfigResponse | null | undefined,
+  config:
+    | import("./dev-portal-constants.js").DevPortalAuthConfigResponse
+    | null
+    | undefined,
 ): boolean {
   if (!config) {
     return false;
   }
 
-  const raw = config as import("./dev-portal-constants.js").DevPortalAuthConfigResponse & {
-    nativeEnabled?: boolean;
-  };
+  const raw =
+    config as import("./dev-portal-constants.js").DevPortalAuthConfigResponse & {
+      nativeEnabled?: boolean;
+    };
 
   return raw.native?.enabled === true || raw.nativeEnabled === true;
 }
@@ -175,7 +182,10 @@ export async function postDevPortalAuth<T>(
   if (!response.ok) {
     let detail = "Request failed.";
     try {
-      const problem = (await response.json()) as { detail?: string; title?: string };
+      const problem = (await response.json()) as {
+        detail?: string;
+        title?: string;
+      };
       detail = problem.detail ?? problem.title ?? detail;
     } catch {
       // ignore parse errors
@@ -252,7 +262,7 @@ export function mapEndUserMeToProfile(
       raw.emailVerified,
       raw.EmailVerified,
       raw.email_verified,
-    ) ?? (email != null ? true : false);
+    ) ?? email != null;
 
   return {
     sub: me.userId,

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

@@ -12,10 +12,6 @@ import {
   useAuthState,
   waitForAuthStateHydration,
 } from "../state.js";
-import type {
-  DevPortalAuthMode,
-  EndUserMeResponse,
-} from "./dev-portal-constants.js";
 import {
   DevPortalForgotPasswordPage,
   DevPortalLoginPage,
@@ -23,6 +19,10 @@ import {
   DevPortalResetPasswordPage,
   DevPortalVerifyEmailPage,
 } from "./dev-portal-auth-pages.js";
+import type {
+  DevPortalAuthMode,
+  EndUserMeResponse,
+} from "./dev-portal-constants.js";
 import {
   buildDevPortalLogoutUrl,
   isNativeAuthEnabled,
@@ -78,9 +78,18 @@ export class DevPortalAuthenticationProvider
       ...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} /> },
+      {
+        path: "/verify-email",
+        element: <DevPortalVerifyEmailPage {...pageProps} />,
+      },
+      {
+        path: "/forgot-password",
+        element: <DevPortalForgotPasswordPage {...pageProps} />,
+      },
+      {
+        path: "/reset-password",
+        element: <DevPortalResetPasswordPage {...pageProps} />,
+      },
     ];
   }
 
@@ -94,7 +103,8 @@ export class DevPortalAuthenticationProvider
     await this.syncBackendAvailability();
     if (this.backendAvailable && this.apiBaseUrl) {
       try {
-        const { fetchDevPortalAuthConfig } = await import("./dev-portal-utils.js");
+        const { fetchDevPortalAuthConfig } =
+          await import("./dev-portal-utils.js");
         const config = await fetchDevPortalAuthConfig(this.apiBaseUrl);
         this.authConfigNativeEnabled = isNativeAuthEnabled(config);
       } catch {

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>
+  );
+};