From 092e7725903560c25d5757da046c788efbed2cb0 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 13 Oct 2026 00:52:01 +0200
Subject: [PATCH] web/components: mount modal and hovercard content only while
 open

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Hovercard.svelte | 18 +++++-
 web/src/lib/components/ui/Modal.svelte     | 69 ++++++++++++----------
 2 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/components/ui/Hovercard.svelte b/web/src/lib/components/ui/Hovercard.svelte
index be30ab924..bf36cdaa7 100644
--- a/web/src/lib/components/ui/Hovercard.svelte
+++ b/web/src/lib/components/ui/Hovercard.svelte
@@ -45,7 +45,7 @@
 
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { onMount } from "svelte";
+	import { flushSync, onMount } from "svelte";
 	import { MediaQuery } from "svelte/reactivity";
 	import { popoverExit } from "$lib/popoverExit";
 
@@ -100,6 +100,7 @@
 	let openTimer: ReturnType<typeof setTimeout> | undefined;
 	let closeTimer: ReturnType<typeof setTimeout> | undefined;
 	let open = $state(false);
+	let mounted = $state(false);
 
 	const clearTimers = () => {
 		clearTimeout(openTimer);
@@ -110,6 +111,7 @@
 	const show = () => {
 		clearTimers();
 		cardSingleton.claim(hide);
+		flushSync(() => (mounted = true));
 		// showPopover throws if already open, which the hover bridge can retrigger
 		if (cardEl && !cardEl.matches(":popover-open")) cardEl.showPopover();
 	};
@@ -199,13 +201,23 @@
 		style="position-anchor: {anchorName}"
 		class={classes.card({ class: cardClass })}
 		ontoggle={onToggle}
-		{@attach popoverExit()}
+		{@attach popoverExit((exiting) => {
+			if (
+				exiting ||
+				cardEl?.matches(":popover-open") ||
+				document.querySelector("dialog:modal")
+			)
+				return;
+			mounted = false;
+		})}
 		{@attach popoverOrigin(
 			() => wrapperEl,
 			() => origin
 		)}
 	>
-		{@render content()}
+		{#if mounted}
+			{@render content()}
+		{/if}
 	</div>
 {/if}
 
diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte
index 8cfb43b85..e58f7b97f 100644
--- a/web/src/lib/components/ui/Modal.svelte
+++ b/web/src/lib/components/ui/Modal.svelte
@@ -84,6 +84,11 @@
 	let drag: Drag | null = null;
 
 	let panel = $state<HTMLDialogElement>();
+	let mounted = $state(false);
+
+	$effect.pre(() => {
+		if (open) mounted = true;
+	});
 	const titleId = $props.id();
 
 	// portals to <body>: a modal opened from inside a popover must not go dark when
@@ -173,37 +178,41 @@
 	class={classes.panel({ class: className })}
 	style:transform={offset.current ? `translateY(${offset.current}px)` : undefined}
 	{@attach toBody}
-	{@attach popoverExit()}
+	{@attach popoverExit((exiting) => {
+		if (!exiting && !open) mounted = false;
+	})}
 >
-	{#if sheet}
-		<div
-			aria-hidden="true"
-			class={classes.handle()}
-			onpointerdown={onHandleDown}
-			onpointermove={onHandleMove}
-			onpointerup={onHandleUp}
-			onpointercancel={onHandleCancel}
-		>
-			<span class={classes.grip()}></span>
-		</div>
-	{/if}
-
-	{#if title || description}
-		<div class={classes.header()}>
-			{#if title}
-				<p id={titleId} class={classes.title()}>
-					<TitleIcon class={classes.titleIcon()} />
-					{title}
-				</p>
-			{/if}
-			{#if description}<p class={classes.description()}>{description}</p>{/if}
-		</div>
-	{/if}
-
-	{@render children?.()}
-
-	{#if footer}
-		<div class={classes.footer()}>{@render footer()}</div>
+	{#if mounted}
+		{#if sheet}
+			<div
+				aria-hidden="true"
+				class={classes.handle()}
+				onpointerdown={onHandleDown}
+				onpointermove={onHandleMove}
+				onpointerup={onHandleUp}
+				onpointercancel={onHandleCancel}
+			>
+				<span class={classes.grip()}></span>
+			</div>
+		{/if}
+
+		{#if title || description}
+			<div class={classes.header()}>
+				{#if title}
+					<p id={titleId} class={classes.title()}>
+						<TitleIcon class={classes.titleIcon()} />
+						{title}
+					</p>
+				{/if}
+				{#if description}<p class={classes.description()}>{description}</p>{/if}
+			</div>
+		{/if}
+
+		{@render children?.()}
+
+		{#if footer}
+			<div class={classes.footer()}>{@render footer()}</div>
+		{/if}
 	{/if}
 </dialog>
 
-- 
2.54.0