Skip to content

Add auth rebrand announcement banner #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AnthonyRonning merged 1 commit into from
May 6, 2026
Merged

Add auth rebrand announcement banner #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 5 additions & 33 deletions frontend/src/components/AppEntryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,14 @@
import { Link } from "@tanstack/react-router";
import { Home, LogIn, UserPlus } from "lucide-react";
import { LogIn, UserPlus } from "lucide-react";
import { AuthHeader } from "@/components/AuthHeader";
import { Button } from "@/components/ui/button";
import { MapleWordmark } from "@/components/MapleWordmark";
import { marketingUrl } from "@/config/domains";
import { openExternalUrl } from "@/utils/openUrl";
import { isTauri } from "@/utils/platform";

const marketingHomeUrl = marketingUrl("/");

function MarketingHomeLink({ className }: { className?: string }) {
return (
<a
href={marketingHomeUrl}
onClick={(event) => {
if (isTauri()) {
event.preventDefault();
openExternalUrl(marketingHomeUrl);
}
}}
className={className}
>
<Home className="h-4 w-4" />
Learn about Maple
</a>
);
}

export function AppEntryPage() {
return (
<div className="min-h-dvh bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
<header className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
<Link to="/" aria-label="Maple app home" className="flex items-center">
<MapleWordmark className="h-5 w-auto text-[#221a18] dark:text-foreground" />
</Link>
<MarketingHomeLink className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-[#747474] transition hover:bg-black/5 hover:text-[#221a18] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground" />
</header>
<div className="flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">

@coderabbitai coderabbitai Bot May 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Break long JSX lines to keep within the 100-character limit.

Line 8 and Line 12 exceed the configured TS/React line-length guideline.

Proposed fix 
+import { cn } from "@/utils/utils";
@@
-    <div className="flex min-h-dvh flex-col bg-[`#e2e2e2`] text-[`#221a18`] dark:bg-background dark:text-foreground">
+    <div
+      className={cn(
+        "flex min-h-dvh flex-col bg-[`#e2e2e2`] text-[`#221a18`]",
+        "dark:bg-background dark:text-foreground"
+      )}
+    >
@@
-        <section className="w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 text-center shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6">
+        <section
+          className={cn(
+            "w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 text-center",
+            "shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6"
+          )}
+        >

As per coding guidelines, **/*.{ts,tsx}: Use 2-space indentation, double quotes, and enforce 100-character line limit in TypeScript/React code.

Also applies to: 12-12

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/AppEntryPage.tsx` at line 8, The JSX className string
"flex min-h-dvh flex-col bg-[`#e2e2e2`] text-[`#221a18`] dark:bg-background
dark:text-foreground" in the AppEntryPage component is longer than 100
characters; split long JSX props/attributes across lines or extract the
className into a const (e.g., const containerClass = "...") and use that
variable in the JSX to enforce the 100-char limit, and apply the same treatment
to the other long JSX prop in this component so each line stays within the
configured limit.

<AuthHeader />

<main className="flex min-h-[calc(100dvh-5rem)] items-center justify-center px-4 pb-16 pt-8 sm:px-6">
<main className="flex flex-1 items-center justify-center px-4 pb-16 pt-8 sm:px-6">
<section className="w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 text-center shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6">
<img src="/maple-research-icon.svg" alt="" className="mx-auto mb-4 h-14 w-14" />
<h1 className="text-2xl font-semibold leading-tight text-[#221a18] dark:text-foreground">
Expand Down
94 changes: 94 additions & 0 deletions frontend/src/components/AuthHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import type { MouseEvent } from "react";
import { Link } from "@tanstack/react-router";
import { ArrowRight, ExternalLink, Home } from "lucide-react";
import { MapleWordmark } from "@/components/MapleWordmark";
import { marketingUrl } from "@/config/domains";
import { openExternalUrl } from "@/utils/openUrl";
import { isTauri } from "@/utils/platform";
import { cn } from "@/utils/utils";

const marketingHomeUrl = marketingUrl("/");
const rebrandAnnouncementUrl =
"https://blog.trymaple.ai/meet-maple-the-personal-intelligence-platform/";

function openExternalLink(event: MouseEvent<HTMLAnchorElement>, url: string) {
if (!isTauri()) {
return;
}

event.preventDefault();
openExternalUrl(url);
}

function RebrandAnnouncementLink({ className }: { className?: string }) {
return (
<a
href={rebrandAnnouncementUrl}
target="_blank"
rel="noopener noreferrer"
onClick={(event) => openExternalLink(event, rebrandAnnouncementUrl)}
className={cn(
"group inline-flex min-h-10 w-full max-w-full items-center justify-center gap-2 rounded-md border border-neutral-900/10 bg-white/65 px-3 py-2 text-[11px] font-semibold text-[#221a18] shadow-sm backdrop-blur transition hover:border-neutral-900/15 hover:bg-white/85 dark:border-white/10 dark:bg-white/[0.06] dark:text-foreground dark:hover:border-white/15 dark:hover:bg-white/[0.1] sm:w-auto sm:text-xs",

@coderabbitai coderabbitai Bot May 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Split long className literals to satisfy the TS/React line-length rule.

Line 31, Line 80, Line 89, and Line 91 exceed the 100-character limit. Please split these class strings across multiple cn(...) arguments.

Proposed fix 
-      className={cn(
-        "group inline-flex min-h-10 w-full max-w-full items-center justify-center gap-2 rounded-md border border-neutral-900/10 bg-white/65 px-3 py-2 text-[11px] font-semibold text-[`#221a18`] shadow-sm backdrop-blur transition hover:border-neutral-900/15 hover:bg-white/85 dark:border-white/10 dark:bg-white/[0.06] dark:text-foreground dark:hover:border-white/15 dark:hover:bg-white/[0.1] sm:w-auto sm:text-xs",
-        className
-      )}
+      className={cn(
+        "group inline-flex min-h-10 w-full max-w-full items-center justify-center gap-2 rounded-md",
+        "border border-neutral-900/10 bg-white/65 px-3 py-2 text-[11px] font-semibold text-[`#221a18`]",
+        "shadow-sm backdrop-blur transition hover:border-neutral-900/15 hover:bg-white/85",
+        "dark:border-white/10 dark:bg-white/[0.06] dark:text-foreground",
+        "dark:hover:border-white/15 dark:hover:bg-white/[0.1] sm:w-auto sm:text-xs",
+        className
+      )}
@@
-    <header className="mx-auto grid w-full max-w-6xl grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-3 px-4 py-5 sm:px-6 lg:grid-cols-[1fr_auto_1fr] lg:px-8">
+    <header
+      className={cn(
+        "mx-auto grid w-full max-w-6xl grid-cols-[minmax(0,1fr)_auto] items-center",
+        "gap-x-3 gap-y-3 px-4 py-5 sm:px-6 lg:grid-cols-[1fr_auto_1fr] lg:px-8"
+      )}
+    >
@@
-      <RebrandAnnouncementLink className="col-span-2 row-start-2 justify-self-stretch sm:justify-self-center lg:col-span-1 lg:col-start-2 lg:row-start-1" />
+      <RebrandAnnouncementLink
+        className={cn(
+          "col-span-2 row-start-2 justify-self-stretch sm:justify-self-center",
+          "lg:col-span-1 lg:col-start-2 lg:row-start-1"
+        )}
+      />
@@
-      <MarketingHomeLink className="col-start-2 row-start-1 inline-flex items-center gap-2 justify-self-end rounded-md px-3 py-2 text-sm font-semibold text-[`#747474`] transition hover:bg-black/5 hover:text-[`#221a18`] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground lg:col-start-3" />
+      <MarketingHomeLink
+        className={cn(
+          "col-start-2 row-start-1 inline-flex items-center gap-2 justify-self-end rounded-md",
+          "px-3 py-2 text-sm font-semibold text-[`#747474`] transition hover:bg-black/5",
+          "hover:text-[`#221a18`] dark:text-muted-foreground dark:hover:bg-white/5",
+          "dark:hover:text-foreground lg:col-start-3"
+        )}
+      />

As per coding guidelines, **/*.{ts,tsx}: Use 2-space indentation, double quotes, and enforce 100-character line limit in TypeScript/React code.

Also applies to: 80-91

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/AuthHeader.tsx` at line 31, The long tailwind
className literals in the AuthHeader component exceed the 100-character TS/React
line-length rule; locate the JSX in the AuthHeader component where cn(...) is
used (the long strings at the shown diffs) and split each long class string into
multiple shorter string arguments passed to cn(...) (e.g., break the long single
literal into two or more quoted segments joined by cn) so each source line stays
under 100 chars while preserving the exact class tokens and order; update all
occurrences referenced (the long class literal at the first diff and the other
long className instances around the same JSX block) accordingly.

className
)}
aria-label="Maple AI is now Maple Research. Read the announcement."
>
<span className="hidden items-center gap-1.5 md:inline-flex" aria-hidden="true">
<span className="inline-flex h-6 w-6 overflow-hidden rounded border border-neutral-900/10 bg-[#111111] dark:border-white/10">
<img
src="/maple-icon-nobg.png"
alt=""
className="h-full w-full scale-[1.28] object-contain"
/>
</span>
<ArrowRight className="h-3 w-3 text-[#747474] dark:text-muted-foreground" />
<img src="/maple-research-icon.svg" alt="" className="h-6 w-6 rounded-[6px]" />
</span>
<span className="min-w-0 truncate">
<span className="hidden sm:inline">Maple AI is now Maple Research</span>
<span className="sm:hidden">Maple AI -&gt; Maple Research</span>
</span>
<span
className="hidden h-1 w-1 shrink-0 rounded-full bg-neutral-400/80 dark:bg-white/30 sm:block"
aria-hidden="true"
/>
<span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[#d65f35] transition group-hover:text-[#b94c26] dark:text-[#ff9b72] dark:group-hover:text-[#ffb095]">
<span className="hidden sm:inline">Read announcement</span>
<span className="sm:hidden">Read</span>
<ExternalLink className="h-3 w-3" aria-hidden="true" />
</span>
</a>
);
}

function MarketingHomeLink({ className }: { className?: string }) {
return (
<a
href={marketingHomeUrl}
onClick={(event) => openExternalLink(event, marketingHomeUrl)}
className={className}
>
<Home className="h-4 w-4" />
<span className="hidden sm:inline">Learn about Maple</span>
<span className="sm:hidden">Home</span>
</a>
);
}

export function AuthHeader() {
return (
<header className="mx-auto grid w-full max-w-6xl grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-3 px-4 py-5 sm:px-6 lg:grid-cols-[1fr_auto_1fr] lg:px-8">
<Link
to="/"
aria-label="Maple app home"
className="col-start-1 row-start-1 flex items-center justify-self-start"
>
<MapleWordmark className="h-5 w-auto text-[#221a18] dark:text-foreground" />
</Link>

<RebrandAnnouncementLink className="col-span-2 row-start-2 justify-self-stretch sm:justify-self-center lg:col-span-1 lg:col-start-2 lg:row-start-1" />

<MarketingHomeLink className="col-start-2 row-start-1 inline-flex items-center gap-2 justify-self-end rounded-md px-3 py-2 text-sm font-semibold text-[#747474] transition hover:bg-black/5 hover:text-[#221a18] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground lg:col-start-3" />
</header>
);
}
28 changes: 2 additions & 26 deletions frontend/src/components/AuthMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import { Link } from "@tanstack/react-router";
import { Home } from "lucide-react";
import { MapleWordmark } from "@/components/MapleWordmark";
import { marketingUrl } from "@/config/domains";
import { openExternalUrl } from "@/utils/openUrl";
import { isTauri } from "@/utils/platform";
import { AuthHeader } from "@/components/AuthHeader";

type AuthMainProps = {
children: React.ReactNode;
Expand All @@ -12,29 +8,9 @@ type AuthMainProps = {
};

export function AuthMain({ children, title, description }: AuthMainProps) {
const marketingHomeUrl = marketingUrl("/");

return (
<div className="flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">

@coderabbitai coderabbitai Bot May 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Apply line wrapping for long className props to meet the TS/React style rule.

Line 12 and Line 16 exceed the 100-character line limit.

Proposed fix 
+import { cn } from "@/utils/utils";
@@
-    <div className="flex min-h-dvh flex-col bg-[`#e2e2e2`] text-[`#221a18`] dark:bg-background dark:text-foreground">
+    <div
+      className={cn(
+        "flex min-h-dvh flex-col bg-[`#e2e2e2`] text-[`#221a18`]",
+        "dark:bg-background dark:text-foreground"
+      )}
+    >
@@
-        <section className="w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6">
+        <section
+          className={cn(
+            "w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 shadow-sm",
+            "backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6"
+          )}
+        >

As per coding guidelines, **/*.{ts,tsx}: Use 2-space indentation, double quotes, and enforce 100-character line limit in TypeScript/React code.

Also applies to: 16-16

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/AuthMain.tsx` at line 12, Break long className
strings onto multiple lines in the AuthMain component to satisfy the
100-character rule: locate the top-level JSX element with the long className
(the root <div> in AuthMain.tsx) and the other JSX element with an overlong
className (the one noted at line 16), and split each className prop into
multiple lines (one or few utility classes per line) while preserving the
existing double quotes and 2-space indentation; ensure the JSX remains
syntactically valid and the class names order is unchanged.

<header className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
<Link to="/" aria-label="Maple app home" className="flex items-center">
<MapleWordmark className="h-5 w-auto text-[#221a18] dark:text-foreground" />
</Link>
<a
href={marketingHomeUrl}
onClick={(event) => {
if (isTauri()) {
event.preventDefault();
openExternalUrl(marketingHomeUrl);
}
}}
className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-[#747474] transition hover:bg-black/5 hover:text-[#221a18] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground"
>
<Home className="h-4 w-4" />
<span className="hidden sm:inline">Learn about Maple</span>
<span className="sm:hidden">Home</span>
</a>
</header>
<AuthHeader />

<main className="flex flex-1 items-center justify-center px-4 py-10 sm:px-6">
<section className="w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6">
Expand Down
Loading