refactor(web): use new open api client (#7097)

* refactor(web): use new open api client

* refactor: remove activity api

* refactor: trash, oauth, and partner apis

* refactor: job api

* refactor: face, library, system config

* refactor: user api

* refactor: album api

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { type AlbumResponseDto, api } from '@api';
-  import { createEventDispatcher, onMount } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import BaseModal from './base-modal.svelte';
-  import AlbumListItem from '../asset-viewer/album-list-item.svelte';
+  import { type AlbumResponseDto } from '@api';
+  import { getAllAlbums } from '@immich/sdk';
   import { mdiPlus } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import AlbumListItem from '../asset-viewer/album-list-item.svelte';
+  import BaseModal from './base-modal.svelte';
 
   let albums: AlbumResponseDto[] = [];
   let recentAlbums: AlbumResponseDto[] = [];
@@ -21,11 +22,8 @@
   export let shared: boolean;
 
   onMount(async () => {
-    const { data } = await api.albumApi.getAllAlbums({ shared: shared || undefined });
-    albums = data;
-
+    albums = await getAllAlbums({ shared: shared || undefined });
     recentAlbums = albums.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1)).slice(0, 3);
-
     loading = false;
   });
 

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

@@ -1,28 +1,29 @@
 <script lang="ts">
-  import {
-    MapLibre,
-    GeoJSON,
-    MarkerLayer,
-    AttributionControl,
-    ControlButton,
-    Control,
-    ControlGroup,
-    type Map,
-    FullscreenControl,
-    GeolocateControl,
-    NavigationControl,
-    ScaleControl,
-    Popup,
-  } from 'svelte-maplibre';
-  import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
-  import { type MapMarkerResponseDto, api } from '@api';
-  import maplibregl from 'maplibre-gl';
-  import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
-  import type { Feature, Geometry, GeoJsonProperties, Point } from 'geojson';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiCog, mdiMapMarker } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
   import { Theme } from '$lib/constants';
+  import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
+  import { api, type MapMarkerResponseDto } from '@api';
+  import { getMapStyle } from '@immich/sdk';
+  import { mdiCog, mdiMapMarker } from '@mdi/js';
+  import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
+  import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
+  import maplibregl from 'maplibre-gl';
+  import { createEventDispatcher } from 'svelte';
+  import {
+    AttributionControl,
+    Control,
+    ControlButton,
+    ControlGroup,
+    FullscreenControl,
+    GeoJSON,
+    GeolocateControl,
+    MapLibre,
+    MarkerLayer,
+    NavigationControl,
+    Popup,
+    ScaleControl,
+    type Map,
+  } from 'svelte-maplibre';
 
   export let mapMarkers: MapMarkerResponseDto[];
   export let showSettingsModal: boolean | undefined = undefined;
@@ -35,13 +36,10 @@
   let map: maplibregl.Map;
   let marker: maplibregl.Marker | null = null;
 
-  // eslint-disable-next-line unicorn/prefer-top-level-await
-  $: style = (async () => {
-    const { data } = await api.systemConfigApi.getMapStyle({
+  $: style = (() =>
+    getMapStyle({
       theme: $mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT,
-    });
-    return data as StyleSpecification;
-  })();
+    }) as Promise<StyleSpecification>)();
 
   const dispatch = createEventDispatcher<{
     selected: string[];

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { api, UserAvatarColor } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { fade } from 'svelte/transition';
-  import UserAvatar from '../user-avatar.svelte';
-  import { mdiCog, mdiLogout, mdiPencil } from '@mdi/js';
-  import { notificationController, NotificationType } from '../notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import AvatarSelector from './avatar-selector.svelte';
+  import { AppRoute } from '$lib/constants';
   import { user } from '$lib/stores/user.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { UserAvatarColor } from '@api';
+  import { deleteProfileImage, updateUser } from '@immich/sdk';
+  import { mdiCog, mdiLogout, mdiPencil } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { notificationController, NotificationType } from '../notification/notification';
+  import UserAvatar from '../user-avatar.svelte';
+  import AvatarSelector from './avatar-selector.svelte';
 
   let isShowSelectAvatar = false;
 
@@ -22,10 +23,10 @@
   const handleSaveProfile = async (color: UserAvatarColor) => {
     try {
       if ($user.profileImagePath !== '') {
-        await api.userApi.deleteProfileImage();
+        await deleteProfileImage();
       }
 
-      const { data } = await api.userApi.updateUser({
+      $user = await updateUser({
         updateUserDto: {
           id: $user.id,
           email: $user.email,
@@ -34,7 +35,6 @@
         },
       });
 
-      $user = data;
       isShowSelectAvatar = false;
 
       notificationController.show({

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

@@ -1,22 +1,22 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { resetSavedUser, user } from '$lib/stores/user.store';
   import { clickOutside } from '$lib/utils/click-outside';
+  import { logout } from '@immich/sdk';
+  import { mdiCog, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { fade, fly } from 'svelte/transition';
-  import { api } from '@api';
-  import ThemeButton from '../theme-button.svelte';
   import { AppRoute } from '../../../constants';
-  import AccountInfoPanel from './account-info-panel.svelte';
   import ImmichLogo from '../immich-logo.svelte';
   import SearchBar from '../search-bar/search-bar.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { mdiMagnify, mdiTrayArrowUp, mdiCog } from '@mdi/js';
-  import { resetSavedUser, user } from '$lib/stores/user.store';
+  import AccountInfoPanel from './account-info-panel.svelte';
 
   export let showUploadButton = true;
 
@@ -29,11 +29,11 @@
 
   const logOut = async () => {
     resetSavedUser();
-    const { data } = await api.authenticationApi.logout();
-    if (data.redirectUri.startsWith('/')) {
-      goto(data.redirectUri);
+    const { redirectUri } = await logout();
+    if (redirectUri.startsWith('/')) {
+      goto(redirectUri);
     } else {
-      window.location.href = data.redirectUri;
+      window.location.href = redirectUri;
     }
   };
 </script>

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { type AssetResponseDto, api } from '@api';
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { notificationController, NotificationType } from './notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import domtoimage from 'dom-to-image';
-  import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
-  import BaseModal from './base-modal.svelte';
-  import Button from '../elements/buttons/button.svelte';
   import { user } from '$lib/stores/user.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { type AssetResponseDto } from '@api';
+  import { createProfileImage } from '@immich/sdk';
+  import domtoimage from 'dom-to-image';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import BaseModal from './base-modal.svelte';
+  import { NotificationType, notificationController } from './notification/notification';
 
   export let asset: AssetResponseDto;
 
@@ -57,13 +58,13 @@
         return;
       }
       const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
-      const { data } = await api.userApi.createProfileImage({ file });
+      const { profileImagePath } = await createProfileImage({ createProfileImageDto: { file } });
       notificationController.show({
         type: NotificationType.Info,
         message: 'Profile picture set.',
         timeout: 3000,
       });
-      $user.profileImagePath = data.profileImagePath;
+      $user.profileImagePath = profileImagePath;
     } catch (error) {
       handleError(error, 'Error setting profile picture.');
     }

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

@@ -2,7 +2,8 @@
   import { page } from '$app/stores';
   import { locale, sidebarSettings } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { type AssetApiGetAssetStatisticsRequest, api } from '@api';
+  import { api, type AssetApiGetAssetStatisticsRequest } from '@api';
+  import { getAlbumCount } from '@immich/sdk';
   import {
     mdiAccount,
     mdiAccountMultiple,
@@ -28,10 +29,9 @@
     return stats;
   };
 
-  const getAlbumCount = async () => {
+  const handleAlbumCount = async () => {
     try {
-      const { data: albumCount } = await api.albumApi.getAlbumCount();
-      return albumCount;
+      return await getAlbumCount();
     } catch {
       return { owned: 0, shared: 0, notShared: 0 };
     }
@@ -85,7 +85,7 @@
         isSelected={isSharingSelected}
       >
         <svelte:fragment slot="moreInformation">
-          {#await getAlbumCount()}
+          {#await handleAlbumCount()}
             <LoadingSpinner />
           {:then data}
             <div>
@@ -127,7 +127,7 @@
       isSelected={$page.route.id === '/(user)/albums'}
     >
       <svelte:fragment slot="moreInformation">
-        {#await getAlbumCount()}
+        {#await handleAlbumCount()}
           <LoadingSpinner />
         {:then data}
           <div>