fix(web): prevent interaction with detail panel behind person side panel (#27309)

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -37,6 +37,7 @@
     mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -52,7 +53,6 @@
 
   let { asset, currentAlbum = null }: Props = $props();
 
-  let showEditFaces = $derived(assetViewerManager.isEditFacesPanelOpen);
   let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
   let people = $derived(asset.people || []);
   let unassignedFaces = $derived(asset.unassignedFaces || []);
@@ -118,11 +118,16 @@
     // Remove the last part of the path to get the parent path
     return Route.folders({ path: getParentPath(asset.originalPath) });
   };
+
+  onDestroy(() => {
+    assetViewerManager.closeEditFacesPanel();
+  });
 </script>
 
 <OnEvents onAlbumAddAssets={() => (albums = refreshAlbums())} />
 
-<section class="relative p-2">
+{#if !assetViewerManager.isEditFacesPanelOpen}
+  <section class="relative p-2">
     <div class="flex place-items-center gap-2">
       <IconButton
         icon={mdiClose}
@@ -384,9 +389,9 @@
 
       <DetailPanelLocation {isOwner} {asset} />
     </div>
-</section>
+  </section>
 
-{#if latlng && featureFlagsManager.value.map}
+  {#if latlng && featureFlagsManager.value.map}
     <div class="h-90">
       {#await import('$lib/components/shared-components/map/map.svelte')}
         {#await delay(timeToLoadTheMap) then}
@@ -412,7 +417,7 @@
           zoom={12.5}
           simplified
           useLocationPin
-        showSimpleControls={!showEditFaces}
+          showSimpleControls={!assetViewerManager.isEditFacesPanelOpen}
           onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))}
         >
           {#snippet popup({ marker })}
@@ -431,9 +436,9 @@
         </Map>
       {/await}
     </div>
-{/if}
+  {/if}
 
-{#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
+  {#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
     <section class="px-6 dark:text-immich-dark-fg mt-4">
       <Text size="small" color="muted">{$t('shared_by')}</Text>
       <div class="flex gap-4 pt-4">
@@ -448,9 +453,9 @@
         </div>
       </div>
     </section>
-{/if}
+  {/if}
 
-{#await albums then albums}
+  {#await albums then albums}
     {#if albums.length > 0}
       <section class="px-6 py-6 dark:text-immich-dark-fg">
         <div class="pb-4">
@@ -482,15 +487,16 @@
         {/each}
       </section>
     {/if}
-{/await}
+  {/await}
 
-{#if authManager.authenticated && authManager.preferences.tags.enabled}
+  {#if authManager.authenticated && authManager.preferences.tags.enabled}
     <section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
       <DetailPanelTags {asset} {isOwner} />
     </section>
+  {/if}
 {/if}
 
-{#if showEditFaces}
+{#if assetViewerManager.isEditFacesPanelOpen}
   <PersonSidePanel
     assetId={asset.id}
     assetType={asset.type}

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -209,7 +209,6 @@ class AssetViewerManager extends BaseEventManager<Events> {
     this.closeFaceEditMode();
     this.closeEditFacesPanel();
   }
-
   setAsset(asset: AssetResponseDto) {
     this.#viewingAssetStoreState = asset;
     this.#viewState = true;