Filter collections menus, add keyboard shortcuts

app/assets/stylesheets/base.css

@@ -85,6 +85,19 @@
     list-style: none;
   }
 
+  kbd {
+    border: 1px solid;
+    border-radius: .3em;
+    box-shadow: 0 0.1em 0 currentColor;
+    font-family: var(--font-mono);
+    font-size: var(--text-x-small);
+    font-weight: 600;
+    opacity: 0.7;
+    padding: 0em 0.4em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
   video {
     max-inline-size: 100%;
   }

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

@@ -20,7 +20,7 @@
   <% end %>
 
   <% Current.user.collections.order(:name).each do |collection| %>
-    <div class="popup__group flex align-center">
+    <li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
       <div class="btn txt-xx-small flex-item-no-shrink">
         <%= form.check_box "collection_ids[]", {
               checked: filter.collections.include?(collection),
@@ -39,6 +39,6 @@
       <% end %>
   
       <span class="translucent flex-item-no-shrink"> ›</span>
-    </div>
+    </li>
   <% end %>
 <% end %>

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

@@ -5,14 +5,24 @@
   <div class="btn btn--placeholder flex-item-justify-start"></div>
 
   <header class="flex flex-inline flex-column center flex-shrink">
-    <div class="card-filter--collection flex-inline center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside">
-      <button class="txt-align-center input input--select borderless center txt-medium" data-action="click->dialog#open:stop">
-        <h1 class="txt-large overflow-ellipsis margin-none">
-          <%= filter_title filter %>
+    <div class="card-filter--collection flex-inline align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside">
+      <%= tag.button class: "txt-align-center input input--select borderless txt-medium",
+          data: {
+            action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click",
+            controller: "hotkey" } do %>
+        <h1 class="txt-large overflow-ellipsis margin-none flex align-center gap-half">
+          <span><%= filter_title filter %></span>
+          <kbd class="kbd">⌘j</kbd>
         </h1>
-      </button>
+      <% end %>
 
-      <dialog class="popup popup--animated panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="keydown.esc->dialog#close:stop turbo:before-cache@document->dialog#close">
+      <%= tag.dialog class:"popup popup--animated panel flex-column align-start gap-half fill-white shadow",
+          data: { 
+            action:"keydown.esc->dialog#close:stop turbo:before-cache@document->dialog#close",
+            controller: "filter", 
+            dialog_target: "dialog",
+            filter_active_class: "filter--active", 
+            filter_selected_class: "selected" } do %>
         <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.4em 0 0.6em;">
             <%= icon_tag "filter" %>
@@ -23,9 +33,16 @@
             <span class="for-screen-reader">Close</span>
           </button>
         </div>
-
-        <%= render "cards/index/collections_filter", filter: filter %>
-      </dialog>
+        <% if Current.user.collections.count > 15 %>
+          <input placeholder="Find a collection…" class="input input--transparent txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter" autofocus=>
+        <% end %>
+        <menu data-filter-target="list" contents>
+          <%= render "cards/index/collections_filter", filter: filter %>
+        </menu>
+        <p class="txt-small txt-nowrap txt-align-center margin-block-half full-width">
+          Press <kbd class="kbd">⌘j</kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close.
+        </p>
+      <% end %>
     </div>
   </header>
 

app/views/events/_filter.html.erb

@@ -1,20 +1,37 @@
 <div class="max-width margin-block-end-half"
 		data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-	<button class="events__filter-btn input input--select flex-inline center min-width max-width txt-small" data-action="click->dialog#open:stop">
+	<%= tag.button class:"events__filter-btn input input--select flex-inline center min-width max-width txt-small",
+			data: {
+				action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click",
+				controller: "hotkey" } do %>
 		<span class="overflow-ellipsis center">
 			<%= filter_selected_collections_label(filter) %>
 		</span>
-	</button>
+		<% end %>
 
-	<dialog class="events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow"
-				style="z-index: 5;" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+	<%= tag.dialog class: "events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow", 
+			style: "z-index: 5;", 
+			data: { 
+				action: "turbo:before-cache@document->dialog#close",
+				controller: "filter", 
+				dialog_target: "dialog",
+				filter_active_class: "filter--active", 
+				filter_selected_class: "selected" } do %>
 		<%= render "events/filter/header" %>
 		<%= render "events/filter/new_collection_option" %>
-
+		<% if Current.user.collections.count > 15 %>
+			<input placeholder="Find a collection…" class="input input--transparent txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter" autofocus>
+		<% end %>
 		<%= form_with url: events_path, method: :get, class: "flex flex-column max-width popup__list full-width",
 					data: { controller: "form" } do |form| %>
 			<%= render "events/filter/all_collections_option", form: form, filter: filter %>
-			<%= render partial: "events/filter/collection_option", collection: Current.user.collections, as: :collection, locals: { form: form, filter: filter } %>
+			<menu data-filter-target="list" contents>
+				<%= render partial: "events/filter/collection_option", collection: Current.user.collections, as: :collection, locals: { form: form, filter: filter } %>
+			</menu>
 		<% end %>
-	</dialog>
+
+		<p class="txt-small txt-nowrap txt-align-center margin-block-half full-width">
+			Press <kbd class="kbd">⌘j</kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close.
+		</p>
+	<% end %>
 </div>

app/views/events/filter/_collection_option.html.erb

@@ -1,4 +1,4 @@
-<div class="popup__group flex align-center">
+<li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
   <div class="btn txt-xx-small">
     <%= form.check_box "collection_ids[]", {
           checked: filter.collections.include?(collection),
@@ -17,4 +17,4 @@
   <% end %>
 
   <span class="translucent flex-item-no-shrink"> ›</span>
-</div>
+</li>

app/views/terminals/show.html.erb

@@ -5,7 +5,7 @@
     </menu>
     
     <%= turbo_frame_tag "terminal_form" do %>
-      <%= link_to edit_terminal_path, class: "terminal__link flex align-center gap-half min-width", data: { action: "keydown.meta+j@document->hotkey#click", controller: "hotkey" } do %>
+      <%= link_to edit_terminal_path, class: "terminal__link flex align-center gap-half min-width", data: { action: "keydown.meta+shift+p@document->hotkey#click", controller: "hotkey" } do %>
         <span class="terminal__label txt-nowrap">Fizzy do &gt;</span>
         <span class="terminal__input input fill-transparent unpad txt-nowrap overflow-ellipsis">Search or type commands…</span>
       <% end %>