ui: move dialog close button to the sticky header

Assisted-by: pi

tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte

@@ -14,6 +14,7 @@
 <Dialog.Root bind:open {onOpenChange}>
 	<Dialog.Content
 		class="z-999999 grid max-h-full max-w-full! grid-rows-[1fr_auto] overflow-hidden p-0 md:h-[90vh] md:max-w-[90vw]!"
+		showCloseButton
 	>
 		<MermaidPreview {svgHtml} />
 	</Dialog.Content>

tools/ui/src/lib/components/ui/dialog/dialog-content.svelte

@@ -10,7 +10,7 @@
 		class: className,
 		portalProps,
 		ref = $bindable(null),
-		showCloseButton = true,
+		showCloseButton = false,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: DialogPrimitive.PortalProps;

tools/ui/src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
 	import { cn, type WithElementRef } from '$lib/components/ui/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -6,10 +8,18 @@
 		children,
 		class: className,
 		ref = $bindable(null),
+		showCloseButton = true,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
 </script>
 
+<!--
+	Header is `sticky`, so it stays at the top while the dialog body scrolls. The close
+	button lives here (not in the body) so it sticks together with the title. `sticky`
+	makes it the containing block, so the close can be absolutely placed at its corner.
+-->
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
@@ -20,4 +30,13 @@
 	{...restProps}
 >
 	{@render children?.()}
+
+	{#if showCloseButton}
+		<DialogPrimitive.Close
+			class="absolute top-0 right-0 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+		>
+			<XIcon />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	{/if}
 </div>