ClearFiltersButton

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:

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:

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>
+  )
+}

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 />

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