From eed3339b0d3158ac1ae2ffdc39158814f5e1b251 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 1 Feb 2026 11:57:56 +0300
Subject: [PATCH] feat(FontSearch): refactor component styles

---
 .../ui/FontSearch/FontSearch.svelte           | 93 ++++++++++++-------
 1 file changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index fd58cc1..dd01b1a 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -16,7 +16,8 @@ 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 FunnelIcon from '@lucide/svelte/icons/funnel';
+
+import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal';
 import { onMount } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import {
@@ -63,35 +64,43 @@ function toggleFilters() {
 }
 </script>
 
-<div class="flex flex-col gap-2 relative">
-    <SearchBar
-        id="font-search"
-        class="w-full"
-        placeholder="Search fonts by name..."
-        bind:value={filterManager.queryValue}
-        bind:isOpen
-    >
-        <SuggestedFonts />
-    </SearchBar>
+<div class="flex flex-col gap-3 relative">
+    <div class="relative">
+        <SearchBar
+            id="font-search"
+            class="w-full"
+            placeholder="search_typefaces..."
+            label="query_input"
+            bind:value={filterManager.queryValue}
+            bind:isOpen
+        />
 
-    <div class="absolute right-5 top-10 translate-y-[-50%] pl-5 border-l-2">
-        <div style:transform="scale({transform.current.scale}) rotate({transform.current.rotate}deg)">
-            <Button
-                class={cn(
-                    'cursor-pointer will-change-transform hover:bg-inherit hover:*:stroke-indigo-500',
-                    showFilters ? 'hover:*:stroke-indigo-500/80' : 'hover:*:stroke-indigo-500',
-                )}
-                variant="ghost"
-                size="icon"
-                onclick={toggleFilters}
-            >
-                <FunnelIcon
-                    class={cn(
-                        'size-8 stroke-indigo-600/50 transition-all duration-150',
-                        showFilters ? 'stroke-indigo-600' : 'stroke-indigo-600/50',
-                    )}
-                />
-            </Button>
+        <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>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -100,9 +109,29 @@ function toggleFilters() {
             transition:springySlideFade|local={slideConfig}
             class="will-change-[height,opacity] contain-layout overflow-hidden"
         >
-            <div class="grid gap-1 grid-cols-[repeat(auto-fit,minmax(8em,14em))]">
-                <Filters />
-                <FilterControls class="ml-auto py-1" />
+            <div
+                class="
+                    p-4 rounded-xl
+                    backdrop-blur-md bg-white/80
+                    border border-gray-300/50
+                    shadow-[0_1px_3px_rgba(0,0,0,0.04)]
+                "
+            >
+                <div class="flex items-center gap-2.5 mb-4 opacity-70">
+                    <div class="w-1 h-1 rounded-full bg-gray-900"></div>
+                    <div class="w-px h-2.5 bg-gray-400/50"></div>
+                    <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+                        filter_params
+                    </span>
+                </div>
+
+                <div class="grid gap-3 grid-cols-[repeat(auto-fit,minmax(8em,14em))]">
+                    <Filters />
+                </div>
+
+                <div class="mt-4 pt-4 border-t border-gray-300/40">
+                    <FilterControls class="ml-auto" />
+                </div>
             </div>
         </div>
     {/if}