From 880484adc6d25dbcae0be39bebfc004b146bab41 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 15 Apr 2018 20:22:27 +0900
Subject: [PATCH 1/5] refs #165 Add basic search content

---
 .../components/TimelineSpace/Contents/Search.vue   | 14 ++++++++++++++
 .../components/TimelineSpace/HeaderMenu.vue        |  7 +++++--
 src/renderer/components/TimelineSpace/SideMenu.vue |  4 ++++
 src/renderer/router/index.js                       |  5 +++++
 src/renderer/store/TimelineSpace/Contents.js       |  2 ++
 .../store/TimelineSpace/Contents/Search.js         |  8 ++++++++
 6 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/TimelineSpace/Contents/Search.vue
 create mode 100644 src/renderer/store/TimelineSpace/Contents/Search.js

diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
new file mode 100644
index 0000000000..2f64e865ea
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -0,0 +1,14 @@
+<template>
+  <div id="search">
+    search
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'search'
+}
+</script>
+
+<style lnag="scss" scoped>
+</style>
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index 55c49cbfc2..10e8aec96f 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -40,10 +40,13 @@ export default {
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Favourite')
           break
         case 'local':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'LocalTimeline')
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Local timeline')
           break
         case 'public':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'PublicTimeline')
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Public timeline')
+          break
+        case 'search':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Search')
           break
         case 'lists':
           this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index d24f08811c..4837bb6db1 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -37,6 +37,10 @@
         <icon name="globe"></icon>
         <span>Public timeline</span>
       </el-menu-item>
+      <el-menu-item :index="`/${id()}/search`">
+        <icon name="search"></icon>
+        <span>Search</span>
+      </el-menu-item>
       <li class="el-menu-item menu-item-title">
         <icon name="list-ul"></icon>
         <span>Lists</span>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index 4598e4a398..fb8c44b51a 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -67,6 +67,11 @@ export default new Router({
               name: 'public',
               component: require('@/components/TimelineSpace/Contents/Public').default
             },
+            {
+              path: 'search',
+              name: 'search',
+              component: require('@/components/TimelineSpace/Contents/Search').default
+            },
             {
               path: 'lists/:list_id',
               name: 'lists',
diff --git a/src/renderer/store/TimelineSpace/Contents.js b/src/renderer/store/TimelineSpace/Contents.js
index 4c0acb8b11..acb7387f8b 100644
--- a/src/renderer/store/TimelineSpace/Contents.js
+++ b/src/renderer/store/TimelineSpace/Contents.js
@@ -4,6 +4,7 @@ import Notifications from './Contents/Notifications'
 import Favourites from './Contents/Favourites'
 import Local from './Contents/Local'
 import Public from './Contents/Public'
+import Search from './Contents/Search'
 import Lists from './Contents/Lists'
 import Cards from './Contents/Cards'
 
@@ -16,6 +17,7 @@ const Contents = {
     Favourites,
     Local,
     Public,
+    Search,
     Lists,
     Cards
   }
diff --git a/src/renderer/store/TimelineSpace/Contents/Search.js b/src/renderer/store/TimelineSpace/Contents/Search.js
new file mode 100644
index 0000000000..f5e228ce22
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Contents/Search.js
@@ -0,0 +1,8 @@
+const Search = {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {}
+}
+
+export default Search

From 75a50ab6064e7a37602d1895f968c63b98c7697e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 15 Apr 2018 23:06:59 +0900
Subject: [PATCH 2/5] refs #165 Create search header

---
 .../TimelineSpace/Contents/Search.vue         | 82 ++++++++++++++++++-
 1 file changed, 78 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index 2f64e865ea..05e4ab2ad6 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -1,14 +1,88 @@
 <template>
-  <div id="search">
-    search
+  <div id="search" :style="theme">
+    <div class="search-header">
+      <el-form :inline="true">
+        <el-select v-model="target" placeholder="search" class="search-target">
+          <el-option
+            v-for="item in searchTargets"
+            :key="item.target"
+            :label="item.label"
+            :value="item.target">
+          </el-option>
+        </el-select>
+        <el-input placeholder="keyword" class="search-keyword"></el-input>
+        <div class="clearfix"></div>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  name: 'search'
+  name: 'search',
+  data () {
+    return {
+      target: 'account',
+      searchTargets: [
+        {
+          target: 'account',
+          label: 'Account'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-background-color': state.App.theme.background_color,
+          '--theme-selected-background-color': state.App.theme.selected_background_color,
+          '--theme-primary-color': state.App.theme.primary_color
+        }
+      }
+    })
+  }
 }
 </script>
 
-<style lnag="scss" scoped>
+<style lang="scss" scoped>
+#search {
+  --theme-background-color: #ffffff;
+  --theme-selected-background-color: #f2f6fc;
+  --theme-primary-color: #303133;
+  --theme-border-color: #ebeef5;
+
+  border-top: 1px solid var(--theme-border-color);
+
+  .search-header {
+    background-color: var(--theme-selected-background-color);
+    padding: 8px 12px;
+
+    .search-target /deep/ {
+      float: left;
+      width: 20%;
+
+      .el-input__inner {
+        background-color: var(--theme-background-color);
+        border: none;
+        border-radius: 4px 0 0 4px;
+        color: var(--theme-primary-color);
+      }
+    }
+
+    .search-keyword /deep/ {
+      float: left;
+      width: 80%;
+
+      .el-input__inner {
+        background-color: var(--theme-background-color);
+        border: none;
+        border-radius: 0 4px 4px 0;
+        color: var(--theme-primary-color);
+      }
+    }
+  }
+}
 </style>

From a4c4e00954926f5252c493d79ea7ade24ce3874a Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 15 Apr 2018 23:58:24 +0900
Subject: [PATCH 3/5] refs #165 Call API to search accounts

---
 .../TimelineSpace/Contents/Search.vue         | 35 +++++++++++++------
 .../TimelineSpace/Contents/Search/Account.vue |  0
 .../store/TimelineSpace/Contents/Search.js    |  3 ++
 .../TimelineSpace/Contents/Search/Account.js  | 31 ++++++++++++++++
 4 files changed, 59 insertions(+), 10 deletions(-)
 create mode 100644 src/renderer/components/TimelineSpace/Contents/Search/Account.vue
 create mode 100644 src/renderer/store/TimelineSpace/Contents/Search/Account.js

diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index 05e4ab2ad6..0ff50349b1 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -10,7 +10,7 @@
             :value="item.target">
           </el-option>
         </el-select>
-        <el-input placeholder="keyword" class="search-keyword"></el-input>
+        <input v-model="query" placeholder="keyword" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
         <div class="clearfix"></div>
       </el-form>
     </div>
@@ -30,7 +30,8 @@ export default {
           target: 'account',
           label: 'Account'
         }
-      ]
+      ],
+      query: ''
     }
   },
   computed: {
@@ -43,6 +44,17 @@ export default {
         }
       }
     })
+  },
+  methods: {
+    search () {
+      switch (this.target) {
+        case 'account':
+          this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query)
+          break
+        default:
+          break
+      }
+    }
   }
 }
 </script>
@@ -72,16 +84,19 @@ export default {
       }
     }
 
-    .search-keyword /deep/ {
+    .search-keyword {
       float: left;
       width: 80%;
-
-      .el-input__inner {
-        background-color: var(--theme-background-color);
-        border: none;
-        border-radius: 0 4px 4px 0;
-        color: var(--theme-primary-color);
-      }
+      background-color: var(--theme-background-color);
+      border: none;
+      border-radius: 0 4px 4px 0;
+      color: var(--theme-primary-color);
+      line-height: 40px;
+      height: 40px;
+      padding: 0 15px;
+      outline: 0;
+      font-size: 14px;
+      box-sizing: border-box;
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Account.vue b/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/renderer/store/TimelineSpace/Contents/Search.js b/src/renderer/store/TimelineSpace/Contents/Search.js
index f5e228ce22..c382f97492 100644
--- a/src/renderer/store/TimelineSpace/Contents/Search.js
+++ b/src/renderer/store/TimelineSpace/Contents/Search.js
@@ -1,5 +1,8 @@
+import Account from './Search/Account'
+
 const Search = {
   namespaced: true,
+  modules: { Account },
   state: {},
   mutations: {},
   actions: {}
diff --git a/src/renderer/store/TimelineSpace/Contents/Search/Account.js b/src/renderer/store/TimelineSpace/Contents/Search/Account.js
new file mode 100644
index 0000000000..ee588113a0
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Contents/Search/Account.js
@@ -0,0 +1,31 @@
+import Mastodon from 'mastodon-api'
+
+const Account = {
+  namespaced: true,
+  state: {
+    results: []
+  },
+  mutations: {
+    updateResults (state, results) {
+      state.results = results
+    }
+  },
+  actions: {
+    search ({ state, commit, rootState }, query) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get('/search', { q: query }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateResults', data.accounts)
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default Account

From 68c406fe1048be1ebf778f726060f3c005384c7e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 16 Apr 2018 08:19:29 +0900
Subject: [PATCH 4/5] refs #165 Show search results

---
 .../TimelineSpace/Contents/Cards/User.vue     | 17 +++++++++++--
 .../TimelineSpace/Contents/Search.vue         |  5 ++++
 .../TimelineSpace/Contents/Search/Account.vue | 25 +++++++++++++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/User.vue b/src/renderer/components/TimelineSpace/Contents/Cards/User.vue
index 0afb1bb9f6..cbde52d9db 100644
--- a/src/renderer/components/TimelineSpace/Contents/Cards/User.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/User.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="user" @click="openUser(user)">
+<div class="user" @click="openUser(user)" :style="theme">
   <div class="icon">
     <img :src="user.avatar" />
   </div>
@@ -15,9 +15,20 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'user',
   props: [ 'user' ],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -37,10 +48,12 @@ export default {
 
 <style lang="scss" scoped>
 .user {
+  --theme-border-color: #ebeef5;
+
   display: flex;
   box-sizing: border-box;
   padding: 4px 12px 8px;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--theme-border-color);
   cursor: pointer;
 
   .icon {
diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index 0ff50349b1..1918dcbe14 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -14,14 +14,19 @@
         <div class="clearfix"></div>
       </el-form>
     </div>
+    <div class="search-result">
+      <search-account></search-account>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import SearchAccount from './Search/Account'
 
 export default {
   name: 'search',
+  components: { SearchAccount },
   data () {
     return {
       target: 'account',
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Account.vue b/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
index e69de29bb2..189e52005f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
@@ -0,0 +1,25 @@
+<template>
+  <div id="search_account">
+    <template v-for="account in results">
+      <user :user="account"></user>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import User from '../Cards/User'
+
+export default {
+  name: 'search-account',
+  components: { User },
+  computed: {
+    ...mapState({
+      results: state => state.TimelineSpace.Contents.Search.Account.results
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

From f4b845031b94d96034c527b339607957b62bd484 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 16 Apr 2018 20:04:11 +0900
Subject: [PATCH 5/5] refs #165 Add loading in search

---
 .../components/TimelineSpace/Contents/Search.vue       | 10 +++++++++-
 src/renderer/store/TimelineSpace/Contents/Search.js    | 10 ++++++++--
 .../store/TimelineSpace/Contents/Search/Account.js     |  2 ++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index 1918dcbe14..45d70ba9a5 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="search" :style="theme">
-    <div class="search-header">
+    <div class="search-header" v-loading="loading" :element-loading-background="loadingBackground">
       <el-form :inline="true">
         <el-select v-model="target" placeholder="search" class="search-target">
           <el-option
@@ -41,6 +41,8 @@ export default {
   },
   computed: {
     ...mapState({
+      loading: state => state.TimelineSpace.Contents.Search.loading,
+      loadingBackground: state => state.App.theme.wrapper_mask_color,
       theme: (state) => {
         return {
           '--theme-background-color': state.App.theme.background_color,
@@ -55,6 +57,12 @@ export default {
       switch (this.target) {
         case 'account':
           this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query)
+            .catch(() => {
+              this.$message({
+                message: 'Could not search',
+                type: 'error'
+              })
+            })
           break
         default:
           break
diff --git a/src/renderer/store/TimelineSpace/Contents/Search.js b/src/renderer/store/TimelineSpace/Contents/Search.js
index c382f97492..bba46dc8d0 100644
--- a/src/renderer/store/TimelineSpace/Contents/Search.js
+++ b/src/renderer/store/TimelineSpace/Contents/Search.js
@@ -3,8 +3,14 @@ import Account from './Search/Account'
 const Search = {
   namespaced: true,
   modules: { Account },
-  state: {},
-  mutations: {},
+  state: {
+    loading: false
+  },
+  mutations: {
+    changeLoading (state, loading) {
+      state.loading = loading
+    }
+  },
   actions: {}
 }
 
diff --git a/src/renderer/store/TimelineSpace/Contents/Search/Account.js b/src/renderer/store/TimelineSpace/Contents/Search/Account.js
index ee588113a0..5d7ba1266a 100644
--- a/src/renderer/store/TimelineSpace/Contents/Search/Account.js
+++ b/src/renderer/store/TimelineSpace/Contents/Search/Account.js
@@ -13,6 +13,7 @@ const Account = {
   actions: {
     search ({ state, commit, rootState }, query) {
       return new Promise((resolve, reject) => {
+        commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
         const client = new Mastodon(
           {
             access_token: rootState.TimelineSpace.account.accessToken,
@@ -21,6 +22,7 @@ const Account = {
         client.get('/search', { q: query }, (err, data, res) => {
           if (err) return reject(err)
           commit('updateResults', data.accounts)
+          commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
           resolve(res)
         })
       })