From c90a258f6cdd319aaad0ce252e31a639cf0b287b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 28 May 2026 21:36:23 +0300
Subject: [PATCH] feat(font-list): show empty state when search yields no fonts

Adds an `empty` snippet prop to FontVirtualList and supplies it from the
sidebar FontList. Settled queries with zero results now render a centered
"No typefaces found" label instead of a blank list area.
---
 .../Font/ui/FontVirtualList/FontVirtualList.svelte    | 11 +++++++++++
 .../ComparisonView/ui/FontList/FontList.svelte        |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 957c86d..0d21abe 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -40,6 +40,10 @@ interface Props extends
      * Skeleton snippet
      */
     skeleton?: Snippet;
+    /**
+     * Empty-state snippet rendered when the query settled with zero fonts
+     */
+    empty?: Snippet;
 }
 
 let {
@@ -47,6 +51,7 @@ let {
     onVisibleItemsChange,
     weight,
     skeleton,
+    empty,
     ...rest
 }: Props = $props();
 
@@ -59,6 +64,8 @@ let isCatchingUp = $state(false);
 
 const showInitialSkeleton = $derived(!!skeleton && isLoading && fontCatalogStore.fonts.length === 0);
 const showCatchupSkeleton = $derived(!!skeleton && isCatchingUp);
+// Settled query with no matches — empty state replaces the (otherwise blank) list.
+const showEmpty = $derived(!!empty && !isLoading && !isCatchingUp && fontCatalogStore.fonts.length === 0);
 
 function handleInternalVisibleChange(items: UnifiedFont[]) {
     visibleFonts = items;
@@ -163,6 +170,10 @@ function handleNearBottom(_lastVisibleIndex: number) {
         <div class="overflow-hidden h-full" transition:fade={{ duration: 300 }}>
             {@render skeleton()}
         </div>
+    {:else if showEmpty && empty}
+        <div class="h-full" transition:fade={{ duration: 200 }}>
+            {@render empty()}
+        </div>
     {:else}
         <!-- VirtualList persists during pagination - no destruction/recreation -->
         <VirtualList
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 0d2b94c..4659390 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -104,6 +104,12 @@ function isFontReady(font: UnifiedFont): boolean {
             gap={2}
             class="bg-transparent min-h-0 h-full scroll-stable py-2 pl-6 pr-4"
         >
+            {#snippet empty()}
+                <div class="px-6 py-12 flex items-center justify-center">
+                    <Label variant="muted" size="sm">No typefaces found</Label>
+                </div>
+            {/snippet}
+
             {#snippet skeleton()}
                 <div class="py-2.5 md:py-3 px-7">
                     {#each { length: 50 } as _, index (index)}