From 2cd38797b9673b5e38494aa280b4461311097b81 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 2 Feb 2026 12:20:01 +0300
Subject: [PATCH] feat(FontSearch): add IconButton instead of regular Button
 and delete unused code

---
 .../ui/FontSearch/FontSearch.svelte           | 48 ++++++++-----------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index dd01b1a..e8596c7 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -1,22 +1,21 @@
 <!--
     Component: FontSearch
-
-    Combines search input with font list display
+    Provides a search input and filtration for fonts
 -->
 <script lang="ts">
 import { unifiedFontStore } from '$entities/Font';
 import {
     FilterControls,
     Filters,
-    SuggestedFonts,
     filterManager,
     mapManagerToParams,
 } from '$features/GetFonts';
 import { springySlideFade } from '$shared/lib';
-import { Button } from '$shared/shadcn/ui/button';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import { SearchBar } from '$shared/ui';
-
+import {
+    IconButton,
+    SearchBar,
+} from '$shared/ui';
 import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal';
 import { onMount } from 'svelte';
 import { cubicOut } from 'svelte/easing';
@@ -27,11 +26,13 @@ import {
 import { type SlideParams } from 'svelte/transition';
 
 interface Props {
+    /**
+     * Controllable flag to show/hide filters (bindable)
+     */
     showFilters?: boolean;
-    isOpen?: boolean;
 }
 
-let { showFilters = $bindable(false), isOpen = $bindable(false) }: Props = $props();
+let { showFilters = $bindable(false) }: Props = $props();
 
 onMount(() => {
     /**
@@ -72,33 +73,22 @@ function toggleFilters() {
             placeholder="search_typefaces..."
             label="query_input"
             bind:value={filterManager.queryValue}
-            bind:isOpen
         />
 
         <div class="absolute right-4 top-1/2 translate-y-[-50%] z-10">
             <div class="flex items-center gap-2">
                 <div class="w-px h-5 bg-gray-300/60"></div>
                 <div style:transform="scale({transform.current.scale})">
-                    <Button
-                        class={cn(
-                            'w-9 h-9 rounded-lg flex items-center justify-center',
-                            'transition-all duration-200',
-                            'hover:bg-gray-100',
-                            showFilters
-                                ? 'bg-gray-100 ring-1 ring-gray-300/50'
-                                : 'bg-transparent',
-                        )}
-                        variant="ghost"
-                        size="icon"
-                        onclick={toggleFilters}
-                    >
-                        <SlidersHorizontalIcon
-                            class={cn(
-                                'size-4 transition-colors duration-200',
-                                showFilters ? 'stroke-gray-900' : 'stroke-gray-500',
-                            )}
-                        />
-                    </Button>
+                    <IconButton onclick={toggleFilters}>
+                        {#snippet icon({ className })}
+                            <SlidersHorizontalIcon
+                                class={cn(
+                                    className,
+                                    showFilters ? 'stroke-gray-900 stroke-3' : 'stroke-gray-500',
+                                )}
+                            />
+                        {/snippet}
+                    </IconButton>
                 </div>
             </div>
         </div>