Feature/go 368 filters

Gemfile

@@ -39,6 +39,7 @@ gem 'jwt'
 gem 'stimulus-rails'
 gem 'jsbundling-rails'
 gem 'pdf-reader'
+gem "acts_as_list", "~> 1.1"
 
 # Monitoring
 gem 'rollbar'

Gemfile.lock

@@ -76,6 +76,8 @@ GEM
       minitest (>= 5.1)
       mutex_m
       tzinfo (~> 2.0)
+    acts_as_list (1.1.0)
+      activerecord (>= 4.2)
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     afm (0.2.2)
@@ -502,6 +504,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  acts_as_list (~> 1.1)
   annotate
   bootsnap (>= 1.4.4)
   brakeman

app/components/admin/tags/tag_form_component.html.erb

@@ -14,16 +14,19 @@
           <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0 w-400">
             <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.text_field :name, placeholder: "Názov štítku", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.label :name, "Názov štítku" %>
+                <%= form.text_field :name, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
             <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.label :color, "Farba" %>
                 <%= form.select :color, helpers.color_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
             <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.label :icon, "Icona" %>
                 <%= form.select :icon, helpers.icon_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>

app/components/common/down_button_component.html.erb

@@ -0,0 +1,3 @@
+<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-white border border-gray-300 hover:bg-gray-100">
+  <%= render Icons::ChevronDownComponent.new %>
+</div>

app/components/common/down_button_component.rb

@@ -0,0 +1,4 @@
+module Common
+  class DownButtonComponent < ViewComponent::Base
+  end
+end

app/components/common/icon_component.html.erb

@@ -1,3 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="<%= @stroke_width %>" stroke="currentColor" class="shrink-0 <%= @classes.present? ? @classes : "w-6 h-6" %>">
-  <path stroke-linecap="round" stroke-linejoin="round" d="<%= @svg %>" />
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="<%= @stroke_width %>" stroke="currentColor" class="shrink-0 <%= @classes.presence || "w-6 h-6" %>">
+  <% if @svg.class == Array %>
+    <% @svg.each do |svg| %>
+      <path stroke-linecap="round" stroke-linejoin="round" d="<%= svg %>" />
+    <% end %>
+  <% else %>
+    <path stroke-linecap="round" stroke-linejoin="round" d="<%= @svg %>" />
+  <% end %>
 </svg>

app/components/common/icon_component.rb

@@ -23,9 +23,11 @@ class IconComponent < ViewComponent::Base
       "exclamation-triangle" => "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
       "clock" => "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
       "cloud-arrow-down" => "M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z",
+      "tag" => ["M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z", "M6 6h.008v.008H6V6Z"],
+      "bookmark" => "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z",
       "paper-airplane" => "M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5",
       "document-arrow-down" => "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12 3 3m0 0 3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z",
-      "folder-arrow-down" => "m9 13.5 3 3m0 0 3-3m-3 3v-6m1.06-4.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      "folder-arrow-down" => "m9 13.5 3 3m0 0 3-3m-3 3v-6m1.06-4.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z",
     }.freeze
 
     def initialize(icon, classes: "", stroke_width: 1.5)

app/components/common/up_button_component.html.erb

@@ -0,0 +1,3 @@
+<div class="flex justify-center items-center flex-grow-0 flex-shrink-0 relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-white border border-gray-300 hover:bg-gray-100">
+  <%= render Icons::ChevronUpComponent.new %>
+</div>

app/components/common/up_button_component.rb

@@ -0,0 +1,4 @@
+module Common
+  class UpButtonComponent < ViewComponent::Base
+  end
+end

app/components/filters/filter_form_component.html.erb

@@ -10,15 +10,26 @@
           <%= render Common::CloseButtonComponent.new(link_to: filters_path) %>
         </div>
         <%= form_with model: @filter, data: { turbo_frame: "_top" } do |form| %>
+          <%= form.hidden_field :type %>
           <div class="flex flex-col justify-start items-start self-stretch w-96">
             <div class="flex justify-start items-center self-stretch gap-4 p-6">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.text_field :name, placeholder: "Názov filtra", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.label :name, "Názov filtra" %>
+                <%= form.text_field :name, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
+            <% if @filter.is_a? FulltextFilter %>
+              <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+                <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                  <%= form.label :query, "Dopyt na vyhľadávanie" %>
+                  <%= form.text_field :query, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                </div>
+              </div>
+            <% end %>
             <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.text_field :query, placeholder: "Dopyt na vyhľadávanie", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.label :icon, "Icona" %>
+                <%= form.select :icon, helpers.icon_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
           </div>

app/components/filters/filters_list_row_component.html.erb

@@ -1,20 +1,28 @@
 <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
   <div class="relative inline-flex items-center justify-center w-16 h-16 overflow-hidden bg-blue-600 rounded-full">
-    <span class="text-white text-2xl font-normal"><%= @filter.name[0] %></span>
+    <% if (@filter.icon || @filter.tag&.icon).presence %>
+      <%= render Common::IconComponent.new(@filter.icon || @filter.tag.icon, classes: "w-6 h-6 stroke-gray-300", stroke_width: 2) %>
+    <% else %>
+      <span class="text-white text-2xl font-normal"><%= @filter.name[0] %></span>
+    <% end %>
   </div>
   <div class="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
     <div class="text-center text-gray-900 text-lg font-medium leading-loose">
       <%= render Common::InlineRenameComponent.new(name: @filter.name, model: @filter) %>
     </div>
     <div class="text-center text-gray-500 text-base font-normal leading-normal">
-      <%= @filter.query %>
+      <% if @filter.is_a? TagFilter %>
+        <%= render Common::TagComponent.new(@filter.tag) %>
+      <% else %>
+        <%= @filter.query %>
+      <% end %>
     </div>
   </div>
   <div class="justify-start items-start gap-2 flex">
     <%= link_to edit_filter_path(@filter), title: "Upraviť filter" do %>
       <%= render Common::EditButtonComponent.new %>
     <% end %>
-    <%= link_to filter_path(@filter), title: "Zmazať filter", data: { turbo_confirm: "Naozaj?", turbo_method: :delete } do %>
+    <%= button_to filter_path(@filter), title: "Zmazať filter", method: :delete, data: { turbo_confirm: "Naozaj chcete zmazať filter?" } do %>
       <%= render Common::DeleteButtonComponent.new %>
     <% end %>
   </div>

app/components/icons/grip_component.html.erb

@@ -0,0 +1,3 @@
+<svg class="shrink-0 <%= @css_classes.present? ? @css_classes : "w-6 h-6" %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" stroke-width="<%= @stroke_width %>" stroke="currentColor" style="aspect-ratio: 1.6;">
+  <path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/>
+</svg>

app/components/icons/grip_component.rb

@@ -0,0 +1,6 @@
+class Icons::GripComponent < ViewComponent::Base
+  def initialize(css_classes: nil, stroke_width: 1.5)
+    @css_classes = css_classes
+    @stroke_width = stroke_width
+  end
+end

app/components/icons/star_component.html.erb

@@ -0,0 +1,7 @@
+<svg class="shrink-0 <%= @css_classes.present? ? @css_classes : "w-6 h-6" %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" stroke-width="<%= @stroke_width %>" stroke="currentColor">
+  <% if solid? %>
+    <path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>
+  <% elsif light? %>
+    <path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/>
+  <% end %>
+</svg>

app/components/icons/star_component.rb

@@ -0,0 +1,15 @@
+class Icons::StarComponent < ViewComponent::Base
+  def initialize(css_classes: nil, stroke_width: 1.5, variant: :solid)
+    @css_classes = css_classes
+    @stroke_width = stroke_width
+    @variant = variant
+  end
+
+  def solid?
+    @variant == :solid
+  end
+
+  def light?
+    @variant == :light
+  end
+end

app/components/layout/filter_list_component.html.erb

@@ -1,14 +1,30 @@
 <% if @filters.present? %>
-  <div class="flex flex-col justify-start items-start gap-2" data-test="filters">
-    <div class="flex justify-start items-start px-4 py-2">
-      <p class="text-sm text-center text-gray-400">Filtre</p>
-    </div>
+  <div
+    <% if @sortable %>
+    data-controller="sortable"
+    data-sortable-url-value="<%= sort_filters_path %>"
+    data-sortable-draggable-class=".item"
+    data-sortable-handle-class=".handle"
+    <% end %>
+    class="w-full flex flex-col justify-start items-start gap-2"
+    data-test="filters"
+    >
+    <% if @sortable %>
+      <%= link_to 'Sort', '', class: 'hidden', data: { turbo_method: :patch, sortable_target: 'submit', url: sort_filters_path } %>
+    <% end %>
+    <% if @label.present? %>
+      <div class="flex justify-start items-start px-4 py-2">
+        <p class="text-sm text-center text-gray-400"><%= @label %></p>
+      </div>
+    <% end %>
     <% @filters.each do |filter| %>
-      <% url = message_threads_path(q: filter.query) %>
-      <%= link_to url, class: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group w-72 flex gap-x-3 rounded-md p-2 px-4 text-sm leading-6 font-semibold data-[active=true]:bg-gray-50 data-[active=true]:text-indigo-600", data: { active: current_page?(url) } do %>
-        <%= render Icons::BookmarkComponent.new %>
-        <p class="truncate text-base font-medium"><%= filter.name %></p>
-      <% end %>
+      <%= render TW::SidebarMenuItemComponent.new(
+        name: filter.name,
+        url: filtered_message_threads_path(filter:),
+        icon: icon_for(filter),
+        variant: :light,
+        classes: "item #{!@sortable ? 'pl-4' : ''}",
+      ) %>
     <% end %>
   </div>
-<% end %>
+<% end %>

app/components/layout/filter_list_component.rb

@@ -1,5 +1,20 @@
 class Layout::FilterListComponent < ViewComponent::Base
-  def initialize(filters:)
+  include MessageThreadHelper
+
+  def initialize(label: nil, filters:, sortable: false)
+    @label = label
     @filters = filters
+    @sortable = sortable
+  end
+
+  def icon_for(filter)
+    return Common::IconComponent.new(filter.icon) if filter.icon.present?
+
+    if filter.tag_id.present?
+      return Common::IconComponent.new(filter.tag.icon) if filter.tag.icon.present?
+      return Icons::TagComponent.new
+    end
+
+    Icons::BookmarkComponent.new
   end
 end

app/components/message_threads_bulk_actions_component.html.erb

@@ -1,8 +1,7 @@
 <%= tag.turbo_frame id: "bulk_actions" do %>
   <div class="flex justify-stretch items-center gap-4 px-4 lg:py-4 border-t-0 border-r-0 border-b border-l-0 border-gray-200 min-h-[3rem] sm:min-h-[5rem]">
     <%= check_box_tag("", nil, false, { class: "hidden sm:block h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-0", type: "checkbox", id: "checkbox-all", data: { action: "all-checkboxes#toggle", "all-checkboxes-target": "checkbox" } }) %>
-
-    <span class="grow sm:text-xl text-base font-semibold text-left text-gray-900"><%= @ids.present? ? t(:selected_message, count: @ids.count) : "Správy v schránke" %>
+    <span class="grow sm:text-xl text-base font-semibold text-left text-gray-900"><%= title %>
       <% if @filter %>
         <% if @filter_subscription %>
           <%= link_to edit_filter_filter_subscription_path(@filter, @filter_subscription), title: "Nastaviť notifikácie", "data-turbo-frame": :modal, form_class: "inline" do %>

app/components/message_threads_bulk_actions_component.rb

@@ -1,8 +1,18 @@
 class MessageThreadsBulkActionsComponent < ViewComponent::Base
-  def initialize(ids:, signable:, filter: nil, filter_subscription: nil)
+  def initialize(ids: nil, signable:, filter: nil, query: nil, filter_subscription: nil)
     @ids = ids
     @signable = signable
     @filter = filter
+    @query = query
     @filter_subscription = filter_subscription
   end
+
+  def title
+    return t(:selected_message, count: @ids.count) if @ids.present?
+    return @filter.name if @filter.present? && @filter.is_a?(EverythingFilter)
+    return "Správy z filtra '#{@filter.name}'" if @filter.present?
+    return "Hľadaný výraz '#{@query}'" if @query.present?
+
+    "Správy v schránke"
+  end
 end

app/components/message_threads_table_component.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-col justify-stretch items-stretch gap-4 sm:p-4">
   <div class="flex flex-col justify-stretch items-stretch sm:rounded-md bg-white sm:border sm:border-gray-200" data-controller="form all-checkboxes">
-    <%= render MessageThreadsBulkActionsComponent.new(ids: [], filter: @filter, filter_subscription: @filter_subscription, signable: Current.user.signer?) %>
+    <%= render MessageThreadsBulkActionsComponent.new(ids: [], filter:, query:, filter_subscription:, signable: Current.user.signer?) %>
     <%= form_with url: bulk_actions_message_threads_path, data: { "form-target": "form", "all-checkboxes-target": "form" } do %>
       <ul role="list" id="message_threads" class="divide-y divide-gray-100">
         <% message_threads.each do |message_thread| %>

app/components/message_threads_table_component.rb

@@ -2,8 +2,11 @@ class MessageThreadsTableComponent < ViewComponent::Base
   renders_many :message_threads
   renders_one :next_page_area
 
-  def initialize(filter:, filter_subscription:)
+  attr_reader :filter, :query, :filter_subscription
+
+  def initialize(filter: nil, query: nil, filter_subscription:)
     @filter = filter
+    @query = query
     @filter_subscription = filter_subscription
   end
 end

app/components/settings/user_filter_visibilities/list_component.html.erb

@@ -0,0 +1,11 @@
+<div class="w-full p-4 flex-col justify-start items-start gap-4 inline-flex">
+  <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
+    <div class="flex-col self-stretch p-6 border-b border-gray-200 justify-start items-start gap-4 inline-flex">
+      <div class="grow shrink basis-0 text-gray-900 text-xl font-semibold leading-[35px]">Filtre</div>
+      Nastavte si osobnú preferenciu viditeľnosti filtrov v ľavom menu
+    </div>
+    <div class="self-stretch flex-col justify-start items-start flex">
+      <%= render Settings::UserFilterVisibilities::ListRowComponent.with_collection(@visibilities) %>
+    </div>
+  </div>
+</div>

app/components/settings/user_filter_visibilities/list_component.rb

@@ -0,0 +1,5 @@
+class Settings::UserFilterVisibilities::ListComponent < ViewComponent::Base
+  def initialize(visibilities)
+    @visibilities = visibilities
+  end
+end