From f67d929dce4976a2029d2e8ae0b8b664323522a6 Mon Sep 17 00:00:00 2001
From: Paulo Antonio Leandro Florentino de Carvalho <pauloantoniolfc@gmail.com>
Date: Sat, 6 May 2023 01:05:32 -0300
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20component=20inputSea?=
 =?UTF-8?q?rch,=20now=20use=20the=20x=20to=20clean=20input=20val?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

in achievement page was an input without type search, the update make a
new type of input and improve a11y
---
 src/components/Input.svelte         | 12 +++++++
 src/components/InputSearch.svelte   | 51 +++++++++++++++++++++++++++++
 src/routes/achievement/index.svelte | 23 +++++--------
 3 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 src/components/InputSearch.svelte

diff --git a/src/components/Input.svelte b/src/components/Input.svelte
index 142500099..82c83e1af 100644
--- a/src/components/Input.svelte
+++ b/src/components/Input.svelte
@@ -44,8 +44,20 @@
     {pattern}
     on:change
     on:input={handleInput}
+    on:focus={() => { dispatch('focus'); }}
+    on:blur={() => { dispatch('blur'); }}
     class={`w-full ${
       icon ? 'pl-12' : 'pl-4'
     } min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none`}
   />
 </div>
+
+<style lang="postcss">
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration, 
+  input[type="search"]::-webkit-search-results-button, 
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/InputSearch.svelte b/src/components/InputSearch.svelte
new file mode 100644
index 000000000..289b44fe3
--- /dev/null
+++ b/src/components/InputSearch.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { mdiClose } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+
+  import Icon from './Icon.svelte';
+  import Input from './Input.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let className = '';
+  export let placeholder = '';
+  export let value = '';
+
+  let showInputButtonCancel = false;
+
+  function cleanFilter() {
+    value = '';
+    const element = document.querySelector('.input-search-component input');
+    setTimeout(() => { element.focus(); }, 100);
+
+    dispatch('input');
+  }
+
+  function validateInputButtonCancel(event) {
+    if (event.type === 'focus') { showInputButtonCancel = true }
+    else if (nameFilter === '') setTimeout(() => { showInputButtonCancel = false }, 100);
+    
+    dispatch(event.type);
+  }
+</script>
+
+<div class="flex-1 relative">
+  <Input
+    className="input-search-component {className}"
+    type="search"
+    {placeholder}
+    on:input={() => { dispatch('input'); }}
+    on:focus={validateInputButtonCancel}
+    on:blur={validateInputButtonCancel}
+    bind:value={value}
+  />
+  {#if showInputButtonCancel}
+    <span 
+      on:click={cleanFilter}
+      aria-hidden="true"
+      class="w-12 h-12 flex justify-center items-center absolute right-[0.6rem] top-[0.3rem] cursor-pointer"
+    >
+      <Icon size="0.85" path={mdiClose} color="white"/>
+    </span>
+  {/if}
+</div>
diff --git a/src/routes/achievement/index.svelte b/src/routes/achievement/index.svelte
index 181d8a1a0..60822a590 100644
--- a/src/routes/achievement/index.svelte
+++ b/src/routes/achievement/index.svelte
@@ -6,7 +6,7 @@
   import { locale, t } from 'svelte-i18n';
   import { onMount, tick } from 'svelte';
   import debounce from 'lodash.debounce';
-  import { mdiFilter, mdiOpenInNew } from '@mdi/js';
+  import { mdiFilter, mdiOpenInNew, mdiClose } from '@mdi/js';
 
   import Check from '../../components/Check.svelte';
   import Checkbox from '../../components/Checkbox.svelte';
@@ -14,6 +14,7 @@
   import { readSave, updateSave, fromRemote } from '../../stores/saveManager';
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
+  import InputSearch from '../../components/InputSearch.svelte';
   import Select from '../../components/Select.svelte';
   import { pushToast } from '../../stores/toast';
   import Ad from '../../components/Ad.svelte';
@@ -405,19 +406,12 @@
       </div>
     </div>
     {#if showFilter}
-      <div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
-        <div
-          class="flex flex-1 relative items-center bg-background rounded-2xl h-14
-       focus-within:border-primary border-2 border-transparent ease-in duration-100"
-          style="min-height: 3.5rem;"
-        >
-          <input
-            placeholder={$t('achievement.search')}
-            on:input={search}
-            bind:value={nameFilter}
-            class="pl-4 w-full min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none"
-          />
-        </div>
+      <div class="mb-2 flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-2">
+        <InputSearch
+          placeholder={$t('achievement.search')} 
+          on:input={search}
+          bind:value={nameFilter}
+        />
         <Select
           multiselect
           options={versions}
@@ -439,6 +433,7 @@
     <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
       <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
         {#each categories as category, index (category.id)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
             on:click={() => changeCategory(category.id, index)}

From 73d14b2ec095449a4c373cff3652c7a422effe9d Mon Sep 17 00:00:00 2001
From: Paulo Antonio Leandro Florentino de Carvalho <pauloantoniolfc@gmail.com>
Date: Sat, 6 May 2023 01:08:23 -0300
Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20remove=20import?=
 =?UTF-8?q?=20of=20an=20icon=20not=20used?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/achievement/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/achievement/index.svelte b/src/routes/achievement/index.svelte
index 60822a590..5ed1c5324 100644
--- a/src/routes/achievement/index.svelte
+++ b/src/routes/achievement/index.svelte
@@ -6,7 +6,7 @@
   import { locale, t } from 'svelte-i18n';
   import { onMount, tick } from 'svelte';
   import debounce from 'lodash.debounce';
-  import { mdiFilter, mdiOpenInNew, mdiClose } from '@mdi/js';
+  import { mdiFilter, mdiOpenInNew } from '@mdi/js';
 
   import Check from '../../components/Check.svelte';
   import Checkbox from '../../components/Checkbox.svelte';

From cd7ff6ef7a7d5744f7669f0f9c044c4d72d2283c Mon Sep 17 00:00:00 2001
From: Paulo Antonio Leandro Florentino de Carvalho <pauloantoniolfc@gmail.com>
Date: Wed, 5 Jul 2023 19:21:10 -0300
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20empty=20line?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE: 🧨 no
---
 src/components/Input.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Input.svelte b/src/components/Input.svelte
index 82c83e1af..8de38b56b 100644
--- a/src/components/Input.svelte
+++ b/src/components/Input.svelte
@@ -60,4 +60,4 @@
   input[type="search"]::-webkit-search-results-decoration {
     display: none;
   }
-</style>
\ No newline at end of file
+</style>

From affa2ac4d17436540778c431ca4953ef5ee60fd3 Mon Sep 17 00:00:00 2001
From: Paulo Antonio <pauloantoniolfc@gmail.com>
Date: Wed, 5 Jul 2023 19:32:22 -0300
Subject: [PATCH 4/4] Update Input.svelte

empty line
---
 src/components/Input.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Input.svelte b/src/components/Input.svelte
index 8de38b56b..b07e74d8f 100644
--- a/src/components/Input.svelte
+++ b/src/components/Input.svelte
@@ -61,3 +61,4 @@
     display: none;
   }
 </style>
+