fix(frontend): close the content search modal when clicking on an item (#4098)

frontend/src/lib/components/ContentSearchInner.svelte

@@ -18,7 +18,9 @@
 	import YAML from 'yaml'
 	import { twMerge } from 'tailwind-merge'
 	import ContentSearchInnerItem from './ContentSearchInnerItem.svelte'
+	import { createEventDispatcher } from 'svelte'
 
+	const dispatch = createEventDispatcher()
 	export let search: string = ''
 
 	export async function open(nsearch?: string) {
@@ -231,6 +233,7 @@
 						<ContentSearchInnerItem
 							title={`Script: ${item.path}`}
 							href={`/scripts/get/${item.path}`}
+							on:close
 						>
 							<svelte:fragment slot="actions">
 								<Button
@@ -238,6 +241,9 @@
 									color="light"
 									size="xs"
 									startIcon={{ icon: ExternalLink }}
+									on:click={() => {
+										dispatch('close')
+									}}
 								>
 									Open
 								</Button>
@@ -277,6 +283,7 @@
 						<ContentSearchInnerItem
 							title={`Resource: ${item.path}`}
 							href={`/resources#${item.path}`}
+							on:close
 						>
 							<svelte:fragment slot="actions">
 								<Button
@@ -311,13 +318,20 @@
 				{/if}
 				{#if (searchKind == 'all' || searchKind == 'flows') && filteredFlowItems?.length > 0}
 					{#each filteredFlowItems.slice(0, showNbFlows) ?? [] as item}
-						<ContentSearchInnerItem title={`Flow: ${item.path}`} href={`/flows/get/${item.path}`}>
+						<ContentSearchInnerItem
+							title={`Flow: ${item.path}`}
+							href={`/flows/get/${item.path}`}
+							on:close
+						>
 							<svelte:fragment slot="actions">
 								<Button
 									href={`/flows/get/${item.path}`}
 									color="light"
 									size="xs"
 									startIcon={{ icon: ExternalLink }}
+									on:click={() => {
+										dispatch('close')
+									}}
 								>
 									Open
 								</Button>
@@ -354,13 +368,20 @@
 				{/if}
 				{#if (searchKind == 'all' || searchKind == 'apps') && filteredAppItems?.length > 0}
 					{#each filteredAppItems.slice(0, showNbApps) ?? [] as item}
-						<ContentSearchInnerItem title={`App: ${item.path}`} href={`/apps/get/${item.path}`}>
+						<ContentSearchInnerItem
+							title={`App: ${item.path}`}
+							href={`/apps/get/${item.path}`}
+							on:close
+						>
 							<svelte:fragment slot="actions">
 								<Button
 									href={`/apps/get/${item.path}`}
 									color="light"
 									size="xs"
 									startIcon={{ icon: ExternalLink }}
+									on:click={() => {
+										dispatch('close')
+									}}
 								>
 									Open
 								</Button>

frontend/src/lib/components/ContentSearchInnerItem.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+
 	export let title: string
 	export let href: string
+
+	const dispatch = createEventDispatcher()
 </script>
 
 <div class="flex flex-col gap-2">
 	<div class="flex flex-row items-center justify-between">
-		<a class="text-sm text-primary truncate" {href}>
+		<a
+			class="text-sm text-blue-500 truncate hover:underline"
+			{href}
+			on:click={() => {
+				dispatch('close')
+			}}
+		>
 			{title}
 		</a>
 

frontend/src/lib/components/search/GlobalSearchModal.svelte

@@ -456,6 +456,11 @@
 		open = !open
 		focusTextInput()
 	}
+
+	function closeModal() {
+		open = false
+	}
+
 	let height: number | undefined = undefined
 </script>
 
@@ -542,7 +547,13 @@
 							{/if}
 						</div>
 					{:else if tab === 'content'}
-						<ContentSearchInner search={removePrefix(searchTerm, '#')} bind:this={contentSearch} />
+						<ContentSearchInner
+							search={removePrefix(searchTerm, '#')}
+							bind:this={contentSearch}
+							on:close={() => {
+								closeModal()
+							}}
+						/>
 					{:else if tab === 'logs'}
 						<div class="p-2">
 							<Alert title="Service log search is coming soon" type="info">