From 6c58698682b9e2e430c08229b430869869d9a7be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Fri, 26 Aug 2022 16:53:45 +0100
Subject: [PATCH 01/13] Add new keywords-input.vue component

---
 frontend/src/i18n/en.js                       |   3 +-
 .../eagle-eye/components/eagle-eye-search.vue |  45 ++---
 .../shared/form/autocomplete-many-input.vue   |   2 +-
 .../shared/form/autocomplete-one-input.vue    |   2 +-
 frontend/src/shared/form/keywords-input.vue   | 156 ++++++++++++++++++
 frontend/src/shared/shared-module.js          |   4 +-
 6 files changed, 176 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/shared/form/keywords-input.vue

diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
index 3fbc66a686..6b62720576 100644
--- a/frontend/src/i18n/en.js
+++ b/frontend/src/i18n/en.js
@@ -259,7 +259,8 @@ const en = {
         'issues-close': 'closed an issue',
         'issues-closed': 'closed an issue',
         'issue-comment': 'commented on an issue',
-        'pull_request-comment': 'commented on a pull request',
+        'pull_request-comment':
+          'commented on a pull request',
         'discussion-started': 'started a discussion',
         'discussion-comment': 'commented on a discussion',
         contributed_to_community:
diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index 277d908a5d..d455438ed5 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="eagle-eye-search">
-    <app-autocomplete-many-input
-      class="inline-input w-full mx-3"
-      :fetchFn="handleSearchAutocomplete"
-      v-model="selectedKeywords"
-      placeholder="Enter keywords, or topics..."
-      :triggerOnFocus="false"
-      :inMemoryFilter="false"
-      @remove-tag="handleRemoveKeyword"
-    >
-    </app-autocomplete-many-input>
+    <div class="relative mx-3">
+      <app-keywords-input
+        v-model="selectedKeywords"
+        class="inline-input w-full"
+        placeholder="Enter keywords, or topics..."
+      />
+      <span class="text-xs text-gray-400"
+        >Press ENTER or comma (,) to separate keywords</span
+      >
+    </div>
     <app-eagle-eye-filter />
     <el-button
       class="btn btn--primary mx-3"
@@ -21,15 +21,13 @@
 </template>
 
 <script>
-import AppAutocompleteManyInput from '@/shared/form/autocomplete-many-input'
 import AppEagleEyeFilter from './eagle-eye-filter'
 import { mapGetters, mapActions } from 'vuex'
 
 export default {
   name: 'app-eagle-eye-search',
   components: {
-    AppEagleEyeFilter,
-    AppAutocompleteManyInput
+    AppEagleEyeFilter
   },
   computed: {
     ...mapGetters({
@@ -46,28 +44,16 @@ export default {
       doPopulate: 'eagleEye/doPopulate',
       doFetch: 'eagleEye/doFetch'
     }),
-    async handleSearchAutocomplete(query) {
-      return [
-        {
-          id: query,
-          label: query
-        }
-      ]
-    },
     async doSearch() {
       const filtersToApply = {
         ...this.filter,
         keywords: this.selectedKeywords
-          .map((k) => k.id)
           .join(',')
       }
       await this.doFetch({
         rawFilter: filtersToApply,
         filter: filtersToApply
       })
-    },
-    handleRemoveKeyword() {
-      this.doSearch()
     }
   },
   async created() {
@@ -76,12 +62,7 @@ export default {
     )
     this.selectedKeywords =
       savedKeywords && savedKeywords !== ''
-        ? savedKeywords.split(',').map((k) => {
-            return {
-              id: k,
-              label: k
-            }
-          })
+        ? savedKeywords.split(',')
         : []
 
     if (savedKeywords) {
@@ -93,6 +74,6 @@ export default {
 
 <style lang="scss">
 .eagle-eye-search {
-  @apply -mx-2 flex items-center mt-6;
+  @apply -mx-2 flex items-start mt-6;
 }
 </style>
diff --git a/frontend/src/shared/form/autocomplete-many-input.vue b/frontend/src/shared/form/autocomplete-many-input.vue
index d14bc9e6db..d8259c3289 100644
--- a/frontend/src/shared/form/autocomplete-many-input.vue
+++ b/frontend/src/shared/form/autocomplete-many-input.vue
@@ -11,7 +11,7 @@
     multiple
     :placeholder="placeholder || ''"
     remote
-    reserve-keyword
+    :reserve-keyword="false"
     :allow-create="allowCreate"
     value-key="id"
     :class="inputClass"
diff --git a/frontend/src/shared/form/autocomplete-one-input.vue b/frontend/src/shared/form/autocomplete-one-input.vue
index 62e51fdae2..a4cfd7700a 100644
--- a/frontend/src/shared/form/autocomplete-one-input.vue
+++ b/frontend/src/shared/form/autocomplete-one-input.vue
@@ -11,7 +11,7 @@
     filterable
     remote
     :allow-create="allowCreate"
-    reserve-keyword
+    :reserve-keyword="false"
     value-key="id"
     :class="inputClass"
   >
diff --git a/frontend/src/shared/form/keywords-input.vue b/frontend/src/shared/form/keywords-input.vue
new file mode 100644
index 0000000000..cc327cdfc9
--- /dev/null
+++ b/frontend/src/shared/form/keywords-input.vue
@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="el-select el-keywords-input-wrapper"
+    @click="focusKeywordInput"
+    :class="focused ? 'el-input is-focus' : ''"
+  >
+    <transition-group>
+      <el-tag
+        v-for="(keyword, idx) in innerKeywords"
+        v-bind="$attrs"
+        :key="keyword"
+        size="small"
+        type="info"
+        effect="light"
+        :closable="!readOnly"
+        :disable-transitions="false"
+        @close="remove(idx)"
+      >
+        {{ keyword }}
+      </el-tag>
+    </transition-group>
+    <input
+      v-if="!readOnly"
+      class="el-keywords-input"
+      :placeholder="placeholder"
+      @input="inputKeyword"
+      :value="newKeyword"
+      @keydown.delete.stop="removeLastKeyword"
+      @keydown="addNew"
+      @blur="addNew"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppKeywordsInput',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    addKeywordOnKeys: {
+      type: Array,
+      default: () => [13, 188, 9]
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String
+  },
+  data() {
+    return {
+      newKeyword: '',
+      innerKeywords: [...this.value],
+      focused: false
+    }
+  },
+  watch: {
+    value() {
+      this.innerKeywords = [...this.value]
+    }
+  },
+  methods: {
+    focusKeywordInput() {
+      if (
+        this.readOnly ||
+        !this.$el.querySelector('.el-keywords-input')
+      ) {
+        return
+      } else {
+        this.$el.querySelector('.el-keywords-input').focus()
+      }
+      this.focused = false
+    },
+    inputKeyword(ev) {
+      this.newKeyword = ev.target.value
+    },
+    addNew(e) {
+      if (
+        e &&
+        !this.addKeywordOnKeys.includes(e.keyCode) &&
+        e.type !== 'blur'
+      ) {
+        return
+      }
+      if (e) {
+        e.stopPropagation()
+        e.preventDefault()
+      }
+      let addSuccess = false
+      if (this.newKeyword.includes(',')) {
+        this.newKeyword.split(',').forEach((item) => {
+          if (this.addKeyword(item.trim())) {
+            addSuccess = true
+          }
+        })
+      } else {
+        if (this.addKeyword(this.newKeyword.trim())) {
+          addSuccess = true
+        }
+      }
+      if (addSuccess) {
+        this.keywordChange()
+        this.newKeyword = ''
+      }
+    },
+    addKeyword(keyword) {
+      keyword = keyword.trim()
+      if (
+        keyword &&
+        !this.innerKeywords.includes(keyword)
+      ) {
+        this.innerKeywords.push(keyword)
+        return true
+      }
+      return false
+    },
+    remove(index) {
+      this.innerKeywords.splice(index, 1)
+      this.keywordChange()
+    },
+    removeLastKeyword() {
+      if (this.newKeyword) {
+        return
+      }
+      this.innerKeywords.pop()
+      this.keywordChange()
+    },
+    keywordChange() {
+      this.$emit('input', this.innerKeywords)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-keywords-input-wrapper {
+  @apply relative text-sm bg-white rounded-md pr-2 pl-1 leading-loose;
+  background-image: none;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  color: #606266;
+  outline: none;
+  transition: border-color 0.2s
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.el-keywords-input {
+  @apply bg-transparent border-none pl-0 ml-2 leading-loose h-10;
+  font-size: inherit;
+  outline: none;
+  width: 200px;
+}
+</style>
diff --git a/frontend/src/shared/shared-module.js b/frontend/src/shared/shared-module.js
index 51434bd731..5080c5f561 100644
--- a/frontend/src/shared/shared-module.js
+++ b/frontend/src/shared/shared-module.js
@@ -16,6 +16,7 @@ import ListItemFile from '@/shared/list/list-item-file.vue'
 import NumberRangeInput from '@/shared/form/number-range-input.vue'
 import AutocompleteOneInput from '@/shared/form/autocomplete-one-input.vue'
 import AutocompleteManyInput from '@/shared/form/autocomplete-many-input.vue'
+import KeywordsInput from '@/shared/form/keywords-input.vue'
 import ViewItemRelationToOne from '@/shared/view/view-item-relation-to-one.vue'
 import ViewItemRelationToMany from '@/shared/view/view-item-relation-to-many.vue'
 import ListItemRelationToOne from '@/shared/list/list-item-relation-to-one.vue'
@@ -52,7 +53,8 @@ export default {
     'app-filter-preview': FilterPreview,
     'app-filter-toggle': FilterToggle,
     'app-avatar': Avatar,
-    'app-alert': Alert
+    'app-alert': Alert,
+    'app-keywords-input': KeywordsInput
   },
 
   filters: [formatDateFilter, formatDatetimeFilter],

From dd2a7997bc5b65a270ceb6ab002b7946a41cf4b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Fri, 26 Aug 2022 16:58:43 +0100
Subject: [PATCH 02/13] Tweak input height

---
 frontend/src/shared/form/keywords-input.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/shared/form/keywords-input.vue b/frontend/src/shared/form/keywords-input.vue
index cc327cdfc9..54a2f9140c 100644
--- a/frontend/src/shared/form/keywords-input.vue
+++ b/frontend/src/shared/form/keywords-input.vue
@@ -137,7 +137,7 @@ export default {
 
 <style lang="scss">
 .el-keywords-input-wrapper {
-  @apply relative text-sm bg-white rounded-md pr-2 pl-1 leading-loose;
+  @apply relative text-sm bg-white rounded-md pr-2 pl-1 h-10;
   background-image: none;
   border: 1px solid #dcdfe6;
   box-sizing: border-box;
@@ -148,7 +148,7 @@ export default {
 }
 
 .el-keywords-input {
-  @apply bg-transparent border-none pl-0 ml-2 leading-loose h-10;
+  @apply bg-transparent border-none pl-0 ml-2 h-10;
   font-size: inherit;
   outline: none;
   width: 200px;

From 03d1ce2a1883d71767cc8dc41f88c834733a4168 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Fri, 26 Aug 2022 17:44:30 +0100
Subject: [PATCH 03/13] Tweak input again

---
 .../eagle-eye/components/eagle-eye-search.vue |  1 -
 frontend/src/shared/form/keywords-input.vue   | 44 +++++++++++--------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index d455438ed5..b68d8c6a55 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -3,7 +3,6 @@
     <div class="relative mx-3">
       <app-keywords-input
         v-model="selectedKeywords"
-        class="inline-input w-full"
         placeholder="Enter keywords, or topics..."
       />
       <span class="text-xs text-gray-400"
diff --git a/frontend/src/shared/form/keywords-input.vue b/frontend/src/shared/form/keywords-input.vue
index 54a2f9140c..3a1456500b 100644
--- a/frontend/src/shared/form/keywords-input.vue
+++ b/frontend/src/shared/form/keywords-input.vue
@@ -4,21 +4,19 @@
     @click="focusKeywordInput"
     :class="focused ? 'el-input is-focus' : ''"
   >
-    <transition-group>
-      <el-tag
-        v-for="(keyword, idx) in innerKeywords"
-        v-bind="$attrs"
-        :key="keyword"
-        size="small"
-        type="info"
-        effect="light"
-        :closable="!readOnly"
-        :disable-transitions="false"
-        @close="remove(idx)"
-      >
-        {{ keyword }}
-      </el-tag>
-    </transition-group>
+    <el-tag
+      v-for="(keyword, idx) in innerKeywords"
+      v-bind="$attrs"
+      :key="keyword"
+      size="small"
+      type="info"
+      effect="light"
+      :disable-transitions="true"
+      :closable="!readOnly"
+      @close="remove(idx)"
+    >
+      {{ keyword }}
+    </el-tag>
     <input
       v-if="!readOnly"
       class="el-keywords-input"
@@ -137,20 +135,30 @@ export default {
 
 <style lang="scss">
 .el-keywords-input-wrapper {
-  @apply relative text-sm bg-white rounded-md pr-2 pl-1 h-10;
+  @apply relative text-sm bg-white rounded-md pr-2 pl-1 flex items-center flex-wrap;
   background-image: none;
   border: 1px solid #dcdfe6;
-  box-sizing: border-box;
+  box-sizing: content-box;
   color: #606266;
   outline: none;
   transition: border-color 0.2s
     cubic-bezier(0.645, 0.045, 0.355, 1);
+  min-height: 38px;
+
+  &.el-select > .el-tag {
+    margin: 4px 0 4px 4px;
+  }
 }
 
 .el-keywords-input {
-  @apply bg-transparent border-none pl-0 ml-2 h-10;
+  @apply bg-transparent border-none pl-0 ml-2 h-full;
   font-size: inherit;
   outline: none;
   width: 200px;
+  min-height: 24px;
+}
+
+.el-keywords-input-list {
+  @apply flex items-center flex-wrap h-full;
 }
 </style>

From c5e01100cd8658ec6b179703257a2fb393494e9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Fri, 26 Aug 2022 17:47:24 +0100
Subject: [PATCH 04/13] Add missing flex-grow

---
 frontend/src/premium/eagle-eye/components/eagle-eye-search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index b68d8c6a55..8aa0c90d8c 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="eagle-eye-search">
-    <div class="relative mx-3">
+    <div class="flex-grow mx-3">
       <app-keywords-input
         v-model="selectedKeywords"
         placeholder="Enter keywords, or topics..."

From 44fd20894eb2b38c97cc5fc7fc2f7dfdbc893689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 11:56:42 +0100
Subject: [PATCH 05/13] Add opacity logic to microcopy

---
 .../eagle-eye/components/eagle-eye-search.vue |  6 +-
 frontend/src/shared/form/keywords-input.vue   | 63 +++++++++++--------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index 8aa0c90d8c..b584fa5b00 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -5,9 +5,6 @@
         v-model="selectedKeywords"
         placeholder="Enter keywords, or topics..."
       />
-      <span class="text-xs text-gray-400"
-        >Press ENTER or comma (,) to separate keywords</span
-      >
     </div>
     <app-eagle-eye-filter />
     <el-button
@@ -46,8 +43,7 @@ export default {
     async doSearch() {
       const filtersToApply = {
         ...this.filter,
-        keywords: this.selectedKeywords
-          .join(',')
+        keywords: this.selectedKeywords.join(',')
       }
       await this.doFetch({
         rawFilter: filtersToApply,
diff --git a/frontend/src/shared/form/keywords-input.vue b/frontend/src/shared/form/keywords-input.vue
index 3a1456500b..f3aac872af 100644
--- a/frontend/src/shared/form/keywords-input.vue
+++ b/frontend/src/shared/form/keywords-input.vue
@@ -1,32 +1,41 @@
 <template>
-  <div
-    class="el-select el-keywords-input-wrapper"
-    @click="focusKeywordInput"
-    :class="focused ? 'el-input is-focus' : ''"
-  >
-    <el-tag
-      v-for="(keyword, idx) in innerKeywords"
-      v-bind="$attrs"
-      :key="keyword"
-      size="small"
-      type="info"
-      effect="light"
-      :disable-transitions="true"
-      :closable="!readOnly"
-      @close="remove(idx)"
+  <div>
+    <div
+      class="el-select el-keywords-input-wrapper"
+      @click="focusKeywordInput"
+      :class="focused ? 'el-input is-focus' : ''"
+    >
+      <el-tag
+        v-for="(keyword, idx) in innerKeywords"
+        v-bind="$attrs"
+        :key="keyword"
+        size="small"
+        type="info"
+        effect="light"
+        :disable-transitions="true"
+        :closable="!readOnly"
+        @close="remove(idx)"
+      >
+        {{ keyword }}
+      </el-tag>
+      <input
+        v-if="!readOnly"
+        class="el-keywords-input"
+        :placeholder="placeholder"
+        @input="inputKeyword"
+        :value="newKeyword"
+        @keydown.delete.stop="removeLastKeyword"
+        @keydown="addNew"
+        @blur="addNew"
+      />
+    </div>
+    <span
+      class="text-xs text-gray-400"
+      :class="
+        newKeyword !== '' ? 'opacity-100' : 'opacity-0'
+      "
+      >Press ENTER or comma (,) to separate keywords</span
     >
-      {{ keyword }}
-    </el-tag>
-    <input
-      v-if="!readOnly"
-      class="el-keywords-input"
-      :placeholder="placeholder"
-      @input="inputKeyword"
-      :value="newKeyword"
-      @keydown.delete.stop="removeLastKeyword"
-      @keydown="addNew"
-      @blur="addNew"
-    />
   </div>
 </template>
 

From 73a1d27e3eb0ed5f92541c3e77a911a58d804673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 12:00:17 +0100
Subject: [PATCH 06/13] Fix alignment

---
 frontend/src/premium/eagle-eye/components/eagle-eye-search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index b584fa5b00..7848191ea6 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -69,6 +69,6 @@ export default {
 
 <style lang="scss">
 .eagle-eye-search {
-  @apply -mx-2 flex items-start mt-6;
+  @apply -mx-3 flex items-start mt-6;
 }
 </style>

From 8d012a3b369593c5bd44d407cc270952448d95d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:23:37 +0100
Subject: [PATCH 07/13] Tweak some margins and alignments

---
 .../premium/eagle-eye/components/eagle-eye-page.vue  |  4 ++--
 .../eagle-eye/components/eagle-eye-sorter.vue        |  2 +-
 frontend/src/shared/form/keywords-input.vue          | 12 +++++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-page.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-page.vue
index 71c059916e..53fc5b5aa9 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-page.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-page.vue
@@ -5,7 +5,7 @@
       <app-eagle-eye-search />
       <div
         v-if="shouldRenderEmptyState"
-        class="flex flex-col items-center justify-center w-full py-14"
+        class="flex flex-col items-center justify-center w-full py-10"
       >
         <img
           src="/images/eagle-eye-empty-state.svg"
@@ -25,7 +25,7 @@
         v-loading="loading"
       ></div>
       <div v-else>
-        <div class="flex justify-between items-center pt-8">
+        <div class="flex justify-between items-center pt-4">
           <app-eagle-eye-counter />
           <app-eagle-eye-sorter
             v-if="activeTab === 'inbox'"
diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-sorter.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-sorter.vue
index f13af72c28..aed3acd0f8 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-sorter.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-sorter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="eagle-eye-sorter" :style="computedWidth">
+  <div class="eagle-eye-sorter -mr-3" :style="computedWidth">
     <el-select
       :value="value"
       popper-class="eagle-eye-popper-class"
diff --git a/frontend/src/shared/form/keywords-input.vue b/frontend/src/shared/form/keywords-input.vue
index f3aac872af..a2087d4bc1 100644
--- a/frontend/src/shared/form/keywords-input.vue
+++ b/frontend/src/shared/form/keywords-input.vue
@@ -3,7 +3,7 @@
     <div
       class="el-select el-keywords-input-wrapper"
       @click="focusKeywordInput"
-      :class="focused ? 'el-input is-focus' : ''"
+      :class="focused ? 'is-focus' : ''"
     >
       <el-tag
         v-for="(keyword, idx) in innerKeywords"
@@ -31,9 +31,7 @@
     </div>
     <span
       class="text-xs text-gray-400"
-      :class="
-        newKeyword !== '' ? 'opacity-100' : 'opacity-0'
-      "
+      :class="focused ? 'opacity-100' : 'opacity-0'"
       >Press ENTER or comma (,) to separate keywords</span
     >
   </div>
@@ -78,8 +76,8 @@ export default {
         return
       } else {
         this.$el.querySelector('.el-keywords-input').focus()
+        this.focused = true
       }
-      this.focused = false
     },
     inputKeyword(ev) {
       this.newKeyword = ev.target.value
@@ -112,6 +110,7 @@ export default {
         this.keywordChange()
         this.newKeyword = ''
       }
+      this.focused = false
     },
     addKeyword(keyword) {
       keyword = keyword.trim()
@@ -157,6 +156,9 @@ export default {
   &.el-select > .el-tag {
     margin: 4px 0 4px 4px;
   }
+  &.is-focus {
+    border: 1px solid #0068bd;
+  }
 }
 
 .el-keywords-input {

From a5193a8d988a91c1f5ec287c68abf684754f3cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:31:51 +0100
Subject: [PATCH 08/13] One more tweak to spacing

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

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-list.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-list.vue
index 8160978410..0c56cfe847 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-list.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="py-6">
+  <div class="pt-2 pb-6">
     <div class="eagle-eye-list">
       <div v-if="count > 0">
         <transition-group name="fade" mode="out-in">

From d87b98d474963dacb269b751956f039381a76407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:34:47 +0100
Subject: [PATCH 09/13] Fix reset filters on change tab

---
 .../src/premium/eagle-eye/components/eagle-eye-counter.vue  | 2 +-
 frontend/src/premium/eagle-eye/eagle-eye-store.js           | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-counter.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-counter.vue
index 0efdb36fec..0ce943721c 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-counter.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-counter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-gray-600 text-sm">
+  <div class="text-gray-600 text-sm" v-if="count > 0">
     {{ count }}
     {{ typeOfPostsFound }} posts
     {{
diff --git a/frontend/src/premium/eagle-eye/eagle-eye-store.js b/frontend/src/premium/eagle-eye/eagle-eye-store.js
index 56354af8c5..e6f18328dd 100644
--- a/frontend/src/premium/eagle-eye/eagle-eye-store.js
+++ b/frontend/src/premium/eagle-eye/eagle-eye-store.js
@@ -315,14 +315,10 @@ export default {
       })
     },
 
-    doChangeActiveTab(
-      { commit, dispatch, getters },
-      activeTab
-    ) {
+    doChangeActiveTab({ commit, dispatch }, activeTab) {
       commit('ACTIVE_TAB_CHANGED', activeTab)
       commit('RESETED')
       const filtersToApply = {
-        ...getters.filter,
         status:
           activeTab === 'inbox' ? undefined : activeTab
       }

From dcf01ff55688122b6ef9031702ed2be1c49a9961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:39:08 +0100
Subject: [PATCH 10/13] Fix missing code from last commit

---
 frontend/src/premium/eagle-eye/eagle-eye-store.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/premium/eagle-eye/eagle-eye-store.js b/frontend/src/premium/eagle-eye/eagle-eye-store.js
index e6f18328dd..7762c283c8 100644
--- a/frontend/src/premium/eagle-eye/eagle-eye-store.js
+++ b/frontend/src/premium/eagle-eye/eagle-eye-store.js
@@ -319,6 +319,8 @@ export default {
       commit('ACTIVE_TAB_CHANGED', activeTab)
       commit('RESETED')
       const filtersToApply = {
+        keywords: undefined,
+        nDays: 1,
         status:
           activeTab === 'inbox' ? undefined : activeTab
       }

From 7f5953328ce2629e9dac25f17bea7eedd247f02b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:44:59 +0100
Subject: [PATCH 11/13] Fix reseting keywords on eagle-eye-search

---
 .../eagle-eye/components/eagle-eye-search.vue        | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index 7848191ea6..7fa83ce9e5 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -27,7 +27,8 @@ export default {
   },
   computed: {
     ...mapGetters({
-      filter: 'eagleEye/filter'
+      filter: 'eagleEye/filter',
+      activeTab: 'eagleEye/activeTab'
     })
   },
   data() {
@@ -35,6 +36,15 @@ export default {
       selectedKeywords: []
     }
   },
+  watch: {
+    activeTab: {
+      handler: (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          this.selectedKeywords = []
+        }
+      }
+    }
+  },
   methods: {
     ...mapActions({
       doPopulate: 'eagleEye/doPopulate',

From e2851cd9b495ec556a61287dc73a044ce1c997f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:48:51 +0100
Subject: [PATCH 12/13] Remove arrow function

---
 frontend/src/premium/eagle-eye/components/eagle-eye-search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
index 7fa83ce9e5..5ff88241ab 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-search.vue
@@ -38,7 +38,7 @@ export default {
   },
   watch: {
     activeTab: {
-      handler: (newValue, oldValue) => {
+      handler(newValue, oldValue) {
         if (newValue !== oldValue) {
           this.selectedKeywords = []
         }

From 1c7accd2a0957399381fc520899517ca7331e565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Bal=C3=A7a?= <mario.balca@gmail.com>
Date: Mon, 29 Aug 2022 13:55:54 +0100
Subject: [PATCH 13/13] Last fix

---
 .../eagle-eye/components/eagle-eye-filter.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-filter.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-filter.vue
index a5954f8ab0..6ea42188fe 100644
--- a/frontend/src/premium/eagle-eye/components/eagle-eye-filter.vue
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-filter.vue
@@ -130,6 +130,25 @@ export default {
       return activeFilters
     }
   },
+  watch: {
+    filter: {
+      handler(newValue, oldValue) {
+        if (newValue.nDays !== oldValue.nDays) {
+          this.nDays = newValue.nDays
+        }
+        this.platforms = newValue.platforms
+          ? newValue.platforms
+          : ['hacker_news', 'devto']
+      },
+      deep: true
+    },
+    'filter.platforms': {
+      handler(newValue) {
+        this.platforms = [...newValue]
+      },
+      deep: true
+    }
+  },
   methods: {
     ...mapActions({
       doReset: 'eagleEye/doReset',