feat(web): link router (#10644)

feat: link router

web/src/hooks.client.ts

@@ -25,13 +25,13 @@ const parseError = (error: unknown, status: number, message: string) => {
   }
 
   return {
-    message: message || DEFAULT_MESSAGE,
+    message: (error as Error)?.message || message || DEFAULT_MESSAGE,
     code: status,
   };
 };
 
 export const handleError: HandleClientError = ({ error, status, message }) => {
   const result = parseError(error, status, message);
-  console.error(`[hooks.client.ts]:handleError ${result.message}`);
+  console.error(`[hooks.client.ts]:handleError ${result.message}`, error);
   return result;
 };

web/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
-import { locales } from '$lib/constants';
+import { defaultLang, langs, locales } from '$lib/constants';
+import { lang } from '$lib/stores/preferences.store';
 import { handleError } from '$lib/utils/handle-error';
 import {
   AssetJobName,
@@ -20,7 +21,7 @@ import {
 } from '@immich/sdk';
 import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
 import { sortBy } from 'lodash-es';
-import { t } from 'svelte-i18n';
+import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
 
 interface DownloadRequestOptions<T = unknown> {
@@ -31,6 +32,15 @@ interface DownloadRequestOptions<T = unknown> {
   onDownloadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
 }
 
+export const initApp = async () => {
+  const preferenceLang = get(lang);
+  for (const { code, loader } of langs) {
+    register(code, loader);
+  }
+
+  await init({ fallbackLocale: preferenceLang === 'dev' ? 'dev' : defaultLang.code, initialLocale: preferenceLang });
+};
+
 interface UploadRequestOptions {
   url: string;
   method?: 'POST' | 'PUT';

web/src/routes/+layout.ts

@@ -1,8 +1,5 @@
-import { defaultLang, langs } from '$lib/constants';
-import { lang } from '$lib/stores/preferences.store';
+import { initApp } from '$lib/utils';
 import { defaults } from '@immich/sdk';
-import { init, register } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { LayoutLoad } from './$types';
 
 export const ssr = false;
@@ -14,13 +11,7 @@ export const load = (async ({ fetch }) => {
   // https://github.com/oazapfts/oazapfts/blob/main/README.md#fetch-options
   defaults.fetch = fetch;
 
-  for (const { code, loader } of langs) {
-    register(code, loader);
-  }
-
-  const preferenceLang = get(lang);
-
-  await init({ fallbackLocale: preferenceLang === 'dev' ? 'dev' : defaultLang.code, initialLocale: preferenceLang });
+  await initApp();
 
   return {
     meta: {

web/src/routes/link/+page.ts

@@ -0,0 +1,34 @@
+import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (({ url }) => {
+  enum LinkTarget {
+    HOME = 'home',
+    UNSUBSCRIBE = 'unsubscribe',
+    VIEW_ASSET = 'view_asset',
+  }
+
+  const queryParams = url.searchParams;
+  const target = queryParams.get('target') as LinkTarget;
+
+  switch (target) {
+    case LinkTarget.HOME: {
+      return redirect(302, AppRoute.PHOTOS);
+    }
+
+    case LinkTarget.UNSUBSCRIBE: {
+      return redirect(302, `${AppRoute.USER_SETTINGS}?isOpen=notifications`);
+    }
+
+    case LinkTarget.VIEW_ASSET: {
+      const id = queryParams.get('id');
+      if (id) {
+        return redirect(302, `${AppRoute.PHOTOS}/${id}`);
+      }
+      break;
+    }
+  }
+
+  return redirect(302, AppRoute.PHOTOS);
+}) satisfies PageLoad;