Merge c8f125a into 5f49f6b

app/assets/stylesheets/components/_dropdown.scss

@@ -31,7 +31,7 @@
   display: none;
 }
 
-.c-dropdown__list {
+.c-dropdown__menu {
   position: absolute;
   right: 0;
   top: 0;
@@ -45,11 +45,11 @@
   overflow-y: auto;
 }
 
-.c-dropdown__list > hr {
+.c-dropdown__menu > hr {
   margin: 0;
 }
 
-.c-dropdown__list--right {
+.c-dropdown__menu--right {
   left: 0;
   right: auto;
 }

app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus'
+import { installEventHandler } from './mixins/event_handler'
+
+export default class extends Controller {
+  static targets = ['menu']
+
+  initialize () {
+    installEventHandler(this)
+  }
+
+  connect () {
+    this.handleEvent('click', {
+      on: this.menuTarget,
+      with: this.#close
+    })
+  }
+
+  #close = () => {
+    this.element.removeAttribute('open')
+  }
+}

app/javascript/controllers/index.js

@@ -36,6 +36,8 @@ import ThemeController from './theme_controller.js'
 
 import ThemeBridgeController from './theme_bridge_controller.js'
 
+import DropdownController from './dropdown_controller.js'
+
 application.register('dialog', DialogController)
 
 application.register('element', ElementController)
@@ -67,3 +69,5 @@ application.register('flash-bridge', FlashBridgeController)
 application.register('theme', ThemeController)
 
 application.register('theme-bridge', ThemeBridgeController)
+
+application.register('dropdown', DropdownController)

app/javascript/controllers/search_controller.js

@@ -5,6 +5,7 @@ export default class extends Controller {
 
   connect () {
     this.moveCursorToEnd()
+    this.element.classList.remove('is-loading')
   }
 
   moveCursorToEnd () {

app/views/albums/_filters.html.erb

@@ -7,14 +7,14 @@
   <% end %>
 <% end %>
 
-<details class='c-dropdown u-mr-small'>
+<details class='c-dropdown u-mr-small' data-controller="dropdown">
   <summary class='c-button c-button--outline c-button--small'>
     <span class='o-flex o-flex--align-center'>
       <%= t("label.genre") %>
       <%= icon_tag "expand-more" %>
     </span>
   </summary>
-  <div class='c-dropdown__list c-dropdown__list--right'>
+  <div class='c-dropdown__menu c-dropdown__menu--right' data-dropdown-target="menu">
     <%= turbo_frame_tag "turbo-genre-filter", src: albums_filter_genres_path(**filter_sort_params), loading: "lazy" do %>
       <div class='o-flex o-flex--justify-center u-p-medium'>
         <%= loader_tag size: "small" %>
@@ -23,14 +23,14 @@
   </div>
 </details>
 
-<details class='c-dropdown u-mr-small'>
+<details class='c-dropdown u-mr-small' data-controller="dropdown">
   <summary class='c-button c-button--outline c-button--small'>
     <span class='o-flex o-flex--align-center'>
       <%= t("label.year") %>
       <%= icon_tag "expand-more" %>
     </span>
   </summary>
-  <div class='c-dropdown__list'>
+  <div class='c-dropdown__menu' data-dropdown-target="menu">
     <%= turbo_frame_tag "turbo-year-filter", src: albums_filter_years_path(**filter_sort_params), loading: "lazy" do %>
       <div class='o-flex o-flex--justify-center u-p-medium'>
         <%= loader_tag size: "small" %>

app/views/albums/show.html.erb

@@ -66,11 +66,11 @@
               </div>
             <% end %>
 
-            <details class='c-dropdown' data-test-id='album_song_menu'>
+            <details class='c-dropdown' data-test-id='album_song_menu' data-controller='dropdown'>
               <summary class="c-button c-button--icon">
                 <%= icon_tag "more-vertical", size: "small", title: t("label.more") %>
               </summary>
-              <div class='c-dropdown__list'>
+              <div class='c-dropdown__menu' data-dropdown-target="menu">
                 <%= link_to(
                       t("label.add_to_playlist"),
                       dialog_playlists_path(song_id: song.id, referer_url: current_url),

app/views/artists/show.html.erb

@@ -6,7 +6,7 @@
     <div class='c-card__body'>
       <h1 class='c-card__body__title'><%= @artist.name %></h1>
       <div class='c-card__body__text'>
-        <span><%= @artist.all_albums.size %><%= t("label.albums") %></span>
+        <span><%= @artist.all_albums.size %> <%= t("label.albums") %></span>
         <span>,</span>
         <span><%= @artist.songs.size %> <%= t("label.songs") %></span>
       </div>

app/views/current_playlist/songs/_song.html.erb

@@ -22,9 +22,9 @@
       </div>
     </button>
 
-    <details class='c-dropdown' data-test-id='current_playlist_song_menu'>
+    <details class='c-dropdown' data-controller="dropdown" data-test-id='current_playlist_song_menu'>
       <summary class="c-button c-button--icon" role="button"><%= icon_tag "more-vertical", size: "small", title: t("label.more") %></summary>
-      <div class='c-dropdown__list'>
+      <div class='c-dropdown__menu' data-dropdown-target="menu">
         <%= link_to t("label.add_to_playlist"), dialog_playlists_path(song_id: song.id, referer_url: current_url), data: {turbo_frame: ("turbo-dialog" unless native_app?)}, class: "c-dropdown__item" %>
 
         <%= button_to t("label.delete"), current_playlist_song_path(song), method: :delete, form_class: "c-dropdown__item", form: {data: {turbo_frame: "turbo-playlist"}} %>

app/views/current_playlist/songs/index.html.erb

@@ -10,9 +10,9 @@
         <span id='<%= dom_id(@playlist, :songs_count) %>'><%= @playlist.songs.count %></span>
         <span><%= t("label.tracks") %></span>
       </p>
-      <details class='c-dropdown' data-test-id='playlist_menu'>
+      <details class='c-dropdown' data-controller='dropdown' data-test-id='playlist_menu'>
         <summary class="c-button c-button--icon"><%= icon_tag "more-vertical", title: t("label.more") %></summary>
-        <div class='c-dropdown__list'>
+        <div class='c-dropdown__menu' data-dropdown-target="menu">
           <%= button_to t("label.clear"), current_playlist_songs_path, method: :delete, form_class: "c-dropdown__item" %>
         </div>
       </details>

app/views/playlists/songs/_song.html.erb

@@ -24,9 +24,9 @@
         <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>
       </div>
     <% end %>
-    <details class='c-dropdown' data-test-id='playlist_song_menu'>
+    <details class='c-dropdown' data-controller='dropdown' data-test-id='playlist_song_menu'>
       <summary class="c-button c-button--icon"><%= icon_tag "more-vertical", size: "small", title: t("label.more") %></summary>
-      <div class='c-dropdown__list'>
+      <div class='c-dropdown__menu' data-dropdown-target="menu">
         <%= link_to(
               t("label.add_to_playlist"),
               dialog_playlists_path(song_id: song.id, referer_url: current_url),

app/views/playlists/songs/index.html.erb

@@ -32,11 +32,11 @@
           <% end %>
           <%= link_to t("label.edit"), edit_dialog_playlist_path(@playlist), data: {turbo_frame: ("turbo-dialog" unless native_app?)}, class: "c-button c-button--secondary" %>
 
-          <details class='c-dropdown' data-test-id='playlist_menu'>
+          <details class='c-dropdown' data-controller='dropdown' data-test-id='playlist_menu'>
             <summary class="c-button c-button--secondary">
               <%= icon_tag "more-horizontal", size: "narrow", title: t("label.more") %>
             </summary>
-            <div class='c-dropdown__list c-dropdown__list--right'>
+            <div class='c-dropdown__menu c-dropdown__menu--right' data-dropdown-target="menu">
               <% unless @songs.blank? %>
                 <%= button_to t("label.clear"), playlist_songs_path(@playlist), method: :delete, form_class: "c-dropdown__item" %>
               <% end %>

app/views/shared/_filter_options.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_tag "turbo-#{filter_name}-filter".dasherize, class: "c-dropdown__list" do %>
+<%= turbo_frame_tag "turbo-#{filter_name}-filter".dasherize do %>
   <% options.each do |option| %>
     <%= link_to url_for(controller: filter_controller, **filter_sort_params(filter: {filter_name => option})), class: "c-dropdown__item", data: {turbo_frame: "_top", turbo_action: ("replace" if native_app?)}  do %>
         <span class='o-flex o-flex--justify-between o-flex--align-center'>

app/views/shared/_search_bar.html.erb

@@ -14,9 +14,9 @@
   <% end %>
 
   <div class='o-flex o-flex--align-center o-flex__item o-flex__item--grow-1 o-flex__item--basic-0'>
-    <details class='c-dropdown u-ml-auto' data-test-id='search_bar_menu'>
+    <details class='c-dropdown u-ml-auto' data-controller='dropdown' data-test-id='search_bar_menu'>
       <summary><%= avatar_tag Current.user %></summary>
-      <div class='c-dropdown__list'>
+      <div class='c-dropdown__menu' data-dropdown-target="menu">
         <%= link_to t("label.settings"), setting_path, class: "c-dropdown__item" %>
         <%= link_to t("label.manage_users"), users_path, class: "c-dropdown__item" if is_admin? %>
         <%= link_to t("label.update_profile"), edit_user_path(Current.user), class: "c-dropdown__item" %>

app/views/shared/_sort_select.html.erb

@@ -1,8 +1,8 @@
-<details class='c-dropdown'>
+<details class='c-dropdown' data-controller='dropdown'>
   <summary class="c-button c-button--icon">
     <%= icon_tag "sort", title: t("label.sort") %>
   </summary>
-  <div class='c-dropdown__list'>
+  <div class='c-dropdown__menu' data-dropdown-target="menu">
     <% option.values.each do |sort_value| %>
       <%= link_to url_for(controller: params[:controller], action: :index, **filter_sort_params(sort: sort_value)), class: "c-dropdown__item", data: {turbo_action: ("replace" if native_app?)} do %>
         <span class='o-flex o-flex--justify-between o-flex--align-center'>

app/views/songs/_filters.html.erb

@@ -7,14 +7,14 @@
   <% end %>
 <% end %>
 
-<details class='c-dropdown u-mr-small'>
+<details class='c-dropdown u-mr-small' data-controller='dropdown'>
   <summary class='c-button c-button--outline c-button--small'>
     <span class='o-flex o-flex--align-center'>
       <%= t("label.genre") %>
       <%= icon_tag "expand-more" %>
     </span>
   </summary>
-  <div class='c-dropdown__list c-dropdown__list--right'>
+  <div class='c-dropdown__menu c-dropdown__menu--right' data-dropdown-target="menu">
     <%= turbo_frame_tag "turbo-album-genre-filter", src: songs_filter_genres_path(**filter_sort_params), loading: "lazy" do %>
       <div class='o-flex o-flex--justify-center u-p-medium'>
         <%= loader_tag size: "small" %>
@@ -23,14 +23,14 @@
   </div>
 </details>
 
-<details class='c-dropdown u-mr-small'>
+<details class='c-dropdown u-mr-small' data-controller='dropdown'>
   <summary class='c-button c-button--outline c-button--small'>
     <span class='o-flex o-flex--align-center'>
       <%= t("label.year") %>
       <%= icon_tag "expand-more" %>
     </span>
   </summary>
-  <div class='c-dropdown__list'>
+  <div class='c-dropdown__menu' data-dropdown-target="menu">
     <%= turbo_frame_tag "turbo-album-year-filter", src: songs_filter_years_path(**filter_sort_params), loading: "lazy" do %>
       <div class='o-flex o-flex--justify-center u-p-medium'>
         <%= loader_tag size: "small" %>

app/views/songs/_song.html.erb

@@ -23,11 +23,11 @@
   </div>
   <div role='cell' class='u-display-none@small'><%= format_duration(song.duration) %></div>
   <div role='cell'>
-    <details class='c-dropdown' data-test-id='song_menu'>
+    <details class='c-dropdown' data-controller='dropdown' data-test-id='song_menu'>
       <summary class="c-button c-button--icon">
         <%= icon_tag "more-vertical", size: "small", title: t("label.more") %>
       </summary>
-      <div class='c-dropdown__list'>
+      <div class='c-dropdown__menu' data-dropdown-target="menu">
         <%= link_to(
               t("label.add_to_playlist"),
               dialog_playlists_path(song_id: song.id, referer_url: current_url),