- <%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>
+ <%= icon "shield-check" %>
@@ -21,18 +21,24 @@
<% if Current.user.otp_required? %>
- <%= button_to t(".disable_mfa"), disable_mfa_path,
- method: :delete,
- class: "w-full md:w-auto btn btn--secondary flex items-center gap-1 justify-center",
- data: { turbo_confirm: {
- title: t(".disable_mfa_confirm"),
- body: t(".disable_mfa_confirm"),
- accept: t(".disable_mfa"),
- acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
- } } %>
+ <%= render ButtonComponent.new(
+ text: t(".disable_mfa"),
+ variant: "secondary",
+ href: disable_mfa_path,
+ method: :delete,
+ confirm: CustomConfirm.new(
+ title: t(".disable_mfa_confirm"),
+ body: t(".disable_mfa_confirm"),
+ btn_text: t(".disable_mfa"),
+ destructive: true
+ )
+ ) %>
<% else %>
- <%= link_to t(".enable_mfa"), new_mfa_path,
- class: "w-full md:w-auto btn btn--primary flex items-center gap-1 justify-center" %>
+ <%= render LinkComponent.new(
+ text: t(".enable_mfa"),
+ variant: "primary",
+ href: new_mfa_path
+ ) %>
<% end %>
diff --git a/app/views/shared/_circle_logo.html.erb b/app/views/shared/_circle_logo.html.erb
deleted file mode 100644
index 0aba2373..00000000
--- a/app/views/shared/_circle_logo.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<%# locals: (name:, hex: nil, size: "md") %>
-
-<% size_classes = {
- "sm" => "w-6 h-6",
- "md" => "w-9 h-9",
- "lg" => "w-10 h-10",
- "full" => "w-full h-full"
-} %>
-
-<%= tag.div style: mixed_hex_styles(hex || "#1570EF"),
- class: [size_classes[size], "flex shrink-0 items-center justify-center rounded-full"] do %>
- <%= tag.span (name.presence&.first || "T").upcase, class: ["font-medium", size == "sm" ? "text-xs" : "text-sm"] %>
-<% end %>
diff --git a/app/views/shared/_confirm_modal.html.erb b/app/views/shared/_confirm_modal.html.erb
deleted file mode 100644
index ec24a1e0..00000000
--- a/app/views/shared/_confirm_modal.html.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
diff --git a/app/views/shared/_disclosure.html.erb b/app/views/shared/_disclosure.html.erb
deleted file mode 100644
index c4e59d9c..00000000
--- a/app/views/shared/_disclosure.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<%# locals: (title:, content:, open: true) %>
-
-
>
-
- <%= title %>
- <%= lucide_icon "chevron-down",
- class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>
-
-
- <%= content %>
-
diff --git a/app/views/shared/_drawer.html.erb b/app/views/shared/_drawer.html.erb
deleted file mode 100644
index e133fa0a..00000000
--- a/app/views/shared/_drawer.html.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-<%# locals: (content:, reload_on_close: false) %>
-
-<%= turbo_frame_tag "drawer" do %>
-
-
-
-
- <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
-
-
-
- <%= content %>
-
-
-<% end %>
diff --git a/app/views/shared/_form_errors.html.erb b/app/views/shared/_form_errors.html.erb
index 30e37a97..f2d703e2 100644
--- a/app/views/shared/_form_errors.html.erb
+++ b/app/views/shared/_form_errors.html.erb
@@ -1,6 +1,6 @@
<%# locals: (model:) %>
- <%= lucide_icon("alert-circle", class: "text-red-500 w-4 h-4 shrink-0") %>
-
<%= model.errors.full_messages.to_sentence %>
+ <%= icon("alert-circle", size: "sm", color: "destructive") %>
+
<%= model.errors.full_messages.to_sentence %>
diff --git a/app/views/shared/_icon.html.erb b/app/views/shared/_icon.html.erb
deleted file mode 100644
index 82f999de..00000000
--- a/app/views/shared/_icon.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= lucide_icon key, class: class_names(size_class, color_class, "shrink-0") %>
diff --git a/app/views/shared/_icon_custom.html.erb b/app/views/shared/_icon_custom.html.erb
deleted file mode 100644
index ae3b6935..00000000
--- a/app/views/shared/_icon_custom.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= inline_svg_tag "#{key}.svg", class: class_names(size_class, color_class, "shrink-0") %>
diff --git a/app/views/shared/_icon_image.html.erb b/app/views/shared/_icon_image.html.erb
deleted file mode 100644
index b782dc3f..00000000
--- a/app/views/shared/_icon_image.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
deleted file mode 100644
index 3fdcb70a..00000000
--- a/app/views/shared/_modal.html.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-<%# locals: (content:, reload_on_close:, overflow_visible: false) -%>
-
-<%= turbo_frame_tag "modal" do %>
- <%= tag.dialog(
- class: class_names(
- "focus:outline-none md:m-auto bg-container rounded-none md:rounded-2xl max-w-screen max-h-screen md:max-w-max w-full h-full md:h-fit md:w-auto shadow-border-xs",
- overflow_visible ? "overflow-visible" : "overflow-auto"
- ),
- data: {
- controller: "modal",
- action: "mousedown->modal#clickOutside",
- modal_reload_on_close_value: reload_on_close
- }
- ) do %>
-
- <%= content %>
-
- <% end %>
-<% end %>
diff --git a/app/views/shared/_modal_form.html.erb b/app/views/shared/_modal_form.html.erb
deleted file mode 100644
index fb6d21c8..00000000
--- a/app/views/shared/_modal_form.html.erb
+++ /dev/null
@@ -1,18 +0,0 @@
-<%# locals: (title:, content:, subtitle: nil, overflow_visible: false) %>
-
-<%= modal overflow_visible: overflow_visible do %>
-
-
-
- <%= title %>
- <%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
-
-
- <% if subtitle.present? %>
- <%= tag.p subtitle, class: "text-secondary font-light" %>
- <% end %>
-
-
- <%= content %>
-
-<% end %>
diff --git a/app/views/shared/_money_field.html.erb b/app/views/shared/_money_field.html.erb
index 9b83820a..ac8e6e55 100644
--- a/app/views/shared/_money_field.html.erb
+++ b/app/views/shared/_money_field.html.erb
@@ -44,7 +44,7 @@
<% unless options[:hide_currency] %>
<%= form.select currency_method,
- currencies_for_select.map(&:iso_code),
+ Money::Currency.as_options.map(&:iso_code),
{ inline: true, selected: currency.iso_code },
{
class: "w-fit pr-5 disabled:text-subdued form-field__input",
diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
index 73a6ddea..afc047de 100644
--- a/app/views/shared/_pagination.html.erb
+++ b/app/views/shared/_pagination.html.erb
@@ -7,11 +7,11 @@
<%= link_to pagy_url_for(pagy, pagy.prev),
data: { turbo_frame: :_top },
class: "inline-flex items-center p-2 text-sm font-medium text-secondary bg-container-inset hover:border-secondary hover:text-secondary" do %>
- <%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
+ <%= icon("chevron-left") %>
<% end %>
<% else %>
- <%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
+ <%= icon("chevron-left") %>
<% end %>
@@ -39,11 +39,11 @@
<%= link_to pagy_url_for(pagy, pagy.next),
data: { turbo_frame: :_top },
class: "inline-flex items-center p-2 text-sm font-medium text-secondary hover:border-secondary hover:text-secondary" do %>
- <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+ <%= icon("chevron-right") %>
<% end %>
<% else %>
- <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+ <%= icon("chevron-right") %>
<% end %>
diff --git a/app/views/shared/_subscribe_modal.html.erb b/app/views/shared/_subscribe_modal.html.erb
index 3afedaab..62d7d72a 100644
--- a/app/views/shared/_subscribe_modal.html.erb
+++ b/app/views/shared/_subscribe_modal.html.erb
@@ -1,25 +1,26 @@
-
-
-
-
'); background-size: cover; background-position: center top;">
-
-
-
- <%= image_tag "maybe-plus-logo.png", class: "w-20" %>
-
-
-
Join Maybe+
-
-
-
Nobody likes paywalls, but we need feedback from users willing to pay for Maybe.
-
-
To continue using the app, please subscribe. In this early beta testing phase, we require that you upgrade within one hour to claim your spot.
-
-
- <%= link_to "Upgrade to Maybe+", new_subscription_path, class: "btn btn--primary text-center w-full block" %>
-
+<%= render DialogComponent.new do |dialog| %>
+
'); background-size: cover; background-position: center top;">
+
+
+
+ <%= image_tag "maybe-plus-logo.png", class: "w-20" %>
+
+
Join Maybe+
+
+
+
Nobody likes paywalls, but we need feedback from users willing to pay for Maybe.
+
+
To continue using the app, please subscribe. In this early beta testing phase, we require that you upgrade within one hour to claim your spot.
+
+
+ <%= render LinkComponent.new(
+ text: "Upgrade to Maybe+",
+ href: new_subscription_path,
+ variant: "primary",
+ full_width: true
+ ) %>
-
+<% end %>
diff --git a/app/views/shared/_toggle_form.html.erb b/app/views/shared/_toggle_form.html.erb
deleted file mode 100644
index a5d1ed25..00000000
--- a/app/views/shared/_toggle_form.html.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-<%# locals: (model:, attribute:, turbo_frame: nil) %>
-
-<%= form_with model: model,
- namespace: model.id,
- class: "flex items-center",
- data: { controller: "auto-submit-form", turbo_frame: turbo_frame } do |form| %>
-
- <%= form.check_box attribute, { class: "sr-only peer", data: { "auto-submit-form-target": "auto" } } %>
- <%= form.label attribute, " ".html_safe, class: "switch" %>
-
-<% end %>
diff --git a/app/views/shared/_transaction_type_tabs.html.erb b/app/views/shared/_transaction_type_tabs.html.erb
index 0c55b6cc..c2b53b2f 100644
--- a/app/views/shared/_transaction_type_tabs.html.erb
+++ b/app/views/shared/_transaction_type_tabs.html.erb
@@ -1,24 +1,24 @@
- <% active_tab = local_assigns[:active_tab] || 'expense' %>
+ <% active_tab = local_assigns[:active_tab] || "expense" %>
- <%= link_to new_transaction_path(nature: 'outflow'),
+ <%= link_to new_transaction_path(nature: "outflow"),
data: { turbo_frame: :modal },
class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'expense' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
- <%= lucide_icon "minus-circle", class: "w-4 h-4 md:w-5 md:h-5" %>
+ <%= icon "minus-circle" %>
<%= tag.span t("shared.transaction_tabs.expense") %>
<% end %>
- <%= link_to new_transaction_path(nature: 'inflow'),
+ <%= link_to new_transaction_path(nature: "inflow"),
data: { turbo_frame: :modal },
class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'income' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
- <%= lucide_icon "plus-circle", class: "w-4 h-4 md:w-5 md:h-5" %>
+ <%= icon "plus-circle" %>
<%= tag.span t("shared.transaction_tabs.income") %>
<% end %>
<%= link_to new_transfer_path,
data: { turbo_frame: :modal },
class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'transfer' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
- <%= lucide_icon "arrow-right-left", class: "w-4 h-4 md:w-5 md:h-5" %>
+ <%= icon "arrow-right-left" %>
<%= tag.span t("shared.transaction_tabs.transfer") %>
<% end %>
diff --git a/app/views/shared/_trend_change.html.erb b/app/views/shared/_trend_change.html.erb
index b2503a7a..ad9c44cf 100644
--- a/app/views/shared/_trend_change.html.erb
+++ b/app/views/shared/_trend_change.html.erb
@@ -8,7 +8,7 @@
<%= trend.value.is_a?(Money) ? format_money(trend.value) : trend.value.round(2) %>
<% unless trend.percent.infinite? %>
-
(<%= lucide_icon(trend.icon, class: "w-4 h-4 align-text-bottom inline") %><%= trend.percent_formatted %>)
+
(<%= icon(trend.icon, size: "sm", color: "current", class: "mb-0.5 inline") %><%= trend.percent_formatted %>)
<% end %>
<%= " #{comparison_label}" if defined?(comparison_label) && comparison_label.present? %>
diff --git a/app/views/shared/notifications/_alert.html.erb b/app/views/shared/notifications/_alert.html.erb
index 63269f8c..28373aa8 100644
--- a/app/views/shared/notifications/_alert.html.erb
+++ b/app/views/shared/notifications/_alert.html.erb
@@ -4,13 +4,13 @@
data: { controller: "element-removal" } do %>
- <%= lucide_icon "x", class: "w-3 h-3" %>
+ <%= icon "x", size: "xs" %>
<%= tag.p message, class: "text-primary text-sm font-medium" %>
- <%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-secondary hover:text-gray-600 cursor-pointer" %>
+ <%= icon "x", data: { action: "click->element-removal#remove" }, class: "cursor-pointer" %>
<% end %>
diff --git a/app/views/shared/notifications/_cta.html.erb b/app/views/shared/notifications/_cta.html.erb
index f1fa2496..6b38ff53 100644
--- a/app/views/shared/notifications/_cta.html.erb
+++ b/app/views/shared/notifications/_cta.html.erb
@@ -4,7 +4,7 @@
<%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %>
- <%= lucide_icon "check", class: "w-3 h-3" %>
+ <%= icon "check", size: "xs" %>
diff --git a/app/views/shared/notifications/_loading.html.erb b/app/views/shared/notifications/_loading.html.erb
index 2a444028..c16771c0 100644
--- a/app/views/shared/notifications/_loading.html.erb
+++ b/app/views/shared/notifications/_loading.html.erb
@@ -2,7 +2,7 @@
<%= tag.div id: id, class: "flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs" do %>
- <%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
+ <%= icon "loader", class: "animate-pulse" %>
<%= tag.p message, class: "text-primary text-sm font-medium" %>
diff --git a/app/views/shared/notifications/_notice.html.erb b/app/views/shared/notifications/_notice.html.erb
index 76c1ea60..d4931716 100644
--- a/app/views/shared/notifications/_notice.html.erb
+++ b/app/views/shared/notifications/_notice.html.erb
@@ -1,14 +1,13 @@
-<%# locals: (message:, description: nil, cta: nil) %>
+<%# locals: (message:, description: nil) %>
<%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs",
data: {
controller: "element-removal",
action: "animationend->element-removal#remove"
} do %>
-
- <%= lucide_icon "check", class: "w-3 h-3" %>
+ <%= icon "check", size: "xs" %>
@@ -20,29 +19,18 @@
<%= tag.p description, class: "text-secondary text-sm" %>
<% end %>
-
- <% if cta %>
- <%= tag.div class:"flex gap-2 justify-end" do %>
- <%= tag.button cta[:decline][:label], class: "btn btn--secondary", data: { action: "click->element-removal#remove" } %>
- <%= tag.a cta[:accept][:label], href: cta[:accept][:href], class: "btn btn--primary" %>
- <% end %>
- <% end %>
- <% unless cta %>
-
-
- <% end %>
+
+
- <% unless cta %>
-
- <%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
-
- <% end %>
+
+ <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
+
<% end %>
diff --git a/app/views/tag/deletions/new.html.erb b/app/views/tag/deletions/new.html.erb
index afcd2d29..57f4d14b 100644
--- a/app/views/tag/deletions/new.html.erb
+++ b/app/views/tag/deletions/new.html.erb
@@ -1,21 +1,32 @@
-<%= modal_form_wrapper title: t(".delete_tag"), subtitle: t(".explanation", tag_name: @tag.name) do %>
- <%= styled_form_with url: tag_deletions_path(@tag),
- class: "space-y-4",
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: t(".delete_tag"), subtitle: t(".explanation", tag_name: @tag.name)) %>
+
+ <% dialog.with_body do %>
+ <%= styled_form_with url: tag_deletions_path(@tag),
data: {
turbo: false,
controller: "deletion",
- deletion_dangerous_action_class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
- deletion_safe_action_class: "form-field__submit border border-transparent",
deletion_submit_text_when_not_replacing_value: t(".delete_and_leave_uncategorized", tag_name: @tag.name),
deletion_submit_text_when_replacing_value: t(".delete_and_recategorize", tag_name: @tag.name) } do |f| %>
- <%= f.collection_select :replacement_tag_id,
+ <%= f.collection_select :replacement_tag_id,
Current.family.tags.alphabetically.without(@tag),
:id, :name,
- { prompt: t(".replacement_tag_prompt"), label: t(".tag") },
- { data: { deletion_target: "replacementField", action: "deletion#updateSubmitButton" } } %>
+ { prompt: t(".replacement_tag_prompt"), label: t(".tag"), container_class: "mb-4" },
+ data: { deletion_target: "replacementField", action: "deletion#chooseSubmitButton" } %>
- <%= f.submit t(".delete_and_leave_uncategorized", tag_name: @tag.name),
- class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
- data: { deletion_target: "submitButton" } %>
+ <%= render ButtonComponent.new(
+ variant: "destructive",
+ text: t(".delete_and_leave_uncategorized", tag_name: @tag.name),
+ full_width: true,
+ data: { deletion_target: "destructiveSubmitButton" }
+ ) %>
+
+ <%= render ButtonComponent.new(
+ text: "Delete and reassign",
+ data: { deletion_target: "safeSubmitButton" },
+ hidden: true,
+ full_width: true
+ ) %>
+ <% end %>
<% end %>
<% end %>
diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb
index 96c61dea..654e4fdb 100644
--- a/app/views/tags/_tag.html.erb
+++ b/app/views/tags/_tag.html.erb
@@ -8,21 +8,27 @@
- <%= contextual_menu do %>
-
- <%= contextual_menu_modal_action_item t(".edit"), edit_tag_path(tag) %>
+ <%= render MenuComponent.new do |menu| %>
+ <% menu.with_item(variant: "link", text: t(".edit"), href: edit_tag_path(tag), icon: "pencil", data: { turbo_frame: "modal" }) %>
- <% if tag.transactions.any? %>
- <%= link_to new_tag_deletion_path(tag),
- class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
- data: { turbo_frame: :modal } do %>
- <%= lucide_icon "trash-2", class: "w-5 h-5" %>
- <%= t(".delete") %>
- <% end %>
- <% else %>
- <%= contextual_menu_destructive_item t(".delete"), tag_path(tag), turbo_confirm: nil %>
- <% end %>
-
+ <% if tag.transactions.any? %>
+ <% menu.with_item(
+ variant: "link",
+ text: t(".delete"),
+ href: new_tag_deletion_path(tag),
+ icon: "trash-2",
+ frame: :modal
+ ) %>
+ <% else %>
+ <% menu.with_item(
+ variant: "button",
+ text: t(".delete"),
+ href: tag_path(tag),
+ icon: "trash-2",
+ method: :delete,
+ confirm: CustomConfirm.for_resource_deletion(tag.name)
+ ) %>
+ <% end %>
<% end %>
diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb
index 75ad4a0f..3453189d 100644
--- a/app/views/tags/edit.html.erb
+++ b/app/views/tags/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit") do %>
- <%= render "form", tag: @tag %>
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: t(".edit")) %>
+ <% dialog.with_body do %>
+ <%= render "form", tag: @tag %>
+ <% end %>
<% end %>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 1b05c051..d12bd356 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -1,10 +1,13 @@
@@ -26,10 +29,13 @@
<%= t(".empty") %>
- <%= link_to new_tag_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
- <%= lucide_icon("plus", class: "w-5 h-5") %>
-
<%= t(".new") %>
- <% end %>
+
+ <%= render LinkComponent.new(
+ text: t(".new"),
+ icon: "plus",
+ href: new_tag_path,
+ frame: :modal
+ ) %>
<% end %>
diff --git a/app/views/tags/new.html.erb b/app/views/tags/new.html.erb
index ad97c79d..19508471 100644
--- a/app/views/tags/new.html.erb
+++ b/app/views/tags/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".new") do %>
- <%= render "form", tag: @tag %>
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: t(".new")) %>
+ <% dialog.with_body do %>
+ <%= render "form", tag: @tag %>
+ <% end %>
<% end %>
diff --git a/app/views/trades/_header.html.erb b/app/views/trades/_header.html.erb
index a649ebf5..7fcf1a47 100644
--- a/app/views/trades/_header.html.erb
+++ b/app/views/trades/_header.html.erb
@@ -26,7 +26,7 @@
<% trade = entry.trade %>
- <%= disclosure t(".overview") do %>
+ <%= render DisclosureComponent.new(title: t(".overview"), open: true) do %>
diff --git a/app/views/trades/_trade.html.erb b/app/views/trades/_trade.html.erb
index eb558dd3..2a4c32f0 100644
--- a/app/views/trades/_trade.html.erb
+++ b/app/views/trades/_trade.html.erb
@@ -12,9 +12,12 @@
<%= tag.div class: ["flex items-center gap-2"] do %>
-
- <%= entry.name.first.upcase %>
-
+ <%= render FilledIconComponent.new(
+ variant: :text,
+ text: entry.name,
+ size: "sm",
+ rounded: true
+ ) %>
<%= link_to entry.name,
diff --git a/app/views/trades/new.html.erb b/app/views/trades/new.html.erb
index d3df030f..381a809e 100644
--- a/app/views/trades/new.html.erb
+++ b/app/views/trades/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
- <%= render "trades/form", entry: @entry %>
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: t(".title")) %>
+ <% dialog.with_body do %>
+ <%= render "trades/form", entry: @entry %>
+ <% end %>
<% end %>
diff --git a/app/views/trades/show.html.erb b/app/views/trades/show.html.erb
index 565f8c8b..97c48e2d 100644
--- a/app/views/trades/show.html.erb
+++ b/app/views/trades/show.html.erb
@@ -1,11 +1,12 @@
-<%= drawer do %>
- <%= render "trades/header", entry: @entry %>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+ <% dialog.with_header do %>
+ <%= render "trades/header", entry: @entry %>
+ <% end %>
<% trade = @entry.trade %>
-
-
- <%= disclosure t(".details") do %>
+ <% dialog.with_body do %>
+ <% dialog.with_section(title: t(".details"), open: true) do %>
<%= styled_form_with model: @entry,
url: trade_path(@entry),
@@ -42,8 +43,7 @@
<% end %>
-
- <%= disclosure t(".additional") do %>
+ <% dialog.with_section(title: t(".additional")) do %>
<%= styled_form_with model: @entry,
url: trade_path(@entry),
@@ -58,8 +58,7 @@
<% end %>
-
- <%= disclosure t(".settings") do %>
+ <% dialog.with_section(title: t(".settings")) do %>
<%= styled_form_with model: @entry,
@@ -72,13 +71,7 @@
<%= t(".exclude_subtitle") %>
-
- <%= f.check_box :excluded,
- class: "sr-only peer",
- "data-auto-submit-form-target": "auto" %>
-
+ <%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
<% end %>
@@ -98,5 +91,5 @@
<% end %>
-
diff --git a/app/views/transactions/_selection_bar.html.erb b/app/views/transactions/_selection_bar.html.erb
index fada06aa..65e2ce12 100644
--- a/app/views/transactions/_selection_bar.html.erb
+++ b/app/views/transactions/_selection_bar.html.erb
@@ -8,15 +8,15 @@
<%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
<%= link_to new_transactions_bulk_update_path,
- class: "p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md",
+ class: "p-1.5 group hover:bg-inverse flex items-center justify-center rounded-md",
title: "Edit",
data: { turbo_frame: "bulk_transaction_edit_drawer" } do %>
- <%= lucide_icon "pencil-line", class: "w-5 group-hover:text-white" %>
+ <%= icon "pencil-line", class: "group-hover:text-inverse" %>
<% end %>
<%= form_with url: transactions_bulk_deletion_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
-
- <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
+
+ <%= icon "trash-2", class: "group-hover:text-inverse" %>
<% end %>
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index 4aa8ddd1..1ad74980 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -26,9 +26,12 @@
class: "w-6 h-6 rounded-full",
loading: "lazy" %>
<% else %>
- <%= render "shared/circle_logo",
- name: entry.name,
- size: "sm" %>
+ <%= render FilledIconComponent.new(
+ variant: :text,
+ text: entry.name,
+ size: "sm",
+ rounded: true
+ ) %>
<% end %>
@@ -45,8 +48,8 @@
) %>
<% if entry.excluded %>
-
(excluded from averages)">
- <%= lucide_icon "asterisk", class: "w-4 h-4 shrink-0 text-orange-500" %>
+ (excluded from averages)">
+ <%= icon "asterisk", size: "sm", color: "current" %>
<% end %>
diff --git a/app/views/transactions/_transfer_match.html.erb b/app/views/transactions/_transfer_match.html.erb
index a406e7f4..a1ff6a76 100644
--- a/app/views/transactions/_transfer_match.html.erb
+++ b/app/views/transactions/_transfer_match.html.erb
@@ -3,7 +3,7 @@
" class="flex items-center gap-1">
<% if transaction.transfer.confirmed? %>
is confirmed">
- <%= lucide_icon "link-2", class: "w-4 h-4 text-indigo-600" %>
+ <%= icon "link-2", size: "sm", class: "text-indigo-600" %>
<% elsif transaction.transfer.pending? %>
@@ -14,7 +14,7 @@
method: :patch,
class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
title: "Confirm match" do %>
- <%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
+ <%= icon "check", size: "sm", class: "text-indigo-400 hover:text-indigo-600" %>
<% end %>
<%= button_to transfer_path(transaction.transfer, transfer: { status: "rejected" }),
@@ -22,7 +22,7 @@
data: { turbo: false },
class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
title: "Reject match" do %>
- <%= lucide_icon "x", class: "w-4 h-4 text-subdued hover:text-gray-600" %>
+ <%= icon "x", size: "sm", class: "text-subdued hover:text-gray-600" %>
<% end %>
<% end %>
diff --git a/app/views/transactions/bulk_updates/new.html.erb b/app/views/transactions/bulk_updates/new.html.erb
index 80c04526..072605b6 100644
--- a/app/views/transactions/bulk_updates/new.html.erb
+++ b/app/views/transactions/bulk_updates/new.html.erb
@@ -1,63 +1,25 @@
-<%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
-
+<%= render DialogComponent.new(variant: "drawer", frame: "bulk_transaction_edit_drawer") do |dialog| %>
+ <% dialog.with_header(title: "Edit transactions", data: { bulk_select_target: "bulkEditDrawerHeader" }) %>
+
+ <% dialog.with_body do %>
<%= styled_form_with url: transactions_bulk_update_path, scope: "bulk_update", class: "h-full", data: { turbo_frame: "_top" } do |form| %>
-
-
-
-
- <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
-
-
-
-
+ <% dialog.with_section(title: "Overview", open: true) do %>
+
+ <%= form.date_field :date, label: "Date", max: Date.current %>
+ <% end %>
-
- <%= link_to "Cancel", transactions_path, class: "btn btn--ghost" %>
-
- <%= tag.button "Save",
- type: "button",
- data: { "bulk-select-scope-param": "bulk_update", action: "bulk-select#submitBulkRequest" },
- class: "btn btn--primary" %>
+ <% dialog.with_section(title: "Transactions", open: true) do %>
+
+ <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: "Select a category", label: "Category", class: "text-subdued" } %>
+ <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: "Select a merchant", label: "Merchant", class: "text-subdued" } %>
+ <%= form.select :tag_ids, Current.family.tags.alphabetically.pluck(:name, :id), { include_blank: "None", multiple: true, label: "Tags", container_class: "h-40" } %>
+ <%= form.text_area :notes, label: "Notes", placeholder: "Enter a note that will be applied to selected transactions", rows: 5 %>
-
+ <% end %>
<% end %>
-
+ <% end %>
+
+ <% dialog.with_action(cancel_action: true, text: "Cancel", variant: "ghost") %>
+ <% dialog.with_action(text: "Save", data: { bulk_select_scope_param: "bulk_update", action: "bulk-select#submitBulkRequest" }) %>
<% end %>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index 7ed329aa..6ab1cc44 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -3,30 +3,43 @@
Transactions
- <%= contextual_menu do %>
- <% if Rails.env.development? %>
- <%= button_to "Dev only: Sync all", sync_all_accounts_path, class: "btn btn--ghost w-full" %>
- <% end %>
- <%= contextual_menu_item "New rule", url: new_rule_path(resource_type: "transaction"), icon: "plus", turbo_frame: :modal %>
- <%= contextual_menu_item "Edit rules", url: rules_path, icon: "git-branch", turbo_frame: :_top %>
- <%= contextual_menu_modal_action_item t(".edit_categories"), categories_path, icon: "shapes", turbo_frame: :_top %>
- <%= contextual_menu_modal_action_item t(".edit_tags"), tags_path, icon: "tags", turbo_frame: :_top %>
- <%= contextual_menu_modal_action_item t(".edit_merchants"), family_merchants_path, icon: "store", turbo_frame: :_top %>
- <%= contextual_menu_modal_action_item t(".edit_imports"), imports_path, icon: "hard-drive-upload", turbo_frame: :_top %>
- <%= contextual_menu_modal_action_item t(".import"), new_import_path, icon: "download", turbo_frame: "modal", class_name: "md:!hidden" %>
+ <%= render MenuComponent.new do |menu| %>
+ <% menu.with_item(variant: "button", text: "Dev only: Sync all", href: sync_all_accounts_path, method: :post, icon: "refresh-cw") %>
+ <% menu.with_item(variant: "link", text: "New rule", href: new_rule_path(resource_type: "transaction"), icon: "plus", data: { turbo_frame: :modal }) %>
+ <% menu.with_item(variant: "link", text: "Edit rules", href: rules_path, icon: "git-branch", data: { turbo_frame: :_top }) %>
+ <% menu.with_item(variant: "link", text: "Edit categories", href: categories_path, icon: "shapes", data: { turbo_frame: :_top }) %>
+ <% menu.with_item(variant: "link", text: "Edit tags", href: tags_path, icon: "tags", data: { turbo_frame: :_top }) %>
+ <% menu.with_item(variant: "link", text: "Edit merchants", href: family_merchants_path, icon: "store", data: { turbo_frame: :_top }) %>
+ <% menu.with_item(variant: "link", text: "Edit imports", href: imports_path, icon: "hard-drive-upload", data: { turbo_frame: :_top }) %>
+ <% menu.with_item(variant: "link", text: "Import", href: new_import_path, icon: "download", data: { turbo_frame: "modal", class_name: "md:!hidden" }) %>
<% end %>
- <%= link_to new_import_path, class: "btn btn--outline flex items-center gap-2 hidden md:flex", data: { turbo_frame: "modal" } do %>
- <%= lucide_icon("download", class: "text-secondary w-4 h-4") %>
-
<%= t(".import") %>
- <% end %>
+
+ <%= render LinkComponent.new(
+ text: t(".import"),
+ icon: "download",
+ variant: "outline",
+ href: new_import_path,
+ frame: :modal,
+ ) %>
+
- <%= link_to new_transaction_path, class: "btn btn--primary flex items-center justify-center gap-2 rounded-full md:rounded-lg w-9 h-9 md:w-auto md:h-auto", data: { turbo_frame: :modal } do %>
-
- <%= lucide_icon("plus", class: "w-5 h-5") %>
-
-
New transaction
- <% end %>
+ <%= render LinkComponent.new(
+ text: "New transaction",
+ icon: "plus",
+ variant: "primary",
+ href: new_transaction_path,
+ frame: :modal,
+ class: "hidden md:inline-flex"
+ ) %>
+
+ <%= render LinkComponent.new(
+ icon: "plus",
+ variant: "icon-inverse",
+ href: new_transaction_path,
+ frame: :modal,
+ class: "rounded-full md:hidden"
+ ) %>
diff --git a/app/views/transactions/new.html.erb b/app/views/transactions/new.html.erb
index 3ad75f36..c9183822 100644
--- a/app/views/transactions/new.html.erb
+++ b/app/views/transactions/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: "New transaction" do %>
- <%= render "form", entry: @entry %>
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: "New transaction") %>
+ <% dialog.with_body do %>
+ <%= render "form", entry: @entry, income_categories: @income_categories, expense_categories: @expense_categories %>
+ <% end %>
<% end %>
diff --git a/app/views/transactions/searches/_form.html.erb b/app/views/transactions/searches/_form.html.erb
index dfffd7fd..eba44cb5 100644
--- a/app/views/transactions/searches/_form.html.erb
+++ b/app/views/transactions/searches/_form.html.erb
@@ -8,7 +8,7 @@
- <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
+ <%= icon("search") %>
<%= form.text_field :search,
placeholder: "Search transactions ...",
value: @q[:search],
@@ -16,13 +16,20 @@
"data-auto-submit-form-target": "auto" %>
-
-
- <%= lucide_icon("list-filter", class: "w-5 h-5 text-secondary") %>
- Filter
-
- <%= render "transactions/searches/menu", form: form %>
-
+ <%= render MenuComponent.new(variant: "button", no_padding: true) do |menu| %>
+ <% menu.with_button(
+ id: "transaction-filters-button",
+ type: "button",
+ text: "Filter",
+ variant: "outline",
+ icon: "list-filter",
+ data: { menu_target: "button" }
+ ) %>
+
+ <% menu.with_custom_content do %>
+ <%= render "transactions/searches/menu", form: form %>
+ <% end %>
+ <% end %>
<% end %>
diff --git a/app/views/transactions/searches/_menu.html.erb b/app/views/transactions/searches/_menu.html.erb
index cdcd2536..3d11a37a 100644
--- a/app/views/transactions/searches/_menu.html.erb
+++ b/app/views/transactions/searches/_menu.html.erb
@@ -1,47 +1,46 @@
<%# locals: (form:) %>
-
-
- <% transaction_search_filters.each do |filter| %>
-
- <%= lucide_icon(filter[:icon], class: "w-5 h-5") %>
- <%= t(".#{filter[:key]}") %>
-
- <% end %>
-
-
-
+<%= render TabsComponent.new(
+ variant: :unstyled,
+ active_tab: get_default_transaction_search_filter[:key],
+ active_btn_classes: "bg-surface text-primary",
+ inactive_btn_classes: "text-secondary hover:bg-container-inset"
+) do |tabs| %>
+
+ <% end %>
-
-
- <% if @q.present? %>
- <%= link_to t(".clear_filters"), transactions_path(clear_filters: true), class: "btn btn--ghost" %>
+
+
+ <% transaction_search_filters.each do |filter| %>
+ <%= tabs.with_panel(tab_id: filter[:key]) do %>
+ <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
+ <% end %>
<% end %>
-
- <%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-container-inset rounded-lg text-sm text-primary font-medium" do %>
- <%= t(".cancel") %>
- <% end %>
- <%= form.submit t(".apply"), name: nil, class: "py-2 px-3 bg-primary hover:bg-primary-dark rounded-lg text-sm text-primary font-medium cursor-pointer" %>
+
+
+ <% if @q.present? %>
+ <%= render LinkComponent.new(
+ text: t(".clear_filters"),
+ variant: "ghost",
+ href: transactions_path(clear_filters: true),
+ ) %>
+ <% end %>
+
+
+
+ <%= render ButtonComponent.new(text: t(".cancel"), type: "button", variant: "ghost", data: { action: "menu#close" }) %>
+ <%= render ButtonComponent.new(text: t(".apply")) %>
+
-
+<% end %>
diff --git a/app/views/transactions/searches/filters/_account_filter.html.erb b/app/views/transactions/searches/filters/_account_filter.html.erb
index 6e516dc7..8182dedc 100644
--- a/app/views/transactions/searches/filters/_account_filter.html.erb
+++ b/app/views/transactions/searches/filters/_account_filter.html.erb
@@ -2,7 +2,7 @@
<% Current.family.accounts.alphabetically.each do |account| %>
diff --git a/app/views/transactions/searches/filters/_category_filter.html.erb b/app/views/transactions/searches/filters/_category_filter.html.erb
index 5d974b88..6b848ed9 100644
--- a/app/views/transactions/searches/filters/_category_filter.html.erb
+++ b/app/views/transactions/searches/filters/_category_filter.html.erb
@@ -2,7 +2,7 @@
<% family_categories.each do |category| %>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb
index 986255f1..3166374c 100644
--- a/app/views/transactions/searches/filters/_merchant_filter.html.erb
+++ b/app/views/transactions/searches/filters/_merchant_filter.html.erb
@@ -2,7 +2,7 @@
<% Current.family.assigned_merchants.alphabetically.each do |merchant| %>
@@ -16,7 +16,14 @@
merchant.name,
nil %>
<%= form.label :merchants, value: merchant.name, class: "text-sm text-primary flex items-center gap-2" do %>
- <%= circle_logo(merchant.name, hex: merchant.color, size: "sm") %>
+ <%= render FilledIconComponent.new(
+ variant: :text,
+ hex_color: merchant.color,
+ text: merchant.name,
+ size: "sm",
+ rounded: true
+ ) %>
+
<%= merchant.name %>
<% end %>
diff --git a/app/views/transactions/searches/filters/_tag_filter.html.erb b/app/views/transactions/searches/filters/_tag_filter.html.erb
index dfde1053..8cf20adc 100644
--- a/app/views/transactions/searches/filters/_tag_filter.html.erb
+++ b/app/views/transactions/searches/filters/_tag_filter.html.erb
@@ -2,7 +2,7 @@
<% Current.family.tags.alphabetically.each do |tag| %>
@@ -16,7 +16,14 @@
tag.name,
nil %>
<%= form.label :tags, value: tag.name, class: "text-sm text-primary flex items-center gap-2" do %>
- <%= circle_logo(tag.name, hex: tag.color || Tag::UNCATEGORIZED_COLOR, size: "sm") %>
+ <%= render FilledIconComponent.new(
+ variant: :text,
+ hex_color: tag.color || Tag::UNCATEGORIZED_COLOR,
+ text: tag.name,
+ size: "sm",
+ rounded: true
+ ) %>
+
<%= tag.name %>
<% end %>
diff --git a/app/views/transactions/show.html.erb b/app/views/transactions/show.html.erb
index 7306ffc0..c5e65334 100644
--- a/app/views/transactions/show.html.erb
+++ b/app/views/transactions/show.html.erb
@@ -1,9 +1,10 @@
-<%= drawer do %>
- <%= render "transactions/header", entry: @entry %>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+ <% dialog.with_header do %>
+ <%= render "transactions/header", entry: @entry %>
+ <% end %>
-
-
- <%= disclosure t(".overview") do %>
+ <% dialog.with_body do %>
+ <% dialog.with_section(title: t(".overview"), open: true) do %>
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
@@ -47,8 +48,7 @@
<% end %>
-
- <%= disclosure t(".details"), default_open: false do %>
+ <% dialog.with_section(title: t(".details")) do %>
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
@@ -95,10 +95,8 @@
<% end %>
-
- <%= disclosure t(".settings") do %>
+ <% dialog.with_section(title: t(".settings")) do %>
-
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
class: "p-3",
@@ -109,13 +107,7 @@
One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.
-
- <%= f.check_box :excluded,
- class: "sr-only peer",
- "data-auto-submit-form-target": "auto" %>
-
+ <%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
<% end %>
@@ -125,10 +117,13 @@
Transfers and payments are special types of transactions that indicate money movement between 2 accounts.
- <%= link_to new_transaction_transfer_match_path(@entry), class: "btn btn--outline flex items-center gap-2", data: { turbo_frame: :modal } do %>
- <%= lucide_icon "arrow-left-right", class: "w-4 h-4 shrink-0" %>
-
Open matcher
- <% end %>
+ <%= render LinkComponent.new(
+ text: "Open matcher",
+ icon: "arrow-left-right",
+ variant: "outline",
+ href: new_transaction_transfer_match_path(@entry),
+ frame: :modal
+ ) %>
@@ -138,14 +133,16 @@
<%= t(".delete_subtitle") %>
- <%= button_to t(".delete"),
- entry_path(@entry),
- method: :delete,
- class: "rounded-lg px-3 py-2 text-red-500 text-sm
- font-medium border border-secondary",
- data: { turbo_confirm: true, turbo_frame: "_top" } %>
+ <%= render ButtonComponent.new(
+ text: t(".delete"),
+ variant: "outline-destructive",
+ href: entry_path(@entry),
+ method: :delete,
+ confirm: CustomConfirm.for_resource_deletion("transaction"),
+ frame: "_top"
+ ) %>
<% end %>
-
+ <% end %>
<% end %>
diff --git a/app/views/transfer_matches/new.html.erb b/app/views/transfer_matches/new.html.erb
index d8a7e3f4..e4709e30 100644
--- a/app/views/transfer_matches/new.html.erb
+++ b/app/views/transfer_matches/new.html.erb
@@ -1,60 +1,63 @@
-<%= modal_form_wrapper title: "Match transfer or payment" do %>
- <%= styled_form_with(
- url: transaction_transfer_match_path(@entry),
- scope: :transfer_match,
- class: "space-y-8",
- data: { turbo_frame: :_top }
- ) do |f| %>
-
-
-
- <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
-
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: "Match transfer or payment") %>
+ <% dialog.with_body do %>
+ <%= styled_form_with(
+ url: transaction_transfer_match_path(@entry),
+ scope: :transfer_match,
+ class: "space-y-8",
+ data: { turbo_frame: :_top }
+ ) do |f| %>
+
+
+
+ <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
+
- <% if @entry.amount.positive? %>
- <%= f.select(
- :entry_id,
- [[entry_name_detailed(@entry), @entry.id]],
- {
- label: "Outflow transaction",
- selected: @entry.id,
- },
- disabled: true
- ) %>
- <% else %>
- <%= render "transfer_matches/matching_fields",
- form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.outflow_transaction.entry }, accounts: @accounts %>
- <% end %>
+ <% if @entry.amount.positive? %>
+ <%= f.select(
+ :entry_id,
+ [[entry_name_detailed(@entry), @entry.id]],
+ {
+ label: "Outflow transaction",
+ selected: @entry.id,
+ },
+ disabled: true
+ ) %>
+ <% else %>
+ <%= render "transfer_matches/matching_fields",
+ form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.outflow_transaction.entry }, accounts: @accounts %>
+ <% end %>
+
+
+
+
+ <%= icon "arrow-down" %>
-
-
- <%= lucide_icon "arrow-down", class: "w-5 h-5" %>
-
+
+
+
+ <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
+
-
-
-
- <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
-
+ <% if @entry.amount.negative? %>
+ <%= f.select(
+ :entry_id,
+ [[entry_name_detailed(@entry), @entry.id]],
+ {
+ label: "Inflow transaction",
+ selected: @entry.id,
+ },
+ disabled: true
+ ) %>
+ <% else %>
+ <%= render "transfer_matches/matching_fields",
+ form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.inflow_transaction.entry }, accounts: @accounts %>
+ <% end %>
+
+
- <% if @entry.amount.negative? %>
- <%= f.select(
- :entry_id,
- [[entry_name_detailed(@entry), @entry.id]],
- {
- label: "Inflow transaction",
- selected: @entry.id,
- },
- disabled: true
- ) %>
- <% else %>
- <%= render "transfer_matches/matching_fields",
- form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.inflow_transaction.entry }, accounts: @accounts %>
- <% end %>
-
-
- <%= f.submit "Create transfer match", data: { turbo_submits_with: "Saving..."} %>
+ <%= f.submit "Create transfer match" %>
+ <% end %>
<% end %>
<% end %>
diff --git a/app/views/transfers/_account_links.html.erb b/app/views/transfers/_account_links.html.erb
index f7ba4365..33390b31 100644
--- a/app/views/transfers/_account_links.html.erb
+++ b/app/views/transfers/_account_links.html.erb
@@ -1,24 +1,7 @@
<%# locals: (transfer:, is_inflow: false) %>
<% first_account, second_account = is_inflow ? [transfer.to_account, transfer.from_account] : [transfer.from_account, transfer.to_account] %>
-
- <%# Check if first_account exists before creating link %>
- <% if first_account %>
- <%= link_to first_account.name, account_path(first_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
- <% else %>
-
- Data Error: Missing account
-
- <% end %>
-
- <%= lucide_icon is_inflow ? "arrow-left" : "arrow-right", class: "w-4 h-4 shrink-0" %>
-
- <%# Check if second_account exists before creating link %>
- <% if second_account %>
- <%= link_to second_account.name, account_path(second_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
- <% else %>
-
- Data Error: Missing account
-
- <% end %>
+ <%= link_to first_account.name, account_path(first_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
+ <%= icon(is_inflow ? "arrow-left" : "arrow-right", size: "sm") %>
+ <%= link_to second_account.name, account_path(second_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
diff --git a/app/views/transfers/_form.html.erb b/app/views/transfers/_form.html.erb
index 26344579..d584cb7c 100644
--- a/app/views/transfers/_form.html.erb
+++ b/app/views/transfers/_form.html.erb
@@ -1,7 +1,7 @@
<%= styled_form_with model: transfer, class: "space-y-4", data: { turbo_frame: "_top", controller: "transfer-form" } do |f| %>
<% if transfer.errors.present? %>
-
- <%= lucide_icon "circle-alert", class: "w-5 h-5" %>
+
+ <%= icon "circle-alert", size: "sm" %>
<%= @transfer.errors.full_messages.to_sentence %>
<% end %>
diff --git a/app/views/transfers/new.html.erb b/app/views/transfers/new.html.erb
index f1a7ae0d..5456f1b3 100644
--- a/app/views/transfers/new.html.erb
+++ b/app/views/transfers/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
- <%= render "form", transfer: @transfer %>
+<%= render DialogComponent.new do |dialog| %>
+ <% dialog.with_header(title: t(".title")) %>
+ <% dialog.with_body do %>
+ <%= render "form", transfer: @transfer %>
+ <% end %>
<% end %>
diff --git a/app/views/transfers/show.html.erb b/app/views/transfers/show.html.erb
index 911f382b..42b05219 100644
--- a/app/views/transfers/show.html.erb
+++ b/app/views/transfers/show.html.erb
@@ -1,27 +1,28 @@
-<%= drawer do %>
-
-
-
-
- <%= format_money @transfer.amount_abs %>
-
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+ <% dialog.with_header do %>
+
+
+
+
+ <%= format_money @transfer.amount_abs %>
+
-
- <%= @transfer.amount_abs.currency.iso_code %>
-
-
+
+ <%= @transfer.amount_abs.currency.iso_code %>
+
+
- <%= lucide_icon "arrow-left-right", class: "text-secondary mt-1 w-5 h-5" %>
+ <%= icon "arrow-left-right", size: "sm" %>
+
+
+
+ <%= @transfer.name %>
+
- <%= @transfer.name %>
-
-
-
-
-
- <%= disclosure t(".overview") do %>
+ <% dialog.with_body do %>
+ <% dialog.with_section(title: t(".overview"), open: true) do %>
<% end %>
-
- <%= disclosure t(".details") do %>
+ <% dialog.with_section(title: t(".details")) do %>
<%= styled_form_with model: @transfer,
data: { controller: "auto-submit-form" }, class: "space-y-2" do |f| %>
<% if @transfer.categorizable? %>
@@ -83,8 +83,7 @@
<% end %>
<% end %>
-
- <%= disclosure t(".settings") do %>
+ <% dialog.with_section(title: t(".settings")) do %>
+ <% end %>
<% end %>
diff --git a/app/views/users/_user_menu.html.erb b/app/views/users/_user_menu.html.erb
index 584cd4e7..92566c49 100644
--- a/app/views/users/_user_menu.html.erb
+++ b/app/views/users/_user_menu.html.erb
@@ -1,73 +1,47 @@
<%# locals: (user:, placement: "right-start", offset: 16) %>
-