More composable forms (#989)

* Make forms more composable, opt-in to form builder

* Remove unused method

* Simpler money input controls

* Add in new form styling to imports

* Lint fixes

* Small tweak of multi select styles

app/views/account/entries/_selection_bar.html.erb

@@ -9,7 +9,6 @@
     <%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
 
     <%= form_with url: mark_transfers_transactions_path,
-                  builder: ActionView::Helpers::FormBuilder,
                   scope: "bulk_update",
                   data: {
                     turbo_frame: "_top",
@@ -36,7 +35,7 @@
       <%= lucide_icon "pencil-line", class: "w-5 group-hover:text-white" %>
     <% end %>
 
-    <%= form_with url: bulk_delete_transactions_path, builder: ActionView::Helpers::FormBuilder, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
+    <%= form_with url: bulk_delete_transactions_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
       <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
         <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
       </button>

app/views/account/entries/entryables/transaction/_show.html.erb

@@ -27,30 +27,28 @@
         </summary>
 
         <div class="pb-6">
-          <%= form_with model: [account, entry], url: account_entry_path(account, entry), html: { data: { controller: "auto-submit-form" } } do |f| %>
-            <div class="space-y-2">
-              <%= f.text_field :name, label: t(".name_label"), "data-auto-submit-form-target": "auto" %>
-              <% unless entry.marked_as_transfer? %>
-                <div class="flex space-x-2">
-                  <div>
-                    <%= f.select :nature, [["Expense", "expense"], ["Income", "income"]], { label: t(".nature"), selected: entry.amount.negative? ? "income" : "expense" }, "data-auto-submit-form-target": "auto" %>
-                  </div>
-                  <div class="flex-grow">
-                    <%= f.number_field :amount, value: entry.amount.abs, label: t(".amount"), step: "0.01", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "change" %>
-                  </div>
+          <%= styled_form_with model: [account, entry], url: account_entry_path(account, entry), class: "space-y-2", data: { controller: "auto-submit-form" } do |f| %>
+            <%= f.text_field :name, label: t(".name_label"), "data-auto-submit-form-target": "auto" %>
+            <% unless entry.marked_as_transfer? %>
+              <div class="flex space-x-2">
+                <div>
+                  <%= f.select :nature, [["Expense", "expense"], ["Income", "income"]], { label: t(".nature"), selected: entry.amount.negative? ? "income" : "expense" }, "data-auto-submit-form-target": "auto" %>
                 </div>
-              <% end %>
-              <%= f.date_field :date, label: t(".date_label"), max: Date.current, "data-auto-submit-form-target": "auto" %>
+                <div class="flex-grow">
+                  <%= f.number_field :amount, value: entry.amount.abs, label: t(".amount"), step: "0.01", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "change" %>
+                </div>
+              </div>
+            <% end %>
+            <%= f.date_field :date, label: t(".date_label"), max: Date.current, "data-auto-submit-form-target": "auto" %>
 
-              <%= f.fields_for :entryable do |ef| %>
-                <% unless entry.marked_as_transfer? %>
-                  <%= ef.collection_select :category_id, selectable_categories, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
-                  <%= ef.collection_select :merchant_id, selectable_merchants, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
-                <% end %>
+            <%= f.fields_for :entryable do |ef| %>
+              <% unless entry.marked_as_transfer? %>
+                <%= ef.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
+                <%= ef.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
               <% end %>
+            <% end %>
 
-              <%= f.collection_select :account_id, selectable_accounts, :id, :name, { prompt: t(".account_placeholder"), label: t(".account_label"), class: "text-gray-500" }, { class: "form-field__input cursor-not-allowed text-gray-400", disabled: "disabled" } %>
-            </div>
+            <%= f.collection_select :account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".account_placeholder"), label: t(".account_label"), class: "text-gray-500" }, { class: "form-field__input cursor-not-allowed text-gray-400", disabled: "disabled" } %>
           <% end %>
         </div>
       </details>
@@ -61,12 +59,12 @@
           <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
         </summary>
 
-        <div class="pb-6 space-y-2">
-          <%= form_with model: [account, entry], url: account_entry_path(account, entry), html: { data: { controller: "auto-submit-form" } } do |f| %>
+        <div class="pb-6">
+          <%= styled_form_with model: [account, entry], url: account_entry_path(account, entry), class: "space-y-2", data: { controller: "auto-submit-form" } do |f| %>
 
             <%= f.fields_for :entryable do |ef| %>
               <%= ef.select :tag_ids,
-                            options_for_select(selectable_tags, transaction.tag_ids),
+                            options_for_select(Current.family.tags.alphabetically.pluck(:name, :id), transaction.tag_ids),
                             {
                               multiple: true,
                               label: t(".tags_label"),
@@ -86,7 +84,7 @@
         </summary>
 
         <div class="pb-6">
-          <%= form_with model: [account, entry], url: account_entry_path(account, entry), html: { class: "p-3 space-y-3", data: { controller: "auto-submit-form" } } do |f| %>
+          <%= styled_form_with model: [account, entry], url: account_entry_path(account, entry), class: "p-3 space-y-3", data: { controller: "auto-submit-form" } do |f| %>
             <%= f.fields_for :entryable do |ef| %>
               <div class="flex cursor-pointer items-center gap-2 justify-between">
                 <div class="text-sm space-y-1">

app/views/account/entries/entryables/transaction/_transaction.html.erb

@@ -31,7 +31,7 @@
 
     <% if unconfirmed_transfer?(entry) %>
       <% if editable %>
-        <%= form_with url: unmark_transfers_transactions_path, builder: ActionView::Helpers::FormBuilder, class: "flex items-center", data: {
+        <%= form_with url: unmark_transfers_transactions_path, class: "flex items-center", data: {
           turbo_confirm: {
             title: t(".remove_transfer"),
             body: t(".remove_transfer_body"),

app/views/account/entries/entryables/valuation/_form.html.erb

@@ -1,8 +1,7 @@
 <%# locals: (entry:) %>
 <%= form_with model: [entry.account, entry],
               data: { turbo_frame: "_top" },
-              url: entry.new_record? ? account_entries_path(entry.account) : account_entry_path(entry.account, entry),
-              builder: ActionView::Helpers::FormBuilder do |f| %>
+              url: entry.new_record? ? account_entries_path(entry.account) : account_entry_path(entry.account, entry) do |f| %>
   <div class="grid grid-cols-10 p-4 items-center">
     <div class="col-span-7 flex items-center gap-4">
       <div class="w-8 h-8 rounded-full p-1.5 flex items-center justify-center bg-gray-500/5">