refactor(breadcrumb): relocate Breadcrumb slice from entities to features

Breadcrumb is not a business aggregate — it is a scroll-tracking navigation capability (NavigationWrapper registers page sections into a store), so it belongs in the features layer, not entities. Move the whole slice and repoint its three widget consumers. entities/ now holds only Font, a true aggregate.
2026-05-31 19:30:56 +03:00
parent 42bcc915c7
commit 36673597f7
15 changed files with 5 additions and 5 deletions
@@ -0,0 +1,65 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import BreadcrumbHeader from './BreadcrumbHeader.svelte';
+
+const { Story } = defineMeta({
+    title: 'Entities/BreadcrumbHeader',
+    component: BreadcrumbHeader,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Fixed header that slides in when the user scrolls past tracked page sections. Reads `scrollBreadcrumbsStore.scrolledPastItems` — renders nothing when the list is empty. Requires the `responsive` context provided by `Providers`.',
+            },
+            story: { inline: false },
+        },
+        layout: 'fullscreen',
+    },
+    argTypes: {},
+});
+</script>
+
+<script>
+import Providers from '$shared/lib/storybook/Providers.svelte';
+import BreadcrumbHeaderSeeded from './BreadcrumbHeaderSeeded.svelte';
+</script>
+
+<Story
+    name="With Breadcrumbs"
+    parameters={{
+        docs: {
+            description: {
+                story:
+                    'Three sections are registered with the breadcrumb store. The story scrolls the iframe so the IntersectionObserver marks them as scrolled-past, revealing the fixed header.',
+            },
+        },
+    }}
+>
+    {#snippet template()}
+        <Providers>
+            <BreadcrumbHeaderSeeded />
+        </Providers>
+    {/snippet}
+</Story>
+
+<Story
+    name="Empty"
+    parameters={{
+        docs: {
+            description: {
+                story:
+                    'No sections registered — BreadcrumbHeader renders nothing. This is the initial state before the user scrolls past any tracked section.',
+            },
+        },
+    }}
+>
+    {#snippet template()}
+        <Providers>
+            <div style="padding: 2rem; color: #888; font-size: 0.875rem;">
+                BreadcrumbHeader renders nothing when scrolledPastItems is empty.
+            </div>
+            <BreadcrumbHeader />
+        </Providers>
+    {/snippet}
+</Story>
@@ -0,0 +1,85 @@
+<!--
+    Component: BreadcrumbHeader
+    Fixed header for breadcrumbs navigation for sections in the page
+-->
+<script lang="ts">
+import type { ResponsiveManager } from '$shared/lib';
+import {
+    Button,
+    Label,
+    Logo,
+} from '$shared/ui';
+import { getContext } from 'svelte';
+import { cubicOut } from 'svelte/easing';
+import { slide } from 'svelte/transition';
+import {
+    type BreadcrumbItem,
+    scrollBreadcrumbsStore,
+} from '../../model';
+
+const breadcrumbs = $derived(scrollBreadcrumbsStore.scrolledPastItems);
+const responsive = getContext<ResponsiveManager>('responsive');
+
+function handleClick(item: BreadcrumbItem) {
+    scrollBreadcrumbsStore.scrollTo(item.index);
+}
+
+function createButtonText(item: BreadcrumbItem) {
+    const index = String(item.index + 1).padStart(2, '0');
+    if (responsive.isMobileOrTablet) {
+        return index;
+    }
+
+    return `${index} // ${item.title}`;
+}
+</script>
+
+{#if breadcrumbs.length > 0}
+    <div
+        transition:slide={{ duration: 200 }}
+        class="
+            fixed top-0 left-0 right-0
+            h-14
+            md:h-16 px-4 md:px-6 lg:px-8
+            flex items-center justify-between
+            z-40
+            surface-floating bg-surface/90 dark:bg-dark-bg/90
+            border-x-0 border-t-0
+        "
+    >
+        <div class="max-w-8xl px-4 sm:px-6 h-full w-full flex items-center justify-between gap-2 sm:gap-4">
+            <Logo />
+
+            <nav class="flex items-center overflow-x-auto scrollbar-hide">
+                {#each breadcrumbs as item, _ (item.index)}
+                    {@const active = scrollBreadcrumbsStore.activeIndex === item.index}
+                    {@const text = createButtonText(item)}
+                    <div class="ml-1 md:ml-4" transition:slide={{ duration: 200, axis: 'x', easing: cubicOut }}>
+                        <Button
+                            class="uppercase"
+                            variant="tertiary"
+                            size="xs"
+                            {active}
+                            onclick={() => handleClick(item)}
+                        >
+                            <Label class="text-inherit">
+                                {text}
+                            </Label>
+                        </Button>
+                    </div>
+                {/each}
+            </nav>
+        </div>
+    </div>
+{/if}
+
+<style>
+/* Hide scrollbar but keep functionality */
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+</style>
@@ -0,0 +1,11 @@
+import { render } from '@testing-library/svelte';
+import BreadcrumbHeader from './BreadcrumbHeader.svelte';
+
+const context = new Map([['responsive', { isMobile: false, isMobileOrTablet: false }]]);
+
+describe('BreadcrumbHeader', () => {
+    it('renders nothing when no sections have been scrolled past', () => {
+        const { container } = render(BreadcrumbHeader, { context });
+        expect(container.firstElementChild).toBeNull();
+    });
+});
@@ -0,0 +1,49 @@
+<script>
+import { onMount } from 'svelte';
+import { scrollBreadcrumbsStore } from '../../model';
+import BreadcrumbHeader from './BreadcrumbHeader.svelte';
+
+const sections = [
+    { index: 100, title: 'Introduction' },
+    { index: 101, title: 'Typography' },
+    { index: 102, title: 'Spacing' },
+];
+
+/** @type {HTMLDivElement} */
+let container;
+
+onMount(() => {
+    for (const section of sections) {
+        const el = /** @type {HTMLElement} */ (container.querySelector(`[data-story-index="${section.index}"]`));
+        scrollBreadcrumbsStore.add({ index: section.index, title: section.title, element: el }, 96);
+    }
+
+    /*
+     * Scroll past the sections so IntersectionObserver marks them as
+     * scrolled-past, making scrolledPastItems non-empty and the header visible.
+     */
+    setTimeout(() => {
+        window.scrollTo({ top: 2000, behavior: 'instant' });
+    }, 100);
+
+    return () => {
+        for (const { index } of sections) {
+            scrollBreadcrumbsStore.remove(index);
+        }
+        window.scrollTo({ top: 0, behavior: 'instant' });
+    };
+});
+</script>
+
+<div bind:this={container} style="height: 2400px; padding-top: 900px;">
+    {#each sections as section}
+        <div
+            data-story-index={section.index}
+            style="height: 400px; padding: 2rem; background: #f5f5f5; margin-bottom: 1rem;"
+        >
+            {section.title} — scroll up to see the breadcrumb header
+        </div>
+    {/each}
+</div>
+
+<BreadcrumbHeader />
@@ -0,0 +1,109 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import NavigationWrapper from './NavigationWrapper.svelte';
+
+const { Story } = defineMeta({
+    title: 'Entities/NavigationWrapper',
+    component: NavigationWrapper,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Thin wrapper that registers an HTML section with `scrollBreadcrumbsStore` via a Svelte use-directive action. Has no visual output of its own — renders `{@render content(registerBreadcrumb)}` where `registerBreadcrumb` is the action to attach with `use:`. On destroy the section is automatically removed from the store.',
+            },
+            story: { inline: false },
+        },
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        index: {
+            control: { type: 'number', min: 0 },
+            description: 'Unique index used for ordering in the breadcrumb trail',
+        },
+        title: {
+            control: 'text',
+            description: 'Display title shown in the breadcrumb header',
+        },
+        offset: {
+            control: { type: 'number', min: 0 },
+            description: 'Scroll offset in pixels to account for sticky headers',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import type { ComponentProps } from 'svelte';
+</script>
+
+<Story
+    name="Single Section"
+    args={{ index: 0, title: 'Introduction', offset: 96 }}
+    parameters={{
+        docs: {
+            description: {
+                story:
+                    'A single section registered with NavigationWrapper. The `content` snippet receives the `register` action and applies it via `use:register`.',
+            },
+        },
+    }}
+>
+    {#snippet template(args: ComponentProps<typeof NavigationWrapper>)}
+        <NavigationWrapper {...args}>
+            {#snippet content(register)}
+                <section use:register style="padding: 2rem; background: #f5f5f5; min-height: 200px;">
+                    <p style="font-size: 0.875rem; color: #555;">
+                        Section registered as <strong>{args.title}</strong> at index {args.index}. Scroll past this
+                        section to see it appear in the breadcrumb header.
+                    </p>
+                </section>
+            {/snippet}
+        </NavigationWrapper>
+    {/snippet}
+</Story>
+
+<Story
+    name="Multiple Sections"
+    parameters={{
+        docs: {
+            description: {
+                story:
+                    'Three sequential sections each wrapped in NavigationWrapper with distinct indices and titles. Demonstrates how the breadcrumb trail builds as the user scrolls.',
+            },
+        },
+    }}
+>
+    {#snippet template()}
+        <div style="display: flex; flex-direction: column; gap: 0;">
+            <NavigationWrapper index={0} title="Introduction" offset={96}>
+                {#snippet content(register)}
+                    <section use:register style="padding: 2rem; background: #f5f5f5; min-height: 300px;">
+                        <h2 style="margin: 0 0 0.5rem;">Introduction</h2>
+                        <p style="font-size: 0.875rem; color: #555;">
+                            Registered as section 0. Scroll down to build the breadcrumb trail.
+                        </p>
+                    </section>
+                {/snippet}
+            </NavigationWrapper>
+
+            <NavigationWrapper index={1} title="Typography" offset={96}>
+                {#snippet content(register)}
+                    <section use:register style="padding: 2rem; background: #ebebeb; min-height: 300px;">
+                        <h2 style="margin: 0 0 0.5rem;">Typography</h2>
+                        <p style="font-size: 0.875rem; color: #555;">Registered as section 1.</p>
+                    </section>
+                {/snippet}
+            </NavigationWrapper>
+
+            <NavigationWrapper index={2} title="Spacing" offset={96}>
+                {#snippet content(register)}
+                    <section use:register style="padding: 2rem; background: #e0e0e0; min-height: 300px;">
+                        <h2 style="margin: 0 0 0.5rem;">Spacing</h2>
+                        <p style="font-size: 0.875rem; color: #555;">Registered as section 2.</p>
+                    </section>
+                {/snippet}
+            </NavigationWrapper>
+        </div>
+    {/snippet}
+</Story>
@@ -0,0 +1,44 @@
+<!--
+    Component: NavigationWrapper
+    Wrapper for breadcrumb registration with scroll tracking
+-->
+<script lang="ts">
+import { type Snippet } from 'svelte';
+import {
+    type NavigationAction,
+    scrollBreadcrumbsStore,
+} from '../../model';
+
+interface Props {
+    /**
+     * Navigation index
+     */
+    index: number;
+    /**
+     * Navigation title
+     */
+    title: string;
+    /**
+     * Scroll offset
+     * @default 96
+     */
+    offset?: number;
+    /**
+     * Content snippet
+     */
+    content: Snippet<[action: NavigationAction]>;
+}
+
+const { index, title, offset = 96, content }: Props = $props();
+
+function registerBreadcrumb(node: HTMLElement) {
+    scrollBreadcrumbsStore.add({ index, title, element: node }, offset);
+    return {
+        destroy() {
+            scrollBreadcrumbsStore.remove(index);
+        },
+    };
+}
+</script>
+
+{@render content(registerBreadcrumb)}
@@ -0,0 +1,2 @@
+export { default as BreadcrumbHeader } from './BreadcrumbHeader/BreadcrumbHeader.svelte';
+export { default as NavigationWrapper } from './NavigationWrapper/NavigationWrapper.svelte';