From d6f8b0dc773e527ebdef1381fb4a41ca87147006 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 31 Aug 2022 14:28:25 +0200
Subject: [PATCH 1/2] change category to topic in german and english locales

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

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index dee8d086a..b17e47d08 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -11,7 +11,7 @@
   "admin": {
     "categories": {
       "categoryName": "Name",
-      "name": "Kategorien",
+      "name": "Themen",
       "postCount": "Beiträge"
     },
     "dashboard": {
@@ -98,7 +98,7 @@
     }
   },
   "common": {
-    "category": "Kategorie ::: Kategorien",
+    "category": "Thema ::: Themen",
     "comment": "Kommentar ::: Kommentare",
     "letsTalk": "Miteinander reden",
     "loading": "wird geladen",
@@ -113,7 +113,7 @@
     "takeAction": "Aktiv werden",
     "user": "Benutzer ::: Benutzer",
     "validations": {
-      "categories": "es müssen eine bis drei Kategorien ausgewählt werden",
+      "categories": "es müssen eine bis drei Themen ausgewählt werden",
       "email": "muss eine gültige E-Mail-Adresse sein",
       "url": "muss eine gültige URL sein"
     },
@@ -214,7 +214,7 @@
     "amount-shouts": "{amount} recommendations",
     "amount-views": "{amount} views",
     "categories": {
-      "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
+      "infoSelectedNoOfMaxCategories": "{chosen} von {max} Themen ausgewählt"
     },
     "category": {
       "name": {
@@ -348,7 +348,7 @@
   },
   "filter-menu": {
     "all": "Alle",
-    "categories": "Themenkategorien",
+    "categories": "Themen",
     "emotions": "Emotionen",
     "filter-by": "Filtern nach ...",
     "following": "Benutzern, denen ich folge",
@@ -470,7 +470,7 @@
       "noDecision": "Keine Entscheidung!",
       "numberOfUsers": "{count} Nutzern",
       "previousDecision": "Vorherige Entscheidung:",
-      "reasonCategory": "Kategorie",
+      "reasonCategory": "Thema",
       "reasonDescription": "Beschreibung",
       "reportedOn": "Datum",
       "status": "Aktueller Status",
@@ -587,8 +587,8 @@
     },
     "reason": {
       "category": {
-        "invalid": "Bitte wähle eine gültige Kategorie aus",
-        "label": "Wähle eine Kategorie:",
+        "invalid": "Bitte wähle ein gültiges Thema aus",
+        "label": "Wähle ein Thema:",
         "options": {
           "advert_products_services_commercial": "Bewerben von Produkten und Dienstleistungen mit kommerzieller Absicht.",
           "criminal_behavior_violation_german_law": "Strafbares Verhalten bzw. Verstoß gegen deutsches Recht.",
@@ -599,7 +599,7 @@
           "other": "Andere …",
           "pornographic_content_links": "Das Senden oder Verlinken eindeutig pornografischen Materials."
         },
-        "placeholder": "Kategorie …"
+        "placeholder": "Thema …"
       },
       "description": {
         "label": "Bitte erkläre: Warum möchtest Du dies melden?",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index d6172c257..8587d9da5 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -11,7 +11,7 @@
   "admin": {
     "categories": {
       "categoryName": "Name",
-      "name": "Categories",
+      "name": "Topics",
       "postCount": "Posts"
     },
     "dashboard": {
@@ -98,7 +98,7 @@
     }
   },
   "common": {
-    "category": "Category ::: Categories",
+    "category": "Topic ::: Topics",
     "comment": "Comment ::: Comments",
     "letsTalk": "Let`s Talk",
     "loading": "loading",
@@ -113,7 +113,7 @@
     "takeAction": "Take Action",
     "user": "User ::: Users",
     "validations": {
-      "categories": "at least one and at most three categories must be selected",
+      "categories": "at least one and at most three topics must be selected",
       "email": "must be a valid e-mail address",
       "url": "must be a valid URL"
     },
@@ -214,7 +214,7 @@
     "amount-shouts": "{amount} recommendations",
     "amount-views": "{amount} views",
     "categories": {
-      "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
+      "infoSelectedNoOfMaxCategories": "{chosen} of {max} topics selected"
     },
     "category": {
       "name": {
@@ -348,7 +348,7 @@
   },
   "filter-menu": {
     "all": "All",
-    "categories": "Categories of Content",
+    "categories": "Topics",
     "emotions": "Emotions",
     "filter-by": "Filter by ...",
     "following": "Users I follow",
@@ -470,7 +470,7 @@
       "noDecision": "No decision!",
       "numberOfUsers": "{count} users",
       "previousDecision": "Previous decision:",
-      "reasonCategory": "Category",
+      "reasonCategory": "Topic",
       "reasonDescription": "Description",
       "reportedOn": "Date",
       "status": "Current status",
@@ -587,8 +587,8 @@
     },
     "reason": {
       "category": {
-        "invalid": "Please select a valid category",
-        "label": "Select a category:",
+        "invalid": "Please select a valid topic",
+        "label": "Select a topic:",
         "options": {
           "advert_products_services_commercial": "Advertising products and services with commercial intent.",
           "criminal_behavior_violation_german_law": "Criminal behavior or violation of German law.",
@@ -599,7 +599,7 @@
           "other": "Other …",
           "pornographic_content_links": "Posting or linking of clearly pornographic material."
         },
-        "placeholder": "Category …"
+        "placeholder": "Topic …"
       },
       "description": {
         "label": "Please explain: Why you like to report this?",

From 87aa47d68345bf851cdc3b3e00ca1e434196ce6f Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 31 Aug 2022 14:32:46 +0200
Subject: [PATCH 2/2] add optional topica menu when categories are active

---
 .../components/FilterMenu/CategoriesMenu.vue  | 58 +++++++++++++++++++
 webapp/components/FilterMenu/FilterMenu.vue   |  8 ---
 webapp/layouts/default.vue                    | 10 ++++
 3 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 webapp/components/FilterMenu/CategoriesMenu.vue

diff --git a/webapp/components/FilterMenu/CategoriesMenu.vue b/webapp/components/FilterMenu/CategoriesMenu.vue
new file mode 100644
index 000000000..f8a224003
--- /dev/null
+++ b/webapp/components/FilterMenu/CategoriesMenu.vue
@@ -0,0 +1,58 @@
+<template>
+  <dropdown ref="menu" placement="top-start" :offset="8" class="filter-menu">
+    <base-button
+      slot="default"
+      :filled="filterActive"
+      :ghost="!filterActive"
+      slot-scope="{ toggleMenu }"
+      @click.prevent="toggleMenu()"
+    >
+      <ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
+    </base-button>
+    <template slot="popover">
+      <div class="filter-menu-options">
+        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+        <categories-filter v-if="categoriesActive" />
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+import { mapGetters } from 'vuex'
+import CategoriesFilter from './CategoriesFilter'
+
+export default {
+  name: 'CategoriesMenu',
+  components: {
+    Dropdown,
+    CategoriesFilter,
+  },
+  props: {
+    placement: { type: String },
+    offset: { type: [String, Number] },
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      filterActive: 'posts/isActive',
+    }),
+  },
+}
+</script>
+
+<style lang="scss">
+.filter-menu-options {
+  max-width: $size-max-width-filter-menu;
+  padding: $space-small $space-x-small;
+
+  > .title {
+    font-size: $font-size-large;
+  }
+}
+</style>
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 84c7c1f67..9e211ccf9 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -14,7 +14,6 @@
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
         <following-filter />
-        <categories-filter v-if="categoriesActive" />
       </div>
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
@@ -29,24 +28,17 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
-import CategoriesFilter from './CategoriesFilter'
 
 export default {
   components: {
     Dropdown,
     FollowingFilter,
-    CategoriesFilter,
     OrderByFilter,
   },
   props: {
     placement: { type: String },
     offset: { type: [String, Number] },
   },
-  data() {
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-    }
-  },
   computed: {
     ...mapGetters({
       filterActive: 'posts/isActive',
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 0dfd752bf..97b070d11 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -15,6 +15,13 @@
             >
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
+            <ds-flex-item
+              v-if="categoriesActive && isLoggedIn"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto"
+            >
+              <categories-menu></categories-menu>
+            </ds-flex-item>
             <ds-flex-item
               :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -90,6 +97,7 @@ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
+import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
 
 export default {
   components: {
@@ -102,6 +110,7 @@ export default {
     FilterMenu,
     PageFooter,
     InviteButton,
+    CategoriesMenu,
   },
   mixins: [seo],
   data() {
@@ -109,6 +118,7 @@ export default {
       mobileSearchVisible: false,
       toggleMobileMenu: false,
       inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
   computed: {