From 7148ebe1884ec2a4cddeb62f2ebd4ba9845ba546 Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Wed, 20 Aug 2025 17:43:31 +0300
Subject: [PATCH] container2: remove old code, make sure she builds

---
 .../ComponentStack/ComponentStack.svelte      | 40 ---------
 .../ComponentStackContainer.svelte            | 32 +++++---
 .../ComponentStackContainer2.svelte           | 48 -----------
 .../ComponentStack/ComponentStackItem.svelte  | 34 --------
 .../components/ComponentStack/TestComp.svelte |  4 +-
 .../ComponentStack/TestComp2.svelte           |  6 +-
 .../lib/components/ComponentStack/index.ts    |  4 +-
 .../DynamicMenu/MediaSourceMenuModal.svelte   |  4 +-
 .../TitlePages/MoviePage/MoviePage.svelte     |  6 +-
 .../TitlePages/SeriesPage/SeriesPage.svelte   | 13 ++-
 .../src/lib/stores/component-stack.store.ts   | 82 +++----------------
 11 files changed, 51 insertions(+), 222 deletions(-)
 delete mode 100644 frontend/src/lib/components/ComponentStack/ComponentStack.svelte
 delete mode 100644 frontend/src/lib/components/ComponentStack/ComponentStackContainer2.svelte
 delete mode 100644 frontend/src/lib/components/ComponentStack/ComponentStackItem.svelte

diff --git a/frontend/src/lib/components/ComponentStack/ComponentStack.svelte b/frontend/src/lib/components/ComponentStack/ComponentStack.svelte
deleted file mode 100644
index f53e586..0000000
--- a/frontend/src/lib/components/ComponentStack/ComponentStack.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { type ComponentStackStore } from '$lib/stores/component-stack.store';
-	import classNames from 'classnames';
-	import { derived } from 'svelte/store';
-	import ComponentStackItem from './ComponentStackItem.svelte';
-
-	export let componentStack: ComponentStackStore;
-	const top = derived(
-		componentStack,
-		($componentStack) => $componentStack[$componentStack.length - 1]
-	);
-</script>
-
-<div class={classNames('relative', $$restProps.class)}>
-	<ComponentStackItem {componentStack} {top} />
-	<!-- {#each $componentStack as component (component.id)}
-		{@const hidden = $top?.group === component.group && $top?.id !== component.id}
-
-		<Container
-			disabled={hidden}
-			focusOnMount={!hidden}
-			trapFocus
-			class="fixed inset-0 z-10 overflow-x-hidden overflow-y-auto"
-		>
-			<svelte:component
-				this={component.component}
-				{...component.props}
-				modalId={component.id}
-				{hidden}
-				groupId={component.group}
-				modal={component}
-			/>
-		</Container>
-	{/each} -->
-	<!-- {#each $componentStack as component, index (component.id)}
-		{@const hidden = $top?.group === component.group && $top?.id !== component.id}
-
-		<ComponentStackItem2 {index} {component} {hidden} {context} />
-	{/each} -->
-</div>
diff --git a/frontend/src/lib/components/ComponentStack/ComponentStackContainer.svelte b/frontend/src/lib/components/ComponentStack/ComponentStackContainer.svelte
index 6b75ea6..17298ff 100644
--- a/frontend/src/lib/components/ComponentStack/ComponentStackContainer.svelte
+++ b/frontend/src/lib/components/ComponentStack/ComponentStackContainer.svelte
@@ -1,28 +1,32 @@
-<!-- The purpose of this component is to make contexts available to ComponentStack children. -->
 <script lang="ts">
-	import { getContext, type ComponentProps } from 'svelte';
-	import type { Readable } from 'svelte/store';
-	import Container from '../Container.svelte';
-	import ComponentStackItem from './ComponentStackItem.svelte';
+	import type { ComponentStackStore } from '$lib/stores/component-stack.store';
 	import classNames from 'classnames';
+	import { getContext, setContext } from 'svelte';
+	import Container from '../Container.svelte';
+
+	const componentStackIndex = getContext<number>('component-stack-index');
+	const { top, ...componentStack } = getContext<ComponentStackStore>('component-stack');
+
+	$: nextComponent = $componentStack[componentStackIndex + 1];
+	$: hidden =
+		$top?.group !== $componentStack[componentStackIndex]?.group &&
+		$top?.id !== $componentStack[componentStackIndex]?.id;
 
 	export let trapFocus = false;
 	export let hideSidebar = false;
 
-	const props = getContext<Readable<ComponentProps<ComponentStackItem> & { hidden: boolean }>>(
-		'component-stack-container'
-	);
+	setContext('component-stack-index', componentStackIndex + 1);
 </script>
 
 <Container
-	disabled={$props.hidden}
-	focusOnMount={!$props.hidden}
+	disabled={hidden}
+	focusOnMount={!hidden}
 	{trapFocus}
 	class={classNames(
 		'fixed inset-0 overflow-x-hidden overflow-y-auto scrollbar-hide',
 		{
 			'z-[21]': hideSidebar,
-			'opacity-0': $props.hidden
+			'opacity-0': hidden
 		},
 		$$restProps.class
 	)}
@@ -31,4 +35,8 @@
 	<slot />
 </Container>
 
-<ComponentStackItem {...$props} />
+{#if nextComponent}
+	<svelte:component this={nextComponent.component} {...nextComponent.props} />
+{/if}
+
+<!-- <ComponentStackItem {...$props} /> -->
diff --git a/frontend/src/lib/components/ComponentStack/ComponentStackContainer2.svelte b/frontend/src/lib/components/ComponentStack/ComponentStackContainer2.svelte
deleted file mode 100644
index c5f5e64..0000000
--- a/frontend/src/lib/components/ComponentStack/ComponentStackContainer2.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-	import { getContext, setContext, type ComponentProps } from 'svelte';
-	import { get, type Readable } from 'svelte/store';
-	import Container from '../Container.svelte';
-	import ComponentStackItem from './ComponentStackItem.svelte';
-	import classNames from 'classnames';
-	import type { ComponentStackStore } from '$lib/stores/component-stack.store';
-
-	const componentStackIndex = getContext<number>('component-stack-index');
-	const { top, ...componentStack } = getContext<ComponentStackStore>('component-stack');
-
-	$: nextComponent = $componentStack[componentStackIndex + 1];
-	$: hidden =
-		$top?.group !== $componentStack[componentStackIndex]?.group &&
-		$top?.id !== $componentStack[componentStackIndex]?.id;
-
-	export let trapFocus = false;
-	export let hideSidebar = false;
-
-	// const props = getContext<Readable<ComponentProps<ComponentStackItem> & { hidden: boolean }>>(
-	// 	'component-stack-container'
-	// );
-
-	setContext('component-stack-index', componentStackIndex + 1);
-</script>
-
-<Container
-	disabled={hidden}
-	focusOnMount={!hidden}
-	{trapFocus}
-	class={classNames(
-		'fixed inset-0 overflow-x-hidden overflow-y-auto scrollbar-hide',
-		{
-			'z-[21]': hideSidebar,
-			'opacity-0': hidden
-		},
-		$$restProps.class
-	)}
-	style="backface-visibility: hidden"
->
-	<slot />
-</Container>
-
-{#if nextComponent}
-	<svelte:component this={nextComponent.component} {...nextComponent.props} />
-{/if}
-
-<!-- <ComponentStackItem {...$props} /> -->
diff --git a/frontend/src/lib/components/ComponentStack/ComponentStackItem.svelte b/frontend/src/lib/components/ComponentStack/ComponentStackItem.svelte
deleted file mode 100644
index dc40ee3..0000000
--- a/frontend/src/lib/components/ComponentStack/ComponentStackItem.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { ComponentPage, ComponentStackStore } from '$lib/stores/component-stack.store';
-	import { setContext } from 'svelte';
-	import { derived, type Readable } from 'svelte/store';
-
-	export let index = 0;
-	export let componentStack: ComponentStackStore;
-	export let top: Readable<ComponentPage | undefined>;
-
-	$: component = $componentStack[index];
-	const hidden = derived(
-		top,
-		($top) => $top?.group === component?.group && $top?.id !== component?.id
-	);
-
-	const componentStackContainerContext = derived(
-		[componentStack, top],
-		([$componentStack, $top]) => {
-			return {
-				index: index + 1,
-				componentStack,
-				top,
-				hidden:
-					$top?.group !== $componentStack[index]?.group && $top?.id !== $componentStack[index]?.id
-			};
-		}
-	);
-
-	setContext('component-stack-container', componentStackContainerContext);
-</script>
-
-{#if component}
-	<svelte:component this={component.component} {...component.props} />
-{/if}
diff --git a/frontend/src/lib/components/ComponentStack/TestComp.svelte b/frontend/src/lib/components/ComponentStack/TestComp.svelte
index 36071aa..4ce8204 100644
--- a/frontend/src/lib/components/ComponentStack/TestComp.svelte
+++ b/frontend/src/lib/components/ComponentStack/TestComp.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, hasContext, setContext } from 'svelte';
-	import ComponentStackContainer2 from './ComponentStackContainer2.svelte';
+	import ComponentStackContainer2 from './ComponentStackContainer.svelte';
 	import type { ComponentStackStore } from '$lib/stores/component-stack.store';
 	import TestComp2 from './TestComp2.svelte';
 
@@ -12,7 +12,7 @@
 
 <ComponentStackContainer2>
 	<div>Test Component {test}</div>
-	<button on:click={() => componentStack.create(TestComp2, {})}>
+	<button on:click={() => componentStack.push({ component: TestComp2, props: {} })}>
 		Another oneAnother oneAnother oneAnother one
 	</button>
 	<button on:click={() => componentStack.pop()}>
diff --git a/frontend/src/lib/components/ComponentStack/TestComp2.svelte b/frontend/src/lib/components/ComponentStack/TestComp2.svelte
index 689c19d..998d464 100644
--- a/frontend/src/lib/components/ComponentStack/TestComp2.svelte
+++ b/frontend/src/lib/components/ComponentStack/TestComp2.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, hasContext, setContext } from 'svelte';
-	import ComponentStackContainer2 from './ComponentStackContainer2.svelte';
+	import ComponentStackContainer2 from './ComponentStackContainer.svelte';
 	import type { ComponentStackStore } from '$lib/stores/component-stack.store';
 	import TestComp from './TestComp.svelte';
 
@@ -12,5 +12,7 @@
 
 <ComponentStackContainer2>
 	<div>Test Component {test}</div>
-	<button on:click={() => componentStack.create(TestComp, {})}>Another one</button>
+	<button on:click={() => componentStack.push({ component: TestComp, props: {} })}>
+		ANOTHER ONE
+	</button>
 </ComponentStackContainer2>
diff --git a/frontend/src/lib/components/ComponentStack/index.ts b/frontend/src/lib/components/ComponentStack/index.ts
index ef55214..b50aed2 100644
--- a/frontend/src/lib/components/ComponentStack/index.ts
+++ b/frontend/src/lib/components/ComponentStack/index.ts
@@ -1,2 +1,2 @@
-export * from './ComponentStack.svelte';
-export * from './ComponentStackContainer2.svelte';
+export * from './ComponentStackProvider.svelte';
+export * from './ComponentStackContainer.svelte';
diff --git a/frontend/src/lib/components/DynamicMenu/MediaSourceMenuModal.svelte b/frontend/src/lib/components/DynamicMenu/MediaSourceMenuModal.svelte
index 5a34f8f..e6a3f70 100644
--- a/frontend/src/lib/components/DynamicMenu/MediaSourceMenuModal.svelte
+++ b/frontend/src/lib/components/DynamicMenu/MediaSourceMenuModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Container from '$components/Container.svelte';
-	import ComponentStack from '$lib/components/ComponentStack/ComponentStack.svelte';
 	import DynamicListView from '$lib/components/Menu/ListMenu.svelte';
 	import { reiverrApi, user } from '$lib/stores/user.store';
 	import { capitalize } from '$lib/utils';
@@ -9,6 +8,7 @@
 	import type { MediaSourceDto, ViewProviderDto } from '../../apis/reiverr/reiverr.openapi';
 	import { mediaSourceContext } from '../../pages/TitlePages/media-source.context';
 	import Modal from '../Modal/Modal.svelte';
+	import ComponentStackProvider from '../ComponentStack/ComponentStackProvider.svelte';
 
 	type ViewItem = {
 		label: string;
@@ -110,7 +110,7 @@
 				{/each}
 			{/await}
 		{:else}
-			<ComponentStack {componentStack} />
+			<ComponentStackProvider {componentStack} />
 		{/if}
 	</Container>
 </Modal>
diff --git a/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte b/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
index 31c67b4..84f759e 100644
--- a/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
+++ b/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ComponentStack from '$lib/components/ComponentStack/ComponentStack.svelte';
+	import ComponentStackProvider from '$lib/components/ComponentStack/ComponentStackProvider.svelte';
 	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
 	import { movieUserDataContext } from '$lib/stores/user-data/title-user-data.store';
 	import { onDestroy } from 'svelte';
@@ -12,7 +12,7 @@
 	const { tmdbMovie, unsubscribe } = movieUserDataContext.createContext(id);
 	const { componentStack } = titlePageContext.createContext();
 
-	componentStack.create(MoviePageDetails, {});
+	componentStack.push({ component: MoviePageDetails, props: {} });
 
 	$tmdbMovie.then(async (movie) => {
 		const backgrounds =
@@ -39,4 +39,4 @@
 	});
 </script>
 
-<ComponentStack {componentStack} />
+<ComponentStackProvider {componentStack} />
diff --git a/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte b/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
index dd704cc..f67657a 100644
--- a/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
+++ b/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import ComponentStack from '$lib/components/ComponentStack/ComponentStack.svelte';
-	import {
-		createBackgroundPage,
-		topBackground
-	} from '$lib/components/GlobalBackground/BackgroundStack';
+	import ComponentStackProvider from '$lib/components/ComponentStack/ComponentStackProvider.svelte';
+	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
+	import { TMDB_BACKDROP_SMALLEST } from '$lib/constants';
 	import { seriesUserDataContext as seriesDataContext } from '$lib/stores/user-data/title-user-data.store';
 	import { onDestroy } from 'svelte';
 	import { titlePageContext } from '../ActionsPage/actions-page';
 	import SeriesPageDetails from './SeriesPageDetails.svelte';
-	import { TMDB_BACKDROP_SMALLEST } from '$lib/constants';
 
 	export let id: string;
 
@@ -16,7 +13,7 @@
 	const { tmdbSeries, unsubscribe } = seriesDataContext.createContext(id);
 	const { componentStack } = titlePageContext.createContext();
 
-	componentStack.create(SeriesPageDetails, {});
+	componentStack.push({ component: SeriesPageDetails, props: {} });
 
 	$tmdbSeries.then((series) => {
 		const backgrounds =
@@ -58,4 +55,4 @@
 	/>
 {/if}
 
-<ComponentStack {componentStack} />
+<ComponentStackProvider {componentStack} />
diff --git a/frontend/src/lib/stores/component-stack.store.ts b/frontend/src/lib/stores/component-stack.store.ts
index c9e8893..d5e25ec 100644
--- a/frontend/src/lib/stores/component-stack.store.ts
+++ b/frontend/src/lib/stores/component-stack.store.ts
@@ -1,4 +1,3 @@
-import { createStoreContext } from '$lib/utils';
 import { type ComponentProps, type ComponentType, type SvelteComponentTyped } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
 
@@ -20,7 +19,11 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
 	const top = derived(items, ($items) => $items[$items.length - 1]);
 
 	if (initial) {
-		create(initial.component, initial.props, initial.group);
+		push({
+			component: initial.component,
+			props: initial.props,
+			group: initial.group
+		});
 	}
 
 	function close(symbol: symbol) {
@@ -31,11 +34,13 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
 		items.update((prev) => prev.filter((i) => i.group !== group));
 	}
 
-	function create<P extends Record<string, unknown>>(
-		component: ComponentType<SvelteComponentTyped<P>>,
-		props: P,
-		group: symbol | undefined = undefined
-	) {
+	function push<P extends Record<string, unknown>>(opts: {
+		component: ComponentType<SvelteComponentTyped<P>>;
+		props: P;
+		group?: symbol;
+	}) {
+		const { component, props, group } = opts;
+
 		const id = Symbol();
 		const item = { id, component, props, group: group || id };
 		items.update((prev) => [...prev, item]);
@@ -58,7 +63,7 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
 		top: {
 			subscribe: top.subscribe
 		},
-		create,
+		push,
 		close,
 		closeGroup,
 		closeTopmost,
@@ -66,64 +71,3 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
 		reset
 	};
 }
-
-/** @deprecated */
-export type ComponentStackContext = ReturnType<typeof useComponentStackContext>;
-
-/** @deprecated */
-type ContextProvider = ReturnType<ComponentStackContext['getContextProvider']>;
-
-/** @deprecated */
-export function useComponentStackContext() {
-	const contexts: Record<string, { index: number; context: unknown }[]> = {};
-
-	function getContextProvider(index: number) {
-		function setContext<T = any>(key: string, context: T) {
-			if (!contexts[key]) {
-				contexts[key] = [];
-			}
-
-			const prev = contexts[key].find((ctx) => ctx.index === index);
-
-			if (prev) {
-				prev.context = context;
-			} else {
-				contexts[key].push({ index, context });
-			}
-		}
-
-		function hasContext(key: string) {
-			return !!contexts[key];
-		}
-
-		function getContext<T = any>(key: string): T;
-		function getContext(key: string) {
-			const context = contexts[key] || [];
-
-			for (let i = context.length - 1; i >= 0; i--) {
-				const ctx = context[i];
-
-				if (!ctx) continue;
-
-				if (ctx.index <= index) {
-					return ctx.context;
-				}
-			}
-		}
-
-		return {
-			setContext,
-			getContext,
-			hasContext
-		};
-	}
-
-	return { getContextProvider };
-}
-
-/** @deprecated */
-export const componentStackContextProvider = createStoreContext(
-	'component-stack-context',
-	(context: ComponentStackContext, index: number) => context.getContextProvider(index),
-	{ required: true }
-);