use SelectableList for blocks/mutes list

3 files changed, 23 insertions, 12 deletions

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index cd431eeb..138e63ab 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -4,12 +4,11 @@ const SelectableList = {
   components: {
     Checkbox
   },
-  props: ['checked'],
-  data () {
-  },
-  computed: {
-  },
-  methods: {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
   }
 }
 
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 11853672..2e0671ef 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,10 +1,22 @@
 <template>
-  <div>
-    <Checkbox v-model="checked" />
+  <div class="selectable-list">
+    <div v-for="item in items">
+      <Checkbox v-model="checked" />
+      <slot name="item" :item="item" />
+    </div>
+    <div class="selectable-list-empty-content faint" v-if="items.length === 0">
+      <slot name="empty" />
+    </div>
   </div>
 </template>
 
-<script src="./selectable_row.js"></script>
+<script src="./selectable_list.js"></script>
 
 <style lang="scss">
+.selectable-list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
 </style>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 2bbb01db..f8742cd4 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,7 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
-import List from '../list/list.vue'
+import SelectableList from '../selectable_list/selectable_list.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
@@ -19,13 +19,13 @@ const BlockList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
   select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
   childPropName: 'items'
-})(List)
+})(SelectableList)
 
 const MuteList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchMutes'),
   select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
   childPropName: 'items'
-})(List)
+})(SelectableList)
 
 const UserSettings = {
   data () {