Adds for later list items for members (#2020)

# What it does

This adds a saved for later page as well as buttons for adding/removing
items from a member's saved for later list.

I think this is a reasonable starting point for this feature and I'm
assuming it'll change a fair bit as we gather feedback before merging it
in (assuming we merge this in and don't just make a new PR, depending on
the feedback).

# Why it is important

I know some idea of this has been mentioned in stakeholder meetings
because some users will use holds to remind themselves of items they
need but don't otherwise have a way to save. So they make the hold and
then pass on the hold until they're ready to borrow it. This gives them
a place to save those items without messing with the loaning/holding
flow.

# UI Change Screenshot

I should note that users that are not signed in won't see any of these
buttons in the interface.

The for later page:
<img width="1004" height="966" alt="Screenshot 2025-11-01 at 5 16 14 PM"
src="https://github.com/user-attachments/assets/ac092e7f-1537-49cc-af50-762f1bef5138"
/>

The empty for later page:
<img width="988" height="259" alt="Screenshot 2025-11-01 at 5 15 15 PM"
src="https://github.com/user-attachments/assets/addd752f-7b88-4c71-8728-6e89d7fd08a8"
/>

The navigation:
<img width="256" height="272" alt="Screenshot 2025-11-01 at 5 22 59 PM"
src="https://github.com/user-attachments/assets/09fe5415-a281-436c-8298-4352e8323c15"
/>


Item details page when not wish listed:
<img width="1001" height="544" alt="Screenshot 2025-11-01 at 5 15 41 PM"
src="https://github.com/user-attachments/assets/8111d323-d6d6-41dc-8806-c2143e849327"
/>

Item details page when wish listed:
<img width="995" height="505" alt="Screenshot 2025-11-01 at 5 15 47 PM"
src="https://github.com/user-attachments/assets/47bd357c-55cf-4eab-af1f-f5ff830233d1"
/>

Items index page with a mix of wish listed and not wish listed items:
<img width="1033" height="806" alt="Screenshot 2025-11-01 at 5 15 29 PM"
src="https://github.com/user-attachments/assets/af15cfb6-7892-4e6d-8ab4-6d3951ae8ad4"
/>


# Implementation notes

~~I called it a "Wish List" but I don't think it would be so hard to
rename the concept. The public library refers to this feature as your
"For Later Shelf" but I wasn't sure that was right for this context. I
also thought about calling it "favorites" but to me that implied that it
would only be for tools you'd want to borrow over and over.~~

On the technical side, I implemented this with Turbo Streams so the
interface just automatically updates. If someone is browsing the site
without javascript turned on things should still work, they'll just be
redirected when they add or remove items.

In terms of styles I just use small buttons for adding/removing items.
The actual wish list page rips off a lot of markup from the index page.
I think a case could be made to make it a partial but imagine these
could end up diverging so I didn't want to start there.

**Update:** I've changed the model from `WishListItem` to
`ForLaterListItem`. Right now there isn't a `ForLaterList` model but I
think that would be simple enough to add later on (and convert the
current model into more of a join table). There are a lot of little UI
thinks to manage re multiple lists (when you click save is it a dropdown
of lists? a dialog? etc) so I think it's best to wait a bit on diving
into that.

Author: crismali

app/assets/stylesheets/application_styles.scss

@@ -184,6 +184,10 @@ $photo-width: 187px;
       justify-content: space-between;
     }
 
+    .for-later-list-button-container {
+      margin-block-start: 4px;
+    }
+
     .item-info {
       flex: 1;
     }
@@ -453,6 +457,21 @@ $min-width: variables.$size-md + 1;
   h1 {
     margin-bottom: 0.1em;
   }
+  h2 {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+  }
+
+  #for_later_list_item_show {
+    flex: 1;
+  }
+
+  #for_later_list_item_show form {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 .landing-page {

app/controllers/account/for_later_list_items_controller.rb

@@ -0,0 +1,54 @@
+module Account
+  class ForLaterListItemsController < BaseController
+    include Pagy::Backend
+
+    def index
+      scope = current_member.for_later_list_items.includes(item: [:borrow_policy, :active_holds, :checked_out_exclusive_loan, :categories]).strict_loading
+      @pagy, @for_later_list_items = pagy(scope, items: 20)
+    end
+
+    def create
+      for_later_list_item = ForLaterListItem.new(for_later_list_item_params)
+      for_later_list_item.member = current_member
+
+      for_later_list_item.save!
+
+      item = for_later_list_item.item
+
+      respond_to do |format|
+        format.html { redirect_to item_path(for_later_list_item.item) }
+        format.turbo_stream do
+          render turbo_stream: [
+            turbo_stream.replace("for_later_list_item_show", partial: "items/for_later_list_item_show", locals: {item:, for_later_list_item:}),
+            turbo_stream.replace("#{helpers.dom_id(item)}_for_later_list_items_index", partial: "items/for_later_list_items_index", locals: {item:, for_later_list_item:})
+          ]
+        end
+      end
+    end
+
+    def destroy
+      for_later_list_item = current_member.for_later_list_items.find(params.expect(:id))
+
+      for_later_list_item.destroy!
+
+      item = for_later_list_item.item
+
+      respond_to do |format|
+        format.html { redirect_to account_for_later_list_items_path }
+        format.turbo_stream do
+          render turbo_stream: [
+            turbo_stream.remove(helpers.dom_id(for_later_list_item)),
+            turbo_stream.replace("for_later_list_item_show", partial: "items/for_later_list_item_show", locals: {item:, for_later_list_item: nil}),
+            turbo_stream.replace("#{helpers.dom_id(item)}_for_later_list_items_index", partial: "items/for_later_list_items_index", locals: {item:, for_later_list_item: nil})
+          ]
+        end
+      end
+    end
+
+    private
+
+    def for_later_list_item_params
+      params.expect(for_later_list_item: [:item_id])
+    end
+  end
+end

app/controllers/items_controller.rb

@@ -18,6 +18,10 @@ def index
 
     @categories = CategoryNode.with_items
     @pagy, @items = pagy(item_scope)
+    @for_later_list_items_by_item_id = {}
+    if user_signed_in?
+      @for_later_list_items_by_item_id = current_member.for_later_list_items.where(item_id: @items.map(&:id)).group_by(&:item_id) || {}
+    end
 
     # Track that a search was performed if we are on the first page
     if @query && @pagy.page == 1

app/lib/feature_flags.rb

@@ -14,4 +14,8 @@ def self.new_appointments_page_enabled?(override = nil)
   def self.group_lending_enabled?
     ENV["FEATURE_GROUP_LENDING"] == "on"
   end
+
+  def self.for_later_lists_enabled?
+    ENV["FOR_LATER_LISTS"] == "on"
+  end
 end

app/models/for_later_list_item.rb

@@ -0,0 +1,6 @@
+class ForLaterListItem < ApplicationRecord
+  belongs_to :item
+  belongs_to :member
+
+  validates :item, uniqueness: {scope: :member}
+end

app/models/item.rb

@@ -47,6 +47,9 @@ def next_hold
   has_many :tickets, dependent: :destroy
   has_one :last_active_ticket, -> { active.newest_first }, class_name: "Ticket"
 
+  has_many :for_later_list_items, -> { order(created_at: :desc) }, dependent: :destroy
+  has_many :for_later_listed_members, through: :for_later_list_items, source: :member
+
   has_one_attached :image
 
   audited except: :plain_text_description

app/models/member.rb

@@ -22,6 +22,8 @@ class Member < ApplicationRecord
 
   belongs_to :user, optional: true
   has_many :notes, as: :notable
+  has_many :for_later_list_items, -> { order(created_at: :desc) }, dependent: :destroy
+  has_many :for_later_listed_items, through: :for_later_list_items, source: :item
 
   PRONOUNS = ["he/him", "she/her", "they/them"]
   enum :id_kind, {drivers_license: 0, state_id: 1, city_key: 2, student_id: 3, employee_id: 4, other_id_kind: 5}

app/views/account/for_later_list_items/index.html.erb

@@ -0,0 +1,54 @@
+<h1 class="title">Saved for later</h1>
+
+<% if @for_later_list_items.any? %>
+  <ul class="items-list">
+    <% @for_later_list_items.each do |for_later_list_item| %>
+      <% item = for_later_list_item.item %>
+      <li id="<%= dom_id(for_later_list_item) %>" class="item-container">
+        <% if item.image.attached? %>
+          <%= link_to item_path(item) do %>
+            <%= image_tag item_image_url(item.image, resize_to_limit: [200, 140]), alt: "" %>
+          <% end %>
+        <% else %>
+          <div class="item-image-placeholder"></div>
+        <% end %>
+
+        <div class="item-content">
+          <%= tag.div class: "item-info" do %>
+            <strong><%= link_to item.name, item_path(item), class: "item-name", id: "item-name-#{item.id}" %></strong>
+            <%= item_status_label(item) %>
+            <% if item.borrow_policy.requires_approval? %>
+              <span class="label label-secondary item-borrow-policy"><%= item.borrow_policy.code %>-Tool</span>
+            <% end %>
+            <% if item.active_holds.any? %>
+              <span class="text-small"><%= pluralize item.active_holds.size, "hold" %></span>
+            <% end %>
+            <br>
+            <strong><%= full_item_number(item) %></strong>
+            <% if item.size.present? %>
+              <span class="label"><%= item.size %></span>
+            <% end %>
+            <% if item.strength.present? %>
+              <span class="label"><%= item.strength %></span>
+            <% end %>
+            <br>
+
+            <%= tag.div [item.brand, item.model].select(&:present?).join(", ") %>
+            <%= button_to "Don't need it", account_for_later_list_item_path(for_later_list_item),
+                  method: :delete, class: "btn" %>
+          <% end %>
+
+          <%= tag.div class: "item-categories" do %>
+            <% item.categories.each do |category| %>
+              <%= link_to category.name, {category: category.id} %>
+            <% end %>
+          <% end %>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+
+  <%== pagy_bootstrap_nav(@pagy) %>
+<% else %>
+  <p>Your saved for later items will appear here. You can save items by <%= link_to "checking out our inventory", items_path %>.</p>
+<% end %>

app/views/items/_for_later_list_item_show.html.erb

@@ -0,0 +1,11 @@
+<% if FeatureFlags.for_later_lists_enabled? %>
+  <span id="for_later_list_item_show">
+    <% if for_later_list_item.present? %>
+      <%= button_to "Don't need it", account_for_later_list_item_path(for_later_list_item),
+            method: :delete, class: "btn" %>
+    <% else %>
+      <%= button_to "Save for later", account_for_later_list_items_path,
+            method: :post, class: "btn", params: {for_later_list_item: {item_id: item.id}} %>
+    <% end %>
+  </span>
+<% end %>

app/views/items/_for_later_list_items_index.html.erb

@@ -0,0 +1,11 @@
+<% if FeatureFlags.for_later_lists_enabled? %>
+  <div id="<%= "#{dom_id(item)}_for_later_list_items_index" %>" class="for-later-list-button-container">
+    <% if for_later_list_item.present? %>
+      <%= button_to "Don't need it", account_for_later_list_item_path(for_later_list_item),
+            method: :delete, class: "btn btn-sm" %>
+    <% else %>
+      <%= button_to "Save for later", account_for_later_list_items_path,
+            method: :post, class: "btn btn-sm", params: {for_later_list_item: {item_id: item.id}} %>
+    <% end %>
+  </div>
+<% end %>