From 0493a2c6c009e53d97b42099e58a7c5e7e1f18f3 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 11 Jul 2023 14:06:29 +0200
Subject: [PATCH 01/18] [refactor] changed filter layout in filter menu

---
 webapp/components/FilterMenu/FilterMenuComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 9a52a9b98..955c0f50e 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -2,8 +2,8 @@
   <div>
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
-      <following-filter />
       <post-type-filter />
+      <following-filter />
       <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
     <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">

From e1a9b5b7f7c9e3d4cdfbdb24271ed6adaa42736b Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 11 Jul 2023 14:07:36 +0200
Subject: [PATCH 02/18] [refactor] added new filter menu headline and adjusted
 some filter labels

---
 .../components/FilterMenu/FollowingFilter.vue   |  5 ++++-
 webapp/locales/de.json                          | 17 +++++++++--------
 webapp/locales/en.json                          |  5 +++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 9a488acd6..6dc93aa41 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -1,5 +1,8 @@
 <template>
-  <filter-menu-section :divider="false" class="following-filter">
+  <filter-menu-section 
+    :title="$t('filter-menu.following-title')"
+    :divider="false" 
+    class="following-filter">
     <template #filter-follower>
       <li class="item follower-item">
         <labeled-button
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index febb8898c..e1a07faca 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -281,9 +281,9 @@
       "myFriends": "Nutzer denen ich folge",
       "myGroups": "Aus meinen Gruppen",
       "myTopics": "Meine Themen",
-      "noFilter": "Inhalt filtern",
-      "onlyArticles": "Nur Beiträge",
-      "onlyEvents": "Nur Veranstaltungen"
+      "noFilter": "Inhalte filtern",
+      "onlyArticles": "Beiträge",
+      "onlyEvents": "Veranstaltungen"
     },
     "filterMyGroups": "Beiträge in meinen Gruppen",
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
@@ -396,21 +396,22 @@
     "emotions": "Emotionen",
     "ended": {
       "all": {
-        "hint": "Zeige alle, auch beendete",
+        "hint": "Zeige alle, auch zukünftige",
         "label": "Alle"
       },
       "onlyEnded": {
-        "hint": "Zeige nur noch nicht beendete",
-        "label": "Nicht beendete"
+        "hint": "Zeige nur noch zukünftige",
+        "label": "Zukünftige"
       }
     },
     "event": "Veranstaltung",
     "eventsBy": "Veranstaltungen – zeige ...",
     "eventsEnded": "Beendet",
     "filter-by": "Filtern nach ...",
-    "following": "Nutzer denen ich folge",
+    "following": "Nutzer, denen ich folge",
+    "following-title": "Quellen",
     "languages": "Sprachen",
-    "my-groups": "Meinen Gruppen",
+    "my-groups": "Meine Gruppen",
     "order": {
       "last": {
         "hint": "Sortiere die Letzten nach vorn",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index c0fb5c2f6..f93adae4e 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -282,8 +282,8 @@
       "myGroups": "By my groups",
       "myTopics": "My topics",
       "noFilter": "Filter content",
-      "onlyArticles": "Only articles",
-      "onlyEvents": "Only events"
+      "onlyArticles": "Articles",
+      "onlyEvents": "Events"
     },
     "filterMyGroups": "Contributions in my groups",
     "inappropriatePicture": "This image may be inappropriate for some people.",
@@ -409,6 +409,7 @@
     "eventsEnded": "Ended",
     "filter-by": "Filter by ...",
     "following": "Users I follow",
+    "following-title": "Sources",
     "languages": "Languages",
     "my-groups": "My groups",
     "order": {

From 7c56ad9728b6d76f77b921b211cf69c9e06a28b6 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 11 Jul 2023 14:10:39 +0200
Subject: [PATCH 03/18] [refactor] removed hr in categories filter component

---
 webapp/components/FilterMenu/CategoriesFilter.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 347994c9a..fe2dd04bb 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -16,7 +16,6 @@
 
     <template #filter-list>
       <div class="category-filter-list">
-        <hr />
         <ds-space margin="small" />
         <base-button
           v-for="category in categories"

From e81254e53104eb09c66f234ca19c787e0d285bfd Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 11 Jul 2023 14:26:19 +0200
Subject: [PATCH 04/18] [refactor] changed button layout in filter menu

---
 webapp/components/FilterMenu/FollowingFilter.vue | 12 ++++++++----
 webapp/components/FilterMenu/PostTypeFilter.vue  |  8 +++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 6dc93aa41..cc0e3872b 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -5,22 +5,26 @@
     class="following-filter">
     <template #filter-follower>
       <li class="item follower-item">
-        <labeled-button
+        <base-button        
           icon="user-plus"
           :label="$t('filter-menu.following')"
           :filled="filteredByUsersFollowed"
           :title="$t('contribution.filterFollow')"
           @click="toggleFilteredByFollowed(currentUser.id)"
-        />
+        >
+          {{ $t('contribution.filterFollow') }}
+        </base-button>
       </li>
       <li class="item posts-in-my-groups-item">
-        <labeled-button
+        <base-button
           icon="users"
           :label="$t('filter-menu.my-groups')"
           :filled="filteredByPostsInMyGroups"
           :title="$t('contribution.filterMyGroups')"
           @click="toggleFilteredByMyGroups()"
-        />
+        >
+          {{ $t('contribution.filterMyGroups') }}
+        </base-button>
       </li>
     </template>
   </filter-menu-section>
diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index 515282782..75a5085d5 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -5,14 +5,16 @@
     class="following-filter"
   >
     <template #filter-follower>
-      <li class="item all-item">
-        <labeled-button
+      <li class="item all-item">        
+        <base-button
           icon="check"
           :label="$t('filter-menu.all')"
           :filled="filteredPostTypes.length === 0"
           :title="$t('filter-menu.all')"
           @click="togglePostType(null)"
-        />
+        >
+          {{ $t('filter-menu.all') }}
+        </base-button>
       </li>
       <li class="item article-item">
         <labeled-button

From a1b65761629bc5376c8d3b6c6b16f43c99d84793 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 11 Jul 2023 14:26:45 +0200
Subject: [PATCH 05/18] [refactor] adjusted label texts for filter menu

---
 webapp/locales/de.json | 4 ++--
 webapp/locales/en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index e1a07faca..2d8db5112 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -276,7 +276,7 @@
       "happy": "Glücklich",
       "surprised": "Erstaunt"
     },
-    "filterFollow": "Beiträge von Nutzern filtern, denen ich folge",
+    "filterFollow": "Nutzern, denen ich folge",
     "filterMasonryGrid": {
       "myFriends": "Nutzer denen ich folge",
       "myGroups": "Aus meinen Gruppen",
@@ -285,7 +285,7 @@
       "onlyArticles": "Beiträge",
       "onlyEvents": "Veranstaltungen"
     },
-    "filterMyGroups": "Beiträge in meinen Gruppen",
+    "filterMyGroups": "Meine Gruppen",
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
     "languageSelectLabel": "Sprache Deines Beitrags",
     "languageSelectText": "Sprache wählen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f93adae4e..9f6d6e3e8 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -276,7 +276,7 @@
       "happy": "Happy",
       "surprised": "Surprised"
     },
-    "filterFollow": "Filter contributions from users I follow",
+    "filterFollow": "Users I follow",
     "filterMasonryGrid": {
       "myFriends": "Users I follow",
       "myGroups": "By my groups",
@@ -285,7 +285,7 @@
       "onlyArticles": "Articles",
       "onlyEvents": "Events"
     },
-    "filterMyGroups": "Contributions in my groups",
+    "filterMyGroups": "My groups",
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",
     "languageSelectText": "Select Language",

From e33091b814510dd8ac08e9220e0cca549cae338b Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 11 Jul 2023 14:36:24 +0200
Subject: [PATCH 06/18] fix linting

---
 webapp/components/FilterMenu/FollowingFilter.vue | 11 +++++------
 webapp/components/FilterMenu/PostTypeFilter.vue  |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index cc0e3872b..b5a4b2298 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -1,11 +1,12 @@
 <template>
-  <filter-menu-section 
+  <filter-menu-section
     :title="$t('filter-menu.following-title')"
-    :divider="false" 
-    class="following-filter">
+    :divider="false"
+    class="following-filter"
+  >
     <template #filter-follower>
       <li class="item follower-item">
-        <base-button        
+        <base-button
           icon="user-plus"
           :label="$t('filter-menu.following')"
           :filled="filteredByUsersFollowed"
@@ -33,13 +34,11 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   name: 'FollowingFilter',
   components: {
     FilterMenuSection,
-    LabeledButton,
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index 75a5085d5..be4384e2b 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -5,7 +5,7 @@
     class="following-filter"
   >
     <template #filter-follower>
-      <li class="item all-item">        
+      <li class="item all-item">
         <base-button
           icon="check"
           :label="$t('filter-menu.all')"

From f927c13b86b1dc2d383e79b3ebfaa8b75d936128 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Wed, 19 Jul 2023 21:47:02 +0200
Subject: [PATCH 07/18] [refactor] updated layout/ui of filter menu

---
 .../FilterMenu/CategoriesFilter.vue           | 42 ++++++------------
 .../FilterMenu/FilterMenuComponent.vue        | 43 +++++++++++++++++--
 .../FilterMenu/FilterMenuSection.vue          |  1 -
 .../components/FilterMenu/FollowingFilter.vue |  2 +
 .../components/FilterMenu/PostTypeFilter.vue  |  4 +-
 5 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index fe2dd04bb..c26eeb69e 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -1,26 +1,23 @@
 <template>
   <filter-menu-section :title="$t('filter-menu.categories')" class="categories-filter">
-    <template #filter-topics>
-      <li class="item item-all-topics">
-        <labeled-button
+    <template #filter-list>
+      <div class="item item-all-topics">
+        <base-button
           :filled="!filteredCategoryIds.length"
           :label="$t('filter-menu.all')"
           icon="check"
           @click="setResetCategories"
-        />
-      </li>
-      <li class="item item-save-topics">
-        <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
-      </li>
-    </template>
-
-    <template #filter-list>
+          size="small"
+        >
+        {{ $t('filter-menu.all') }}
+        </base-button>
+      </div>
       <div class="category-filter-list">
-        <ds-space margin="small" />
+        <!-- <ds-space margin="small" /> -->
         <base-button
           v-for="category in categories"
-          :key="category.id"
-          @click="toggleCategory(category.id)"
+          :key="category.id"          
+          @click="saveCategories(category.id)"
           :filled="filteredCategoryIds.includes(category.id)"
           :icon="category.icon"
           size="small"
@@ -39,7 +36,6 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import CategoryQuery from '~/graphql/CategoryQuery.js'
-import SaveCategories from '~/graphql/SaveCategories.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 import SortCategories from '~/mixins/sortCategoriesMixin.js'
@@ -69,19 +65,9 @@ export default {
       this.resetCategories()
       this.$emit('showFilterMenu')
     },
-    saveCategories() {
-      this.$apollo
-        .mutate({
-          mutation: SaveCategories(),
-          variables: { activeCategories: this.filteredCategoryIds },
-        })
-        .then(() => {
-          this.$emit('showFilterMenu')
-          this.$toast.success(this.$t('filter-menu.save.success'))
-        })
-        .catch(() => {
-          this.$toast.error(this.$t('filter-menu.save.error'))
-        })
+    saveCategories(categoryId) {
+      this.toggleCategory(categoryId)
+      this.$emit('updateCategories', categoryId)      
     },
   },
   apollo: {
diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 955c0f50e..96174ad47 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -1,10 +1,15 @@
 <template>
   <div>
     <div class="filter-menu-options">
-      <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+      <div class="filter-header">
+        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+        <div class="item-save-topics">
+          <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
+        </div>
+      </div>
       <post-type-filter />
       <following-filter />
-      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
+      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" @updateCategories="updateCategories" />
     </div>
     <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.eventsBy') }}</h2>
@@ -24,6 +29,8 @@ import PostTypeFilter from './PostTypeFilter'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
 import CategoriesFilter from './CategoriesFilter'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+import SaveCategories from '~/graphql/SaveCategories.js'
 
 export default {
   components: {
@@ -32,24 +39,52 @@ export default {
     OrderByFilter,
     CategoriesFilter,
     PostTypeFilter,
+    LabeledButton
   },
   data() {
     return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      categoriesActive: this.$env ? this.$env.CATEGORIES_ACTIVE : false,
     }
   },
   computed: {
     ...mapGetters({
       filteredPostTypes: 'posts/filteredPostTypes',
+      filteredCategoryIds: 'posts/filteredCategoryIds',
     }),
     eventSetInPostTypeFilter() {
-      return this.filteredPostTypes.includes('Event')
+      return this.filteredPostTypes ? this.filteredPostTypes.includes('Event') : null
     },
   },
+  methods: {
+    updateCategories(newCatId){
+      console.log(newCatId);
+    },
+    saveCategories(){      
+      this.$apollo
+        .mutate({
+          mutation: SaveCategories(),
+          variables: { activeCategories: this.filteredCategoryIds },
+        })
+        .then(() => {
+          this.$emit('showFilterMenu')
+          this.$toast.success(this.$t('filter-menu.save.success'))
+        })
+        .catch(() => {
+          this.$toast.error(this.$t('filter-menu.save.error'))
+        })
+    }
+  }
 }
 </script>
 
 <style lang="scss">
+.filter-header{
+  display: flex;
+  justify-content: space-between;
+  & .labeled-button{
+    margin-right: 2em;
+  } 
+}
 .filter-menu-options {
   max-width: $size-max-width-filter-menu;
   padding: $space-small $space-x-small;
diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index 921bafff0..b527bd12a 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -61,7 +61,6 @@ export default {
 
   > .filter-list {
     display: flex;
-    flex-wrap: wrap;
     flex-basis: 100%;
     flex-grow: 1;
 
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index b5a4b2298..615b955df 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -12,6 +12,7 @@
           :filled="filteredByUsersFollowed"
           :title="$t('contribution.filterFollow')"
           @click="toggleFilteredByFollowed(currentUser.id)"
+          size="small"
         >
           {{ $t('contribution.filterFollow') }}
         </base-button>
@@ -23,6 +24,7 @@
           :filled="filteredByPostsInMyGroups"
           :title="$t('contribution.filterMyGroups')"
           @click="toggleFilteredByMyGroups()"
+          size="small"
         >
           {{ $t('contribution.filterMyGroups') }}
         </base-button>
diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index be4384e2b..418cac432 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -6,7 +6,7 @@
   >
     <template #filter-follower>
       <li class="item all-item">
-        <base-button
+        <labeled-button
           icon="check"
           :label="$t('filter-menu.all')"
           :filled="filteredPostTypes.length === 0"
@@ -14,7 +14,7 @@
           @click="togglePostType(null)"
         >
           {{ $t('filter-menu.all') }}
-        </base-button>
+        </labeled-button>
       </li>
       <li class="item article-item">
         <labeled-button

From 084b14608d02b8199edafb399b29817cb4c66466 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Wed, 19 Jul 2023 21:47:26 +0200
Subject: [PATCH 08/18] updated CategoriesFilter tests

---
 .../FilterMenu/CategoriesFilter.spec.js       | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.spec.js b/webapp/components/FilterMenu/CategoriesFilter.spec.js
index 823f0ecb0..7ae157fa8 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.spec.js
+++ b/webapp/components/FilterMenu/CategoriesFilter.spec.js
@@ -63,12 +63,13 @@ describe('CategoriesFilter.vue', () => {
       expect(allCategoriesButton.attributes().class).toContain('--filled')
     })
 
-    it('sets category button attribute `filled` when corresponding category is filtered', async () => {
-      getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
-      wrapper = await Wrapper()
-      democracyAndPoliticsButton = wrapper.find('.categories-filter .item-save-topics .base-button')
-      expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
-    })
+    // TODO move to FilterMenuComponent.spec.js?
+    // it('sets category button attribute `filled` when corresponding category is filtered', async () => {
+    //   getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
+    //   wrapper = await Wrapper()
+    //   democracyAndPoliticsButton = wrapper.find('.categories-filter .item-save-topics .base-button')
+    //   expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
+    // })
 
     describe('click on an "catetories-buttons" button', () => {
       it('calls TOGGLE_CATEGORY when clicked', () => {
@@ -88,13 +89,14 @@ describe('CategoriesFilter.vue', () => {
       })
     })
 
-    describe('save categories', () => {
-      it('calls the API', async () => {
-        wrapper = await Wrapper()
-        const saveButton = wrapper.find('.categories-filter .item-save-topics .base-button')
-        saveButton.trigger('click')
-        expect(apolloMutationMock).toBeCalled()
-      })
-    })
+    // TODO move to FilterMenuComponent.spec.js?
+    // describe('save categories', () => {
+    //   it('calls the API', async () => {
+    //     wrapper = await Wrapper()
+    //     const saveButton = wrapper.find('.categories-filter .item-save-topics .base-button')
+    //     saveButton.trigger('click')
+    //     expect(apolloMutationMock).toBeCalled()
+    //   })
+    // })
   })
 })

From 57cf245b719d5d67c5545d2b22e7ef3defc3ec14 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Wed, 19 Jul 2023 21:53:05 +0200
Subject: [PATCH 09/18] fixed linting

---
 .../FilterMenu/CategoriesFilter.spec.js       |  2 +-
 .../FilterMenu/CategoriesFilter.vue           |  8 +++-----
 .../FilterMenu/FilterMenuComponent.vue        | 19 ++++++++-----------
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.spec.js b/webapp/components/FilterMenu/CategoriesFilter.spec.js
index 7ae157fa8..e7bf74c40 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.spec.js
+++ b/webapp/components/FilterMenu/CategoriesFilter.spec.js
@@ -4,7 +4,7 @@ import CategoriesFilter from './CategoriesFilter'
 
 const localVue = global.localVue
 
-let wrapper, environmentAndNatureButton, democracyAndPoliticsButton
+let wrapper, environmentAndNatureButton
 
 describe('CategoriesFilter.vue', () => {
   const mutations = {
diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index c26eeb69e..71c4f0738 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -9,14 +9,14 @@
           @click="setResetCategories"
           size="small"
         >
-        {{ $t('filter-menu.all') }}
+          {{ $t('filter-menu.all') }}
         </base-button>
       </div>
       <div class="category-filter-list">
         <!-- <ds-space margin="small" /> -->
         <base-button
           v-for="category in categories"
-          :key="category.id"          
+          :key="category.id"
           @click="saveCategories(category.id)"
           :filled="filteredCategoryIds.includes(category.id)"
           :icon="category.icon"
@@ -37,13 +37,11 @@
 import { mapGetters, mapMutations } from 'vuex'
 import CategoryQuery from '~/graphql/CategoryQuery.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 import SortCategories from '~/mixins/sortCategoriesMixin.js'
 
 export default {
   components: {
     FilterMenuSection,
-    LabeledButton,
   },
   mixins: [SortCategories],
   data() {
@@ -67,7 +65,7 @@ export default {
     },
     saveCategories(categoryId) {
       this.toggleCategory(categoryId)
-      this.$emit('updateCategories', categoryId)      
+      this.$emit('updateCategories', categoryId)
     },
   },
   apollo: {
diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 96174ad47..184a00c4b 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -9,7 +9,7 @@
       </div>
       <post-type-filter />
       <following-filter />
-      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" @updateCategories="updateCategories" />
+      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
     <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.eventsBy') }}</h2>
@@ -39,7 +39,7 @@ export default {
     OrderByFilter,
     CategoriesFilter,
     PostTypeFilter,
-    LabeledButton
+    LabeledButton,
   },
   data() {
     return {
@@ -56,10 +56,7 @@ export default {
     },
   },
   methods: {
-    updateCategories(newCatId){
-      console.log(newCatId);
-    },
-    saveCategories(){      
+    saveCategories() {
       this.$apollo
         .mutate({
           mutation: SaveCategories(),
@@ -72,18 +69,18 @@ export default {
         .catch(() => {
           this.$toast.error(this.$t('filter-menu.save.error'))
         })
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
-.filter-header{
+.filter-header {
   display: flex;
   justify-content: space-between;
-  & .labeled-button{
+  & .labeled-button {
     margin-right: 2em;
-  } 
+  }
 }
 .filter-menu-options {
   max-width: $size-max-width-filter-menu;

From c9f51ffca91445122e64008382af860c0ffdaf40 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 20 Jul 2023 10:07:59 +0200
Subject: [PATCH 10/18] [refactor] filter menu further feedback implementation

---
 .../components/FilterMenu/CategoriesFilter.vue |  2 +-
 .../components/FilterMenu/EventsByFilter.vue   | 18 +++++++++++-------
 .../FilterMenu/FilterMenuSection.vue           |  6 +++---
 webapp/components/FilterMenu/OrderByFilter.vue | 18 +++++++++++-------
 .../components/FilterMenu/PostTypeFilter.vue   | 10 +++++++++-
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 71c4f0738..73170cf4b 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -84,7 +84,7 @@ export default {
 </script>
 <style lang="scss">
 .category-filter-list {
-  margin-left: $space-xx-large;
+  margin-left: $space-xx-small;
 
   > .base-button {
     margin-right: $space-xx-small;
diff --git a/webapp/components/FilterMenu/EventsByFilter.vue b/webapp/components/FilterMenu/EventsByFilter.vue
index 6e03a2c65..e46f503c6 100644
--- a/webapp/components/FilterMenu/EventsByFilter.vue
+++ b/webapp/components/FilterMenu/EventsByFilter.vue
@@ -2,24 +2,30 @@
   <filter-menu-section class="order-by-filter" :title="sectionTitle" :divider="false">
     <template #filter-list>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="check"
           :label="$t('filter-menu.ended.all.label')"
           :filled="!eventsEnded"
           :title="$t('filter-menu.ended.all.hint')"
           @click="toggleEventsEnded"
           data-test="all-button"
-        />
+          size="small"
+        >
+          {{ $t('filter-menu.ended.all.hint') }}
+        </base-button>
       </li>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="calendar"
           :label="$t('filter-menu.ended.onlyEnded.label')"
           :filled="eventsEnded"
           :title="$t('filter-menu.ended.onlyEnded.hint')"
           @click="toggleEventsEnded"
           data-test="not-ended-button"
-        />
+          size="small"
+        >
+          {{ $t('filter-menu.ended.onlyEnded.hint') }}
+        </base-button>
       </li>
     </template>
   </filter-menu-section>
@@ -28,13 +34,11 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   name: 'EventsByFilter',
   components: {
-    FilterMenuSection,
-    LabeledButton,
+    FilterMenuSection
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index b527bd12a..d8e15c1b5 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -65,13 +65,13 @@ export default {
     flex-grow: 1;
 
     > .item {
-      width: 30%;
-      padding: 0 $space-x-small;
+      // width: 30%;
+      padding: 0 $space-xx-small;
       margin-bottom: $space-small;
       text-align: center;
 
       @media only screen and (min-width: 800px) {
-        width: 20%;
+        // width: 15%;
       }
     }
   }
diff --git a/webapp/components/FilterMenu/OrderByFilter.vue b/webapp/components/FilterMenu/OrderByFilter.vue
index 8ef248f6d..102768320 100644
--- a/webapp/components/FilterMenu/OrderByFilter.vue
+++ b/webapp/components/FilterMenu/OrderByFilter.vue
@@ -2,24 +2,30 @@
   <filter-menu-section class="order-by-filter" :title="sectionTitle" :divider="false">
     <template #filter-list>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="sort-amount-asc"
           :label="buttonLabel('desc')"
           :filled="orderBy === orderedDesc"
           :title="buttonTitle('desc')"
           @click="toggleOrder(orderedDesc)"
           data-test="newest-button"
-        />
+          size="small"
+        >
+          {{ buttonLabel('desc') }}
+        </base-button>
       </li>
       <li class="item">
-        <labeled-button
+        <base-button
           icon="sort-amount-desc"
           :label="buttonLabel('asc')"
           :filled="orderBy === orderedAsc"
           :title="buttonTitle('asc')"
           @click="toggleOrder(orderedAsc)"
           data-test="oldest-button"
-        />
+          size="small"
+        >
+          {{ buttonTitle('asc') }}
+        </base-button>
       </li>
     </template>
   </filter-menu-section>
@@ -28,13 +34,11 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   name: 'OrderByFilter',
   components: {
-    FilterMenuSection,
-    LabeledButton,
+    FilterMenuSection
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index 418cac432..8f2ec729c 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -2,7 +2,7 @@
   <filter-menu-section
     :title="$t('filter-menu.post-type')"
     :divider="false"
-    class="following-filter"
+    class="following-filter post-type-filter"
   >
     <template #filter-follower>
       <li class="item all-item">
@@ -61,3 +61,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.post-type-filter {  
+  & .item {
+    margin-right: $space-base;
+  }
+}
+</style>

From daaff73c73b54c715c5aa19706a65874d5273d27 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 20 Jul 2023 10:09:28 +0200
Subject: [PATCH 11/18] fixed linting

---
 webapp/components/FilterMenu/EventsByFilter.vue | 2 +-
 webapp/components/FilterMenu/OrderByFilter.vue  | 2 +-
 webapp/components/FilterMenu/PostTypeFilter.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/FilterMenu/EventsByFilter.vue b/webapp/components/FilterMenu/EventsByFilter.vue
index e46f503c6..e9286503c 100644
--- a/webapp/components/FilterMenu/EventsByFilter.vue
+++ b/webapp/components/FilterMenu/EventsByFilter.vue
@@ -38,7 +38,7 @@ import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 export default {
   name: 'EventsByFilter',
   components: {
-    FilterMenuSection
+    FilterMenuSection,
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/OrderByFilter.vue b/webapp/components/FilterMenu/OrderByFilter.vue
index 102768320..57c173152 100644
--- a/webapp/components/FilterMenu/OrderByFilter.vue
+++ b/webapp/components/FilterMenu/OrderByFilter.vue
@@ -38,7 +38,7 @@ import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 export default {
   name: 'OrderByFilter',
   components: {
-    FilterMenuSection
+    FilterMenuSection,
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index 8f2ec729c..ccdf9161e 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -63,7 +63,7 @@ export default {
 </script>
 
 <style lang="scss">
-.post-type-filter {  
+.post-type-filter {
   & .item {
     margin-right: $space-base;
   }

From fa286139c4be13ad185eb6e16059f8bb4c5deff4 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Wed, 26 Jul 2023 11:06:47 +0200
Subject: [PATCH 12/18] Fix unit test structure search of OrderByFilter.

---
 webapp/components/FilterMenu/OrderByFilter.spec.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/webapp/components/FilterMenu/OrderByFilter.spec.js b/webapp/components/FilterMenu/OrderByFilter.spec.js
index 10b52449a..7f3fa7959 100644
--- a/webapp/components/FilterMenu/OrderByFilter.spec.js
+++ b/webapp/components/FilterMenu/OrderByFilter.spec.js
@@ -35,7 +35,7 @@ describe('OrderByFilter', () => {
       it('sets "newest-button" attribute `filled`', () => {
         expect(
           wrapper
-            .find('.order-by-filter .filter-list [data-test="newest-button"] .base-button')
+            .find('.order-by-filter .filter-list .base-button[data-test="newest-button"]')
             .classes('--filled'),
         ).toBe(true)
       })
@@ -43,7 +43,7 @@ describe('OrderByFilter', () => {
       it('don\'t sets "oldest-button" attribute `filled`', () => {
         expect(
           wrapper
-            .find('.order-by-filter .filter-list [data-test="oldest-button"] .base-button')
+            .find('.order-by-filter .filter-list .base-button[data-test="oldest-button"]')
             .classes('--filled'),
         ).toBe(false)
       })
@@ -56,9 +56,10 @@ describe('OrderByFilter', () => {
       })
 
       it('don\'t sets "newest-button" attribute `filled`', () => {
+        console.log(wrapper.html())
         expect(
           wrapper
-            .find('.order-by-filter .filter-list [data-test="newest-button"] .base-button')
+            .find('.order-by-filter .filter-list .base-button[data-test="newest-button"]')
             .classes('--filled'),
         ).toBe(false)
       })
@@ -66,7 +67,7 @@ describe('OrderByFilter', () => {
       it('sets "oldest-button" attribute `filled`', () => {
         expect(
           wrapper
-            .find('.order-by-filter .filter-list [data-test="oldest-button"] .base-button')
+            .find('.order-by-filter .filter-list .base-button[data-test="oldest-button"]')
             .classes('--filled'),
         ).toBe(true)
       })
@@ -75,7 +76,7 @@ describe('OrderByFilter', () => {
     describe('click "newest-button"', () => {
       it('calls TOGGLE_ORDER with "createdAt_desc"', () => {
         wrapper
-          .find('.order-by-filter .filter-list [data-test="newest-button"] .base-button')
+          .find('.order-by-filter .filter-list .base-button[data-test="newest-button"]')
           .trigger('click')
         expect(mutations['posts/TOGGLE_ORDER']).toHaveBeenCalledWith({}, 'createdAt_desc')
       })
@@ -84,7 +85,7 @@ describe('OrderByFilter', () => {
     describe('click "oldest-button"', () => {
       it('calls TOGGLE_ORDER with "createdAt_asc"', () => {
         wrapper
-          .find('.order-by-filter .filter-list [data-test="oldest-button"] .base-button')
+          .find('.order-by-filter .filter-list .base-button[data-test="oldest-button"]')
           .trigger('click')
         expect(mutations['posts/TOGGLE_ORDER']).toHaveBeenCalledWith({}, 'createdAt_asc')
       })

From b089c1652d6550cbaf89be250bc9d8a6c4235ac9 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Wed, 26 Jul 2023 11:07:11 +0200
Subject: [PATCH 13/18] Remove console.log entry.

---
 webapp/components/FilterMenu/OrderByFilter.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/FilterMenu/OrderByFilter.spec.js b/webapp/components/FilterMenu/OrderByFilter.spec.js
index 7f3fa7959..46cffe5f0 100644
--- a/webapp/components/FilterMenu/OrderByFilter.spec.js
+++ b/webapp/components/FilterMenu/OrderByFilter.spec.js
@@ -56,7 +56,6 @@ describe('OrderByFilter', () => {
       })
 
       it('don\'t sets "newest-button" attribute `filled`', () => {
-        console.log(wrapper.html())
         expect(
           wrapper
             .find('.order-by-filter .filter-list .base-button[data-test="newest-button"]')

From 0e948fc2e333131204d7653eceb8cdaea38e8085 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 26 Jul 2023 14:58:30 +0200
Subject: [PATCH 14/18] Change filter menu save button label to 'Save topics'

---
 webapp/components/FilterMenu/FilterMenuComponent.vue | 7 ++++++-
 webapp/locales/de.json                               | 3 ++-
 webapp/locales/en.json                               | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 184a00c4b..52b0fcd20 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -4,7 +4,12 @@
       <div class="filter-header">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
         <div class="item-save-topics">
-          <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
+          <labeled-button
+            filled
+            :label="$t('actions.saveCategories')"
+            icon="save"
+            @click="saveCategories"
+          />
         </div>
       </div>
       <post-type-filter />
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 6cf39353a..b4a936d5e 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -6,7 +6,8 @@
     "edit": "Bearbeiten",
     "loading": "wird geladen",
     "loadMore": "mehr laden",
-    "save": "Speichern"
+    "save": "Speichern",
+    "saveCategories": "Themen speichern"
   },
   "admin": {
     "categories": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index b236c5eb2..49f3a4e59 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -6,7 +6,8 @@
     "edit": "Edit",
     "loading": "loading",
     "loadMore": "load more",
-    "save": "Save"
+    "save": "Save",
+    "saveCategories": "Save topics"
   },
   "admin": {
     "categories": {

From c6a1c1a8c80044cf1c3ac1c76c0308eb057583e1 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Fri, 28 Jul 2023 13:26:51 +0200
Subject: [PATCH 15/18] changed label text for event filter component

---
 webapp/components/FilterMenu/EventsByFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/FilterMenu/EventsByFilter.vue b/webapp/components/FilterMenu/EventsByFilter.vue
index e9286503c..852300725 100644
--- a/webapp/components/FilterMenu/EventsByFilter.vue
+++ b/webapp/components/FilterMenu/EventsByFilter.vue
@@ -11,7 +11,7 @@
           data-test="all-button"
           size="small"
         >
-          {{ $t('filter-menu.ended.all.hint') }}
+          {{ $t('filter-menu.ended.all.label') }}
         </base-button>
       </li>
       <li class="item">
@@ -24,7 +24,7 @@
           data-test="not-ended-button"
           size="small"
         >
-          {{ $t('filter-menu.ended.onlyEnded.hint') }}
+          {{ $t('filter-menu.ended.onlyEnded.label') }}
         </base-button>
       </li>
     </template>

From cbf93628a5ade2002854763beb5b51e8c3379d94 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Fri, 28 Jul 2023 14:05:26 +0200
Subject: [PATCH 16/18] [feature] have all button for source filter option

---
 .../FilterMenu/FilterMenuComponent.vue        |  2 +-
 .../FilterMenu/FollowingFilter.spec.js        | 11 +++
 .../components/FilterMenu/FollowingFilter.vue | 70 +++++++++++++------
 webapp/store/posts.js                         | 10 +++
 webapp/store/posts.spec.js                    | 19 +++++
 5 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 52b0fcd20..e362e758f 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -13,7 +13,7 @@
         </div>
       </div>
       <post-type-filter />
-      <following-filter />
+      <following-filter @showFilterMenu="$emit('showFilterMenu')" />
       <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
     <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">
diff --git a/webapp/components/FilterMenu/FollowingFilter.spec.js b/webapp/components/FilterMenu/FollowingFilter.spec.js
index 0f51b305c..9dbc5d011 100644
--- a/webapp/components/FilterMenu/FollowingFilter.spec.js
+++ b/webapp/components/FilterMenu/FollowingFilter.spec.js
@@ -10,6 +10,7 @@ describe('FollowingFilter', () => {
   const mutations = {
     'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
     'posts/TOGGLE_FILTER_BY_MY_GROUPS': jest.fn(),
+    'posts/RESET_FOLLOWERS_FILTER': jest.fn(),
   }
   const getters = {
     'auth/user': () => {
@@ -65,5 +66,15 @@ describe('FollowingFilter', () => {
         expect(mutations['posts/TOGGLE_FILTER_BY_MY_GROUPS']).toHaveBeenCalled()
       })
     })
+    describe('clears follower filter', () => {
+      it('when all button is clicked', async () => {
+        wrapper = await Wrapper()
+        const clearFollowerButton = wrapper.find(
+          '.following-filter .item-all-follower .base-button',
+        )
+        clearFollowerButton.trigger('click')
+        expect(mutations['posts/RESET_FOLLOWERS_FILTER']).toHaveBeenCalledTimes(1)
+      })
+    })
   })
 })
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 615b955df..b650f17b7 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -5,30 +5,43 @@
     class="following-filter"
   >
     <template #filter-follower>
-      <li class="item follower-item">
+      <div class="item item-all-follower">
         <base-button
-          icon="user-plus"
-          :label="$t('filter-menu.following')"
-          :filled="filteredByUsersFollowed"
-          :title="$t('contribution.filterFollow')"
-          @click="toggleFilteredByFollowed(currentUser.id)"
+          :filled="!filteredByUsersFollowed && !filteredByPostsInMyGroups"
+          :label="$t('filter-menu.all')"
+          icon="check"
+          @click="setResetFollowers"
           size="small"
         >
-          {{ $t('contribution.filterFollow') }}
+          {{ $t('filter-menu.all') }}
         </base-button>
-      </li>
-      <li class="item posts-in-my-groups-item">
-        <base-button
-          icon="users"
-          :label="$t('filter-menu.my-groups')"
-          :filled="filteredByPostsInMyGroups"
-          :title="$t('contribution.filterMyGroups')"
-          @click="toggleFilteredByMyGroups()"
-          size="small"
-        >
-          {{ $t('contribution.filterMyGroups') }}
-        </base-button>
-      </li>
+      </div>
+      <div class="follower-filter-list">
+        <li class="item follower-item">
+          <base-button
+            icon="user-plus"
+            :label="$t('filter-menu.following')"
+            :filled="filteredByUsersFollowed"
+            :title="$t('contribution.filterFollow')"
+            @click="toggleFilteredByFollowed(currentUser.id)"
+            size="small"
+          >
+            {{ $t('contribution.filterFollow') }}
+          </base-button>
+        </li>
+        <li class="item posts-in-my-groups-item">
+          <base-button
+            icon="users"
+            :label="$t('filter-menu.my-groups')"
+            :filled="filteredByPostsInMyGroups"
+            :title="$t('contribution.filterMyGroups')"
+            @click="toggleFilteredByMyGroups()"
+            size="small"
+          >
+            {{ $t('contribution.filterMyGroups') }}
+          </base-button>
+        </li>
+      </div>
     </template>
   </filter-menu-section>
 </template>
@@ -51,9 +64,26 @@ export default {
   },
   methods: {
     ...mapMutations({
+      resetFollowers: 'posts/RESET_FOLLOWERS_FILTER',
       toggleFilteredByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
       toggleFilteredByMyGroups: 'posts/TOGGLE_FILTER_BY_MY_GROUPS',
     }),
+    setResetFollowers() {
+      this.resetFollowers()
+      this.$emit('showFilterMenu')
+    },
   },
 }
 </script>
+
+<style lang="scss">
+.follower-filter-list {
+  display: flex;
+  margin-left: $space-xx-small;
+
+  & .base-button {
+    margin-right: $space-xx-small;
+    margin-bottom: $space-xx-small;
+  }
+}
+</style>
diff --git a/webapp/store/posts.js b/webapp/store/posts.js
index 95113ab6b..51e34f6c5 100644
--- a/webapp/store/posts.js
+++ b/webapp/store/posts.js
@@ -47,6 +47,16 @@ export const mutations = {
     delete filter.categories_some
     state.filter = filter
   },
+  RESET_FOLLOWERS_FILTER(state) {
+    const filter = clone(state.filter)
+    if (get(filter, 'postsInMyGroups')) {
+      delete filter.postsInMyGroups
+    }
+    if (get(filter, 'author.followedBy_some.id')) {
+      delete filter.author
+    }
+    state.filter = filter
+  },
   RESET_EMOTIONS(state) {
     const filter = clone(state.filter)
     delete filter.emotions_some
diff --git a/webapp/store/posts.spec.js b/webapp/store/posts.spec.js
index 4efb55491..b3c73e124 100644
--- a/webapp/store/posts.spec.js
+++ b/webapp/store/posts.spec.js
@@ -146,6 +146,25 @@ describe('mutations', () => {
     })
   })
 
+  describe('RESET_FOLLOWERS_FILTER', () => {
+    beforeEach(() => {
+      testMutation = () => {
+        mutations.RESET_FOLLOWERS_FILTER(state)
+        return getters.filter(state)
+      }
+    })
+
+    it('resets the categories filter', () => {
+      state = {
+        filter: {
+          author: { followedBy_some: { id: 4711 } },
+          postsInMyGroups: true,
+        },
+      }
+      expect(testMutation()).toEqual({})
+    })
+  })
+
   describe('TOGGLE_LANGUAGE', () => {
     beforeEach(() => {
       testMutation = (languageCode) => {

From de4c239f26f9f87105a568732071e8518d371c2d Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Mon, 31 Jul 2023 14:17:38 +0200
Subject: [PATCH 17/18] [design] added left padding to filter list for better
 layout

---
 webapp/components/FilterMenu/FilterMenuSection.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index d8e15c1b5..0970fac9b 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -63,6 +63,7 @@ export default {
     display: flex;
     flex-basis: 100%;
     flex-grow: 1;
+    padding-left: $space-base;
 
     > .item {
       // width: 30%;

From 62333c34461dff70e40b8f3fce826d3325e4036c Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Mon, 31 Jul 2023 14:18:09 +0200
Subject: [PATCH 18/18] [design] post type filter list is now the same column
 width

---
 webapp/components/FilterMenu/PostTypeFilter.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index ccdf9161e..6a9b15985 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -64,8 +64,10 @@ export default {
 
 <style lang="scss">
 .post-type-filter {
-  & .item {
-    margin-right: $space-base;
+  & .filter-list {
+    display: grid;
+    grid-template-columns: repeat(3, 10%);
+    padding-left: 0px;
   }
 }
 </style>