From e60309af780d8b0de2184dbf81d20e0f9bdfc68a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 15:05:28 +0300
Subject: [PATCH] =?UTF-8?q?refactor(GetFonts):=20centralize=20filterManage?=
 =?UTF-8?q?r/sortStore=20=E2=86=92=20fontStore=20bridge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the duplicated $effect blocks that mapped filterManager and sortStore
into fontStore params out of Search, FontSearch and FilterControls into a
single $effect.root in features/GetFonts/model/state/bindings.svelte.ts.

Consumers now bind to the manager/store directly; the bridge is installed
once via a side-effect import from the feature barrel.
---
 src/features/GetFonts/model/index.ts          |  6 ++++
 .../GetFonts/model/state/bindings.svelte.ts   | 36 +++++++++++++++++++
 .../ui/FiltersControl/FilterControls.svelte   | 11 +-----
 .../ComparisonView/ui/Search/Search.svelte    | 15 ++------
 .../ui/FontSearch/FontSearch.svelte           |  8 -----
 5 files changed, 46 insertions(+), 30 deletions(-)
 create mode 100644 src/features/GetFonts/model/state/bindings.svelte.ts

diff --git a/src/features/GetFonts/model/index.ts b/src/features/GetFonts/model/index.ts
index 2c8f3c8..d3ed458 100644
--- a/src/features/GetFonts/model/index.ts
+++ b/src/features/GetFonts/model/index.ts
@@ -29,6 +29,12 @@ export {
     filterManager,
 } from './state/manager.svelte';
 
+/**
+ * Side-effect import: installs the global filterManager+sortStore → fontStore
+ * bridge on first import of this feature barrel. No exports.
+ */
+import './state/bindings.svelte';
+
 /**
  * Sorting logic
  */
diff --git a/src/features/GetFonts/model/state/bindings.svelte.ts b/src/features/GetFonts/model/state/bindings.svelte.ts
new file mode 100644
index 0000000..c5f4905
--- /dev/null
+++ b/src/features/GetFonts/model/state/bindings.svelte.ts
@@ -0,0 +1,36 @@
+/**
+ * Bridges feature-level UI state (filterManager + sortStore) to the
+ * entity-level fontStore query params.
+ *
+ * Centralizing this here means consumers (Search, FontSearch,
+ * FilterControls, etc.) bind to the manager/store directly without
+ * each repeating the same mapping effect. The bridge is a singleton
+ * concern — it tracks singleton state and writes to a singleton query
+ * observer, so it lives at module scope, not in any individual widget.
+ */
+
+import { fontStore } from '$entities/Font';
+import { untrack } from 'svelte';
+import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
+import { sortStore } from '../store/sortStore.svelte';
+import { filterManager } from './manager.svelte';
+
+$effect.root(() => {
+    /**
+     * Mirror filter selections + debounced search query into fontStore params.
+     * untrack the write so fontStore's internal $state reads don't feed back
+     * into this effect's dependency graph.
+     */
+    $effect(() => {
+        const params = mapManagerToParams(filterManager);
+        untrack(() => fontStore.setParams(params));
+    });
+
+    /**
+     * Mirror sort selection into fontStore.
+     */
+    $effect(() => {
+        const apiSort = sortStore.apiValue;
+        untrack(() => fontStore.setSort(apiSort));
+    });
+});
diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
index 5187324..e9af16b 100644
--- a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
+++ b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
@@ -4,16 +4,12 @@
     Sits below the filter list, separated by a top border.
 -->
 <script lang="ts">
-import { fontStore } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
 import { Button } from '$shared/ui';
 import { Label } from '$shared/ui';
 import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
-import {
-    getContext,
-    untrack,
-} from 'svelte';
+import { getContext } from 'svelte';
 import {
     SORT_OPTIONS,
     filterManager,
@@ -31,11 +27,6 @@ const {
     class: className,
 }: Props = $props();
 
-$effect(() => {
-    const apiSort = sortStore.apiValue;
-    untrack(() => fontStore.setSort(apiSort));
-});
-
 const responsive = getContext<ResponsiveManager>('responsive');
 const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
 
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index 305b12b..c496a1d 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -1,21 +1,12 @@
 <!--
     Component: Search
     Typeface search input for the comparison view.
-    Updates the global filterManager query to filter the font list.
+    Writes through filterManager; the global bridge in $features/GetFonts
+    propagates the value into fontStore.
 -->
 <script lang="ts">
-import { fontStore } from '$entities/Font';
-import {
-    filterManager,
-    mapManagerToParams,
-} from '$features/GetFonts';
+import { filterManager } from '$features/GetFonts';
 import { SearchBar } from '$shared/ui';
-import { untrack } from 'svelte';
-
-$effect(() => {
-    const params = mapManagerToParams(filterManager);
-    untrack(() => fontStore.setParams(params));
-});
 </script>
 
 <div class="p-6 border-b border-black/5">
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index 30c6ca4..9b2fc73 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -3,12 +3,10 @@
     Provides a search input and filtration for fonts
 -->
 <script lang="ts">
-import { fontStore } from '$entities/Font';
 import {
     FilterControls,
     Filters,
     filterManager,
-    mapManagerToParams,
 } from '$features/GetFonts';
 import { springySlideFade } from '$shared/lib';
 import {
@@ -16,7 +14,6 @@ import {
     SearchBar,
 } from '$shared/ui';
 import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal';
-import { untrack } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import {
     Tween,
@@ -34,11 +31,6 @@ interface Props {
 
 let { showFilters = $bindable(true) }: Props = $props();
 
-$effect(() => {
-    const params = mapManagerToParams(filterManager);
-    untrack(() => fontStore.setParams(params));
-});
-
 const transform = new Tween(
     { scale: 1, rotate: 0 },
     { duration: 250, easing: cubicOut },