From 010b6fb1735399b50b7046dbd3a45bdf99134f9e Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 20 Jun 2023 13:15:23 +0200
Subject: [PATCH 1/7] Add basic filter feature

---
 app/controllers/contributors_controller.rb | 19 +++++++++++++++----
 app/views/contributors/index.html.erb      | 20 ++++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/controllers/contributors_controller.rb b/app/controllers/contributors_controller.rb
index af03e7f52..c9a72e1bc 100644
--- a/app/controllers/contributors_controller.rb
+++ b/app/controllers/contributors_controller.rb
@@ -14,11 +14,15 @@ def message
   end
 
   def index
-    @filter = filter_param
+    @state = state_params
+    @tag_list = tag_list_params
+
     @active_count = Contributor.active.count
     @inactive_count = Contributor.inactive.count
+    @available_tags = Contributor.all_tags_with_count.to_json
 
-    @contributors = @filter == :inactive ? Contributor.inactive : Contributor.active
+    @contributors = @state == :inactive ? Contributor.inactive : Contributor.active
+    @contributors = @contributors.with_tags(tag_list_params)
     @contributors = @contributors.with_attached_avatar.includes(:tags)
   end
 
@@ -73,14 +77,21 @@ def count_params
     params.permit(tag_list: [])
   end
 
-  def filter_param
-    value = params.permit(:filter)[:filter]&.to_sym
+  def state_params
+    value = params.permit(:state)[:state]&.to_sym
 
     return :active unless %i[active inactive].include?(value)
 
     value
   end
 
+  def tag_list_params
+    value = params.permit(tag_list: [])[:tag_list]
+    return [] if value.blank?
+
+    value&.reject(&:empty?)
+  end
+
   def handle_failed_update
     flash.now[:error] = I18n.t('contributor.invalid', name: contributor.name)
 
diff --git a/app/views/contributors/index.html.erb b/app/views/contributors/index.html.erb
index d08c20797..cdcfa3931 100644
--- a/app/views/contributors/index.html.erb
+++ b/app/views/contributors/index.html.erb
@@ -17,20 +17,32 @@
 
     <% header.tab_bar do %>
       <%= c('tab_bar', items: {
-        contributors_path => {
+        contributors_path(tag_list: @tag_list.present? ? @tag_list : nil) => {
           label: "Aktiv",
-          active: @filter == :active,
+          active: @state == :active,
           count: @active_count,
         },
-        contributors_path(filter: :inactive) => {
+        contributors_path(state: :inactive, tag_list: @tag_list.present? ? @tag_list : nil) => {
           label: "Inaktiv",
-          active: @filter == :inactive,
+          active: @state == :inactive,
           count: @inactive_count,
         },
       }) %>
     <% end %>
   <% end %>
 
+  <%= c 'section' do %>
+    <%= c 'heading' do %>
+      Filter by tag
+    <% end %>
+    <%= c 'form', url: contributors_path, method: 'get', multiple: true do %>
+      <%= hidden_field_tag :state, @state  %>
+
+      <%= c 'tags_input', available_tags: @available_tags, allow_new: false, name: 'tag_list[]', value: @tag_list %>
+      <%= c 'submit_button', label: 'Filter' %>
+    <% end %>
+  <% end %>
+
   <%= c 'section' do %>
     <% @contributors.each do |contributor| %>
       <%= c 'contributor_row', contributor: contributor %>

From 9aad16babb31d22ab68c1cca3985bf0a6cc6ef81 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 21 Jun 2023 10:18:47 +0200
Subject: [PATCH 2/7] Update TabBar to accept buttons, add filter button

---
 app/components/tab_bar/tab_bar.html.erb | 14 +++++-----
 app/components/tab_bar/tab_bar.js       | 15 +++++++++++
 app/views/contributors/index.html.erb   | 36 ++++++++++++++-----------
 app/views/requests/index.html.erb       | 10 ++++---
 public/icons.svg                        |  1 +
 5 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 app/components/tab_bar/tab_bar.js

diff --git a/app/components/tab_bar/tab_bar.html.erb b/app/components/tab_bar/tab_bar.html.erb
index 65f5ebfd0..fc0f0e0d2 100644
--- a/app/components/tab_bar/tab_bar.html.erb
+++ b/app/components/tab_bar/tab_bar.html.erb
@@ -1,17 +1,19 @@
-<nav class="TabBar">
+<nav class="TabBar" data-controller="tab-bar">
   <ul>
-    <% items.each do |url, options| %>
+    <% items.each do |options| %>
       <li class="TabBar-item <%= 'TabBar-item--active' if options.dig(:active) %>">
-        <a href="<%= url %>">
-          <%= options.dig(:label) %>
-
+        <%= c 'button', label: options.dig(:label), link: options.dig(:url), styles: [:inline], data: options.dig(:data) do %>
           <% if options.key?(:count) %>
             <span class="TabBar-count">
               <%= options[:count] %>
             </span>
           <% end %>
-        </a>
+          <% if options.key?(:icon) %>
+            <%= c 'icon', icon: options.dig(:icon), styles: [:inline] %>
+          <% end %>
+        <% end %>
       </li>
     <% end %>
   </ul>
+  <%= content %>
 </nav>
diff --git a/app/components/tab_bar/tab_bar.js b/app/components/tab_bar/tab_bar.js
new file mode 100644
index 000000000..4ef735ac5
--- /dev/null
+++ b/app/components/tab_bar/tab_bar.js
@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['filterSection'];
+
+  connect() {
+    const searchParams = new URL(document.location).searchParams;
+    const tagList = searchParams.get('tag_list[]');
+    this.filterSectionTarget.hidden = !(tagList && tagList.length > 0);
+  }
+
+  toggleFilterSection() {
+    this.filterSectionTarget.hidden = !this.filterSectionTarget.hidden;
+  }
+}
diff --git a/app/views/contributors/index.html.erb b/app/views/contributors/index.html.erb
index cdcfa3931..b966b3cc5 100644
--- a/app/views/contributors/index.html.erb
+++ b/app/views/contributors/index.html.erb
@@ -16,30 +16,36 @@
     %>
 
     <% header.tab_bar do %>
-      <%= c('tab_bar', items: {
-        contributors_path(tag_list: @tag_list.present? ? @tag_list : nil) => {
+      <%= c('tab_bar', items: [
+        {
+          url: contributors_path(tag_list: @tag_list.present? ? @tag_list : nil),
           label: "Aktiv",
           active: @state == :active,
           count: @active_count,
         },
-        contributors_path(state: :inactive, tag_list: @tag_list.present? ? @tag_list : nil) => {
+        {
+          url: contributors_path(state: :inactive, tag_list: @tag_list.present? ? @tag_list : nil),
           label: "Inaktiv",
           active: @state == :inactive,
           count: @inactive_count,
         },
-      }) %>
-    <% end %>
-  <% end %>
-
-  <%= c 'section' do %>
-    <%= c 'heading' do %>
-      Filter by tag
-    <% end %>
-    <%= c 'form', url: contributors_path, method: 'get', multiple: true do %>
-      <%= hidden_field_tag :state, @state  %>
+        {
+          icon: "filter-tool",
+          data: { action: 'tab-bar#toggleFilterSection' }
+        }
+      ]) do %>
+        <%= c 'section', data: { tab_bar_target: 'filterSection' }, hidden: true do %>
+          <%= c 'heading' do %>
+            Filter by tag
+          <% end %>
+          <%= c 'form', url: contributors_path, method: 'get', multiple: true do %>
+            <%= hidden_field_tag :state, @state  %>
 
-      <%= c 'tags_input', available_tags: @available_tags, allow_new: false, name: 'tag_list[]', value: @tag_list %>
-      <%= c 'submit_button', label: 'Filter' %>
+            <%= c 'tags_input', available_tags: @available_tags, allow_new: false, name: 'tag_list[]', value: @tag_list %>
+            <%= c 'submit_button', label: 'Filter' %>
+          <% end %>
+        <% end %>
+      <% end %>
     <% end %>
   <% end %>
 
diff --git a/app/views/requests/index.html.erb b/app/views/requests/index.html.erb
index 8cb4dea96..fa9c50e13 100644
--- a/app/views/requests/index.html.erb
+++ b/app/views/requests/index.html.erb
@@ -10,18 +10,20 @@
     <%= c 'new_request_link' %>
 
     <% header.tab_bar do %>
-      <%= c('tab_bar', items: {
-        requests_path => {
+      <%= c('tab_bar', items: [
+        {
+          url: requests_path,
           label: "Gestellt",
           active: @filter == :sent,
           count: @sent_requests_count
         },
-        requests_path(filter: :planned) => {
+        {
+          url: requests_path(filter: :planned),
           label: "Geplant",
           active: @filter == :planned,
           count: @planned_requests_count
         },
-      }) %>
+      ]) %>
     <% end %>
   <% end %>
 
diff --git a/public/icons.svg b/public/icons.svg
index 0cde8b5db..96c949f44 100644
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -23,6 +23,7 @@
   <symbol id="icon-attach-glyph-24" viewBox="0 0 24 24"><g transform="translate(0, 0)"><path d="M11.5,24C7.4,24,4,20.6,4,16.5v-11C4,2.5,6.5,0,9.5,0S15,2.5,15,5.5v10c0,1.9-1.6,3.5-3.5,3.5S8,17.4,8,15.5 V7c0-0.6,0.4-1,1-1s1,0.4,1,1v8.5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5v-10C13,3.6,11.4,2,9.5,2S6,3.6,6,5.5v11 c0,3,2.5,5.5,5.5,5.5s5.5-2.5,5.5-5.5V4c0-0.6,0.4-1,1-1s1,0.4,1,1v12.5C19,20.6,15.6,24,11.5,24z"></path></g></symbol>
   <symbol id="icon-pen-glyph-24" viewBox="0 0 24 24"><g transform="translate(0, 0)"><path d="M13.086,5.5L3.293,15.293c-.109,.11-.192,.244-.241,.391l-2,6c-.12,.359-.026,.756,.241,1.023,.19,.191,.446,.293,.707,.293,.105,0,.213-.017,.316-.051l6-2c.147-.049,.281-.132,.391-.242l9.793-9.793-5.414-5.414Z" fill="#444444"></path><path data-color="color-2" d="M22.414,4.172l-2.586-2.586c-.779-.78-2.049-.78-2.828,0l-2.5,2.5,5.414,5.414,2.5-2.5c.378-.378,.586-.88,.586-1.414s-.208-1.037-.586-1.414Z" fill="#444444"></path></g></symbol>
   <symbol id="icon-hamburger-menu-glyph-24" viewBox="0 0 24 24"><title>menu 8</title><g transform="translate(0, 0)"><path data-color="color-2" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"/><path d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"/><path d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"/></g></symbol>
+  <symbol id="icon-filter-tool-glyph-24" viewBox="0 0 24 24"><title>filter tool</title><g transform="translate(0, 0)"><path data-color="color-2" d="M20,8H4C3.447,8,3,8.447,3,9s0.447,1,1,1h16c0.553,0,1-0.447,1-1S20.553,8,20,8z"/><path fill="currentColor" d="M23,2H1C0.447,2,0,2.447,0,3s0.447,1,1,1h22c0.553,0,1-0.447,1-1S23.553,2,23,2z"/><path fill="currentColor" d="M17,14H7c-0.553,0-1,0.447-1,1s0.447,1,1,1h10c0.553,0,1-0.447,1-1S17.553,14,17,14z"/><path data-color="color-2" d="M14,20h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4c0.553,0,1-0.447,1-1S14.553,20,14,20z"/></g></symbol>
 
   <!-- Size: 36, self-designed icons -->
   <symbol id="icon-community-glyph-36" viewBox="0 0 36 36"><g fill="#FF00A0" fill-rule="nonzero"><path d="M8.434 15.334c-1.396.09-2.607 1.146-2.573 2.654.034 1.543 1.195 2.67 2.65 2.679 1.408.009 2.374-1.076 2.5-2.472.142-1.586-1.115-2.798-2.577-2.861-.237-.01-.236.371 0 .382 1.267.054 2.106.96 2.209 2.237.102 1.267-.81 2.175-1.952 2.321-1.186.152-2.112-.676-2.393-1.827-.357-1.465.775-2.643 2.136-2.731.236-.016.237-.398 0-.382zM6.806 10.434c1.083.921 2.104 1.919 3.013 3.049.175.217.462-.102.288-.319-.932-1.16-1.983-2.174-3.095-3.119-.209-.177-.411.215-.206.389z"/><path d="M7.942 13.514c1.063-.727 2.013-1.555 3.016-2.336.194-.151-.098-.392-.292-.241-1.003.78-1.952 1.609-3.016 2.335-.205.14.088.38.292.242zM16.231 12.036c.328.4.588.865.914 1.269.269.332.428.32.732.048.955-.855 1.897-1.917 2.577-3.062.127-.214-.18-.412-.306-.2-.523.882-1.227 1.661-1.91 2.387-.16.17-.328.333-.497.492-.28.262-.325.089-.525-.176-.255-.336-.468-.713-.735-1.038-.154-.189-.404.092-.25.28zM25.735 10.397c1.153.845 2.075 2.018 3.002 3.09.176.203.47-.09.296-.293-.954-1.103-1.901-2.285-3.087-3.154-.217-.16-.425.2-.211.357z"/><path d="M26.843 13.493c.996-1.065 2.05-2.064 3.045-3.13.18-.193-.099-.494-.28-.3-.995 1.065-2.049 2.064-3.044 3.13-.18.193.098.494.28.3zM5.189 25.954c2.45.113 4.914-.008 7.365-.086a.201.201 0 0 0 .188-.208c-.008-1.248-.144-2.568-.528-3.744-.146-.45-.367-.9-.75-1.142-.396-.25-.983 0-1.382.11a4.09 4.09 0 0 1-1.883.097c-.634-.111-1.256-.463-1.853-.066-.492.327-.713 1.071-.875 1.638-.292 1.023-.383 2.129-.47 3.193-.022.267.354.265.375 0 .104-1.262.131-3.787 1.266-4.542.336-.223.899.059 1.244.136.266.06.536.1.806.13.39.044.775 0 1.156-.094.416-.101.962-.37 1.384-.26.45.119.648.967.757 1.374.272 1.011.37 2.116.378 3.17l.187-.21c-2.45.078-4.914.2-7.365.087-.243-.01-.242.406 0 .417zM17.897 15.334c-1.397.09-2.607 1.146-2.574 2.654.034 1.543 1.196 2.67 2.65 2.679 1.408.009 2.375-1.076 2.5-2.472.142-1.586-1.114-2.798-2.576-2.861-.237-.01-.236.371 0 .382 1.267.054 2.105.96 2.208 2.237.102 1.268-.81 2.175-1.952 2.321-1.186.152-2.112-.676-2.392-1.827-.357-1.465.774-2.643 2.136-2.731.235-.016.237-.398 0-.382z"/><path d="M13.79 25.954c2.452.113 4.916-.008 7.366-.086a.201.201 0 0 0 .188-.208c-.008-1.248-.144-2.568-.528-3.744-.146-.45-.367-.9-.75-1.142-.396-.25-.983 0-1.382.11a4.09 4.09 0 0 1-1.883.097c-.634-.111-1.256-.463-1.853-.066-.492.327-.713 1.071-.875 1.638-.292 1.023-.383 2.129-.47 3.193-.022.267.354.265.376 0 .103-1.262.13-3.787 1.265-4.542.336-.223.899.059 1.244.136.266.06.536.1.806.13.39.044.775 0 1.155-.094.417-.101.963-.37 1.385-.26.45.119.648.967.757 1.374.272 1.011.37 2.116.378 3.17l.187-.21c-2.45.078-4.914.2-7.365.087-.242-.01-.242.406 0 .417zM28.22 15.334c-1.397.09-2.608 1.146-2.574 2.654.034 1.543 1.195 2.67 2.65 2.679 1.408.009 2.374-1.076 2.5-2.472.142-1.586-1.114-2.798-2.577-2.861-.237-.01-.236.371 0 .382 1.267.054 2.106.96 2.209 2.237.102 1.267-.81 2.175-1.952 2.321-1.186.152-2.112-.676-2.393-1.827-.357-1.465.775-2.643 2.136-2.731.236-.016.237-.398 0-.382z"/><path d="M24.113 25.954c2.452.113 4.915-.008 7.366-.086a.201.201 0 0 0 .188-.208c-.009-1.248-.145-2.568-.528-3.744-.147-.45-.367-.9-.751-1.142-.395-.25-.982 0-1.382.11a4.089 4.089 0 0 1-1.882.097c-.634-.111-1.257-.463-1.854-.066-.491.327-.713 1.071-.875 1.638-.292 1.023-.382 2.129-.47 3.193-.021.267.354.265.376 0 .104-1.262.13-3.788 1.266-4.542.335-.223.899.059 1.243.136.267.06.536.1.807.13.39.044.774 0 1.155-.094.416-.101.962-.37 1.385-.26.45.119.648.967.757 1.374.272 1.011.37 2.116.377 3.17l.188-.21c-2.451.078-4.914.2-7.366.087-.242-.01-.241.406 0 .417z"/></g></symbol>

From 7cd9003ece37060881c91f651fd92c194ea63f8d Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 21 Jun 2023 11:26:19 +0200
Subject: [PATCH 3/7] Add styling, localization

---
 app/components/tab_bar/tab_bar.css      | 21 +++++++++++++++++++--
 app/components/tab_bar/tab_bar.html.erb | 19 ++++++++++++-------
 app/views/contributors/index.html.erb   | 18 +++++++++++++-----
 config/locales/de.yml                   |  3 +++
 4 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/app/components/tab_bar/tab_bar.css b/app/components/tab_bar/tab_bar.css
index 4ac10135b..33bed7881 100644
--- a/app/components/tab_bar/tab_bar.css
+++ b/app/components/tab_bar/tab_bar.css
@@ -3,6 +3,15 @@
   margin-top: var(--spacing-unit-s);
 }
 
+.TabBar-list {
+  display: flex;
+  align-items: end;
+}
+
+.TabBar-item:nth-child(3) {
+  margin-left: calc(1.5 * var(--spacing-unit-xl));
+}
+
 .TabBar-item {
   display: inline-block;
   padding: var(--spacing-unit-xs) 0;
@@ -12,8 +21,8 @@
   transition: 0.1s all ease-out;
 }
 
-.TabBar-item + .TabBar-item {
-  margin-left: var(--spacing-unit-s);
+.TabBar-item:nth-child(even) {
+  margin-left: var(--spacing-unit);
 }
 
 .TabBar-item:not(.TabBar-item--active):hover {
@@ -35,3 +44,11 @@
   font-size: var(--font-size-xs);
   border-radius: var(--border-radius-full);
 }
+
+.TabBar-filterSection {
+  padding: 0;
+}
+
+.TabBar-filterSection > .Form > * + * {
+  margin-bottom: var(--spacing-unit-s);
+}
diff --git a/app/components/tab_bar/tab_bar.html.erb b/app/components/tab_bar/tab_bar.html.erb
index fc0f0e0d2..5c38bb3dc 100644
--- a/app/components/tab_bar/tab_bar.html.erb
+++ b/app/components/tab_bar/tab_bar.html.erb
@@ -1,17 +1,22 @@
 <nav class="TabBar" data-controller="tab-bar">
-  <ul>
+  <ul class="TabBar-list">
     <% items.each do |options| %>
       <li class="TabBar-item <%= 'TabBar-item--active' if options.dig(:active) %>">
-        <%= c 'button', label: options.dig(:label), link: options.dig(:url), styles: [:inline], data: options.dig(:data) do %>
-          <% if options.key?(:count) %>
-            <span class="TabBar-count">
-              <%= options[:count] %>
-            </span>
-          <% end %>
+        <%= c('button',
+          label: options.dig(:label),
+          link: options.dig(:url),
+          styles: [:inline],
+          data: options.dig(:data)
+        ) do %>
           <% if options.key?(:icon) %>
             <%= c 'icon', icon: options.dig(:icon), styles: [:inline] %>
           <% end %>
         <% end %>
+        <% if options.key?(:count) %>
+          <span class="TabBar-count">
+            <%= options.dig(:count) %>
+          </span>
+        <% end %>
       </li>
     <% end %>
   </ul>
diff --git a/app/views/contributors/index.html.erb b/app/views/contributors/index.html.erb
index b966b3cc5..eeb047dc3 100644
--- a/app/views/contributors/index.html.erb
+++ b/app/views/contributors/index.html.erb
@@ -34,15 +34,23 @@
           data: { action: 'tab-bar#toggleFilterSection' }
         }
       ]) do %>
-        <%= c 'section', data: { tab_bar_target: 'filterSection' }, hidden: true do %>
-          <%= c 'heading' do %>
-            Filter by tag
+        <%= c('section',
+          class: 'TabBar-filterSection',
+          data: { tab_bar_target: 'filterSection' },
+          hidden: true
+        ) do %>
+          <%= c 'heading', styles: [:beta] do %>
+            <%= t('contributor.filter_section.heading') %>
           <% end %>
-          <%= c 'form', url: contributors_path, method: 'get', multiple: true do %>
+          <%= c('form',
+            url: contributors_path,
+            method: 'get',
+            multiple: true
+          ) do %>
             <%= hidden_field_tag :state, @state  %>
 
             <%= c 'tags_input', available_tags: @available_tags, allow_new: false, name: 'tag_list[]', value: @tag_list %>
-            <%= c 'submit_button', label: 'Filter' %>
+            <%= c 'submit_button', styles: [:secondary], label: t('contributor.filter_section.submit_button') %>
           <% end %>
         <% end %>
       <% end %>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 23f460f5c..1a9bd2349 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -507,6 +507,9 @@ de:
     message-send: Nachricht an %{name} wurde verschickt
     skip_to_profile: Zum Profil springen
     subheading: Das sind die Mitglieder deiner Community
+    filter_section:
+      heading: Nach Tags filtern
+      submit_button: Filter
     form:
       first_name:
         label: Vorname

From 5732cfce5ff03b94a43378034388f9f0e8f23227 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 30 Jun 2023 07:29:55 +0200
Subject: [PATCH 4/7] Start implementing manual testing feedback from Jakob

---
 .../contributors_index/contributors_index.css |  7 ++
 .../contributors_index.html.erb               | 75 +++++++++++++++++++
 .../contributors_index.js}                    |  8 +-
 .../contributors_index/contributors_index.rb  | 23 ++++++
 .../contributors_list.html.erb                | 13 ++++
 .../contributors_list/contributors_list.rb    | 16 ++++
 .../empty_state/empty_state.html.erb          |  2 +-
 app/components/empty_state/empty_state.rb     |  9 +++
 app/components/tab_bar/tab_bar.css            |  8 --
 app/controllers/contributors_controller.rb    | 11 ++-
 app/views/contributors/index.html.erb         | 72 ++----------------
 config/locales/de.yml                         | 11 ++-
 12 files changed, 175 insertions(+), 80 deletions(-)
 create mode 100644 app/components/contributors_index/contributors_index.css
 create mode 100644 app/components/contributors_index/contributors_index.html.erb
 rename app/components/{tab_bar/tab_bar.js => contributors_index/contributors_index.js} (53%)
 create mode 100644 app/components/contributors_index/contributors_index.rb
 create mode 100644 app/components/contributors_list/contributors_list.html.erb
 create mode 100644 app/components/contributors_list/contributors_list.rb

diff --git a/app/components/contributors_index/contributors_index.css b/app/components/contributors_index/contributors_index.css
new file mode 100644
index 000000000..c3f5dbb86
--- /dev/null
+++ b/app/components/contributors_index/contributors_index.css
@@ -0,0 +1,7 @@
+.ContributorsIndex-filterSection {
+  padding: 0;
+}
+
+.ContributorsIndex-filterSection > .Form > * + * {
+  margin-bottom: var(--spacing-unit-s);
+}
diff --git a/app/components/contributors_index/contributors_index.html.erb b/app/components/contributors_index/contributors_index.html.erb
new file mode 100644
index 000000000..54b015577
--- /dev/null
+++ b/app/components/contributors_index/contributors_index.html.erb
@@ -0,0 +1,75 @@
+<%= c 'main', data: { controller: 'contributors-index' } do %>
+  <%= c 'page_header', styles: [:lightGrayBackground, :spaceBetween, :largeMarginBottom] do |header| %>
+    <div>
+      <%= c 'heading' do %>
+        <%= I18n.t 'contributor.contributor', count: :other %>
+      <% end %>
+      <p><%= t('contributor.subheading') %></p>
+    </div>
+
+    <%= c 'copy_button',
+      label: I18n.t('contributor.actions.copy_invite'),
+      styles: [:colorNavBar, :customIcon],
+      url: invites_url,
+      key: 'url',
+      custom_icon: 'onboarding-ticket'
+    %>
+
+    <% header.tab_bar do %>
+      <%= c('tab_bar', items: [
+        {
+          url: contributors_path(tag_list: tag_list.present? ? @tag_list : nil),
+          label: "Aktiv",
+          active: state == :active,
+          count: active_count,
+        },
+        {
+          url: contributors_path(state: :inactive, tag_list: tag_list.present? ? @tag_list : nil),
+          label: "Inaktiv",
+          active: state == :inactive,
+          count: inactive_count,
+        },
+        {
+          icon: "filter-tool",
+          data: { action: 'contributors-index#toggleFilterSection' }
+        }
+      ]) %>
+    <% end %>
+  <% end %>
+
+  <%= c('section',
+    class: 'ContributorsIndex-filterSection',
+    data: { contributors_index_target: 'filterSection' },
+    hidden: true
+  ) do %>
+    <%= c 'heading', styles: [:beta] do %>
+      <%= t('contributor.filter_section.heading') %>
+    <% end %>
+    <%= c('form',
+      url: contributors_path,
+      method: 'get',
+      multiple: true
+    ) do %>
+      <%= hidden_field_tag :state, state  %>
+
+      <%= c 'tags_input', available_tags: available_tags, allow_new: false, name: 'tag_list[]', value: tag_list %>
+      <%= c 'submit_button', styles: [:secondary], label: t('contributor.filter_section.submit_button') %>
+    <% end %>
+  <% end %>
+
+  <%= c 'section' do %>
+    <% if contributors.present? %>
+      <p
+        data-contributors-index-target="filterActiveText"
+        hidden
+      ><%= t('.filter_active_text', count: tag_list.size).html_safe %>
+      <strong>
+        <% tag_list.map do |tag| %>
+          <%= " (#{tag})" %>
+        <% end %>
+      </strong>
+      </p>
+    <% end %>
+    <%= c 'contributors_list', contributors: contributors, filter_active: tag_list.present? %>
+  <% end %>
+<% end %>
diff --git a/app/components/tab_bar/tab_bar.js b/app/components/contributors_index/contributors_index.js
similarity index 53%
rename from app/components/tab_bar/tab_bar.js
rename to app/components/contributors_index/contributors_index.js
index 4ef735ac5..f3eb0af92 100644
--- a/app/components/tab_bar/tab_bar.js
+++ b/app/components/contributors_index/contributors_index.js
@@ -1,12 +1,16 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['filterSection'];
+  static targets = ['filterSection', 'filterActiveText'];
 
   connect() {
     const searchParams = new URL(document.location).searchParams;
     const tagList = searchParams.get('tag_list[]');
-    this.filterSectionTarget.hidden = !(tagList && tagList.length > 0);
+    console.log('connected', tagList);
+    const showFilter = !(tagList && tagList.length > 0);
+    this.filterSectionTarget.hidden = showFilter;
+    if (this.hasFilterActiveText)
+      this.filterActiveTextTarget.hidden = showFilter;
   }
 
   toggleFilterSection() {
diff --git a/app/components/contributors_index/contributors_index.rb b/app/components/contributors_index/contributors_index.rb
new file mode 100644
index 000000000..97bc886a9
--- /dev/null
+++ b/app/components/contributors_index/contributors_index.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ContributorsIndex
+  class ContributorsIndex < ApplicationComponent
+    def initialize(contributors:, state:, active_count:, inactive_count:, tag_list: nil)
+      super
+
+      @contributors = contributors
+      @tag_list = tag_list
+      @state = state
+      @active_count = active_count
+      @inactive_count = inactive_count
+    end
+
+    private
+
+    attr_reader :contributors, :tag_list, :state, :active_count, :inactive_count
+
+    def available_tags
+      Contributor.all_tags_with_count.to_json
+    end
+  end
+end
diff --git a/app/components/contributors_list/contributors_list.html.erb b/app/components/contributors_list/contributors_list.html.erb
new file mode 100644
index 000000000..58f64bb17
--- /dev/null
+++ b/app/components/contributors_list/contributors_list.html.erb
@@ -0,0 +1,13 @@
+<% if contributors.empty? %>
+  <%= c 'empty_state', custom_icon: 'community' do %>
+    <% if filter_active %>
+      <p><%= t('.empty_state.filter_active') %></p>
+    <% else %>
+      <p><%= t('.empty_state.no_contributors') %></p>
+    <% end %>
+  <% end %>
+<% else %>
+  <% contributors.each do |contributor| %>
+    <%= c 'contributor_row', contributor: contributor %>
+  <% end %>
+<% end %>
diff --git a/app/components/contributors_list/contributors_list.rb b/app/components/contributors_list/contributors_list.rb
new file mode 100644
index 000000000..719d80a32
--- /dev/null
+++ b/app/components/contributors_list/contributors_list.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ContributorsList
+  class ContributorsList < ApplicationComponent
+    def initialize(contributors:, filter_active: false)
+      super
+
+      @contributors = contributors
+      @filter_active = filter_active
+    end
+
+    private
+
+    attr_reader :contributors, :filter_active
+  end
+end
diff --git a/app/components/empty_state/empty_state.html.erb b/app/components/empty_state/empty_state.html.erb
index 988c393b0..6682e124b 100644
--- a/app/components/empty_state/empty_state.html.erb
+++ b/app/components/empty_state/empty_state.html.erb
@@ -1,7 +1,7 @@
 <div class="EmptyState">
   <%= c 'box' do %>
     <div class="EmptyState-icon">
-      <%= c 'icon', icon: 'a-chat' %>
+      <%= c 'icon', icon: custom_icon || 'a-chat', size: custom_icon ? 36 : 24 %>
     </div>
 
     <%= c 'heading', tag: :p, styles: [:beta] do %>
diff --git a/app/components/empty_state/empty_state.rb b/app/components/empty_state/empty_state.rb
index 230a03051..bc3c4185a 100644
--- a/app/components/empty_state/empty_state.rb
+++ b/app/components/empty_state/empty_state.rb
@@ -2,5 +2,14 @@
 
 module EmptyState
   class EmptyState < ApplicationComponent
+    def initialize(custom_icon: nil, **)
+      super
+
+      @custom_icon = custom_icon
+    end
+
+    private
+
+    attr_reader :custom_icon
   end
 end
diff --git a/app/components/tab_bar/tab_bar.css b/app/components/tab_bar/tab_bar.css
index 33bed7881..ace353b90 100644
--- a/app/components/tab_bar/tab_bar.css
+++ b/app/components/tab_bar/tab_bar.css
@@ -44,11 +44,3 @@
   font-size: var(--font-size-xs);
   border-radius: var(--border-radius-full);
 }
-
-.TabBar-filterSection {
-  padding: 0;
-}
-
-.TabBar-filterSection > .Form > * + * {
-  margin-bottom: var(--spacing-unit-s);
-}
diff --git a/app/controllers/contributors_controller.rb b/app/controllers/contributors_controller.rb
index c9a72e1bc..6bafe0249 100644
--- a/app/controllers/contributors_controller.rb
+++ b/app/controllers/contributors_controller.rb
@@ -3,6 +3,7 @@
 class ContributorsController < ApplicationController
   before_action :set_contributor, only: %i[update destroy show edit message]
   before_action :count_params, only: :count
+  before_action :contributors_params, only: :index
 
   def message
     request = contributor.active_request
@@ -64,6 +65,10 @@ def set_contributor
     @contributor = Contributor.find(params[:id])
   end
 
+  def contributors_params
+    params.permit(:state, tag_list: [])
+  end
+
   def contributor_params
     params.require(:contributor).permit(:note, :first_name, :last_name, :avatar, :email, :threema_id, :phone, :zip_code, :city, :tag_list,
                                         :active, :additional_email)
@@ -78,7 +83,7 @@ def count_params
   end
 
   def state_params
-    value = params.permit(:state)[:state]&.to_sym
+    value = contributors_params[:state]&.to_sym
 
     return :active unless %i[active inactive].include?(value)
 
@@ -86,10 +91,10 @@ def state_params
   end
 
   def tag_list_params
-    value = params.permit(tag_list: [])[:tag_list]
+    value = contributors_params[:tag_list]
     return [] if value.blank?
 
-    value&.reject(&:empty?)
+    value.reject(&:empty?).first.split(',')
   end
 
   def handle_failed_update
diff --git a/app/views/contributors/index.html.erb b/app/views/contributors/index.html.erb
index eeb047dc3..016709df6 100644
--- a/app/views/contributors/index.html.erb
+++ b/app/views/contributors/index.html.erb
@@ -1,65 +1,7 @@
-<%= c 'main' do %>
-  <%= c 'page_header', styles: [:lightGrayBackground, :spaceBetween, :largeMarginBottom] do |header| %>
-    <div>
-      <%= c 'heading' do %>
-        <%= I18n.t 'contributor.contributor', count: :other %>
-      <% end %>
-      <p><%= t('contributor.subheading') %></p>
-    </div>
-
-    <%= c 'copy_button',
-      label: I18n.t('contributor.actions.copy_invite'),
-      styles: [:colorNavBar, :customIcon],
-      url: invites_url,
-      key: 'url',
-      custom_icon: 'onboarding-ticket'
-    %>
-
-    <% header.tab_bar do %>
-      <%= c('tab_bar', items: [
-        {
-          url: contributors_path(tag_list: @tag_list.present? ? @tag_list : nil),
-          label: "Aktiv",
-          active: @state == :active,
-          count: @active_count,
-        },
-        {
-          url: contributors_path(state: :inactive, tag_list: @tag_list.present? ? @tag_list : nil),
-          label: "Inaktiv",
-          active: @state == :inactive,
-          count: @inactive_count,
-        },
-        {
-          icon: "filter-tool",
-          data: { action: 'tab-bar#toggleFilterSection' }
-        }
-      ]) do %>
-        <%= c('section',
-          class: 'TabBar-filterSection',
-          data: { tab_bar_target: 'filterSection' },
-          hidden: true
-        ) do %>
-          <%= c 'heading', styles: [:beta] do %>
-            <%= t('contributor.filter_section.heading') %>
-          <% end %>
-          <%= c('form',
-            url: contributors_path,
-            method: 'get',
-            multiple: true
-          ) do %>
-            <%= hidden_field_tag :state, @state  %>
-
-            <%= c 'tags_input', available_tags: @available_tags, allow_new: false, name: 'tag_list[]', value: @tag_list %>
-            <%= c 'submit_button', styles: [:secondary], label: t('contributor.filter_section.submit_button') %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= c 'section' do %>
-    <% @contributors.each do |contributor| %>
-      <%= c 'contributor_row', contributor: contributor %>
-    <% end %>
-  <% end %>
-<% end %>
+<%= c 'contributors_index',
+  contributors: @contributors,
+  tag_list: @tag_list,
+  state: @state,
+  active_count: @active_count,
+  inactive_count: @inactive_count
+%>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 1a9bd2349..33deb26c4 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -345,6 +345,15 @@ de:
       truncate: ...
       next: Nächste
       last: Letzte
+    contributors_index:
+      filter_active_text:
+        one: "Das sind die Mitglieder deiner Community <strong>gefiltert nach dem Tag</strong>"
+        other: "Das sind die Mitglieder deiner Community <strong>gefiltert nach den Tags</strong>"
+    contributors_list:
+      empty_state:
+        no_contributors: Du hast noch keine Mitglieder, verschick du Einladungslinks.
+        filter_active: Keine Mitglieder mit diesen Filtern gefunden
+
 
   mailer:
     unsubscribe:
@@ -509,7 +518,7 @@ de:
     subheading: Das sind die Mitglieder deiner Community
     filter_section:
       heading: Nach Tags filtern
-      submit_button: Filter
+      submit_button: filtern
     form:
       first_name:
         label: Vorname

From 2242ed1bc447f1562b862f8fe3d304817e308ada Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 6 Jul 2023 14:09:47 +0200
Subject: [PATCH 5/7] Add clear all tags button, update contributor count

---
 app/components/button/button.css              |  6 +++
 .../contributors_index/contributors_index.css |  4 ++
 .../contributors_index.html.erb               | 37 ++++++++++++-------
 .../contributors_index/contributors_index.js  |  9 +++--
 .../contributors_index/contributors_index.rb  | 13 ++++++-
 app/components/tags_input/tags_input.html.erb |  1 +
 app/components/tags_input/tags_input.js       |  4 ++
 app/controllers/contributors_controller.rb    |  3 +-
 app/views/contributors/index.html.erb         |  3 +-
 config/locales/de.yml                         |  1 +
 10 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/app/components/button/button.css b/app/components/button/button.css
index 67ac81d78..5a0a95338 100644
--- a/app/components/button/button.css
+++ b/app/components/button/button.css
@@ -112,6 +112,12 @@
   padding: var(--input-padding);
 }
 
+.Button--warning {
+  --background-color: var(--color-orange-lightest);
+  --border-color: var(--color-orange);
+  --text-color: var(--color-orange-darkest);
+}
+
 .Button:disabled {
   background-color: var(--color-gray);
   pointer-events: none;
diff --git a/app/components/contributors_index/contributors_index.css b/app/components/contributors_index/contributors_index.css
index c3f5dbb86..9999bf0be 100644
--- a/app/components/contributors_index/contributors_index.css
+++ b/app/components/contributors_index/contributors_index.css
@@ -5,3 +5,7 @@
 .ContributorsIndex-filterSection > .Form > * + * {
   margin-bottom: var(--spacing-unit-s);
 }
+
+.ContributorsIndex-filterSection .Button {
+  margin-right: var(--spacing-unit-s);
+}
diff --git a/app/components/contributors_index/contributors_index.html.erb b/app/components/contributors_index/contributors_index.html.erb
index 54b015577..829609cbb 100644
--- a/app/components/contributors_index/contributors_index.html.erb
+++ b/app/components/contributors_index/contributors_index.html.erb
@@ -21,13 +21,13 @@
           url: contributors_path(tag_list: tag_list.present? ? @tag_list : nil),
           label: "Aktiv",
           active: state == :active,
-          count: active_count,
+          count: active_contributors_count,
         },
         {
           url: contributors_path(state: :inactive, tag_list: tag_list.present? ? @tag_list : nil),
           label: "Inaktiv",
           active: state == :inactive,
-          count: inactive_count,
+          count: inactive_contributors_count,
         },
         {
           icon: "filter-tool",
@@ -52,22 +52,31 @@
     ) do %>
       <%= hidden_field_tag :state, state  %>
 
-      <%= c 'tags_input', available_tags: available_tags, allow_new: false, name: 'tag_list[]', value: tag_list %>
-      <%= c 'submit_button', styles: [:secondary], label: t('contributor.filter_section.submit_button') %>
+      <%= c 'tags_input',
+        available_tags: available_tags,
+        allow_new: false, name: 'tag_list[]',
+        value: tag_list
+      %>
+      <%= c 'submit_button',
+        styles: [:secondary],
+        label: t('contributor.filter_section.submit_button')
+      %>
+      <%= c 'button',
+        styles: [:secondary, :warning],
+        label: t('contributor.filter_section.clear_button'),
+        data: { action: 'contributors-index#clearTags' }
+      %>
     <% end %>
   <% end %>
 
   <%= c 'section' do %>
-    <% if contributors.present? %>
-      <p
-        data-contributors-index-target="filterActiveText"
-        hidden
-      ><%= t('.filter_active_text', count: tag_list.size).html_safe %>
-      <strong>
-        <% tag_list.map do |tag| %>
-          <%= " (#{tag})" %>
-        <% end %>
-      </strong>
+    <% if contributors.present? && tag_list.present? %>
+      <p><%= t('.filter_active_text', count: tag_list.size).html_safe %>
+        <strong>
+          <% tag_list.map do |tag| %>
+            <%= " (#{tag})" %>
+          <% end %>
+        </strong>
       </p>
     <% end %>
     <%= c 'contributors_list', contributors: contributors, filter_active: tag_list.present? %>
diff --git a/app/components/contributors_index/contributors_index.js b/app/components/contributors_index/contributors_index.js
index f3eb0af92..3cee36608 100644
--- a/app/components/contributors_index/contributors_index.js
+++ b/app/components/contributors_index/contributors_index.js
@@ -1,19 +1,20 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['filterSection', 'filterActiveText'];
+  static targets = ['filterSection'];
 
   connect() {
     const searchParams = new URL(document.location).searchParams;
     const tagList = searchParams.get('tag_list[]');
-    console.log('connected', tagList);
     const showFilter = !(tagList && tagList.length > 0);
     this.filterSectionTarget.hidden = showFilter;
-    if (this.hasFilterActiveText)
-      this.filterActiveTextTarget.hidden = showFilter;
   }
 
   toggleFilterSection() {
     this.filterSectionTarget.hidden = !this.filterSectionTarget.hidden;
   }
+
+  clearTags() {
+    this.dispatch('clearTags', { bubbles: true });
+  }
 }
diff --git a/app/components/contributors_index/contributors_index.rb b/app/components/contributors_index/contributors_index.rb
index 97bc886a9..fd6572b63 100644
--- a/app/components/contributors_index/contributors_index.rb
+++ b/app/components/contributors_index/contributors_index.rb
@@ -2,7 +2,7 @@
 
 module ContributorsIndex
   class ContributorsIndex < ApplicationComponent
-    def initialize(contributors:, state:, active_count:, inactive_count:, tag_list: nil)
+    def initialize(contributors:, state:, active_count:, inactive_count:, filter_count:, tag_list: nil)
       super
 
       @contributors = contributors
@@ -10,14 +10,23 @@ def initialize(contributors:, state:, active_count:, inactive_count:, tag_list:
       @state = state
       @active_count = active_count
       @inactive_count = inactive_count
+      @filter_count = filter_count
     end
 
     private
 
-    attr_reader :contributors, :tag_list, :state, :active_count, :inactive_count
+    attr_reader :contributors, :tag_list, :state, :active_count, :inactive_count, :filter_count
 
     def available_tags
       Contributor.all_tags_with_count.to_json
     end
+
+    def active_contributors_count
+      tag_list.present? && state == :active ? filter_count : active_count
+    end
+
+    def inactive_contributors_count
+      tag_list.present? && state == :inactive ? filter_count : inactive_count
+    end
   end
 end
diff --git a/app/components/tags_input/tags_input.html.erb b/app/components/tags_input/tags_input.html.erb
index 26452a0aa..26bf6fa60 100644
--- a/app/components/tags_input/tags_input.html.erb
+++ b/app/components/tags_input/tags_input.html.erb
@@ -6,6 +6,7 @@
     tags_input_allow_new_value: allow_new,
     tags_input_available_tags_value: available_tags,
     tags_input_members_label_value: I18n.t('contributor.contributor').to_json,
+    action: 'contributors-index:clearTags@window->tags-input#clearTags'
   },
   **attrs
 %>
diff --git a/app/components/tags_input/tags_input.js b/app/components/tags_input/tags_input.js
index 69503901f..df288da8f 100644
--- a/app/components/tags_input/tags_input.js
+++ b/app/components/tags_input/tags_input.js
@@ -87,4 +87,8 @@ export default class extends Controller {
 
     this.element.dispatchEvent(event);
   }
+
+  clearTags() {
+    this.tagify.removeAllTags();
+  }
 }
diff --git a/app/controllers/contributors_controller.rb b/app/controllers/contributors_controller.rb
index 6bafe0249..b203fc391 100644
--- a/app/controllers/contributors_controller.rb
+++ b/app/controllers/contributors_controller.rb
@@ -24,6 +24,7 @@ def index
 
     @contributors = @state == :inactive ? Contributor.inactive : Contributor.active
     @contributors = @contributors.with_tags(tag_list_params)
+    @filter_count = @contributors.size
     @contributors = @contributors.with_attached_avatar.includes(:tags)
   end
 
@@ -92,7 +93,7 @@ def state_params
 
   def tag_list_params
     value = contributors_params[:tag_list]
-    return [] if value.blank?
+    return [] if value.blank? || value.all?(&:blank?)
 
     value.reject(&:empty?).first.split(',')
   end
diff --git a/app/views/contributors/index.html.erb b/app/views/contributors/index.html.erb
index 016709df6..38ab6a4ed 100644
--- a/app/views/contributors/index.html.erb
+++ b/app/views/contributors/index.html.erb
@@ -3,5 +3,6 @@
   tag_list: @tag_list,
   state: @state,
   active_count: @active_count,
-  inactive_count: @inactive_count
+  inactive_count: @inactive_count,
+  filter_count: @filter_count
 %>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 33deb26c4..4defecd66 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -519,6 +519,7 @@ de:
     filter_section:
       heading: Nach Tags filtern
       submit_button: filtern
+      clear_button: löschen
     form:
       first_name:
         label: Vorname

From 5fbd215a1db98496b11914fbda35f1b2d430eba8 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 13 Jul 2023 13:52:28 +0200
Subject: [PATCH 6/7] Follow PR review suggestions from @FrauCsu, add tests

---
 .../contributors_index.html.erb               | 20 +++---
 app/components/tab_bar/tab_bar.html.erb       | 14 ++--
 config/locales/de.yml                         |  2 +-
 spec/components/tab_bar_spec.rb               | 20 ++++--
 spec/system/contributors/filter_spec.rb       | 65 +++++++++++++++++--
 .../views/contributors/index.html.erb_spec.rb |  1 +
 6 files changed, 97 insertions(+), 25 deletions(-)

diff --git a/app/components/contributors_index/contributors_index.html.erb b/app/components/contributors_index/contributors_index.html.erb
index 829609cbb..cfabbabf3 100644
--- a/app/components/contributors_index/contributors_index.html.erb
+++ b/app/components/contributors_index/contributors_index.html.erb
@@ -18,7 +18,7 @@
     <% header.tab_bar do %>
       <%= c('tab_bar', items: [
         {
-          url: contributors_path(tag_list: tag_list.present? ? @tag_list : nil),
+          url: contributors_path(state: :active, tag_list: tag_list.present? ? @tag_list : nil),
           label: "Aktiv",
           active: state == :active,
           count: active_contributors_count,
@@ -30,6 +30,7 @@
           count: inactive_contributors_count,
         },
         {
+          label: I18n.t('contributor.filter_section.submit_button'),
           icon: "filter-tool",
           data: { action: 'contributors-index#toggleFilterSection' }
         }
@@ -42,9 +43,6 @@
     data: { contributors_index_target: 'filterSection' },
     hidden: true
   ) do %>
-    <%= c 'heading', styles: [:beta] do %>
-      <%= t('contributor.filter_section.heading') %>
-    <% end %>
     <%= c('form',
       url: contributors_path,
       method: 'get',
@@ -52,11 +50,15 @@
     ) do %>
       <%= hidden_field_tag :state, state  %>
 
-      <%= c 'tags_input',
-        available_tags: available_tags,
-        allow_new: false, name: 'tag_list[]',
-        value: tag_list
-      %>
+      <label>
+        <%= t('contributor.filter_section.heading') %>
+        <%= c 'tags_input',
+          id: 'ContributorsIndex-filterTagsInput',
+          available_tags: available_tags,
+          allow_new: false, name: 'tag_list[]',
+          value: tag_list
+        %>
+      </label>
       <%= c 'submit_button',
         styles: [:secondary],
         label: t('contributor.filter_section.submit_button')
diff --git a/app/components/tab_bar/tab_bar.html.erb b/app/components/tab_bar/tab_bar.html.erb
index 5c38bb3dc..661586d18 100644
--- a/app/components/tab_bar/tab_bar.html.erb
+++ b/app/components/tab_bar/tab_bar.html.erb
@@ -3,20 +3,22 @@
     <% items.each do |options| %>
       <li class="TabBar-item <%= 'TabBar-item--active' if options.dig(:active) %>">
         <%= c('button',
-          label: options.dig(:label),
           link: options.dig(:url),
           styles: [:inline],
           data: options.dig(:data)
         ) do %>
+          <% if options.key?(:label) %>
+            <%= options.dig(:label) %>
+          <% end %>
+          <% if options.key?(:count) %>
+            <span class="TabBar-count">
+              <%= options.dig(:count) %>
+            </span>
+          <% end %>
           <% if options.key?(:icon) %>
             <%= c 'icon', icon: options.dig(:icon), styles: [:inline] %>
           <% end %>
         <% end %>
-        <% if options.key?(:count) %>
-          <span class="TabBar-count">
-            <%= options.dig(:count) %>
-          </span>
-        <% end %>
       </li>
     <% end %>
   </ul>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 4defecd66..f31af22dd 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -519,7 +519,7 @@ de:
     filter_section:
       heading: Nach Tags filtern
       submit_button: filtern
-      clear_button: löschen
+      clear_button: leeren
     form:
       first_name:
         label: Vorname
diff --git a/spec/components/tab_bar_spec.rb b/spec/components/tab_bar_spec.rb
index 87b32c76f..9298e7438 100644
--- a/spec/components/tab_bar_spec.rb
+++ b/spec/components/tab_bar_spec.rb
@@ -7,10 +7,8 @@
   let(:params) { { items: items } }
 
   let(:items) do
-    {
-      '/a': { label: 'Link A', active: true },
-      '/b': { label: 'Link B' }
-    }
+    [{ url: '/a', label: 'Link A', active: true },
+     { url: '/b', label: 'Link B' }]
   end
 
   it { should have_css('.TabBar') }
@@ -24,8 +22,20 @@
   end
 
   context 'with counts' do
-    let(:items) { { '/a': { label: 'Link A', count: 3 } } }
+    let(:items) { [{ url: '/a', label: 'Link A', count: 3 }] }
 
     it { should have_css('.TabBar-item .TabBar-count', text: 3) }
   end
+
+  context 'without url' do
+    let(:items) { [{ label: 'Button A' }] }
+
+    it { should have_css('button.Button') }
+  end
+
+  context 'with icon' do
+    let(:items) { [{ icon: 'filter-tool' }] }
+
+    it { should have_css('.Icon.Icon--inline') }
+  end
 end
diff --git a/spec/system/contributors/filter_spec.rb b/spec/system/contributors/filter_spec.rb
index 50f744e18..6ccbac1cf 100644
--- a/spec/system/contributors/filter_spec.rb
+++ b/spec/system/contributors/filter_spec.rb
@@ -4,15 +4,15 @@
 
 RSpec.describe 'Filter contributors' do
   let(:user) { create(:user) }
-  let!(:active_contributor) { create(:contributor, active: true) }
-  let!(:inactive_contributor) { create(:contributor, active: false) }
+  let!(:active_contributor) { create(:contributor, active: true, tag_list: ['entwickler']) }
+  let!(:inactive_contributor) { create(:contributor, active: false, tag_list: ['entwickler']) }
   let!(:another_contributor) { create(:contributor, active: true) }
 
   it 'Editor lists contributors' do
     visit contributors_path(as: user)
 
-    expect(page).to have_link('Aktiv 2', href: contributors_path)
-    expect(page).to have_link('Inaktiv 1', href: contributors_path(filter: :inactive))
+    expect(page).to have_link('Aktiv 2', href: contributors_path(state: :active))
+    expect(page).to have_link('Inaktiv 1', href: contributors_path(state: :inactive))
 
     expect(page).to have_link(nil, href: contributor_path(active_contributor))
     expect(page).not_to have_link(nil, href: contributor_path(inactive_contributor))
@@ -21,6 +21,63 @@
 
     expect(page).to have_link(nil, href: contributor_path(inactive_contributor))
     expect(page).not_to have_link(nil, href: contributor_path(active_contributor))
+
+    click_on 'Aktiv'
+
+    expect(page).not_to have_link(nil, href: contributor_path(inactive_contributor))
+    expect(page).to have_link(nil, href: contributor_path(active_contributor))
+
+    expect(page).not_to have_css('.ContributorsIndex-filterSection')
+    click_on 'filtern'
+
+    expect(page).to have_css('.ContributorsIndex-filterSection')
+    find('.TagsInput').click
+    within('.TagsInput-dropdown') do
+      find('span', text: 'entwickler', match: :first).click
+    end
+
+    within('.ContributorsIndex-filterSection') do
+      click_on 'filtern'
+    end
+
+    expect(page).to have_css('.ContributorsIndex-filterSection')
+    expect(page).to have_content('Das sind die Mitglieder deiner Community gefiltert nach dem Tag (entwickler)')
+    expect(page).to have_link('Aktiv 1', href: contributors_path(state: :active, tag_list: ['entwickler']))
+    expect(page).to have_link(nil, href: contributor_path(active_contributor))
+    expect(page).not_to have_link(nil, href: contributor_path(another_contributor))
+
+    click_on 'leeren'
+
+    expect(page).not_to have_css('.ContributorsIndex-filterSection')
+    expect(page).not_to have_content('Das sind die Mitglieder deiner Community gefiltert nach dem Tag (entwickler)')
+    expect(page).to have_link('Aktiv 2', href: contributors_path(state: :active))
+    expect(page).to have_link(nil, href: contributor_path(active_contributor))
+    expect(page).to have_link(nil, href: contributor_path(another_contributor))
+
+    click_on 'filtern'
+
+    expect(page).to have_css('.ContributorsIndex-filterSection')
+    find('.TagsInput').click
+    within('.TagsInput-dropdown') do
+      find('span', text: 'entwickler', match: :first).click
+    end
+
+    within('.ContributorsIndex-filterSection') do
+      click_on 'filtern'
+    end
+
+    click_on 'Inaktiv'
+
+    expect(page).to have_css('.ContributorsIndex-filterSection')
+    expect(page).to have_content('Das sind die Mitglieder deiner Community gefiltert nach dem Tag (entwickler)')
+    expect(page).to have_link('Inaktiv 1', href: contributors_path(state: :inactive, tag_list: ['entwickler']))
+    expect(page).to have_link(nil, href: contributor_path(inactive_contributor))
+
+    within('.TabBar') do
+      click_on 'filtern'
+    end
+
+    expect(page).not_to have_css('.ContributorsIndex-filterSection')
   end
 
   it 'Editor views profile of an active contributor' do
diff --git a/spec/views/contributors/index.html.erb_spec.rb b/spec/views/contributors/index.html.erb_spec.rb
index ef87557c4..7bd7b64f7 100644
--- a/spec/views/contributors/index.html.erb_spec.rb
+++ b/spec/views/contributors/index.html.erb_spec.rb
@@ -5,6 +5,7 @@
 RSpec.describe 'contributors/index', type: :view do
   before(:each) do
     assign(:contributors, create_list(:contributor, 2))
+    assign(:tag_list, [])
   end
 
   it 'renders a list of contributors' do

From 217caaba42bb7c3019d16618a1829fc9e2ccd9f5 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 13 Jul 2023 14:19:45 +0200
Subject: [PATCH 7/7] Fix styling

---
 .../contributors_index/contributors_index.css          | 10 ++++++++--
 .../contributors_index/contributors_index.html.erb     |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/components/contributors_index/contributors_index.css b/app/components/contributors_index/contributors_index.css
index 9999bf0be..68828bb0f 100644
--- a/app/components/contributors_index/contributors_index.css
+++ b/app/components/contributors_index/contributors_index.css
@@ -2,8 +2,14 @@
   padding: 0;
 }
 
-.ContributorsIndex-filterSection > .Form > * + * {
-  margin-bottom: var(--spacing-unit-s);
+.ContributorsIndex-filterSectionLabel {
+  font-size: 1.25rem;
+  line-height: 1.25;
+  font-weight: 700;
+}
+
+.ContributorsIndex-filterSection .TagsInput {
+  margin: var(--spacing-unit-s) 0;
 }
 
 .ContributorsIndex-filterSection .Button {
diff --git a/app/components/contributors_index/contributors_index.html.erb b/app/components/contributors_index/contributors_index.html.erb
index cfabbabf3..019f3145d 100644
--- a/app/components/contributors_index/contributors_index.html.erb
+++ b/app/components/contributors_index/contributors_index.html.erb
@@ -50,7 +50,7 @@
     ) do %>
       <%= hidden_field_tag :state, state  %>
 
-      <label>
+      <label class="ContributorsIndex-filterSectionLabel">
         <%= t('contributor.filter_section.heading') %>
         <%= c 'tags_input',
           id: 'ContributorsIndex-filterTagsInput',