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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user