Add List membership modal as Turbo Frame

app/views/layouts/base.html.haml

@@ -31,6 +31,7 @@
       = render 'navigation/guest'
     = render 'shared/announcements'
     = yield
+    = turbo_frame_tag :modal_container
     - if Rails.env.development?
       #debug
         %hr

app/views/lists/index.html.haml

@@ -0,0 +1,31 @@
+= turbo_frame_tag :modal_container do
+  .modal.show#modal-list-memberships{ aria: { labelledby: "modal-list-memberships-label" }, role: :dialog, tabindex: -1, style: "display: block;" }
+    .modal-dialog
+      .modal-content
+        .modal-header
+          %h5.modal-title#modal-list-memberships-label= t(".title")
+          = button_to modal_close_path, class: "close" do
+            %span{ aria: { hidden: true } } ×
+            %span.sr-only= t("voc.close")
+        %div{ role: :tabpanel }
+          %ul.nav.nav-tabs.mt-1{ role: :tablist }
+            %li.nav-item{ role: "presentation" }
+              %a.nav-link.active{ href: "#lists-list", aria: { controls: "lists-list" }, data: { toggle: :tab }, role: :tab }
+                = t(".tab.list.title")
+            %li.nav-item{ role: "presentation" }
+              %a.nav-link{ href: "#create", aria: { controls: "create" }, data: { toggle: :tab }, role: :tab }
+                = t(".tab.create.title")
+
+          .tab-content
+            .tab-pane.active{ role: :tabpanel, id: "lists-list" }
+              %ul.list-group
+                - @lists.each do |list|
+                  = render "modal/list/item", list: list, user: @user
+            .tab-pane{ role: :tabpanel, id: "create" }
+              .modal-body
+                %input.form-control#new-list-name{ type: :text, placeholder: t(".tab.create.placeholder") }
+                %button.btn.btn-primary#create-list{ type: :button }= t(".tab.create.action")
+        .modal-footer
+          = button_to modal_close_path, class: "btn btn-primary" do
+            = t("voc.close")
+  .modal-backdrop.fade.show

app/views/modal/list/_item.html.haml

@@ -1,4 +1,4 @@
-%li.list-group-item{ id: "list-#{list.name}" }
+%li.list-group-item{ id: "list_#{list.name}" }
   .media
     .pull-left
       .custom-control.custom-checkbox
@@ -12,6 +12,6 @@
       .list-group-item-text.text-muted
         %span{ id: "#{list.name}-members", data: { count: list.members.count } }= t(".members", count: list.members.count)
         ·
-        %a.text-danger#delete-list{ href: "#", data: { list: list.name } }
+        = link_to lists_destroy_path(list), data: { turbo_method: :destroy }, class: "text-danger" do
           %i.fa.fa-close
           = t("voc.delete")

app/views/navigation/_desktop.html.haml

@@ -12,8 +12,8 @@
         = nav_entry t("navigation.discover"), discover_path, icon: 'compass'
     %ul.nav.navbar-nav
       - if @user.present? && @user != current_user
-        %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t(".list") }
-          %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
+        %li.nav-item.d-none.d-sm-block
+          = link_to lists_path(@user), class: "nav-link", data: { turbo_frame: :modal_container } do
             %i.fa.fa-list.hidden-xs
             %span.d-none.d-sm-inline.d-md-none= t(".list")
       = nav_entry t("navigation.notifications"), notifications_path, badge: notification_count, class: 'd-block d-sm-none'