refactor: move event on level above

src/frontend/src/lib/components/dapps/DappsCarousel.svelte

@@ -1,24 +1,42 @@
 <script lang="ts">
-	import { nonNullish } from '@dfinity/utils';
+	import { fromNullable, isNullish, nonNullish } from '@dfinity/utils';
 	import Carousel from '$lib/components/carousel/Carousel.svelte';
 	import DappsCarouselSlide from '$lib/components/dapps/DappsCarouselSlide.svelte';
 	import {
 		type CarouselSlideOisyDappDescription,
 		dAppDescriptions
 	} from '$lib/types/dapp-description';
 	import { filterCarouselDapps } from '$lib/utils/dapps.utils';
+	import { addUserHiddenDappId } from '$lib/api/backend.api';
+	import { emit } from '$lib/utils/events.utils';
+	import { authIdentity } from '$lib/derived/auth.derived';
+	import { userProfileStore } from '$lib/stores/user-profile.store';
 
 	export let styleClass: string | undefined = undefined;
 
 	let dappsCarouselSlides: CarouselSlideOisyDappDescription[];
 	$: dappsCarouselSlides = filterCarouselDapps(dAppDescriptions);
+
+	const closeSlide = async ({ detail:  dappId   }: CustomEvent<CarouselSlideOisyDappDescription['id'] >) => {
+		if (isNullish($authIdentity) || isNullish($userProfileStore)) {
+			return;
+		}
+
+		await addUserHiddenDappId({
+			dappId,
+			identity: $authIdentity,
+			currentUserVersion: fromNullable($userProfileStore.profile.version)
+		});
+
+		emit({ message: 'oisyRefreshUserProfile' });
+	};
 </script>
 
 {#if nonNullish(dappsCarouselSlides) && dappsCarouselSlides.length > 0}
 	<!-- To align controls section with slide text - 100% - logo width (4rem) - margin logo-text (1rem) -->
 	<Carousel controlsWidthStyleClass="w-[calc(100%-5rem)]" styleClass={`w-full ${styleClass ?? ''}`}>
 		{#each dappsCarouselSlides as dappsCarouselSlide}
-			<DappsCarouselSlide {dappsCarouselSlide} />
+			<DappsCarouselSlide {dappsCarouselSlide} on:icCloseCarouselSlide={closeSlide} />
 		{/each}
 	</Carousel>
 {/if}

src/frontend/src/lib/components/dapps/DappsCarouselSlide.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
-	import { fromNullable, isNullish } from '@dfinity/utils';
-	import { addUserHiddenDappId } from '$lib/api/backend.api';
 	import IconClose from '$lib/components/icons/lucide/IconClose.svelte';
 	import Img from '$lib/components/ui/Img.svelte';
-	import { authIdentity } from '$lib/derived/auth.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
-	import { userProfileStore } from '$lib/stores/user-profile.store';
 	import { type CarouselSlideOisyDappDescription } from '$lib/types/dapp-description';
-	import { emit } from '$lib/utils/events.utils';
 	import { replacePlaceholders } from '$lib/utils/i18n.utils';
+	import { createEventDispatcher } from 'svelte';
 
 	export let dappsCarouselSlide: CarouselSlideOisyDappDescription;
 	$: ({
@@ -19,18 +15,10 @@
 		name: dAppName
 	} = dappsCarouselSlide);
 
-	const close = async () => {
-		if (isNullish($authIdentity) || isNullish($userProfileStore)) {
-			return;
-		}
-
-		await addUserHiddenDappId({
-			dappId,
-			identity: $authIdentity,
-			currentUserVersion: fromNullable($userProfileStore.profile.version)
-		});
+	const dispatch = createEventDispatcher();
 
-		emit({ message: 'oisyRefreshUserProfile' });
+	const close = async () => {
+		dispatch('icCloseCarouselSlide', { dappId });
 	};
 </script>