From d05bd31092cc41f45314a50eb71e0eb0ed6bafbe Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Apr 2019 15:34:18 -0400
Subject: [PATCH 01/20] setup vue-autosuggest

---
 package.json | 1 +
 yarn.lock    | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/package.json b/package.json
index c80e0f63..6b7a368e 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "vue": "^2.5.13",
+    "vue-autosuggest": "^1.8.3",
     "vue-chat-scroll": "^1.2.1",
     "vue-compose": "^0.7.1",
     "vue-i18n": "^7.3.2",
diff --git a/yarn.lock b/yarn.lock
index 58007622..1f8caca1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6422,6 +6422,10 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-autosuggest@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/vue-autosuggest/-/vue-autosuggest-1.8.3.tgz#dcce3d3ed90441c9788b6d18b2e67e5b9d4cad52"
+
 vue-chat-scroll@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.3.5.tgz#a5ee5bae5058f614818a96eac5ee3be4394a2f68"

From da5844205c5e2ead4da42f89f1f9586683af693e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 06:12:31 -0400
Subject: [PATCH 02/20] add user autosuggest component

---
 .../user_autosuggest/user_autosuggest.js      | 41 ++++++++
 .../user_autosuggest/user_autosuggest.vue     | 93 +++++++++++++++++++
 src/components/user_settings/user_settings.js |  4 +-
 .../user_settings/user_settings.vue           |  3 +-
 4 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 src/components/user_autosuggest/user_autosuggest.js
 create mode 100644 src/components/user_autosuggest/user_autosuggest.vue

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
new file mode 100644
index 00000000..6612c2f3
--- /dev/null
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -0,0 +1,41 @@
+import { VueAutosuggest } from 'vue-autosuggest'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import userSearchApi from '../../services/new_api/user_search.js'
+
+export default {
+  components: {
+    VueAutosuggest,
+    BasicUserCard
+  },
+  data () {
+    return {
+      results: [],
+      timeout: null,
+      selected: null,
+      debounceMilliseconds: 500,
+      inputProps: {
+        id: 'autosuggest__input',
+        onInputChange: this.fetchResults,
+        placeholder: 'Search...',
+        class: 'form-control'
+      },
+      suggestions: []
+    }
+  },
+  methods: {
+    fetchResults (query) {
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        userSearchApi.search({query, store: this.$store})
+          .then((data) => { this.suggestions = [{ data }] })
+      }, this.debounceMilliseconds)
+    },
+    clickHandler (item) {
+      return false
+    },
+    clickUserHandler () {
+      console.log('clickUserHandler')
+      return false
+    }
+  }
+}
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
new file mode 100644
index 00000000..48fe350d
--- /dev/null
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="user-autosuggest">
+    <VueAutosuggest
+      :suggestions="suggestions"
+      :inputProps="inputProps"
+      @click="clickHandler"
+		>
+      <template slot-scope="{suggestion}">
+        <BasicUserCard :user="suggestion.item" />
+      </template>
+    </VueAutosuggest>
+  </div>
+</template>
+
+<script src="./user_autosuggest.js"></script>
+
+<style lang="scss">
+.user-autosuggest {
+  .avatar {
+    height: 25px;
+    width: 25px;
+    border-radius: 20px;
+    margin-right: 10px;
+  }
+  #autosuggest__input {
+    outline: none;
+    position: relative;
+    display: block;
+    border: 1px solid #616161;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+  }
+
+  #autosuggest__input.autosuggest__input-open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .autosuggest__results-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .autosuggest__results {
+    font-weight: 300;
+    margin: 0;
+    position: absolute;
+    z-index: 10000001;
+    width: 100%;
+    border: 1px solid #e0e0e0;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background: white;
+    padding: 0px;
+    max-height: 400px;
+    overflow-y: scroll;
+  }
+
+  .autosuggest__results ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  .autosuggest__results .autosuggest__results_item {
+    cursor: pointer;
+    padding: 15px;
+  }
+
+  #autosuggest ul:nth-child(1) > .autosuggest__results_title {
+    border-top: none;
+  }
+
+  .autosuggest__results .autosuggest__results_title {
+    color: gray;
+    font-size: 11px;
+    margin-left: 0;
+    padding: 15px 13px 5px;
+    border-top: 1px solid lightgray;
+  }
+
+  .autosuggest__results .autosuggest__results_item:active,
+  .autosuggest__results .autosuggest__results_item:hover,
+  .autosuggest__results .autosuggest__results_item:focus,
+  .autosuggest__results
+    .autosuggest__results_item.autosuggest__results_item-highlighted {
+    background-color: #f6f6f6;
+  }
+}
+</style>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index b6a0479d..d5772082 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,6 +9,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 EmojiInput from '../emoji-input/emoji-input.vue'
+import UserAutoSuggest from '../user_autosuggest/user_autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
@@ -73,7 +74,8 @@ const UserSettings = {
     ImageCropper,
     BlockList,
     MuteList,
-    EmojiInput
+    EmojiInput,
+    UserAutoSuggest
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index c08698dc..d98a8eba 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -22,7 +22,7 @@
           <div class="setting-item" >
             <h2>{{$t('settings.name_bio')}}</h2>
             <p>{{$t('settings.name')}}</p>
-            <EmojiInput 
+            <EmojiInput
               type="text"
               v-model="newName"
               id="username"
@@ -195,6 +195,7 @@
         </div>
 
         <div :label="$t('settings.blocks_tab')">
+          <UserAutoSuggest />
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>

From 94e67ff11894c13bf34f1b31802a1497caa03897 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 12:31:45 -0400
Subject: [PATCH 03/20] rewrite USerAutoSuggest without any dependency

---
 .../user_autosuggest/user_autosuggest.js      | 37 +++-----
 .../user_autosuggest/user_autosuggest.vue     | 94 +++----------------
 2 files changed, 29 insertions(+), 102 deletions(-)

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index 6612c2f3..eff6ef75 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -1,41 +1,34 @@
-import { VueAutosuggest } from 'vue-autosuggest'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 
+const debounceMilliseconds = 500
+
 export default {
   components: {
-    VueAutosuggest,
     BasicUserCard
   },
   data () {
     return {
+      query: '',
       results: [],
-      timeout: null,
-      selected: null,
-      debounceMilliseconds: 500,
-      inputProps: {
-        id: 'autosuggest__input',
-        onInputChange: this.fetchResults,
-        placeholder: 'Search...',
-        class: 'form-control'
-      },
-      suggestions: []
+      timeout: null
+    }
+  },
+  watch: {
+    query (val) {
+      this.fetchResults(val)
     }
   },
   methods: {
     fetchResults (query) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
-        userSearchApi.search({query, store: this.$store})
-          .then((data) => { this.suggestions = [{ data }] })
-      }, this.debounceMilliseconds)
-    },
-    clickHandler (item) {
-      return false
-    },
-    clickUserHandler () {
-      console.log('clickUserHandler')
-      return false
+        this.results = []
+        if (query) {
+          userSearchApi.search({query, store: this.$store})
+            .then((data) => { this.results = data })
+        }
+      }, debounceMilliseconds)
     }
   }
 }
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 48fe350d..04e38a60 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,93 +1,27 @@
 <template>
-  <div class="user-autosuggest">
-    <VueAutosuggest
-      :suggestions="suggestions"
-      :inputProps="inputProps"
-      @click="clickHandler"
-		>
-      <template slot-scope="{suggestion}">
-        <BasicUserCard :user="suggestion.item" />
-      </template>
-    </VueAutosuggest>
+  <div class="user-autocomplete-search">
+    <input v-model="query" placeholder="Search..." />
+    <div class="user-autocomplete-search-results">
+      <BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
+    </div>
   </div>
 </template>
 
 <script src="./user_autosuggest.js"></script>
 
 <style lang="scss">
-.user-autosuggest {
-  .avatar {
-    height: 25px;
-    width: 25px;
-    border-radius: 20px;
-    margin-right: 10px;
-  }
-  #autosuggest__input {
-    outline: none;
-    position: relative;
-    display: block;
-    border: 1px solid #616161;
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-  }
+.user-autocomplete-search {
+  position: relative;
 
-  #autosuggest__input.autosuggest__input-open {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .autosuggest__results-container {
-    position: relative;
-    width: 100%;
-  }
-
-  .autosuggest__results {
-    font-weight: 300;
-    margin: 0;
+  &-results {
     position: absolute;
-    z-index: 10000001;
-    width: 100%;
-    border: 1px solid #e0e0e0;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    background: white;
-    padding: 0px;
+    left: 0;
+    top: 100%;
+    right: 0;
+    background: #FFF;
     max-height: 400px;
-    overflow-y: scroll;
-  }
-
-  .autosuggest__results ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-  }
-
-  .autosuggest__results .autosuggest__results_item {
-    cursor: pointer;
-    padding: 15px;
-  }
-
-  #autosuggest ul:nth-child(1) > .autosuggest__results_title {
-    border-top: none;
-  }
-
-  .autosuggest__results .autosuggest__results_title {
-    color: gray;
-    font-size: 11px;
-    margin-left: 0;
-    padding: 15px 13px 5px;
-    border-top: 1px solid lightgray;
-  }
-
-  .autosuggest__results .autosuggest__results_item:active,
-  .autosuggest__results .autosuggest__results_item:hover,
-  .autosuggest__results .autosuggest__results_item:focus,
-  .autosuggest__results
-    .autosuggest__results_item.autosuggest__results_item-highlighted {
-    background-color: #f6f6f6;
+    overflow-y: auto;
+    z-index: 1;
   }
 }
 </style>

From b2eb43e3c8d49fcd43c3d864d7cc50dff9c5e3ff Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 12:33:01 -0400
Subject: [PATCH 04/20] rename css classes

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

diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 04e38a60..743d9eaf 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="user-autocomplete-search">
+  <div class="user-autosuggest">
     <input v-model="query" placeholder="Search..." />
-    <div class="user-autocomplete-search-results">
+    <div class="user-autosuggest-results">
       <BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
     </div>
   </div>
@@ -10,7 +10,7 @@
 <script src="./user_autosuggest.js"></script>
 
 <style lang="scss">
-.user-autocomplete-search {
+.user-autosuggest {
   position: relative;
 
   &-results {

From 6d3187b44951596204c5d8fec6d97b6faa70eb4a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 12:37:01 -0400
Subject: [PATCH 05/20] remove needless dependency

---
 package.json | 1 -
 yarn.lock    | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/package.json b/package.json
index 6b7a368e..c80e0f63 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "vue": "^2.5.13",
-    "vue-autosuggest": "^1.8.3",
     "vue-chat-scroll": "^1.2.1",
     "vue-compose": "^0.7.1",
     "vue-i18n": "^7.3.2",
diff --git a/yarn.lock b/yarn.lock
index 1f8caca1..58007622 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6422,10 +6422,6 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-autosuggest@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/vue-autosuggest/-/vue-autosuggest-1.8.3.tgz#dcce3d3ed90441c9788b6d18b2e67e5b9d4cad52"
-
 vue-chat-scroll@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.3.5.tgz#a5ee5bae5058f614818a96eac5ee3be4394a2f68"

From 787737c80d8b815209539f159449efee677bd5d9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 13:18:36 -0400
Subject: [PATCH 06/20] hide results on outside click

---
 package.json                                       |  1 +
 .../user_autosuggest/user_autosuggest.js           | 14 ++++++++++++--
 .../user_autosuggest/user_autosuggest.vue          |  4 ++--
 src/main.js                                        |  2 ++
 yarn.lock                                          |  4 ++++
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index c80e0f63..14937673 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "popper.js": "^1.14.7",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
+    "v-click-outside": "^2.1.1",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-compose": "^0.7.1",
diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index eff6ef75..b99f61cc 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -11,7 +11,8 @@ export default {
     return {
       query: '',
       results: [],
-      timeout: null
+      timeout: null,
+      resultsVisible: false
     }
   },
   watch: {
@@ -26,9 +27,18 @@ export default {
         this.results = []
         if (query) {
           userSearchApi.search({query, store: this.$store})
-            .then((data) => { this.results = data })
+            .then((data) => {
+              this.results = data
+              this.resultsVisible = true
+            })
         }
       }, debounceMilliseconds)
+    },
+    onInputClick () {
+      this.resultsVisible = true
+    },
+    onClickOutside () {
+      this.resultsVisible = false
     }
   }
 }
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 743d9eaf..eb5aa41b 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="user-autosuggest">
     <input v-model="query" placeholder="Search..." />
-    <div class="user-autosuggest-results">
+  <div class="user-autosuggest" v-click-outside="onClickOutside">
+    <div class="user-autosuggest-results" v-if="resultsVisible">
       <BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
     </div>
   </div>
diff --git a/src/main.js b/src/main.js
index c80aea36..725f5806 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,7 @@ import pushNotifications from './lib/push_notifications_plugin.js'
 import messages from './i18n/messages.js'
 
 import VueChatScroll from 'vue-chat-scroll'
+import VueClickOutside from 'v-click-outside'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -39,6 +40,7 @@ Vue.use(VueTimeago, {
 })
 Vue.use(VueI18n)
 Vue.use(VueChatScroll)
+Vue.use(VueClickOutside)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
diff --git a/yarn.lock b/yarn.lock
index 58007622..e463c0d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6389,6 +6389,10 @@ uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
 
+v-click-outside@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.1.tgz#5af80b68a1c82eac89c597890434fa3994b42ed1"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"

From fd4289e45a1d9f952b44251110abe01081b92f8a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 13:18:41 -0400
Subject: [PATCH 07/20] improve ui

---
 .../user_autosuggest/user_autosuggest.vue     | 20 +++++++++++++++++--
 .../user_settings/user_settings.vue           |  8 +++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index eb5aa41b..2840941f 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,6 +1,6 @@
 <template>
-    <input v-model="query" placeholder="Search..." />
   <div class="user-autosuggest" v-click-outside="onClickOutside">
+    <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
     <div class="user-autosuggest-results" v-if="resultsVisible">
       <BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
     </div>
@@ -10,15 +10,31 @@
 <script src="./user_autosuggest.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .user-autosuggest {
   position: relative;
 
+  &-input {
+    display: block;
+    width: 100%;
+  }
+
   &-results {
     position: absolute;
     left: 0;
     top: 100%;
     right: 0;
-    background: #FFF;
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+    border-style: solid;
+    border-width: 1px;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-radius: $fallback--inputRadius;
+    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
     max-height: 400px;
     overflow-y: auto;
     z-index: 1;
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index d98a8eba..811f63aa 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -195,7 +195,9 @@
         </div>
 
         <div :label="$t('settings.blocks_tab')">
-          <UserAutoSuggest />
+          <div class="profile-edit-usersearch-wrapper">
+            <UserAutoSuggest />
+          </div>
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>
@@ -263,5 +265,9 @@
       text-align: right;
     }
   }
+
+  &-usersearch-wrapper {
+    padding: 1em;
+  }
 }
 </style>

From 69f9ea987c2e1cda5ebb31b640ef42389fa8c210 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 13:49:48 -0400
Subject: [PATCH 08/20] make blocking functional in the search results

---
 src/components/user_autosuggest/user_autosuggest.js  | 5 +++--
 src/components/user_autosuggest/user_autosuggest.vue | 2 +-
 src/modules/users.js                                 | 3 +++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index b99f61cc..42914b36 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -1,11 +1,11 @@
-import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import BlockCard from '../block_card/block_card.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 
 const debounceMilliseconds = 500
 
 export default {
   components: {
-    BasicUserCard
+    BlockCard
   },
   data () {
     return {
@@ -28,6 +28,7 @@ export default {
         if (query) {
           userSearchApi.search({query, store: this.$store})
             .then((data) => {
+              this.$store.dispatch('addNewUsers', data)
               this.results = data
               this.resultsVisible = true
             })
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 2840941f..d85fabf1 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -2,7 +2,7 @@
   <div class="user-autosuggest" v-click-outside="onClickOutside">
     <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
     <div class="user-autosuggest-results" v-if="resultsVisible">
-      <BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
+      <BlockCard v-for="user in results" :key="user.id" :userId="user.id"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/users.js b/src/modules/users.js
index 6de50b80..545b1d58 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -281,6 +281,9 @@ const users = {
 
       unregisterPushNotifications(token)
     },
+    addNewUsers ({ commit }, users) {
+      commit('addNewUsers', users)
+    },
     addNewStatuses (store, { statuses }) {
       const users = map(statuses, 'user')
       const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))

From 60b07eeaa44bcfa99e90aa075cd18086d25ef194 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 14:01:21 -0400
Subject: [PATCH 09/20] filter out blocked user or me from the results

---
 src/components/user_autosuggest/user_autosuggest.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index 42914b36..c8332e34 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -1,3 +1,4 @@
+import reject from 'lodash/reject'
 import BlockCard from '../block_card/block_card.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 
@@ -27,9 +28,12 @@ export default {
         this.results = []
         if (query) {
           userSearchApi.search({query, store: this.$store})
-            .then((data) => {
-              this.$store.dispatch('addNewUsers', data)
-              this.results = data
+            .then((users) => {
+              const filteredUsers = reject(users, (user) => {
+                return user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+              })
+              this.$store.dispatch('addNewUsers', filteredUsers)
+              this.results = filteredUsers
               this.resultsVisible = true
             })
         }

From 33467880edc80f2bce205b8d426a65a751b9baf2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 14:07:03 -0400
Subject: [PATCH 10/20] improve ui

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

diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index d85fabf1..6253ca6b 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-autosuggest" v-click-outside="onClickOutside">
     <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
-    <div class="user-autosuggest-results" v-if="resultsVisible">
+    <div class="user-autosuggest-results" v-if="resultsVisible && results.length > 0">
       <BlockCard v-for="user in results" :key="user.id" :userId="user.id"/>
     </div>
   </div>
@@ -25,6 +25,7 @@
     left: 0;
     top: 100%;
     right: 0;
+    max-height: 400px;
     background-color: $fallback--lightBg;
     background-color: var(--lightBg, $fallback--lightBg);
     border-style: solid;
@@ -35,7 +36,8 @@
     border-radius: var(--inputRadius, $fallback--inputRadius);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    max-height: 400px;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: var(--panelShadow);
     overflow-y: auto;
     z-index: 1;
   }

From 91844358871e106add0822fc528b4deeaa32c2ec Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 14:27:22 -0400
Subject: [PATCH 11/20] remove blocked one from the results on real time

---
 .../user_autosuggest/user_autosuggest.js        | 17 +++++++++++------
 .../user_autosuggest/user_autosuggest.vue       |  4 ++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index c8332e34..75798b7e 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -1,4 +1,5 @@
 import reject from 'lodash/reject'
+import map from 'lodash/map'
 import BlockCard from '../block_card/block_card.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 
@@ -16,6 +17,14 @@ export default {
       resultsVisible: false
     }
   },
+  computed: {
+    filtered () {
+      return reject(this.results, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+      })
+    }
+  },
   watch: {
     query (val) {
       this.fetchResults(val)
@@ -29,12 +38,8 @@ export default {
         if (query) {
           userSearchApi.search({query, store: this.$store})
             .then((users) => {
-              const filteredUsers = reject(users, (user) => {
-                return user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
-              })
-              this.$store.dispatch('addNewUsers', filteredUsers)
-              this.results = filteredUsers
-              this.resultsVisible = true
+              this.$store.dispatch('addNewUsers', users)
+              this.results = map(users, 'id')
             })
         }
       }, debounceMilliseconds)
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 6253ca6b..930216a7 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="user-autosuggest" v-click-outside="onClickOutside">
     <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
-    <div class="user-autosuggest-results" v-if="resultsVisible && results.length > 0">
-      <BlockCard v-for="user in results" :key="user.id" :userId="user.id"/>
+    <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
+      <BlockCard v-for="userId in filtered" :key="userId" :userId="userId"/>
     </div>
   </div>
 </template>

From 5c2c222252c09dec40d29e37692724699f551413 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 14:56:37 -0400
Subject: [PATCH 12/20] add blocked user to the blocked list on real time

---
 src/modules/users.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/users.js b/src/modules/users.js
index 545b1d58..2c6a0f81 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -132,6 +132,11 @@ export const mutations = {
   saveBlockIds (state, blockIds) {
     state.currentUser.blockIds = blockIds
   },
+  addBlockId (state, blockId) {
+    if (state.currentUser.blockIds.indexOf(blockId) === -1) {
+      state.currentUser.blockIds.push(blockId)
+    }
+  },
   updateMutes (state, mutedUsers) {
     // Reset muted of all fetched users
     each(state.users, (user) => { user.muted = false })
@@ -215,6 +220,7 @@ const users = {
       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 })

From 8410add39457ef075a14096fbcbceab24757588f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 15:41:26 -0400
Subject: [PATCH 13/20] make UserAutoSuggest component more generic

---
 .../user_autosuggest/user_autosuggest.js      | 33 +++++++++----------
 .../user_autosuggest/user_autosuggest.vue     |  2 +-
 src/components/user_settings/user_settings.js | 16 +++++++++
 .../user_settings/user_settings.vue           |  2 +-
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index 75798b7e..6b95fc15 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -1,46 +1,45 @@
-import reject from 'lodash/reject'
-import map from 'lodash/map'
 import BlockCard from '../block_card/block_card.vue'
-import userSearchApi from '../../services/new_api/user_search.js'
 
 const debounceMilliseconds = 500
 
 export default {
+  props: {
+    query: {    // function to query results and return a promise
+      type: Function,
+      required: true
+    },
+    filter: {   // function to filter results in real time
+      type: Function
+    }
+  },
   components: {
     BlockCard
   },
   data () {
     return {
-      query: '',
-      results: [],
+      term: '',
       timeout: null,
+      results: [],
       resultsVisible: false
     }
   },
   computed: {
     filtered () {
-      return reject(this.results, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
-      })
+      return this.filter ? this.filter(this.results) : this.results
     }
   },
   watch: {
-    query (val) {
+    term (val) {
       this.fetchResults(val)
     }
   },
   methods: {
-    fetchResults (query) {
+    fetchResults (term) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
         this.results = []
-        if (query) {
-          userSearchApi.search({query, store: this.$store})
-            .then((users) => {
-              this.$store.dispatch('addNewUsers', users)
-              this.results = map(users, 'id')
-            })
+        if (term) {
+          this.query(term).then((results) => { this.results = results })
         }
       }, debounceMilliseconds)
     },
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 930216a7..48cffc78 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user-autosuggest" v-click-outside="onClickOutside">
-    <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
+    <input v-model="term" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
     <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
       <BlockCard v-for="userId in filtered" :key="userId" :userId="userId"/>
     </div>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index d5772082..259e3418 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -1,6 +1,8 @@
 import { compose } from 'vue-compose'
 import unescape from 'lodash/unescape'
 import get from 'lodash/get'
+import map from 'lodash/map'
+import reject from 'lodash/reject'
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
@@ -12,6 +14,7 @@ import EmojiInput from '../emoji-input/emoji-input.vue'
 import UserAutoSuggest from '../user_autosuggest/user_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({
@@ -336,6 +339,19 @@ const UserSettings = {
       if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
         this.$store.dispatch('revokeToken', id)
       }
+    },
+    filterUnblockedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+      })
+    },
+    queryUserIds (query) {
+      return userSearchApi.search({query, store: this.$store})
+        .then((users) => {
+          this.$store.dispatch('addNewUsers', users)
+          return map(users, 'id')
+        })
     }
   }
 }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 811f63aa..6018cc30 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -196,7 +196,7 @@
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <UserAutoSuggest />
+            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" />
           </div>
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>

From fc5f4fba8c4af713855b881d7b178623b1e77b01 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 15:43:41 -0400
Subject: [PATCH 14/20] make more generic

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

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index 6b95fc15..12a6964a 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -10,6 +10,10 @@ export default {
     },
     filter: {   // function to filter results in real time
       type: Function
+    },
+    placeholder: {
+      type: String,
+      default: 'Search...'
     }
   },
   components: {
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index 48cffc78..db3e1bdf 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user-autosuggest" v-click-outside="onClickOutside">
-    <input v-model="term" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
+    <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="user-autosuggest-input" />
     <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
       <BlockCard v-for="userId in filtered" :key="userId" :userId="userId"/>
     </div>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 6018cc30..3dde5ae1 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -196,7 +196,7 @@
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" />
+            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" placeholder="Search whom you want to block" />
           </div>
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>

From 1cf9780e05957c96b6d6b6b898b83ff1987b2703 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 16:02:02 -0400
Subject: [PATCH 15/20] make more generic

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

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js
index 12a6964a..d4efe912 100644
--- a/src/components/user_autosuggest/user_autosuggest.js
+++ b/src/components/user_autosuggest/user_autosuggest.js
@@ -1,5 +1,3 @@
-import BlockCard from '../block_card/block_card.vue'
-
 const debounceMilliseconds = 500
 
 export default {
@@ -16,9 +14,6 @@ export default {
       default: 'Search...'
     }
   },
-  components: {
-    BlockCard
-  },
   data () {
     return {
       term: '',
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue
index db3e1bdf..6eaecbaa 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/user_autosuggest/user_autosuggest.vue
@@ -2,7 +2,8 @@
   <div class="user-autosuggest" v-click-outside="onClickOutside">
     <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="user-autosuggest-input" />
     <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
-      <BlockCard v-for="userId in filtered" :key="userId" :userId="userId"/>
+      <slot v-for="item in filtered" :item="item">
+      </slot>
     </div>
   </div>
 </template>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 259e3418..2cae2d00 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -78,7 +78,8 @@ const UserSettings = {
     BlockList,
     MuteList,
     EmojiInput,
-    UserAutoSuggest
+    UserAutoSuggest,
+    BlockCard
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 3dde5ae1..69d3dc53 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -196,7 +196,9 @@
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" placeholder="Search whom you want to block" />
+            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" placeholder="Search whom you want to block">
+              <BlockCard slot-scope="row" :userId="row.item"/>
+            </UserAutoSuggest>
           </div>
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>

From 0bdb0e5a8124508edff12a265174bd51a09c37e6 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 16:10:03 -0400
Subject: [PATCH 16/20] rename Autosuggest component

---
 .../user_autosuggest.js => autosuggest/autosuggest.js} |  0
 .../autosuggest.vue}                                   | 10 +++++-----
 src/components/user_settings/user_settings.js          |  4 ++--
 src/components/user_settings/user_settings.vue         |  4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)
 rename src/components/{user_autosuggest/user_autosuggest.js => autosuggest/autosuggest.js} (100%)
 rename src/components/{user_autosuggest/user_autosuggest.vue => autosuggest/autosuggest.vue} (78%)

diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/autosuggest/autosuggest.js
similarity index 100%
rename from src/components/user_autosuggest/user_autosuggest.js
rename to src/components/autosuggest/autosuggest.js
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/autosuggest/autosuggest.vue
similarity index 78%
rename from src/components/user_autosuggest/user_autosuggest.vue
rename to src/components/autosuggest/autosuggest.vue
index 6eaecbaa..ae1e312d 100644
--- a/src/components/user_autosuggest/user_autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="user-autosuggest" v-click-outside="onClickOutside">
-    <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="user-autosuggest-input" />
-    <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
+  <div class="autosuggest" v-click-outside="onClickOutside">
+    <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="autosuggest-input" />
+    <div class="autosuggest-results" v-if="resultsVisible && filtered.length > 0">
       <slot v-for="item in filtered" :item="item">
       </slot>
     </div>
   </div>
 </template>
 
-<script src="./user_autosuggest.js"></script>
+<script src="./autosuggest.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-autosuggest {
+.autosuggest {
   position: relative;
 
   &-input {
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 2cae2d00..a0dfbc67 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -11,7 +11,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 EmojiInput from '../emoji-input/emoji-input.vue'
-import UserAutoSuggest from '../user_autosuggest/user_autosuggest.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'
@@ -78,7 +78,7 @@ const UserSettings = {
     BlockList,
     MuteList,
     EmojiInput,
-    UserAutoSuggest,
+    Autosuggest,
     BlockCard
   },
   computed: {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 69d3dc53..d79abd0f 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -196,9 +196,9 @@
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" placeholder="Search whom you want to block">
+            <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" placeholder="Search whom you want to block">
               <BlockCard slot-scope="row" :userId="row.item"/>
-            </UserAutoSuggest>
+            </Autosuggest>
           </div>
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>

From d58e08cf52c5953914f0bf1b6c9fb120168c6160 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 16:14:45 -0400
Subject: [PATCH 17/20] add search to the mutes tab as well

---
 src/components/user_settings/user_settings.js  | 9 ++++++++-
 src/components/user_settings/user_settings.vue | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index a0dfbc67..dd931e67 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -79,7 +79,8 @@ const UserSettings = {
     MuteList,
     EmojiInput,
     Autosuggest,
-    BlockCard
+    BlockCard,
+    MuteCard
   },
   computed: {
     user () {
@@ -347,6 +348,12 @@ const UserSettings = {
         return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
       })
     },
+    filterUnMutedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.muted || user.id === this.$store.state.users.currentUser.id
+      })
+    },
     queryUserIds (query) {
       return userSearchApi.search({query, store: this.$store})
         .then((users) => {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index d79abd0f..8fcf4c07 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -206,6 +206,11 @@
         </div>
 
         <div :label="$t('settings.mutes_tab')">
+          <div class="profile-edit-usersearch-wrapper">
+            <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" placeholder="Search whom you want to mute">
+              <MuteCard slot-scope="row" :userId="row.item"/>
+            </Autosuggest>
+          </div>
           <mute-list :refresh="true">
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </mute-list>

From 948baba9d351f8e5958e1f1aa7b9065c9c54f026 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 16:23:12 -0400
Subject: [PATCH 18/20] add muted user to the mutes list in real time

---
 src/modules/users.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/modules/users.js b/src/modules/users.js
index 2c6a0f81..b6d8227c 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -145,6 +145,11 @@ export const mutations = {
   saveMuteIds (state, muteIds) {
     state.currentUser.muteIds = muteIds
   },
+  addMuteId (state, muteId) {
+    if (state.currentUser.muteIds.indexOf(muteId) === -1) {
+      state.currentUser.muteIds.push(muteId)
+    }
+  },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
   },
@@ -240,7 +245,10 @@ const users = {
     },
     muteUser (store, id) {
       return store.rootState.api.backendInteractor.muteUser(id)
-        .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+        .then((relationship) => {
+          store.commit('updateUserRelationship', [relationship])
+          store.commit('addMuteId', id)
+        })
     },
     unmuteUser (store, id) {
       return store.rootState.api.backendInteractor.unmuteUser(id)

From d874ca905cbf90a4adb070bbe9b307e5bf9ad82f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 16:28:51 -0400
Subject: [PATCH 19/20] support i18n

---
 src/components/user_settings/user_settings.vue | 4 ++--
 src/i18n/en.json                               | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 8fcf4c07..9d37ffc4 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -196,7 +196,7 @@
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" placeholder="Search whom you want to block">
+            <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_block')">
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
@@ -207,7 +207,7 @@
 
         <div :label="$t('settings.mutes_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" placeholder="Search whom you want to mute">
+            <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_mute')">
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9188c6f7..c71c9036 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -217,6 +217,8 @@
     "reply_visibility_self": "Only show replies directed at me",
     "saving_err": "Error saving settings",
     "saving_ok": "Settings saved",
+    "search_user_to_block": "Search whom you want to block",
+    "search_user_to_mute": "Search whom you want to mute",
     "security_tab": "Security",
     "scope_copy": "Copy scope when replying (DMs are always copied)",
     "minimal_scopes_mode": "Minimize post scope selection options",

From 329dc833b3d2a4bb36e487bcd420b880865c185a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 16:46:40 -0400
Subject: [PATCH 20/20] clean up

---
 src/components/autosuggest/autosuggest.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index ae1e312d..91657a2d 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -2,8 +2,7 @@
   <div class="autosuggest" v-click-outside="onClickOutside">
     <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="autosuggest-input" />
     <div class="autosuggest-results" v-if="resultsVisible && filtered.length > 0">
-      <slot v-for="item in filtered" :item="item">
-      </slot>
+      <slot v-for="item in filtered" :item="item" />
     </div>
   </div>
 </template>