From dcca9eb6e5008ac88f0e8dd656b7d95572aae792 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 7 Oct 2025 22:00:54 -0700
Subject: [PATCH] refactor(ui): update BasePane to use clickOutside action
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace manual click event listener with clickOutside action for the
pane backdrop click handling. This simplifies the code and ensures
consistent click-outside behavior.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/ui/BasePane.svelte | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/ui/BasePane.svelte b/src/lib/components/ui/BasePane.svelte
index 1e15383..69da8f9 100644
--- a/src/lib/components/ui/BasePane.svelte
+++ b/src/lib/components/ui/BasePane.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition'
+	import { clickOutside } from '$lib/actions/clickOutside'
 	import type { Snippet } from 'svelte'
 
 	interface BasePaneProps {
@@ -40,24 +41,6 @@
 		return () => window.removeEventListener('keydown', handleKeydown)
 	})
 
-	// Handle click outside
-	$effect(() => {
-		if (!isOpen || !closeOnBackdrop) return
-
-		function handleClickOutside(e: MouseEvent) {
-			if (paneElement && !paneElement.contains(e.target as Node)) {
-				handleClose()
-			}
-		}
-
-		// Use capture phase to ensure we catch the click before other handlers
-		setTimeout(() => {
-			document.addEventListener('click', handleClickOutside, true)
-		}, 0)
-
-		return () => document.removeEventListener('click', handleClickOutside, true)
-	})
-
 	function handleClose() {
 		isOpen = false
 		onClose?.()
@@ -133,6 +116,8 @@
 		transition:fade={{ duration: 150 }}
 		role="dialog"
 		aria-modal="false"
+		use:clickOutside={{ enabled: closeOnBackdrop }}
+		on:clickoutside={handleClose}
 	>
 		{#if children}
 			{@render children()}