[Team] Invite flow redesign

app/views/events/team.html.erb

@@ -25,20 +25,6 @@
   <% end %>
 
   <% if policy(@event).can_invite_user? %>
-    <action type="button" class="pop menu__toggle" data-behavior="menu_toggle" aria-expanded="false" tabindex="0">
-      <%= inline_icon "link" %>
-      <div class="menu__content" data-behavior="menu_content">
-        <%= link_to event_invite_links_path(event_id: @event.slug),
-          data: { behavior: "modal_trigger", modal: "view_invite_links" } do %>
-          View invite links
-        <% end %>
-        <%= link_to new_event_invite_link_path(@event),
-          data: { behavior: "modal_trigger", modal: "new_invite_link" } do %>
-          Create new invite link
-        <% end %>
-      </div>
-    </action>
-
     <%= link_to new_event_organizer_position_invite_path(event_id: @event.slug), class: "btn bg-success", data: { behavior: "modal_trigger", modal: "invite_member" }, disabled: !organizer_signed_in?(as: :manager) do %>
       <%= inline_icon "member-add" %>
       Invite
@@ -186,20 +172,14 @@
 <% if policy(@event).can_invite_user? %>
   <section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="invite_member">
     <%= modal_header "Invite a team member" %>
-    <%= render "organizer_position_invites/form", invite: OrganizerPositionInviteService::Create.new(event: @event).model %>
-  </section>
-<% end %>
-
-<% if policy(@event).can_invite_user? %>
-  <section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="view_invite_links">
-    <%= modal_header "Active invite links" %>
 
+    <h3 class="mb-0 mb-2 flex items-center justify-between">
+      Links
+      <%= render "organizer_position_invite/links/form", event: @event %>
+    </h3>
     <%= render "organizer_position_invite/links/link_list", event: @event, invite_links: @invite_links %>
-  </section>
-
-  <section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="new_invite_link">
-    <%= modal_header "New invite link" %>
 
-    <%= render "organizer_position_invite/links/form", event: @event %>
+    <h3 class="mt-10 mb-2">Email</h3>
+    <%= render "organizer_position_invites/form", invite: OrganizerPositionInviteService::Create.new(event: @event).model %>
   </section>
 <% end %>

app/views/organizer_position_invite/links/_form.html.erb

@@ -1,10 +1,20 @@
 <%# locals: (event:) %>
 
-<%= form_with(url: event_invite_links_path(event_id: event.id)) do |form| %>
-  <div class="field">
-    <%= form.label :expires_at, "Expires on" %>
-    <%= form.date_field :expires_on, value: OrganizerPositionInvite::Link::DEFAULT_EXPIRATION.from_now.strftime("%Y-%m-%d") %>
+<div data-controller="menu" data-menu-placement-value="bottom-end">
+  <button
+    type="button"
+    class="btn btn-small menu__toggle menu__toggle--arrowless overflow-visible"
+    data-menu-target="toggle" data-action="menu#toggle click@document->menu#close keydown@document->menu#keydown">
+    <%= inline_icon "add", size: 28 %>
+    Create
+  </button>
+  <div class="menu__content menu__content--2 menu__content--compact h5 p-3" data-menu-target="content">
+    <%= form_with(url: event_invite_links_path(event_id: event.id)) do |form| %>
+      <div class="field">
+        <%= form.label :expires_at, "Expires on" %>
+        <%= form.date_field :expires_on, class: "!max-w-full w-full", value: OrganizerPositionInvite::Link::DEFAULT_EXPIRATION.from_now.strftime("%Y-%m-%d") %>
+      </div>
+      <%= form.submit "Continue", class: "btn -mt-1 w-full" %>
+    <% end %>
   </div>
-
-  <%= form.submit "Create", class: "btn" %>
-<% end %>
+</div>

app/views/organizer_position_invite/links/_link_list.html.erb

@@ -3,29 +3,38 @@
 <% if invite_links.empty? %>
   <p><%= event.name %> does not currently have any active invite links</p>
 <% else %>
-  <ul class="grid grid-cols-1 text-left w-full mt-2">
-    <% invite_links.each do |link| %>
-      <li class="overflow-visible card flex flex-row justify-between items-center gap-2">
-        <span class="w-full flex gap-2 items-center align-middle">
-            <div class="flex flex-col">
-              <p class="my-0 font-bold"><%= link_to link_url(link), link_url(link) %></p>
-              <p class="my-0">Created by <%= user_mention link.creator %> on <%= link.created_at.strftime("%B %e, %Y") %></p>
-              <p class="my-0">Expires in <%= distance_of_time_in_words(Time.now, link.expires_in.seconds.from_now) %></p>
-              <p class="my-0">Used <%= pluralize(link.requests.size, "times") %></p>
-            </div>
-            <div class="flex-grow"></div>
-            <%= pop_icon_to "view-close-small",
-                            deactivate_link_path(link),
-                            class: "error tooltipped",
-                            data: {
-                              turbo_frame: "_top",
-                              turbo_method: :post,
-                              turbo_confirm: "Are you sure you want to deactivate this invite link?",
-                            },
-                            "aria-label": "Deactivate invite link",
-                            disabled: !policy(link).deactivate? %>
-        </span>
-      </li>
-    <% end %>
-  </ul>
+  <% invite_links.each do |link| %>
+    <div class="overflow-visible justify-between items-center gap-2">
+      <span class="w-full flex gap-2 items-center align-middle">
+          <div class="flex flex-col">
+            <%= link_to link_url(link), class: "gap-1 my-0 font-bold flex items-center" do %>
+              <%= link.hashid %>
+              <%= inline_icon "copy", size: 24 %>
+            <% end %>
+            <p class="my-0 mt-1 text-sm flex items-center gap-1 text-muted">
+              <%= user_mention link.creator %>
+              <span class="tooltipped -ml-1.5" aria-label="Created <%= link.created_at.strftime("%B %e, %Y") %>">
+                &bull; Expires <%= distance_of_time_in_words(Time.now, link.expires_in.seconds.from_now) %>
+              </span>
+            </p>
+          </div>
+          <div class="flex-grow"></div>
+          <div class="tooltipped flex items-center text-muted mr-2 cursor-pointer" aria-label="Used <%= pluralize(link.requests.size, "times") %>">
+              <%= inline_icon "link", size: 24 %>
+              <%= link.requests.size %>
+          </div>
+          <%= pop_icon_to "delete",
+                          deactivate_link_path(link),
+                          class: "error tooltipped",
+                          data: {
+                            turbo_frame: "_top",
+                            turbo_method: :post,
+                            turbo_confirm: "Are you sure you want to deactivate this invite link?",
+                          },
+                          "aria-label": "Deactivate invite link",
+                          disabled: !policy(link).deactivate? %>
+      </span>
+      <div class="menu__divider"></div>
+    </div>
+  <% end %>
 <% end %>

app/views/organizer_position_invites/_form.html.erb

@@ -2,10 +2,8 @@
   <%= form_errors invite, "user" %>
 
   <div class="field" x-data="{ email: '' }">
-    <%= form.label :email, class: "mb1" %>
-
     <div class="flex items-center">
-      <%= form.email_field :email, class: "mr1", "x-model": "email", placeholder: "[email protected]" %>
+      <%= form.email_field :email, class: "!max-w-full w-full", "x-model": "email", placeholder: "Email address" %>
     </div>
     <template x-if="/(team|webmaster|marketing|admin|info|about|support|sales|hello)/.test(email)">
       <div class="warning mt1">⚠️ For security, we discourage team emails on