From ecb4bea64288f5fe507e41058547c53fd3bf43e7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 24 Jan 2026 15:33:12 +0300
Subject: [PATCH] feat(FlterControls): enhance control with ux effects

---
 .../ui/FiltersControl/FilterControls.svelte   | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
index 2b74696..d50e84c 100644
--- a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
+++ b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
@@ -5,15 +5,42 @@
 -->
 <script lang="ts">
 import { Button } from '$shared/shadcn/ui/button';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import Rotate from '@lucide/svelte/icons/rotate-ccw';
+import { cubicOut } from 'svelte/easing';
+import { Tween } from 'svelte/motion';
 import { filterManager } from '../../model';
+
+interface Props {
+    class?: string;
+}
+
+const { class: className }: Props = $props();
+
+const transform = new Tween(
+    { scale: 1, rotate: 0 },
+    { duration: 150, easing: cubicOut },
+);
+
+function handleClick() {
+    filterManager.deselectAllGlobal();
+
+    transform.set({ scale: 0.98, rotate: 1 }).then(() => {
+        transform.set({ scale: 1, rotate: 0 });
+    });
+}
 </script>
 
-<div class="flex flex-row gap-2">
+<div
+    class={cn('flex flex-row gap-2', className)}
+    style:transform="scale({transform.current.scale}) rotate({transform.current.rotate}deg)"
+>
     <Button
-        variant="outline"
-        class="flex-1 cursor-pointer"
-        onclick={filterManager.deselectAllGlobal}
+        variant="ghost"
+        class="group flex flex-1 cursor-pointer gap-1"
+        onclick={handleClick}
     >
+        <Rotate class="size-4 group-hover:-rotate-180 transition-transform duration-300" />
         Reset
     </Button>
 </div>