Add unique IDs to all filter items

app/assets/stylesheets/fizzy-menu.css

@@ -52,6 +52,7 @@
     flex-wrap: wrap;
     gap: var(--gap);
     inline-size: 100%;
+    list-style: none;
     justify-content: center;
     margin: var(--block-space) auto calc(var(--block-space-half) / 2);
     max-inline-size: 100%;

app/javascript/controllers/navigable_list_controller.js

@@ -74,6 +74,8 @@ export default class extends Controller {
   async #setCurrentFrom(element) {
     const selectedItem = this.#visibleItems.find(item => item.contains(element))
 
+    console.log(selectedItem)
+
     if (selectedItem) {
       this.#clearSelection()
       selectedItem.setAttribute(this.selectionAttributeValue, "true")

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

@@ -5,14 +5,14 @@
   <% end %>
 
   <% if Current.user.collections.one? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collection-init", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <%= tag.div class: "popup__item btn" do %>
         <span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
         <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
       <% end %>
     <% end %>
   <% elsif Current.user.collections.many? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collections-all", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <label class="popup__radio btn txt-xx-small flex-item-no-shrink">
         <input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
 
@@ -28,7 +28,7 @@
     <% end %>
 
     <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-      <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+      <li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-collection-#{collection.id}" %>">
         <label class="popup__radio btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: filter.collections.include?(collection),

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

@@ -1,35 +1,35 @@
-<div class="fizzy-menu__hotkeys">
-  <%= link_to root_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %>
+<div class="fizzy-menu__hotkeys" role="list">
+  <%= link_to root_path, class: "popup__group btn borderless", id: "filter-hotkey-home", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %>
     <%= icon_tag "home" %>
     <span>Home</span>
     <kbd>1</kbd>
   <% end %>
 
-  <%= link_to cards_path(assignee_ids: [Current.user.id]), class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.2@document->hotkey#click keydown.shift+2@document->hotkey#click" } do %>
+  <%= link_to cards_path(assignee_ids: [Current.user.id]), class: "popup__group btn borderless", id: "filter-hotkey-assigned-to-me", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.2@document->hotkey#click keydown.shift+2@document->hotkey#click" } do %>
     <%= icon_tag "clipboard" %>
     <span>Assigned to me</span>
     <kbd>2</kbd>
   <% end %>
 
-  <%= link_to cards_path(creator_ids: [Current.user.id]), class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.3@document->hotkey#click keydown.shift+3@document->hotkey#click" } do %>
+  <%= link_to cards_path(creator_ids: [Current.user.id]), class: "popup__group btn borderless", id: "filter-hotkey-added-by-me", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.3@document->hotkey#click keydown.shift+3@document->hotkey#click" } do %>
     <%= icon_tag "person-add" %>
     <span>Added by me</span>
     <kbd>3</kbd>
   <% end %>
 
-  <%= link_to new_collection_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.4@document->hotkey#click keydown.shift+4@document->hotkey#click" } do %>
+  <%= link_to new_collection_path, class: "popup__group btn borderless", id: "filter-hotkey-new-collection", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.4@document->hotkey#click keydown.shift+4@document->hotkey#click" } do %>
     <%= icon_tag "collection-add" %>
     <span>New Collection</span>
     <kbd>4</kbd>
   <% end %>
 
-  <%= link_to notifications_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.5@document->hotkey#click keydown.shift+5@document->hotkey#click" } do %>
+  <%= link_to notifications_path, class: "popup__group btn borderless", id: "filter-hotkey-notifications", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.5@document->hotkey#click keydown.shift+5@document->hotkey#click" } do %>
     <%= icon_tag "bell" %>
     <span>Notifications</span>
     <kbd>5</kbd>
   <% end %>
 
-  <%= link_to account_settings_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.6@document->hotkey#click keydown.shift+6@document->hotkey#click" } do %>
+  <%= link_to account_settings_path, class: "popup__group btn borderless", id: "filter-hotkey-account-settings", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.6@document->hotkey#click keydown.shift+6@document->hotkey#click" } do %>
     <%= icon_tag "settings" %>
     <span>Account <span class="visually-hidden">Settings</span></span>
     <kbd>6</kbd>

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

@@ -1,4 +1,4 @@
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-place-settings">
   <%= icon_tag "settings" %>
   <%= link_to account_settings_path, class: "popup__item btn" do %>
     <span class="overflow-ellipsis">Account Settings</span>
@@ -6,7 +6,7 @@
   <% end %>
 </li>
 
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-place-profile">
   <%= icon_tag "person" %>
   <%= link_to user_path(Current.user), class: "popup__item btn" do %>
     <span class="overflow-ellipsis">My Profile</span>
@@ -14,7 +14,7 @@
   <% end %>
 </li>
 
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-place-notifications">
   <%= icon_tag "bell" %>
   <%= link_to notifications_path, class: "popup__item btn" do %>
     <span class="overflow-ellipsis">Notifications</span>
@@ -22,7 +22,7 @@
   <% end %>
 </li>
 
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-place-notification-settings">
   <%= icon_tag "settings" %>
   <%= link_to settings_notifications_path, class: "popup__item btn" do %>
     <span class="overflow-ellipsis">Notification Settings</span>
@@ -30,7 +30,7 @@
   <% end %>
 </li>
 
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-place-search">
   <%= icon_tag "search" %>
   <%= link_to search_path, class: "popup__item btn" do %>
     <span class="overflow-ellipsis">Search</span>
@@ -38,10 +38,10 @@
   <% end %>
 </li>
 
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-place-workflows">
   <%= icon_tag "bolt" %>
   <%= link_to workflows_path, class: "popup__item btn" do %>
     <span class="overflow-ellipsis">Workflows</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
-</li>
+</li>

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

@@ -1,7 +1,7 @@
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
   <%= icon_tag "tag" %>
   <%= link_to cards_path(tag_ids: [ tag ]), class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
-</li>
+</li>

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

@@ -1,7 +1,7 @@
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
   <%= icon_tag "person" %>
   <%= link_to user, class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
-</li>
+</li>