From 7300bd672bb6828a5e48061b5bb0660b73d0ed64 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 7 Oct 2025 22:00:06 -0700
Subject: [PATCH] refactor(admin): update EssayForm 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
publish menu dropdown. This simplifies the code and ensures consistent
click-outside behavior across all admin dropdowns.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/admin/EssayForm.svelte | 24 ++++++++---------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte
index a0159e9..b6dbff3 100644
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@@ -9,6 +9,7 @@
 	import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
 	import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
 	import AutoSaveStatus from './AutoSaveStatus.svelte'
+	import { clickOutside } from '$lib/actions/clickOutside'
 	import type { JSONContent } from '@tiptap/core'
 
 	interface Props {
@@ -315,22 +316,9 @@ $effect(() => {
 		showPublishMenu = !showPublishMenu
 	}
 
-	// Close menu when clicking outside
-	function handleClickOutside(event: MouseEvent) {
-		const target = event.target as HTMLElement
-		if (!target.closest('.save-actions')) {
-			showPublishMenu = false
-		}
+	function handleClickOutsideMenu() {
+		showPublishMenu = false
 	}
-
-	$effect(() => {
-		if (showPublishMenu) {
-			document.addEventListener('click', handleClickOutside)
-			return () => {
-				document.removeEventListener('click', handleClickOutside)
-			}
-		}
-	})
 </script>
 
 <AdminPage>
@@ -356,7 +344,11 @@ $effect(() => {
 			/>
 		</div>
 		<div class="header-actions">
-			<div class="save-actions">
+			<div
+				class="save-actions"
+				use:clickOutside={{ enabled: showPublishMenu }}
+				on:clickoutside={handleClickOutsideMenu}
+			>
 				<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
 					{status === 'published' ? 'Save' : 'Save Draft'}
 				</Button>