Fancier visuals for autocomplete list, with small avatar previews and all that.

src/components/post_status_form/post_status_form.js

@@ -50,10 +50,17 @@ const PostStatusForm = {
     candidates () {
       if (this.textAtCaret.charAt(0) === '@') {
         const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1)))
+        if (matchedUsers.length <= 0) {
+          return false
+        }
         // eslint-disable-next-line camelcase
-        return map(take(matchedUsers, 5), ({screen_name, name}) => screen_name)
+        return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({
+          screen_name: screen_name,
+          name: name,
+          img: profile_image_url_original
+        }))
       } else {
-        return ['nothing']
+        return false
       }
     },
     textAtCaret () {

src/components/post_status_form/post_status_form.vue

@@ -4,12 +4,16 @@
       <div class="form-group base03-border" >
         <textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
       </div>
-      <div>
-        <h1>Word</h1>
-        <h2>{{textAtCaret}}</h2>
-        <h1>Candidates</h1>
-
-        <h3 v-for="candidate in candidates" @click="replace('@' + candidate)">{{candidate}}</h3>
+      <div style="position:relative;" v-if="candidates">
+        <div class="autocomplete-panel base05-background">
+          <div v-for="candidate in candidates" @click="replace('@' + candidate.screen_name)" class="autocomplete base01">
+            <img :src="candidate.img"></img>
+            <span>
+              @{{candidate.screen_name}}
+              <small class="base02">{{candidate.name}}</small>
+            </span>
+          </div>
+        </div>
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@@ -115,6 +119,36 @@
      .icon-cancel {
          cursor: pointer;
      }
+
+     .autocomplete-panel {
+       margin: 0 0.5em 0 0.5em;
+       padding: 0.25em 0.45em 0 0.45em;
+       border-radius: 5px;
+       position: absolute;
+       z-index: 1;
+       box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+       min-width: 75%;
+     }
+
+     .autocomplete {
+       cursor: pointer;
+       padding: 0.2em 0 0.2em 0;
+       margin: 0.1em 0 0.1em 0;
+       border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+       display: flex;
+       img {
+         width: 22px;
+         height: 22px;
+         border-radius: 2px;
+       }
+       span {
+         line-height: 20px;
+         margin: 0 0.1em 0 0.2em;
+       }
+       small {
+         font-style: italic;
+       }
+     }
  }
 
 </style>