refactor(web): routes (#25313)

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
+  import { OpenQueryParam } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
+  import { Route } from '$lib/route';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences } from '$lib/stores/user.store';
   import { getAccountAge } from '$lib/utils/auth';
@@ -73,7 +74,7 @@
 <div class="license-status ps-4 text-sm">
   {#if $isPurchased && $preferences.purchase.showSupportBadge}
     <button
-      onclick={() => goto(`${AppRoute.USER_SETTINGS}?isOpen=user-purchase-settings`)}
+      onclick={() => goto(Route.userSettings({ isOpen: OpenQueryParam.PURCHASE_SETTINGS }))}
       class="w-full mt-2"
       type="button"
     >

web/src/lib/components/shared-components/side-bar/recent-albums.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Route } from '$lib/route';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -25,7 +26,7 @@
 
 {#each albums as album (album.id)}
   <a
-    href={'/albums/' + album.id}
+    href={Route.viewAlbum(album)}
     title={album.albumName}
     class="flex w-full place-items-center justify-between gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary ps-10 group-hover:sm:px-10 md:px-10"
   >

web/src/lib/components/shared-components/side-bar/user-sidebar.svelte

@@ -4,6 +4,7 @@
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import { AppRoute } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { Route } from '$lib/route';
   import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { NavbarGroup, NavbarItem } from '@immich/ui';
@@ -37,15 +38,10 @@
 </script>
 
 <Sidebar ariaLabel={$t('primary')}>
-  <NavbarItem
-    title={$t('photos')}
-    href={AppRoute.PHOTOS}
-    icon={mdiImageMultipleOutline}
-    activeIcon={mdiImageMultiple}
-  />
+  <NavbarItem title={$t('photos')} href={Route.photos()} icon={mdiImageMultipleOutline} activeIcon={mdiImageMultiple} />
 
   {#if featureFlagsManager.value.search}
-    <NavbarItem title={$t('explore')} href={AppRoute.EXPLORE} icon={mdiMagnify} />
+    <NavbarItem title={$t('explore')} href={Route.explore()} icon={mdiMagnify} />
   {/if}
 
   {#if featureFlagsManager.value.map}
@@ -57,23 +53,23 @@
   {/if}
 
   {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
-    <NavbarItem title={$t('shared_links')} href={AppRoute.SHARED_LINKS} icon={mdiLink} />
+    <NavbarItem title={$t('shared_links')} href={Route.sharedLinks()} icon={mdiLink} />
   {/if}
 
   <NavbarItem
     title={$t('sharing')}
-    href={AppRoute.SHARING}
+    href={Route.sharing()}
     icon={mdiAccountMultipleOutline}
     activeIcon={mdiAccountMultiple}
   />
 
   <NavbarGroup title={$t('library')} size="tiny" />
 
-  <NavbarItem title={$t('favorites')} href={AppRoute.FAVORITES} icon={mdiHeartOutline} activeIcon={mdiHeart} />
+  <NavbarItem title={$t('favorites')} href={Route.favorites()} icon={mdiHeartOutline} activeIcon={mdiHeart} />
 
   <NavbarItem
     title={$t('albums')}
-    href={AppRoute.ALBUMS}
+    href={Route.albums()}
     icon={{ icon: mdiImageAlbum, flipped: true }}
     bind:expanded={$recentAlbumsDropdown}
   >
@@ -92,19 +88,19 @@
     <NavbarItem title={$t('folders')} href={AppRoute.FOLDERS} icon={{ icon: mdiFolderOutline, flipped: true }} />
   {/if}
 
-  <NavbarItem title={$t('utilities')} href={AppRoute.UTILITIES} icon={mdiToolboxOutline} activeIcon={mdiToolbox} />
+  <NavbarItem title={$t('utilities')} href={Route.utilities()} icon={mdiToolboxOutline} activeIcon={mdiToolbox} />
 
   <NavbarItem
     title={$t('archive')}
-    href={AppRoute.ARCHIVE}
+    href={Route.archive()}
     icon={mdiArchiveArrowDownOutline}
     activeIcon={mdiArchiveArrowDown}
   />
 
-  <NavbarItem title={$t('locked_folder')} href={AppRoute.LOCKED} icon={mdiLockOutline} activeIcon={mdiLock} />
+  <NavbarItem title={$t('locked_folder')} href={Route.locked()} icon={mdiLockOutline} activeIcon={mdiLock} />
 
   {#if featureFlagsManager.value.trash}
-    <NavbarItem title={$t('trash')} href={AppRoute.TRASH} icon={mdiTrashCanOutline} activeIcon={mdiTrashCan} />
+    <NavbarItem title={$t('trash')} href={Route.trash()} icon={mdiTrashCanOutline} activeIcon={mdiTrashCan} />
   {/if}
 
   <BottomInfo />