From 1ffde6bf1034d1a1d9b7bca62fe66fe64527314c Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 11 Mar 2020 16:43:13 +0100
Subject: [PATCH] refactor: CategoriesFilter to not use ds-flex

Co-authored-by: mattwr18 <mattwr18@gmail.com>

- introduce LabeledButton component
- rename FilterMenu to HashtagsFilter and FilterPosts to FilterMenu
---
 webapp/assets/_new/styles/resets.scss         |   7 +
 .../FilterMenu/CategoriesFilter.vue           | 125 +++++++++++++
 .../components/FilterMenu/FilterMenu.spec.js  | 164 ++++++++++++++---
 webapp/components/FilterMenu/FilterMenu.vue   |  64 ++++---
 .../GeneralFilter.vue}                        |  18 +-
 .../LanguageFilter.vue}                       |   9 +-
 .../FilterPosts/CategoriesFilterMenuItems.vue | 103 -----------
 .../FilterPosts/FilterPosts.spec.js           | 167 ------------------
 webapp/components/FilterPosts/FilterPosts.vue |  52 ------
 .../HashtagsFilter/HashtagsFilter.spec.js     |  43 +++++
 .../HashtagsFilter/HashtagsFilter.vue         |  36 ++++
 .../generic/LabeledButton/LabeledButton.vue   |  40 +++++
 webapp/layouts/default.vue                    |  28 +--
 webapp/locales/de.json                        |   4 +-
 webapp/locales/en.json                        |   4 +-
 webapp/locales/es.json                        |   4 +-
 webapp/locales/fr.json                        |   4 +-
 webapp/locales/it.json                        |   4 +-
 webapp/locales/pl.json                        |   2 +-
 webapp/locales/pt.json                        |   4 +-
 webapp/locales/ru.json                        |   4 +-
 webapp/pages/index.spec.js                    |   4 +-
 webapp/pages/index.vue                        |   6 +-
 23 files changed, 467 insertions(+), 429 deletions(-)
 create mode 100644 webapp/components/FilterMenu/CategoriesFilter.vue
 rename webapp/components/{FilterPosts/GeneralFilterMenuItems.vue => FilterMenu/GeneralFilter.vue} (83%)
 rename webapp/components/{FilterPosts/LanguageFilterMenuItems.vue => FilterMenu/LanguageFilter.vue} (90%)
 delete mode 100644 webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
 delete mode 100644 webapp/components/FilterPosts/FilterPosts.spec.js
 delete mode 100644 webapp/components/FilterPosts/FilterPosts.vue
 create mode 100644 webapp/components/HashtagsFilter/HashtagsFilter.spec.js
 create mode 100644 webapp/components/HashtagsFilter/HashtagsFilter.vue
 create mode 100644 webapp/components/_new/generic/LabeledButton/LabeledButton.vue

diff --git a/webapp/assets/_new/styles/resets.scss b/webapp/assets/_new/styles/resets.scss
index 144f22d10..72a6184b3 100644
--- a/webapp/assets/_new/styles/resets.scss
+++ b/webapp/assets/_new/styles/resets.scss
@@ -19,3 +19,10 @@ h6,
 p {
   margin: 0;
 }
+
+ul,
+ol {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
new file mode 100644
index 000000000..f9474dc57
--- /dev/null
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -0,0 +1,125 @@
+<template>
+  <section class="categories-filter">
+    <h4 class="title">{{ $t('filter-menu.categories.header') }}</h4>
+    <labeled-button
+      :filled="!filteredCategoryIds.length"
+      icon="check"
+      :label="$t('filter-menu.categories.all')"
+      @click="resetCategories"
+    />
+    <div class="divider" />
+    <ul class="categories-list">
+      <li v-for="category in categories" :key="category.id" class="menu-item">
+        <labeled-button
+          :icon="category.icon"
+          :filled="filteredCategoryIds.includes(category.id)"
+          :label="$t(`contribution.category.name.${category.slug}`)"
+          @click="toggleCategory(category.id)"
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import CategoryQuery from '~/graphql/CategoryQuery.js'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+
+export default {
+  components: {
+    LabeledButton,
+  },
+  data() {
+    return {
+      categories: [],
+    }
+  },
+  computed: {
+    ...mapGetters({
+      filteredCategoryIds: 'posts/filteredCategoryIds',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      resetCategories: 'posts/RESET_CATEGORIES',
+      toggleCategory: 'posts/TOGGLE_CATEGORY',
+    }),
+  },
+  apollo: {
+    Category: {
+      query() {
+        return CategoryQuery()
+      },
+      update({ Category }) {
+        if (!Category) return []
+        this.categories = Category
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.categories-filter {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: $space-small;
+
+  > .title {
+    width: 100%;
+  }
+
+  > .labeled-button {
+    margin-top: $space-small;
+  }
+
+  > .divider {
+    border-left: $border-size-base solid $border-color-soft;
+    margin: $space-base;
+  }
+
+  > .categories-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: 80%;
+    flex-grow: 1;
+
+    > .menu-item {
+      width: 12.5%;
+      margin: $space-small 0;
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    .categories-list > .menu-item {
+      width: 16%;
+    }
+  }
+
+  @media only screen and (max-width: 630px) {
+    flex-direction: column;
+
+    > .categories-list > .menu-item {
+      width: 25%;
+      margin: $space-x-small 0;
+    }
+
+    > .title {
+      text-align: center;
+    }
+
+    > .divider {
+      border-top: $border-size-base solid $border-color-soft;
+      margin: $space-small;
+    }
+  }
+
+  @media only screen and (max-width: 440px) {
+    .categories-list > .menu-item {
+      width: 50%;
+    }
+  }
+}
+</style>
diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js
index 283db979e..ec94e8ea5 100644
--- a/webapp/components/FilterMenu/FilterMenu.spec.js
+++ b/webapp/components/FilterMenu/FilterMenu.spec.js
@@ -1,42 +1,166 @@
 import { mount } from '@vue/test-utils'
+
+import Vuex from 'vuex'
 import FilterMenu from './FilterMenu.vue'
+import locales from '~/locales'
+import orderBy from 'lodash/orderBy'
 
 const localVue = global.localVue
 
+let mutations
+let getters
+
+const languages = orderBy(locales, 'name')
+
 describe('FilterMenu.vue', () => {
-  let wrapper
   let mocks
   let propsData
+  let menuToggle
+  let allCategoriesButton
+  let environmentAndNatureButton
+  let democracyAndPoliticsButton
+  let happyEmotionButton
+  let englishButton
+  let spanishButton
 
   beforeEach(() => {
-    mocks = { $t: () => {} }
+    mocks = {
+      $apollo: {
+        query: jest
+          .fn()
+          .mockResolvedValueOnce({
+            data: { Post: { title: 'Post with Category', category: [{ id: 'cat4' }] } },
+          })
+          .mockRejectedValue({ message: 'We were unable to filter' }),
+      },
+      $t: jest.fn(),
+      $i18n: {
+        locale: () => 'en',
+      },
+      $toast: {
+        error: jest.fn(),
+      },
+    }
+    propsData = {
+      categories: [
+        { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
+        { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
+        { id: 'cat9', name: 'Democracy & Politics', icon: 'university' },
+      ],
+    }
   })
 
-  describe('given a hashtag', () => {
-    beforeEach(() => {
-      propsData = {
-        hashtag: 'Frieden',
-      }
+  describe('mount', () => {
+    mutations = {
+      'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
+      'posts/RESET_CATEGORIES': jest.fn(),
+      'posts/TOGGLE_CATEGORY': jest.fn(),
+      'posts/TOGGLE_EMOTION': jest.fn(),
+      'posts/TOGGLE_LANGUAGE': jest.fn(),
+      'posts/RESET_LANGUAGES': jest.fn(),
+    }
+    getters = {
+      'posts/isActive': () => false,
+      'auth/isModerator': () => false,
+      'auth/user': () => {
+        return { id: 'u34' }
+      },
+      'posts/filteredCategoryIds': jest.fn(() => []),
+      'posts/filteredByUsersFollowed': jest.fn(),
+      'posts/filteredByEmotions': jest.fn(() => []),
+      'posts/filteredLanguageCodes': jest.fn(() => []),
+    }
+    const openFilterMenu = () => {
+      const store = new Vuex.Store({ mutations, getters })
+      const wrapper = mount(FilterMenu, { mocks, localVue, propsData, store })
+      menuToggle = wrapper.findAll('button').at(0)
+      menuToggle.trigger('click')
+      return wrapper
+    }
+
+    it('groups the categories by pair', () => {
+      const wrapper = openFilterMenu()
+      expect(wrapper.vm.chunk).toEqual([
+        [
+          { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
+          { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
+        ],
+        [{ id: 'cat9', name: 'Democracy & Politics', icon: 'university' }],
+      ])
     })
 
-    describe('mount', () => {
-      const Wrapper = () => {
-        return mount(FilterMenu, { mocks, localVue, propsData })
-      }
+    it('starts with all categories button active', () => {
+      const wrapper = openFilterMenu()
+      allCategoriesButton = wrapper.findAll('button').at(1)
+      expect(allCategoriesButton.attributes().class).toContain('--filled')
+    })
+
+    it('calls TOGGLE_CATEGORY when clicked', () => {
+      const wrapper = openFilterMenu()
+      environmentAndNatureButton = wrapper.findAll('button').at(2)
+      environmentAndNatureButton.trigger('click')
+      expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4')
+    })
+
+    it('calls TOGGLE_LANGUAGE when clicked', () => {
+      const wrapper = openFilterMenu()
+      englishButton = wrapper
+        .findAll('button.language-buttons')
+        .at(languages.findIndex(l => l.code === 'en'))
+      englishButton.trigger('click')
+      expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
+    })
+
+    it('sets category button attribute `filled` when corresponding category is filtered', () => {
+      getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
+      const wrapper = openFilterMenu()
+      democracyAndPoliticsButton = wrapper.findAll('button').at(4)
+      expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
+    })
+
+    it('sets language button attribute `filled` when corresponding language is filtered', () => {
+      getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
+      const wrapper = openFilterMenu()
+      spanishButton = wrapper
+        .findAll('button.language-buttons')
+        .at(languages.findIndex(l => l.code === 'es'))
+      expect(spanishButton.attributes().class).toContain('--filled')
+    })
+
+    it('sets "filter-by-followed" button attribute `filled`', () => {
+      getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
+      const wrapper = openFilterMenu()
+      expect(wrapper.find('.base-button[data-test="filter-by-followed"]').classes('--filled')).toBe(
+        true,
+      )
+    })
+
+    describe('click "filter-by-followed" button', () => {
+      let wrapper
       beforeEach(() => {
-        wrapper = Wrapper()
+        wrapper = openFilterMenu()
+        wrapper.find('.base-button[data-test="filter-by-followed"]').trigger('click')
       })
 
-      it('renders a card', () => {
-        wrapper = Wrapper()
-        expect(wrapper.is('.base-card')).toBe(true)
+      it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
+        expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
+      })
+    })
+
+    describe('click on an "emotions-buttons" button', () => {
+      it('calls TOGGLE_EMOTION when clicked', () => {
+        const wrapper = openFilterMenu()
+        happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1)
+        happyEmotionButton.trigger('click')
+        expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
       })
 
-      describe('click clear search button', () => {
-        it('emits clearSearch', () => {
-          wrapper.find('.base-button').trigger('click')
-          expect(wrapper.emitted().clearSearch).toHaveLength(1)
-        })
+      it('sets the attribute `src` to colorized image', () => {
+        getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
+        const wrapper = openFilterMenu()
+        happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1)
+        const happyEmotionButtonImage = happyEmotionButton.find('img')
+        expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
       })
     })
   })
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index afe6a3d7a..0cc21f04d 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -1,36 +1,46 @@
 <template>
-  <base-card class="filter-menu">
-    <h2>{{ $t('filter-menu.hashtag-search', { hashtag }) }}</h2>
+  <dropdown ref="menu" :placement="placement" :offset="offset">
     <base-button
-      icon="close"
-      circle
-      :title="this.$t('filter-menu.clearSearch')"
-      @click="clearSearch"
-    />
-  </base-card>
+      slot="default"
+      icon="filter"
+      :filled="filterActive"
+      :ghost="!filterActive"
+      slot-scope="{ toggleMenu }"
+      @click.prevent="toggleMenu()"
+    >
+      <base-icon class="dropdown-arrow" name="angle-down" />
+    </base-button>
+    <template slot="popover">
+      <ds-container>
+        <categories-filter />
+        <general-filter />
+        <language-filter />
+      </ds-container>
+    </template>
+  </dropdown>
 </template>
-
 <script>
+import Dropdown from '~/components/Dropdown'
+import { mapGetters } from 'vuex'
+import CategoriesFilter from './CategoriesFilter'
+import GeneralFilter from './GeneralFilter'
+import LanguageFilter from './LanguageFilter'
+
 export default {
-  props: {
-    hashtag: {
-      type: String,
-      required: true,
-    },
+  components: {
+    Dropdown,
+    CategoriesFilter,
+    GeneralFilter,
+    LanguageFilter,
   },
-  methods: {
-    clearSearch() {
-      this.$emit('clearSearch')
-    },
+  props: {
+    placement: { type: String },
+    offset: { type: [String, Number] },
+  },
+  computed: {
+    ...mapGetters({
+      filterActive: 'posts/isActive',
+    }),
   },
 }
 </script>
-
-<style lang="scss">
-.filter-menu.base-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $space-x-small $space-base;
-}
-</style>
diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterMenu/GeneralFilter.vue
similarity index 83%
rename from webapp/components/FilterPosts/GeneralFilterMenuItems.vue
rename to webapp/components/FilterMenu/GeneralFilter.vue
index f1cf6adae..f13e6b778 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterMenu/GeneralFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <ds-space>
-    <ds-flex id="filter-posts-by-followers-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
+    <ds-flex id="filter-menu-by-followers-header">
+      <ds-heading tag="h4">{{ $t('filter-menu.general.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
     </ds-flex>
     <ds-flex :gutter="{ lg: 'large' }">
@@ -14,14 +14,14 @@
           icon="user-plus"
           circle
           :filled="filteredByUsersFollowed"
-          @click="toggleFilteredByFollowed(user.id)"
+          @click="toggleFilteredByFollowed(currentUser.id)"
           v-tooltip="{
             content: this.$t('contribution.filterFollow'),
             placement: 'left',
             delay: { show: 500 },
           }"
         />
-        <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
+        <label class="follow-label">{{ $t('filter-menu.followers.label') }}</label>
       </ds-flex-item>
       <emotion-button
         v-for="emotion in emotionsArray"
@@ -42,9 +42,6 @@ export default {
   components: {
     EmotionButton,
   },
-  props: {
-    user: { type: Object, required: true },
-  },
   data() {
     return {
       emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
@@ -54,6 +51,7 @@ export default {
     ...mapGetters({
       filteredByUsersFollowed: 'posts/filteredByUsersFollowed',
       filteredByEmotions: 'posts/filteredByEmotions',
+      currentUser: 'auth/user',
     }),
   },
   methods: {
@@ -71,11 +69,11 @@ export default {
 }
 </script>
 <style lang="scss">
-#filter-posts-header {
+#filter-menu-header {
   display: block;
 }
 
-#filter-posts-by-followers-header {
+#filter-menu-by-followers-header {
   display: block;
 }
 
@@ -92,7 +90,7 @@ export default {
 }
 
 @media only screen and (max-width: 960px) {
-  #filter-posts-header {
+  #filter-menu-header {
     text-align: center;
   }
 }
diff --git a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue b/webapp/components/FilterMenu/LanguageFilter.vue
similarity index 90%
rename from webapp/components/FilterPosts/LanguageFilterMenuItems.vue
rename to webapp/components/FilterMenu/LanguageFilter.vue
index 3427cf176..fcb5b2d04 100644
--- a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue
+++ b/webapp/components/FilterMenu/LanguageFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <ds-space margin-top="large">
-    <ds-flex id="filter-posts-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.language.header') }}</ds-heading>
+    <ds-flex id="filter-menu-header">
+      <ds-heading tag="h4">{{ $t('filter-menu.language.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
     </ds-flex>
     <ds-flex :gutter="{ lg: 'small' }">
@@ -19,7 +19,7 @@
               @click="resetLanguages"
             />
             <ds-flex-item>
-              <label class="language-labels">{{ $t('filter-posts.language.all') }}</label>
+              <label class="language-labels">{{ $t('filter-menu.language.all') }}</label>
             </ds-flex-item>
             <ds-space />
           </ds-flex-item>
@@ -62,9 +62,6 @@ import orderBy from 'lodash/orderBy'
 import { mapGetters, mapMutations } from 'vuex'
 
 export default {
-  props: {
-    chunk: { type: Array, default: () => [] },
-  },
   computed: {
     ...mapGetters({
       filteredLanguageCodes: 'posts/filteredLanguageCodes',
diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
deleted file mode 100644
index 9189f417d..000000000
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <ds-space margin-top="large">
-    <ds-flex id="filter-posts-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
-      <ds-space margin-bottom="large" />
-    </ds-flex>
-    <ds-flex :gutter="{ lg: 'small' }">
-      <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
-        class="categories-menu-item"
-      >
-        <ds-flex>
-          <ds-flex-item width="10%" />
-          <ds-flex-item width="100%">
-            <base-button
-              circle
-              icon="check"
-              @click="resetCategories"
-              :filled="!filteredCategoryIds.length"
-            />
-            <ds-flex-item>
-              <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
-            </ds-flex-item>
-            <ds-space />
-          </ds-flex-item>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
-      <ds-flex-item
-        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
-        id="categories-menu-divider"
-      />
-      <ds-flex-item
-        :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
-        v-for="index in chunk.length"
-        :key="index"
-      >
-        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
-          <ds-flex class="categories-menu">
-            <ds-flex-item width="100%" class="categories-menu-item">
-              <base-button
-                circle
-                :icon="category.icon"
-                :filled="filteredCategoryIds.includes(category.id)"
-                @click="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item class="categories-menu-item">
-                <label class="category-labels">
-                  {{ $t(`contribution.category.name.${category.slug}`) }}
-                </label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-    </ds-flex>
-  </ds-space>
-</template>
-<script>
-import { mapGetters, mapMutations } from 'vuex'
-
-export default {
-  props: {
-    chunk: { type: Array, default: () => [] },
-  },
-  computed: {
-    ...mapGetters({
-      filteredCategoryIds: 'posts/filteredCategoryIds',
-    }),
-  },
-  methods: {
-    ...mapMutations({
-      resetCategories: 'posts/RESET_CATEGORIES',
-      toggleCategory: 'posts/TOGGLE_CATEGORY',
-    }),
-  },
-}
-</script>
-<style lang="scss">
-.categories-menu-item {
-  text-align: center;
-}
-
-.categories-menu {
-  justify-content: center;
-}
-
-.category-labels,
-.follow-label {
-  font-size: $font-size-small;
-}
-
-@media only screen and (min-width: 960px) {
-  #categories-menu-divider {
-    border-left: 1px solid $border-color-soft;
-    margin: 9px 0px 40px 0px;
-  }
-}
-</style>
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
deleted file mode 100644
index a1fc65a3c..000000000
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import { mount } from '@vue/test-utils'
-
-import Vuex from 'vuex'
-import FilterPosts from './FilterPosts.vue'
-import locales from '~/locales'
-import orderBy from 'lodash/orderBy'
-
-const localVue = global.localVue
-
-let mutations
-let getters
-
-const languages = orderBy(locales, 'name')
-
-describe('FilterPosts.vue', () => {
-  let mocks
-  let propsData
-  let menuToggle
-  let allCategoriesButton
-  let environmentAndNatureButton
-  let democracyAndPoliticsButton
-  let happyEmotionButton
-  let englishButton
-  let spanishButton
-
-  beforeEach(() => {
-    mocks = {
-      $apollo: {
-        query: jest
-          .fn()
-          .mockResolvedValueOnce({
-            data: { Post: { title: 'Post with Category', category: [{ id: 'cat4' }] } },
-          })
-          .mockRejectedValue({ message: 'We were unable to filter' }),
-      },
-      $t: jest.fn(),
-      $i18n: {
-        locale: () => 'en',
-      },
-      $toast: {
-        error: jest.fn(),
-      },
-    }
-    propsData = {
-      categories: [
-        { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
-        { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
-        { id: 'cat9', name: 'Democracy & Politics', icon: 'university' },
-      ],
-    }
-  })
-
-  describe('mount', () => {
-    mutations = {
-      'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
-      'posts/RESET_CATEGORIES': jest.fn(),
-      'posts/TOGGLE_CATEGORY': jest.fn(),
-      'posts/TOGGLE_EMOTION': jest.fn(),
-      'posts/TOGGLE_LANGUAGE': jest.fn(),
-      'posts/RESET_LANGUAGES': jest.fn(),
-    }
-    getters = {
-      'posts/isActive': () => false,
-      'auth/isModerator': () => false,
-      'auth/user': () => {
-        return { id: 'u34' }
-      },
-      'posts/filteredCategoryIds': jest.fn(() => []),
-      'posts/filteredByUsersFollowed': jest.fn(),
-      'posts/filteredByEmotions': jest.fn(() => []),
-      'posts/filteredLanguageCodes': jest.fn(() => []),
-    }
-    const openFilterPosts = () => {
-      const store = new Vuex.Store({ mutations, getters })
-      const wrapper = mount(FilterPosts, { mocks, localVue, propsData, store })
-      menuToggle = wrapper.findAll('button').at(0)
-      menuToggle.trigger('click')
-      return wrapper
-    }
-
-    it('groups the categories by pair', () => {
-      const wrapper = openFilterPosts()
-      expect(wrapper.vm.chunk).toEqual([
-        [
-          { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
-          { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
-        ],
-        [{ id: 'cat9', name: 'Democracy & Politics', icon: 'university' }],
-      ])
-    })
-
-    it('starts with all categories button active', () => {
-      const wrapper = openFilterPosts()
-      allCategoriesButton = wrapper.findAll('button').at(1)
-      expect(allCategoriesButton.attributes().class).toContain('--filled')
-    })
-
-    it('calls TOGGLE_CATEGORY when clicked', () => {
-      const wrapper = openFilterPosts()
-      environmentAndNatureButton = wrapper.findAll('button').at(2)
-      environmentAndNatureButton.trigger('click')
-      expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4')
-    })
-
-    it('calls TOGGLE_LANGUAGE when clicked', () => {
-      const wrapper = openFilterPosts()
-      englishButton = wrapper
-        .findAll('button.language-buttons')
-        .at(languages.findIndex((l) => l.code === 'en'))
-      englishButton.trigger('click')
-      expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
-    })
-
-    it('sets category button attribute `filled` when corresponding category is filtered', () => {
-      getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
-      const wrapper = openFilterPosts()
-      democracyAndPoliticsButton = wrapper.findAll('button').at(4)
-      expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
-    })
-
-    it('sets language button attribute `filled` when corresponding language is filtered', () => {
-      getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
-      const wrapper = openFilterPosts()
-      spanishButton = wrapper
-        .findAll('button.language-buttons')
-        .at(languages.findIndex((l) => l.code === 'es'))
-      expect(spanishButton.attributes().class).toContain('--filled')
-    })
-
-    it('sets "filter-by-followed" button attribute `filled`', () => {
-      getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
-      const wrapper = openFilterPosts()
-      expect(wrapper.find('.base-button[data-test="filter-by-followed"]').classes('--filled')).toBe(
-        true,
-      )
-    })
-
-    describe('click "filter-by-followed" button', () => {
-      let wrapper
-      beforeEach(() => {
-        wrapper = openFilterPosts()
-        wrapper.find('.base-button[data-test="filter-by-followed"]').trigger('click')
-      })
-
-      it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
-        expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
-      })
-    })
-
-    describe('click on an "emotions-buttons" button', () => {
-      it('calls TOGGLE_EMOTION when clicked', () => {
-        const wrapper = openFilterPosts()
-        happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1)
-        happyEmotionButton.trigger('click')
-        expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
-      })
-
-      it('sets the attribute `src` to colorized image', () => {
-        getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
-        const wrapper = openFilterPosts()
-        happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1)
-        const happyEmotionButtonImage = happyEmotionButton.find('img')
-        expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
-      })
-    })
-  })
-})
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
deleted file mode 100644
index e70c066f1..000000000
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <dropdown ref="menu" :placement="placement" :offset="offset">
-    <template #default="{ toggleMenu }">
-      <base-button
-        icon="filter"
-        :filled="filterActive"
-        :ghost="!filterActive"
-        @click.prevent="toggleMenu()"
-      >
-        <base-icon class="dropdown-arrow" name="angle-down" />
-      </base-button>
-    </template>
-    <template slot="popover">
-      <ds-container>
-        <categories-filter-menu-items :chunk="chunk" />
-        <general-filter-menu-items :user="currentUser" />
-        <language-filter-menu-items :user="currentUser" />
-      </ds-container>
-    </template>
-  </dropdown>
-</template>
-<script>
-import { chunk } from 'lodash'
-import Dropdown from '~/components/Dropdown'
-import { mapGetters } from 'vuex'
-import CategoriesFilterMenuItems from './CategoriesFilterMenuItems'
-import GeneralFilterMenuItems from './GeneralFilterMenuItems'
-import LanguageFilterMenuItems from './LanguageFilterMenuItems'
-
-export default {
-  components: {
-    Dropdown,
-    CategoriesFilterMenuItems,
-    GeneralFilterMenuItems,
-    LanguageFilterMenuItems,
-  },
-  props: {
-    placement: { type: String },
-    offset: { type: [String, Number] },
-    categories: { type: Array, default: () => [] },
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'auth/user',
-      filterActive: 'posts/isActive',
-    }),
-    chunk() {
-      return chunk(this.categories, 2)
-    },
-  },
-}
-</script>
diff --git a/webapp/components/HashtagsFilter/HashtagsFilter.spec.js b/webapp/components/HashtagsFilter/HashtagsFilter.spec.js
new file mode 100644
index 000000000..53cb58075
--- /dev/null
+++ b/webapp/components/HashtagsFilter/HashtagsFilter.spec.js
@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils'
+import FilterCard from './FilterCard.vue'
+
+const localVue = global.localVue
+
+describe('FilterCard.vue', () => {
+  let wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    mocks = { $t: () => {} }
+  })
+
+  describe('given a hashtag', () => {
+    beforeEach(() => {
+      propsData = {
+        hashtag: 'Frieden',
+      }
+    })
+
+    describe('mount', () => {
+      const Wrapper = () => {
+        return mount(FilterCard, { mocks, localVue, propsData })
+      }
+      beforeEach(() => {
+        wrapper = Wrapper()
+      })
+
+      it('renders a card', () => {
+        wrapper = Wrapper()
+        expect(wrapper.is('.base-card')).toBe(true)
+      })
+
+      describe('click clear search button', () => {
+        it('emits clearSearch', () => {
+          wrapper.find('.base-button').trigger('click')
+          expect(wrapper.emitted().clearSearch).toHaveLength(1)
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/components/HashtagsFilter/HashtagsFilter.vue b/webapp/components/HashtagsFilter/HashtagsFilter.vue
new file mode 100644
index 000000000..9cf853add
--- /dev/null
+++ b/webapp/components/HashtagsFilter/HashtagsFilter.vue
@@ -0,0 +1,36 @@
+<template>
+  <base-card class="hashtags-filter">
+    <h2>{{ $t('hashtags-filter.hashtag-search', { hashtag }) }}</h2>
+    <base-button
+      icon="close"
+      circle
+      :title="this.$t('hashtags-filter.clearSearch')"
+      @click="clearSearch"
+    />
+  </base-card>
+</template>
+
+<script>
+export default {
+  props: {
+    hashtag: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    clearSearch() {
+      this.$emit('clearSearch')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.hashtags-filter.base-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $space-x-small $space-base;
+}
+</style>
diff --git a/webapp/components/_new/generic/LabeledButton/LabeledButton.vue b/webapp/components/_new/generic/LabeledButton/LabeledButton.vue
new file mode 100644
index 000000000..8154c29bc
--- /dev/null
+++ b/webapp/components/_new/generic/LabeledButton/LabeledButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="labeled-button">
+    <base-button circle :icon="icon" :filled="filled" @click="event => $emit('click', event)" />
+    <label class="label">{{ label }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.labeled-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 $space-x-small;
+
+  > .label {
+    margin-top: $space-x-small;
+    font-size: $font-size-small;
+    text-align: center;
+  }
+}
+</style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index ab39deb99..9befc4e4d 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -30,12 +30,7 @@
               style="flex-grow: 0; flex-basis: auto;"
             >
               <client-only>
-                <filter-posts
-                  v-show="showFilterPostsDropdown"
-                  placement="top-start"
-                  offset="8"
-                  :categories="categories"
-                />
+                <filter-menu v-show="showFilterMenuDropdown" placement="top-start" offset="8" />
               </client-only>
             </ds-flex-item>
             <ds-flex-item
@@ -85,8 +80,7 @@ import SearchField from '~/components/features/SearchField/SearchField.vue'
 import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import seo from '~/mixins/seo'
-import FilterPosts from '~/components/FilterPosts/FilterPosts.vue'
-import CategoryQuery from '~/graphql/CategoryQuery.js'
+import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 
@@ -97,7 +91,7 @@ export default {
     Modal,
     NotificationMenu,
     AvatarMenu,
-    FilterPosts,
+    FilterMenu,
     PageFooter,
   },
   mixins: [seo],
@@ -105,36 +99,22 @@ export default {
     return {
       mobileSearchVisible: false,
       toggleMobileMenu: false,
-      categories: [],
     }
   },
   computed: {
     ...mapGetters({
       isLoggedIn: 'auth/isLoggedIn',
     }),
-    showFilterPostsDropdown() {
+    showFilterMenuDropdown() {
       const [firstRoute] = this.$route.matched
       return firstRoute && firstRoute.name === 'index'
     },
   },
-  watch: {
-    Category(category) {
-      this.categories = category || []
-    },
-  },
   methods: {
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
   },
-  apollo: {
-    Category: {
-      query() {
-        return CategoryQuery()
-      },
-      fetchPolicy: 'cache-and-network',
-    },
-  },
 }
 </script>
 
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index a2ab2246f..1c333200c 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -331,12 +331,12 @@
     "post-not-found": "Dieser Beitrag konnte nicht gefunden werden",
     "profile-not-found": "Dieses Profil konnte nicht gefunden werden"
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "Suche löschen",
     "hashtag-search": "Suche nach #{hashtag}",
     "title": "Deine Filterblase"
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "Alle",
       "header": "Themenkategorien"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index eb19dfbe7..85decedc5 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -331,12 +331,12 @@
     "post-not-found": "This post could not be found",
     "profile-not-found": "This profile could not be found"
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "Clear search",
     "hashtag-search": "Searching for #{hashtag}",
     "title": "Your filter bubble"
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "All",
       "header": "Categories of Content"
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 766de3841..556348ee5 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -329,12 +329,12 @@
     "post-not-found": "Esta contribución no se pudo encontrar",
     "profile-not-found": "Este perfil no se pudo encontrar"
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "Borrar búsqueda",
     "hashtag-search": "Buscando a #{hashtag}",
     "title": "Su burbuja de filtro"
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "Todas",
       "header": "Categorías de contenido"
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 8716b051a..0231f041a 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -318,12 +318,12 @@
     },
     "placeholder": "Écrivez quelque chose d'inspirant..."
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "Réinitialiser la recherche",
     "hashtag-search": "Recherche de #{hashtag}",
     "title": "Votre bulle de filtre"
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "Toutes",
       "header": "Catégories de contenu"
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index 407ca5c14..a6c63a86b 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -323,12 +323,12 @@
     },
     "placeholder": ""
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "",
     "hashtag-search": "",
     "title": ""
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "",
       "header": ""
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index 8b4dbf59a..97b312f46 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -160,7 +160,7 @@
   "editor": {
     "placeholder": "Napisz coś inspirującego..."
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "title": "Twoja bańka filtrująca"
   },
   "followButton": {
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 2cd742dde..5e5b21fe1 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -314,12 +314,12 @@
     },
     "placeholder": " Escreva algo inspirador…"
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "Limpar pesquisa",
     "hashtag-search": "Procurando por #{hashtag}",
     "title": "Sua bolha de filtro"
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "Todos",
       "header": "Categorias de Conteúdo"
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index 3572ae32d..47a12f75e 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -329,12 +329,12 @@
     "post-not-found": "Этот пост не удалось найти",
     "profile-not-found": "Этот профиль не удалось найти"
   },
-  "filter-menu": {
+  "hashtags-filter": {
     "clearSearch": "Очистить поиск",
     "hashtag-search": "Поиск по #{hashtag}",
     "title": "Ваш фильтр пузыря"
   },
-  "filter-posts": {
+  "filter-menu": {
     "categories": {
       "all": "Все",
       "header": "Категории"
diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js
index daa4fd4a5..686e87607 100644
--- a/webapp/pages/index.spec.js
+++ b/webapp/pages/index.spec.js
@@ -1,7 +1,7 @@
 import { config, shallowMount, mount } from '@vue/test-utils'
 import PostIndex from './index.vue'
 import Vuex from 'vuex'
-import FilterMenu from '~/components/FilterMenu/FilterMenu'
+import FilterCard from '~/components/FilterCard/FilterCard'
 
 const localVue = global.localVue
 
@@ -106,7 +106,7 @@ describe('PostIndex', () => {
     it('clears the search when the filter menu emits clearSearch', () => {
       mocks.$route.query.hashtag = '#samplehashtag'
       wrapper = Wrapper()
-      wrapper.find(FilterMenu).vm.$emit('clearSearch')
+      wrapper.find(FilterCard).vm.$emit('clearSearch')
       expect(wrapper.vm.hashtag).toBeNull()
     })
 
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 984f47b27..e6504cc7a 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -2,7 +2,7 @@
   <div>
     <masonry-grid>
       <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
-        <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
+        <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
       <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar">
         <!--<donation-info /> -->
@@ -65,7 +65,7 @@
 
 <script>
 // import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter.vue'
 import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
@@ -78,7 +78,7 @@ import UpdateQuery from '~/components/utils/UpdateQuery'
 export default {
   components: {
     // DonationInfo,
-    FilterMenu,
+    HashtagsFilter,
     PostTeaser,
     HcEmpty,
     MasonryGrid,