From a50999093716d8ce6db47a47b9290395456985de Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 21:13:25 -0400
Subject: add checkbox component

---
 src/components/checkbox/checkbox.js   | 44 ++++++++++++++++++++++++++++++++
 src/components/checkbox/checkbox.scss | 48 +++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/components/checkbox/checkbox.js
 create mode 100644 src/components/checkbox/checkbox.scss

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
new file mode 100644
index 00000000..76e7e4f4
--- /dev/null
+++ b/src/components/checkbox/checkbox.js
@@ -0,0 +1,44 @@
+// TODO: Template-based functional component is supported in vue-loader 13.3.0+.
+// Also, somehow, props are not provided through 'context' even though they are defined.
+// Need to upgrade vue-loader
+
+import './checkbox.scss'
+
+export default {
+  functional: true,
+  name: 'Checkbox',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  render (createElement, { data, children }) {
+    const { props = {}, attrs = {}, on = {}, ...rest } = data
+    const { name, checked, disabled, readonly, ...restAttrs } = attrs
+    const { change, ...restListeners } = on
+    const wrapperProps = {
+      attrs: restAttrs,
+      on: restListeners,
+      ...rest
+    }
+    const inputProps = {
+      attrs: {
+        name,
+        checked,
+        disabled,
+        readonly,
+        ...props
+      },
+      on: {}
+    }
+    if (change) {
+      inputProps.on.change = e => change(e.target.checked)
+    }
+    return (
+      <label class="checkbox" {...wrapperProps}>
+        <input type="checkbox" {...inputProps} />
+        <i class="checkbox-indicator" />
+        {children && <span>{children}</span>}
+      </label>
+    )
+  }
+}
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
new file mode 100644
index 00000000..4dfcfe34
--- /dev/null
+++ b/src/components/checkbox/checkbox.scss
@@ -0,0 +1,48 @@
+@import '../../_variables.scss';
+
+.checkbox {
+  position: relative;
+  display: inline-block;
+  padding-left: 1.2em;
+
+  &-indicator::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    content: '✔';
+    transition: color 200ms;
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: 0px 0px 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
+    vertical-align: top;
+    text-align: center;
+    line-height: 1.1em;
+    font-size: 1.1em;
+    color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .checkbox-indicator::before {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &:disabled + .checkbox-indicator::before {
+      opacity: .5;
+    }
+  }
+
+  & > span {
+    margin-left: .5em;
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From 4b292564d8add9973116b785132648ddc2be3e1a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 21:43:24 -0400
Subject: add SelectableRow component

---
 src/components/selectable_row/selectable_row.js  | 16 ++++++++++++++++
 src/components/selectable_row/selectable_row.vue | 10 ++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/components/selectable_row/selectable_row.js
 create mode 100644 src/components/selectable_row/selectable_row.vue

(limited to 'src')

diff --git a/src/components/selectable_row/selectable_row.js b/src/components/selectable_row/selectable_row.js
new file mode 100644
index 00000000..9a2d57cd
--- /dev/null
+++ b/src/components/selectable_row/selectable_row.js
@@ -0,0 +1,16 @@
+import Checkbox from '../checkbox/checkbox.js'
+
+const SelectableRow = {
+  components: {
+    Checkbox
+  },
+  props: ['checked'],
+  data () {
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+
+export default SelectableRow
diff --git a/src/components/selectable_row/selectable_row.vue b/src/components/selectable_row/selectable_row.vue
new file mode 100644
index 00000000..11853672
--- /dev/null
+++ b/src/components/selectable_row/selectable_row.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <Checkbox v-model="checked" />
+  </div>
+</template>
+
+<script src="./selectable_row.js"></script>
+
+<style lang="scss">
+</style>
-- 
cgit v1.2.3-70-g09d2


From 1cec2b696952ef2c472219329961bc102ed315df Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:17:42 -0400
Subject: use reusable List vue component instead of withList hoc

Using slot is the preferred way in vue
---
 src/components/list/list.vue                   | 28 ++++++++++++++++++++++++++
 src/components/user_settings/user_settings.js  | 27 ++++++++++---------------
 src/components/user_settings/user_settings.vue | 14 +++++++++----
 3 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 src/components/list/list.vue

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
new file mode 100644
index 00000000..f361e3b1
--- /dev/null
+++ b/src/components/list/list.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <slot name="item" v-for="item in items" :item="item" />
+    <div class="list-empty-content faint" v-if="items.length === 0">
+      <slot name="empty" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.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 dd931e67..057d1cec 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -10,29 +10,24 @@ 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 EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 import userSearchApi from '../../services/new_api/user_search.js'
 
-const BlockList = compose(
-  withSubscription({
-    fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-    select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-    childPropName: 'entries'
-  }),
-  withList({ getEntryProps: userId => ({ userId }) })
-)(BlockCard)
+const BlockList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  childPropName: 'items'
+})(List)
 
-const MuteList = compose(
-  withSubscription({
-    fetch: (props, $store) => $store.dispatch('fetchMutes'),
-    select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-    childPropName: 'entries'
-  }),
-  withList({ getEntryProps: userId => ({ userId }) })
-)(MuteCard)
+const MuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  childPropName: 'items'
+})(List)
 
 const UserSettings = {
   data () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 9d37ffc4..741fbe3f 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -200,9 +200,12 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <block-list :refresh="true">
+          <BlockList :refresh="true">
+            <template slot="item" scope="p">
+              <BlockCard :key="p.item" :userId="p.item" />
+            </template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
-          </block-list>
+          </BlockList>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
@@ -211,9 +214,12 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <mute-list :refresh="true">
+          <MuteList :refresh="true">
+            <template slot="item" scope="p">
+              <MuteCard :key="p.item" :userId="p.item" />
+            </template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
-          </mute-list>
+          </MuteList>
         </div>
       </tab-switcher>
     </div>
-- 
cgit v1.2.3-70-g09d2


From 738a3dc02da7a3633137e8f0831ec8404e1ba85b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:28:08 -0400
Subject: refactor using List component

---
 src/components/user_profile/user_profile.js  | 38 +++++++++++++---------------
 src/components/user_profile/user_profile.vue | 12 +++++++--
 2 files changed, 27 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index cb465d66..8dbf8dac 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -4,30 +4,25 @@ import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
+import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import withList from '../../hocs/with_list/with_list'
 
-const FollowerList = compose(
-  withLoadMore({
-    fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
-    select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
-    destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
-    childPropName: 'entries',
-    additionalPropNames: ['userId']
-  }),
-  withList({ getEntryProps: user => ({ user }) })
-)(FollowCard)
+const FollowerList = withLoadMore({
+  fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
+  select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
+  destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
+  childPropName: 'items',
+  additionalPropNames: ['userId']
+})(List)
 
-const FriendList = compose(
-  withLoadMore({
-    fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
-    select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
-    destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
-    childPropName: 'entries',
-    additionalPropNames: ['userId']
-  }),
-  withList({ getEntryProps: user => ({ user }) })
-)(FollowCard)
+const FriendList = withLoadMore({
+  fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
+  select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
+  destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
+  childPropName: 'items',
+  additionalPropNames: ['userId']
+})(List)
 
 const UserProfile = {
   data () {
@@ -134,7 +129,8 @@ const UserProfile = {
     Timeline,
     FollowerList,
     FriendList,
-    ModerationTools
+    ModerationTools,
+    FollowCard
   }
 }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 89900f60..39f3c381 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -14,10 +14,18 @@
         :user-id="userId"
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
-        <FriendList :userId="userId" />
+        <FriendList :userId="userId">
+          <template slot="item" scope="p">
+            <FollowCard :key="p.item.id" :user="p.item" />
+          </template>
+        </FriendList>
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
-        <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
+        <FollowerList :userId="userId">
+          <template slot="item" scope="p">
+            <FollowCard :key="p.item.id" :user="p.item" :noFollowsYou="isUs" />
+          </template>
+        </FollowerList>
       </div>
       <Timeline
         :label="$t('user_card.media')"
-- 
cgit v1.2.3-70-g09d2


From 0bf451bb36c888fe98aa186239ba35d72e533cc7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:31:17 -0400
Subject: remove withList hoc

---
 src/components/user_profile/user_profile.js   |  2 --
 src/components/user_settings/user_settings.js |  2 --
 src/hocs/with_list/with_list.js               | 40 ---------------------------
 src/hocs/with_list/with_list.scss             |  6 ----
 4 files changed, 50 deletions(-)
 delete mode 100644 src/hocs/with_list/with_list.js
 delete mode 100644 src/hocs/with_list/with_list.scss

(limited to 'src')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 8dbf8dac..1ef247cd 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,4 +1,3 @@
-import { compose } from 'vue-compose'
 import get from 'lodash/get'
 import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
@@ -6,7 +5,6 @@ import Timeline from '../timeline/timeline.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
-import withList from '../../hocs/with_list/with_list'
 
 const FollowerList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 057d1cec..2bbb01db 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -1,4 +1,3 @@
-import { compose } from 'vue-compose'
 import unescape from 'lodash/unescape'
 import get from 'lodash/get'
 import map from 'lodash/map'
@@ -14,7 +13,6 @@ import List from '../list/list.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
-import withList from '../../hocs/with_list/with_list'
 import userSearchApi from '../../services/new_api/user_search.js'
 
 const BlockList = withSubscription({
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
deleted file mode 100644
index 896f8fc8..00000000
--- a/src/hocs/with_list/with_list.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Vue from 'vue'
-import map from 'lodash/map'
-import isEmpty from 'lodash/isEmpty'
-import './with_list.scss'
-
-const defaultEntryPropsGetter = entry => ({ entry })
-const defaultKeyGetter = entry => entry.id
-
-const withList = ({
-  getEntryProps = defaultEntryPropsGetter,  // function to accept entry and index values and return props to be passed into the item component
-  getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
-}) => (ItemComponent) => (
-  Vue.component('withList', {
-    props: [
-      'entries',                            // array of entry
-      'entryProps',                         // additional props to be passed into each entry
-      'entryListeners'                      // additional event listeners to be passed into each entry
-    ],
-    render (createElement) {
-      return (
-        <div class="with-list">
-          {map(this.entries, (entry, index) => {
-            const props = {
-              key: getKey(entry, index),
-              props: {
-                ...this.$props.entryProps,
-                ...getEntryProps(entry, index)
-              },
-              on: this.$props.entryListeners
-            }
-            return <ItemComponent {...props} />
-          })}
-          {isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
-        </div>
-      )
-    }
-  })
-)
-
-export default withList
diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss
deleted file mode 100644
index c6e13d5b..00000000
--- a/src/hocs/with_list/with_list.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.with-list {
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 23b9d1eaa31efc83705288409e5993279ae969e6 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:38:48 -0400
Subject: rename selectable_row to selectable_list

---
 src/components/selectable_list/selectable_list.js  | 16 ++++++++++++++++
 src/components/selectable_list/selectable_list.vue | 10 ++++++++++
 src/components/selectable_row/selectable_row.js    | 16 ----------------
 src/components/selectable_row/selectable_row.vue   | 10 ----------
 4 files changed, 26 insertions(+), 26 deletions(-)
 create mode 100644 src/components/selectable_list/selectable_list.js
 create mode 100644 src/components/selectable_list/selectable_list.vue
 delete mode 100644 src/components/selectable_row/selectable_row.js
 delete mode 100644 src/components/selectable_row/selectable_row.vue

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
new file mode 100644
index 00000000..cd431eeb
--- /dev/null
+++ b/src/components/selectable_list/selectable_list.js
@@ -0,0 +1,16 @@
+import Checkbox from '../checkbox/checkbox.js'
+
+const SelectableList = {
+  components: {
+    Checkbox
+  },
+  props: ['checked'],
+  data () {
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+
+export default SelectableList
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
new file mode 100644
index 00000000..11853672
--- /dev/null
+++ b/src/components/selectable_list/selectable_list.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <Checkbox v-model="checked" />
+  </div>
+</template>
+
+<script src="./selectable_row.js"></script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/selectable_row/selectable_row.js b/src/components/selectable_row/selectable_row.js
deleted file mode 100644
index 9a2d57cd..00000000
--- a/src/components/selectable_row/selectable_row.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Checkbox from '../checkbox/checkbox.js'
-
-const SelectableRow = {
-  components: {
-    Checkbox
-  },
-  props: ['checked'],
-  data () {
-  },
-  computed: {
-  },
-  methods: {
-  }
-}
-
-export default SelectableRow
diff --git a/src/components/selectable_row/selectable_row.vue b/src/components/selectable_row/selectable_row.vue
deleted file mode 100644
index 11853672..00000000
--- a/src/components/selectable_row/selectable_row.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>
-    <Checkbox v-model="checked" />
-  </div>
-</template>
-
-<script src="./selectable_row.js"></script>
-
-<style lang="scss">
-</style>
-- 
cgit v1.2.3-70-g09d2


From d9b3f5be4733f0eef4d3c8dff982224cd1a5303e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:48:00 -0400
Subject: use SelectableList for blocks/mutes list

---
 src/components/selectable_list/selectable_list.js  | 11 +++++------
 src/components/selectable_list/selectable_list.vue | 18 +++++++++++++++---
 src/components/user_settings/user_settings.js      |  6 +++---
 3 files changed, 23 insertions(+), 12 deletions(-)

(limited to 'src')

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 () {
-- 
cgit v1.2.3-70-g09d2


From e0b246375009a4c533d90def0842bd8cf59f78cc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:26:13 -0400
Subject: save selected items to the state

---
 src/components/selectable_list/selectable_list.js  | 25 ++++++++++++++++++++++
 src/components/selectable_list/selectable_list.vue |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 138e63ab..5c01bbab 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -8,6 +8,31 @@ const SelectableList = {
     items: {
       type: Array,
       default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item
+    }
+  },
+  data () {
+    return {
+      selected: []
+    }
+  },
+  methods: {
+    toggle (checked, item) {
+      const oldChecked = this.isChecked(item)
+      if (checked !== oldChecked) {
+        const key = this.getKey(item)
+        if (checked) {
+          this.selected.push(key)
+        } else {
+          this.selected.splice(this.selected.indexOf(key), 1)
+        }
+      }
+    },
+    isChecked (item) {
+      return this.selected.indexOf(this.getKey(item)) !== -1
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 2e0671ef..d7b166bc 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="selectable-list">
     <div v-for="item in items">
-      <Checkbox v-model="checked" />
+      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">
-- 
cgit v1.2.3-70-g09d2


From f6e9f2874576f9496618d583de878fdc8487eaca Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:29:24 -0400
Subject: use key properly

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index d7b166bc..f0ab33dd 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="selectable-list">
-    <div v-for="item in items">
+    <div v-for="item in items" :key="getKey(item)">
       <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
       <slot name="item" :item="item" />
     </div>
-- 
cgit v1.2.3-70-g09d2


From 3a318dc373dba930573d542f4910772bf6fdc502 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:35:43 -0400
Subject: add some styling to the selectable-list component

---
 src/components/selectable_list/selectable_list.js  |  4 ++--
 src/components/selectable_list/selectable_list.vue | 22 ++++++++++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 5c01bbab..7a724144 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -21,7 +21,7 @@ const SelectableList = {
   },
   methods: {
     toggle (checked, item) {
-      const oldChecked = this.isChecked(item)
+      const oldChecked = this.isSelected(item)
       if (checked !== oldChecked) {
         const key = this.getKey(item)
         if (checked) {
@@ -31,7 +31,7 @@ const SelectableList = {
         }
       }
     },
-    isChecked (item) {
+    isSelected (item) {
       return this.selected.indexOf(this.getKey(item)) !== -1
     }
   }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index f0ab33dd..7a7a7644 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)">
-      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
+    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+      </div>
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">
@@ -13,7 +15,23 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .selectable-list {
+  &-item {
+    display: flex;
+
+    &-selected {
+      background-color: $fallback--lightBg;
+      background-color: var(--lightBg, $fallback--lightBg);
+    }
+  }
+
+  &-checkbox-wrapper {
+    padding: 10px;
+    flex: none;
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;
-- 
cgit v1.2.3-70-g09d2


From 80d83b46d91d812bc6edf4085906c1b01b0cac46 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:42:24 -0400
Subject: move border-bottom style to the list

---
 src/components/basic_user_card/basic_user_card.vue | 10 +---------
 src/components/selectable_list/selectable_list.vue |  3 +++
 2 files changed, 4 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 8afe8b44..48de6678 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -24,19 +24,11 @@
 <script src="./basic_user_card.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .basic-user-card {
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding-top: 0.6em;
-  padding-right: 1em;
-  padding-bottom: 0.6em;
-  padding-left: 1em;
-  border-bottom: 1px solid;
-  border-bottom-color: $fallback--border;
-  border-bottom-color: var(--border, $fallback--border);
+  padding: 0.6em 1em;
 
   &-collapsed-content {
     margin-left: 0.7em;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 7a7a7644..25b8e56b 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -20,6 +20,9 @@
 .selectable-list {
   &-item {
     display: flex;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
 
     &-selected {
       background-color: $fallback--lightBg;
-- 
cgit v1.2.3-70-g09d2


From d806038ad3e78314610e1d0b496c19e0ccb40a0f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:45:45 -0400
Subject: add border-bottom style to the list component as well

---
 src/components/list/list.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index f361e3b1..d8c9f5a3 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="list">
-    <slot name="item" v-for="item in items" :item="item" />
+    <div v-for="item in items" class="list-item" :key="getKey(item)">
+      <slot name="item" :item="item" />
+    </div>
     <div class="list-empty-content faint" v-if="items.length === 0">
       <slot name="empty" />
     </div>
@@ -13,13 +15,26 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item
     }
   }
 }
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .list {
+  &-item {
+    display: flex;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;
-- 
cgit v1.2.3-70-g09d2


From 792ae1697e1a3710a6f12eb70a3c81b0318f9515 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:54:14 -0400
Subject: refactor selectable-list using list component

---
 src/components/list/list.vue                       |  1 -
 src/components/selectable_list/selectable_list.js  |  2 ++
 src/components/selectable_list/selectable_list.vue | 37 ++++++++--------------
 3 files changed, 16 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index d8c9f5a3..1159898d 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -29,7 +29,6 @@ export default {
 
 .list {
   &-item {
-    display: flex;
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 7a724144..1fdd5a67 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -1,7 +1,9 @@
+import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.js'
 
 const SelectableList = {
   components: {
+    List,
     Checkbox
   },
   props: {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 25b8e56b..e55a4ad3 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,15 +1,14 @@
 <template>
-  <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
-      <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+  <List class="selectable-list" :items="items" :getKey="getKey">
+    <template slot="item" scope="p">
+      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+        <div class="selectable-list-checkbox-wrapper">
+          <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+        </div>
+        <slot name="item" :item="p.item" />
       </div>
-      <slot name="item" :item="item" />
-    </div>
-    <div class="selectable-list-empty-content faint" v-if="items.length === 0">
-      <slot name="empty" />
-    </div>
-  </div>
+    </template>
+  </List>
 </template>
 
 <script src="./selectable_list.js"></script>
@@ -18,26 +17,18 @@
 @import '../../_variables.scss';
 
 .selectable-list {
-  &-item {
+  &-item-inner {
     display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+  }
 
-    &-selected {
-      background-color: $fallback--lightBg;
-      background-color: var(--lightBg, $fallback--lightBg);
-    }
+  &-item-selected-inner {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
   }
 
   &-checkbox-wrapper {
     padding: 10px;
     flex: none;
   }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 32035217b8e04b0f178409f0f1f49d54296ce80c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 00:00:21 -0400
Subject: clean up

---
 src/components/list/list.vue                      |  2 +-
 src/components/selectable_list/selectable_list.js | 11 +----------
 src/components/user_profile/user_profile.vue      |  4 ++--
 src/components/user_settings/user_settings.vue    |  8 ++++----
 4 files changed, 8 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 1159898d..7d62283a 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -18,7 +18,7 @@ export default {
     },
     getKey: {
       type: Function,
-      default: item => item
+      default: item => item.id
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 1fdd5a67..7856d725 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -6,16 +6,7 @@ const SelectableList = {
     List,
     Checkbox
   },
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    getKey: {
-      type: Function,
-      default: item => item
-    }
-  },
+  props: List.props,
   data () {
     return {
       selected: []
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 39f3c381..8d78d2d2 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -16,14 +16,14 @@
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId">
           <template slot="item" scope="p">
-            <FollowCard :key="p.item.id" :user="p.item" />
+            <FollowCard :user="p.item" />
           </template>
         </FriendList>
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
         <FollowerList :userId="userId">
           <template slot="item" scope="p">
-            <FollowCard :key="p.item.id" :user="p.item" :noFollowsYou="isUs" />
+            <FollowCard :user="p.item" :noFollowsYou="isUs" />
           </template>
         </FollowerList>
       </div>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 741fbe3f..66ce6cea 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -200,9 +200,9 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <BlockList :refresh="true">
+          <BlockList :refresh="true" :getKey="item => item">
             <template slot="item" scope="p">
-              <BlockCard :key="p.item" :userId="p.item" />
+              <BlockCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </BlockList>
@@ -214,9 +214,9 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <MuteList :refresh="true">
+          <MuteList :refresh="true" :getKey="item => item">
             <template slot="item" scope="p">
-              <MuteCard :key="p.item" :userId="p.item" />
+              <MuteCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </MuteList>
-- 
cgit v1.2.3-70-g09d2


From b8ec13c8fd3b3498f55cce50807b2344779ea69f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 00:22:55 -0400
Subject: let not selectable-list know about getKey prop

---
 src/components/list/list.vue                       | 2 +-
 src/components/selectable_list/selectable_list.js  | 9 ++++-----
 src/components/selectable_list/selectable_list.vue | 4 ++--
 3 files changed, 7 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 7d62283a..e63fea63 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="list">
     <div v-for="item in items" class="list-item" :key="getKey(item)">
-      <slot name="item" :item="item" />
+      <slot name="item" :item="item" :keyVal="getKey(item)" />
     </div>
     <div class="list-empty-content faint" v-if="items.length === 0">
       <slot name="empty" />
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 7856d725..93efa840 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -13,10 +13,9 @@ const SelectableList = {
     }
   },
   methods: {
-    toggle (checked, item) {
-      const oldChecked = this.isSelected(item)
+    toggle (checked, key) {
+      const oldChecked = this.isSelected(key)
       if (checked !== oldChecked) {
-        const key = this.getKey(item)
         if (checked) {
           this.selected.push(key)
         } else {
@@ -24,8 +23,8 @@ const SelectableList = {
         }
       }
     },
-    isSelected (item) {
-      return this.selected.indexOf(this.getKey(item)) !== -1
+    isSelected (key) {
+      return this.selected.indexOf(key) !== -1
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e55a4ad3..d8938062 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,9 +1,9 @@
 <template>
   <List class="selectable-list" :items="items" :getKey="getKey">
     <template slot="item" scope="p">
-      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.keyVal) }">
         <div class="selectable-list-checkbox-wrapper">
-          <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+          <Checkbox :checked="isSelected(p.keyVal)" @change="checked => toggle(checked, p.keyVal)" />
         </div>
         <slot name="item" :item="p.item" />
       </div>
-- 
cgit v1.2.3-70-g09d2


From f066ccd28badfe035a4fa2c4b8e195a6edf0bf0d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 03:03:47 -0400
Subject: show empty slot only if it has content

---
 src/components/list/list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index e63fea63..bf5a0499 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -3,7 +3,7 @@
     <div v-for="item in items" class="list-item" :key="getKey(item)">
       <slot name="item" :item="item" :keyVal="getKey(item)" />
     </div>
-    <div class="list-empty-content faint" v-if="items.length === 0">
+    <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
       <slot name="empty" />
     </div>
   </div>
-- 
cgit v1.2.3-70-g09d2


From ca26776b4e459ed7729d8a5cf354621a0d96ae59 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 03:09:00 -0400
Subject: recover border between basic-user-card using list component

---
 src/components/follow_requests/follow_requests.js  | 4 +++-
 src/components/follow_requests/follow_requests.vue | 6 +++++-
 src/components/user_search/user_search.js          | 4 +++-
 src/components/user_search/user_search.vue         | 6 +++++-
 src/components/who_to_follow/who_to_follow.js      | 4 +++-
 src/components/who_to_follow/who_to_follow.vue     | 6 +++++-
 6 files changed, 24 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/follow_requests/follow_requests.js b/src/components/follow_requests/follow_requests.js
index 704a76c6..69c48d14 100644
--- a/src/components/follow_requests/follow_requests.js
+++ b/src/components/follow_requests/follow_requests.js
@@ -1,8 +1,10 @@
 import FollowRequestCard from '../follow_request_card/follow_request_card.vue'
+import List from '../list/list.vue'
 
 const FollowRequests = {
   components: {
-    FollowRequestCard
+    FollowRequestCard,
+    List
   },
   computed: {
     requests () {
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index b83c2d68..0970713b 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -4,7 +4,11 @@
       {{$t('nav.friend_requests')}}
     </div>
     <div class="panel-body">
-      <FollowRequestCard v-for="request in requests" :key="request.id" :user="request"/>
+      <List :items="requests">
+        <template slot="item" scope="p">
+          <FollowRequestCard :user="p.item" />
+        </template>
+      </List>
     </div>
   </div>
 </template>
diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js
index 55040826..f02d22ad 100644
--- a/src/components/user_search/user_search.js
+++ b/src/components/user_search/user_search.js
@@ -1,8 +1,10 @@
 import FollowCard from '../follow_card/follow_card.vue'
+import List from '../list/list.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 const userSearch = {
   components: {
-    FollowCard
+    FollowCard,
+    List
   },
   props: [
     'query'
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 1269eea6..06bfc35f 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -13,7 +13,11 @@
       <i class="icon-spin3 animate-spin"/>
     </div>
     <div v-else class="panel-body">
-      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
+      <List :items="users">
+        <template slot="item" scope="p">
+          <FollowCard :user="p.item" />
+        </template>
+      </List>
     </div>
   </div>
 </template>
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index be0b8827..9b100334 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -1,9 +1,11 @@
 import apiService from '../../services/api/api.service.js'
 import FollowCard from '../follow_card/follow_card.vue'
+import List from '../list/list.vue'
 
 const WhoToFollow = {
   components: {
-    FollowCard
+    FollowCard,
+    List
   },
   data () {
     return {
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 1630f5ac..4812dd81 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -4,7 +4,11 @@
       {{$t('who_to_follow.who_to_follow')}}
     </div>
     <div class="panel-body">
-      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
+      <List :items="users">
+        <template slot="item" scope="p">
+          <FollowCard :user="p.item" />
+        </template>
+      </List>
     </div>
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2


From 83faa96f1b7405be2fb17b717c72c10ff8a65b59 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 03:18:29 -0400
Subject: remove border-bottom of the last list item

---
 src/components/list/list.vue                | 2 +-
 src/hocs/with_load_more/with_load_more.scss | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index bf5a0499..9d4beb21 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -28,7 +28,7 @@ export default {
 @import '../../_variables.scss';
 
 .list {
-  &-item {
+  &-item:not(:last-child) {
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index 1a0a9c40..4cefe2be 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -1,10 +1,16 @@
+
+@import '../../_variables.scss';
+
 .with-load-more {
   &-footer {
     padding: 10px;
     text-align: center;
+    border-top: 1px solid;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
 
     .error {
       font-size: 14px;
     }
   }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From cf2c411db34953e65c186e214bd9bae44073c881 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 04:32:36 -0400
Subject: add header to selectable-list component

---
 src/components/checkbox/checkbox.scss              |  1 +
 src/components/list/list.vue                       |  2 +-
 src/components/selectable_list/selectable_list.js  | 30 ++++++++++++++++---
 src/components/selectable_list/selectable_list.vue | 34 +++++++++++++++-------
 4 files changed, 52 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 4dfcfe34..42556d89 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -4,6 +4,7 @@
   position: relative;
   display: inline-block;
   padding-left: 1.2em;
+  min-height: 1.2em;
 
   &-indicator::before {
     position: absolute;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 9d4beb21..7136915b 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="list">
     <div v-for="item in items" class="list-item" :key="getKey(item)">
-      <slot name="item" :item="item" :keyVal="getKey(item)" />
+      <slot name="item" :item="item" />
     </div>
     <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
       <slot name="empty" />
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 93efa840..809133f5 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -6,14 +6,32 @@ const SelectableList = {
     List,
     Checkbox
   },
-  props: List.props,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item.id
+    }
+  },
   data () {
     return {
       selected: []
     }
   },
+  computed: {
+    allSelected () {
+      return !this.items.find(item => !this.isSelected(item))
+    }
+  },
   methods: {
-    toggle (checked, key) {
+    isSelected (item) {
+      return this.selected.indexOf(this.getKey(item)) !== -1
+    },
+    toggle (checked, item) {
+      const key = this.getKey(item)
       const oldChecked = this.isSelected(key)
       if (checked !== oldChecked) {
         if (checked) {
@@ -23,8 +41,12 @@ const SelectableList = {
         }
       }
     },
-    isSelected (key) {
-      return this.selected.indexOf(key) !== -1
+    toggleAll (value) {
+      if (value) {
+        this.selected = this.items.map(this.getKey)
+      } else {
+        this.selected = []
+      }
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index d8938062..e8c5d09b 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,14 +1,21 @@
 <template>
-  <List class="selectable-list" :items="items" :getKey="getKey">
-    <template slot="item" scope="p">
-      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.keyVal) }">
-        <div class="selectable-list-checkbox-wrapper">
-          <Checkbox :checked="isSelected(p.keyVal)" @change="checked => toggle(checked, p.keyVal)" />
-        </div>
-        <slot name="item" :item="p.item" />
+  <div class="selectable-list">
+    <div class="selectable-list-header">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="allSelected" @change="toggleAll" />
       </div>
-    </template>
-  </List>
+    </div>
+    <List :items="items" :getKey="getKey">
+      <template slot="item" scope="p">
+        <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+          <div class="selectable-list-checkbox-wrapper">
+            <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+          </div>
+          <slot name="item" :item="p.item" />
+        </div>
+      </template>
+    </List>
+  </div>
 </template>
 
 <script src="./selectable_list.js"></script>
@@ -19,6 +26,7 @@
 .selectable-list {
   &-item-inner {
     display: flex;
+    align-items: center;
   }
 
   &-item-selected-inner {
@@ -26,8 +34,14 @@
     background-color: var(--lightBg, $fallback--lightBg);
   }
 
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 0.6em 0;
+  }
+
   &-checkbox-wrapper {
-    padding: 10px;
+    padding: 0 10px;
     flex: none;
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 7a8ffcd79bdb5bfd4bd03ba1d9bda8cd00e08f1d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 04:39:16 -0400
Subject: support header slot

---
 src/components/selectable_list/selectable_list.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e8c5d09b..6c8c0bf6 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -4,6 +4,9 @@
       <div class="selectable-list-checkbox-wrapper">
         <Checkbox :checked="allSelected" @change="toggleAll" />
       </div>
+      <div class="selectable-list-header-actions">
+        <slot name="header" :selected="selected" />
+      </div>
     </div>
     <List :items="items" :getKey="getKey">
       <template slot="item" scope="p">
@@ -38,6 +41,10 @@
     display: flex;
     align-items: center;
     padding: 0.6em 0;
+
+    &-actions {
+      flex: 1;
+    }
   }
 
   &-checkbox-wrapper {
-- 
cgit v1.2.3-70-g09d2


From d4e43e0e261c1edafe505cd448ab876d541a0474 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 04:40:25 -0400
Subject: add border-bottom to the header

---
 src/components/selectable_list/selectable_list.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 6c8c0bf6..f3dd5e88 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -41,6 +41,9 @@
     display: flex;
     align-items: center;
     padding: 0.6em 0;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
 
     &-actions {
       flex: 1;
-- 
cgit v1.2.3-70-g09d2


From fe7766bc618f9a994e2c0a9337deb7cce8b162cf Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 12:12:27 -0400
Subject: replace scope attributes by slot-scope

---
 src/components/follow_requests/follow_requests.vue | 2 +-
 src/components/selectable_list/selectable_list.vue | 2 +-
 src/components/user_profile/user_profile.vue       | 4 ++--
 src/components/user_search/user_search.vue         | 2 +-
 src/components/user_settings/user_settings.vue     | 4 ++--
 src/components/who_to_follow/who_to_follow.vue     | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 0970713b..8b1e8f94 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="panel-body">
       <List :items="requests">
-        <template slot="item" scope="p">
+        <template slot="item" slot-scope="p">
           <FollowRequestCard :user="p.item" />
         </template>
       </List>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index f3dd5e88..25781d06 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -9,7 +9,7 @@
       </div>
     </div>
     <List :items="items" :getKey="getKey">
-      <template slot="item" scope="p">
+      <template slot="item" slot-scope="p">
         <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 8d78d2d2..e67231b6 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -15,14 +15,14 @@
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId">
-          <template slot="item" scope="p">
+          <template slot="item" slot-scope="p">
             <FollowCard :user="p.item" />
           </template>
         </FriendList>
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
         <FollowerList :userId="userId">
-          <template slot="item" scope="p">
+          <template slot="item" slot-scope="p">
             <FollowCard :user="p.item" :noFollowsYou="isUs" />
           </template>
         </FollowerList>
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 06bfc35f..12aa4289 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -14,7 +14,7 @@
     </div>
     <div v-else class="panel-body">
       <List :items="users">
-        <template slot="item" scope="p">
+        <template slot="item" slot-scope="p">
           <FollowCard :user="p.item" />
         </template>
       </List>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 66ce6cea..e6100ced 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -201,7 +201,7 @@
             </Autosuggest>
           </div>
           <BlockList :refresh="true" :getKey="item => item">
-            <template slot="item" scope="p">
+            <template slot="item" slot-scope="p">
               <BlockCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
@@ -215,7 +215,7 @@
             </Autosuggest>
           </div>
           <MuteList :refresh="true" :getKey="item => item">
-            <template slot="item" scope="p">
+            <template slot="item" slot-scope="p">
               <MuteCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 4812dd81..2752d519 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="panel-body">
       <List :items="users">
-        <template slot="item" scope="p">
+        <template slot="item" slot-scope="p">
           <FollowCard :user="p.item" />
         </template>
       </List>
-- 
cgit v1.2.3-70-g09d2


From 403c7bbe6c1e794f67ac103777d98ec3baf9f4f6 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:26:08 -0400
Subject: add reusable progress-button cmoponent

---
 src/components/progress_button/progress_button.vue | 35 ++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/progress_button/progress_button.vue

(limited to 'src')

diff --git a/src/components/progress_button/progress_button.vue b/src/components/progress_button/progress_button.vue
new file mode 100644
index 00000000..3fea2418
--- /dev/null
+++ b/src/components/progress_button/progress_button.vue
@@ -0,0 +1,35 @@
+<template>
+  <button :disabled="progress || disabled" @click="onClick">
+    <template v-if="progress">
+      <slot name="progress" />
+    </template>
+    <template v-else>
+      <slot />
+    </template>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean
+    },
+    click: {
+      type: Function,
+      default: () => Promise.resolve()
+    }
+  },
+  data () {
+    return {
+      progress: false
+    }
+  },
+  methods: {
+    onClick () {
+      this.progress = true
+      this.click().then(() => { this.progress = false })
+    }
+  }
+}
+</script>
-- 
cgit v1.2.3-70-g09d2


From 8fa639f252b20ddb550fe0cf71ba7ea2dfe47168 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:30:34 -0400
Subject: add bulk action buttons

---
 src/components/user_settings/user_settings.js  |  4 +++-
 src/components/user_settings/user_settings.vue | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index f8742cd4..022c847b 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -10,6 +10,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
@@ -73,7 +74,8 @@ const UserSettings = {
     EmojiInput,
     Autosuggest,
     BlockCard,
-    MuteCard
+    MuteCard,
+    ProgressButton
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index e6100ced..8bce431a 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -201,6 +201,22 @@
             </Autosuggest>
           </div>
           <BlockList :refresh="true" :getKey="item => item">
+            <template slot="header" slot-scope="p">
+              <div class="bulk-actions-wrapper">
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
+                  {{ $t('user_card.block') }}
+                  <template slot="progress">
+                    {{ $t('user_card.block_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
+                  {{ $t('user_card.unblock') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unblock_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
             <template slot="item" slot-scope="p">
               <BlockCard :userId="p.item" />
             </template>
@@ -282,5 +298,15 @@
   &-usersearch-wrapper {
     padding: 1em;
   }
+
+  .bulk-actions-wrapper {
+    text-align: right;
+    padding: 0 1em;
+    min-height: 28px;
+
+    button {
+      width: 10em;
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 67919f95a6dd4b27149527d88d81792c779afeba Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:31:20 -0400
Subject: make border of list header thicker

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 25781d06..12be7cf7 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -41,7 +41,7 @@
     display: flex;
     align-items: center;
     padding: 0.6em 0;
-    border-bottom: 1px solid;
+    border-bottom: 2px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
 
-- 
cgit v1.2.3-70-g09d2


From ac62e47c70e29bb701642456732169c6eff6e649 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:35:30 -0400
Subject: pass down empty slot

---
 src/components/selectable_list/selectable_list.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 12be7cf7..1be89ba1 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -17,6 +17,7 @@
           <slot name="item" :item="p.item" />
         </div>
       </template>
+      <template slot="empty"><slot name="empty" /></template>
     </List>
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2


From 1afef1037e129cd5f5f2e4a17b970158a2f6fcb9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:35:49 -0400
Subject: show list header only if there are items

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 1be89ba1..31b8ac9c 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="selectable-list">
-    <div class="selectable-list-header">
+    <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
         <Checkbox :checked="allSelected" @change="toggleAll" />
       </div>
-- 
cgit v1.2.3-70-g09d2


From 7e74a13fcf0dc8552094dd2bb86ad6ec13389098 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:45:46 -0400
Subject: add a comment

---
 src/components/progress_button/progress_button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/progress_button/progress_button.vue b/src/components/progress_button/progress_button.vue
index 3fea2418..737360bb 100644
--- a/src/components/progress_button/progress_button.vue
+++ b/src/components/progress_button/progress_button.vue
@@ -15,7 +15,7 @@ export default {
     disabled: {
       type: Boolean
     },
-    click: {
+    click: { // click event handler. Must return a promise
       type: Function,
       default: () => Promise.resolve()
     }
-- 
cgit v1.2.3-70-g09d2


From 13c8f10f4b42c1d698bc99694cd3556c691ac880 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:54:52 -0400
Subject: wire up bulk action buttons to vuex

---
 src/components/user_settings/user_settings.js  |  6 +++++
 src/components/user_settings/user_settings.vue |  4 +--
 src/modules/users.js                           | 36 ++++++++++++++++++--------
 3 files changed, 33 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 022c847b..a9fe84b8 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -355,6 +355,12 @@ const UserSettings = {
           this.$store.dispatch('addNewUsers', users)
           return map(users, 'id')
         })
+    },
+    blockUsers (ids) {
+      return this.$store.dispatch('blockUsers', ids)
+    },
+    unblockUsers (ids) {
+      return this.$store.dispatch('unblockUsers', ids)
     }
   }
 }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 8bce431a..5e0b71bf 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -203,13 +203,13 @@
           <BlockList :refresh="true" :getKey="item => item">
             <template slot="header" slot-scope="p">
               <div class="bulk-actions-wrapper">
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
                   {{ $t('user_card.block') }}
                   <template slot="progress">
                     {{ $t('user_card.block_progress') }}
                   </template>
                 </ProgressButton>
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unblockUsers(p.selected)">
                   {{ $t('user_card.unblock') }}
                   <template slot="progress">
                     {{ $t('user_card.unblock_progress') }}
diff --git a/src/modules/users.js b/src/modules/users.js
index 58db8b71..a458f681 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -32,6 +32,22 @@ const getNotificationPermission = () => {
   return Promise.resolve(Notification.permission)
 }
 
+const blockUser = (store, userId) => {
+  return store.rootState.api.backendInteractor.blockUser(userId)
+    .then((relationship) => {
+      store.commit('updateUserRelationship', [relationship])
+      store.commit('addBlockId', userId)
+      store.commit('removeStatus', { timeline: 'friends', userId })
+      store.commit('removeStatus', { timeline: 'public', userId })
+      store.commit('removeStatus', { timeline: 'publicAndExternal', userId })
+    })
+}
+
+const unblockUser = (store, userId) => {
+  return store.rootState.api.backendInteractor.unblockUser(userId)
+    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+}
+
 export const mutations = {
   setMuted (state, { user: { id }, muted }) {
     const user = state.usersObject[id]
@@ -207,18 +223,16 @@ const users = {
         })
     },
     blockUser (store, userId) {
-      return store.rootState.api.backendInteractor.blockUser(userId)
-        .then((relationship) => {
-          store.commit('updateUserRelationship', [relationship])
-          store.commit('addBlockId', userId)
-          store.commit('removeStatus', { timeline: 'friends', userId })
-          store.commit('removeStatus', { timeline: 'public', userId })
-          store.commit('removeStatus', { timeline: 'publicAndExternal', userId })
-        })
+      return blockUser(store, userId)
     },
-    unblockUser (store, id) {
-      return store.rootState.api.backendInteractor.unblockUser(id)
-        .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+    unblockUser (store, userId) {
+      return unblockUser(store, userId)
+    },
+    blockUsers (store, userIds = []) {
+      return Promise.all(userIds.map(userId => blockUser(store, userId)))
+    },
+    unblockUsers (store, userIds = []) {
+      return Promise.all(userIds.map(userId => unblockUser(store, userId)))
     },
     fetchMutes (store) {
       return store.rootState.api.backendInteractor.fetchMutes()
-- 
cgit v1.2.3-70-g09d2


From d3cad54aa3e72fd83da89b483a9c7522a2695bba Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 14:02:46 -0400
Subject: add bulk mute/unmute buttons and wire up to vuex

---
 src/components/user_settings/user_settings.js  |  6 +++
 src/components/user_settings/user_settings.vue | 16 +++++++
 src/modules/users.js                           | 60 ++++++++++++++++----------
 3 files changed, 59 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index a9fe84b8..45614ab5 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -361,6 +361,12 @@ const UserSettings = {
     },
     unblockUsers (ids) {
       return this.$store.dispatch('unblockUsers', ids)
+    },
+    muteUsers (ids) {
+      return this.$store.dispatch('muteUsers', ids)
+    },
+    unmuteUsers (ids) {
+      return this.$store.dispatch('unmuteUsers', ids)
     }
   }
 }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 5e0b71bf..4ce9c55b 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -231,6 +231,22 @@
             </Autosuggest>
           </div>
           <MuteList :refresh="true" :getKey="item => item">
+            <template slot="header" slot-scope="p">
+              <div class="bulk-actions-wrapper">
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
+                  {{ $t('user_card.mute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.mute_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unmuteUsers(p.selected)">
+                  {{ $t('user_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
             <template slot="item" slot-scope="p">
               <MuteCard :userId="p.item" />
             </template>
diff --git a/src/modules/users.js b/src/modules/users.js
index a458f681..a5dec794 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -32,19 +32,32 @@ const getNotificationPermission = () => {
   return Promise.resolve(Notification.permission)
 }
 
-const blockUser = (store, userId) => {
-  return store.rootState.api.backendInteractor.blockUser(userId)
+const blockUser = (store, id) => {
+  return store.rootState.api.backendInteractor.blockUser(id)
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
-      store.commit('addBlockId', userId)
-      store.commit('removeStatus', { timeline: 'friends', userId })
-      store.commit('removeStatus', { timeline: 'public', userId })
-      store.commit('removeStatus', { timeline: 'publicAndExternal', userId })
+      store.commit('addBlockId', id)
+      store.commit('removeStatus', { timeline: 'friends', userId: id })
+      store.commit('removeStatus', { timeline: 'public', userId: id })
+      store.commit('removeStatus', { timeline: 'publicAndExternal', userId: id })
     })
 }
 
-const unblockUser = (store, userId) => {
-  return store.rootState.api.backendInteractor.unblockUser(userId)
+const unblockUser = (store, id) => {
+  return store.rootState.api.backendInteractor.unblockUser(id)
+    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+}
+
+const muteUser = (store, id) => {
+  return store.rootState.api.backendInteractor.muteUser(id)
+    .then((relationship) => {
+      store.commit('updateUserRelationship', [relationship])
+      store.commit('addMuteId', id)
+    })
+}
+
+const unmuteUser = (store, id) => {
+  return store.rootState.api.backendInteractor.unmuteUser(id)
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
@@ -222,17 +235,17 @@ const users = {
           return blocks
         })
     },
-    blockUser (store, userId) {
-      return blockUser(store, userId)
+    blockUser (store, id) {
+      return blockUser(store, id)
     },
-    unblockUser (store, userId) {
-      return unblockUser(store, userId)
+    unblockUser (store, id) {
+      return unblockUser(store, id)
     },
-    blockUsers (store, userIds = []) {
-      return Promise.all(userIds.map(userId => blockUser(store, userId)))
+    blockUsers (store, ids = []) {
+      return Promise.all(ids.map(id => blockUser(store, id)))
     },
-    unblockUsers (store, userIds = []) {
-      return Promise.all(userIds.map(userId => unblockUser(store, userId)))
+    unblockUsers (store, ids = []) {
+      return Promise.all(ids.map(id => unblockUser(store, id)))
     },
     fetchMutes (store) {
       return store.rootState.api.backendInteractor.fetchMutes()
@@ -243,15 +256,16 @@ const users = {
         })
     },
     muteUser (store, id) {
-      return store.rootState.api.backendInteractor.muteUser(id)
-        .then((relationship) => {
-          store.commit('updateUserRelationship', [relationship])
-          store.commit('addMuteId', id)
-        })
+      return muteUser(store, id)
     },
     unmuteUser (store, id) {
-      return store.rootState.api.backendInteractor.unmuteUser(id)
-        .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+      return unmuteUser(store, id)
+    },
+    muteUsers (store, ids = []) {
+      return Promise.all(ids.map(id => muteUser(store, id)))
+    },
+    unmuteUsers (store, ids = []) {
+      return Promise.all(ids.map(id => unmuteUser(store, id)))
     },
     fetchFriends ({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
-- 
cgit v1.2.3-70-g09d2


From c81bde0c1d772078974208551c36d0f52325a12b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 14:03:57 -0400
Subject: clean up

---
 src/components/user_settings/user_settings.vue | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 4ce9c55b..0f7fd0db 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -205,21 +205,15 @@
               <div class="bulk-actions-wrapper">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
                   {{ $t('user_card.block') }}
-                  <template slot="progress">
-                    {{ $t('user_card.block_progress') }}
-                  </template>
+                  <template slot="progress">{{ $t('user_card.block_progress') }}</template>
                 </ProgressButton>
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unblockUsers(p.selected)">
                   {{ $t('user_card.unblock') }}
-                  <template slot="progress">
-                    {{ $t('user_card.unblock_progress') }}
-                  </template>
+                  <template slot="progress">{{ $t('user_card.unblock_progress') }}</template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="p">
-              <BlockCard :userId="p.item" />
-            </template>
+            <template slot="item" slot-scope="p"><BlockCard :userId="p.item" /></template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </BlockList>
         </div>
@@ -235,21 +229,15 @@
               <div class="bulk-actions-wrapper">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
                   {{ $t('user_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
+                  <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
                 </ProgressButton>
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unmuteUsers(p.selected)">
                   {{ $t('user_card.unmute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.unmute_progress') }}
-                  </template>
+                  <template slot="progress">{{ $t('user_card.unmute_progress') }}</template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="p">
-              <MuteCard :userId="p.item" />
-            </template>
+            <template slot="item" slot-scope="p"><MuteCard :userId="p.item" /></template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </MuteList>
         </div>
-- 
cgit v1.2.3-70-g09d2


From 7f6bd538f3e763c19468a2cf7f6f3cf34645ccb0 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 16:20:48 -0400
Subject: ui improvements

---
 src/components/selectable_list/selectable_list.vue |  2 +-
 src/components/user_settings/user_settings.vue     | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 31b8ac9c..ae7315db 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -2,7 +2,7 @@
   <div class="selectable-list">
     <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="allSelected" @change="toggleAll" />
+        <Checkbox :checked="allSelected" @change="toggleAll">Select All</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
         <slot name="header" :selected="selected" />
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 0f7fd0db..268a0893 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -200,9 +200,9 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <BlockList :refresh="true" :getKey="item => item">
+          <BlockList :refresh="true" :getKey="item => item" class="profile-edit-user-list">
             <template slot="header" slot-scope="p">
-              <div class="bulk-actions-wrapper">
+              <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
                   {{ $t('user_card.block') }}
                   <template slot="progress">{{ $t('user_card.block_progress') }}</template>
@@ -224,9 +224,9 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <MuteList :refresh="true" :getKey="item => item">
+          <MuteList :refresh="true" :getKey="item => item" class="profile-edit-user-list">
             <template slot="header" slot-scope="p">
-              <div class="bulk-actions-wrapper">
+              <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
                   {{ $t('user_card.mute') }}
                   <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
@@ -303,7 +303,11 @@
     padding: 1em;
   }
 
-  .bulk-actions-wrapper {
+  &-user-list {
+    margin-top: 1.5em;
+  }
+
+  &-bulk-actions {
     text-align: right;
     padding: 0 1em;
     min-height: 28px;
-- 
cgit v1.2.3-70-g09d2


From ac9ddfb1e2948968b6f08c68b689888ed56b9779 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 16:22:54 -0400
Subject: support i18n

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 src/i18n/en.json                                   | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index ae7315db..292704c4 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -2,7 +2,7 @@
   <div class="selectable-list">
     <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="allSelected" @change="toggleAll">Select All</Checkbox>
+        <Checkbox :checked="allSelected" @change="toggleAll">{{ $t('selectable_list.select_all') }}</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
         <slot name="header" :selected="selected" />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c71c9036..7dca05e3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -112,6 +112,9 @@
       "password_confirmation_match": "should be the same as password"
     }
   },
+  "selectable_list": {
+    "select_all": "Select all"
+  },
   "settings": {
     "app_name": "App name",
     "attachmentRadius": "Attachments",
-- 
cgit v1.2.3-70-g09d2


From 468aec0de1b7e25a66eb9e6ef44cf9787d0c6d86 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:14:43 -0400
Subject: rewrite checkbox component as non-functional

---
 src/components/checkbox/checkbox.js   | 44 ------------------------
 src/components/checkbox/checkbox.scss | 49 ---------------------------
 src/components/checkbox/checkbox.vue  | 63 +++++++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/checkbox/checkbox.js
 delete mode 100644 src/components/checkbox/checkbox.scss
 create mode 100644 src/components/checkbox/checkbox.vue

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
deleted file mode 100644
index 76e7e4f4..00000000
--- a/src/components/checkbox/checkbox.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// TODO: Template-based functional component is supported in vue-loader 13.3.0+.
-// Also, somehow, props are not provided through 'context' even though they are defined.
-// Need to upgrade vue-loader
-
-import './checkbox.scss'
-
-export default {
-  functional: true,
-  name: 'Checkbox',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  render (createElement, { data, children }) {
-    const { props = {}, attrs = {}, on = {}, ...rest } = data
-    const { name, checked, disabled, readonly, ...restAttrs } = attrs
-    const { change, ...restListeners } = on
-    const wrapperProps = {
-      attrs: restAttrs,
-      on: restListeners,
-      ...rest
-    }
-    const inputProps = {
-      attrs: {
-        name,
-        checked,
-        disabled,
-        readonly,
-        ...props
-      },
-      on: {}
-    }
-    if (change) {
-      inputProps.on.change = e => change(e.target.checked)
-    }
-    return (
-      <label class="checkbox" {...wrapperProps}>
-        <input type="checkbox" {...inputProps} />
-        <i class="checkbox-indicator" />
-        {children && <span>{children}</span>}
-      </label>
-    )
-  }
-}
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
deleted file mode 100644
index 42556d89..00000000
--- a/src/components/checkbox/checkbox.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '../../_variables.scss';
-
-.checkbox {
-  position: relative;
-  display: inline-block;
-  padding-left: 1.2em;
-  min-height: 1.2em;
-
-  &-indicator::before {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: block;
-    content: '✔';
-    transition: color 200ms;
-    width: 1.1em;
-    height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0px 0px 2px black inset;
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
-    vertical-align: top;
-    text-align: center;
-    line-height: 1.1em;
-    font-size: 1.1em;
-    color: transparent;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  input[type=checkbox] {
-    display: none;
-
-    &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    &:disabled + .checkbox-indicator::before {
-      opacity: .5;
-    }
-  }
-
-  & > span {
-    margin-left: .5em;
-  }
-}
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
new file mode 100644
index 00000000..5f55c5bf
--- /dev/null
+++ b/src/components/checkbox/checkbox.vue
@@ -0,0 +1,63 @@
+<template>
+  <label class="checkbox">
+    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <i class="checkbox-indicator" />
+    <span><slot></slot></span>
+  </label>
+</template>
+
+<script>
+export default {
+  props: ['value']
+}
+</script>
+
+<style lang="scss">
+.checkbox {
+  position: relative;
+  display: inline-block;
+  padding-left: 1.2em;
+  min-height: 1.2em;
+
+  &-indicator::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    content: '✔';
+    transition: color 200ms;
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: 0px 0px 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
+    vertical-align: top;
+    text-align: center;
+    line-height: 1.1em;
+    font-size: 1.1em;
+    color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .checkbox-indicator::before {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &:disabled + .checkbox-indicator::before {
+      opacity: .5;
+    }
+  }
+
+  & > span {
+    margin-left: .5em;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From 1144025f30913724dc531e40685d388e39253cab Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:16:26 -0400
Subject: update checkbox importing path

---
 src/components/selectable_list/selectable_list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 809133f5..b60399ec 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -1,5 +1,5 @@
 import List from '../list/list.vue'
-import Checkbox from '../checkbox/checkbox.js'
+import Checkbox from '../checkbox/checkbox.vue'
 
 const SelectableList = {
   components: {
-- 
cgit v1.2.3-70-g09d2


From 8088043a0c811a2e215e12715029ca8563ac2304 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:21:41 -0400
Subject: import scss variables

---
 src/components/checkbox/checkbox.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 5f55c5bf..b821a4f6 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -13,6 +13,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .checkbox {
   position: relative;
   display: inline-block;
-- 
cgit v1.2.3-70-g09d2


From 988849116d75ab02ae6da5998c751133ea13f531 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:24:28 -0400
Subject: update model and props properties

---
 src/components/checkbox/checkbox.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index b821a4f6..84bea53e 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <label class="checkbox">
-    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
     <i class="checkbox-indicator" />
     <span><slot></slot></span>
   </label>
@@ -8,7 +8,11 @@
 
 <script>
 export default {
-  props: ['value']
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: ['checked']
 }
 </script>
 
-- 
cgit v1.2.3-70-g09d2


From 3f5e798de79b401945d2a0ac992ca5ee6115d79f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:25:53 -0400
Subject: render span tag only if it has content

---
 src/components/checkbox/checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 84bea53e..8f32e96b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -2,7 +2,7 @@
   <label class="checkbox">
     <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
     <i class="checkbox-indicator" />
-    <span><slot></slot></span>
+    <span v-if="!!$slots.default"><slot></slot></span>
   </label>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


From ecff6acf2d651931e06eebfa8856d940aedb2bee Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:45:28 -0400
Subject: support indeterminate checkbox state

---
 src/components/checkbox/checkbox.vue               | 10 ++++++++--
 src/components/selectable_list/selectable_list.js  |  6 ++++++
 src/components/selectable_list/selectable_list.vue |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 8f32e96b..4152b049 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <label class="checkbox">
-    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
+    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate">
     <i class="checkbox-indicator" />
     <span v-if="!!$slots.default"><slot></slot></span>
   </label>
@@ -12,7 +12,7 @@ export default {
     prop: 'checked',
     event: 'change'
   },
-  props: ['checked']
+  props: ['checked', 'indeterminate']
 }
 </script>
 
@@ -57,6 +57,12 @@ export default {
       color: var(--text, $fallback--text);
     }
 
+    &:indeterminate + .checkbox-indicator::before {
+      content: '–';
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
     &:disabled + .checkbox-indicator::before {
       opacity: .5;
     }
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index b60399ec..b8bd4f75 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -24,6 +24,12 @@ const SelectableList = {
   computed: {
     allSelected () {
       return !this.items.find(item => !this.isSelected(item))
+    },
+    noneSelected () {
+      return !this.items.find(item => this.isSelected(item))
+    },
+    someSelected () {
+      return !this.allSelected && !this.noneSelected
     }
   },
   methods: {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 292704c4..5b8693c4 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -2,7 +2,7 @@
   <div class="selectable-list">
     <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="allSelected" @change="toggleAll">{{ $t('selectable_list.select_all') }}</Checkbox>
+        <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
         <slot name="header" :selected="selected" />
-- 
cgit v1.2.3-70-g09d2


From 10ecc2c81695e343b41a0f6b0ca4f51b715f6cdc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 14:00:39 -0400
Subject: make sure to use filtered selected keys

---
 src/components/selectable_list/selectable_list.js  | 14 ++++++++++----
 src/components/selectable_list/selectable_list.vue |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index b8bd4f75..10980d46 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -22,11 +22,17 @@ const SelectableList = {
     }
   },
   computed: {
+    allKeys () {
+      return this.items.map(this.getKey)
+    },
+    filteredSelected () {
+      return this.allKeys.filter(key => this.selected.indexOf(key) !== -1)
+    },
     allSelected () {
-      return !this.items.find(item => !this.isSelected(item))
+      return this.filteredSelected.length === this.items.length
     },
     noneSelected () {
-      return !this.items.find(item => this.isSelected(item))
+      return this.filteredSelected.length === 0
     },
     someSelected () {
       return !this.allSelected && !this.noneSelected
@@ -34,7 +40,7 @@ const SelectableList = {
   },
   methods: {
     isSelected (item) {
-      return this.selected.indexOf(this.getKey(item)) !== -1
+      return this.filteredSelected.indexOf(this.getKey(item)) !== -1
     },
     toggle (checked, item) {
       const key = this.getKey(item)
@@ -49,7 +55,7 @@ const SelectableList = {
     },
     toggleAll (value) {
       if (value) {
-        this.selected = this.items.map(this.getKey)
+        this.selected = this.allKeys.slice(0)
       } else {
         this.selected = []
       }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 5b8693c4..80306594 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -5,7 +5,7 @@
         <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
-        <slot name="header" :selected="selected" />
+        <slot name="header" :selected="filteredSelected" />
       </div>
     </div>
     <List :items="items" :getKey="getKey">
-- 
cgit v1.2.3-70-g09d2


From a89236f67c84723d5e7948beee2d43b0555ab6b1 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 14:56:50 -0400
Subject: clean up

---
 src/components/user_settings/user_settings.js  | 3 +++
 src/components/user_settings/user_settings.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 45614ab5..e88ee612 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -367,6 +367,9 @@ const UserSettings = {
     },
     unmuteUsers (ids) {
       return this.$store.dispatch('unmuteUsers', ids)
+    },
+    identity (value) {
+      return value
     }
   }
 }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 268a0893..0dcae0d7 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -200,7 +200,7 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <BlockList :refresh="true" :getKey="item => item" class="profile-edit-user-list">
+          <BlockList :refresh="true" :getKey="identity" class="profile-edit-user-list">
             <template slot="header" slot-scope="p">
               <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
@@ -224,7 +224,7 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <MuteList :refresh="true" :getKey="item => item" class="profile-edit-user-list">
+          <MuteList :refresh="true" :getKey="identity" class="profile-edit-user-list">
             <template slot="header" slot-scope="p">
               <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
-- 
cgit v1.2.3-70-g09d2


From bb38a4311796c7d3c40e63585544c744a44402c1 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 9 Apr 2019 14:46:47 -0400
Subject: fix typos

---
 src/components/user_profile/user_profile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 1ef247cd..4eddb8b1 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -9,7 +9,7 @@ import withLoadMore from '../../hocs/with_load_more/with_load_more'
 const FollowerList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
   select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
-  destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
+  destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
   childPropName: 'items',
   additionalPropNames: ['userId']
 })(List)
@@ -17,7 +17,7 @@ const FollowerList = withLoadMore({
 const FriendList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
   select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
-  destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
+  destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
   childPropName: 'items',
   additionalPropNames: ['userId']
 })(List)
-- 
cgit v1.2.3-70-g09d2


From e67fecff0a5e8c0034b860b8a7a625e35c03b5a3 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Apr 2019 22:15:58 -0400
Subject: code readability

---
 src/components/follow_requests/follow_requests.vue |  4 ++--
 src/components/selectable_list/selectable_list.vue |  8 ++++----
 src/components/user_profile/user_profile.vue       |  8 ++++----
 src/components/user_search/user_search.vue         |  4 ++--
 src/components/user_settings/user_settings.vue     | 16 ++++++++--------
 src/components/who_to_follow/who_to_follow.vue     |  4 ++--
 6 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 8b1e8f94..d5e45b9d 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -5,8 +5,8 @@
     </div>
     <div class="panel-body">
       <List :items="requests">
-        <template slot="item" slot-scope="p">
-          <FollowRequestCard :user="p.item" />
+        <template slot="item" slot-scope="{item}">
+          <FollowRequestCard :user="item" />
         </template>
       </List>
     </div>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 80306594..ba1e5266 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -9,12 +9,12 @@
       </div>
     </div>
     <List :items="items" :getKey="getKey">
-      <template slot="item" slot-scope="p">
-        <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+      <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(p.item)" @change="checked => toggle(checked, p.item)" />
+            <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
           </div>
-          <slot name="item" :item="p.item" />
+          <slot name="item" :item="item" />
         </div>
       </template>
       <template slot="empty"><slot name="empty" /></template>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index e67231b6..71c625b7 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -15,15 +15,15 @@
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId">
-          <template slot="item" slot-scope="p">
-            <FollowCard :user="p.item" />
+          <template slot="item" slot-scope="{item}">
+            <FollowCard :user="item" />
           </template>
         </FriendList>
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
         <FollowerList :userId="userId">
-          <template slot="item" slot-scope="p">
-            <FollowCard :user="p.item" :noFollowsYou="isUs" />
+          <template slot="item" slot-scope="{item}">
+            <FollowCard :user="item" :noFollowsYou="isUs" />
           </template>
         </FollowerList>
       </div>
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 12aa4289..c0636e43 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -14,8 +14,8 @@
     </div>
     <div v-else class="panel-body">
       <List :items="users">
-        <template slot="item" slot-scope="p">
-          <FollowCard :user="p.item" />
+        <template slot="item" slot-scope="{item}">
+          <FollowCard :user="item" />
         </template>
       </List>
     </div>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 0dcae0d7..7e8e45fd 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -201,19 +201,19 @@
             </Autosuggest>
           </div>
           <BlockList :refresh="true" :getKey="identity" class="profile-edit-user-list">
-            <template slot="header" slot-scope="p">
+            <template slot="header" slot-scope="{selected}">
               <div class="profile-edit-bulk-actions">
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)">
                   {{ $t('user_card.block') }}
                   <template slot="progress">{{ $t('user_card.block_progress') }}</template>
                 </ProgressButton>
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unblockUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)">
                   {{ $t('user_card.unblock') }}
                   <template slot="progress">{{ $t('user_card.unblock_progress') }}</template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="p"><BlockCard :userId="p.item" /></template>
+            <template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </BlockList>
         </div>
@@ -225,19 +225,19 @@
             </Autosuggest>
           </div>
           <MuteList :refresh="true" :getKey="identity" class="profile-edit-user-list">
-            <template slot="header" slot-scope="p">
+            <template slot="header" slot-scope="{selected}">
               <div class="profile-edit-bulk-actions">
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)">
                   {{ $t('user_card.mute') }}
                   <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
                 </ProgressButton>
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unmuteUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)">
                   {{ $t('user_card.unmute') }}
                   <template slot="progress">{{ $t('user_card.unmute_progress') }}</template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="p"><MuteCard :userId="p.item" /></template>
+            <template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </MuteList>
         </div>
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 2752d519..412a2fbe 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -5,8 +5,8 @@
     </div>
     <div class="panel-body">
       <List :items="users">
-        <template slot="item" slot-scope="p">
-          <FollowCard :user="p.item" />
+        <template slot="item" slot-scope="{item}">
+          <FollowCard :user="item" />
         </template>
       </List>
     </div>
-- 
cgit v1.2.3-70-g09d2


From bd88a481c66ae3dd8f95652fe467fe5fd919b810 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 15 Apr 2019 16:37:42 -0400
Subject: remove extra spacing

---
 src/components/user_settings/user_settings.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 7e8e45fd..d68e68fa 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -200,7 +200,7 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <BlockList :refresh="true" :getKey="identity" class="profile-edit-user-list">
+          <BlockList :refresh="true" :getKey="identity">
             <template slot="header" slot-scope="{selected}">
               <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)">
@@ -224,7 +224,7 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <MuteList :refresh="true" :getKey="identity" class="profile-edit-user-list">
+          <MuteList :refresh="true" :getKey="identity">
             <template slot="header" slot-scope="{selected}">
               <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)">
@@ -303,10 +303,6 @@
     padding: 1em;
   }
 
-  &-user-list {
-    margin-top: 1.5em;
-  }
-
   &-bulk-actions {
     text-align: right;
     padding: 0 1em;
-- 
cgit v1.2.3-70-g09d2


From de945e5f88919fe27f4cb16735d6d91a26ec95c9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 16 Apr 2019 23:29:11 -0400
Subject: Revert "recover border between basic-user-card using list component"

This reverts commit 1d56d486f1f679e793e710969ad54cce5fdb1ebc.

# Conflicts:
#	src/components/follow_requests/follow_requests.vue
#	src/components/user_search/user_search.vue
#	src/components/who_to_follow/who_to_follow.vue
---
 src/components/follow_requests/follow_requests.js  | 4 +---
 src/components/follow_requests/follow_requests.vue | 6 +-----
 src/components/user_search/user_search.js          | 4 +---
 src/components/user_search/user_search.vue         | 6 +-----
 src/components/who_to_follow/who_to_follow.js      | 4 +---
 src/components/who_to_follow/who_to_follow.vue     | 6 +-----
 6 files changed, 6 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/components/follow_requests/follow_requests.js b/src/components/follow_requests/follow_requests.js
index 69c48d14..704a76c6 100644
--- a/src/components/follow_requests/follow_requests.js
+++ b/src/components/follow_requests/follow_requests.js
@@ -1,10 +1,8 @@
 import FollowRequestCard from '../follow_request_card/follow_request_card.vue'
-import List from '../list/list.vue'
 
 const FollowRequests = {
   components: {
-    FollowRequestCard,
-    List
+    FollowRequestCard
   },
   computed: {
     requests () {
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index d5e45b9d..36901fb4 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -4,11 +4,7 @@
       {{$t('nav.friend_requests')}}
     </div>
     <div class="panel-body">
-      <List :items="requests">
-        <template slot="item" slot-scope="{item}">
-          <FollowRequestCard :user="item" />
-        </template>
-      </List>
+      <FollowRequestCard v-for="request in requests" :key="request.id" :user="request" class="list-item"/>
     </div>
   </div>
 </template>
diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js
index f02d22ad..55040826 100644
--- a/src/components/user_search/user_search.js
+++ b/src/components/user_search/user_search.js
@@ -1,10 +1,8 @@
 import FollowCard from '../follow_card/follow_card.vue'
-import List from '../list/list.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 const userSearch = {
   components: {
-    FollowCard,
-    List
+    FollowCard
   },
   props: [
     'query'
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index c0636e43..890b3c13 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -13,11 +13,7 @@
       <i class="icon-spin3 animate-spin"/>
     </div>
     <div v-else class="panel-body">
-      <List :items="users">
-        <template slot="item" slot-scope="{item}">
-          <FollowCard :user="item" />
-        </template>
-      </List>
+      <FollowCard v-for="user in users" :key="user.id" :user="user" class="list-item"/>
     </div>
   </div>
 </template>
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index 9b100334..be0b8827 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -1,11 +1,9 @@
 import apiService from '../../services/api/api.service.js'
 import FollowCard from '../follow_card/follow_card.vue'
-import List from '../list/list.vue'
 
 const WhoToFollow = {
   components: {
-    FollowCard,
-    List
+    FollowCard
   },
   data () {
     return {
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 412a2fbe..8bc9a728 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -4,11 +4,7 @@
       {{$t('who_to_follow.who_to_follow')}}
     </div>
     <div class="panel-body">
-      <List :items="users">
-        <template slot="item" slot-scope="{item}">
-          <FollowCard :user="item" />
-        </template>
-      </List>
+      <FollowCard v-for="user in users" :key="user.id" :user="user" class="list-item"/>
     </div>
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2