feat(web): persist state of file path information in details panel (#27770)

feat(enhancement): persist state of file path info in details panel

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

@@ -55,7 +55,6 @@
 
   let { asset, currentAlbum = null }: Props = $props();
 
-  let showAssetPath = $state(false);
   let showEditFaces = $state(false);
   let isOwner = $derived($user?.id === asset.ownerId);
   let people = $derived(asset.people || []);
@@ -129,8 +128,6 @@
     return Route.folders({ path: getParentPath(asset.originalPath) });
   };
 
-  const toggleAssetPath = () => (showAssetPath = !showAssetPath);
-
   const handleChangeDate = async () => {
     if (!isOwner) {
       return;
@@ -369,11 +366,11 @@
               shape="round"
               color="secondary"
               variant="ghost"
-              onclick={toggleAssetPath}
+              onclick={() => assetViewerManager.toggleAssetPath()}
             />
           {/if}
         </p>
-        {#if showAssetPath}
+        {#if assetViewerManager.isShowAssetPath}
           <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
             <!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
             <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">

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

@@ -9,6 +9,7 @@ import type { ZoomImageWheelState } from '@zoom-image/core';
 import { cubicOut } from 'svelte/easing';
 
 const isShowDetailPanel = new PersistedLocalStorage<boolean>('asset-viewer-state', false);
+const isShowAssetPath = new PersistedLocalStorage<boolean>('asset-viewer-show-path', false);
 
 const createDefaultZoomState = (): ZoomImageWheelState => ({
   currentRotation: 0,
@@ -63,6 +64,10 @@ class AssetViewerManager extends BaseEventManager<Events> {
     return isShowDetailPanel.current;
   }
 
+  get isShowAssetPath() {
+    return isShowAssetPath.current;
+  }
+
   get isFaceEditMode() {
     return this.#isFaceEditMode;
   }
@@ -101,6 +106,10 @@ class AssetViewerManager extends BaseEventManager<Events> {
     isShowDetailPanel.current = value;
   }
 
+  private set isShowAssetPath(value: boolean) {
+    isShowAssetPath.current = value;
+  }
+
   onZoomChange(state: ZoomImageWheelState) {
     // bypass event emitter to avoid loop
     this.#zoomState = state;
@@ -147,6 +156,10 @@ class AssetViewerManager extends BaseEventManager<Events> {
     this.isShowActivityPanel = false;
   }
 
+  toggleAssetPath() {
+    this.isShowAssetPath = !this.isShowAssetPath;
+  }
+
   toggleDetailPanel() {
     this.closeActivityPanel();
     this.isShowDetailPanel = !this.isShowDetailPanel;