From d45ff72c9cc9eefdc5db5011ab73cc89d34ffbd0 Mon Sep 17 00:00:00 2001
From: faupau <paul.paffe@gmx.de>
Date: Tue, 18 Apr 2023 17:02:51 +0200
Subject: [PATCH] fix(web): accountinfopanel not closing on button press
 (#2276)

* fix accountinfopanel not closing on button press

* remove overcomplicated logic
replace with simpler logic and only one outside listener

* remove keydown

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
---
 .../navigation-bar/account-info-panel.svelte  |  3 --
 .../navigation-bar/navigation-bar.svelte      | 34 +++++++------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 8c7236ecd..dea246a94 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { clickOutside } from '$lib/utils/click-outside';
 	import { UserResponseDto } from '@api';
 	import { createEventDispatcher } from 'svelte';
 	import { page } from '$app/stores';
@@ -26,8 +25,6 @@
 	out:fade={{ duration: 100 }}
 	id="account-info-panel"
 	class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] text-center z-[100]"
-	use:clickOutside
-	on:outclick={() => dispatch('close')}
 >
 	<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
 		<div class="flex place-items-center place-content-center">
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index b74fd11fc..67b5e3473 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { clickOutside } from '$lib/utils/click-outside';
 	import { createEventDispatcher } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
@@ -18,21 +19,17 @@
 	export let shouldShowUploadButton = true;
 
 	let shouldShowAccountInfo = false;
+	let shouldShowAccountInfoPanel = false;
 
 	// Show fallback while loading profile picture and hide when image loads.
 	let showProfilePictureFallback = true;
 
 	const dispatch = createEventDispatcher();
-	let shouldShowAccountInfoPanel = false;
 
 	const getFirstLetter = (text?: string) => {
 		return text?.charAt(0).toUpperCase();
 	};
 
-	const showAccountInfoPanel = () => {
-		shouldShowAccountInfoPanel = true;
-	};
-
 	const logOut = async () => {
 		const { data } = await api.authenticationApi.logout();
 
@@ -116,15 +113,14 @@
 					</a>
 				{/if}
 
-				<div
-					on:mouseover={() => (shouldShowAccountInfo = true)}
-					on:focus={() => (shouldShowAccountInfo = true)}
-					on:mouseleave={() => (shouldShowAccountInfo = false)}
-					on:click={showAccountInfoPanel}
-					on:keydown={showAccountInfoPanel}
-				>
+				<div use:clickOutside on:outclick={() => (shouldShowAccountInfoPanel = false)}>
 					<button
 						class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
+						on:mouseover={() => (shouldShowAccountInfo = true)}
+						on:focus={() => (shouldShowAccountInfo = true)}
+						on:blur={() => (shouldShowAccountInfo = false)}
+						on:mouseleave={() => (shouldShowAccountInfo = false)}
+						on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
 					>
 						{#if user.profileImagePath}
 							<img
@@ -142,7 +138,7 @@
 						{/if}
 					</button>
 
-					{#if shouldShowAccountInfo}
+					{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
 						<div
 							in:fade={{ delay: 500, duration: 150 }}
 							out:fade={{ delay: 200, duration: 150 }}
@@ -152,16 +148,12 @@
 							<p>{user.email}</p>
 						</div>
 					{/if}
+
+					{#if shouldShowAccountInfoPanel}
+						<AccountInfoPanel {user} on:logout={logOut} />
+					{/if}
 				</div>
 			</section>
 		</div>
 	</div>
-
-	{#if shouldShowAccountInfoPanel}
-		<AccountInfoPanel
-			{user}
-			on:close={() => (shouldShowAccountInfoPanel = false)}
-			on:logout={logOut}
-		/>
-	{/if}
 </section>