feat(Section) add headerContent snippet

src/shared/ui/Section/Section.svelte

@@ -14,6 +14,7 @@ import {
 
 import SectionHeader from './SectionHeader/SectionHeader.svelte';
 import SectionTitle from './SectionTitle/SectionTitle.svelte';
+import type { TitleStatusChangeHandler } from './types';
 
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /**
@@ -40,23 +41,16 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     index?: number;
     /**
      * Callback function to notify when the title visibility status changes
-     *
-     * @param index - Index of the section
-     * @param isPast - Whether the section is past the current scroll position
-     * @param title - Snippet for a title itself
-     * @param id - ID of the section
-     * @returns Cleanup callback
      */
-    onTitleStatusChange?: (
+    onTitleStatusChange?: TitleStatusChangeHandler;
-        index: number,
-        isPast: boolean,
-        title?: Snippet<[{ className?: string }]>,
-        id?: string,
-    ) => () => void;
     /**
      * Snippet for the section content
      */
     content?: Snippet<[{ className?: string }]>;
+    /**
+     * Snippet for the section header content
+     */
+    headerContent?: Snippet<[{ className?: string }]>;
 }
 
 const {
@@ -64,11 +58,11 @@ const {
     title,
     headerTitle,
     headerSubtitle,
-    description,
     index = 0,
     onTitleStatusChange,
     id,
     content,
+    headerContent,
 }: Props = $props();
 
 const flyParams: FlyParams = {
@@ -86,11 +80,14 @@ const flyParams: FlyParams = {
     in:fly={flyParams}
     out:fly={flyParams}
 >
-    <div>
+    <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 md:mb-12 gap-4 md:gap-6">
-        {#if headerTitle}
+        <div>
-            <SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />
+            {#if headerTitle}
-        {/if}
+                <SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />
-        <SectionTitle text={title} />
+            {/if}
+            <SectionTitle text={title} />
+        </div>
+        {@render headerContent?.({})}
     </div>
     {@render content?.({})}
 </section>