Blank results visualization

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

@@ -9,6 +9,7 @@
     <div class="self-stretch flex-col justify-start items-start flex">
       <%= render Admin::Tags::TagsListRowComponent.with_collection(@simple_tags) %>
     </div>
+    <%= blank_results_area %>
   </div>
   <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
     <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">

app/components/admin/tags/tags_list_component.rb

@@ -1,4 +1,5 @@
 class Admin::Tags::TagsListComponent < ViewComponent::Base
+  renders_one :blank_results_area
   def initialize(simple_tags:)
     @simple_tags = simple_tags
   end

app/components/common/blank_results_component.html.erb

@@ -0,0 +1,9 @@
+<div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0">
+  <div class="flex flex-col justify-center items-center self-stretch flex-grow-0 flex-shrink-0 relative gap-6 px-6 py-12 bg-white">
+    <%= render Common::IconComponent.new(@icon, classes: "size-32 text-gray-500") %>
+    <div class="flex flex-col justify-center items-center flex-grow-0 flex-shrink-0 relative gap-1">
+      <p class="flex-grow-0 flex-shrink-0 text-base font-semibold text-center text-gray-500"><%= @text1 %></p>
+      <p class="flex-grow-0 flex-shrink-0 text-base text-center text-gray-500"><%= @text2 %></p>
+    </div>
+  </div>
+</div>

app/components/common/blank_results_component.rb

@@ -0,0 +1,20 @@
+module Common
+  class BlankResultsComponent < ViewComponent::Base
+    def initialize(reason = :not_found)
+      case reason
+      when :empty
+        @text1 = "Žiadne záznamy"
+        @text2 = "Zatiaľ nie sú vytvorené žiadne záznamy"
+        @icon = "hand-thumb-up"
+      when :not_found
+        @text1 = "Žiadne výsledky"
+        @text2 = "Skúste zmeniť filter alebo vyhľadávané slová"
+        @icon = "magnifying-glass"
+      when :all_done
+        @text1 = "Všetko je hotové"
+        @text2 = "Nemáte žiadnu novú správu"
+        @icon = "hand-thumb-up"
+      end
+    end
+  end
+end

app/components/common/icon_component.rb

@@ -21,7 +21,9 @@ class IconComponent < ViewComponent::Base
       "shield-check" => "M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z",
       "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"
+      "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",
+      "hand-thumb-up" => "M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z",
+      "magnifying-glass" => "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
     }.freeze
 
     def initialize(icon, classes: "", stroke_width: 1.5)

app/components/layout/filter_list_component.html.erb

@@ -4,7 +4,7 @@
       <p class="text-sm text-center text-gray-400">Filtre</p>
     </div>
     <% @filters.each do |filter| %>
-      <% url = message_threads_path(q: filter.query) %>
+      <% url = message_threads_path(q: filter.query, referrer: :menu) %>
       <%= 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>

app/components/layout/tag_list_component.html.erb

@@ -3,7 +3,7 @@
     <p class="text-sm text-center text-gray-400">Štítky</p>
   </div>
   <% @tags.each do |tag| %>
-    <% url = message_threads_path(q: "label:(#{tag.name})") %>
+    <% url = message_threads_path(q: "label:(#{tag.name})", referrer: :menu) %>
     <%= 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::TagComponent.new %>
       <p class="truncate text-base font-medium"><%= tag.name %></p>

app/components/message_threads_table_component.html.erb

@@ -1,13 +1,14 @@
 <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?) %>
-    <%= form_with url: bulk_actions_message_threads_path, data: { "form-target": "form", "all-checkboxes-target": "form" } do %>
+    <%= 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| %>
           <%= message_thread %>
         <% end %>
       </ul>
       <%= next_page_area %>
     <% end %>
+    <%= blank_results_area %>
   </div>
 </div>

app/components/message_threads_table_component.rb

@@ -1,6 +1,7 @@
 class MessageThreadsTableComponent < ViewComponent::Base
   renders_many :message_threads
   renders_one :next_page_area
+  renders_one :blank_results_area
 
   def initialize(filter:, filter_subscription:)
     @filter = filter

app/components/settings/rules/automation_rules_list_component.html.erb

@@ -13,6 +13,7 @@
         <% end %>
       </div>
     </div>
+    <%= blank_results_area %>
     <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
       <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
         <div class="w-8 h-8 relative">

app/components/settings/rules/automation_rules_list_component.rb

@@ -1,3 +1,4 @@
 class Settings::Rules::AutomationRulesListComponent < ViewComponent::Base
   renders_many :automation_rules
+  renders_one :blank_results_area
 end

app/controllers/message_threads_controller.rb

@@ -125,11 +125,11 @@ def search_permissions
   end
 
   def message_thread_params
-    params.require(:message_thread).permit(:title, :original_title, :merge_uuids, :tag_id, :tags)
+    params.require(:message_thread).permit(:title, :original_title, :merge_uuids, :tag_id, :tags, :referrer)
   end
 
   def search_params
-    params.permit(:q, :format, cursor: MessageThreadCollection::CURSOR_PARAMS)
+    params.permit(:q, :format, :referrer, cursor: MessageThreadCollection::CURSOR_PARAMS)
   end
 
   def set_thread_tags

app/views/admin/boxes/index.html.erb

@@ -14,32 +14,35 @@
           <% end %>
         </div>
       </div>
-
-      <div class="flex-col justify-start items-start flex">
-        <% @boxes.each do |box| %>
-          <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
-            <div class="grow 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::BoxLabelComponent.new(box, "items-start justify-start gap-0") %>
-              </div>
-              <div class="text-center text-gray-500 text-base font-normal leading-normal">
-                <%= box.name %>, <%= box.uri %>
+      <% if @boxes.any? %>
+        <div class="flex-col justify-start items-start flex">
+          <% @boxes.each do |box| %>
+            <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
+              <div class="grow 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::BoxLabelComponent.new(box, "items-start justify-start gap-0") %>
+                </div>
+                <div class="text-center text-gray-500 text-base font-normal leading-normal">
+                  <%= box.name %>, <%= box.uri %>
+                </div>
               </div>
-            </div>
 
-            <div class="justify-start items-start gap-2 flex">
-              <%= link_to edit_admin_tenant_box_path(box.tenant, box), data: { turbo_frame: "modal" } do %>
-                <%= render Common::EditButtonComponent.new %>
-              <% end %>
-              <%= button_to admin_tenant_box_path(box.tenant, box),
+              <div class="justify-start items-start gap-2 flex">
+                <%= link_to edit_admin_tenant_box_path(box.tenant, box), data: { turbo_frame: "modal" } do %>
+                  <%= render Common::EditButtonComponent.new %>
+                <% end %>
+                <%= button_to admin_tenant_box_path(box.tenant, box),
                             method: :delete,
                             data: { turbo_confirm: "Naozaj odstrániť schránku \"#{box.name}\"?" } do %>
-                <%= render Common::DeleteButtonComponent.new %>
-              <% end %>
+                  <%= render Common::DeleteButtonComponent.new %>
+                <% end %>
+              </div>
             </div>
-          </div>
-        <% end %>
-      </div>
+          <% end %>
+        </div>
+      <% else %>
+        <%= render Common::BlankResultsComponent.new(:empty) %>
+      <% end %>
 
     </div>
   </div>

app/views/admin/tags/index.html.erb

@@ -1 +1,7 @@
-<%= render Admin::Tags::TagsListComponent.new(simple_tags: @simple_tags) %>
+<%= render Admin::Tags::TagsListComponent.new(simple_tags: @simple_tags) do |component| %>
+  <% if @simple_tags.empty? %>
+    <% component.with_blank_results_area do %>
+      <%= render Common::BlankResultsComponent.new(:empty) %>
+    <% end %>
+  <% end %>
+<% end %>

app/views/filters/index.html.erb

@@ -1 +1,5 @@
-<%= render Filters::FiltersListComponent.new(@filters) %>
+<% if @filters.any? %>
+  <%= render Filters::FiltersListComponent.new(@filters) %>
+<% else %>
+  <%= render Common::BlankResultsComponent.new(:empty) %>
+<% end %>

app/views/message_threads/index.html.erb

@@ -3,14 +3,23 @@
     <meta name="turbo-visit-control" content="reload">
   <% end %>
 <% end %>
-
 <%= render MessageThreadsTableComponent.new(filter: @filter, filter_subscription: @filter_subscription) do |component| %>
-  <% component.with_message_thread do %>
-    <%= render MessageThreadsTableRowComponent.with_collection(@message_threads) %>
-  <% end %>
-  <% if @next_cursor %>
-    <% component.with_next_page_area do %>
-      <%= render Turbo::NextPageAreaComponent.new(id: @next_cursor, url: scroll_message_threads_url(@next_page_params)) %>
+  <% if @message_threads.any? %>
+    <% component.with_message_thread do %>
+      <%= render MessageThreadsTableRowComponent.with_collection(@message_threads) %>
+    <% end %>
+    <% if @next_cursor %>
+      <% component.with_next_page_area do %>
+        <%= render Turbo::NextPageAreaComponent.new(id: @next_cursor, url: scroll_message_threads_url(@next_page_params)) %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <% component.with_blank_results_area do %>
+      <% if params[:referrer] == "menu" %>
+        <%= render Common::BlankResultsComponent.new(:all_done) %>
+      <% else %>
+        <%= render Common::BlankResultsComponent.new(:not_found) %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

app/views/settings/automation_rules/index.html.erb

@@ -1,7 +1,13 @@
 <%= render Settings::Rules::AutomationRulesListComponent.new do |component| %>
-  <% @automation_rules.each do |automation_rule| %>
-    <% component.with_automation_rule do %>
-      <%= render Settings::Rules::AutomationRulesTableRowComponent.new(automation_rule) %>
+  <% if @automation_rules.any? %>
+    <% @automation_rules.each do |automation_rule| %>
+      <% component.with_automation_rule do %>
+        <%= render Settings::Rules::AutomationRulesTableRowComponent.new(automation_rule) %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <% component.with_blank_results_area do %>
+      <%= render Common::BlankResultsComponent.new(:empty) %>
     <% end %>
   <% end %>
 <% end %>