feat(goals): add Beta dot marker on sidebar nav rail

Pass beta: true on gated nav items so the nav_item partial renders a
violet dot-only pill in the top-right of the icon. The doc covers the
dot_only usage; the nav itself was never wired up before merge.
This commit is contained in:
Guillem Arias
2026-05-18 20:21:23 +02:00
parent 5c7babc44e
commit 3479904387
2 changed files with 8 additions and 3 deletions

View File

@@ -11,7 +11,7 @@ else
{ name: t(".nav.transactions"), path: transactions_path, icon: "credit-card", icon_custom: false, active: page_active?(transactions_path) },
{ name: t(".nav.reports"), path: reports_path, icon: "chart-bar", icon_custom: false, active: page_active?(reports_path) },
{ name: t(".nav.budgets"), path: budgets_path, icon: "map", icon_custom: false, active: page_active?(budgets_path) },
(beta_features_enabled? ? { name: t(".nav.goals"), path: goals_path, icon: "piggy-bank", icon_custom: false, active: page_active?(goals_path) } : nil),
(beta_features_enabled? ? { name: t(".nav.goals"), path: goals_path, icon: "piggy-bank", icon_custom: false, active: page_active?(goals_path), beta: true } : nil),
{ name: t(".nav.assistant"), path: chats_path, icon: "icon-assistant", icon_custom: true, active: page_active?(chats_path), mobile_only: true }
].compact
end %>

View File

@@ -1,14 +1,19 @@
<%# locals:(name:, path:, icon:, icon_custom:, active:, mobile_only: false) %>
<%# locals: (name:, path:, icon:, icon_custom:, active:, mobile_only: false, beta: false) %>
<%= link_to path, class: "space-y-1 group block relative pb-1", aria: { current: ("page" if active) } do %>
<div class="grow flex flex-col lg:flex-row gap-1 items-center">
<%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => active) %>
<%= tag.div class: class_names(
"w-8 h-8 flex items-center justify-center mx-auto rounded-lg",
"w-8 h-8 flex items-center justify-center mx-auto rounded-lg relative",
active ? "bg-container shadow-xs text-primary" : "group-hover:bg-surface-hover text-secondary"
) do %>
<%= icon(icon, color: active ? "current" : "default", custom: icon_custom) %>
<% if beta %>
<span class="absolute -top-0.5 -right-0.5">
<%= render DS::Pill.new(tone: :violet, dot_only: true, title: "Beta") %>
</span>
<% end %>
<% end %>
</div>