7 files changed, 68 insertions, 5 deletions
diff --git a/src/App.js b/src/App.js
index 2a00b369..a2d891f7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,15 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
+import UserFinder from './components/user_finder/user_finder.vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications
+    Notifications,
+    UserFinder
   },
   data: () => ({
     mobileActivePanel: 'timeline'
diff --git a/src/App.vue b/src/App.vue
index fcfdae97..d0c6671e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,7 @@
         <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
           <div class="sidebar-container">
             <user-panel></user-panel>
+            <user-finder></user-finder>
             <nav-panel></nav-panel>
             <notifications v-if="currentUser"></notifications>
           </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e06fc29a..6fd53420 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -34,7 +34,8 @@
       <div class="media status container">
         <div class="media-left">
           <a :href="status.user.statusnet_profile_url">
-            <img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original">
+            <img @click.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original">
+            <img v-if="retweet" class='avatar-retweeter' :src="statusoid.user.profile_image_url_original"></img>
           </a>
         </div>
         <div class="media-body">
@@ -162,7 +163,23 @@
  }
 
  .status .avatar {
-     width: 48px;
+   width: 48px;
+   height: 48px;
+
+   &.retweeted {
+     width: 40px;
+     height: 40px;
+     margin-right: 8px;
+     margin-bottom: 8px;
+   }
+ }
+
+ .status img.avatar-retweeter {
+   width: 24px;
+   height: 24px;
+   position: absolute;
+   margin-left: 24px;
+   margin-top: 24px;
  }
 
  .status.compact .avatar {
diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js
new file mode 100644
index 00000000..a6bf08b6
--- /dev/null
+++ b/src/components/user_finder/user_finder.js
@@ -0,0 +1,18 @@
+const UserFinder = {
+  data: () => ({
+    username: undefined
+  }),
+  methods: {
+    findUser (username) {
+      this.$store.state.api.backendInteractor.externalProfile(username)
+        .then((user) => {
+          if (!user.error) {
+            this.$store.commit('addNewUsers', [user])
+            this.$router.push({name: 'user-profile', params: {id: user.id}})
+          }
+        })
+    }
+  }
+}
+
+export default UserFinder
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
new file mode 100644
index 00000000..2fbf1693
--- /dev/null
+++ b/src/components/user_finder/user_finder.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="user-finder-panel panel panel-default base00-background">
+    <input @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text" />
+  </div>
+</template>
+
+<script src="./user_finder.js"></script>
+
+<style lang="scss">
+ .user-finder-panel {
+   padding: 10px;
+ }
+</style>
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 4dfc0a02..1c5e281e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -17,6 +17,7 @@ const FRIENDS_URL = '/api/statuses/friends.json'
 const FOLLOWING_URL = '/api/friendships/create.json'
 const UNFOLLOWING_URL = '/api/friendships/destroy.json'
 const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
+const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 // const USER_URL = '/api/users/show.json'
 
 const oldfetch = window.fetch
@@ -35,6 +36,13 @@ const authHeaders = (user) => {
   }
 }
 
+const externalProfile = (profileUrl) => {
+  let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}`
+  return fetch(url, {
+    method: 'GET'
+  }).then((data) => data.json())
+}
+
 const followUser = ({id, credentials}) => {
   let url = `${FOLLOWING_URL}?user_id=${id}`
   return fetch(url, {
@@ -198,7 +206,8 @@ const apiService = {
   uploadMedia,
   fetchAllFollowing,
   setUserMute,
-  fetchMutes
+  fetchMutes,
+  externalProfile
 }
 
 export default apiService
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index bc68d02c..74248bc0 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -36,6 +36,8 @@ const backendInteractorService = (credentials) => {
 
   const fetchMutes = () => apiService.fetchMutes({credentials})
 
+  const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
+
   const backendInteractorServiceInstance = {
     fetchStatus,
     fetchConversation,
@@ -46,7 +48,8 @@ const backendInteractorService = (credentials) => {
     verifyCredentials: apiService.verifyCredentials,
     startFetching,
     setUserMute,
-    fetchMutes
+    fetchMutes,
+    externalProfile
   }
 
   return backendInteractorServiceInstance