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>