blackcandy-org · aidewoode · Jul 22, 2024 · Jul 29, 2024 · Jul 30, 2024
diff --git a/Gemfile b/Gemfile
@@ -13,6 +13,9 @@ gem "turbo-rails", "~> 1.5.0"
 # Install Stimulus on Rails
 gem "stimulus-rails", "~> 1.2.1"
 
+# View components for Rails
+gem "view_component", "~> 3.12.0"
+
 # Bundle and process CSS in Rails
 gem "cssbundling-rails", "~> 1.4.0"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -209,6 +209,7 @@ GEM
     marcel (1.0.4)
     matrix (0.4.2)
     memory_profiler (0.9.14)
+    method_source (1.1.0)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.6)
@@ -374,6 +375,10 @@ GEM
     uniform_notifier (1.16.0)
     url_mount (0.2.1)
       rack
+    view_component (3.12.1)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     wahwah (1.6.2)
     web-console (4.2.1)
       actionview (>= 6.0.0)
@@ -433,6 +438,7 @@ DEPENDENCIES
   stimulus-rails (~> 1.2.1)
   turbo-rails (~> 1.5.0)
   tzinfo-data
+  view_component (~> 3.12.0)
   wahwah (~> 1.6.0)
   web-console (>= 3.3.0)
   webmock (~> 3.18.0)

diff --git a/app/assets/stylesheets/components/_dropdown.scss b/app/assets/stylesheets/components/_dropdown.scss
@@ -65,28 +65,17 @@ a.c-dropdown__item {
   color: var(--dropdown-color);
 }
 
+form.c-dropdown__item {
+  cursor: pointer;
+  background: var(--dropdown-bg-color);
+}
+
 form.c-dropdown__item input[type="submit"],
 form.c-dropdown__item button[type="submit"] {
-  width: 100%;
-  background: var(--dropdown-bg-color);
   border: none;
   cursor: pointer;
 }
 
-.c-dropdown__item:first-child,
-form.c-dropdown__item:first-child input[type="submit"],
-form.c-dropdown__item:first-child button[type="submit"] {
-  border-top-left-radius: border-radius("medium");
-  border-top-right-radius: border-radius("medium");
-}
-
-.c-dropdown__item:last-child,
-form.c-dropdown__item:last-child input[type="submit"],
-form.c-dropdown__item:last-child button[type="submit"] {
-  border-bottom-left-radius: border-radius("medium");
-  border-bottom-right-radius: border-radius("medium");
-}
-
 a.c-dropdown__item:hover,
 form.c-dropdown__item:hover input[type="submit"],
 form.c-dropdown__item:hover button[type="submit"],

diff --git a/app/components/application_component.rb b/app/components/application_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationComponent < ViewComponent::Base
+  include ComponentHelper
+end
diff --git a/app/components/base_component.rb b/app/components/base_component.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class BaseComponent < ApplicationComponent
+  def initialize(tag = :div, **attributes)
+    @tag = tag
+    @tag_args = attributes
+
+    test_id = @tag_args.delete(:test_id)
+    @tag_args[:data] = merge_attributes(@tag_args[:data], {test_id: test_id}) if test_id
+  end
+
+  def call
+    content? ? content_tag(@tag, content, @tag_args) : tag(@tag, @tag_args)
+  end
+end
diff --git a/app/components/dropdown/item_component.rb b/app/components/dropdown/item_component.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Dropdown
+  class ItemComponent < ApplicationComponent
+    def initialize(type, *attributes)
+      @type = type
+      @attributes = attributes
+    end
+
+    def call
+      html_options_index = content? ? 1 : 2
+      html_options = case @type
+      when :link
+        {class: "c-dropdown__item"}
+      when :button
+        {form_class: "c-dropdown__item"}
+      end
+
+      @attributes[html_options_index] = merge_attributes(@attributes[html_options_index], html_options)
+
+      case @type
+      when :link
+        content? ? link_to(*@attributes) { content } : link_to(*@attributes)
+      when :button
+        content? ? button_to(*@attributes) { content } : button_to(*@attributes)
+      end
+    end
+  end
+end
diff --git a/app/components/dropdown_component.html.erb b/app/components/dropdown_component.html.erb
@@ -0,0 +1,16 @@
+<%= render(BaseComponent.new(:details, **@attributes))  do %>
+  <summary><%= toggle %></summary>
+  <div class='c-dropdown__menu' data-dropdown-target="menu">
+    <% if @src.present? && @frame_id.present? %>
+      <%= tag.turbo_frame(id: @frame_id, src: @src, loading: "lazy") do %>
+        <div class='o-flex o-flex--justify-center u-p-medium'>
+          <%= helpers.loader_tag size: "small" %>
+        </div>
+      <% end %>
+    <% else %>
+      <% menu.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/components/dropdown_component.rb b/app/components/dropdown_component.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class DropdownComponent < ApplicationComponent
+  renders_one :toggle
+  renders_many :menu, types: {
+    item: Dropdown::ItemComponent,
+    divider: -> { tag :hr }
+  }
+
+  def initialize(src: nil, frame_id: nil, **attributes)
+    @src = src
+    @frame_id = frame_id
+    @attributes = attributes
+    @attributes[:class] = class_names(@attributes[:class], "c-dropdown")
+    @attributes[:data] = merge_attributes(@attributes[:data], {controller: "dropdown"})
+  end
+end
diff --git a/app/helpers/component_helper.rb b/app/helpers/component_helper.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ComponentHelper
+  def merge_attributes(*hashes)
+    hashes.compact.reduce({}, :merge)
+  end
+end
diff --git a/app/views/albums/_filters.html.erb b/app/views/albums/_filters.html.erb
@@ -7,34 +7,32 @@
   <% end %>
 <% end %>
 
-<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("field.genre") %>
-      <%= icon_tag "expand-more" %>
+<%= render DropdownComponent.new(
+  src: albums_filter_genres_path(**filter_sort_presenter.params),
+  frame_id: "turbo-genre-filter",
+  class: "u-mr-small"
+) do |component| %>
+  <% component.with_toggle do %>
+    <span class="c-button c-button--outline c-button--small">
+      <span class='o-flex o-flex--align-center'>
+        <%= t("field.genre") %>
+        <%= icon_tag "expand-more" %>
+      </span>
     </span>
-  </summary>
-  <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_presenter.params), loading: "lazy" do %>
-      <div class='o-flex o-flex--justify-center u-p-medium'>
-        <%= loader_tag size: "small" %>
-      </div>
-    <% end %>
-  </div>
-</details>
+  <% end %>
+<% end %>
 
-<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("field.year") %>
-      <%= icon_tag "expand-more" %>
+<%= render DropdownComponent.new(
+  src: albums_filter_years_path(**filter_sort_presenter.params),
+  frame_id: "turbo-year-filter",
+  class: "u-mr-small"
+) do |component| %>
+  <% component.with_toggle do %>
+    <span class="c-button c-button--outline c-button--small">
+      <span class='o-flex o-flex--align-center'>
+        <%= t("field.year") %>
+        <%= icon_tag "expand-more" %>
+      </span>
     </span>
-  </summary>
-  <div class='c-dropdown__menu' data-dropdown-target="menu">
-    <%= turbo_frame_tag "turbo-year-filter", src: albums_filter_years_path(**filter_sort_presenter.params), loading: "lazy" do %>
-      <div class='o-flex o-flex--justify-center u-p-medium'>
-        <%= loader_tag size: "small" %>
-      </div>
-    <% end %>
-  </div>
-</details>
+  <% end %>
+<% end %>
diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb
@@ -69,60 +69,55 @@
               </div>
             <% end %>
 
-            <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__menu' data-dropdown-target="menu">
-                <%= button_to(
-                      t("button.play_now"),
-                      current_playlist_songs_path(song_id: song.id, should_play: true),
-                      form_class: "c-dropdown__item",
-                      form: {
-                        data: {
-                          "turbo-frame" => "turbo-playlist",
-                          "delegated-action" => "turbo:submit-start->songs#checkBeforePlay click->songs-bridge#playNow",
-                          "disabled-on-native" => "true"
-                        }
-                      }
-                    ) %>
-                <%= button_to(
-                      t("button.play_next"),
-                      current_playlist_songs_path(song_id: song.id),
-                      form_class: "c-dropdown__item",
-                      form: {
-                        data: {
-                          "turbo-frame" => "turbo-playlist",
-                          "delegated-action" => "turbo:submit-start->songs#checkBeforePlayNext click->songs-bridge#playNext",
-                          "disabled-on-native" => "true"
-                        }
-                      }
-                    ) %>
-                <%= button_to(
-                      t("button.play_last"),
-                      current_playlist_songs_path(song_id: song.id, location: "last"),
-                      form_class: "c-dropdown__item",
-                      form: {
-                        data: {
-                          "turbo-frame" => "turbo-playlist",
-                          "delegated-action" => "click->songs-bridge#playLast",
-                          "disabled-on-native" => "true"
-                        }
-                      }
-                    ) %>
-                <%= 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"
-                    ) %>
-                <%= link_to(
-                      t("label.go_to_artist"),
-                      artist_path(song.artist),
-                      class: "c-dropdown__item"
-                    ) %>
-              </div>
-            </details>
+            <%= render DropdownComponent.new(test_id: "album_song_menu") do |component| %>
+              <% component.with_toggle do %>
+                <span class="c-button c-button--icon">
+                  <%= icon_tag "more-vertical", size: "small", title: t("label.more") %>
+                </span>
+              <% end %>
+
+              <%= component.with_menu_item(:button,
+                t("button.play_now"),
+                current_playlist_songs_path(song_id: song.id, should_play: true),
+                form: {
+                  data: {
+                    "turbo-frame" => "turbo-playlist",
+                    "delegated-action" => "turbo:submit-start->songs#checkBeforePlay click->songs-bridge#playNow",
+                    "disabled-on-native" => "true"
+                  }
+                }) %>
+
+              <%= component.with_menu_item(:button,
+                t("button.play_next"),
+                current_playlist_songs_path(song_id: song.id),
+                form: {
+                  data: {
+                    "turbo-frame" => "turbo-playlist",
+                    "delegated-action" => "turbo:submit-start->songs#checkBeforePlayNext click->songs-bridge#playNext",
+                    "disabled-on-native" => "true"
+                  }
+                }) %>
+
+              <%= component.with_menu_item(:button,
+                t("button.play_last"),
+                current_playlist_songs_path(song_id: song.id, location: "last"),
+                form: {
+                  data: {
+                    "turbo-frame" => "turbo-playlist",
+                    "delegated-action" => "click->songs-bridge#playLast",
+                    "disabled-on-native" => "true"
+                  }
+                }) %>
+
+              <%= component.with_menu_item(:link,
+                t("label.add_to_playlist"),
+                dialog_playlists_path(song_id: song.id, referer_url: current_url),
+                data: {"turbo-frame" => ("turbo-dialog" unless native_app?)}) %>
+
+              <%= component.with_menu_item(:link,
+                t("label.go_to_artist"),
+                artist_path(song.artist)) %>
+            <% end %>
           </div>
         </li>
       <% end %>

diff --git a/app/views/current_playlist/songs/_song.html.erb b/app/views/current_playlist/songs/_song.html.erb
@@ -22,13 +22,15 @@
       </div>
     </button>
 
-    <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__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" %>
+    <%= render DropdownComponent.new(test_id: "current_playlist_song_menu") do |component| %>
+      <% component.with_toggle do %>
+        <span class="c-button c-button--icon">
+          <%= icon_tag "more-vertical", size: "small", title: t("label.more") %>
+        </span>
+      <% end %>
 
-        <%= button_to t("button.delete"), current_playlist_song_path(song), method: :delete, form_class: "c-dropdown__item", form: {data: {"turbo-frame" => "turbo-playlist"}} %>
-      </div>
-    </details>
+      <%= component.with_menu_item(:link, t("label.add_to_playlist"), dialog_playlists_path(song_id: song.id, referer_url: current_url), data: {"turbo-frame" => ("turbo-dialog" unless native_app?)}) %>
+      <%= component.with_menu_item(:button, t("button.delete"), current_playlist_song_path(song), method: :delete, form: {data: {"turbo-frame" => "turbo-playlist"}}) %>
+    <% end %>
   </div>
 </li>
diff --git a/app/views/current_playlist/songs/index.html.erb b/app/views/current_playlist/songs/index.html.erb
@@ -10,12 +10,14 @@
         <span id='<%= dom_id(@playlist, :songs_count) %>'><%= @playlist.songs.count %></span>
         <span><%= t("label.tracks") %></span>
       </p>
-      <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__menu' data-dropdown-target="menu">
-          <%= button_to t("button.clear"), current_playlist_songs_path, method: :delete, form_class: "c-dropdown__item" %>
-        </div>
-      </details>
+      <%= render DropdownComponent.new(test_id: "playlist_menu") do |component| %>
+        <% component.with_toggle do %>
+          <span class='c-button c-button--icon'>
+            <%= icon_tag "more-vertical", title: t("label.more") %>
+          </span>
+        <% end %>
+        <%= component.with_menu_item(:button, t("button.clear"), current_playlist_songs_path, method: :delete) %>
+      <% end %>
     </div>
     <ul class="c-list u-my-tiny" data-controller="playlist-sortable" data-playlist-id='<%= @playlist.id %>'>
       <% @songs.each do |song| %>