From 17c10df1e8b9ed064141f983995c7979e0a341ba Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Tue, 2 Apr 2024 03:13:15 +0200
Subject: [PATCH] Using keydown instead of search event in filters for browser
 compatability, added search button.

---
 components/actors/actors.vue   | 11 +++++++++--
 components/filters/filters.vue | 22 ++++++++++++++++++++++
 components/scenes/scenes.vue   | 11 +++++++++--
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/components/actors/actors.vue b/components/actors/actors.vue
index 28dfb89..57283d0 100644
--- a/components/actors/actors.vue
+++ b/components/actors/actors.vue
@@ -1,14 +1,21 @@
 <template>
 	<div class="page">
 		<Filters :results="total">
-			<div class="filter">
+			<div class="filter search-container">
+				<!-- onsearch not compatible with FF and Safari -->
 				<input
 					v-model="q"
 					type="search"
 					placeholder="Search actors"
 					class="input search"
-					@search="search"
+					@keydown.enter="search"
 				>
+
+				<Icon
+					icon="search"
+					class="search-button"
+					@click="search"
+				/>
 			</div>
 
 			<GenderFilter
diff --git a/components/filters/filters.vue b/components/filters/filters.vue
index add5bdd..c9161a3 100644
--- a/components/filters/filters.vue
+++ b/components/filters/filters.vue
@@ -85,6 +85,28 @@ function toggleFilters(state) {
 	}
 }
 
+.filter.search-container {
+	display: flex;
+	align-items: stretch;
+
+	.input {
+		flex-grow: 1;
+	}
+
+	.icon {
+		height: auto;
+		display: flex;
+		align-items: center;
+		padding-left: .5rem;
+		fill: var(--shadow);
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--primary);
+		}
+	}
+}
+
 .filter-mode {
 	width: 100%;
 	color: var(--shadow);
diff --git a/components/scenes/scenes.vue b/components/scenes/scenes.vue
index 44228af..7dc3a18 100644
--- a/components/scenes/scenes.vue
+++ b/components/scenes/scenes.vue
@@ -7,14 +7,21 @@
 				v-if="showFilters"
 				:loading="loading"
 			>
-				<div class="filter">
+				<div class="filter search-container">
+					<!-- onsearch not compatible with FF and Safari -->
 					<input
 						v-model="filters.search"
 						type="search"
 						placeholder="Search scenes"
 						class="search input"
-						@search="search"
+						@keydown.enter="search"
 					>
+
+					<Icon
+						icon="search"
+						class="search-button"
+						@click="search"
+					/>
 				</div>
 
 				<TagsFilter