Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 92 insertions, 0 deletions

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
new file mode 100644
index 00000000..d9ec7ece
--- /dev/null
+++ b/src/components/selectable_list/selectable_list.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="selectable-list">
+    <div
+      v-if="items.length > 0"
+      class="selectable-list-header"
+    >
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox
+          :checked="allSelected"
+          :indeterminate="someSelected"
+          @change="toggleAll"
+        >
+          {{ $t('selectable_list.select_all') }}
+        </Checkbox>
+      </div>
+      <div class="selectable-list-header-actions">
+        <slot
+          name="header"
+          :selected="filteredSelected"
+        />
+      </div>
+    </div>
+    <List
+      :items="items"
+      :get-key="getKey"
+    >
+      <template
+        slot="item"
+        slot-scope="{item}"
+      >
+        <div
+          class="selectable-list-item-inner"
+          :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+        >
+          <div class="selectable-list-checkbox-wrapper">
+            <Checkbox
+              :checked="isSelected(item)"
+              @change="checked => toggle(checked, item)"
+            />
+          </div>
+          <slot
+            name="item"
+            :item="item"
+          />
+        </div>
+      </template>
+      <template slot="empty">
+        <slot name="empty" />
+      </template>
+    </List>
+  </div>
+</template>
+
+<script src="./selectable_list.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.selectable-list {
+  &-item-inner {
+    display: flex;
+    align-items: center;
+
+    > * {
+      min-width: 0;
+    }
+  }
+
+  &-item-selected-inner {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 0.6em 0;
+    border-bottom: 2px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+
+    &-actions {
+      flex: 1;
+    }
+  }
+
+  &-checkbox-wrapper {
+    padding: 0 10px;
+    flex: none;
+  }
+}
+</style>