diff --git a/app/views/layouts/base.html.haml b/app/views/layouts/base.html.haml
index e5a7748d..a9a14847 100644
--- a/app/views/layouts/base.html.haml
+++ b/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
diff --git a/app/views/lists/index.html.haml b/app/views/lists/index.html.haml
new file mode 100644
index 00000000..d51bb3e9
--- /dev/null
+++ b/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
diff --git a/app/views/modal/list/_item.html.haml b/app/views/modal/list/_item.html.haml
index 4d62fb5e..30c84631 100644
--- a/app/views/modal/list/_item.html.haml
+++ b/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")
diff --git a/app/views/navigation/_desktop.html.haml b/app/views/navigation/_desktop.html.haml
index 4678d684..89bf4c5b 100644
--- a/app/views/navigation/_desktop.html.haml
+++ b/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'