chore(web) Update SvelteKit (#1066)

* Update sveltekit

* Update sveltekit

* Update correct preloading attribute

web/src/lib/components/album-page/album-card.svelte

@@ -60,8 +60,10 @@
 <div
 	class="h-[339px] w-[275px] hover:cursor-pointer mt-4 relative"
 	on:click={() => dispatchClick('click', album)}
+	on:keydown={() => dispatchClick('click', album)}
 	data-testid="album-card"
 >
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		id={`icon-${album.id}`}
 		class="absolute top-2 right-2"

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -258,6 +258,7 @@
 			halfLeftHover = false;
 		}}
 		on:click={navigateAssetBackward}
+		on:keydown={navigateAssetBackward}
 	>
 		<button
 			class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000]  text-gray-500 mx-4"
@@ -291,6 +292,7 @@
 			asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
 		}`}
 		on:click={navigateAssetForward}
+		on:keydown={navigateAssetForward}
 		on:mouseenter={() => {
 			halfLeftHover = false;
 			halfRightHover = true;

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -197,8 +197,12 @@
 			<p class="text-sm pb-4 ">APPEARS IN</p>
 		{/if}
 		{#each albums as album}
-			<a data-sveltekit-prefetch href={`/albums/${album.id}`}>
+			<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
-				<div class="flex gap-4 py-2 hover:cursor-pointer" on:click={() => dispatch('click', album)}>
+				<div
+					class="flex gap-4 py-2 hover:cursor-pointer"
+					on:click={() => dispatch('click', album)}
+					on:keydown={() => dispatch('click', album)}
+				>
 					<div>
 						<img
 							alt={album.albumName}

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -137,6 +137,7 @@
 						transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
 						class="inline-block px-2 hover:cursor-pointer"
 						on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
+						on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
 					>
 						{#if $selectedGroup.has(dateGroupTitle)}
 							<CheckCircle size="24" color="#4250af" />

web/src/lib/components/shared-components/immich-thumbnail.svelte

@@ -154,6 +154,7 @@
 		on:mouseenter={handleMouseOverThumbnail}
 		on:mouseleave={handleMouseLeaveThumbnail}
 		on:click={thumbnailClickedHandler}
+		on:keydown={thumbnailClickedHandler}
 	>
 		{#if mouseOver || selected || disabled}
 			<div

web/src/lib/components/shared-components/navigation-bar.svelte

@@ -52,7 +52,7 @@
 >
 	<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
 		<a
-			data-sveltekit-prefetch
+			data-sveltekit-preload-data="hover"
 			class="flex gap-2 place-items-center hover:cursor-pointer"
 			href="/photos"
 		>
@@ -82,7 +82,7 @@
 			{/if}
 
 			{#if user.isAdmin}
-				<a data-sveltekit-prefetch href={`admin`}>
+				<a data-sveltekit-preload-data="hover" href={`admin`}>
 					<button
 						class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5  dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
 							$page.url.pathname == '/admin' &&
@@ -97,6 +97,7 @@
 				on:focus={() => (shouldShowAccountInfo = true)}
 				on:mouseleave={() => (shouldShowAccountInfo = false)}
 				on:click={showAccountInfoPanel}
+				on:keydown={showAccountInfoPanel}
 			>
 				<button
 					class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"

web/src/lib/components/shared-components/notification/notification-card.svelte

@@ -76,6 +76,7 @@
 	style:border={borderStyle()}
 	class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
 	on:click={handleClick}
+	on:keydown={handleClick}
 >
 	<div class="flex justify-between">
 		<div class="flex gap-2 place-items-center">

web/src/lib/components/shared-components/portal/portal.svelte

@@ -44,7 +44,7 @@
 	}
 </script>
 
-<script>
+<script lang="ts">
 	/**
 	 * DOM Element or CSS Selector
 	 * @type { HTMLElement|string}

web/src/lib/components/shared-components/scrollbar/scrollbar.svelte

@@ -28,7 +28,6 @@
 	export let scrollbarHeight = 0;
 
 	$: timelineHeight = $assetGridState.timelineHeight;
-	$: viewportWidth = $assetGridState.viewportWidth;
 	$: timelineScrolltop = (scrollbarPosition / scrollbarHeight) * timelineHeight;
 
 	let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];

web/src/lib/components/shared-components/side-bar/side-bar-button.svelte

@@ -23,6 +23,7 @@
 
 <div
 	on:click={onButtonClicked}
+	on:keydown={onButtonClicked}
 	class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
     ${
 			isSelected &&

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

@@ -20,11 +20,11 @@
 
 	// let domCount = 0;
 	onMount(async () => {
-		if ($page.routeId == 'albums') {
+		if ($page.route.id == 'albums') {
 			selectedAction = AppSideBarSelection.ALBUMS;
-		} else if ($page.routeId == 'photos') {
+		} else if ($page.route.id == 'photos') {
 			selectedAction = AppSideBarSelection.PHOTOS;
-		} else if ($page.routeId == 'sharing') {
+		} else if ($page.route.id == 'sharing') {
 			selectedAction = AppSideBarSelection.SHARING;
 		}
 
@@ -54,9 +54,9 @@
 
 <section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
 	<a
-		data-sveltekit-prefetch
+		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
-		href={$page.routeId !== 'photos' ? `/photos` : null}
+		href={$page.route.id !== 'photos' ? `/photos` : null}
 		class="relative"
 	>
 		<SideBarButton
@@ -92,8 +92,8 @@
 	</a>
 
 	<a
-		data-sveltekit-prefetch
+		data-sveltekit-preload-data="hover"
-		href={$page.routeId !== 'sharing' ? `/sharing` : null}
+		href={$page.route.id !== 'sharing' ? `/sharing` : null}
 		class="relative"
 	>
 		<SideBarButton
@@ -129,7 +129,11 @@
 	<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
 		<p>LIBRARY</p>
 	</div>
-	<a data-sveltekit-prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
+	<a
+		data-sveltekit-preload-data="hover"
+		href={$page.route.id !== 'albums' ? `/albums` : null}
+		class="relative"
+	>
 		<SideBarButton
 			title="Albums"
 			logo={ImageAlbum}

web/src/lib/components/shared-components/theme-button.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	let toggleButton: HTMLElement;
-
 	onMount(() => {
 		var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
 		var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
@@ -48,7 +46,6 @@
 </script>
 
 <button
-	bind:this={toggleButton}
 	on:click={toggleTheme}
 	id="theme-toggle"
 	type="button"

web/src/routes/albums/+page.svelte

@@ -80,7 +80,7 @@
 			<div class="flex flex-wrap gap-8">
 				{#each $albums as album}
 					{#key album.id}
-						<a data-sveltekit-prefetch href={`albums/${album.id}`}>
+						<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
 							<AlbumCard
 								{album}
 								on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
@@ -94,6 +94,7 @@
 			{#if $albums.length === 0}
 				<div
 					on:click={handleCreateAlbum}
+					on:keydown={handleCreateAlbum}
 					class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
 				>
 					<img src="/empty-1.svg" alt="Empty shared album" width="500" />

web/src/routes/sharing/+page.svelte

@@ -75,7 +75,7 @@
 			<!-- Share Album List -->
 			<div class="w-full flex flex-col place-items-center">
 				{#each data.sharedAlbums as album}
-					<a data-sveltekit-prefetch href={`albums/${album.id}`}>
+					<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
 						<SharedAlbumListTile {album} user={data.user} />
 					</a>
 				{/each}