Reorganize ƒilter's menu templates (WIP)

2025-08-20 12:20:18 +02:00
parent defb11e8c0
commit d6fe0d919c
22 changed files with 277 additions and 11 deletions
@@ -3,6 +3,7 @@ module FilterScoped

  included do
    before_action :set_filter
+    before_action :set_user_filtering
  end

  private
@@ -16,4 +17,8 @@ module FilterScoped
        @filter = Current.user.filters.from_params params.reverse_merge(**DEFAULT_PARAMS).permit(*Filter::PERMITTED_PARAMS)
      end
    end
+
+    def set_user_filtering
+      @user_filtering = User::Filtering.new(Current.user, @filter)
+    end
 end
@@ -2,6 +2,5 @@ class EventsController < ApplicationController
  include DayTimelinesScoped

  def index
-    @filters = Current.user.filters.all
  end
 end
@@ -21,6 +21,7 @@ module FiltersHelper
    hidden_field_tag name, value, id: nil
  end

+  # TODO: REMOVE
  def filter_selected_collections_sentence(filter)
    if filter.collections.any?
      filter.collections.collect { "<strong>#{it.name}</strong>" }.uniq.sort.to_sentence
@@ -0,0 +1,25 @@
+class User::Filtering
+  attr_reader :user, :filter
+
+  delegate :as_params, to: :filter
+
+  def initialize(user, filter)
+    @user, @filter = user, filter
+  end
+
+  def collections
+    @collections ||= user.collections.ordered_by_recently_accessed
+  end
+
+  def tags
+    Tag.all.alphabetically
+  end
+
+  def users
+    User.active.alphabetically
+  end
+
+  def filters
+    @filters ||= Current.user.filters.all
+  end
+end
@@ -1,13 +1,13 @@
-<% 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 %>
+<% if user_filtering.collections.one? %>
+  <%= link_to route_for(filter.as_params.except(:collection_ids)), class: "popup__group", 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="overflow-ellipsis"><%= user_filtering.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? %>
+<% elsif user_filtering.collections.many? %>
  <div class="popup__group" data-filter-target="item" data-navigable-list-target="item">
-    <%= link_to events_path(clear_filter: true), class: "btn txt-xx-small flex-item-no-shrink" do %>
+    <%= link_to route_for(clear_filter: true), class: "btn txt-xx-small flex-item-no-shrink" do %>
      <%= check_box_tag "filter_collections", nil, filter.collections.blank?, class: "form-checkbox" %>
      <span class="for-screen-reader">
        See everything in all collections
@@ -15,7 +15,7 @@
      <%= icon_tag "check", size: 18, class: "checked" %>
    <% end %>

-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__item btn" do %>
+    <%= link_to route_for(filter.as_params.except(:collection_ids)), class: "popup__item btn" do %>
      <span class="overflow-ellipsis">All collections</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 %>
@@ -4,7 +4,7 @@
 <% content_for :header do %>
  <nav class="header">
    <header class="center">
-      <%= render "events/filter", filter: @filter %>
+      <%= render "filters/menu", user_filtering: @user_filtering %>
    </header>
  </nav>
 <% end %>
@@ -0,0 +1,23 @@
+<div class="max-width"
+  data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <%= render "filters/menu/button" %>
+
+  <%= tag.dialog class: "fizzy-dialog filter margin-block-start-half popup popup--animated panel flex-column align-start",
+        data: {
+              action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
+              controller: "filter navigable-list",
+              dialog_target: "dialog",
+              navigable_list_focus_on_selection_value: false,
+              navigable_list_actionable_items_value: true } do %>
+    <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+
+    <%= render "filters/menu/header" %>
+    <%= render "filters/menu/collections", user_filtering: user_filtering %>
+    <%= render "filters/menu/tags", user_filtering: user_filtering %>
+    <%= render "filters/menu/users", user_filtering: user_filtering %>
+    <%= render "filters/menu/places", user_filtering: user_filtering %>
+
+    <%= render "filters/menu/shortcut_notice" %>
+  <% end %>
+</div>
@@ -1,7 +1,7 @@
 <aside class="filters flex align-center gap-half justify-center center margin-block-end">
  <div class="flex-inline center align-center gap-half">
    <% if @expand_all %>
-      <%= link_to cards_path(filter.as_params), class: "btn txt-x-small btn--reversed", aria: { selected: true} do %>
+      <%= link_to cards_path(filter.as_params), class: "btn txt-x-small btn--reversed", aria: { selected: true } do %>
        <%= icon_tag "filter" %>
        <span>Filter these cards</span>
      <% end %>
@@ -19,8 +19,6 @@
    <%= render "filters/closers", filter: filter %>
    <%= render "filters/time_window", filter: filter, name: :creation, label: "Created" %>
    <%= render "filters/time_window", filter: filter, name: :closure, label: "Closed" %>
-    <%# FIXME LATER: this needs to be able to allow selection of unique stages across all active workflows %>
-    <%#= render "filters/stages", filter: filter %>
    <%= render "filters/cards", filter: filter %>


@@ -0,0 +1,19 @@
+<%= tag.button class:"fizzy-menu input input--select center flex-inline align-center txt-normal",
+      data: {
+            action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
+            controller: "hotkey" } do %>
+  <svg fill="none" height="282" viewBox="0 0 178 282" width="178" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="m14.1582 85.2218s66.3075-9.7823 75.9322-9.7823c9.6242 0 73.9516 9.7823 73.9516 9.7823-6.535 65.4602-17.171 132.0422-21.661 160.5982 0 0-16.941 11.257-51.3278 11.257s-55.9319-12.654-55.9319-12.654c-4.4901-28.557-14.4184-93.741-20.9631-159.2012z" fill="#d2edf8"/>
+    <path d="m14.1582 85.2218s66.3075-9.7823 75.9322-9.7823c9.6242 0 73.9516 9.7823 73.9516 9.7823-6.535 65.4602-17.171 132.0422-21.661 160.5982 0 0-16.941 11.257-51.3278 11.257s-55.9319-12.654-55.9319-12.654c-4.4901-28.557-14.4184-93.741-20.9631-159.2012z" fill="#9ee0f5"/>
+    <path d="m162.52 88.4775c0 4.8269-32.987 8.7398-73.6772 8.7398-40.6906 0-73.6768-3.9129-73.6768-8.7398 0-4.8268 32.9862-8.7397 73.6768-8.7397 40.6902 0 73.6772 3.9129 73.6772 8.7397z" fill="var(--color-ink-inverted)" opacity=".5"/>
+    <path d="m173.1 251.625c0 14.179-37.652 25.673-84.0996 25.673-46.4472 0-84.10001-11.494-84.10001-25.673s37.65281-25.673 84.10001-25.673c46.4476 0 84.0996 11.494 84.0996 25.673z" fill="#0389e7" opacity=".1"/>
+    <path d="m24.2217 177.256s38.4462-4.239 64.6324-4.007c26.1859.231 64.1959 4 64.1959 4l-10.523 68.435-52.3439 12.493-54.9675-12.493z" fill="#68abe9"/>
+    <path d="m24.2217 177.256s38.4462-4.239 64.6324-4.007c26.1859.231 64.1959 4 64.1959 4l-10.523 68.435-52.3439 12.493-54.9675-12.493z" fill="#0389e7" fill-opacity=".5"/>
+    <path d="m31.9728 75.6129 26.9049-2.4572 8.3153 185.5113-20.7855-7.968z" fill="var(--color-ink-inverted)" opacity=".4"/>
+    <g fill="var(--color-ink)">
+      <path d="m166.018 87.1859-29.1-7.4482-13.857 172.0003 21.825-9.873z" opacity=".4"/>
+      <path clip-rule="evenodd" d="m134.688 6.04931c2.622-2.02596 6.39-1.54288 8.416 1.0791 2.026 2.62197 1.543 6.38979-1.079 8.41599l-33.119 25.5928c-7.228 5.5854-9.2089 7.2942-10.2917 9.4668-1.0828 2.1727-1.2547 4.7835-1.3623 13.918l-.0694 5.8564c18.6914.3301 35.5314 1.7469 48.2624 3.7139 7.263 1.1221 13.39 2.4538 17.812 3.9404 2.173.7307 4.237 1.5967 5.866 2.669 1.262.8305 4.077 2.9626 4.077 6.6669 0 .0156-.002.0314-.002.0469 0 .016.002.0319.002.0479 0 3.7135-.923 13.4206-2.304 25.8626-1.402 12.621-3.326 28.477-5.419 44.795-4.179 32.563-9.068 67.234-11.851 81.71-.046.237-.109.468-.183.692-.032.175-.072.35-.122.524-1.229 4.292-4.359 7.657-8.069 10.23-3.752 2.601-8.563 4.727-14.062 6.419-11.014 3.389-25.643 5.296-42.3492 5.296-16.706 0-31.3348-1.907-42.3496-5.296-5.4985-1.692-10.3096-3.818-14.0615-6.419-3.71-2.573-6.8402-5.938-8.0693-10.23-.0387-.135-.0707-.271-.0987-.406-.0925-.26-.1669-.531-.2207-.81-2.783-14.476-7.674-49.147-11.8545-81.71-2.0948-16.318-4.01971-32.173-5.42185-44.794-1.3822-12.442-2.30567-22.1498-2.30567-25.8636.00001-.4033.04361-.7963.12598-1.1748.47348-3.0438 2.86076-4.8407 3.99414-5.5869 1.6287-1.0723 3.693-1.9383 5.8662-2.669 4.4217-1.4866 10.5486-2.8183 17.8115-3.9404 13.7816-2.1293 32.378-3.6122 52.9258-3.7715l.0703-5.9404c.094-7.9734.0242-13.918 2.6211-19.1289 2.597-5.2108 7.3849-8.7338 13.694-13.6094zm-45.8579 169.74969c-19.504 0-35.8061.996-47.2246 1.991-5.7088.497-10.196.994-13.25 1.366-.8757.106-1.6335.203-2.2686.286 3.2005 23.744 6.4063 45.645 8.4971 56.933l.251 1.336c.0354.102.0696.205.0996.309.2702.943 1.2026 2.441 3.7636 4.217 2.5198 1.747 6.1902 3.456 11.0284 4.945 9.6594 2.972 23.1288 4.81 39.1142 4.81 15.9852 0 29.4552-1.838 39.1142-4.81 4.838-1.489 8.509-3.198 11.028-4.945 2.561-1.776 3.494-3.274 3.764-4.217.022-.076.045-.151.069-.225.003-.013.006-.027.008-.041 2.079-10.812 5.418-33.561 8.753-58.312-.636-.083-1.395-.179-2.272-.286-3.054-.372-7.542-.869-13.25-1.366-11.419-.995-27.721-1.991-47.2249-1.991zm-73.0235-82.4509c.3681 4.4633 1.0167 10.8969 1.8907 18.7639 1.3931 12.541 3.3106 28.331 5.4004 44.608.7587 5.91 1.5387 11.876 2.3242 17.767.6532-.086 1.4316-.185 2.3301-.294 3.1063-.378 7.6495-.881 13.4189-1.384 10.5805-.922 25.2901-1.842 42.8271-1.988l.8379-71.1193c-17.783-.1251-35.3045-1.0712-48.7177-2.5948-7.1949-.8172-13.2978-1.8095-17.6455-2.957-.9507-.2509-1.8445-.5188-2.6661-.8018zm146.0444.0147c-.81.2772-1.689.5407-2.622.7871-4.348 1.1475-10.45 2.1398-17.645 2.957-12.413 1.41-28.346 2.3238-44.7471 2.5518l-.8389 71.1843c16.509.205 30.384 1.086 40.491 1.966 5.77.503 10.313 1.006 13.419 1.384.9.109 1.68.208 2.334.294.785-5.891 1.566-11.857 2.324-17.767 2.089-16.277 4.005-32.067 5.397-44.608.872-7.858 1.519-14.2865 1.888-18.7492zm-76.7983-12.042c-20.0274.1645-37.9999 1.6161-51.1162 3.6426-7.0056 1.0824-12.4271 2.2988-15.9853 3.4951-.1716.0577-.3364.1141-.4942.1699.6524.2235 1.4146.4549 2.292.6865 3.999 1.0555 9.8205 2.0164 16.9326 2.8243 13.2071 1.5001 30.5582 2.44 48.2139 2.5634zm11.8438 13.3369c16.2245-.2291 31.9375-1.1344 44.1235-2.5185 7.112-.8079 12.933-1.7688 16.932-2.8243.878-.2315 1.64-.4629 2.292-.6865-.157-.0557-.322-.1123-.493-.1699-3.558-1.1963-8.98-2.4127-15.985-3.4951-12.148-1.8768-28.46-3.2601-46.7133-3.585z" fill-rule="evenodd"/>
+    </g>
+  </svg>
+  <strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
+<% end %>
@@ -0,0 +1,12 @@
+<%= form_with url: url_for, method: :get, class: "display-contents",
+      data: { controller: "form" } do |form| %>
+  <% if user_filtering.collections.any? %>
+    <%= render "filters/menu/custom", user_filtering: user_filtering %>
+
+    <ul class="popup__list">
+      <li class="popup__group-title">Collections</li>
+      <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
+      <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
+    </ul>
+  <% end %>
+<% end %>
@@ -0,0 +1,6 @@
+<ul class="popup__list">
+  <li class="popup__group-title">Saved filters</li>
+
+  <%= render "filters/menu/custom/create" %>
+  <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter %>
+</ul>
@@ -0,0 +1,37 @@
+<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 %>
+    <%= 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 %>
+    <%= 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 %>
+    <%= 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 %>
+    <%= 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 %>
+    <%= 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 %>
+    <%= icon_tag "settings" %>
+    <span>Account <span class="visually-hidden">Settings</span></span>
+    <kbd>6</kbd>
+  <% end %>
+</div>
@@ -0,0 +1,52 @@
+<ul class="popup__list">
+  <li class="popup__group-title">Jump to…</li>
+
+  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= icon_tag "settings" %>
+    <%= link_to account_settings_path, class: "popup__item btn" do %>
+      <span class="overflow-ellipsis">Account Settings</span>
+      <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    <% end %>
+  </li>
+
+  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= icon_tag "person" %>
+    <%= link_to user_path(Current.user), class: "popup__item btn" do %>
+      <span class="overflow-ellipsis">My Profile</span>
+      <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    <% end %>
+  </li>
+
+  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= icon_tag "bell" %>
+    <%= link_to notifications_path, class: "popup__item btn" do %>
+      <span class="overflow-ellipsis">Notifications</span>
+      <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    <% end %>
+  </li>
+
+  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= icon_tag "settings" %>
+    <%= link_to settings_notifications_path, class: "popup__item btn" do %>
+      <span class="overflow-ellipsis">Notification Settings</span>
+      <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    <% end %>
+  </li>
+
+  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= icon_tag "search" %>
+    <%= link_to search_path, class: "popup__item btn" do %>
+      <span class="overflow-ellipsis">Search</span>
+      <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    <% end %>
+  </li>
+
+  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= 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>
+</ul>
+
@@ -0,0 +1,5 @@
+<% if platform.desktop? %>
+  <footer class="popup__footer">
+    Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
+  </footer>
+<% end %>
@@ -0,0 +1,5 @@
+<ul class="popup__list">
+  <li class="popup__group-title">Tags</li>
+  <%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %>
+</ul>
+
@@ -0,0 +1,4 @@
+<ul class="popup__list">
+  <li class="popup__group-title">People</li>
+  <%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %>
+</ul>
@@ -0,0 +1,23 @@
+<% if Current.user.collections.one? %>
+  <%= link_to cards_path(user_filtering.as_params.except(:collection_ids)), class: "popup__group", 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? %>
+  <div class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+    <%= link_to events_path(clear_filter: true), class: "btn txt-xx-small flex-item-no-shrink" do %>
+      <%= check_box_tag "filter_collections", nil, user_filtering.collections.blank?, class: "form-checkbox" %>
+      <span class="for-screen-reader">
+        See everything in all collections
+      </span>
+      <%= icon_tag "check", size: 18, class: "checked" %>
+    <% end %>
+
+    <%= link_to cards_path(user_filtering.as_params.except(:collection_ids)), class: "popup__item btn" do %>
+      <span class="overflow-ellipsis">All collections</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 %>
+  </div>
+<% end %>
@@ -0,0 +1,19 @@
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+  <label class="btn txt-xx-small">
+    <%= form.check_box "collection_ids[]", {
+          checked: user_filtering.filter.collections.include?(collection),
+          data: { action: "change->form#submit" },
+          include_hidden: false,
+    }, collection.id %>
+
+    <span class="for-screen-reader">
+      Toggle filter for <%= collection.name %>
+    </span>
+    <%= icon_tag "check", size: 18, class: "checked" %>
+  </label>
+
+  <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
+    <span class="overflow-ellipsis"><%= collection.name %></span>
+    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+  <% end %>
+</li>
@@ -0,0 +1,9 @@
+<li class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item">
+  <%= link_to url_for(expand_all: true), class: "btn popup__new popup__item" do %>
+    <%= icon_tag "bookmark" %>
+    <div class="flex flex-column txt-tight-lines min-width txt-small">
+      <strong class="overflow-ellipsis">Create a new filter</strong>
+    </div>
+    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+  <% end %>
+</li>
@@ -0,0 +1,10 @@
+<li class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
+  <%= link_to url_for(filter_id: filter.id), class: "btn popup__new popup__item" do %>
+    <%= icon_tag "bookmark" %>
+    <div class="flex flex-column txt-tight-lines min-width txt-small">
+      <span class="overflow-ellipsis"><%= filter_selected_collections_sentence(filter).html_safe %></span>
+      <span class="overflow-ellipsis"><%= filter.summary %></span>
+    </div>
+    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+  <% end %>
+</li>
@@ -0,0 +1,7 @@
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+  <%= 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>
@@ -0,0 +1,7 @@
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+  <%= 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>