refactor(ui): update shared components and add ControlGroup, SidebarContainer

src/shared/ui/Section/Section.svelte

@@ -3,66 +3,73 @@
     Provides a container for a page widget with snippets for a title
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import type { HTMLAttributes } from 'svelte/elements';
 import {
     type FlyParams,
     fly,
 } from 'svelte/transition';
-
 import SectionHeader from './SectionHeader/SectionHeader.svelte';
 import SectionTitle from './SectionTitle/SectionTitle.svelte';
-import type { TitleStatusChangeHandler } from './types';
 
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /**
-     * ID of the section
+     * Section ID
      */
     id?: string;
     /**
-     * Additional CSS classes to apply to the section container.
+     * CSS classes
      */
     class?: string;
     /**
-     * Title of the section
+     * Section title
      */
     title: string;
     /**
-     * Snippet for a title description
+     * Breadcrumb title
+     */
+    breadcrumbTitle?: string;
+    /**
+     * Description snippet
      */
     description?: Snippet<[{ className?: string }]>;
+    /**
+     * Header title
+     */
     headerTitle?: string;
+    /**
+     * Header subtitle
+     */
     headerSubtitle?: string;
     /**
-     * Index of the section
+     * Header action callback
+     */
+    headerAction?: (node: HTMLElement) => void;
+    /**
+     * Section index
      */
     index?: number;
     /**
-     * Callback function to notify when the title visibility status changes
-     */
-    onTitleStatusChange?: TitleStatusChangeHandler;
-    /**
-     * Snippet for the section content
+     * Content snippet
      */
     content?: Snippet<[{ className?: string }]>;
     /**
-     * Snippet for the section header content
+     * Header content snippet
      */
     headerContent?: Snippet<[{ className?: string }]>;
 }
 
-const {
+let {
     class: className,
     title,
     headerTitle,
     headerSubtitle,
+    headerContent,
+    headerAction = () => {},
     index = 0,
-    onTitleStatusChange,
     id,
     content,
-    headerContent,
 }: Props = $props();
 
 const flyParams: FlyParams = {
@@ -76,11 +83,14 @@ const flyParams: FlyParams = {
 
 <section
     {id}
-    class="w-full max-w-7xl mx-auto px-4 md:px-6 pb-32 md:pb-48"
+    class="w-full max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-16 {className}"
     in:fly={flyParams}
     out:fly={flyParams}
 >
-    <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 md:mb-12 gap-4 md:gap-6">
+    <div
+        use:headerAction
+        class="flex flex-col md:flex-row md:items-end justify-between mb-8 md:mb-12 gap-4 md:gap-6"
+    >
         <div>
             {#if headerTitle}
                 <SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />

src/shared/ui/Section/SectionHeader/SectionHeader.svelte

@@ -7,10 +7,26 @@ import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Label } from '$shared/ui';
 
 interface Props {
+    /**
+     * Section index
+     */
     index: string | number;
+    /**
+     * Section title
+     */
     title: string;
+    /**
+     * Section subtitle
+     */
     subtitle?: string;
+    /**
+     * Pulse animation
+     * @default false
+     */
     pulse?: boolean;
+    /**
+     * CSS classes
+     */
     class?: string;
 }
 

src/shared/ui/Section/SectionSeparator/SectionSeparator.svelte

@@ -6,6 +6,10 @@
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 
 interface Props {
+    /**
+     * CSS classes
+     * @default ''
+     */
     class?: string;
 }
 const { class: className = '' }: Props = $props();

src/shared/ui/Section/SectionTitle/SectionTitle.svelte

@@ -4,6 +4,9 @@
 -->
 <script lang="ts">
 interface Props {
+    /**
+     * Title text
+     */
     text?: string;
 }