Use <input type="search"> for search bar

CHANGELOG.md

@@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 - Remove invisible characters from display names.
-- Use `/api/v1/{status_id}/thread` API endpoint to load threads.
+- Use `/api/v1/statuses/{status_id}/thread` API endpoint to load threads.
+- Use `<input type="search">` for search bar.
 
 ## [1.13.0] - 2023-02-06
 

src/components/Search.vue

@@ -1,6 +1,6 @@
 <template>
   <form class="search" @submit.prevent="search()">
-    <input type="text" placeholder="Search..." v-model="q">
+    <input type="search" placeholder="Search..." v-model="q">
     <button v-if="q" type="button" @click="clear()">
       <img :src="require('@/assets/feather/delete.svg')">
     </button>
@@ -38,7 +38,8 @@ function search() {
   padding: 7px 15px;
 }
 
-input {
+input[type="search"] {
+  appearance: none;
   background-color: transparent;
   border: none;
   box-sizing: border-box;
@@ -48,6 +49,10 @@ input {
   padding: 0;
 }
 
+input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+}
+
 button {
   border-radius: 0 $btn-border-radius $btn-border-radius 0;
   font-size: 15px;