When searching for torrents we can now edit the search query and search again

src/components/TorrentList.vue

@@ -1,8 +1,25 @@
 <template>
   <div v-if="show">
-    <h2 class="title">torrents: {{ query }}</h2>
+    <h2 class="torrentHeader-text">Searching for: {{ editedSearchQuery || query }}</h2>
+<!--     <div class="torrentHeader">
+      <span class="torrentHeader-text">Searching for:&nbsp;</span>
+
+
+      <span id="search" :contenteditable="editSearchQuery ? true : false" class="torrentHeader-text editable">{{ editedSearchQuery || query }}</span>
+
+
+      <svg v-if="!editSearchQuery" class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
+        <use xlink:href="#icon_radar"></use>
+      </svg>
+
+      <svg v-else class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
+        <use xlink:href="#icon_check"></use>
+      </svg>
+
+    </div> -->
 
     <div v-if="listLoaded">
+      <div v-if="torrents.length > 0">
         <ul class="filter">
           <li class="filter-item" v-for="(item, index) in release_types" @click="applyFilter(item, index)" :class="{'active': item === selectedRelaseType}">{{ item }}</li>
         </ul>
@@ -37,6 +54,39 @@
             </td>
           </tr>
         </table>
+
+        <div style="
+          display: flex;
+          justify-content: center;
+          margin: 1rem;
+        ">
+          <seasonedButton @click="ostekake">Edit search query</seasonedButton>
+        </div>
+      </div>
+
+    <div v-else style="display: flex;
+                       padding-bottom: 2rem;
+                       justify-content: center;
+                       flex-direction: column;
+                       width: 100%;
+                       align-items: center;">
+      <h2>No results found</h2>
+      <br />
+
+      <div style="display: flex;
+                  width: 70%;
+                  justify-content: center;"
+            v-if="editSearchQuery">
+
+        <seasonedInput text="Torrent query" icon="_torrents" @inputValue="(val) => editedSearchQuery = val"/>
+
+        <div style="height: 45px; width: 5px;"></div>
+
+        <seasonedButton @click="fetchTorrents(editedSearchQuery)">Search</seasonedButton>
+      </div>
+
+      <seasonedButton @click="toggleEditSearchQuery" :active="editSearchQuery ? true : false">Edit search query</seasonedButton>
+    </div>
     </div>
     <i v-else class="torrentloader"></i>
   </div>