Add dropdown components, menus for RS auth items

app/components/dropdown_component.html.erb

@@ -0,0 +1,26 @@
+<div data-controller="dropdown" data-action="click->dropdown#toggle click@window->dropdown#hide">
+  <div class="relative inline-block">
+    <div role="button" tabindex="0" data-dropdown-target="button"
+         class="inline-block select-none">
+      <span class="appearance-none flex items-center inline-block">
+        <span class="p-2 bg-gray-50 hover:bg-gray-100 rounded-full">
+          <%= render partial: "icons/kebab-menu", locals: {
+                     custom_class: "inline text-gray-500 h-6 w-6"
+          } %>
+        </span>
+      </span>
+    </div>
+    <div data-dropdown-target="menu"
+         data-transition-enter="transition ease-out duration-200"
+         data-transition-enter-from="opacity-0 translate-y-1"
+         data-transition-enter-to="opacity-100 translate-y-0"
+         data-transition-leave="transition ease-in duration-150"
+         data-transition-leave-from="opacity-100 translate-y-0"
+         data-transition-leave-to="opacity-0 translate-y-1"
+         class="hidden absolute top-4 right-0 z-10 mt-5 flex w-screen max-w-max">
+      <div class="bg-white shadow-lg rounded border overflow-hidden w-auto">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+</div>

app/components/dropdown_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class DropdownComponent < ViewComponent::Base
+
+end

app/components/dropdown_link_component.html.erb

@@ -0,0 +1,6 @@
+<%= link_to @href, class: @class, data: {
+      'dropdown-target': "menuItem",
+      'action': "keydown.up->dropdown#previousItem:prevent keydown.down->dropdown#nextItem:prevent"
+    } do %>
+  <%= content %>
+<% end %>

app/components/dropdown_link_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class DropdownLinkComponent < ViewComponent::Base
+  def initialize(href:, separator: false, add_class: nil)
+    @href = href
+    @class = class_str(separator, add_class)
+  end
+
+  private
+
+  def class_str(separator, add_class)
+    str = "no-underline block px-4 py-2 text-sm text-gray-900 bg-white
+           hover:bg-gray-100 focus:bg-gray-100 whitespace-no-wrap"
+    str = "#{str} border-t" if separator
+    str = "#{str} #{add_class}" if add_class
+    str
+  end
+end

app/components/rs_auth_component.html.erb

@@ -1,4 +1,4 @@
-<div class="py-4 w-1/2 flex items-center gap-6">
+<div class="flex items-center gap-4">
   <div class="h-16 w-16 flex-none">
     <%= image_tag s3_image_url(@web_app.icon), class: "h-full w-full" %>
   </div>
@@ -15,11 +15,14 @@
   <!--     Approved <%= time_ago_in_words @auth.created_at %> ago -->
   <!--   </p> -->
   <!-- </div> -->
-  <div>
+  <%= render DropdownComponent.new do %>
-    <p class="text-sm text-gray-500">
+    <%= render DropdownLinkComponent.new(href: "#") do %>
-      <%= link_to "#", class: "btn-md btn-outline text-red-700 relative" do %>
+      Launch app
-        Revoke access
+    <% end %>
-      <% end %>
+    <%= render DropdownLinkComponent.new(
-    </p>
+          href: "#", separator: true, add_class: "text-red-700"
-  </div>
+        ) do %>
+      Revoke access
+    <% end %>
+  <% end %>
 </div>

app/javascript/controllers/application.js

@@ -1,8 +1,9 @@
 import { Application } from "@hotwired/stimulus"
-import { Modal, Tabs } from "tailwindcss-stimulus-components"
+import { Dropdown, Modal, Tabs } from "tailwindcss-stimulus-components"
 
 const application = Application.start()
 
+application.register('dropdown', Dropdown)
 application.register('modal', Modal)
 application.register('tabs', Tabs)
 

app/views/icons/_kebab-menu.html.erb

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" class="<%= custom_class %>" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Menu</title>
+    <g id="kebap-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <rect id="Container" x="0" y="0" width="24" height="24"></rect>
+      <path d="M12,6 C12.5522847,6 13,5.55228475 13,5 C13,4.44771525 12.5522847,4 12,4 C11.4477153,4 11,4.44771525 11,5 C11,5.55228475 11.4477153,6 12,6 Z" stroke="#030819" stroke-width="2" stroke-linecap="round" stroke-dasharray="0,0"></path>
+      <path d="M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z" stroke="#030819" stroke-width="2" stroke-linecap="round" stroke-dasharray="0,0"></path>
+      <path d="M12,20 C12.5522847,20 13,19.5522847 13,19 C13,18.4477153 12.5522847,18 12,18 C11.4477153,18 11,18.4477153 11,19 C11,19.5522847 11.4477153,20 12,20 Z" stroke="#030819" stroke-width="2" stroke-linecap="round" stroke-dasharray="0,0"></path>
+    </g>
+</svg>

app/views/services/remotestorage/dashboard.html.erb

@@ -2,9 +2,9 @@
 
 <%= render MainSimpleComponent.new do %>
   <section>
-    <h3 class="">Connected Apps</h3>
+    <h3 class="mb-10">Connected Apps</h3>
     <% if @rs_auths.any? %>
-    <div class="w-full grid grid-columns-1 divide-y">
+    <div class="w-full grid grid-cols-1 md:grid-cols-3 gap-10">
     <% @rs_auths.each do |auth| %>
       <%= render RsAuthComponent.new(auth: auth) %>
     <% end %>