mirror of
https://github.com/we-promise/sure.git
synced 2026-09-04 14:21:23 +00:00
Brandon WolfandClaude Fable 5
5accc90a81
* fix(splits): let category selector size to its content instead of clipping names - Replace the fixed md:w-44 column with flex-initial + md:min-w-44/md:max-w-72 so the button grows with the selected category name - Truncate the badge label in an inner span with a native title tooltip and a max-w-64 cap, keeping the color dot from shrinking - Widen the dropdown to md:w-80 so option badges stay readable - select_controller: stop forcing the menu width to 100% inline (the markup's width classes now decide) and anchor the menu to the button's right edge when it would overflow the scroll container Fixes #2934 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(splits): render category badges via DS::Pill - Options render the canonical categories/badge partial; the button renders the same DS::Pill directly (a button only allows phrasing content, so the partial's div wrapper stays out). category_badge_select's clone selector follows the pill markup. - The client-side row template in split_transaction_controller gets the same md:min-w-28 name-field floor as the server-rendered rows. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
82 lines
4.0 KiB
ERB
82 lines
4.0 KiB
ERB
<%# locals: (name:, categories:, selected_id: nil) %>
|
|
<%
|
|
selected_category = categories.find { |c| c.id == selected_id }
|
|
%>
|
|
|
|
<div class="category-select-container relative flex-1 md:flex-initial md:w-auto md:min-w-44 md:max-w-72" data-controller="select list-filter form-dropdown category-badge-select" data-action="dropdown:select->form-dropdown#onSelect dropdown:select->category-badge-select#updateButton">
|
|
<label class="text-xs font-medium text-secondary uppercase tracking-wide block mb-1"><%= t("splits.new.category_label") %></label>
|
|
<input type="hidden"
|
|
name="<%= name %>"
|
|
value="<%= selected_id %>"
|
|
data-form-dropdown-target="input">
|
|
<button type="button"
|
|
class="form-field__input w-full overflow-hidden border border-secondary rounded-md pl-2.5 pr-7 py-1.5 text-sm text-primary bg-container"
|
|
data-select-target="button"
|
|
data-category-badge-select-target="button"
|
|
data-action="click->select#toggle"
|
|
aria-haspopup="listbox"
|
|
aria-expanded="false">
|
|
<% if selected_category %>
|
|
<%# Same DS::Pill shape as the canonical categories/badge partial; rendered
|
|
directly (without its div wrapper) because a button only allows
|
|
phrasing content. category-badge-select clones the option's pill into
|
|
this button on selection, so both must stay the same markup. %>
|
|
<%= render DS::Pill.new(
|
|
label: selected_category.display_name,
|
|
custom_color: selected_category.color,
|
|
icon: selected_category.lucide_icon.presence,
|
|
icon_size: "sm",
|
|
marker: false,
|
|
size: :md,
|
|
truncate: true,
|
|
title: selected_category.display_name) %>
|
|
<% else %>
|
|
<%= t("splits.new.uncategorized") %>
|
|
<% end %>
|
|
</button>
|
|
<div class="absolute z-50 p-1.5 w-full min-w-48 md:w-80 rounded-lg shadow-lg shadow-border-xs bg-container mt-1.5 transition duration-150 ease-out -translate-y-1 opacity-0 hidden" data-select-target="menu">
|
|
<div class="flex items-center bg-container border border-secondary rounded-lg mb-1 focus-within:ring-4 focus-within:ring-alpha-black-200 theme-dark:focus-within:ring-alpha-white-300 transition-shadow">
|
|
<%= render DS::SearchInput.new(
|
|
variant: :embedded,
|
|
placeholder: t("helpers.select.search_placeholder"),
|
|
data: {
|
|
list_filter_target: "input",
|
|
action: "list-filter#filter"
|
|
}
|
|
) %>
|
|
</div>
|
|
<div data-list-filter-target="list" data-select-target="content" class="flex flex-col gap-0.5 max-h-64 overflow-auto" role="listbox" tabindex="-1">
|
|
<%# Uncategorized option %>
|
|
<% is_blank_selected = selected_id.blank? %>
|
|
<div class="filterable-item text-sm cursor-pointer flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-container-inset-hover <%= "bg-container-inset" if is_blank_selected %>"
|
|
role="option"
|
|
tabindex="0"
|
|
aria-selected="<%= is_blank_selected %>"
|
|
data-action="click->select#select"
|
|
data-value=""
|
|
data-filter-name="<%= t("splits.new.uncategorized") %>">
|
|
<span class="check-icon <%= "hidden" unless is_blank_selected %>">
|
|
<%= icon("check") %>
|
|
</span>
|
|
<%= t("splits.new.uncategorized") %>
|
|
</div>
|
|
|
|
<% categories.each do |category| %>
|
|
<% is_selected = category.id == selected_id %>
|
|
<div class="filterable-item text-sm cursor-pointer flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-container-inset-hover <%= "bg-container-inset" if is_selected %>"
|
|
role="option"
|
|
tabindex="0"
|
|
aria-selected="<%= is_selected %>"
|
|
data-action="click->select#select"
|
|
data-value="<%= category.id %>"
|
|
data-filter-name="<%= category.display_name %>">
|
|
<span class="check-icon <%= "hidden" unless is_selected %>">
|
|
<%= icon("check") %>
|
|
</span>
|
|
<%= render partial: "categories/badge", locals: { category: category } %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|