New client random catchup (#8891)

* Added initial challenge pages

* Added challenge item and find guilds page

* Added challenge detail

* Added challenge modals

* Ported over challenge service code

* Ported over challenge ctrl code

* Added styles and column

* Minor modal updates

* Removed duplicate keys

* Fixed casing

* Added initial chat component

* Added copy as todo modal

* Added sync

* Added chat to groups

* Fixed lint

* Added notification service

* Added tag services

* Added notifications

* Added hall

* Added analytics

* Added http interceptor

* Added initial autocomplete

* Added initial footer component

* Began coding and designing footer

* Added inital hall

* Ported over inital group plan ctrl code

* Added initial invite modal

* Added initial member detail modal

* Added initial notification menu

* Ported over inital notification code

* Fixed import line

* Fixed autocomplete import casing

website/client/components/groups/sidebar.vue

@@ -0,0 +1,152 @@
+<template lang="pug">
+.standard-sidebar
+  .form-group
+    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
+
+  form
+    h3(v-once) {{ $t('filter') }}
+    .form-group
+      h5 Category
+      .form-check(
+        v-for="group in categoryOptions",
+        :key="group.key",
+      )
+        label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters")
+          span.custom-control-indicator
+          span.custom-control-description(v-once) {{ $t(group.label) }}
+    .form-group
+      h5 Role
+      .form-check(
+        v-for="group in roleOptions",
+        :key="group.key",
+      )
+        label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters")
+          span.custom-control-indicator
+          span.custom-control-description(v-once) {{ $t(group.label) }}
+    .form-group
+      h5 Guild Size
+      .form-check(
+        v-for="group in guildSizeOptions",
+        :key="group.key",
+      )
+        label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
+          span.custom-control-indicator
+          span.custom-control-description(v-once) {{ $t(group.label) }}
+</template>
+
+<script>
+import throttle from 'lodash/throttle';
+
+export default {
+  data () {
+    return {
+      categoryFilters: [],
+      categoryOptions: [
+        {
+          label: 'habiticaOfficial',
+          key: 'official',
+        },
+        {
+          label: 'animals',
+          key: 'animals',
+        },
+        {
+          label: 'artDesign',
+          key: 'art_design',
+        },
+        {
+          label: 'booksWriting',
+          key: 'books_writing',
+        },
+        {
+          label: 'comicsHobbies',
+          key: 'comics_hobbies',
+        },
+        {
+          label: 'diyCrafts',
+          key: 'diy_crafts',
+        },
+        {
+          label: 'education',
+          key: 'education',
+        },
+        {
+          label: 'foodCooking',
+          key: 'food_cooking',
+        },
+        {
+          label: 'healthFitness',
+          key: 'health_fitness',
+        },
+        {
+          label: 'music',
+          key: 'music',
+        },
+        {
+          label: 'relationship',
+          key: 'relationship',
+        },
+        {
+          label: 'scienceTech',
+          key: 'science_tech ',
+        },
+      ],
+      roleFilters: [],
+      roleOptions: [
+        {
+          label: 'guildLeader',
+          key: 'guild_leader',
+        },
+        {
+          label: 'member',
+          key: 'member',
+        },
+      ],
+      guildSizeFilters: [],
+      guildSizeOptions: [
+        {
+          label: 'goldTier',
+          key: 'gold_tier',
+        },
+        {
+          label: 'silverTier',
+          key: 'silver_tier',
+        },
+        {
+          label: 'bronzeTier',
+          key: 'bronze_tier',
+        },
+      ],
+      searchTerm: '',
+    };
+  },
+  watch: {
+    categoryFilters: function categoryFilters () {
+      this.emitFilters();
+    },
+    roleFilters: function roleFilters () {
+      this.emitFilters();
+    },
+    guildSizeFilters: function guildSizeFilters () {
+      this.emitFilters();
+    },
+    searchTerm: throttle(function searchTerm (newSearch) {
+      this.$emit('search', {
+        searchTerm: newSearch,
+      });
+    }, 250),
+  },
+  methods: {
+    emitFilters () {
+      this.$emit('filter', {
+        categories: this.categoryFilters,
+        roles: this.roleFilters,
+        guildSize: this.guildSizeFilters,
+      });
+    },
+  },
+};
+</script>