Bump to v0.1.0-alpha.5

Signed-off-by: Zach Gollwitzer <zach@maybe.co>

Gemfile.lock

@@ -7,32 +7,32 @@ GIT
 
 GIT
   remote: https://github.com/rails/rails.git
-  revision: c1f1b14adce5cd373ed63611486eb7a7db73c78c
+  revision: 8e7eb03d990e0a2a80fe1ea80133ef5d58bbc268
   branch: 7-2-stable
   specs:
-    actioncable (7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    actioncable (7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      activejob (= 7.2.0.alpha)
-      activerecord (= 7.2.0.alpha)
-      activestorage (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    actionmailbox (7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      activejob (= 7.2.0.beta1)
+      activerecord (= 7.2.0.beta1)
+      activestorage (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       mail (>= 2.8.0)
-    actionmailer (7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      actionview (= 7.2.0.alpha)
-      activejob (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    actionmailer (7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      actionview (= 7.2.0.beta1)
+      activejob (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (7.2.0.alpha)
-      actionview (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    actionpack (7.2.0.beta1)
+      actionview (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4)
@@ -41,60 +41,60 @@ GIT
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actiontext (7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      activerecord (= 7.2.0.alpha)
-      activestorage (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    actiontext (7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      activerecord (= 7.2.0.beta1)
+      activestorage (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    actionview (7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    activejob (7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       globalid (>= 0.3.6)
-    activemodel (7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
-    activerecord (7.2.0.alpha)
-      activemodel (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    activemodel (7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
+    activerecord (7.2.0.beta1)
+      activemodel (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       timeout (>= 0.4.0)
-    activestorage (7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      activejob (= 7.2.0.alpha)
-      activerecord (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    activestorage (7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      activejob (= 7.2.0.beta1)
+      activerecord (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       marcel (~> 1.0)
-    activesupport (7.2.0.alpha)
+    activesupport (7.2.0.beta1)
       base64
       bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0, >= 2.0.5)
-    rails (7.2.0.alpha)
-      actioncable (= 7.2.0.alpha)
-      actionmailbox (= 7.2.0.alpha)
-      actionmailer (= 7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      actiontext (= 7.2.0.alpha)
-      actionview (= 7.2.0.alpha)
-      activejob (= 7.2.0.alpha)
-      activemodel (= 7.2.0.alpha)
-      activerecord (= 7.2.0.alpha)
-      activestorage (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+    rails (7.2.0.beta1)
+      actioncable (= 7.2.0.beta1)
+      actionmailbox (= 7.2.0.beta1)
+      actionmailer (= 7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      actiontext (= 7.2.0.beta1)
+      actionview (= 7.2.0.beta1)
+      activejob (= 7.2.0.beta1)
+      activemodel (= 7.2.0.beta1)
+      activerecord (= 7.2.0.beta1)
+      activestorage (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       bundler (>= 1.15.0)
-      railties (= 7.2.0.alpha)
-    railties (7.2.0.alpha)
-      actionpack (= 7.2.0.alpha)
-      activesupport (= 7.2.0.alpha)
+      railties (= 7.2.0.beta1)
+    railties (7.2.0.beta1)
+      actionpack (= 7.2.0.beta1)
+      activesupport (= 7.2.0.beta1)
       irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -150,7 +150,7 @@ GEM
       xpath (~> 3.2)
     childprocess (5.0.0)
     climate_control (1.2.0)
-    concurrent-ruby (1.2.3)
+    concurrent-ruby (1.3.1)
     connection_pool (2.4.1)
     crack (1.0.0)
       bigdecimal
@@ -257,7 +257,7 @@ GEM
     msgpack (1.7.2)
     net-http (0.4.1)
       uri
-    net-imap (0.4.11)
+    net-imap (0.4.12)
       date
       net-protocol
     net-pop (0.1.2)
@@ -283,13 +283,13 @@ GEM
       base64
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
-    pagy (8.4.0)
+    pagy (8.4.1)
     parallel (1.24.0)
     parser (3.3.1.0)
       ast (~> 2.4.1)
       racc
     pg (1.5.6)
-    prism (0.27.0)
+    prism (0.29.0)
     propshaft (0.9.0)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
@@ -331,7 +331,7 @@ GEM
     rdoc (6.7.0)
       psych (>= 4.0.0)
     regexp_parser (2.9.2)
-    reline (0.5.7)
+    reline (0.5.8)
       io-console (~> 0.5)
     rexml (3.2.8)
       strscan (>= 3.0.9)
@@ -364,13 +364,12 @@ GEM
       rubocop-minitest
       rubocop-performance
       rubocop-rails
-    ruby-lsp (0.16.6)
+    ruby-lsp (0.17.1)
       language_server-protocol (~> 3.17.0)
-      prism (>= 0.23.0, < 0.28)
+      prism (>= 0.29.0, < 0.30)
       sorbet-runtime (>= 0.5.10782)
-    ruby-lsp-rails (0.3.6)
-      ruby-lsp (>= 0.16.5, < 0.17.0)
-      sorbet-runtime (>= 0.5.9897)
+    ruby-lsp-rails (0.3.7)
+      ruby-lsp (>= 0.17.0, < 0.18.0)
     ruby-progressbar (1.13.0)
     ruby-vips (2.2.1)
       ffi (~> 1.12)
@@ -397,7 +396,7 @@ GEM
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    sorbet-runtime (0.5.11383)
+    sorbet-runtime (0.5.11406)
     stackprof (0.2.26)
     stimulus-rails (1.3.3)
       railties (>= 6.0.0)

app/assets/stylesheets/application.tailwind.css

@@ -20,7 +20,7 @@
     }
 
     th {
-      @apply whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900;
+      @apply whitespace-nowrap px-2 text-left text-sm font-semibold text-gray-900 py-3.5;
     }
 
     tbody {
@@ -28,22 +28,22 @@
     }
 
     td {
-      @apply px-2 py-2 text-sm text-gray-500 whitespace-nowrap;
+      @apply whitespace-nowrap px-2 py-2 text-sm text-gray-500;
     }
   }
 
   .form-field {
-    @apply relative border border-alpha-black-100 bg-white rounded-md shadow-xs;
-    @apply focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100;
+    @apply relative rounded-md border bg-white border-alpha-black-100 shadow-xs;
+    @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100;
   }
 
   .form-field__label {
-    @apply px-3 pt-2 pb-0 block text-xs text-gray-500;
+    @apply block px-3 pt-2 pb-0 text-xs text-gray-500;
   }
 
   .form-field__input {
-    @apply px-3 pb-2 pt-1 text-sm w-full bg-transparent border-none opacity-100;
-    @apply focus:outline-none focus:ring-0 focus:opacity-100;
+    @apply w-full border-none bg-transparent px-3 pt-1 pb-2 text-sm opacity-100;
+    @apply focus:opacity-100 focus:outline-none focus:ring-0;
     @apply placeholder-shown:opacity-50;
     @apply disabled:opacity-50;
   }
@@ -53,12 +53,34 @@
   }
 
   .form-field__submit {
-    @apply w-full p-3 text-center text-white bg-black rounded-lg cursor-pointer hover:bg-gray-700;
+    @apply w-full cursor-pointer rounded-lg bg-black p-3 text-center text-white hover:bg-gray-700;
   }
 
   input:checked + label + .toggle-switch-dot {
     transform: translateX(100%);
   }
+
+  [type='checkbox'].maybe-checkbox {
+    @apply rounded-sm;
+  }
+
+  [type='checkbox'].maybe-checkbox--light {
+    @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500;
+  }
+
+  [type='checkbox'].maybe-checkbox--dark {
+    @apply ring-gray-900 checked:text-white;
+  }
+
+  [type='checkbox'].maybe-checkbox--dark:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  }
+
+  .maybe-switch {
+    @apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer;
+    @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out;
+    @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
+  }
 }
 
 /* Small, single purpose classes that should take precedence over other styles */

app/controllers/transactions_controller.rb

@@ -52,6 +52,24 @@ class TransactionsController < ApplicationController
     redirect_to transactions_url, notice: t(".success")
   end
 
+  def bulk_delete
+    destroyed = Current.family.transactions.destroy_by(id: bulk_delete_params[:transaction_ids])
+    redirect_to transactions_url, notice: t(".success", count: destroyed.count)
+  end
+
+  def bulk_edit
+  end
+
+  def bulk_update
+    transactions = Current.family.transactions.where(id: bulk_update_params[:transaction_ids])
+    if transactions.update_all(bulk_update_params.except(:transaction_ids).to_h.compact_blank!)
+      redirect_to transactions_url, notice: t(".success", count: transactions.count)
+    else
+      flash.now[:error] = t(".failure")
+      render :index, status: :unprocessable_entity
+    end
+  end
+
   private
 
     def set_transaction
@@ -70,11 +88,19 @@ class TransactionsController < ApplicationController
       params[:transaction][:nature].to_s.inquiry
     end
 
+    def bulk_delete_params
+      params.require(:bulk_delete).permit(transaction_ids: [])
+    end
+
+    def bulk_update_params
+      params.require(:bulk_update).permit(:date, :notes, :excluded, :category_id, :merchant_id, transaction_ids: [])
+    end
+
     def search_params
       params.fetch(:q, {}).permit(:start_date, :end_date, :search, accounts: [], account_ids: [], categories: [], merchants: [])
     end
 
     def transaction_params
-      params.require(:transaction).permit(:name, :date, :amount, :currency, :notes, :excluded, :category_id, :merchant_id, tag_ids: [], taggings_attributes: [ :id, :tag_id, :_destroy ])
+      params.require(:transaction).permit(:name, :date, :amount, :currency, :notes, :excluded, :category_id, :merchant_id, tag_ids: [])
     end
 end

app/javascript/controllers/bulk_select_controller.js

@@ -0,0 +1,126 @@
+import {Controller} from "@hotwired/stimulus"
+
+// Connects to data-controller="bulk-select"
+export default class extends Controller {
+  static targets = ["row", "group", "selectionBar", "selectionBarText", "bulkEditDrawerTitle"]
+  static values = {
+    resource: String,
+    selectedIds: {type: Array, default: []}
+  }
+
+  connect() {
+    document.addEventListener("turbo:load", this.#updateView)
+
+    this.#updateView()
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:load", this.#updateView)
+  }
+
+  bulkEditDrawerTitleTargetConnected(element) {
+    element.innerText = `Edit ${this.selectedIdsValue.length} ${this.#pluralizedResourceName()}`
+  }
+
+  submitBulkRequest(e) {
+    const form = e.target.closest("form");
+    const scope = e.params.scope
+    this.#addHiddenFormInputsForSelectedIds(form, `${scope}[transaction_ids][]`, this.selectedIdsValue)
+    form.requestSubmit()
+  }
+
+  togglePageSelection(e) {
+    if (e.target.checked) {
+      this.#selectAll()
+    } else {
+      this.deselectAll()
+    }
+  }
+
+  toggleGroupSelection(e) {
+    const group = this.groupTargets.find(group => group.contains(e.target))
+
+    this.#rowsForGroup(group).forEach(row => {
+      if (e.target.checked) {
+        this.#addToSelection(row.dataset.id)
+      } else {
+        this.#removeFromSelection(row.dataset.id)
+      }
+    })
+  }
+
+  toggleRowSelection(e) {
+    if (e.target.checked) {
+      this.#addToSelection(e.target.dataset.id)
+    } else {
+      this.#removeFromSelection(e.target.dataset.id)
+    }
+  }
+
+  deselectAll() {
+    this.selectedIdsValue = []
+  }
+
+  selectedIdsValueChanged() {
+    this.#updateView()
+  }
+
+  #addHiddenFormInputsForSelectedIds(form, paramName, transactionIds) {
+    transactionIds.forEach(id => {
+      const input = document.createElement("input");
+      input.type = 'hidden'
+      input.name = paramName
+      input.value = id
+      form.appendChild(input)
+    })
+  }
+
+  #rowsForGroup(group) {
+    return this.rowTargets.filter(row => group.contains(row))
+  }
+
+  #addToSelection(idToAdd) {
+    this.selectedIdsValue = Array.from(
+      new Set([...this.selectedIdsValue, idToAdd])
+    )
+  }
+
+  #removeFromSelection(idToRemove) {
+    this.selectedIdsValue = this.selectedIdsValue.filter(id => id !== idToRemove)
+  }
+
+  #selectAll() {
+    this.selectedIdsValue = this.rowTargets.map(t => t.dataset.id)
+  }
+
+  #updateView = () => {
+    this.#updateSelectionBar()
+    this.#updateGroups()
+    this.#updateRows()
+  }
+
+  #updateSelectionBar() {
+    const count = this.selectedIdsValue.length
+    this.selectionBarTextTarget.innerText = `${count} ${this.#pluralizedResourceName()} selected`
+    this.selectionBarTarget.hidden = count === 0
+    this.selectionBarTarget.querySelector("input[type='checkbox']").checked = count > 0
+  }
+
+  #pluralizedResourceName() {
+    return `${this.resourceValue}${this.selectedIdsValue.length === 1 ? "" : "s"}`
+  }
+
+  #updateGroups() {
+    this.groupTargets.forEach(group => {
+      const rows = this.rowTargets.filter(row => group.contains(row))
+      const groupSelected = rows.every(row => this.selectedIdsValue.includes(row.dataset.id))
+      group.querySelector("input[type='checkbox']").checked = groupSelected
+    })
+  }
+
+  #updateRows() {
+    this.rowTargets.forEach(row => {
+      row.checked = this.selectedIdsValue.includes(row.dataset.id)
+    })
+  }
+}

app/views/accounts/_transactions.html.erb

@@ -13,7 +13,7 @@
   <% else %>
     <div class="space-y-6">
       <% transactions.group_by(&:date).each do |date, transactions| %>
-        <%= transactions_group(date, transactions) %>
+        <%= transactions_group(date, transactions, "accounts/transactions/transaction") %>
       <% end %>
     </div>
   <% end %>

app/views/accounts/transactions/_transaction.html.erb

@@ -0,0 +1,17 @@
+<%= turbo_frame_tag dom_id(transaction), class: "grid grid-cols-12 items-center text-gray-900 py-4 text-sm font-medium px-4" do %>
+  <div class="col-span-4">
+    <%= render "transactions/name", transaction: transaction %>
+  </div>
+
+  <div class="col-span-3">
+    <%= render "transactions/categories/badge", category: transaction.category %>
+  </div>
+
+  <%= link_to transaction.account.name,
+              account_path(transaction.account),
+              class: ["col-span-3 hover:underline"] %>
+
+  <div class="col-span-2 ml-auto">
+    <%= render "transactions/amount", transaction: transaction %>
+  </div>
+<% end %>

app/views/transactions/_date_group.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (date:, transactions:) %>
+<div class="bg-gray-25 rounded-xl p-1 w-full" data-bulk-select-target="group">
+  <div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-gray-500">
+    <div class="flex pl-0.5 items-center gap-4">
+      <%= check_box_tag "#{date}_transactions_selection",
+                        class: "maybe-checkbox maybe-checkbox--light",
+                        id: "selection_transaction_#{date}",
+                        data: { action: "bulk-select#toggleGroupSelection" } %>
+      <%= tag.span "#{date.strftime('%b %d, %Y')} · #{transactions.size}" %>
+    </div>
+
+    <%= tag.span format_money(-transactions.sum(&:amount_money)) %>
+  </div>
+  <div class="bg-white shadow-xs rounded-md border border-alpha-black-25 divide-y divide-alpha-black-50">
+    <%= render transactions %>
+  </div>
+</div>

app/views/transactions/_selection_bar.html.erb

@@ -0,0 +1,24 @@
+<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
+  <div class="flex items-center gap-2">
+    <%= check_box_tag "transaction_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
+
+    <p data-bulk-select-target="selectionBarText"></p>
+  </div>
+
+  <div class="flex items-center gap-1 text-gray-500">
+    <%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
+
+    <%= link_to bulk_edit_transactions_path,
+                class: "p-1.5 group hover:bg-gray-700 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" %>
+    <% end %>
+
+    <%= form_with url: bulk_delete_transactions_path, builder: ActionView::Helpers::FormBuilder, data: { turbo_confirm: true } 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>
+    <% end %>
+  </div>
+</div>

app/views/transactions/_transaction.html.erb

@@ -1,5 +1,9 @@
 <%= turbo_frame_tag dom_id(transaction), class: "grid grid-cols-12 items-center text-gray-900 py-4 text-sm font-medium px-4" do %>
-  <div class="col-span-4">
+  <div class="col-span-4 flex items-center gap-4">
+    <%= check_box_tag dom_id(transaction, "selection"),
+                      class: "maybe-checkbox maybe-checkbox--light",
+                      data: { id: transaction.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
+
     <%= render "transactions/name", transaction: transaction %>
   </div>
 

app/views/transactions/bulk_edit.html.erb

@@ -0,0 +1,80 @@
+<%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
+  <dialog data-controller="modal"
+          data-action="click->modal#clickOutside"
+          class="bg-white border border-alpha-black-25 rounded-2xl max-h-[calc(100vh-32px)] max-w-[480px] w-full shadow-xs h-full mt-4 mr-4">
+    <%= form_with url: bulk_update_transactions_path, scope: "bulk_update", html: { class: "h-full" }, data: { turbo_frame: "_top" } do |form| %>
+      <div class="flex h-full flex-col justify-between p-4">
+        <div>
+          <div class="flex h-9 items-center justify-end">
+            <div data-action="click->modal#close" class="cursor-pointer">
+              <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
+            </div>
+          </div>
+
+          <div class="flex flex-col overflow-scroll">
+            <div>
+              <header class="mb-4 space-y-1">
+                <h3 class="text-2xl font-medium" data-bulk-select-target="bulkEditDrawerTitle">
+                  Edit transactions
+                </h3>
+              </header>
+
+              <div class="space-y-2">
+                <details class="group space-y-2" open>
+                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+                    <h4><%= t(".overview") %></h4>
+                    <%= 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.date_field :date, label: t(".date"), max: Date.current %>
+                    <%= form.collection_select :category_id, Current.family.transaction_categories, :id, :name, { prompt: t(".select_category"), label: t(".category"), class: "text-gray-400" } %>
+                    <%= form.collection_select :merchant_id, Current.family.transaction_merchants, :id, :name, { prompt: t(".select_merchant"), label: t(".merchant"), class: "text-gray-400" } %>
+                  </div>
+                </details>
+
+                <details class="group space-y-2" open>
+                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+                    <h4><%= t(".additional") %></h4>
+                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+                  </summary>
+
+                  <div>
+                    <%= form.text_area :notes, label: t(".note"), placeholder: t(".note_placeholder"), rows: 5 %>
+                  </div>
+                </details>
+
+                <details class="group space-y-2" open>
+                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+                    <h4><%= t(".settings") %></h4>
+                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+                  </summary>
+
+                  <div class="flex cursor-pointer items-center justify-between gap-4 p-3 pb-6">
+                    <div class="text-sm space-y-1">
+                      <h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
+                      <p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
+                    </div>
+
+                    <div class="relative inline-block select-none">
+                      <%= form.check_box :excluded, class: "sr-only peer" %>
+                      <label for="bulk_update_excluded" class="maybe-switch"></label>
+                    </div>
+                  </div>
+                </details>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end items-center gap-2">
+          <%= link_to t(".cancel"), transactions_path, class: "text-sm font-medium text-gray-900 px-3 py-2" %>
+
+          <%= tag.button t(".save"),
+                         type: "button",
+                         data: { "bulk-select-scope-param": "bulk_update", action: "bulk-select#submitBulkRequest" },
+                         class: "px-3 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg" %>
+        </div>
+      </div>
+    <% end %>
+  </dialog>
+<% end %>

app/views/transactions/index.html.erb

@@ -1,23 +1,32 @@
 <div class="space-y-4">
-
   <%= render "header" %>
 
   <%= render partial: "transactions/summary", locals: { totals: @totals } %>
 
-  <div id="transactions" class="bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4 space-y-4">
+  <div id="transactions" data-controller="bulk-select" data-bulk-select-resource-value="<%= t(".transaction") %>" class="bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4 space-y-4">
 
     <%= render partial: "transactions/searches/search", locals: { transactions: @transactions } %>
 
     <% if @transactions.present? %>
+      <div hidden id="transaction-selection-bar" data-bulk-select-target="selectionBar">
+        <%= render "selection_bar" %>
+      </div>
+
       <div class="grid grid-cols-12 bg-gray-25 rounded-xl px-5 py-3 text-xs uppercase font-medium text-gray-500 items-center mb-4">
-        <p class="col-span-4">transaction</p>
+        <div class="pl-0.5 col-span-4 flex items-center gap-4">
+          <%= check_box_tag "selection_transaction",
+                            class: "maybe-checkbox maybe-checkbox--light",
+                            data: { action: "bulk-select#togglePageSelection" } %>
+          <p class="col-span-4">transaction</p>
+        </div>
+
         <p class="col-span-3 pl-4">category</p>
         <p class="col-span-3">account</p>
         <p class="col-span-2 justify-self-end">amount</p>
       </div>
       <div class="space-y-6">
         <% @transactions.group_by(&:date).each do |date, transactions| %>
-          <%= transactions_group(date, transactions) %>
+          <%= render partial: "date_group", locals: { date:, transactions: } %>
         <% end %>
       </div>
     <% else %>

app/views/transactions/show.html.erb

@@ -1,81 +1,105 @@
 <%= drawer do %>
-  <h3 class="font-medium mb-1">
-    <span class="text-2xl"><%= format_money @transaction.amount_money %></span>
-    <span class="text-lg text-gray-500"><%= @transaction.currency %></span>
-  </h3>
-  <span class="text-sm text-gray-500"><%= @transaction.date.strftime("%A %d %B") %></span>
+  <div>
+    <header class="mb-4 space-y-1">
+      <h3 class="font-medium">
+        <span class="text-2xl"><%= format_money @transaction.amount_money %></span>
+        <span class="text-lg text-gray-500"><%= @transaction.currency %></span>
+      </h3>
 
-  <details class="group" open>
-    <summary class="list-none bg-gray-25 rounded-xl py-1 mt-4 group-open:mb-2">
-      <div class="py-2 px-[11px] flex items-center justify-between font-medium text-xs text-gray-500">
-        Overview
-        <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
-        <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
-      </div>
-    </summary>
-    <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
-      <div class="space-y-2">
-        <%= f.date_field :date, label: "Date", max: Date.today, "data-auto-submit-form-target": "auto" %>
-        <%= f.collection_select :category_id, Current.family.transaction_categories, :id, :name, { prompt: "Select a category", label: "Category", class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
-        <%= f.collection_select :account_id, Current.family.accounts, :id, :name, { prompt: "Select an Account", label: "Account", class: "text-gray-500" }, { class: "form-field__input cursor-not-allowed text-gray-400", disabled: "disabled" } %>
-      </div>
-    <% end %>
-  </details>
-  <details class="group" open>
-    <summary class="list-none bg-gray-25 rounded-xl py-1 mt-6 group-open:mb-2">
-      <div class="py-2 px-[11px] flex items-center justify-between font-medium text-xs text-gray-500">
-        Description
-        <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
-        <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
-      </div>
-    </summary>
-    <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
-      <%= f.text_field :name, label: "Name", "data-auto-submit-form-target": "auto" %>
-    <% end %>
-  </details>
-  <details class="group" open>
-    <summary class="list-none bg-gray-25 rounded-xl py-1 mt-6 group-open:mb-2">
-      <div class="py-2 px-[11px] flex items-center justify-between font-medium text-xs text-gray-500">
-        <span>Settings</span>
-        <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
-        <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
-      </div>
-    </summary>
-    <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
-      <label class="flex items-center cursor-pointer justify-between mx-3">
-        <%= f.check_box :excluded, class: "sr-only peer", "data-auto-submit-form-target": "auto" %>
-        <div class="flex flex-col justify-center text-sm w-[340px] py-3">
-          <span class="text-gray-900 mb-1">Exclude from analytics</span>
-          <span class="text-gray-500">This excludes the transaction from any in-app features or analytics.</span>
+      <span class="text-sm text-gray-500"><%= @transaction.date.strftime("%A %d %B") %></span>
+    </header>
+
+    <div class="space-y-2">
+      <details class="group space-y-2" open>
+        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+          <h4><%= t(".overview") %></h4>
+          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+        </summary>
+
+        <div class="pb-6">
+          <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
+            <div class="space-y-2">
+              <%= f.date_field :date, label: "Date", max: Date.today, "data-auto-submit-form-target": "auto" %>
+              <%= f.collection_select :category_id, Current.family.transaction_categories, :id, :name, { prompt: "Select a category", label: "Category", class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
+              <%= f.collection_select :account_id, Current.family.accounts, :id, :name, { prompt: "Select an Account", label: "Account", class: "text-gray-500" }, { class: "form-field__input cursor-not-allowed text-gray-400", disabled: "disabled" } %>
+            </div>
+          <% end %>
         </div>
-        <div class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-      </label>
-    <% end %>
-  </details>
-  <details class="group" open>
-    <summary class="list-none bg-gray-25 rounded-xl py-1 mt-6 mb-2">
-      <div class="py-2 px-[11px] flex items-center justify-between font-medium text-xs text-gray-500">
-        <span>Additional</span>
-        <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
-        <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
-      </div>
-    </summary>
+      </details>
 
-    <div class="mb-2">
-      <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
-        <%= f.select :tag_ids,
-                     options_for_select(Current.family.tags.alphabetically.pluck(:name, :id), @transaction.tag_ids),
-                     {
-                       multiple: true,
-                       label: t(".select_tags"),
-                       class: "placeholder:text-gray-500"
-                     },
-                     "data-auto-submit-form-target": "auto" %>
-      <% end %>
+      <details class="group space-y-2" open>
+        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+          <h4><%= t(".description") %></h4>
+          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+        </summary>
+
+        <div class="pb-6">
+          <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
+            <%= f.text_field :name, label: "Name", "data-auto-submit-form-target": "auto" %>
+          <% end %>
+        </div>
+      </details>
+
+      <details class="group space-y-2" open>
+        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+          <h4><%= t(".additional") %></h4>
+          <%= 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: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
+            <%= f.select :tag_ids,
+                         options_for_select(Current.family.tags.alphabetically.pluck(:name, :id), @transaction.tag_ids),
+                         {
+                           multiple: true,
+                           label: t(".select_tags"),
+                           class: "placeholder:text-gray-500"
+                         },
+                         "data-auto-submit-form-target": "auto" %>
+          <% end %>
+
+          <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
+            <%= f.text_area :notes, label: "Notes", placeholder: "Enter a note", "data-auto-submit-form-target": "auto" %>
+          <% end %>
+        </div>
+      </details>
+
+      <details class="group space-y-2" open>
+        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
+          <h4><%= t(".settings") %></h4>
+          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+        </summary>
+
+        <div class="pb-6">
+
+          <%= form_with model: @transaction, html: { class: "p-3", data: { controller: "auto-submit-form" } } do |f| %>
+            <div class="flex cursor-pointer items-center justify-between">
+              <div class="text-sm space-y-1">
+                <h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
+                <p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
+              </div>
+
+              <div class="relative inline-block select-none">
+                <%= f.check_box :excluded, class: "sr-only peer", "data-auto-submit-form-target": "auto" %>
+                <label for="transaction_excluded" class="maybe-switch"></label>
+              </div>
+            </div>
+          <% end %>
+
+          <div class="flex items-center justify-between gap-2 p-3">
+            <div class="text-sm space-y-1">
+              <h4 class="text-gray-900"><%= t(".delete_title") %></h4>
+              <p class="text-gray-500"><%= t(".delete_subtitle") %></p>
+            </div>
+
+            <%= button_to t(".delete"),
+                          transaction_path(@transaction),
+                          method: :delete,
+                          class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-alpha-black-200",
+                          data: { turbo_confirm: true, turbo_frame: "_top" } %>
+          </div>
+        </div>
+      </details>
     </div>
-
-    <%= form_with model: @transaction, html: { data: { controller: "auto-submit-form" } } do |f| %>
-      <%= f.text_area :notes, label: "Notes", placeholder: "Enter a note", "data-auto-submit-form-target": "auto" %>
-    <% end %>
-  </details>
+  </div>
 <% end %>

config/initializers/version.rb

@@ -10,7 +10,7 @@ module Maybe
 
     private
       def semver
-        "0.1.0-alpha.4"
+        "0.1.0-alpha.5"
       end
   end
 end

config/locales/views/transactions/en.yml

@@ -1,6 +1,27 @@
 ---
 en:
   transactions:
+    bulk_delete:
+      success: "%{count} transactions deleted"
+    bulk_edit:
+      additional: Additional
+      cancel: Cancel
+      category: Category
+      date: Date
+      exclude_subtitle: This excludes the transaction from any in-app features or
+        analytics.
+      exclude_title: Exclude transaction
+      merchant: Merchant
+      note: Notes
+      note_placeholder: Enter a note that will be applied to selected transactions
+      overview: Overview
+      save: Save
+      select_category: Select a category
+      select_merchant: Select a merchant
+      settings: Settings
+    bulk_update:
+      failure: Could not update transactions
+      success: "%{count} transactions updated"
     categories:
       create:
         success: New transaction category created successfully
@@ -66,6 +87,8 @@ en:
       edit_categories: Edit categories
       edit_imports: Edit imports
       import: Import
+    index:
+      transaction: transaction
     merchants:
       create:
         success: New merchant created successfully
@@ -94,6 +117,17 @@ en:
       update:
         success: Merchant updated successfully
     show:
+      additional: Additional
+      delete: Delete
+      delete_subtitle: This permanently deletes the transaction, affects your historical
+        balances, and cannot be undone.
+      delete_title: Delete transaction
+      description: Description
+      exclude_subtitle: This excludes the transaction from any in-app features or
+        analytics.
+      exclude_title: Exclude transaction
+      overview: Overview
       select_tags: Select one or more tags
+      settings: Settings
     update:
       success: Transaction updated successfully

config/routes.rb

@@ -43,7 +43,9 @@ Rails.application.routes.draw do
 
   resources :transactions do
     collection do
-      match "search" => "transactions#search", via: %i[ get post ]
+      post "bulk_delete"
+      get "bulk_edit"
+      post "bulk_update"
 
       scope module: :transactions, as: :transaction do
         resources :rows, only: %i[ show update ]

test/controllers/transactions_controller_test.rb

@@ -97,13 +97,16 @@ class TransactionsControllerTest < ActionDispatch::IntegrationTest
 
   test "incomes are negative" do
     assert_difference("Transaction.count") do
-      post transactions_url, params: { transaction: {
-        nature: "income",
-        account_id: @transaction.account_id,
-        amount: @transaction.amount,
-        currency: @transaction.currency,
-        date: @transaction.date,
-        name: @transaction.name } }
+      post transactions_url, params: {
+        transaction: {
+          nature: "income",
+          account_id: @transaction.account_id,
+          amount: @transaction.amount,
+          currency: @transaction.currency,
+          date: @transaction.date,
+          name: @transaction.name
+        }
+      }
     end
 
     assert_redirected_to transactions_url
@@ -122,7 +125,8 @@ class TransactionsControllerTest < ActionDispatch::IntegrationTest
         amount: @transaction.amount,
         currency: @transaction.currency,
         date: @transaction.date,
-        name: @transaction.name
+        name: @transaction.name,
+        tag_ids: [ Tag.first.id, Tag.second.id ]
       }
     }
 
@@ -138,4 +142,48 @@ class TransactionsControllerTest < ActionDispatch::IntegrationTest
     assert_redirected_to transactions_url
     assert_enqueued_with(job: AccountSyncJob)
   end
+
+  test "can destroy many transactions at once" do
+    delete_count = 10
+    assert_difference("Transaction.count", -delete_count) do
+      post bulk_delete_transactions_url, params: { bulk_delete: { transaction_ids: @recent_transactions.first(delete_count).pluck(:id) } }
+    end
+
+    assert_redirected_to transactions_url
+    assert_equal "10 transactions deleted", flash[:notice]
+  end
+
+  test "can update many transactions at once" do
+    transactions = @user.family.transactions.ordered.limit(20)
+
+    transactions.each do |transaction|
+      transaction.update! \
+        excluded: false,
+        category_id: Transaction::Category.first.id,
+        merchant_id: Transaction::Merchant.first.id,
+        notes: "Starting note"
+    end
+
+    post bulk_update_transactions_url, params: {
+      bulk_update: {
+        date: Date.current,
+        transaction_ids: transactions.map(&:id),
+        excluded: true,
+        category_id: Transaction::Category.second.id,
+        merchant_id: Transaction::Merchant.second.id,
+        notes: "Updated note"
+      }
+    }
+
+    assert_redirected_to transactions_url
+    assert_equal "#{transactions.count} transactions updated", flash[:notice]
+
+    transactions.reload.each do |transaction|
+      assert_equal Date.current, transaction.date
+      assert transaction.excluded
+      assert_equal Transaction::Category.second, transaction.category
+      assert_equal Transaction::Merchant.second, transaction.merchant
+      assert_equal "Updated note", transaction.notes
+    end
+  end
 end

test/system/transactions_test.rb

@@ -4,6 +4,7 @@ class TransactionsTest < ApplicationSystemTestCase
   setup do
     sign_in @user = users(:family_admin)
 
+    @latest_transactions = @user.family.transactions.ordered.limit(20).to_a
     @test_category = @user.family.transaction_categories.create! name: "System Test Category"
     @test_merchant = @user.family.transaction_merchants.create! name: "System Test Merchant"
     @target_txn = @user.family.accounts.first.transactions.create! \
@@ -91,4 +92,70 @@ class TransactionsTest < ApplicationSystemTestCase
 
     assert_selector "#" + dom_id(@user.family.transactions.ordered.first), count: 1
   end
+
+  test "can select and deselect entire page of transactions" do
+    all_transactions_checkbox.check
+    assert_selection_count(number_of_transactions_on_page)
+    all_transactions_checkbox.uncheck
+    assert_selection_count(0)
+  end
+
+  test "can select and deselect groups of transactions" do
+    date_transactions_checkbox(12.days.ago.to_date).check
+    assert_selection_count(3)
+    date_transactions_checkbox(12.days.ago.to_date).uncheck
+    assert_selection_count(0)
+  end
+
+  test "can select and deselect individual transactions" do
+    transaction_checkbox(@latest_transactions.first).check
+    assert_selection_count(1)
+    transaction_checkbox(@latest_transactions.second).check
+    assert_selection_count(2)
+    transaction_checkbox(@latest_transactions.second).uncheck
+    assert_selection_count(1)
+  end
+
+  test "outermost group always overrides inner selections" do
+    transaction_checkbox(@latest_transactions.first).check
+    assert_selection_count(1)
+    all_transactions_checkbox.check
+    assert_selection_count(number_of_transactions_on_page)
+    transaction_checkbox(@latest_transactions.first).uncheck
+    assert_selection_count(number_of_transactions_on_page - 1)
+    date_transactions_checkbox(12.days.ago.to_date).uncheck
+    assert_selection_count(number_of_transactions_on_page - 4)
+    all_transactions_checkbox.uncheck
+    assert_selection_count(0)
+  end
+
+  private
+
+    def number_of_transactions_on_page
+      page_size = 50
+
+      [ @user.family.transactions.count, page_size ].min
+    end
+
+    def all_transactions_checkbox
+      find("#selection_transaction")
+    end
+
+    def date_transactions_checkbox(date)
+      find("#selection_transaction_#{date}")
+    end
+
+    def transaction_checkbox(transaction)
+      find("#" + dom_id(transaction, "selection"))
+    end
+
+    def assert_selection_count(count)
+      if count == 0
+        assert_no_selector("#transaction-selection-bar")
+      else
+        within "#transaction-selection-bar" do
+          assert_text "#{count} transaction#{count == 1 ? "" : "s"} selected"
+        end
+      end
+    end
 end