From 812edd4a9e8035e3af4afbf7270ae67d55693b63 Mon Sep 17 00:00:00 2001
From: julihereu <julia.h.reuter@gmail.com>
Date: Wed, 1 Jan 2025 22:20:26 +0000
Subject: [PATCH] ClearFiltersButton

---
 locales/de/common.yml                         |  2 ++
 locales/en/common.yml                         |  2 ++
 .../templates/ClearFiltersButton.tsx          | 24 +++++++++++++++++++
 src/components/templates/TemplateFilters.tsx  |  7 +++++-
 src/components/templates/UserFilter.tsx       |  1 +
 5 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/components/templates/ClearFiltersButton.tsx

diff --git a/locales/de/common.yml b/locales/de/common.yml
index 5a9fbd6..5a25d76 100644
--- a/locales/de/common.yml
+++ b/locales/de/common.yml
@@ -45,6 +45,8 @@ CategoriesFilter:
   inputPlaceholder: Nach Kategorien filtern
 ClearAllButton:
   title: Alles löschen
+ClearFiltersButton:
+  title: Filter löschen
 ColorSchemeToggle:
   buttonToggleTheme: Farbschema wechseln
 CopyButton:
diff --git a/locales/en/common.yml b/locales/en/common.yml
index ae41166..42d2cea 100644
--- a/locales/en/common.yml
+++ b/locales/en/common.yml
@@ -45,6 +45,8 @@ CategoriesFilter:
   inputPlaceholder: Filter by categories
 ClearAllButton:
   title: Clear all
+ClearFiltersButton:
+  title: Clear filters
 ColorSchemeToggle:
   buttonToggleTheme: Toggle theme
 CopyButton:
diff --git a/src/components/templates/ClearFiltersButton.tsx b/src/components/templates/ClearFiltersButton.tsx
new file mode 100644
index 0000000..066784e
--- /dev/null
+++ b/src/components/templates/ClearFiltersButton.tsx
@@ -0,0 +1,24 @@
+import { ActionIcon } from "@mantine/core"
+import { Eraser as ClearAllIcon } from "lucide-react"
+import { useFilter } from "~/contexts/FilterContext"
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+
+export const ClearFiltersButton = () => {
+  const { t } = useSiteTranslation()
+  const filter = useFilter()
+
+  return (
+    <ActionIcon
+      title={t("ClearFiltersButton.title")}
+      variant="default"
+      onClick={() => {
+        filter.setCategories([])
+        filter.setLanguage("")
+        filter.setUsername("")
+      }}
+      aria-label="Clear filters"
+    >
+      <ClearAllIcon size={20} />
+    </ActionIcon>
+  )
+}
diff --git a/src/components/templates/TemplateFilters.tsx b/src/components/templates/TemplateFilters.tsx
index 8e73052..9094fec 100644
--- a/src/components/templates/TemplateFilters.tsx
+++ b/src/components/templates/TemplateFilters.tsx
@@ -2,6 +2,7 @@ import { Paper, Stack } from "@mantine/core"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
 import { PanelToolbar } from "../template/PanelToolbar"
 import { CategoriesFilter } from "./CategoriesFilter"
+import { ClearFiltersButton } from "./ClearFiltersButton"
 import { LanguageFilter } from "./LanguageFilter"
 import { TemplatesSorting } from "./TemplatesSorting"
 import { UserFilter } from "./UserFilter"
@@ -18,7 +19,11 @@ export const TemplateFilters = () => {
       w="100%"
       style={{ flexDirection: "column" }}
     >
-      <PanelToolbar title={t("TemplateFilters.filtersTitle")} />
+      <PanelToolbar
+        title={t("TemplateFilters.filtersTitle")}
+        actions={<ClearFiltersButton />}
+        actionsPosition="right"
+      />
       <Stack p="xs" pb="xl" gap="xs">
         <LanguageFilter />
         <CategoriesFilter />
diff --git a/src/components/templates/UserFilter.tsx b/src/components/templates/UserFilter.tsx
index a310572..3ee1da0 100644
--- a/src/components/templates/UserFilter.tsx
+++ b/src/components/templates/UserFilter.tsx
@@ -19,6 +19,7 @@ export const UserFilter = () => {
       searchValue={prefix}
       onSearchChange={(value) => setPrefix(value)}
       data={data?.users.map((user) => user.username!) ?? []}
+      value={filter.username === "" ? null : filter.username}
       onChange={(value) => filter.setUsername(value ?? "")}
       searchable
       clearable