src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte

@@ -1,22 +1,21 @@
 <!--
     Component: FontSearch
-
+    Provides a search input and filtration for fonts
-    Combines search input with font list display
 -->
 <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
+                    <IconButton onclick={toggleFilters}>
-                        class={cn(
+                        {#snippet icon({ className })}
-                            'w-9 h-9 rounded-lg flex items-center justify-center',
+                            <SlidersHorizontalIcon
-                            'transition-all duration-200',
+                                class={cn(
-                            'hover:bg-gray-100',
+                                    className,
-                            showFilters
+                                    showFilters ? 'stroke-gray-900 stroke-3' : 'stroke-gray-500',
-                                ? 'bg-gray-100 ring-1 ring-gray-300/50'
+                                )}
-                                : 'bg-transparent',
+                            />
-                        )}
+                        {/snippet}
-                        variant="ghost"
+                    </IconButton>
-                        size="icon"
-                        onclick={toggleFilters}
-                    >
-                        <SlidersHorizontalIcon
-                            class={cn(
-                                'size-4 transition-colors duration-200',
-                                showFilters ? 'stroke-gray-900' : 'stroke-gray-500',
-                            )}
-                        />
-                    </Button>
                 </div>
             </div>
         </div>