fix: web linting

web/package.json

@@ -79,7 +79,7 @@
     "justified-layout": "^4.1.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.4.4",
-    "socket.io-client": "~4.8.0",
+    "socket.io-client": "~4.7.5",
     "svelte-gestures": "^5.0.4",
     "svelte-i18n": "^4.0.1",
     "svelte-local-storage-store": "^0.6.4",

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -29,7 +29,7 @@
     // click runs before bind
     const previouslyEnabled = config.oauth.mobileOverrideEnabled;
     if (!previouslyEnabled && !config.oauth.mobileRedirectUri) {
-      config.oauth.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
+      config.oauth.mobileRedirectUri = globalThis.location.origin + '/api/oauth/mobile-redirect';
     }
   };
 

web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte

@@ -57,11 +57,11 @@
       handleError(error, $t('error_loading_image'));
     });
 
-    window.addEventListener('mousemove', handleMouseMove);
+    globalThis.addEventListener('mousemove', handleMouseMove);
   });
 
   onDestroy(() => {
-    window.removeEventListener('mousemove', handleMouseMove);
+    globalThis.removeEventListener('mousemove', handleMouseMove);
     resetCropStore();
     resetGlobalCropStore();
   });

web/src/lib/components/asset-viewer/editor/crop-tool/mouse-handlers.ts

@@ -58,7 +58,7 @@ export function handleMouseDown(e: MouseEvent) {
   }
 
   document.body.style.userSelect = 'none';
-  window.addEventListener('mouseup', handleMouseUp);
+  globalThis.addEventListener('mouseup', handleMouseUp);
 }
 
 export function handleMouseMove(e: MouseEvent) {
@@ -80,7 +80,7 @@ export function handleMouseMove(e: MouseEvent) {
 }
 
 export function handleMouseUp() {
-  window.removeEventListener('mouseup', handleMouseUp);
+  globalThis.removeEventListener('mouseup', handleMouseUp);
   document.body.style.userSelect = '';
   stopInteraction();
 }

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

@@ -107,7 +107,7 @@
   };
 
   const onCopyShortcut = (event: KeyboardEvent) => {
-    if (window.getSelection()?.type === 'Range') {
+    if (globalThis.getSelection()?.type === 'Range') {
       return;
     }
     event.preventDefault();

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

@@ -11,7 +11,6 @@
   let { onSuccess }: Props = $props();
 
   let errorMessage: string = $state('');
-  let success: string;
 
   let password = $state('');
   let passwordConfirm = $state('');
@@ -59,9 +58,6 @@
     <p class="text-sm text-red-400">{errorMessage}</p>
   {/if}
 
-  {#if success}
-    <p class="text-sm text-immich-primary">{success}</p>
-  {/if}
   <div class="my-5 flex w-full">
     <Button type="submit" size="lg" fullwidth>{$t('to_change_password')}</Button>
   </div>

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

@@ -28,8 +28,6 @@
     onEditSuccess,
   }: Props = $props();
 
-  let error: string;
-  let success: string;
   let quotaSize = $state(user.quotaSizeInBytes ? convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB) : null);
 
   const previousQutoa = user.quotaSizeInBytes;
@@ -149,14 +147,6 @@
         </a>
       </p>
     </div>
-
-    {#if error}
-      <p class="ml-4 text-sm text-red-400">{error}</p>
-    {/if}
-
-    {#if success}
-      <p class="ml-4 text-sm text-immich-primary">{success}</p>
-    {/if}
   </form>
 
   {#snippet stickyBottom()}

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

@@ -33,9 +33,9 @@
       return;
     }
 
-    if (oauth.isCallback(window.location)) {
+    if (oauth.isCallback(globalThis.location)) {
       try {
-        await oauth.login(window.location);
+        await oauth.login(globalThis.location);
         await onSuccess();
         return;
       } catch (error) {
@@ -46,9 +46,9 @@
     }
 
     try {
-      if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
+      if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) {
         await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
-        await oauth.authorize(window.location);
+        await oauth.authorize(globalThis.location);
         return;
       }
     } catch (error) {
@@ -85,7 +85,7 @@
   const handleOAuthLogin = async () => {
     oauthLoading = true;
     oauthError = '';
-    const success = await oauth.authorize(window.location);
+    const success = await oauth.authorize(globalThis.location);
     if (!success) {
       oauthLoading = false;
       oauthError = $t('errors.unable_to_login_with_oauth');

web/src/lib/components/i18n/format-bold-message.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import type { InterpolationValues } from '$lib/components/i18n/format-message';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import type { InterpolationValues } from '$lib/components/i18n/format-message.svelte';
   import type { Translations } from 'svelte-i18n';
 
   interface Props {

web/src/lib/components/i18n/format-message.svelte

@@ -1,17 +1,13 @@
-<script lang="ts" module>
-  import type { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat';
-  export type InterpolationValues = Record<string, PrimitiveType | FormatXMLElementFn<unknown>>;
-</script>
-
 <script lang="ts">
-  import { IntlMessageFormat } from 'intl-messageformat';
+  import { IntlMessageFormat, type FormatXMLElementFn } from 'intl-messageformat';
   import {
     TYPE,
     type MessageFormatElement,
     type PluralElement,
     type SelectElement,
   } from '@formatjs/icu-messageformat-parser';
   import { locale as i18nLocale, json, type Translations } from 'svelte-i18n';
+  import type { InterpolationValues } from '$lib/components/i18n/format-message';
 
   type MessagePart = {
     message: string;

web/src/lib/components/i18n/format-message.ts

@@ -0,0 +1,2 @@
+import type { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat';
+export type InterpolationValues = Record<string, PrimitiveType | FormatXMLElementFn<unknown>>;

web/src/lib/components/shared-components/change-location.svelte

@@ -69,6 +69,7 @@
     }
     showLoadingSpinner = true;
 
+    // eslint-disable-next-line unicorn/prefer-global-this
     const searchTimeout = window.setTimeout(() => {
       if (searchWord === '') {
         places = [];

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

@@ -29,6 +29,7 @@
     const contextMenuEvent = new MouseEvent('contextmenu', {
       bubbles: true,
       cancelable: true,
+      // eslint-disable-next-line unicorn/prefer-global-this
       view: window,
       clientX: event.x,
       clientY: event.y,

web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts

@@ -5,10 +5,10 @@ import { NotificationType } from '../notification';
 import NotificationCard from '../notification-card.svelte';
 
 describe('NotificationCard component', () => {
-  let sut: RenderResult<NotificationCard>;
+  let sut: RenderResult<typeof NotificationCard>;
 
   it('disposes timeout if already removed from the DOM', () => {
-    vi.spyOn(window, 'clearTimeout');
+    vi.spyOn(globalThis, 'clearTimeout');
 
     sut = render(NotificationCard, {
       notification: {
@@ -21,7 +21,7 @@ describe('NotificationCard component', () => {
     });
 
     cleanup();
-    expect(window.clearTimeout).toHaveBeenCalledTimes(1);
+    expect(globalThis.clearTimeout).toHaveBeenCalledTimes(1);
   });
 
   it('shows message and title', () => {

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -20,11 +20,11 @@
   let loading = $state(true);
 
   onMount(async () => {
-    if (oauth.isCallback(window.location)) {
+    if (oauth.isCallback(globalThis.location)) {
       try {
         loading = true;
 
-        user = await oauth.link(window.location);
+        user = await oauth.link(globalThis.location);
 
         notificationController.show({
           message: $t('linked_oauth_account'),
@@ -64,7 +64,7 @@
         {#if user.oauthId}
           <Button size="sm" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
         {:else}
-          <Button size="sm" onclick={() => oauth.authorize(window.location)}>{$t('link_to_oauth')}</Button>
+          <Button size="sm" onclick={() => oauth.authorize(globalThis.location)}>{$t('link_to_oauth')}</Button>
         {/if}
       {/if}
     </div>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -64,10 +64,7 @@
     for (const candidate of sharedWith) {
       const existIndex = partners.findIndex((p) => candidate.id === p.user.id);
 
-      if (existIndex >= 0) {
-        partners[existIndex].sharedWithMe = true;
-        partners[existIndex].inTimeline = candidate.inTimeline ?? false;
-      } else {
+      if (existIndex === -1) {
         partners = [
           ...partners,
           {
@@ -77,6 +74,9 @@
             inTimeline: candidate.inTimeline ?? false,
           },
         ];
+      } else {
+        partners[existIndex].sharedWithMe = true;
+        partners[existIndex].inTimeline = candidate.inTimeline ?? false;
       }
     }
   };

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -43,7 +43,7 @@
   let { keys = $bindable([]), sessions = $bindable([]) }: Props = $props();
 
   let oauthOpen =
-    oauth.isCallback(window.location) ||
+    oauth.isCallback(globalThis.location) ||
     $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH;
 </script>
 

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

@@ -16,7 +16,7 @@ export const handleToggleTheme = () => {
 };
 
 const initTheme = (): ThemeSetting => {
-  if (browser && window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  if (browser && globalThis.matchMedia && !globalThis.matchMedia('(prefers-color-scheme: dark)').matches) {
     return { value: Theme.LIGHT, system: false };
   }
   return { value: Theme.DARK, system: false };

web/src/lib/utils.ts

@@ -261,7 +261,7 @@ export const copyToClipboard = async (secret: string) => {
 };
 
 export const makeSharedLinkUrl = (externalDomain: string, key: string) => {
-  return new URL(`share/${key}`, externalDomain || window.location.origin).href;
+  return new URL(`share/${key}`, externalDomain || globalThis.location.origin).href;
 };
 
 export const oauth = {
@@ -283,7 +283,7 @@ export const oauth = {
     try {
       const redirectUri = location.href.split('?')[0];
       const { url } = await startOAuth({ oAuthConfigDto: { redirectUri } });
-      window.location.href = url;
+      globalThis.location.href = url;
       return true;
     } catch (error) {
       handleError(error, $t('errors.unable_to_login_with_oauth'));

web/src/lib/utils/asset-utils.ts

@@ -1,5 +1,6 @@
 import { goto } from '$app/navigation';
 import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
+import type { InterpolationValues } from '$lib/components/i18n/format-message';
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
 import { AppRoute } from '$lib/constants';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -33,7 +34,7 @@ import {
   type UserResponseDto,
 } from '@immich/sdk';
 import { DateTime } from 'luxon';
-import { t } from 'svelte-i18n';
+import { t, type Translations } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { handleError } from './handle-error';
 
@@ -120,7 +121,8 @@ export const addAssetsToNewAlbum = async (albumName: string, assetIds: string[])
     return;
   }
   const $t = get(t);
-  notificationController.show({
+  // for reasons beyond me <ComponentProps<typeof FormatBoldMessage>> doesn't work, even though it's (afaik) exactly this object
+  notificationController.show<{ key: Translations; values: InterpolationValues }>({
     type: NotificationType.Info,
     timeout: 5000,
     component: {
@@ -549,7 +551,7 @@ export const delay = async (ms: number) => {
 };
 
 export const canCopyImageToClipboard = (): boolean => {
-  return !!(navigator.clipboard && window.ClipboardItem);
+  return !!(navigator.clipboard && globalThis.ClipboardItem);
 };
 
 const imgToBlob = async (imageElement: HTMLImageElement) => {

web/src/lib/utils/auth.ts

@@ -95,7 +95,7 @@ export const handleLogout = async (redirectUri: string) => {
     if (redirectUri.startsWith('/')) {
       await goto(redirectUri);
     } else {
-      window.location.href = redirectUri;
+      globalThis.location.href = redirectUri;
     }
   } finally {
     resetSavedUser();

web/src/lib/utils/idle-callback-support.ts

@@ -16,5 +16,5 @@ function fake_cancelIdleCallback(id: number) {
   return clearTimeout(id);
 }
 
-export const idleCB = window.requestIdleCallback || fake_requestIdleCallback;
-export const cancelIdleCB = window.cancelIdleCallback || fake_cancelIdleCallback;
+export const idleCB = globalThis.requestIdleCallback || fake_requestIdleCallback;
+export const cancelIdleCB = globalThis.cancelIdleCallback || fake_cancelIdleCallback;