feat: use <a> tag for albums in list view (#5645)

* fix: multiple improvements

* pr feedback

* optimize

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

@@ -22,7 +22,7 @@
   import { flip } from 'svelte/animate';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { dateFormats } from '$lib/constants';
+  import { AppRoute, dateFormats } from '$lib/constants';
   import { locale, AlbumViewMode } from '$lib/stores/preferences.store';
   import {
     notificationController,
@@ -46,6 +46,7 @@
   } from '@mdi/js';
 
   export let data: PageData;
+
   let shouldShowEditUserForm = false;
   let selectedAlbum: AlbumResponseDto;
 
@@ -192,7 +193,7 @@
   const handleCreateAlbum = async () => {
     const newAlbum = await createAlbum();
     if (newAlbum) {
-      goto('/albums/' + newAlbum.id);
+      goto(`${AppRoute.ALBUMS}/${newAlbum.id}`);
     }
   };
 
@@ -289,7 +290,7 @@
     {#if $albumViewSettings.view === AlbumViewMode.Cover}
       <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
         {#each $albums as album (album.id)}
-          <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
+          <a data-sveltekit-preload-data="hover" href="{AppRoute.ALBUMS}/{album.id}" animate:flip={{ duration: 200 }}>
             <AlbumCard
               {album}
               on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
@@ -316,47 +317,49 @@
           {#each $albums as album (album.id)}
             <tr
               class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
-              on:click={() => goto(`albums/${album.id}`)}
-              on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
+              on:click={() => goto(`${AppRoute.ALBUMS}/${album.id}`)}
+              on:keydown={(event) => event.key === 'Enter' && goto(`${AppRoute.ALBUMS}/${album.id}`)}
               tabindex="0"
             >
-              <td class="text-md text-ellipsis text-left w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]"
-                >{album.albumName}</td
-              >
-              <td class="text-md text-ellipsis text-center sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
-                {album.assetCount}
-                {album.assetCount > 1 ? `items` : `item`}
-              </td>
-              <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
-                >{dateLocaleString(album.updatedAt)}
-              </td>
-              <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
-                >{dateLocaleString(album.createdAt)}</td
-              >
-              <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">
-                {#if album.endDate}
-                  {dateLocaleString(album.endDate)}
-                {:else}
-                  &#10060;
-                {/if}</td
-              >
-              <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]"
-                >{#if album.startDate}
-                  {dateLocaleString(album.startDate)}
-                {:else}
-                  &#10060;
-                {/if}</td
-              >
+              <a data-sveltekit-preload-data="hover" class="flex w-full" href="{AppRoute.ALBUMS}/{album.id}">
+                <td class="text-md text-ellipsis text-left w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]"
+                  >{album.albumName}</td
+                >
+                <td class="text-md text-ellipsis text-center sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
+                  {album.assetCount}
+                  {album.assetCount > 1 ? `items` : `item`}
+                </td>
+                <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
+                  >{dateLocaleString(album.updatedAt)}
+                </td>
+                <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
+                  >{dateLocaleString(album.createdAt)}</td
+                >
+                <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">
+                  {#if album.endDate}
+                    {dateLocaleString(album.endDate)}
+                  {:else}
+                    &#10060;
+                  {/if}</td
+                >
+                <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]"
+                  >{#if album.startDate}
+                    {dateLocaleString(album.startDate)}
+                  {:else}
+                    &#10060;
+                  {/if}</td
+                >
+              </a>
               <td class="text-md hidden text-ellipsis text-center 2xl:block xl:w-[15%] 2xl:w-[12%]">
                 <button
                   on:click|stopPropagation={() => handleEdit(album)}
-                  class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+                  class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                 >
                   <Icon path={mdiPencilOutline} size="16" />
                 </button>
                 <button
                   on:click|stopPropagation={() => chooseAlbumToDelete(album)}
-                  class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+                  class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                 >
                   <Icon path={mdiTrashCanOutline} size="16" />
                 </button>

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

@@ -68,8 +68,6 @@
 
   let album = data.album;
 
-  $user = data.user;
-
   $: album = data.album;
 
   $: {

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

@@ -50,7 +50,7 @@
       <div class="flex flex-row {MAX_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4" bind:offsetWidth={innerWidth}>
         {#if MAX_ITEMS}
           {#each people as person (person.id)}
-            <a href="/people/{person.id}" class="w-20 md:w-24 text-center">
+            <a href="{AppRoute.PEOPLE}/{person.id}" class="w-20 md:w-24 text-center">
               <ImageThumbnail
                 circle
                 shadow
@@ -73,7 +73,7 @@
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each places as item (item.data.id)}
-          <a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
+          <a class="relative" href="{AppRoute.SEARCH}?{Field.CITY}={item.value}" draggable="false">
             <div
               class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >
@@ -97,7 +97,7 @@
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each things as item}
-          <a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
+          <a class="relative" href="{AppRoute.SEARCH}?{Field.OBJECTS}={item.value}" draggable="false">
             <div
               class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >

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

@@ -24,7 +24,6 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
-  import { user } from '$lib/stores/user.store';
 
   export let data: PageData;
 
@@ -34,8 +33,6 @@
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
-  $user = data.user;
-
   $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
 
   const handleEscape = () => {

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

@@ -27,7 +27,7 @@
         },
       });
 
-      goto('/albums/' + newAlbum.id);
+      goto(`${AppRoute.ALBUMS}/${newAlbum.id}`);
     } catch (e) {
       notificationController.show({
         message: 'Error creating album, check console for more details',
@@ -66,7 +66,7 @@
         <div class="flex flex-row flex-wrap gap-4">
           {#each data.partners as partner (partner.id)}
             <a
-              href="/partners/{partner.id}"
+              href="{AppRoute.PARTNERS}/{partner.id}"
               class="flex gap-4 rounded-lg px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <UserAvatar user={partner} size="lg" />