fix(web): add URLs to results in large files utility (#23617)

fix(web): add URLs to results in large files

web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -8,6 +8,7 @@
   import { navigate } from '$lib/utils/navigation';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
+  import type { AssetResponseDto } from '@immich/sdk';
 
   interface Props {
     data: PageData;
@@ -16,35 +17,42 @@
   let { data }: Props = $props();
 
   let assets = $derived(data.assets);
+  let asset = $derived(data.asset);
   const { isViewing: showAssetViewer, asset: viewingAsset, setAsset } = assetViewingStore;
   const getAssetIndex = (id: string) => assets.findIndex((asset) => asset.id === id);
 
-  const onNext = () => {
+  $effect(() => {
+    if (asset) {
+      setAsset(asset);
+    }
+  });
+
+  const onNext = async () => {
     const index = getAssetIndex($viewingAsset.id) + 1;
     if (index >= assets.length) {
-      return Promise.resolve(false);
+      return false;
     }
-    setAsset(assets[index]);
+    await onViewAsset(assets[index]);
-    return Promise.resolve(true);
+    return true;
   };
 
-  const onPrevious = () => {
+  const onPrevious = async () => {
     const index = getAssetIndex($viewingAsset.id) - 1;
     if (index < 0) {
-      return Promise.resolve(false);
+      return false;
     }
-    setAsset(assets[index]);
+    await onViewAsset(assets[index]);
-    return Promise.resolve(true);
+    return true;
   };
 
-  const onRandom = () => {
+  const onRandom = async () => {
     if (assets.length <= 0) {
-      return Promise.resolve(undefined);
+      return undefined;
     }
     const index = Math.floor(Math.random() * assets.length);
     const asset = assets[index];
-    setAsset(asset);
+    await onViewAsset(asset);
-    return Promise.resolve(asset);
+    return asset;
   };
 
   const onAction = (payload: Action) => {
@@ -53,13 +61,17 @@
       $showAssetViewer = false;
     }
   };
+
+  const onViewAsset = async (asset: AssetResponseDto) => {
+    await navigate({ targetRoute: 'current', assetId: asset.id });
+  };
 </script>
 
 <UserPageLayout title={data.meta.title} scrollbar={true}>
   <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
     {#if assets && data.assets.length > 0}
       {#each assets as asset (asset.id)}
-        <LargeAssetData {asset} onViewAsset={(asset) => setAsset(asset)} />
+        <LargeAssetData {asset} {onViewAsset} />
       {/each}
     {:else}
       <p class="text-center text-lg dark:text-white flex place-items-center place-content-center">

web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,15 +1,17 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { searchLargeAssets } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ url }) => {
+export const load = (async ({ params, url }) => {
   await authenticate(url);
-  const assets = await searchLargeAssets({ minFileSize: 0 });
+  const [assets, asset] = await Promise.all([searchLargeAssets({ minFileSize: 0 }), getAssetInfoFromParam(params)]);
   const $t = await getFormatter();
 
   return {
     assets,
+    asset,
     meta: {
       title: $t('large_files'),
     },