From 2508168a3ebc3842fc0a2749b8f80560a772786a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:17:50 +0300
Subject: [PATCH] feat(Section): add id prop and pass it to onTitleStatusChange
 callback

---
 src/shared/ui/Section/Section.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index f8fa12c..9412495 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -14,6 +14,10 @@ import {
 import { Footnote } from '..';
 
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * ID of the section
+     */
+    id?: string;
     /**
      * Additional CSS classes to apply to the section container.
      */
@@ -40,16 +44,22 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      * @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?: (index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) => () => void;
+    onTitleStatusChange?: (
+        index: number,
+        isPast: boolean,
+        title?: Snippet<[{ className?: string }]>,
+        id?: string,
+    ) => () => void;
     /**
      * Snippet for the section content
      */
     children?: Snippet;
 }
 
-const { class: className, title, icon, description, index = 0, onTitleStatusChange, children }: Props = $props();
+const { class: className, title, icon, description, index = 0, onTitleStatusChange, id, children }: Props = $props();
 
 let titleContainer = $state<HTMLElement>();
 const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
@@ -68,7 +78,7 @@ $effect(() => {
 
         if (isPast !== isScrolledPast) {
             isScrolledPast = isPast;
-            cleanup = onTitleStatusChange?.(index, isPast, title);
+            cleanup = onTitleStatusChange?.(index, isPast, title, id);
         }
     }, {
         // Set threshold to 0 to trigger exactly when the last pixel leaves
@@ -84,6 +94,7 @@ $effect(() => {
 </script>
 
 <section
+    id={id}
     class={cn(
         'flex flex-col',
         className,