refactor(web): added types and some small changes (#1722)

web/src/lib/components/admin-page/server-stats/stats-card.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import type Icon from 'svelte-material-icons/AbTesting.svelte';
 	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let logo: any;
+	export let logo: typeof Icon;
 	export let title: string;
 	export let value: string;
 	export let unit: string | undefined = undefined;
@@ -13,13 +13,10 @@
 		}
 
 		const maxLength = 13;
-		let result = '';
 		const valueLength = parseInt(value).toString().length;
 		const zeroLength = maxLength - valueLength;
-		for (let i = 0; i < zeroLength; i++) {
-			result += '0';
-		}
-		return result;
+
+		return '0'.repeat(zeroLength);
 	};
 </script>
 

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

@@ -330,12 +330,8 @@
 		}
 	};
 
-	const showAlbumOptionsMenu = (event: CustomEvent) => {
-		contextMenuPosition = {
-			x: event.detail.mouseEvent.x,
-			y: event.detail.mouseEvent.y
-		};
-
+	const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
+		contextMenuPosition = { x, y };
 		isShowAlbumOptions = !isShowAlbumOptions;
 	};
 
@@ -467,7 +463,7 @@
 					{#if !isPublicShared}
 						<CircleIconButton
 							title="Album options"
-							on:click={(event) => showAlbumOptionsMenu(event)}
+							on:click={showAlbumOptionsMenu}
 							logo={DotsVertical}
 						/>
 					{/if}

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

@@ -31,12 +31,8 @@
 	let contextMenuPosition = { x: 0, y: 0 };
 	let isShowAssetOptions = false;
 
-	const showOptionsMenu = (event: CustomEvent) => {
-		contextMenuPosition = {
-			x: event.detail.mouseEvent.x,
-			y: event.detail.mouseEvent.y
-		};
-
+	const showOptionsMenu = ({ x, y }: MouseEvent) => {
+		contextMenuPosition = { x, y };
 		isShowAssetOptions = !isShowAssetOptions;
 	};
 
@@ -101,11 +97,7 @@
 
 		{#if isOwner}
 			<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
-			<CircleIconButton
-				logo={DotsVertical}
-				on:click={(event) => showOptionsMenu(event)}
-				title="More"
-			/>
+			<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More" />
 		{/if}
 	</div>
 </div>

web/src/lib/components/shared-components/circle-icon-button.svelte

@@ -2,31 +2,21 @@
 	/**
 	 * This is the circle icon component.
 	 */
-	import { createEventDispatcher } from 'svelte';
+	import type Icon from 'svelte-material-icons/AbTesting.svelte';
 
-	// TODO: why any here?
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let logo: any;
+	export let logo: typeof Icon;
 	export let backgroundColor = 'transparent';
 	export let hoverColor = '#e2e7e9';
 	export let size = '24';
 	export let title = '';
-	let iconButton: HTMLButtonElement;
-	const dispatch = createEventDispatcher();
-
-	$: {
-		if (iconButton) {
-			iconButton.style.backgroundColor = backgroundColor;
-			iconButton.style.setProperty('--immich-icon-button-hover-color', hoverColor);
-		}
-	}
 </script>
 
 <button
 	{title}
-	bind:this={iconButton}
+	style:backgroundColor
+	style:--immich-icon-button-hover-color={hoverColor}
 	class={`immich-circle-icon-button dark:text-immich-dark-fg hover:dark:text-immich-dark-gray rounded-full p-3 flex place-items-center place-content-center transition-all`}
-	on:click={(mouseEvent) => dispatch('click', { mouseEvent })}
+	on:click
 >
 	<svelte:component this={logo} {size} />
 </button>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+
 	export let title: string;
-	// TODO: why `any` here? There should be a expected type for this
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let logo: any;
+	export let logo: typeof Icon;
 	export let isSelected: boolean;
 
 	import { createEventDispatcher } from 'svelte';

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

@@ -64,12 +64,8 @@
 	let isShowAlbumPicker = false;
 	let addToSharedAlbum = false;
 
-	const handleShowMenu = (event: CustomEvent) => {
-		contextMenuPosition = {
-			x: event.detail.mouseEvent.x,
-			y: event.detail.mouseEvent.y
-		};
-
+	const handleShowMenu = ({ x, y }: MouseEvent) => {
+		contextMenuPosition = { x, y };
 		isShowAddMenu = !isShowAddMenu;
 	};