refactor(features, widgets): update ThemeManager, FontSampler, FontSearch, and SampleList

src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte

@@ -3,36 +3,57 @@
     Wraps SampleList with a Section component
 -->
 <script lang="ts">
-import { handleTitleStatusChanged } from '$entities/Breadcrumb';
+import { NavigationWrapper } from '$entities/Breadcrumb';
+import { unifiedFontStore } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import { Section } from '$shared/ui';
 import {
-    type Snippet,
-    getContext,
-} from 'svelte';
+    Label,
+    Section,
+} from '$shared/ui';
+import { getContext } from 'svelte';
+import { layoutManager } from '../../model';
 import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
 import SampleList from '../SampleList/SampleList.svelte';
 
+interface Props {
+    /**
+     * Section index
+     */
+    index: number;
+}
+
+const { index }: Props = $props();
+
 const responsive = getContext<ResponsiveManager>('responsive');
 </script>
 
-<Section
-    class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-    index={3}
-    id="sample_set"
-    onTitleStatusChange={handleTitleStatusChanged}
-    title="Sample Set"
-    headerTitle="visual_output"
-    headerSubtitle="render_engine:"
->
-    {#snippet headerContent()}
-        <LayoutSwitch />
-    {/snippet}
+<NavigationWrapper index={2} title="Samples">
+    {#snippet content(registerAction)}
+        <Section
+            class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
+            {index}
+            id="sample_set"
+            title="Sample Set"
+            headerTitle="visual_output"
+            headerSubtitle="items_total: {unifiedFontStore.pagination.total ?? 0}"
+            headerAction={registerAction}
+        >
+            {#snippet headerContent()}
+                <div class="flex items-center gap-3 md:gap-4">
+                    <div class="hidden md:flex items-center gap-2 mr-4">
+                        <Label variant="muted" size="sm">view_mode: </Label>
+                        <Label variant="default" size="sm" bold>{layoutManager.mode}</Label>
+                    </div>
+                    <LayoutSwitch />
+                </div>
+            {/snippet}
 
-    {#snippet content({ className })}
-        <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-            <SampleList />
-        </div>
+            {#snippet content({ className })}
+                <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                    <SampleList />
+                </div>
+            {/snippet}
+        </Section>
     {/snippet}
-</Section>
+</NavigationWrapper>