feat(web): add "upgrade account" CTA above sidebar profile for free users

Shows a brand-tinted "Hesabını Yükselt" badge above the username in the
sidebar footer, linking to the subscription page. Hidden for users with
an active paid plan. Renders in desktop (expanded + collapsed icon
variant), and the mobile drawer.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-26 20:09:12 +03:00
parent e1d929d3eb
commit fa4e08a0a7
3 changed files with 45 additions and 0 deletions

View File

@@ -46,6 +46,7 @@ import {
Settings,
Share2,
Shield,
Sparkles,
Sun,
Users,
} from "lucide-react";
@@ -245,6 +246,46 @@ function DashboardLayout() {
.sort((a, b) => b.to.length - a.to.length)[0];
const pageTitle = currentItem ? t(currentItem.labelKey) : t("nav.dashboard");
// Upgrade CTA shown above the profile — only for users without a paid plan.
function UpgradeBadge({
collapsed: isCollapsed,
onClick,
}: {
collapsed: boolean;
onClick?: () => void;
}) {
if (hasActivePlan) return null;
if (isCollapsed) {
return (
<Tooltip>
<TooltipTrigger asChild>
<Link
to="/dashboard/subscription"
onClick={onClick}
aria-label={t("nav.upgradeAccount")}
className="mb-1 flex items-center justify-center rounded-lg border border-brand/30 bg-brand/10 p-2.5 text-brand transition-colors hover:bg-brand/15"
>
<Sparkles className="size-4" />
</Link>
</TooltipTrigger>
<TooltipContent side="right">{t("nav.upgradeAccount")}</TooltipContent>
</Tooltip>
);
}
return (
<Link
to="/dashboard/subscription"
onClick={onClick}
className="mb-2 flex items-center gap-2 rounded-lg border border-brand/30 bg-brand/10 px-3 py-2 text-xs font-semibold text-brand transition-colors hover:bg-brand/15"
>
<Sparkles className="size-4 shrink-0" />
<span>{t("nav.upgradeAccount")}</span>
</Link>
);
}
// Profile menu — replaces the old "click-to-logout" trap with a real menu.
function ProfileMenu({
collapsed: isCollapsed,
@@ -406,6 +447,7 @@ function DashboardLayout() {
{/* User Profile - Bottom */}
<div className={`border-t border-border ${collapsed ? "p-2" : "p-3"}`}>
<UpgradeBadge collapsed={collapsed} />
<ProfileMenu collapsed={collapsed} />
</div>
</aside>
@@ -505,6 +547,7 @@ function DashboardLayout() {
<SidebarNav onNavigate={() => setMobileOpen(false)} />
</nav>
<div className="border-t border-border p-3">
<UpgradeBadge collapsed={false} onClick={() => setMobileOpen(false)} />
<ProfileMenu collapsed={false} onItemSelect={() => setMobileOpen(false)} />
</div>
</SheetContent>