From 0d572708c0b5311e3077aeaef42d5e851e18f12e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 6 Feb 2026 15:56:48 +0300
Subject: [PATCH] chore: replace custom components with footnote and logo
 components

---
 .../ui/FontSampler/FontSampler.svelte         | 31 ++++++++++---------
 src/routes/Page.svelte                        |  9 +++---
 src/shared/ui/Section/Section.svelte          | 17 ++++++----
 .../ui/FontSearch/FontSearch.svelte           | 13 ++++----
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 9eee90e..c4bc81f 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -11,6 +11,7 @@ import {
 import { controlManager } from '$features/SetupFont';
 import {
     ContentEditable,
+    Footnote,
     // IconButton,
 } from '$shared/ui';
 // import XIcon from '@lucide/svelte/icons/x';
@@ -66,13 +67,13 @@ function removeSample() {
 >
     <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between">
         <div class="flex items-center gap-2 sm:gap-2.5">
-            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
+            <Footnote>
                 typeface_{String(index).padStart(3, '0')}
-            </span>
+            </Footnote>
             <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
-            <span class="font-mono text-[9px] sm:text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
+            <Footnote class="tracking-[0.15em] font-bold text-gray-900">
                 {font.name}
-            </span>
+            </Footnote>
         </div>
 
         <!--
@@ -101,20 +102,20 @@ function removeSample() {
     </div>
 
     <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto">
-        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
+        <Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
             SZ:{fontSize}PX
-        </span>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
-        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+        </Footnote>
+        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
+        <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
             WGT:{fontWeight}
-        </span>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
-        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+        </Footnote>
+        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
+        <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
             LH:{lineHeight?.toFixed(2)}
-        </span>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
-        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+        </Footnote>
+        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
+        <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
             LTR:{letterSpacing}
-        </span>
+        </Footnote>
     </div>
 </div>
diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index ff1c888..71eecfb 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -5,7 +5,10 @@
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import { Section } from '$shared/ui';
+import {
+    Logo,
+    Section,
+} from '$shared/ui';
 import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
 import { FontSearch } from '$widgets/FontSearch';
 import { SampleList } from '$widgets/SampleList';
@@ -52,9 +55,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
                 Project_Codename
             </span>
         {/snippet}
-        <h2 class={cn('font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}>
-            GLYPHDIFF
-        </h2>
+        <Logo />
     </Section>
     <!--
         <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index 22ee69e..f8fa12c 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -11,6 +11,7 @@ import {
     type FlyParams,
     fly,
 } from 'svelte/transition';
+import { Footnote } from '..';
 
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /**
@@ -91,17 +92,21 @@ $effect(() => {
     out:fly={flyParams}
 >
     <div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}>
-        <div class="flex items-center gap-2 sm:gap-3 opacity-60">
+        <div class="flex items-center gap-2 sm:gap-3">
             {#if icon}
-                {@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1' })}
-                <div class="w-px h-2.5 sm:h-3 bg-gray-400/50"></div>
+                {@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1 opacity-60' })}
+                <div class="w-px h-2.5 sm:h-3 bg-gray-300/60"></div>
             {/if}
             {#if description}
-                {@render description({ className: 'font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
+                <Footnote>
+                    {#snippet render({ class: className })}
+                        {@render description({ className })}
+                    {/snippet}
+                </Footnote>
             {:else if typeof index === 'number'}
-                <span class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600">
+                <Footnote>
                     Component_{String(index).padStart(3, '0')}
-                </span>
+                </Footnote>
             {/if}
         </div>
 
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index bab8a35..54e0afc 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -13,6 +13,7 @@ import {
 import { springySlideFade } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
+    Footnote,
     IconButton,
     SearchBar,
 } from '$shared/ui';
@@ -107,14 +108,12 @@ function toggleFilters() {
                     shadow-[0_1px_3px_rgba(0,0,0,0.04)]
                 "
             >
-                <div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm: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] sm:text-[10px] uppercase tracking-[0.2em] text-gray-500 font-medium"
-                    >
+                <div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
+                    <div class="w-1 h-1 rounded-full bg-gray-900 opacity-70"></div>
+                    <div class="w-px h-2.5 bg-gray-300/60"></div>
+                    <Footnote>
                         filter_params
-                    </span>
+                    </Footnote>
                 </div>
 
                 <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">