Merge remote-tracking branch 'origin/better-search-inputs' into refactor/standarize-layout-gaps

frontend/src/components/Gallery/AppBar/Base.vue

@@ -39,10 +39,9 @@ const { calculatedWidth } = calculateMainLayoutWidth();
       <filter-btn />
     </template>
     <filter-text-field v-if="!xs && showFilterBar" />
-    <search-text-field v-if="!xs && showSearchBar" />
+    <search-text-field v-if="showSearchBar" />
     <slot name="content" />
     <template #append>
-      <search-btn v-if="!xs && showSearchBar" />
       <slot name="append" />
       <selecting-btn />
       <gallery-view-btn />
@@ -52,7 +51,6 @@ const { calculatedWidth } = calculateMainLayoutWidth();
   <filter-drawer
     :show-platforms-filter="showPlatformsFilter"
     :show-filter-bar="showFilterBar"
-    :show-search-bar="showSearchBar"
   />
   <char-index-bar />
 </template>

frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import romApi from "@/services/api/rom";
 import storeRoms from "@/stores/roms";
 import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
-import { inject, onMounted, watch } from "vue";
+import { inject, nextTick, onMounted, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { useDisplay } from "vuetify";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { debounce } from "lodash";
 
 // Props
 const { xs } = useDisplay();
@@ -39,7 +39,7 @@ async function fetchRoms() {
     });
 }
 
-async function refetchRoms() {
+const refetchRoms = debounce(async () => {
   if (searchTerm.value === null) return;
 
   // Auto hide android keyboard
@@ -64,6 +64,10 @@ async function refetchRoms() {
     .finally(() => {
       galleryFilterStore.activeFilterDrawer = false;
     });
+}, 500);
+
+function clearInput() {
+  searchTerm.value = null;
 }
 
 const filterToSetFilter: Record<FilterType, Function> = {
@@ -119,11 +123,13 @@ watch(
     :density="xs ? 'comfortable' : 'default'"
     clearable
     autofocus
-    @keyup.enter="refetchRoms"
+    hide-details
+    rounded="0"
+    :label="t('common.search')"
     v-model="searchTerm"
     :disabled="fetchingRoms"
-    :label="t('common.search')"
-    hide-details
-    class="bg-toplayer"
+    @keyup.enter="refetchRoms"
+    @click:clear="clearInput"
+    @update:model-value="nextTick(refetchRoms)"
   />
 </template>

frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue

@@ -5,15 +5,13 @@ import FilterMatchedBtn from "@/components/Gallery/AppBar/common/FilterDrawer/Fi
 import FilterFavouritesBtn from "@/components/Gallery/AppBar/common/FilterDrawer/FilterFavouritesBtn.vue";
 import FilterDuplicatesBtn from "@/components/Gallery/AppBar/common/FilterDrawer/FilterDuplicatesBtn.vue";
 import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
-import SearchTextField from "@/components/Gallery/AppBar/Search/SearchTextField.vue";
-import SearchBtn from "@/components/Gallery/AppBar/Search/SearchBtn.vue";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import storeRoms from "@/stores/roms";
 import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, nextTick, onMounted, ref, watch } from "vue";
+import { inject, nextTick, onMounted, watch } from "vue";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
 
@@ -22,18 +20,15 @@ withDefaults(
   defineProps<{
     showPlatformsFilter?: boolean;
     showFilterBar?: boolean;
-    showSearchBar?: boolean;
   }>(),
   {
     showPlatformsFilter: false,
     showFilterBar: false,
-    showSearchBar: false,
   },
 );
 
 const { t } = useI18n();
 const { xs, smAndDown } = useDisplay();
-const viewportWidth = ref(window.innerWidth);
 const galleryFilterStore = storeGalleryFilter();
 const romsStore = storeRoms();
 const platformsStore = storePlatforms();
@@ -193,18 +188,6 @@ onMounted(async () => {
           <filter-text-field />
         </v-list-item>
       </template>
-      <template v-if="showSearchBar && xs">
-        <v-list-item>
-          <v-row no-gutters>
-            <v-col>
-              <search-text-field />
-            </v-col>
-            <v-col cols="auto">
-              <search-btn />
-            </v-col>
-          </v-row>
-        </v-list-item>
-      </template>
       <v-list-item>
         <filter-unmatched-btn />
         <filter-matched-btn class="mt-2" />
@@ -220,7 +203,6 @@ onMounted(async () => {
           :label="t('common.platform')"
           variant="outlined"
           density="comfortable"
-          class="my-2"
           :items="filterPlatforms"
           @update:model-value="nextTick(() => emitter?.emit('filter', null))"
         >

frontend/src/components/Gallery/AppBar/common/FilterTextField.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import storeGalleryFilter from "@/stores/galleryFilter";
+import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { debounce } from "lodash";
 import type { Emitter } from "mitt";
@@ -7,12 +8,16 @@ import { storeToRefs } from "pinia";
 import { inject, nextTick, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { useDisplay } from "vuetify";
 
 // Props
 const { t } = useI18n();
+const { xs } = useDisplay();
 const router = useRouter();
 const galleryFilterStore = storeGalleryFilter();
+const romsStore = storeRoms();
 const { searchTerm } = storeToRefs(galleryFilterStore);
+const { fetchingRoms } = storeToRefs(romsStore);
 const emitter = inject<Emitter<Events>>("emitter");
 
 const filterRoms = debounce(() => {
@@ -21,7 +26,7 @@ const filterRoms = debounce(() => {
   emitter?.emit("filter", null);
 }, 500);
 
-function clear() {
+function clearInput() {
   searchTerm.value = null;
 }
 
@@ -47,13 +52,17 @@ watch(
 
 <template>
   <v-text-field
-    v-model="searchTerm"
-    prepend-inner-icon="mdi-filter-outline"
-    :label="t('common.filter')"
+    :density="xs ? 'comfortable' : 'default'"
+    clearable
+    autofocus
     hide-details
     rounded="0"
-    clearable
-    @click:clear="clear"
+    :label="t('common.filter')"
+    v-model="searchTerm"
+    :disabled="fetchingRoms"
+    @keyup.enter="filterRoms"
+    prepend-inner-icon="mdi-filter-outline"
+    @click:clear="clearInput"
     @update:model-value="nextTick(filterRoms)"
   />
 </template>

frontend/src/components/Gallery/Skeleton.vue

@@ -11,7 +11,7 @@ const { currentView } = storeToRefs(galleryViewStore);
 <template>
   <v-row no-gutters>
     <v-col>
-      <v-row v-if="currentView != 2" no-gutters class="mx-1 mt-3">
+      <v-row v-if="currentView != 2" no-gutters class="mx-1 mt-3 mr-14">
         <v-col
           v-for="_ in 60"
           class="pa-1 align-self-end"