Skip to content

fix: banner for usage alert #191

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
yashdev9274 merged 1 commit into from
Jul 9, 2026
Merged

fix: banner for usage alert #191

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
14 changes: 14 additions & 0 deletions apps/web/components/homepage/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ const Navbar = () => {
]

return (
<>
<header className="fixed top-0 left-0 right-0 z-[100]">
<BetaCountdownBanner onVisibilityChange={handleBannerChange} />
<div className={`bg-background/95 backdrop-blur-sm transition-all duration-300 ${bannerVisible ? "border-t-0" : ""}`}>
Expand Down Expand Up @@ -312,6 +313,19 @@ const Navbar = () => {
</nav>
</div>
</header>

<div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
<div className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[13px] font-mono animate-in fade-in slide-in-from-top-2 duration-500">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse shrink-0" />
<span>
Unexpected spike in user growth &amp; Opus usage — Opus is temporarily down.
We&apos;re working on it. Use{" "}
<span className="text-amber-300 font-semibold">frontier open models</span> through Concentrate AI in the
meantime.
</span>
</div>
</div>
Comment on lines +317 to +327

@coderabbitai coderabbitai Bot Jul 9, 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.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add role="status" to the banner for screen reader accessibility.

The banner is a time-sensitive notification that should be announced to assistive technology users. Adding role="status" (or role="alert" for more urgent announcements) ensures screen readers pick it up.

♿ Proposed accessibility fix 
-    <div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
+    <div role="status" className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
<div className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[13px] font-mono animate-in fade-in slide-in-from-top-2 duration-500">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse shrink-0" />
<span>
Unexpected spike in user growth &amp; Opus usage — Opus is temporarily down.
We&apos;re working on it. Use{" "}
<span className="text-amber-300 font-semibold">frontier open models</span> through Concentrate AI in the
meantime.
</span>
</div>
</div>
<div role="status" className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
<div className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[13px] font-mono animate-in fade-in slide-in-from-top-2 duration-500">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse shrink-0" />
<span>
Unexpected spike in user growth &amp; Opus usage — Opus is temporarily down.
We&apos;re working on it. Use{" "}
<span className="text-amber-300 font-semibold">frontier open models</span> through Concentrate AI in the
meantime.
</span>
</div>
</div>
🤖 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 `@apps/web/components/homepage/navbar.tsx` around lines 317 - 327, The homepage
notification banner in navbar.tsx needs an accessibility role so screen readers
announce it; update the banner container in the navbar component to include
role="status" (or role="alert" if you want a more urgent announcement) on the
fixed top banner wrapper so assistive tech picks up the time-sensitive message.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Banner position doesn't adapt to bannerVisible state — causes a 44px gap when the countdown banner is hidden.

The amber banner is hardcoded to top-[114px], but the existing mobile menu overlay (line 255) already adjusts between top-[114px] sm:top-[110px] (when bannerVisible is true) and top-[70px] (when false). When BetaCountdownBanner is not visible, the header is only 70px tall, leaving a visible gap between the header and the amber banner.

Use bannerVisible to dynamically set the banner's top offset, and use cn() from @/lib/utils for the conditional classes as per coding guidelines.

🐛 Proposed fix for dynamic banner positioning 
-    <div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
+    <div className={cn(
+      "fixed left-0 right-0 z-50 flex items-center justify-center px-4 transition-all duration-300",
+      bannerVisible ? "top-[114px] sm:top-[110px]" : "top-[70px]"
+    )}>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
<div className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[13px] font-mono animate-in fade-in slide-in-from-top-2 duration-500">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse shrink-0" />
<span>
Unexpected spike in user growth &amp; Opus usage — Opus is temporarily down.
We&apos;re working on it. Use{" "}
<span className="text-amber-300 font-semibold">frontier open models</span> through Concentrate AI in the
meantime.
</span>
</div>
</div>
<div className={cn(
"fixed left-0 right-0 z-50 flex items-center justify-center px-4 transition-all duration-300",
bannerVisible ? "top-[114px] sm:top-[110px]" : "top-[70px]"
)}>
<div className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[13px] font-mono animate-in fade-in slide-in-from-top-2 duration-500">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse shrink-0" />
<span>
Unexpected spike in user growth &amp; Opus usage — Opus is temporarily down.
We&apos;re working on it. Use{" "}
<span className="text-amber-300 font-semibold">frontier open models</span> through Concentrate AI in the
meantime.
</span>
</div>
</div>
🤖 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 `@apps/web/components/homepage/navbar.tsx` around lines 317 - 327, The amber
announcement banner in navbar.tsx is hardcoded to a fixed top offset, so it
stays misaligned when BetaCountdownBanner is hidden and leaves a gap. Update the
banner container in the navbar component to derive its top position from
bannerVisible, matching the existing mobile menu overlay behavior, and use cn()
from `@/lib/utils` to conditionally apply the correct top classes. Keep the banner
aligned directly below the header in both states.

Source: Coding guidelines

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Add a dismiss mechanism for the temporary outage banner.

The banner is a temporary notification about Opus being down, but there's no way for users to dismiss it. This forces the banner to persist on screen indefinitely, degrading the user experience. Consider adding a close button with local state (or a server-driven flag) to allow dismissal.

♻️ Suggested dismiss button implementation 
+    const [alertDismissed, setAlertDismissed] = useState(false)
+
     return (
     <>
     <header className="fixed top-0 left-0 right-0 z-[100]">
       ...
     </header>
 
-    <div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
+    {!alertDismissed && (
+    <div className="fixed top-[114px] left-0 right-0 z-50 flex items-center justify-center px-4">
       <div className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[13px] font-mono animate-in fade-in slide-in-from-top-2 duration-500">
         <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse shrink-0" />
         <span>
           Unexpected spike in user growth &amp; Opus usage — Opus is temporarily down.
           We&apos;re working on it. Use{" "}
           <span className="text-amber-300 font-semibold">frontier open models</span> through Concentrate AI in the
           meantime.
         </span>
+        <button
+          onClick={() => setAlertDismissed(true)}
+          className="text-amber-400/60 hover:text-amber-400 transition-colors ml-1"
+          aria-label="Dismiss alert"
+        >
+          ✕
+        </button>
       </div>
     </div>
+    )}
     </>
🤖 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 `@apps/web/components/homepage/navbar.tsx` around lines 317 - 327, The
temporary outage banner in the navbar needs a dismiss control so it doesn’t stay
visible forever. Update the banner markup in navbar.tsx to add a close button
and use local state in the navbar component to hide the banner after dismissal;
if the banner is meant to be controlled centrally, wire it to a server-driven
flag instead. Make sure the change is scoped around the existing fixed banner
block and its rendering condition so the notification can be removed cleanly by
the user.

</>
)
}

Expand Down
Loading