Merge remote-tracking branch 'origin/develop' into scrolltotop

* origin/develop: (59 commits)
  a11y
  Use dedicated indicator for non-ascii domain names
  add a favorites "timeline" shortcut
  refactor navigation-entry and use them in other nav items
  Update dependency sinon-chai to v3
  Update dependency semver to v7
  Update dependency vue-router to v4.1.5
  Update dependency eslint to v8.23.0
  Update dependency vue-template-compiler to v2.7.10
  Update dependency @vue/babel-helper-vue-jsx-merge-props to v1.4.0
  Update dependency eslint-plugin-promise to v6.0.1
  fix lists edit page
  change ugly checkbox to a list element that doesn't look too much out of place
  a11y
  squeeze/stretch pinned items as long as there's enough space for it, hide items that won't fitc
  Remove isparta
  lint
  fix being unable to edit timeline pins on mobile
  aria
  fix mobile side drawer causing issues
  ...

2 files changed, 131 insertions, 0 deletions

diff --git a/src/components/user_list_menu/user_list_menu.js b/src/components/user_list_menu/user_list_menu.js
new file mode 100644
index 00000000..21996031
--- /dev/null
+++ b/src/components/user_list_menu/user_list_menu.js
@@ -0,0 +1,93 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
+
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popover from '../popover/popover.vue'
+
+library.add(faChevronRight)
+
+const UserListMenu = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {}
+  },
+  components: {
+    DialogModal,
+    Popover
+  },
+  created () {
+    this.$store.dispatch('fetchUserInLists', this.user.id)
+  },
+  computed: {
+    ...mapState({
+      allLists: state => state.lists.allLists
+    }),
+    inListsSet () {
+      return new Set(this.user.inLists.map(x => x.id))
+    },
+    lists () {
+      if (!this.user.inLists) return []
+      return this.allLists.map(list => ({
+        ...list,
+        inList: this.inListsSet.has(list.id)
+      }))
+    }
+  },
+  methods: {
+    toggleList (listId) {
+      if (this.inListsSet.has(listId)) {
+        this.$store.dispatch('removeListAccount', { accountId: this.user.id, listId }).then((response) => {
+          if (!response.ok) { return }
+          this.$store.dispatch('fetchUserInLists', this.user.id)
+        })
+      } else {
+        this.$store.dispatch('addListAccount', { accountId: this.user.id, listId }).then((response) => {
+          if (!response.ok) { return }
+          this.$store.dispatch('fetchUserInLists', this.user.id)
+        })
+      }
+    },
+    toggleRight (right) {
+      const store = this.$store
+      if (this.user.rights[right]) {
+        store.state.api.backendInteractor.deleteRight({ user: this.user, right }).then(response => {
+          if (!response.ok) { return }
+          store.commit('updateRight', { user: this.user, right, value: false })
+        })
+      } else {
+        store.state.api.backendInteractor.addRight({ user: this.user, right }).then(response => {
+          if (!response.ok) { return }
+          store.commit('updateRight', { user: this.user, right, value: true })
+        })
+      }
+    },
+    toggleActivationStatus () {
+      this.$store.dispatch('toggleActivationStatus', { user: this.user })
+    },
+    deleteUserDialog (show) {
+      this.showDeleteUserDialog = show
+    },
+    deleteUser () {
+      const store = this.$store
+      const user = this.user
+      const { id, name } = user
+      store.state.api.backendInteractor.deleteUser({ user })
+        .then(e => {
+          this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
+          const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
+          const isTargetUser = this.$route.params.name === name || this.$route.params.id === id
+          if (isProfile && isTargetUser) {
+            window.history.back()
+          }
+        })
+    },
+    setToggled (value) {
+      this.toggled = value
+    }
+  }
+}
+
+export default UserListMenu
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
new file mode 100644
index 00000000..06947ab7
--- /dev/null
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="UserListMenu">
+    <Popover
+      trigger="hover"
+      placement="left"
+      remove-padding
+    >
+      <template #content>
+        <div class="dropdown-menu">
+          <button
+            v-for="list in lists"
+            :key="list.id"
+            class="button-default dropdown-item"
+            @click="toggleList(list.id)"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-checked': list.inList }"
+            />
+            {{ list.title }}
+          </button>
+        </div>
+      </template>
+      <template #trigger>
+        <button class="btn button-default dropdown-item -has-submenu">
+          {{ $t('lists.manage_lists') }}
+          <FAIcon
+            class="chevron-icon"
+            size="lg"
+            icon="chevron-right"
+          />
+        </button>
+      </template>
+    </Popover>
+  </div>
+</template>
+
+<script src="./user_list_menu.js"></script>