Skip to content

Fix premium side nav in collapsed mode #897

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
elie222 merged 1 commit into from
Nov 3, 2025
Merged

Fix premium side nav in collapsed mode #897

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
52 changes: 48 additions & 4 deletions apps/web/components/PremiumExpiredCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { isPremium } from "@/utils/premium";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/utils";
import { HoverCard } from "@/components/HoverCard";

interface PremiumData {
lemonSqueezyRenewsAt?: Date | string | null;
Expand All @@ -25,7 +26,8 @@ interface PremiumExpiredCardProps {
export function PremiumExpiredCardContent({
premium,
onDismiss,
}: PremiumExpiredCardProps) {
isCollapsed = false,
}: PremiumExpiredCardProps & { isCollapsed?: boolean }) {
// Early return if no premium data
if (!premium) return null;

Expand Down Expand Up @@ -93,6 +95,43 @@ export function PremiumExpiredCardContent({

const { title, description } = getSubscriptionMessage();

// When collapsed, show only the alert icon with a hover card
if (isCollapsed) {
return (
<HoverCard
className="w-64"
content={
<div className="space-y-2">
<p className="text-sm font-semibold text-orange-800 dark:text-orange-200">
{title}
</p>
<p className="text-sm text-muted-foreground">{description}</p>
<Button
asChild
size="sm"
className="w-full bg-orange-600 text-white hover:bg-orange-700 border-0 shadow-sm h-8 mt-2"
>
<Link
href="/settings"
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot Nov 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Icon-only Link lacks an accessible name; add an aria-label so screen readers can announce its purpose

Prompt for AI agents 
Address the following comment on apps/web/components/PremiumExpiredCard.tsx at line 115:

<comment>Icon-only Link lacks an accessible name; add an aria-label so screen readers can announce its purpose</comment>

<file context>
@@ -93,6 +95,43 @@ export function PremiumExpiredCardContent({
+              className=&quot;w-full bg-orange-600 text-white hover:bg-orange-700 border-0 shadow-sm h-8 mt-2&quot;
+            &gt;
+              &lt;Link
+                href=&quot;/settings&quot;
+                className=&quot;flex items-center justify-center gap-1.5&quot;
+              &gt;
</file context>
Suggested change
href="/settings"
href="/settings" aria-label={title}
Fix with Cubic

className="flex items-center justify-center gap-1.5"
>
<CreditCardIcon className="h-3.5 w-3.5" />
<span className="text-xs font-medium">Reactivate</span>
</Link>
</Button>
</div>
}
>
<Link
href="/settings"
className="flex items-center justify-center p-2 rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
>
<AlertTriangleIcon className="h-5 w-5 text-orange-600 dark:text-orange-400" />
</Link>
</HoverCard>
);
}
Comment on lines +98 to +133
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Nov 3, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add accessible label to the collapsed trigger link.

The collapsed rendering logic is well-implemented, but the Link element (lines 125-130) lacks an accessible name for screen readers. Users relying on assistive technology won't know what this link does.

Apply this diff to add an accessible label:

         <Link
           href="/settings"
           className="flex items-center justify-center p-2 rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
+          aria-label={title}
         >
           <AlertTriangleIcon className="h-5 w-5 text-orange-600 dark:text-orange-400" />
         </Link>
📝 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
// When collapsed, show only the alert icon with a hover card
if (isCollapsed) {
return (
<HoverCard
className="w-64"
content={
<div className="space-y-2">
<p className="text-sm font-semibold text-orange-800 dark:text-orange-200">
{title}
</p>
<p className="text-sm text-muted-foreground">{description}</p>
<Button
asChild
size="sm"
className="w-full bg-orange-600 text-white hover:bg-orange-700 border-0 shadow-sm h-8 mt-2"
>
<Link
href="/settings"
className="flex items-center justify-center gap-1.5"
>
<CreditCardIcon className="h-3.5 w-3.5" />
<span className="text-xs font-medium">Reactivate</span>
</Link>
</Button>
</div>
}
>
<Link
href="/settings"
className="flex items-center justify-center p-2 rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
>
<AlertTriangleIcon className="h-5 w-5 text-orange-600 dark:text-orange-400" />
</Link>
</HoverCard>
);
}
// When collapsed, show only the alert icon with a hover card
if (isCollapsed) {
return (
<HoverCard
className="w-64"
content={
<div className="space-y-2">
<p className="text-sm font-semibold text-orange-800 dark:text-orange-200">
{title}
</p>
<p className="text-sm text-muted-foreground">{description}</p>
<Button
asChild
size="sm"
className="w-full bg-orange-600 text-white hover:bg-orange-700 border-0 shadow-sm h-8 mt-2"
>
<Link
href="/settings"
className="flex items-center justify-center gap-1.5"
>
<CreditCardIcon className="h-3.5 w-3.5" />
<span className="text-xs font-medium">Reactivate</span>
</Link>
</Button>
</div>
}
>
<Link
href="/settings"
className="flex items-center justify-center p-2 rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
aria-label={title}
>
<AlertTriangleIcon className="h-5 w-5 text-orange-600 dark:text-orange-400" />
</Link>
</HoverCard>
);
}
🤖 Prompt for AI Agents 
In apps/web/components/PremiumExpiredCard.tsx around lines 98 to 133, the
collapsed trigger Link (the orange square with the AlertTriangleIcon) lacks an
accessible name for screen readers; add an accessible label by giving the Link
either an aria-label (e.g., aria-label="Open settings to reactivate premium") or
include a visually-hidden span with descriptive text inside the Link so
assistive technologies can announce its purpose, keeping the visible UI
unchanged.


return (
<Card
className={cn(
Expand Down Expand Up @@ -144,17 +183,22 @@ export function PremiumExpiredCardContent({
);
}

export function PremiumExpiredCard() {
export function PremiumExpiredCard({
isCollapsed = false,
}: {
isCollapsed?: boolean;
}) {
const [dismissed, setDismissed] = useState(false);
const { data: user, isLoading } = useUser();

if (isLoading || dismissed || !user) return null;

return (
<div className="px-3 pt-4">
<div className={cn("px-3 pt-4", isCollapsed && "flex justify-center")}>
<PremiumExpiredCardContent
premium={user.premium}
onDismiss={() => setDismissed(true)}
onDismiss={isCollapsed ? undefined : () => setDismissed(true)}
isCollapsed={isCollapsed}
/>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/SideNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export function SideNav({ ...props }: React.ComponentProps<typeof Sidebar>) {
</SidebarGroupContent>
</SidebarContent>

<PremiumExpiredCard />
<PremiumExpiredCard isCollapsed={!state.includes("left-sidebar")} />

<SidebarFooter className="pb-4">
<ClientOnly>
Expand Down
2 changes: 1 addition & 1 deletion version.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v2.17.27
v2.17.28
Loading