Merge pull request #642 from immich-app/add/ci-web-checks

Add web test / check commands and workflow to run in CI

.github/workflows/test.yml

@@ -28,3 +28,14 @@ jobs:
 
       - name: Run tests
         run: cd server && npm ci && npm run check:all
+
+  web-unit-tests:
+    name: Run web unit test suites and checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Run tests
+        run: cd web && npm ci && npm run check:all

dev-setup.md

@@ -0,0 +1,32 @@
+# Development Setup
+
+## Lint / format extensions
+
+Setting these in the IDE give a better developer experience auto-formatting code on save and providing instant feedback on lint issues.
+
+### VSCode
+Install Prettier, ESLint and Svelte extensions.
+
+in User `settings.json` (`cmd + shift + p` and search for Open User Settings JSON) add the following:
+
+```json
+{
+  "editor.formatOnSave": true,
+  "[javascript][typescript][css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2,
+    "editor.formatOnSave": true
+  },
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode",
+    "editor.tabSize": 2
+  },
+  "svelte.enable-ts-plugin": true,
+  "eslint.validate": ["javascript", "svelte"]
+}
+```
+
+## Running tests / checks
+
+In both server and web:
+`npm run check:all`

web/.eslintrc.cjs

@@ -16,5 +16,8 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
+	},
+	globals: {
+		NodeJS: true
 	}
 };

web/.prettierignore

@@ -6,6 +6,9 @@ node_modules
 .env
 .env.*
 !.env.example
+src/api/open-api
+*.md
+*.json
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

web/package.json

@@ -6,10 +6,14 @@
 		"build": "vite build",
 		"package": "svelte-kit package",
 		"preview": "vite preview",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
-		"format": "prettier --write --plugin-search-dir=. .",
+		"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+		"check:watch": "npm run check -- --watch",
+		"check:code": "npm run format && npm run lint && npm run check",
+		"check:all": "npm run check:code && npm test",
+		"lint": "eslint . --max-warnings 0",
+		"lint:fix": "npm run lint -- --fix",
+		"format": "prettier --check --plugin-search-dir=. .",
+		"format:fix": "prettier --write --plugin-search-dir=. .",
 		"test": "jest",
 		"test:watch": "npm test -- --watch"
 	},

web/src/api/utils.ts

@@ -1,5 +1,4 @@
-import { AssetCountByTimeGroupResponseDto } from '@api';
-let _basePath = '/api';
+const _basePath = '/api';
 
 export function getFileUrl(aid: string, did: string, isThumb?: boolean, isWeb?: boolean) {
 	const urlObj = new URL(`${window.location.origin}${_basePath}/asset/file`);

web/src/app.css

@@ -6,86 +6,86 @@
 @tailwind utilities;
 
 :root {
-    font-family: 'Work Sans', sans-serif;
-    /* --immich-icon-button-hover-color: #d3d3d3; */
+	font-family: 'Work Sans', sans-serif;
+	/* --immich-icon-button-hover-color: #d3d3d3; */
 }
 
 html {
-    height: 100%;
-    width: 100%;
+	height: 100%;
+	width: 100%;
 }
 
 html::-webkit-scrollbar {
-    width: 8px;
+	width: 8px;
 }
 
 /* Track */
 html::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 16px;
+	background: #f1f1f1;
+	border-radius: 16px;
 }
 
 /* Handle */
 html::-webkit-scrollbar-thumb {
-    background: rgba(85, 86, 87, 0.408);
-    border-radius: 16px;
+	background: rgba(85, 86, 87, 0.408);
+	border-radius: 16px;
 }
 
 /* Handle on hover */
 html::-webkit-scrollbar-thumb:hover {
-    background: #4250afad;
-    border-radius: 16px;
+	background: #4250afad;
+	border-radius: 16px;
 }
 
 body {
-    /* min-height: 100vh; */
-    margin: 0;
-    background-color: #f6f8fe;
-    color: #5f6368;
+	/* min-height: 100vh; */
+	margin: 0;
+	background-color: #f6f8fe;
+	color: #5f6368;
 }
 
 input:focus-visible {
-    outline-offset: 0px !important;
-    outline: none !important;
+	outline-offset: 0px !important;
+	outline: none !important;
 }
 
 @layer utilities {
-    .immich-form-input {
-        @apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm ;
-    }
-
-    .immich-form-label {
-        @apply font-medium text-sm text-gray-500;
-    }
-
-    .immich-btn-primary {
-        @apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
-    }
-
-    .immich-text-button {
-        @apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
-    }
-
-    /* width */
-    .immich-scrollbar::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    /* Track */
-    .immich-scrollbar::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 16px;
-    }
-
-    /* Handle */
-    .immich-scrollbar::-webkit-scrollbar-thumb {
-        background: rgba(85, 86, 87, 0.408);
-        border-radius: 16px;
-    }
-
-    /* Handle on hover */
-    .immich-scrollbar::-webkit-scrollbar-thumb:hover {
-        background: #4250afad;
-        border-radius: 16px;
-    }
+	.immich-form-input {
+		@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm;
+	}
+
+	.immich-form-label {
+		@apply font-medium text-sm text-gray-500;
+	}
+
+	.immich-btn-primary {
+		@apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
+	}
+
+	.immich-text-button {
+		@apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
+	}
+
+	/* width */
+	.immich-scrollbar::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	/* Track */
+	.immich-scrollbar::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 16px;
+	}
+
+	/* Handle */
+	.immich-scrollbar::-webkit-scrollbar-thumb {
+		background: rgba(85, 86, 87, 0.408);
+		border-radius: 16px;
+	}
+
+	/* Handle on hover */
+	.immich-scrollbar::-webkit-scrollbar-thumb:hover {
+		background: #4250afad;
+		border-radius: 16px;
+	}
 }

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

@@ -15,12 +15,11 @@
 	import { AlbumResponseDto, api, ThumbnailFormat } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import { fly } from 'svelte/transition';
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 
 	export let album: AlbumResponseDto;
 
-	let imageData: string = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
+	let imageData = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
 	const dispatchClick = createEventDispatcher<OnClick>();
 	const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
 
@@ -29,7 +28,7 @@
 			return;
 		}
 
-		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, {
+		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId, ThumbnailFormat.Jpeg, {
 			responseType: 'blob'
 		});
 

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

@@ -11,7 +11,6 @@
 	import CircleAvatar from '../shared-components/circle-avatar.svelte';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 	import AssetSelection from './asset-selection.svelte';
-	import _ from 'lodash-es';
 	import UserSelectionModal from './user-selection-modal.svelte';
 	import ShareInfoModal from './share-info-modal.svelte';
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
@@ -53,8 +52,7 @@
 	let currentViewAssetIndex = 0;
 
 	let viewWidth: number;
-	let thumbnailSize: number = 300;
-	let border = '';
+	let thumbnailSize = 300;
 	let backUrl = '/albums';
 	let currentAlbumName = '';
 	let currentUser: UserResponseDto;

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

@@ -2,9 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
-	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
 	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 	const dispatch = createEventDispatcher();

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

@@ -18,7 +18,7 @@
 	$: {
 		appearsInAlbums = [];
 
-		api.albumApi.getAllAlbums(undefined, asset.id).then(result => {
+		api.albumApi.getAllAlbums(undefined, asset.id).then((result) => {
 			appearsInAlbums = result.data;
 		});
 	}
@@ -29,12 +29,14 @@
 	let isShowDetail = false;
 	let appearsInAlbums: AlbumResponseDto[] = [];
 
+	const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
+
 	onMount(() => {
-		document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
+		document.addEventListener('keydown', onKeyboardPress);
 	});
 
 	onDestroy(() => {
-		document.removeEventListener('keydown', (e) => {});
+		document.removeEventListener('keydown', onKeyboardPress);
 	});
 
 	const handleKeyboardPress = (key: string) => {

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

@@ -9,10 +9,14 @@
 	import { browser } from '$app/env';
 	import { AssetResponseDto, AlbumResponseDto } from '@api';
 
+	type Leaflet = typeof import('leaflet');
+	type LeafletMap = import('leaflet').Map;
+	type LeafletMarker = import('leaflet').Marker;
+
 	// Map Property
-	let map: any;
-	let leaflet: any;
-	let marker: any;
+	let map: LeafletMap;
+	let leaflet: Leaflet;
+	let marker: LeafletMarker;
 
 	export let asset: AssetResponseDto;
 	$: if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
@@ -31,7 +35,6 @@
 
 	async function drawMap(lat: number, lon: number) {
 		if (!leaflet) {
-			// @ts-ignore
 			leaflet = await import('leaflet');
 		}
 

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

@@ -10,7 +10,7 @@
 	export let root: HTMLElement | null = null;
 
 	let intersecting = false;
-	let container: any;
+	let container: HTMLDivElement;
 	const dispatch = createEventDispatcher();
 
 	onMount(() => {

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

@@ -33,7 +33,9 @@
 
 			const assetData = URL.createObjectURL(data);
 			return assetData;
-		} catch (e) {}
+		} catch {
+			// Do nothing
+		}
 	};
 </script>
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import { api, AssetResponseDto, getFileUrl } from '@api';
 
@@ -9,8 +9,6 @@
 
 	let asset: AssetResponseDto;
 
-	const dispatch = createEventDispatcher();
-
 	let videoPlayerNode: HTMLVideoElement;
 	let isVideoLoading = true;
 	let videoUrl: string;

web/src/lib/components/forms/admin-registration-form.svelte

@@ -5,8 +5,8 @@
 	let error: string;
 	let success: string;
 
-	let password: string = '';
-	let confirmPassowrd: string = '';
+	let password = '';
+	let confirmPassowrd = '';
 
 	let canRegister = false;
 

web/src/lib/components/forms/change-password-form.svelte

@@ -6,8 +6,8 @@
 	let error: string;
 	let success: string;
 
-	let password: string = '';
-	let confirmPassowrd: string = '';
+	let password = '';
+	let confirmPassowrd = '';
 
 	let changeChagePassword = false;
 

web/src/lib/components/forms/create-user-form.svelte

@@ -1,122 +1,121 @@
 <script lang="ts">
-  import { api } from '@api';
-  import { createEventDispatcher } from 'svelte';
-
-  let error: string;
-  let success: string;
-
-  let password = '';
-  let confirmPassowrd = '';
-
-  let canCreateUser = false;
-
-  $: {
-    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-      error = 'Password does not match';
-      canCreateUser = false;
-    } else {
-      error = '';
-      canCreateUser = true;
-    }
-  }
-  const dispatch = createEventDispatcher();
-
-  async function registerUser(event: SubmitEvent) {
-    if (canCreateUser) {
-      error = '';
-
-      const formElement = event.target as HTMLFormElement;
-
-      const form = new FormData(formElement);
-
-      const email = form.get('email');
-      const password = form.get('password');
-      const firstName = form.get('firstName');
-      const lastName = form.get('lastName');
-
-      const {status} = await api.userApi.createUser({
-        email: String(email),
-        password: String(password),
-        firstName: String(firstName),
-        lastName: String(lastName)
-      });
-
-      if (status === 201) {
-        success = 'New user created';
-
-        dispatch('user-created');
-        return;
-      } else {
-        error = 'Error create user account';
-      }
-    }
-  }
+	import { api } from '@api';
+	import { createEventDispatcher } from 'svelte';
+
+	let error: string;
+	let success: string;
+
+	let password = '';
+	let confirmPassowrd = '';
+
+	let canCreateUser = false;
+
+	$: {
+		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+			error = 'Password does not match';
+			canCreateUser = false;
+		} else {
+			error = '';
+			canCreateUser = true;
+		}
+	}
+	const dispatch = createEventDispatcher();
+
+	async function registerUser(event: SubmitEvent) {
+		if (canCreateUser) {
+			error = '';
+
+			const formElement = event.target as HTMLFormElement;
+
+			const form = new FormData(formElement);
+
+			const email = form.get('email');
+			const password = form.get('password');
+			const firstName = form.get('firstName');
+			const lastName = form.get('lastName');
+
+			const { status } = await api.userApi.createUser({
+				email: String(email),
+				password: String(password),
+				firstName: String(firstName),
+				lastName: String(lastName)
+			});
+
+			if (status === 201) {
+				success = 'New user created';
+
+				dispatch('user-created');
+				return;
+			} else {
+				error = 'Error create user account';
+			}
+		}
+	}
 </script>
 
 <div class="border bg-white p-4 shadow-sm w-[500px] rounded-3xl py-8">
-    <div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-        <img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo"/>
-        <h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
-        <p class="text-sm border rounded-md p-4 font-mono text-gray-600">
-            Please provide your user with the password, they will have to change it on their first sign
-            in.
-        </p>
-    </div>
-
-    <form on:submit|preventDefault={registerUser} autocomplete="off">
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="email">Email</label>
-            <input class="immich-form-input" id="email" name="email" type="email" required/>
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="password">Password</label>
-            <input
-                    class="immich-form-input"
-                    id="password"
-                    name="password"
-                    type="password"
-                    required
-                    bind:value={password}
-            />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-            <input
-                    class="immich-form-input"
-                    id="confirmPassword"
-                    name="password"
-                    type="password"
-                    required
-                    bind:value={confirmPassowrd}
-            />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="firstName">First Name</label>
-            <input class="immich-form-input" id="firstName" name="firstName" type="text" required/>
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="lastName">Last Name</label>
-            <input class="immich-form-input" id="lastName" name="lastName" type="text" required/>
-        </div>
-
-        {#if error}
-            <p class="text-red-400 ml-4 text-sm">{error}</p>
-        {/if}
-
-        {#if success}
-            <p class="text-immich-primary ml-4 text-sm">{success}</p>
-        {/if}
-        <div class="flex w-full">
-            <button
-                    type="submit"
-                    class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
-            >Create
-            </button
-            >
-        </div>
-    </form>
+	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
+		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
+		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
+			Please provide your user with the password, they will have to change it on their first sign
+			in.
+		</p>
+	</div>
+
+	<form on:submit|preventDefault={registerUser} autocomplete="off">
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="email">Email</label>
+			<input class="immich-form-input" id="email" name="email" type="email" required />
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="password">Password</label>
+			<input
+				class="immich-form-input"
+				id="password"
+				name="password"
+				type="password"
+				required
+				bind:value={password}
+			/>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+			<input
+				class="immich-form-input"
+				id="confirmPassword"
+				name="password"
+				type="password"
+				required
+				bind:value={confirmPassowrd}
+			/>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="firstName">First Name</label>
+			<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="lastName">Last Name</label>
+			<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
+		</div>
+
+		{#if error}
+			<p class="text-red-400 ml-4 text-sm">{error}</p>
+		{/if}
+
+		{#if success}
+			<p class="text-immich-primary ml-4 text-sm">{success}</p>
+		{/if}
+		<div class="flex w-full">
+			<button
+				type="submit"
+				class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+				>Create
+			</button>
+		</div>
+	</form>
 </div>

web/src/lib/components/forms/edit-user-form.svelte

@@ -14,7 +14,6 @@
 
 	const dispatch = createEventDispatcher();
 
-	// eslint-disable-next-line no-undef
 	const editUser = async (event: SubmitEvent) => {
 		try {
 			const formElement = event.target as HTMLFormElement;
@@ -25,8 +24,8 @@
 
 			const { status } = await api.userApi.updateUser({
 				id: user.id,
-				firstName: firstName!.toString(),
-				lastName: lastName!.toString()
+				firstName: firstName?.toString(),
+				lastName: lastName?.toString()
 			});
 
 			if (status == 200) {

web/src/lib/components/forms/login-form.svelte

@@ -4,8 +4,8 @@
 	import { createEventDispatcher } from 'svelte';
 
 	let error: string;
-	let email: string = '';
-	let password: string = '';
+	let email = '';
+	let password = '';
 
 	const dispatch = createEventDispatcher();
 

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

@@ -7,7 +7,6 @@
 	import lodash from 'lodash-es';
 	import moment from 'moment';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
-	import { createEventDispatcher } from 'svelte';
 	import {
 		assetInteractionStore,
 		assetsInAlbumStoreState,
@@ -22,7 +21,7 @@
 
 	let isMouseOverGroup = false;
 	let actualBucketHeight: number;
-	let hoveredDateGroup: string = '';
+	let hoveredDateGroup = '';
 	$: assetsGroupByDate = lodash
 		.chain(assets)
 		.groupBy((a) => moment(a.createdAt).format('ddd, MMM DD YYYY'))

web/src/lib/components/shared-components/announcement-box.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-
 	import { createEventDispatcher } from 'svelte';
-	import { page } from '$app/stores';
 	import FullScreenModal from './full-screen-modal.svelte';
 	export let localVersion: string;
 	export let remoteVersion: string;

web/src/lib/components/shared-components/base-modal.svelte

@@ -22,7 +22,7 @@
 
 	onDestroy(() => {
 		if (browser) {
-			window.onscroll = function () {};
+			window.onscroll = null;
 		}
 	});
 </script>

web/src/lib/components/shared-components/circle-avatar.svelte

@@ -5,7 +5,7 @@
 	export let user: UserResponseDto;
 
 	// Avatar Size In Pixel
-	export let size: number = 48;
+	export let size = 48;
 
 	const dispatch = createEventDispatcher();
 

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

@@ -4,10 +4,12 @@
 	 */
 	import { createEventDispatcher } from 'svelte';
 
+	// TODO: why any here?
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let logo: any;
-	export let backgroundColor: string = 'transparent';
-	export let hoverColor: string = '#e2e7e9';
-	export let logoColor: string = '#5f6368';
+	export let backgroundColor = 'transparent';
+	export let hoverColor = '#e2e7e9';
+	export let logoColor = '#5f6368';
 	export let size = '24';
 	export let title = '';
 	let iconButton: HTMLButtonElement;

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -6,15 +6,13 @@
 
 	/**
 	 * x coordiante of the context menu.
-	 * @type {number}
 	 */
-	export let x: number = 0;
+	export let x = 0;
 
 	/**
 	 * x coordiante of the context menu.
-	 * @type {number}
 	 */
-	export let y: number = 0;
+	export let y = 0;
 
 	const dispatch = createEventDispatcher();
 

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -12,21 +12,23 @@
 
 	const dispatch = createEventDispatcher();
 
+	const onScroll = () => {
+		if (window.pageYOffset > 80) {
+			appBarBorder = 'border border-gray-200 bg-gray-50';
+		} else {
+			appBarBorder = 'bg-immich-bg border border-transparent';
+		}
+	};
+
 	onMount(() => {
 		if (browser) {
-			document.addEventListener('scroll', (e) => {
-				if (window.pageYOffset > 80) {
-					appBarBorder = 'border border-gray-200 bg-gray-50';
-				} else {
-					appBarBorder = 'bg-immich-bg border border-transparent';
-				}
-			});
+			document.addEventListener('scroll', onScroll);
 		}
 	});
 
 	onDestroy(() => {
 		if (browser) {
-			document.removeEventListener('scroll', (e) => {});
+			document.removeEventListener('scroll', onScroll);
 		}
 	});
 </script>

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

@@ -6,7 +6,7 @@
 	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
 	import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
 	import LoadingSpinner from './loading-spinner.svelte';
-	import { api, AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
+	import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
 
 	const dispatch = createEventDispatcher();
 
@@ -14,14 +14,14 @@
 	export let groupIndex = 0;
 	export let thumbnailSize: number | undefined = undefined;
 	export let format: ThumbnailFormat = ThumbnailFormat.Webp;
-	export let selected: boolean = false;
-	export let disabled: boolean = false;
+	export let selected = false;
+	export let disabled = false;
 	let imageData: string;
 
-	let mouseOver: boolean = false;
+	let mouseOver = false;
 	$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
 
-	let mouseOverIcon: boolean = false;
+	let mouseOverIcon = false;
 	let videoPlayerNode: HTMLVideoElement;
 	let isThumbnailVideoPlaying = false;
 	let calculateVideoDurationIntervalHandler: NodeJS.Timer;

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

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import { fade, fly, slide } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
 	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
 	import { clickOutside } from '../../utils/click-outside';
 	import { api, UserResponseDto } from '@api';

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

@@ -3,13 +3,10 @@
 
 	/**
 	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
-	 *
-	 * @param {HTMLElement} el
-	 * @param {HTMLElement|string} target DOM Element or CSS Selector
 	 */
-	export function portal(el: any, target: any = 'body') {
+	export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
 		let targetEl;
-		async function update(newTarget: any) {
+		async function update(newTarget: HTMLElement | string) {
 			target = newTarget;
 			if (typeof target === 'string') {
 				targetEl = document.querySelector(target);

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

@@ -3,14 +3,14 @@
 	import { SegmentScrollbarLayout } from './segment-scrollbar-layout';
 
 	export let scrollTop = 0;
-	export let viewportWidth = 0;
+	// export let viewportWidth = 0;
 	export let scrollbarHeight = 0;
 
 	let timelineHeight = 0;
 	let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];
 	let isHover = false;
 	let hoveredDate: Date;
-	let currentMouseYLocation: number = 0;
+	let currentMouseYLocation = 0;
 	let scrollbarPosition = 0;
 
 	$: {
@@ -34,30 +34,28 @@
 
 	onMount(() => {
 		// segmentScrollbarLayout = getLayoutDistance();
-
-		return () => {};
 	});
 
-	const getSegmentHeight = (groupCount: number) => {
-		// if (segmentData.groups.length > 0) {
-		// 	const percentage = (groupCount * 100) / segmentData.totalAssets;
-		// 	return Math.round((percentage * scrollbarHeight) / 100);
-		// } else {
-		// 	return 0;
-		// }
-	};
+	// const getSegmentHeight = (groupCount: number) => {
+	// if (segmentData.groups.length > 0) {
+	// 	const percentage = (groupCount * 100) / segmentData.totalAssets;
+	// 	return Math.round((percentage * scrollbarHeight) / 100);
+	// } else {
+	// 	return 0;
+	// }
+	// };
 
-	const getLayoutDistance = () => {
-		// let result: SegmentScrollbarLayout[] = [];
-		// for (const segment of segmentData.groups) {
-		// 	let segmentLayout = new SegmentScrollbarLayout();
-		// 	segmentLayout.count = segment.count;
-		// 	segmentLayout.height = getSegmentHeight(segment.count);
-		// 	segmentLayout.timeGroup = segment.timeGroup;
-		// 	result.push(segmentLayout);
-		// }
-		// return result;
-	};
+	// const getLayoutDistance = () => {
+	// let result: SegmentScrollbarLayout[] = [];
+	// for (const segment of segmentData.groups) {
+	// 	let segmentLayout = new SegmentScrollbarLayout();
+	// 	segmentLayout.count = segment.count;
+	// 	segmentLayout.height = getSegmentHeight(segment.count);
+	// 	segmentLayout.timeGroup = segment.timeGroup;
+	// 	result.push(segmentLayout);
+	// }
+	// return result;
+	// };
 
 	const handleMouseMove = (e: MouseEvent, currentDate: Date) => {
 		currentMouseYLocation = e.clientY - 71 - 30;

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

@@ -1,5 +1,7 @@
 <script lang="ts">
 	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 actionType: AdminSideBarSelection | AppSideBarSelection;
 	export let isSelected: boolean;

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

@@ -8,13 +8,13 @@
 	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
 	import SideBarButton from './side-bar-button.svelte';
 	import StatusBox from '../status-box.svelte';
-	import { AlbumCountResponseDto, api, AssetCountByUserIdResponseDto } from '@api';
+	import { api } from '@api';
 	import { fade } from 'svelte/transition';
 	import LoadingSpinner from '../loading-spinner.svelte';
 
 	let selectedAction: AppSideBarSelection;
 
-	let showAssetCount: boolean = false;
+	let showAssetCount = false;
 	let showSharingCount = false;
 	let showAlbumsCount = false;
 

web/src/lib/components/shared-components/upload-panel.svelte

@@ -5,8 +5,6 @@
 	import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
 	import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
 	import type { UploadAsset } from '$lib/models/upload-asset';
-	import { goto } from '$app/navigation';
-	import { assetStore } from '$lib/stores/assets.store';
 	import { notificationController, NotificationType } from './notification/notification';
 	let showDetail = true;
 
@@ -22,9 +20,13 @@
 				const blob = new Blob([arrayBufferView], { type: 'image/jpeg' });
 				const urlCreator = window.URL || window.webkitURL;
 				const imageUrl = urlCreator.createObjectURL(blob);
+				// TODO: There is probably a cleaner way of doing this
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				const img: any = document.getElementById(`${a.id}`);
 				img.src = imageUrl;
-			} catch (e) {}
+			} catch {
+				// Do nothing?
+			}
 		}
 	};
 

web/src/lib/components/sharing-page/shared-album-list-tile.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
-	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	export let album: AlbumResponseDto;
@@ -11,7 +10,7 @@
 			return '/no-thumbnail.png';
 		}
 
-		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, {
+		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId, ThumbnailFormat.Webp, {
 			responseType: 'blob'
 		});
 		if (data instanceof Blob) {

web/src/lib/constants.ts

@@ -1,2 +1,2 @@
 import { env } from '$env/dynamic/public';
-export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;
+export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;

web/src/lib/models/asset-grid-state.ts

@@ -16,17 +16,17 @@ export class AssetGridState {
 	 * The total height of the timeline in pixel
 	 * This value is first estimated by the number of asset and later is corrected as the user scroll
 	 */
-	timelineHeight: number = 0;
+	timelineHeight = 0;
 
 	/**
 	 * The fixed viewport height in pixel
 	 */
-	viewportHeight: number = 0;
+	viewportHeight = 0;
 
 	/**
 	 * The fixed viewport width in pixel
 	 */
-	viewportWidth: number = 0;
+	viewportWidth = 0;
 
 	/**
 	 * List of bucket information

web/src/lib/stores/assets.store.ts

@@ -1,9 +1,6 @@
-import { TimeGroupEnum } from './../../api/open-api/api';
-import { writable, derived, readable } from 'svelte/store';
+import { writable } from 'svelte/store';
 import lodash from 'lodash-es';
-import _ from 'lodash';
-import moment from 'moment';
-import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto } from '@api';
+import { api, AssetCountByTimeBucketResponseDto } from '@api';
 import { AssetGridState } from '$lib/models/asset-grid-state';
 import { calculateViewportHeightByNumberOfAsset } from '$lib/utils/viewport-utils';
 
@@ -24,7 +21,7 @@ function createAssetStore() {
 		_loadingBucketState = state;
 	});
 	/**
-	 * Set intial state
+	 * Set initial state
 	 * @param viewportHeight
 	 * @param viewportWidth
 	 * @param data
@@ -78,6 +75,7 @@ function createAssetStore() {
 
 				return state;
 			});
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		} catch (e: any) {
 			if (e.name === 'CanceledError') {
 				return;

web/src/lib/stores/websocket.ts

@@ -19,7 +19,8 @@ export const openWebsocketConnection = () => {
 };
 
 const listenToEvent = (socket: Socket) => {
-	socket.on('on_upload_success', (data) => {});
+	//TODO: if we are not using this, we should probably remove it?
+	socket.on('on_upload_success', () => undefined);
 
 	socket.on('error', (e) => {
 		console.log('Websocket Error', e);

web/src/lib/utils/click-outside.ts

@@ -1,6 +1,7 @@
 export function clickOutside(node: Node) {
-	const handleClick = (event: any) => {
-		if (!node.contains(event.target)) {
+	const handleClick = (event: Event) => {
+		const targetNode = event.target as Node | null;
+		if (!node.contains(targetNode)) {
 			node.dispatchEvent(new CustomEvent('out-click'));
 		}
 	};

web/src/lib/utils/file-uploader.ts

@@ -27,14 +27,18 @@ export enum UploadType {
 
 export const openFileUploadDialog = (uploadType: UploadType) => {
 	try {
-		let fileSelector = document.createElement('input');
+		const fileSelector = document.createElement('input');
 
 		fileSelector.type = 'file';
 		fileSelector.multiple = true;
 		fileSelector.accept = 'image/*,video/*,.heic,.heif,.dng,.3gp';
 
-		fileSelector.onchange = async (e: any) => {
-			const files = Array.from<File>(e.target.files);
+		fileSelector.onchange = async (e: Event) => {
+			const target = e.target as HTMLInputElement;
+			if (!target.files) {
+				return;
+			}
+			const files = Array.from<File>(target.files);
 
 			if (files.length > 50) {
 				notificationController.show({
@@ -67,6 +71,7 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
 	}
 };
 
+//TODO: should probably use the @api SDK
 async function fileUploader(asset: File, uploadType: UploadType) {
 	const assetType = asset.type.split('/')[0].toUpperCase();
 	const temp = asset.name.split('.');
@@ -123,9 +128,10 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 
 		if (status === 200) {
 			if (data.isExist) {
-				if (uploadType === UploadType.ALBUM && data.id) {
+				const dataId = data.id;
+				if (uploadType === UploadType.ALBUM && dataId) {
 					albumUploadAssetStore.asset.update((a) => {
-						return [...a, data.id!];
+						return [...a, dataId];
 					});
 				}
 				return;
@@ -145,7 +151,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 			uploadAssetsStore.addNewUploadAsset(newUploadAsset);
 		};
 
-		request.upload.onload = (event) => {
+		request.upload.onload = () => {
 			setTimeout(() => {
 				uploadAssetsStore.removeUploadAsset(deviceAssetId);
 			}, 1000);
@@ -170,7 +176,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 		};
 
 		// listen for `error` event
-		request.upload.onerror = (event) => {
+		request.upload.onerror = () => {
 			uploadAssetsStore.removeUploadAsset(deviceAssetId);
 		};
 
@@ -192,9 +198,10 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 		console.log('error uploading file ', e);
 	}
 }
-
+// TODO: This should have a proper type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function handleUploadError(asset: File, respBody?: any) {
-	let extraMsg = respBody ? ' ' + respBody.message : '';
+	const extraMsg = respBody ? ' ' + respBody.message : '';
 
 	notificationController.show({
 		type: NotificationType.Error,

web/src/routes/+layout.server.ts

@@ -1,4 +1,4 @@
-import { serverApi, TimeGroupEnum } from '@api';
+import { serverApi } from '@api';
 import * as cookieParser from 'cookie';
 
 import type { LayoutServerLoad } from './$types';

web/src/routes/+layout.svelte

@@ -7,7 +7,6 @@
 	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
 	import { onMount } from 'svelte';
 	import { checkAppVersion } from '$lib/utils/check-app-version';
-	import { page } from '$app/stores';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
 	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';

web/src/routes/admin/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import { serverApi, UserResponseDto } from '@api';
+import { serverApi } from '@api';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ parent }) => {

web/src/routes/albums/+page.server.ts

@@ -1,6 +1,6 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AlbumResponseDto, serverApi } from '@api';
+import { serverApi } from '@api';
 
 export const load: PageServerLoad = async ({ parent }) => {
 	try {

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

@@ -6,8 +6,6 @@
 	import type { PageData } from './$types';
 
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
-	import { onMount } from 'svelte';
-	import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
 	import {
 		assetInteractionStore,
 		isMultiSelectStoreState,

web/svelte.config.js

@@ -1,6 +1,6 @@
 import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-node';
-import path from 'path';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: preprocess(),