Merge branch 'main' of https://github.com/YFrendo/immich

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

@@ -107,7 +107,6 @@
 
     try {
       await api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
-      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
     } catch (error) {
       handleError(error, 'Unable to change date');
     }
@@ -237,11 +236,12 @@
         zone: asset.exifInfo.timeZone ?? undefined,
       })}
       <div
-        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        class="flex justify-between place-items-start gap-4 py-4 hover:dark:text-immich-dark-primary hover:text-immich-primary cursor-pointer"
         on:click={() => (isShowChangeDate = true)}
         on:keydown={(event) => event.key === 'Enter' && (isShowChangeDate = true)}
         tabindex="0"
         role="button"
+        title="Edit date"
       >
         <div class="flex gap-4">
           <div>
@@ -275,28 +275,27 @@
           </div>
         </div>
         <button class="focus:outline-none">
-          <Icon path={mdiPencil} size="24" />
+          <Icon path={mdiPencil} size="20" />
         </button>
       </div>
     {:else}
       <div
-        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        class="flex justify-between place-items-start gap-4 py-4 hover:dark:text-immich-dark-primary hover:text-immich-primary cursor-pointer"
         on:click={() => (isShowChangeDate = true)}
         on:keydown={(event) => event.key === 'Enter' && (isShowChangeDate = true)}
         tabindex="0"
         role="button"
+        title="Add date"
       >
         <div class="flex gap-4">
           <div>
             <Icon path={mdiCalendar} size="24" />
           </div>
 
-          <div>
-            <p>No date available for this asset, click to add one.</p>
-          </div>
+          <p>Add a date</p>
         </div>
         <button class="focus:outline-none">
-          <Icon path={mdiPencil} size="24" />
+          <Icon path={mdiPencil} size="20" />
         </button>
       </div>
     {/if}
@@ -381,52 +380,54 @@
 
     {#if asset.exifInfo?.city}
       <div
-        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        class="flex justify-between place-items-start gap-4 py-4 hover:dark:text-immich-dark-primary hover:text-immich-primary cursor-pointer"
         on:click={() => (isShowChangeLocation = true)}
         on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
         tabindex="0"
         role="button"
+        title="Edit location"
       >
-        <div><Icon path={mdiMapMarkerOutline} size="24" /></div>
+        <div class="flex gap-4">
+          <div><Icon path={mdiMapMarkerOutline} size="24" /></div>
 
-        <div>
-          <p>{asset.exifInfo.city}</p>
-          {#if asset.exifInfo?.state}
-            <div class="flex gap-2 text-sm">
-              <p>{asset.exifInfo.state}</p>
-            </div>
-          {/if}
-          {#if asset.exifInfo?.country}
-            <div class="flex gap-2 text-sm">
-              <p>{asset.exifInfo.country}</p>
-            </div>
-          {/if}
+          <div>
+            <p>{asset.exifInfo.city}</p>
+            {#if asset.exifInfo?.state}
+              <div class="flex gap-2 text-sm">
+                <p>{asset.exifInfo.state}</p>
+              </div>
+            {/if}
+            {#if asset.exifInfo?.country}
+              <div class="flex gap-2 text-sm">
+                <p>{asset.exifInfo.country}</p>
+              </div>
+            {/if}
+          </div>
         </div>
 
-        <button class="focus:outline-none">
-          <Icon path={mdiPencil} size="24" />
-        </button>
+        <div>
+          <Icon path={mdiPencil} size="20" />
+        </div>
       </div>
     {:else}
       <div
-        class="flex justify-between gap-4 py-4 hover:bg-gray-200 hover:text-black cursor-pointer"
+        class="flex justify-between place-items-start gap-4 py-4 rounded-lg pr-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
         on:click={() => (isShowChangeLocation = true)}
         on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
         tabindex="0"
         role="button"
+        title="Add location"
       >
         <div class="flex gap-4">
           <div>
             <div><Icon path={mdiMapMarkerOutline} size="24" /></div>
           </div>
 
-          <div>
-            <p>No location available for this asset, click to add one.</p>
-          </div>
+          <p>Add a location</p>
+        </div>
+        <div class="focus:outline-none">
+          <Icon path={mdiPencil} size="20" />
         </div>
-        <button class="focus:outline-none">
-          <Icon path={mdiPencil} size="24" />
-        </button>
       </div>
     {/if}
     {#if isShowChangeLocation}

web/src/lib/components/elements/dropdown.svelte

@@ -33,7 +33,7 @@
   export let controlable = false;
 
   const handleClickOutside = () => {
-    if(!controlable){
+    if (!controlable) {
       showMenu = false;
     }
   };

web/src/lib/components/shared-components/change-date.svelte

@@ -38,9 +38,7 @@
   };
 
   const filterTimezones = () => {
-    filteredTimezones = timezones.filter((timezone) =>
-      timezone.zone.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+    filteredTimezones = timezones.filter((timezone) => timezone.zone.toLowerCase().includes(searchQuery.toLowerCase()));
   };
 
   const dispatch = createEventDispatcher<{
@@ -80,8 +78,8 @@
     selectedTimezone = item.offset;
     closeDropdown();
   };
-  
 </script>
+
 <div role="presentation" on:keydown={handleKeydown}>
   <ConfirmDialogue
     confirmColor="primary"
@@ -120,11 +118,11 @@
             options={filteredTimezones}
             render={(item) => (item ? `${item.zone} (${item.offset})` : '(not selected)')}
             on:select={({ detail: item }) => handleSelectTz(item)}
-            controlable = {true}
+            controlable={true}
             bind:showMenu={isDropdownOpen}
           />
         </div>
       </div>
     </div>
   </ConfirmDialogue>
-</div>
+</div>

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -7,6 +7,7 @@
   import { flip } from 'svelte/animate';
   import { getThumbnailSize } from '$lib/utils/thumbnail-util';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { onDestroy } from 'svelte';
 
   export let assets: AssetResponseDto[];
   export let selectedAssets: Set<AssetResponseDto> = new Set();
@@ -80,6 +81,10 @@
     $showAssetViewer = false;
     history.pushState(null, '', `${$page.url.pathname}`);
   };
+
+  onDestroy(() => {
+    $showAssetViewer = false;
+  });
 </script>
 
 {#if assets.length > 0}

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -123,7 +123,7 @@
   afterNavigate(({ from }) => {
     assetViewingStore.showAssetViewer(false);
 
-    let url: string | undefined = from?.url.pathname;
+    let url: string | undefined = from?.url?.pathname;
 
     if (from?.route.id === '/(user)/search') {
       url = from.url.href;

web/src/routes/(user)/search/+page.svelte

@@ -72,7 +72,7 @@
 
   afterNavigate(({ from }) => {
     // Prevent setting previousRoute to the current page.
-    if (from && from.route.id !== $page.route.id) {
+    if (from?.url && from.route.id !== $page.route.id) {
       previousRoute = from.url.href;
     }
 
@@ -149,7 +149,7 @@
       </section>
     {/if}
     <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-      {#if data.results?.assets?.items.length > 0}
+      {#if searchResultAssets.length > 0}
         <div class="pl-4">
           <GalleryViewer assets={searchResultAssets} bind:selectedAssets showArchiveIcon={true} />
         </div>