Selectively clear search text or filters (#289 -> #326)

* Keeping input on Show All button press

* Clarifying text

* Fixing spacing

* Adding dedicated button layout

* translating and fixing

* Linting fix

* Deduplication

---------

Co-authored-by: Rob B <[email protected]>

Author: rhit-silkaijr

frontend/src/lib/components/mods-list/ModsList.svelte

@@ -163,6 +163,16 @@
     }
   }
 
+  $: userHasSearchText = $search != '';
+  $: userHasSearchFilters = $filter != filterOptions[0];
+
+  const removeSearchText = () => {
+    $search = '';
+  };
+  const removeSearchFilters = () => {
+    $filter = filterOptions[0];
+  };
+
   export let hideMods: boolean = false;
 </script>
 
@@ -184,16 +194,37 @@
         {#if displayMods.length === 0 && !fetchingMods && !filteringMods && $hasFetchedMods}
           <div class="flex flex-col h-full items-center justify-center">
             {#if mods.length !== 0}
-              <p class="text-xl text-center text-surface-400-700-token"><T defaultValue="No mods matching your filters" keyName="mods-list.no-mods-filtered"/></p>
-              <button
-                class="btn variant-filled-primary mt-4"
-                on:click={() => {
-                  $search = '';
-                  $filter = filterOptions[0];
-                }}
-              >
-                <T defaultValue="Show all" keyName="mods-list.show-all"/>
-              </button>
+              <p class="text-xl text-center text-surface-400-700-token"><T defaultValue="No mods matching your search" keyName="mods-list.no-mods-filtered"/></p>
+              {#if userHasSearchFilters}
+                {#if userHasSearchText}
+                  <button
+                    class="btn variant-filled-primary mt-4"
+                    on:click={removeSearchFilters}
+                  >
+                    <T defaultValue="Remove search filters" keyName="mods-list.remove-search-filters"/>
+                  </button>
+                  <button
+                    class="btn variant-filled-primary mt-4"
+                    on:click={removeSearchText}
+                  >
+                    <T defaultValue="Remove search text" keyName="mods-list.remove-search-text"/>
+                  </button>
+                {:else}
+                  <button
+                    class="btn variant-filled-primary mt-4"
+                    on:click={removeSearchFilters}
+                  >
+                    <T defaultValue="Show all" keyName="mods-list.show-all"/>
+                  </button>
+                {/if}
+              {:else}
+                <button
+                  class="btn variant-filled-primary mt-4"
+                  on:click={removeSearchText}
+                >
+                  <T defaultValue="Show all" keyName="mods-list.show-all"/>
+                </button>
+              {/if}
             {:else}
               <p class="text-xl text-center text-surface-400-700-token"><T defaultValue="No mods found" keyName="mods-list.no-mods-found"/></p>
             {/if}