feat(web): assets now have a permanent URL (#8532)

* Remove asest redirect pages

* Rename route paths to handle optional assetId

* Update old references to new routes

* Load and display asset from all routes that can show assetId

* Add <main> in base layout, update portals to target it

* Wire up updating navigation in response to open/close/prev/next

* Replace events with navigation functions

* Add types to param matcher

* misc cleanup

* Fix reload on /search pages

* Avoid loading bar between photos nav. Delay loading bar by 200ms for all navigations

* Update url for maps routes. Note: on page reload, next/prev is not available

* Dynamically load asset-viewer on map page

* When reloading a url with assetUrl, hide background page to prevent flash during load

* Mostly style, review comments

* Load buckets for assets on demand

* Forgot this update call

* typo

* fix test

* Fix carelessness

* Review comment

* merge main

* remove assets

* fix submodule

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -79,6 +79,7 @@
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import { handlePromiseError } from '$lib/utils';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
+  import { isAlbumsRoute, isPeopleRoute, isSearchRoute } from '$lib/utils/navigation';
 
   export let data: PageData;
 
@@ -137,15 +138,14 @@
     album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
 
   afterNavigate(({ from }) => {
-    assetViewingStore.showAssetViewer(false);
-
     let url: string | undefined = from?.url?.pathname;
 
-    if (from?.route.id === '/(user)/search') {
-      url = from.url.href;
+    const route = from?.route?.id;
+    if (isSearchRoute(route)) {
+      url = from?.url.href;
     }
 
-    if (from?.route.id === '/(user)/albums/[albumId]' || from?.route.id === '/(user)/people/[personId]') {
+    if (isAlbumsRoute(route) || isPeopleRoute(route)) {
       url = AppRoute.ALBUMS;
     }
 

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getAlbumInfo } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
-  const album = await getAlbumInfo({ id: params.albumId, withoutAssets: true });
+  const [album, asset] = await Promise.all([
+    getAlbumInfo({ id: params.albumId, withoutAssets: true }),
+    getAssetInfoFromParam(params),
+  ]);
 
   return {
     album,
+    asset,
     meta: {
       title: album.albumName,
     },

web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts

@@ -1,13 +0,0 @@
-import { AppRoute } from '$lib/constants';
-import { redirect } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = ({ params }) => {
-  const albumId = params.albumId;
-
-  if (albumId) {
-    redirect(302, `${AppRoute.ALBUMS}/${albumId}`);
-  } else {
-    redirect(302, AppRoute.PHOTOS);
-  }
-};