From 806e1b2af2fe6f1ba816b9c3349d0deb6ca5022e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 5 Aug 2025 17:02:24 -0500
Subject: [PATCH] Simplify Name & Access on collection settings

---
 app/helpers/accesses_helper.rb             |  4 +-
 app/views/collections/edit.html.erb        | 10 ++--
 app/views/collections/edit/_users.html.erb | 54 ++++++++++------------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb
index d7f442114..b46f459c7 100644
--- a/app/helpers/accesses_helper.rb
+++ b/app/helpers/accesses_helper.rb
@@ -1,6 +1,6 @@
 module AccessesHelper
-  def access_menu_tag(collection, &)
-    tag.menu class: [ "flex flex-column gap-half unpad margin-none txt-medium", { "toggler--toggled": collection.all_access? } ], data: {
+  def access_menu_tag(collection, **options, &)
+    tag.menu class: [ options[:class], { "toggler--toggled": collection.all_access? } ], data: {
       controller: "filter toggle-class",
       toggle_class_toggle_class: "toggler--toggled" }, &
   end
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
index c06780237..8ee92d739 100644
--- a/app/views/collections/edit.html.erb
+++ b/app/views/collections/edit.html.erb
@@ -13,11 +13,13 @@
 <% end %>
 
 <section class="panels--two-up margin-block">
-  <div class="panel shadow center flex flex-column txt-normal">
-    <strong class="txt-large">Name and Access</strong>
-    <p class="margin-none-block-start">Choose who can access this Collection.</p>
-    <%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %>
+  <div class="panel shadow center flex flex-column gap">
+    <header>
+      <h2 class="divider txt-large">Name and Access</h2>
+      <div>Choose who can access this Collection</div>
+    </header>
 
+    <%= form_with model: @collection, class: "display-contents", data: { controller: "form" } do |form| %>
       <%= render "collections/edit/name", form: form %>
       <%= render "collections/edit/users", collection: @collection, selected_users: @selected_users, unselected_users: @unselected_users, form: form %>
 
diff --git a/app/views/collections/edit/_users.html.erb b/app/views/collections/edit/_users.html.erb
index 866b23655..cdbaa9cd4 100644
--- a/app/views/collections/edit/_users.html.erb
+++ b/app/views/collections/edit/_users.html.erb
@@ -1,33 +1,27 @@
-<section class="margin-block fill-shade border-radius">
-  <%= access_menu_tag collection do %>
-    <li class="flex align-center gap pad unpad-block-end txt-normal">
-      <figure class="avatar" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
-        <%= icon_tag "everyone" %>
-        <span class="for-screen-reader">Everyone</span>
-      </figure>
+<%= access_menu_tag collection, class: "flex flex-column gap pad fill-shade border-radius list-style-none full-width" do %>
+  <li class="flex align-center gap">
+    <figure class="avatar" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
+      <%= icon_tag "everyone" %>
+      <span class="for-screen-reader">Everyone</span>
+    </figure>
 
-      <div class="min-width">
-        <div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
-      </div>
-
-      <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
-
-      <label for="collection_all_access" class="switch">
-        <%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
-        <span class="switch__btn round"></span>
-        <span class="for-screen-reader">Give everyone access to this project</span>
-      </label>
-    </li>
-
-    <hr class="separator--horizontal margin-inline" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
-
-    <div class="pad-inline">
-      <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
+    <div class="min-width">
+      <div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
     </div>
 
-    <div data-filter-target="list" class="users-list pad-inline">
-      <%= access_toggles_for selected_users, selected: true %>
-      <%= access_toggles_for unselected_users, selected: false %>
-    </div>
-  <% end %>
-</section>
+    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
+
+    <label for="collection_all_access" class="switch">
+      <%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
+      <span class="switch__btn round"></span>
+      <span class="for-screen-reader">Give everyone access to this project</span>
+    </label>
+  </li>
+
+  <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
+
+  <div data-filter-target="list" class="users-list">
+    <%= access_toggles_for selected_users, selected: true %>
+    <%= access_toggles_for unselected_users, selected: false %>
+  </div>
+<% end %>