Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 73 insertions, 0 deletions

diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
new file mode 100644
index 00000000..4d5a1aec
--- /dev/null
+++ b/src/components/search_bar/search_bar.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="search-bar-container">
+      <i
+        v-if="loading"
+        class="icon-spin4 finder-icon animate-spin-slow"
+      />
+      <a
+        v-if="hidden"
+        href="#"
+        :title="$t('nav.search')"
+      ><i
+        class="button-icon icon-search"
+        @click.prevent.stop="toggleHidden"
+      /></a>
+      <template v-else>
+        <input
+          id="search-bar-input"
+          ref="searchInput"
+          v-model="searchTerm"
+          class="search-bar-input"
+          :placeholder="$t('nav.search')"
+          type="text"
+          @keyup.enter="find(searchTerm)"
+        >
+        <button
+          class="btn search-button"
+          @click="find(searchTerm)"
+        >
+          <i class="icon-search" />
+        </button>
+        <i
+          class="button-icon icon-cancel"
+          @click.prevent.stop="toggleHidden"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script src="./search_bar.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.search-bar-container {
+  max-width: 100%;
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
+  justify-content: flex-end;
+
+  .search-bar-input,
+  .search-button {
+    height: 29px;
+  }
+
+  .search-bar-input {
+    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
+    max-width: calc(100% - 30px - 30px - 20px);
+  }
+
+  .search-button {
+    margin-left: .5em;
+    margin-right: .5em;
+  }
+
+  .icon-cancel {
+    cursor: pointer;
+  }
+}
+
+</style>