New menu filters and navigates

app/assets/stylesheets/popup.css

@@ -5,10 +5,11 @@
     --panel-size: auto;
 
     inline-size: auto;
-    inset: 0 auto auto 0;
+    inset: 0 auto auto 50%;
     min-inline-size: 20ch;
     max-inline-size: 40ch;
     position: absolute;
+    transform: translateX(-50%);
     z-index: 2;
 
     &[open] {
@@ -16,8 +17,19 @@
     }
   }
 
+  .popup__group {
+    background: var(--color-subtle-light);
+    padding-inline-start: var(--inline-space-half);
+    
+    @media (any-hover: hover) {
+      &:hover {
+        background: var(--color-selected);
+      }
+    }
+  }
+
   .popup__item {
-    --btn-background: var(--color-subtle-light);
+    --btn-background: transparent;
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
     --btn-font-weight: 500;
@@ -37,12 +49,6 @@
 
     }
 
-    @media (any-hover: hover) {
-      &:where(:not(:active):hover) {
-        --btn-background: var(--color-selected);
-      }
-    }
-
     &:has(input:checked)  {
       --btn-background: var(--color-selected);
       --btn-color: var(--color-ink);
@@ -82,3 +88,48 @@
     font-weight: 800;
   }
 }
+
+.popup--animated {
+  --backdrop-speed: 150ms;
+  --panel-size: max-content;
+  --speed: 150ms;
+
+  opacity: 0;
+  transform: scale(0.2) translateX(-50%);
+  transform-origin: top left;
+  transition:
+      display var(--speed) allow-discrete,
+      opacity var(--speed),
+      overlay var(--speed) allow-discrete,
+      transform var(--speed);
+
+  &::backdrop {
+    background-color: var(--color-always-black);
+    opacity: 0;
+    transform: scale(1);
+    transition:
+      display var(--backdrop-speed) allow-discrete,
+      opacity var(--backdrop-speed),
+      overlay var(--backdrop-speed) allow-discrete;
+  }
+
+  &[open] {
+    opacity: 1;
+    transform: scale(1) translateX(-50%);
+
+    &::backdrop {
+      opacity: 0.5;
+    }
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+      transform: scale(0.2) translateX(-50%);
+    }
+
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}

app/views/cards/index/_collections_filter.html.erb

@@ -4,20 +4,25 @@
     <%= filter_hidden_field_tag key, value %>
   <% end %>
 
-  <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "btn popup__item" do %>
-    <span class="overflow-ellipsis">All collections</span>
-  <% end %>
-
   <% Current.user.collections.order(:name).each do |collection| %>
-    <div class="btn popup__item">
-      <%= form.check_box "collection_ids[]", {
-            checked: filter.collections.include?(collection),
-            data: { action: "change->form#submit" },
-            include_hidden: false,
-      }, collection.id %>
+    <div class="popup__group flex align-center full-width gap-half">
+      <div class="btn txt-xx-small">
+        <%= form.check_box "collection_ids[]", {
+              checked: filter.collections.include?(collection),
+              data: { action: "change->form#submit" },
+              include_hidden: false,
+        }, collection.id %>
 
-      <%= form.label "collection_ids[]", collection.name, for: dom_id(collection, :filter), class: "overflow-ellipsis" %>
-      <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+        <span class="for-screen-reader">
+          Toggle filter for <%= collection.name %>
+        </span>
+        <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+      </div>
+
+      <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item flex-item-grow justify-space-between" do %>
+        <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
+        <span class="translucent"> ›</span>
+      <% end %>
     </div>
   <% end %>
 <% end %>

app/views/cards/index/_header.html.erb

@@ -12,8 +12,13 @@
         </h1>
       </button>
 
-      <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
-        <strong class="popup__title margin-block-start-half pad-inline-half">In Collection</strong>
+      <dialog class="events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+        <div class="flex align-center full-width gap-half">
+          <span class="btn borderless" style="pointer-events: none; --icon-size: 1.3em; --btn-padding: 0 0.6em 0 0.3em;">
+            <%= icon_tag "filter" %>
+          </span>
+          <strong class="popup__title txt-medium">Collections</strong>
+        </div>
 
         <%= render "cards/index/collections_filter", filter: filter %>
       </dialog>

app/views/events/_filter.html.erb

@@ -8,7 +8,7 @@
 	</button>
 
 	<dialog class="events__popup popup panel flex-column full-width align-start gap-half fill-white shadow"
-				style="z-index: 5; inset: 0 0 auto auto;" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+				style="z-index: 5;" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
 		<strong class="popup__title margin-block-start-half pad-inline-half txt-nowrap">Filter by Collection…</strong>
 		<%= form_with url: events_path, method: :get, class: "flex flex-column full-width popup__list",
 					data: { controller: "form" } do |form| %>