Refactor/Add new components

webapp/components/CommentList/CommentList.vue

@@ -1,19 +1,9 @@
 <template>
   <div id="comments">
     <h3 style="margin-top: -10px;">
-      <span>
-        <base-icon name="comments" />
-        <ds-tag
-          v-if="post.comments.length"
-          style="margin-top: -4px; margin-left: -12px; position: absolute;"
-          color="primary"
-          size="small"
-          round
-        >
-          {{ post.comments.length }}
-        </ds-tag>
-        <span class="list-title">{{ $t('common.comment', null, 0) }}</span>
-      </span>
+      <counter-icon icon="comments" :count="post.comments.length">
+        {{ $t('common.comment', null, 0) }}
+      </counter-icon>
     </h3>
     <ds-space margin-bottom="large" />
     <div v-if="post.comments && post.comments.length" id="comments" class="comments">
@@ -31,12 +21,14 @@
   </div>
 </template>
 <script>
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import Comment from '~/components/Comment/Comment'
 import scrollToAnchor from '~/mixins/scrollToAnchor'
 
 export default {
   mixins: [scrollToAnchor],
   components: {
+    CounterIcon,
     Comment,
   },
   props: {
@@ -58,9 +50,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.list-title {
-  margin-left: $space-x-small;
-}
-</style>

webapp/components/DropdownFilter/DropdownFilter.vue

@@ -25,7 +25,7 @@
         class="dropdown-menu-item"
         :route="item.route"
         :parents="item.parents"
-        @click.stop.prevent="filterNotifications(item.route, toggleMenu)"
+        @click.stop.prevent="filter(item.route, toggleMenu)"
       >
         {{ item.route.label }}
       </ds-menu-item>
@@ -44,8 +44,8 @@ export default {
     filterOptions: { type: Array, default: () => [] },
   },
   methods: {
-    filterNotifications(option, toggleMenu) {
-      this.$emit('filterNotifications', option)
+    filter(option, toggleMenu) {
+      this.$emit('filter', option)
       toggleMenu()
     },
   },

webapp/components/User/User.vue

@@ -27,7 +27,7 @@
           </ds-text>
           <!-- dateTime: kind of same as above: make own component? -->
           <ds-text v-if="positionDatetime === 'below' && dateTime" size="small" color="soft">
-            <ds-icon name="clock" />
+            <base-icon name="clock" />
             <client-only>
               <hc-relative-date-time :date-time="dateTime" />
             </client-only>

webapp/components/_new/generic/CounterIcon/CounterIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <span>
+    <base-icon :name="icon" />
+    <ds-tag
+      style="margin-top: -4px; margin-left: -12px; position: absolute;"
+      color="primary"
+      size="small"
+      round
+    >
+      {{ count }}
+    </ds-tag>
+    <span class="counter-icon-text">
+      <slot />
+    </span>
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    icon: { type: String, required: true },
+    count: { type: Number, required: true },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.counter-icon-text {
+  margin-left: $space-xx-small;
+}
+</style>

webapp/locales/en.json

@@ -500,6 +500,13 @@
       "reasonCategory": "Category",
       "reasonDescription": "Description",
       "submitter": "Reported by",
+      "filterLabel": {
+        "all": "All",
+        "unreviewed": "Unreviewed",
+        "reviewed": "Reviewed",
+        "closed": "Closed"
+      },
+      "moreDetails": "Report Details",
       "decideModal": {
         "submit": "Confirm decision",
         "cancel": "Cancel",

webapp/pages/moderation/index.vue

@@ -1,12 +1,9 @@
 <template>
-  <ds-card space="small">
-    <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
-    <report-list />
-  </ds-card>
+  <report-list />
 </template>
 
 <script>
-import ReportList from '~/components/features/ReportList/ReportList'
+import ReportList from '~/components/_new/features/ReportList/ReportList'
 
 export default {
   components: {

webapp/pages/notifications/index.vue

@@ -7,7 +7,7 @@
       <ds-flex-item width="110px">
         <client-only>
           <dropdown-filter
-            @filterNotifications="filterNotifications"
+            @filter="filter"
             :filterOptions="filterOptions"
             :selected="selected"
           />
@@ -60,7 +60,7 @@ export default {
     },
   },
   methods: {
-    filterNotifications(option) {
+    filter(option) {
       this.notificationRead = option.value
       this.selected = option.label
       this.$apollo.queries.notifications.refresh()