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/api/api.ts

@@ -1,26 +1,12 @@
 import {
-  APIKeyApi,
-  ActivityApi,
-  AlbumApi,
   AssetApi,
   AssetApiFp,
   AssetJobName,
-  AuditApi,
-  AuthenticationApi,
   DownloadApi,
-  FaceApi,
-  JobApi,
   JobName,
-  LibraryApi,
-  OAuthApi,
-  PartnerApi,
   PersonApi,
   SearchApi,
-  ServerInfoApi,
   SharedLinkApi,
-  SystemConfigApi,
-  TrashApi,
-  UserApi,
   UserApiFp,
   base,
   common,
@@ -29,25 +15,11 @@ import {
 import type { ApiParams as ApiParameters } from './types';
 
 class ImmichApi {
-  public activityApi: ActivityApi;
-  public albumApi: AlbumApi;
   public downloadApi: DownloadApi;
-  public libraryApi: LibraryApi;
   public assetApi: AssetApi;
-  public auditApi: AuditApi;
-  public authenticationApi: AuthenticationApi;
-  public faceApi: FaceApi;
-  public jobApi: JobApi;
-  public keyApi: APIKeyApi;
-  public oauthApi: OAuthApi;
-  public partnerApi: PartnerApi;
   public searchApi: SearchApi;
-  public serverInfoApi: ServerInfoApi;
   public sharedLinkApi: SharedLinkApi;
   public personApi: PersonApi;
-  public systemConfigApi: SystemConfigApi;
-  public userApi: UserApi;
-  public trashApi: TrashApi;
 
   private config: configuration.Configuration;
   private key?: string;
@@ -59,25 +31,11 @@ class ImmichApi {
   constructor(parameters: configuration.ConfigurationParameters) {
     this.config = new configuration.Configuration(parameters);
 
-    this.activityApi = new ActivityApi(this.config);
-    this.albumApi = new AlbumApi(this.config);
-    this.auditApi = new AuditApi(this.config);
     this.downloadApi = new DownloadApi(this.config);
-    this.libraryApi = new LibraryApi(this.config);
     this.assetApi = new AssetApi(this.config);
-    this.authenticationApi = new AuthenticationApi(this.config);
-    this.faceApi = new FaceApi(this.config);
-    this.jobApi = new JobApi(this.config);
-    this.keyApi = new APIKeyApi(this.config);
-    this.oauthApi = new OAuthApi(this.config);
-    this.partnerApi = new PartnerApi(this.config);
     this.searchApi = new SearchApi(this.config);
-    this.serverInfoApi = new ServerInfoApi(this.config);
     this.sharedLinkApi = new SharedLinkApi(this.config);
     this.personApi = new PersonApi(this.config);
-    this.systemConfigApi = new SystemConfigApi(this.config);
-    this.userApi = new UserApi(this.config);
-    this.trashApi = new TrashApi(this.config);
   }
 
   private createUrl(path: string, parameters?: Record<string, unknown>) {

web/src/api/utils.ts

@@ -1,11 +1,11 @@
-import type { AxiosError, AxiosPromise } from 'axios';
+import { finishOAuth, linkOAuthAccount, startOAuth, unlinkOAuthAccount } from '@immich/sdk';
+import type { UserResponseDto } from '@immich/sdk/axios';
+import type { AxiosError } from 'axios';
 import {
-  notificationController,
   NotificationType,
+  notificationController,
 } from '../lib/components/shared-components/notification/notification';
 import { handleError } from '../lib/utils/handle-error';
-import { api } from './api';
-import type { UserResponseDto } from '@immich/sdk/axios';
 
 export type ApiError = AxiosError<{ message: string }>;
 
@@ -43,8 +43,8 @@ export const oauth = {
   authorize: async (location: Location) => {
     try {
       const redirectUri = location.href.split('?')[0];
-      const { data } = await api.oauthApi.startOAuth({ oAuthConfigDto: { redirectUri } });
-      window.location.href = data.url;
+      const { url } = await startOAuth({ oAuthConfigDto: { redirectUri } });
+      window.location.href = url;
       return true;
     } catch (error) {
       handleError(error, 'Unable to login with OAuth');
@@ -52,12 +52,12 @@ export const oauth = {
     }
   },
   login: (location: Location) => {
-    return api.oauthApi.finishOAuth({ oAuthCallbackDto: { url: location.href } });
+    return finishOAuth({ oAuthCallbackDto: { url: location.href } });
   },
-  link: (location: Location): AxiosPromise<UserResponseDto> => {
-    return api.oauthApi.linkOAuthAccount({ oAuthCallbackDto: { url: location.href } });
+  link: (location: Location): Promise<UserResponseDto> => {
+    return linkOAuthAccount({ oAuthCallbackDto: { url: location.href } });
   },
   unlink: () => {
-    return api.oauthApi.unlinkOAuthAccount();
+    return unlinkOAuthAccount();
   },
 };

web/src/lib/components/admin-page/delete-confirm-dialoge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { handleError } from '../../utils/handle-error';
+  import { handleError } from '$lib/utils/handle-error';
+  import { deleteUser, type UserResponseDto } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
 
   export let user: UserResponseDto;
 
@@ -11,10 +11,10 @@
     fail: void;
   }>();
 
-  const deleteUser = async () => {
+  const handleDeleteUser = async () => {
     try {
-      const deletedUser = await api.userApi.deleteUser({ id: user.id });
-      if (deletedUser.data.deletedAt == undefined) {
+      const { deletedAt } = await deleteUser({ id: user.id });
+      if (deletedAt == undefined) {
         dispatch('fail');
       } else {
         dispatch('success');
@@ -26,7 +26,7 @@
   };
 </script>
 
-<ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={deleteUser} on:cancel>
+<ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={handleDeleteUser} on:cancel>
   <svelte:fragment slot="prompt">
     <div class="flex flex-col gap-4">
       <p>

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -21,6 +21,7 @@
   import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import JobTile from './job-tile.svelte';
   import StorageMigrationDescription from './storage-migration-description.svelte';
+  import { sendJobCommand } from '@immich/sdk';
 
   export let jobs: AllJobStatusResponseDto;
 
@@ -127,8 +128,7 @@
     const title = jobDetails[jobId]?.title;
 
     try {
-      const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
-      jobs[jobId] = data;
+      jobs[jobId] = await sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
 
       switch (jobCommand.command) {
         case JobCommand.Empty: {

web/src/lib/components/admin-page/restore-dialoge.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { restoreUser, type UserResponseDto } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
 
   export let user: UserResponseDto;
 
@@ -10,9 +10,9 @@
     fail: void;
   }>();
 
-  const restoreUser = async () => {
-    const restoredUser = await api.userApi.restoreUser({ id: user.id });
-    if (restoredUser.data.deletedAt == undefined) {
+  const handleRestoreUser = async () => {
+    const { deletedAt } = await restoreUser({ id: user.id });
+    if (deletedAt == undefined) {
       dispatch('success');
     } else {
       dispatch('fail');
@@ -20,7 +20,13 @@
   };
 </script>
 
-<ConfirmDialogue title="Restore User" confirmText="Continue" confirmColor="green" on:confirm={restoreUser} on:cancel>
+<ConfirmDialogue
+  title="Restore User"
+  confirmText="Continue"
+  confirmColor="green"
+  on:confirm={handleRestoreUser}
+  on:cancel
+>
   <svelte:fragment slot="prompt">
     <p><b>{user.name}</b>'s account will be restored.</p>
   </svelte:fragment>

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

@@ -1,15 +1,15 @@
 <svelte:options accessors />
 
 <script lang="ts">
-  import { type SystemConfigDto, api } from '@api';
   import {
-    notificationController,
     NotificationType,
+    notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
-  import type { SettingsEventType } from './admin-settings';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
   import { cloneDeep } from 'lodash-es';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import type { SettingsEventType } from './admin-settings';
 
   export let config: SystemConfigDto;
 
@@ -24,7 +24,7 @@
 
   const handleSave = async (update: Partial<SystemConfigDto>) => {
     try {
-      const { data: newConfig } = await api.systemConfigApi.updateConfig({
+      const newConfig = await updateConfig({
         systemConfigDto: {
           ...savedConfig,
           ...update,
@@ -42,7 +42,7 @@
   };
 
   const reset = async (configKeys: Array<keyof SystemConfigDto>) => {
-    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+    const resetConfig = await getConfig();
 
     for (const key of configKeys) {
       config = { ...config, [key]: resetConfig[key] };
@@ -66,10 +66,7 @@
   };
 
   onMount(async () => {
-    [savedConfig, defaultConfig] = await Promise.all([
-      api.systemConfigApi.getConfig().then((res) => res.data),
-      api.systemConfigApi.getConfigDefaults().then((res) => res.data),
-    ]);
+    [savedConfig, defaultConfig] = await Promise.all([getConfig(), getConfigDefaults()]);
   });
 </script>
 

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { AppRoute } from '$lib/constants';
   import { user } from '$lib/stores/user.store';
-  import { api, type SystemConfigDto, type SystemConfigTemplateStorageOptionDto } from '@api';
+  import {
+    getStorageTemplateOptions,
+    type SystemConfigDto,
+    type SystemConfigTemplateStorageOptionDto,
+  } from '@immich/sdk';
   import handlebar from 'handlebars';
   import { isEqual } from 'lodash-es';
   import * as luxon from 'luxon';
@@ -13,7 +18,6 @@
   import SettingSwitch from '../setting-switch.svelte';
   import SupportedDatetimePanel from './supported-datetime-panel.svelte';
   import SupportedVariablesPanel from './supported-variables-panel.svelte';
-  import { AppRoute } from '$lib/constants';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;
@@ -26,14 +30,11 @@
   let selectedPreset = '';
 
   const getTemplateOptions = async () => {
-    templateOptions = await api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data);
+    templateOptions = await getStorageTemplateOptions();
     selectedPreset = savedConfig.storageTemplate.template;
   };
 
-  const getSupportDateTimeFormat = async () => {
-    const { data } = await api.systemConfigApi.getStorageTemplateOptions();
-    return data;
-  };
+  const getSupportDateTimeFormat = () => getStorageTemplateOptions();
 
   $: parsedTemplate = () => {
     try {

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

@@ -1,14 +1,15 @@
 <script lang="ts">
   import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
-  import { locale } from '$lib/stores/preferences.store';
-  import { type AlbumResponseDto, api, ThumbnailFormat, type UserResponseDto } from '@api';
-  import { createEventDispatcher, onMount } from 'svelte';
-  import IconButton from '../elements/buttons/icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import type { OnClick, OnShowContextMenu } from './album-card';
-  import { getContextMenuPosition } from '../../utils/context-menu';
-  import { mdiDotsVertical } from '@mdi/js';
+  import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
+  import { ThumbnailFormat, api, type AlbumResponseDto } from '@api';
+  import { getUserById } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { getContextMenuPosition } from '../../utils/context-menu';
+  import IconButton from '../elements/buttons/icon-button.svelte';
+  import type { OnClick, OnShowContextMenu } from './album-card';
 
   export let album: AlbumResponseDto;
   export let isSharingView = false;
@@ -51,11 +52,7 @@
     imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
   });
 
-  const getAlbumOwnerInfo = async (): Promise<UserResponseDto> => {
-    const { data } = await api.userApi.getUserById({ id: album.ownerId });
-
-    return data;
-  };
+  const getAlbumOwnerInfo = () => getUserById({ id: album.ownerId });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

web/src/lib/components/album-page/share-info-modal.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
+  import { type AlbumResponseDto, type UserResponseDto } from '@api';
+  import { getMyUserInfo, removeUserFromAlbum } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { type AlbumResponseDto, api, type UserResponseDto } from '@api';
-  import BaseModal from '../shared-components/base-modal.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import { getContextMenuPosition } from '../../utils/context-menu';
+  import { handleError } from '../../utils/handle-error';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import BaseModal from '../shared-components/base-modal.svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import { handleError } from '../../utils/handle-error';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-  import { getContextMenuPosition } from '../../utils/context-menu';
-  import { mdiDotsVertical } from '@mdi/js';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let album: AlbumResponseDto;
 
@@ -28,8 +29,7 @@
 
   onMount(async () => {
     try {
-      const { data } = await api.userApi.getMyUserInfo();
-      currentUser = data;
+      currentUser = await getMyUserInfo();
     } catch (error) {
       handleError(error, 'Unable to refresh user');
     }
@@ -54,7 +54,7 @@
     const userId = selectedRemoveUser.id === currentUser?.id ? 'me' : selectedRemoveUser.id;
 
     try {
-      await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
+      await removeUserFromAlbum({ id: album.id, userId });
       dispatch('remove', userId);
       const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.name}`;
       notificationController.show({ type: NotificationType.Info, message });

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { type AlbumResponseDto, api, type SharedLinkResponseDto, type UserResponseDto } from '@api';
-  import BaseModal from '../shared-components/base-modal.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
   import { goto } from '$app/navigation';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { api, type AlbumResponseDto, type SharedLinkResponseDto, type UserResponseDto } from '@api';
+  import { getAllUsers } from '@immich/sdk';
+  import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import BaseModal from '../shared-components/base-modal.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let album: AlbumResponseDto;
   let users: UserResponseDto[] = [];
@@ -22,7 +23,7 @@
   let sharedLinks: SharedLinkResponseDto[] = [];
   onMount(async () => {
     await getSharedLinks();
-    const { data } = await api.userApi.getAllUsers({ isAll: false });
+    const data = await getAllUsers({ isAll: false });
 
     // remove invalid users
     users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));

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

@@ -1,26 +1,27 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import { mdiClose, mdiHeart, mdiSend, mdiDotsVertical } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { getAssetType } from '$lib/utils/asset-utils';
+  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import { clickOutside } from '$lib/utils/click-outside';
+  import { handleError } from '$lib/utils/handle-error';
+  import { isTenMinutesApart } from '$lib/utils/timesince';
   import {
-    type ActivityResponseDto,
-    api,
     AssetTypeEnum,
     ReactionType,
     ThumbnailFormat,
+    api,
+    type ActivityResponseDto,
     type UserResponseDto,
   } from '@api';
-  import { handleError } from '$lib/utils/handle-error';
-  import { isTenMinutesApart } from '$lib/utils/timesince';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { createActivity, deleteActivity, getActivities } from '@immich/sdk';
+  import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
+  import * as luxon from 'luxon';
+  import { createEventDispatcher, onMount } from 'svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { getAssetType } from '$lib/utils/asset-utils';
-  import * as luxon from 'luxon';
-  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 
@@ -85,8 +86,7 @@
 
   const getReactions = async () => {
     try {
-      const { data } = await api.activityApi.getActivities({ assetId, albumId });
-      reactions = data;
+      reactions = await getActivities({ assetId, albumId });
     } catch (error) {
       handleError(error, 'Error when fetching reactions');
     }
@@ -111,7 +111,7 @@
 
   const handleDeleteReaction = async (reaction: ActivityResponseDto, index: number) => {
     try {
-      await api.activityApi.deleteActivity({ id: reaction.id });
+      await deleteActivity({ id: reaction.id });
       reactions.splice(index, 1);
       showDeleteReaction.splice(index, 1);
       reactions = reactions;
@@ -135,7 +135,7 @@
     }
     const timeout = setTimeout(() => (isSendingMessage = true), timeBeforeShowLoadingSpinner);
     try {
-      const { data } = await api.activityApi.createActivity({
+      const data = await createActivity({
         activityCreateDto: { albumId, assetId, type: ReactionType.Comment, comment: message },
       });
       reactions.push(data);

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

@@ -1,47 +1,55 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
+  import { updateNumberOfComments } from '$lib/stores/activity.store';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import type { AssetStore } from '$lib/stores/assets.store';
+  import { isShowDetail, showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
+  import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
+  import { user } from '$lib/stores/user.store';
+  import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { SlideshowHistory } from '$lib/utils/slideshow-history';
   import {
-    type ActivityResponseDto,
-    type AlbumResponseDto,
-    api,
     AssetJobName,
-    type AssetResponseDto,
     AssetTypeEnum,
     ReactionType,
+    api,
+    type ActivityResponseDto,
+    type AlbumResponseDto,
+    type AssetResponseDto,
     type SharedLinkResponseDto,
   } from '@api';
+  import {
+    createActivity,
+    createAlbum,
+    deleteActivity,
+    getActivities,
+    getActivityStatistics,
+    getAllAlbums,
+  } from '@immich/sdk';
+  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { fly } from 'svelte/transition';
+  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
+  import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
   import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
+  import ActivityStatus from './activity-status.svelte';
+  import ActivityViewer from './activity-viewer.svelte';
   import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
   import DetailPanel from './detail-panel.svelte';
-  import PhotoViewer from './photo-viewer.svelte';
-  import VideoViewer from './video-viewer.svelte';
-  import PanoramaViewer from './panorama-viewer.svelte';
-  import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
-  import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
-  import { isShowDetail, showDeleteModal } from '$lib/stores/preferences.store';
-  import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
   import NavigationArea from './navigation-area.svelte';
-  import { browser } from '$app/environment';
-  import { handleError } from '$lib/utils/handle-error';
-  import type { AssetStore } from '$lib/stores/assets.store';
-  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { SlideshowHistory } from '$lib/utils/slideshow-history';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
-  import ActivityViewer from './activity-viewer.svelte';
-  import ActivityStatus from './activity-status.svelte';
-  import { updateNumberOfComments } from '$lib/stores/activity.store';
-  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
+  import PanoramaViewer from './panorama-viewer.svelte';
+  import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
-  import { user } from '$lib/stores/user.store';
-  import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
+  import VideoViewer from './video-viewer.svelte';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -119,11 +127,11 @@
       try {
         if (isLiked) {
           const activityId = isLiked.id;
-          await api.activityApi.deleteActivity({ id: activityId });
+          await deleteActivity({ id: activityId });
           reactions = reactions.filter((reaction) => reaction.id !== activityId);
           isLiked = null;
         } else {
-          const { data } = await api.activityApi.createActivity({
+          const data = await createActivity({
             activityCreateDto: { albumId: album.id, assetId: asset.id, type: ReactionType.Like },
           });
 
@@ -139,11 +147,11 @@
   const getFavorite = async () => {
     if (album && $user) {
       try {
-        const { data } = await api.activityApi.getActivities({
+        const data = await getActivities({
           userId: $user.id,
           assetId: asset.id,
           albumId: album.id,
-          type: ReactionType.Like,
+          $type: ReactionType.Like,
         });
         isLiked = data.length > 0 ? data[0] : null;
       } catch (error) {
@@ -155,8 +163,8 @@
   const getNumberOfComments = async () => {
     if (album) {
       try {
-        const { data } = await api.activityApi.getActivityStatistics({ assetId: asset.id, albumId: album.id });
-        numberOfComments = data.comments;
+        const { comments } = await getActivityStatistics({ assetId: asset.id, albumId: album.id });
+        numberOfComments = comments;
       } catch (error) {
         handleError(error, "Can't get number of comments");
       }
@@ -192,7 +200,7 @@
     });
 
     if (!sharedLink) {
-      await getAllAlbums();
+      await handleGetAllAlbums();
     }
 
     // Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
@@ -224,16 +232,15 @@
     }
   });
 
-  $: asset.id && !sharedLink && getAllAlbums(); // Update the album information when the asset ID changes
+  $: asset.id && !sharedLink && handleGetAllAlbums(); // Update the album information when the asset ID changes
 
-  const getAllAlbums = async () => {
+  const handleGetAllAlbums = async () => {
     if (api.isSharedLink) {
       return;
     }
 
     try {
-      const { data } = await api.albumApi.getAllAlbums({ assetId: asset.id });
-      appearsInAlbums = data;
+      appearsInAlbums = await getAllAlbums({ assetId: asset.id });
     } catch (error) {
       console.error('Error getting album that asset belong to', error);
     }
@@ -435,20 +442,18 @@
     addToSharedAlbum = shared;
   };
 
-  const handleAddToNewAlbum = (albumName: string) => {
+  const handleAddToNewAlbum = async (albumName: string) => {
     isShowAlbumPicker = false;
 
-    api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } }).then((response) => {
-      const album = response.data;
-      goto(`${AppRoute.ALBUMS}/${album.id}`);
-    });
+    const album = await createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } });
+    await goto(`${AppRoute.ALBUMS}/${album.id}`);
   };
 
   const handleAddToAlbum = async (album: AlbumResponseDto) => {
     isShowAlbumPicker = false;
 
     await addAssetsToAlbum(album.id, [asset.id]);
-    await getAllAlbums();
+    await handleGetAllAlbums();
   };
 
   const disableKeyDownEvent = () => {

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -14,6 +14,7 @@
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { getFaces, reassignFacesById } from '@immich/sdk';
 
   export let assetId: string;
   export let assetType: AssetTypeEnum;
@@ -70,8 +71,7 @@
     try {
       const { data } = await api.personApi.getAllPeople({ withHidden: true });
       allPeople = data.people;
-      const result = await api.faceApi.getFaces({ id: assetId });
-      peopleWithFaces = result.data;
+      peopleWithFaces = await getFaces({ id: assetId });
       selectedPersonToCreate = Array.from({ length: peopleWithFaces.length });
       selectedPersonToReassign = Array.from({ length: peopleWithFaces.length });
     } catch (error) {
@@ -110,14 +110,14 @@
           const personId = selectedPersonToReassign[index]?.id;
 
           if (personId) {
-            await api.faceApi.reassignFacesById({
+            await reassignFacesById({
               id: personId,
               faceDto: { id: peopleWithFace.id },
             });
           } else if (selectedPersonToCreate[index]) {
             const { data } = await api.personApi.createPerson();
             numberOfPersonToCreate.push(data.id);
-            await api.faceApi.reassignFacesById({
+            await reassignFacesById({
               id: data.id,
               faceDto: { id: peopleWithFace.id },
             });

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

@@ -1,27 +1,28 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
-  import { api } from '@api';
+  import { signUpAdmin } from '@immich/sdk';
+  import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
 
-  let error: string;
+  let errorMessage: string;
   let password = '';
   let confirmPassowrd = '';
   let canRegister = false;
 
   $: {
     if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-      error = 'Password does not match';
+      errorMessage = 'Password does not match';
       canRegister = false;
     } else {
-      error = '';
+      errorMessage = '';
       canRegister = true;
     }
   }
 
   async function registerAdmin(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
     if (canRegister) {
-      error = '';
+      errorMessage = '';
 
       const form = new FormData(event.currentTarget);
 
@@ -29,20 +30,19 @@
       const password = form.get('password');
       const name = form.get('name');
 
-      const { status } = await api.authenticationApi.signUpAdmin({
-        signUpDto: {
-          email: String(email),
-          password: String(password),
-          name: String(name),
-        },
-      });
+      try {
+        await signUpAdmin({
+          signUpDto: {
+            email: String(email),
+            password: String(password),
+            name: String(name),
+          },
+        });
 
-      if (status === 201) {
         await goto(AppRoute.AUTH_LOGIN);
-        return;
-      } else {
-        error = 'Error create admin account';
-        return;
+      } catch (error) {
+        handleError(error, 'Unable to create admin account');
+        errorMessage = 'Error create admin account';
       }
     }
   }
@@ -85,8 +85,8 @@
     <input class="immich-form-input" id="name" name="name" type="text" autocomplete="name" required />
   </div>
 
-  {#if error}
-    <p class="text-red-400">{error}</p>
+  {#if errorMessage}
+    <p class="text-red-400">{errorMessage}</p>
   {/if}
 
   <div class="my-5 flex w-full">

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

@@ -1,24 +1,24 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
+  import { updateUser, type UserResponseDto } from '@immich/sdk';
 
   export let user: UserResponseDto;
-  let error: string;
+  let errorMessage: string;
   let success: string;
 
   let password = '';
-  let confirmPassowrd = '';
+  let passwordConfirm = '';
 
-  let changeChagePassword = false;
+  let valid = false;
 
   $: {
-    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-      error = 'Password does not match';
-      changeChagePassword = false;
+    if (password !== passwordConfirm && passwordConfirm.length > 0) {
+      errorMessage = 'Password does not match';
+      valid = false;
     } else {
-      error = '';
-      changeChagePassword = true;
+      errorMessage = '';
+      valid = true;
     }
   }
 
@@ -27,10 +27,10 @@
   }>();
 
   async function changePassword() {
-    if (changeChagePassword) {
-      error = '';
+    if (valid) {
+      errorMessage = '';
 
-      const { status } = await api.userApi.updateUser({
+      await updateUser({
         updateUserDto: {
           id: user.id,
           password: String(password),
@@ -38,12 +38,7 @@
         },
       });
 
-      if (status === 200) {
-        dispatch('success');
-        return;
-      } else {
-        console.error('Error changing password');
-      }
+      dispatch('success');
     }
   }
 </script>
@@ -71,12 +66,12 @@
       type="password"
       autocomplete="current-password"
       required
-      bind:value={confirmPassowrd}
+      bind:value={passwordConfirm}
     />
   </div>
 
-  {#if error}
-    <p class="text-sm text-red-400">{error}</p>
+  {#if errorMessage}
+    <p class="text-sm text-red-400">{errorMessage}</p>
   {/if}
 
   {#if success}

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { api } from '@api';
-  import { createEventDispatcher } from 'svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import Button from '../elements/buttons/button.svelte';
-  import { convertToBytes } from '$lib/utils/byte-converter';
   import { serverInfo } from '$lib/stores/server-info.store';
+  import { convertToBytes } from '$lib/utils/byte-converter';
+  import { handleError } from '$lib/utils/handle-error';
+  import { createUser } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
 
   let error: string;
   let success: string;
@@ -49,7 +49,7 @@
       const quotaSize = form.get('quotaSize');
 
       try {
-        const { status } = await api.userApi.createUser({
+        await createUser({
           createUserDto: {
             email: String(email),
             password: String(password),
@@ -58,26 +58,15 @@
           },
         });
 
-        if (status === 201) {
-          success = 'New user created';
+        success = 'New user created';
 
-          dispatch('submit');
+        dispatch('submit');
 
-          isCreatingUser = false;
-          return;
-        } else {
-          error = 'Error create user account';
-          isCreatingUser = false;
-        }
+        return;
       } catch (error) {
+        handleError(error, 'Unable to create user');
+      } finally {
         isCreatingUser = false;
-
-        console.log('[ERROR] registerUser', error);
-
-        notificationController.show({
-          message: `Error create new user, check console for more detail`,
-          type: NotificationType.Error,
-        });
       }
     }
   }

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { type AlbumResponseDto, api } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { handleError } from '../../utils/handle-error';
+  import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
   import { mdiImageAlbum } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
 
   export let album: AlbumResponseDto;
 
@@ -15,7 +15,7 @@
 
   const editUser = async () => {
     try {
-      const { status } = await api.albumApi.updateAlbumInfo({
+      await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           albumName: album.albumName,
@@ -23,9 +23,7 @@
         },
       });
 
-      if (status === 200) {
-        dispatch('editSuccess');
-      }
+      dispatch('editSuccess');
     } catch (error) {
       handleError(error, 'Unable to update user');
     }

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

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { createEventDispatcher } from 'svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import Button from '../elements/buttons/button.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiAccountEditOutline, mdiClose } from '@mdi/js';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import { AppRoute } from '$lib/constants';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
   import { serverInfo } from '$lib/stores/server-info.store';
+  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateUser, type UserResponseDto } from '@immich/sdk';
+  import { mdiAccountEditOutline, mdiClose } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   export let user: UserResponseDto;
   export let canResetPassword = true;
@@ -36,7 +35,7 @@
   const editUser = async () => {
     try {
       const { id, email, name, storageLabel, externalPath } = user;
-      const { status } = await api.userApi.updateUser({
+      await updateUser({
         updateUserDto: {
           id,
           email,
@@ -47,9 +46,7 @@
         },
       });
 
-      if (status === 200) {
-        dispatch('editSuccess');
-      }
+      dispatch('editSuccess');
     } catch (error) {
       handleError(error, 'Unable to update user');
     }
@@ -59,7 +56,7 @@
     try {
       const defaultPassword = 'password';
 
-      const { status } = await api.userApi.updateUser({
+      await updateUser({
         updateUserDto: {
           id: user.id,
           password: defaultPassword,
@@ -67,15 +64,9 @@
         },
       });
 
-      if (status == 200) {
-        dispatch('resetPasswordSuccess');
-      }
+      dispatch('resetPasswordSuccess');
     } catch (error) {
-      console.error('Error reseting user password', error);
-      notificationController.show({
-        message: 'Error reseting user password, check console for more details',
-        type: NotificationType.Error,
-      });
+      handleError(error, 'Unable to reset password');
     } finally {
       isShowResetPasswordConfirmation = false;
     }

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

@@ -4,7 +4,8 @@
   import { AppRoute } from '$lib/constants';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
-  import { api, oauth } from '@api';
+  import { oauth } from '@api';
+  import { getServerConfig, login } from '@immich/sdk';
   import { createEventDispatcher, onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
@@ -53,19 +54,13 @@
     oauthLoading = false;
   });
 
-  const login = async () => {
+  const handleLogin = async () => {
     try {
       errorMessage = '';
       loading = true;
 
-      const { data: user } = await api.authenticationApi.login({
-        loginCredentialDto: {
-          email,
-          password,
-        },
-      });
-
-      const { data: serverConfig } = await api.serverInfoApi.getServerConfig();
+      const user = await login({ loginCredentialDto: { email, password } });
+      const serverConfig = await getServerConfig();
 
       if (user.isAdmin && !serverConfig.isOnboarded) {
         dispatch('onboarding');
@@ -97,7 +92,7 @@
 </script>
 
 {#if !oauthLoading && $featureFlags.passwordLogin}
-  <form on:submit|preventDefault={login} class="mt-5 flex flex-col gap-5">
+  <form on:submit|preventDefault={handleLogin} class="mt-5 flex flex-col gap-5">
     {#if errorMessage}
       <p class="text-red-400" transition:fade>
         {errorMessage}

web/src/lib/components/onboarding-page/onboarding-storage-template.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import OnboardingCard from './onboarding-card.svelte';
-  import { createEventDispatcher, onMount } from 'svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import StorageTemplateSettings from '../admin-page/settings/storage-template/storage-template-settings.svelte';
-  import { type SystemConfigDto, api } from '@api';
   import { user } from '$lib/stores/user.store';
-  import AdminSettings from '../admin-page/settings/admin-settings.svelte';
+  import { type SystemConfigDto } from '@api';
+  import { getConfig } from '@immich/sdk';
   import { mdiArrowLeft, mdiCheck } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import AdminSettings from '../admin-page/settings/admin-settings.svelte';
+  import StorageTemplateSettings from '../admin-page/settings/storage-template/storage-template-settings.svelte';
   import Button from '../elements/buttons/button.svelte';
   import Icon from '../elements/icon.svelte';
+  import OnboardingCard from './onboarding-card.svelte';
 
   const dispatch = createEventDispatcher<{
     done: void;
@@ -18,8 +19,7 @@
   let config: SystemConfigDto | null = null;
 
   onMount(async () => {
-    const { data } = await api.systemConfigApi.getConfig();
-    config = data;
+    config = await getConfig();
   });
 </script>
 

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -6,11 +6,12 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { AppRoute } from '$lib/constants';
   import { addAssetsToAlbum } from '$lib/utils/asset-utils';
-  import { type AlbumResponseDto, api } from '@api';
+  import { type AlbumResponseDto } from '@api';
+  import { createAlbum } from '@immich/sdk';
   import { getMenuContext } from '../asset-select-context-menu.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { AppRoute } from '$lib/constants';
 
   export let shared = false;
   let showAlbumPicker = false;
@@ -27,8 +28,8 @@
     showAlbumPicker = false;
 
     const assetIds = [...getAssets()].map((asset) => asset.id);
-    api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds } }).then((response) => {
-      const { id, albumName } = response.data;
+    createAlbum({ createAlbumDto: { albumName, assetIds } }).then((response) => {
+      const { id, albumName } = response;
 
       notificationController.show({
         message: `Added ${assetIds.length} to ${albumName}`,

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -5,10 +5,10 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { type AlbumResponseDto, api } from '@api';
+  import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
+  import { mdiDeleteOutline } from '@mdi/js';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiDeleteOutline } from '@mdi/js';
 
   export let album: AlbumResponseDto;
   export let onRemove: ((assetIds: string[]) => void) | undefined;
@@ -21,13 +21,12 @@
   const removeFromAlbum = async () => {
     try {
       const ids = [...getAssets()].map((a) => a.id);
-      const { data: results } = await api.albumApi.removeAssetFromAlbum({
+      const results = await removeAssetFromAlbum({
         id: album.id,
         bulkIdsDto: { ids },
       });
 
-      const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
-      album = data;
+      album = await getAlbumInfo({ id: album.id });
 
       onRemove?.(ids);
 

web/src/lib/components/photos-page/actions/restore-assets.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import type { OnRestore } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
-  import { api } from '@api';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import { restoreAssets } from '@immich/sdk';
+  import { mdiHistory } from '@mdi/js';
   import Button from '../../elements/buttons/button.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiHistory } from '@mdi/js';
-  import type { OnRestore } from '$lib/utils/actions';
 
   export let onRestore: OnRestore | undefined;
 
@@ -22,7 +22,7 @@
 
     try {
       const ids = [...getAssets()].map((a) => a.id);
-      await api.trashApi.restoreAssets({ bulkIdsDto: { ids } });
+      await restoreAssets({ bulkIdsDto: { ids } });
       onRestore?.(ids);
 
       notificationController.show({

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>

web/src/lib/components/user-settings-page/change-password-settings.svelte

@@ -3,7 +3,8 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { api, type ApiError } from '@api';
+  import { type ApiError } from '@api';
+  import { changePassword } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
   import Button from '../elements/buttons/button.svelte';
@@ -14,12 +15,7 @@
 
   const handleChangePassword = async () => {
     try {
-      await api.authenticationApi.changePassword({
-        changePasswordDto: {
-          password,
-          newPassword,
-        },
-      });
+      await changePassword({ changePasswordDto: { password, newPassword } });
 
       notificationController.show({
         message: 'Updated password',

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { api, type AuthDeviceResponseDto } from '@api';
+  import { type AuthDeviceResponseDto } from '@api';
+  import { getAuthDevices, logoutAuthDevice, logoutAuthDevices } from '@immich/sdk';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
@@ -10,7 +11,7 @@
   let deleteDevice: AuthDeviceResponseDto | null = null;
   let deleteAll = false;
 
-  const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
+  const refresh = () => getAuthDevices().then((_devices) => (devices = _devices));
 
   $: currentDevice = devices.find((device) => device.current);
   $: otherDevices = devices.filter((device) => !device.current);
@@ -21,7 +22,7 @@
     }
 
     try {
-      await api.authenticationApi.logoutAuthDevice({ id: deleteDevice.id });
+      await logoutAuthDevice({ id: deleteDevice.id });
       notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
     } catch (error) {
       handleError(error, 'Unable to log out device');
@@ -33,7 +34,7 @@
 
   const handleDeleteAll = async () => {
     try {
-      await api.authenticationApi.logoutAuthDevices();
+      await logoutAuthDevices();
       notificationController.show({
         message: `Logged out all devices`,
         type: NotificationType.Info,

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

@@ -1,23 +1,31 @@
 <script lang="ts">
-  import { api, type LibraryResponseDto, LibraryType, type LibraryStatsResponseDto } from '@api';
-  import { onMount } from 'svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { fade } from 'svelte/transition';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { slide } from 'svelte/transition';
-  import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
-  import LibraryScanSettingsForm from '../forms/library-scan-settings-form.svelte';
-  import LibraryRenameForm from '../forms/library-rename-form.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import Portal from '../shared-components/portal/portal.svelte';
+  import { getContextMenuPosition } from '$lib/utils/context-menu';
+  import { handleError } from '$lib/utils/handle-error';
+  import { LibraryType, type LibraryResponseDto, type LibraryStatsResponseDto } from '@api';
+  import {
+    createLibrary,
+    deleteLibrary,
+    getLibraries,
+    getLibraryStatistics,
+    removeOfflineFiles,
+    scanLibrary,
+    updateLibrary,
+  } from '@immich/sdk';
+  import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { fade, slide } from 'svelte/transition';
+  import Button from '../elements/buttons/button.svelte';
+  import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
+  import LibraryRenameForm from '../forms/library-rename-form.svelte';
+  import LibraryScanSettingsForm from '../forms/library-scan-settings-form.svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-  import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import Portal from '../shared-components/portal/portal.svelte';
 
   let libraries: LibraryResponseDto[] = [];
 
@@ -29,7 +37,7 @@
   let diskUsageUnit: string[] = [];
 
   let confirmDeleteLibrary: LibraryResponseDto | null = null;
-  let deleteLibrary: LibraryResponseDto | null = null;
+  let deletedLibrary: LibraryResponseDto | null = null;
 
   let editImportPaths: number | null;
   let editScanSettings: number | null;
@@ -73,8 +81,7 @@
     showContextMenu = false;
   };
   const refreshStats = async (listIndex: number) => {
-    const { data } = await api.libraryApi.getLibraryStatistics({ id: libraries[listIndex].id });
-    stats[listIndex] = data;
+    stats[listIndex] = await getLibraryStatistics({ id: libraries[listIndex].id });
     photos[listIndex] = stats[listIndex].photos;
     videos[listIndex] = stats[listIndex].videos;
     totalCount[listIndex] = stats[listIndex].total;
@@ -82,8 +89,7 @@
   };
 
   async function readLibraryList() {
-    const { data } = await api.libraryApi.getLibraries();
-    libraries = data;
+    libraries = await getLibraries();
 
     dropdownOpen.length = libraries.length;
 
@@ -95,12 +101,10 @@
 
   const handleCreate = async (libraryType: LibraryType) => {
     try {
-      const { data } = await api.libraryApi.createLibrary({
+      const createdLibrary = await createLibrary({
         createLibraryDto: { type: libraryType },
       });
 
-      const createdLibrary = data;
-
       notificationController.show({
         message: `Created library: ${createdLibrary.name}`,
         type: NotificationType.Info,
@@ -119,7 +123,7 @@
 
     try {
       const libraryId = libraries[updateLibraryIndex].id;
-      await api.libraryApi.updateLibrary({ id: libraryId, updateLibraryDto: { ...event } });
+      await updateLibrary({ id: libraryId, updateLibraryDto: { ...event } });
     } catch (error) {
       handleError(error, 'Unable to update library');
     } finally {
@@ -130,15 +134,15 @@
 
   const handleDelete = async () => {
     if (confirmDeleteLibrary) {
-      deleteLibrary = confirmDeleteLibrary;
+      deletedLibrary = confirmDeleteLibrary;
     }
 
-    if (!deleteLibrary) {
+    if (!deletedLibrary) {
       return;
     }
 
     try {
-      await api.libraryApi.deleteLibrary({ id: deleteLibrary.id });
+      await deleteLibrary({ id: deletedLibrary.id });
       notificationController.show({
         message: `Library deleted`,
         type: NotificationType.Info,
@@ -147,7 +151,7 @@
       handleError(error, 'Unable to remove library');
     } finally {
       confirmDeleteLibrary = null;
-      deleteLibrary = null;
+      deletedLibrary = null;
       await readLibraryList();
     }
   };
@@ -156,7 +160,7 @@
     try {
       for (const library of libraries) {
         if (library.type === LibraryType.External) {
-          await api.libraryApi.scanLibrary({ id: library.id, scanLibraryDto: {} });
+          await scanLibrary({ id: library.id, scanLibraryDto: {} });
         }
       }
       notificationController.show({
@@ -170,7 +174,7 @@
 
   const handleScan = async (libraryId: string) => {
     try {
-      await api.libraryApi.scanLibrary({ id: libraryId, scanLibraryDto: {} });
+      await scanLibrary({ id: libraryId, scanLibraryDto: {} });
       notificationController.show({
         message: `Scanning library for new files`,
         type: NotificationType.Info,
@@ -182,7 +186,7 @@
 
   const handleScanChanges = async (libraryId: string) => {
     try {
-      await api.libraryApi.scanLibrary({ id: libraryId, scanLibraryDto: { refreshModifiedFiles: true } });
+      await scanLibrary({ id: libraryId, scanLibraryDto: { refreshModifiedFiles: true } });
       notificationController.show({
         message: `Scanning library for changed files`,
         type: NotificationType.Info,
@@ -194,7 +198,7 @@
 
   const handleForceScan = async (libraryId: string) => {
     try {
-      await api.libraryApi.scanLibrary({ id: libraryId, scanLibraryDto: { refreshAllFiles: true } });
+      await scanLibrary({ id: libraryId, scanLibraryDto: { refreshAllFiles: true } });
       notificationController.show({
         message: `Forcing refresh of all library files`,
         type: NotificationType.Info,
@@ -206,7 +210,7 @@
 
   const handleRemoveOffline = async (libraryId: string) => {
     try {
-      await api.libraryApi.removeOfflineFiles({ id: libraryId });
+      await removeOfflineFiles({ id: libraryId });
       notificationController.show({
         message: `Removing Offline Files`,
         type: NotificationType.Info,
@@ -272,7 +276,7 @@
         deleteAssetCount = totalCount[selectedLibraryIndex];
         confirmDeleteLibrary = selectedLibrary;
       } else {
-        deleteLibrary = selectedLibrary;
+        deletedLibrary = selectedLibrary;
         handleDelete();
       }
     }

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

@@ -3,7 +3,8 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { api, type UserResponseDto } from '@api';
+  import { type UserResponseDto } from '@api';
+  import { updateUser } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
   import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
@@ -13,7 +14,7 @@
 
   const handleSave = async () => {
     try {
-      const { data } = await api.userApi.updateUser({
+      const data = await updateUser({
         updateUserDto: {
           id: user.id,
           memoriesEnabled: user.memoriesEnabled,

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

@@ -18,8 +18,7 @@
       try {
         loading = true;
 
-        const { data } = await oauth.link(window.location);
-        user = data;
+        user = await oauth.link(window.location);
 
         notificationController.show({
           message: 'Linked OAuth account',
@@ -37,8 +36,7 @@
 
   const handleUnlink = async () => {
     try {
-      const { data } = await oauth.unlink();
-      user = data;
+      user = await oauth.unlink();
       notificationController.show({
         message: 'Unlinked OAuth account',
         type: NotificationType.Info,

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

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import BaseModal from '../shared-components/base-modal.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
-  import Button from '../elements/buttons/button.svelte';
+  import { type UserResponseDto } from '@api';
+  import { getAllUsers, getPartners } from '@immich/sdk';
   import { createEventDispatcher, onMount } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import BaseModal from '../shared-components/base-modal.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let user: UserResponseDto;
 
@@ -15,13 +16,13 @@
 
   onMount(async () => {
     // TODO: update endpoint to have a query param for deleted users
-    let { data: users } = await api.userApi.getAllUsers({ isAll: false });
+    let users = await getAllUsers({ isAll: false });
 
     // remove invalid users
     users = users.filter((_user) => !(_user.deletedAt || _user.id === user.id));
 
     // exclude partners from the list of users available for selection
-    const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-by' });
+    const partners = await getPartners({ direction: 'shared-by' });
     const partnerIds = new Set(partners.map((partner) => partner.id));
     availableUsers = users.filter((user) => !partnerIds.has(user.id));
   });

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

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { type PartnerResponseDto, type UserResponseDto, api } from '@api';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import PartnerSelectionModal from './partner-selection-modal.svelte';
-  import { handleError } from '../../utils/handle-error';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { type PartnerResponseDto, type UserResponseDto } from '@api';
+  import { createPartner, getPartners, removePartner, updatePartner } from '@immich/sdk';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
-  import Icon from '../elements/icon.svelte';
+  import { handleError } from '../../utils/handle-error';
   import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import Icon from '../elements/icon.svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import PartnerSelectionModal from './partner-selection-modal.svelte';
 
   interface PartnerSharing {
     user: UserResponseDto;
@@ -20,8 +21,8 @@
 
   export let user: UserResponseDto;
 
-  let createPartner = false;
-  let removePartner: PartnerResponseDto | null = null;
+  let createPartnerFlag = false;
+  let removePartnerDto: PartnerResponseDto | null = null;
   let partners: Array<PartnerSharing> = [];
 
   onMount(() => {
@@ -31,9 +32,9 @@
   const refreshPartners = async () => {
     partners = [];
 
-    const [{ data: sharedBy }, { data: sharedWith }] = await Promise.all([
-      api.partnerApi.getPartners({ direction: 'shared-by' }),
-      api.partnerApi.getPartners({ direction: 'shared-with' }),
+    const [sharedBy, sharedWith] = await Promise.all([
+      getPartners({ direction: 'shared-by' }),
+      getPartners({ direction: 'shared-with' }),
     ]);
 
     for (const candidate of sharedBy) {
@@ -69,13 +70,13 @@
   };
 
   const handleRemovePartner = async () => {
-    if (!removePartner) {
+    if (!removePartnerDto) {
       return;
     }
 
     try {
-      await api.partnerApi.removePartner({ id: removePartner.id });
-      removePartner = null;
+      await removePartner({ id: removePartnerDto.id });
+      removePartnerDto = null;
       await refreshPartners();
     } catch (error) {
       handleError(error, 'Unable to remove partner');
@@ -85,11 +86,11 @@
   const handleCreatePartners = async (users: UserResponseDto[]) => {
     try {
       for (const user of users) {
-        await api.partnerApi.createPartner({ id: user.id });
+        await createPartner({ id: user.id });
       }
 
       await refreshPartners();
-      createPartner = false;
+      createPartnerFlag = false;
     } catch (error) {
       handleError(error, 'Unable to add partners');
     }
@@ -97,7 +98,7 @@
 
   const handleShowOnTimelineChanged = async (partner: PartnerSharing, inTimeline: boolean) => {
     try {
-      await api.partnerApi.updatePartner({ id: partner.user.id, updatePartnerDto: { inTimeline } });
+      await updatePartner({ id: partner.user.id, updatePartnerDto: { inTimeline } });
 
       partner.inTimeline = inTimeline;
       partners = partners;
@@ -126,7 +127,7 @@
 
           {#if partner.sharedByMe}
             <CircleIconButton
-              on:click={() => (removePartner = partner.user)}
+              on:click={() => (removePartnerDto = partner.user)}
               icon={mdiClose}
               size={'16'}
               title="Stop sharing your photos with this user"
@@ -167,23 +168,23 @@
   {/if}
 
   <div class="flex justify-end mt-5">
-    <Button size="sm" on:click={() => (createPartner = true)}>Add partner</Button>
+    <Button size="sm" on:click={() => (createPartnerFlag = true)}>Add partner</Button>
   </div>
 </section>
 
-{#if createPartner}
+{#if createPartnerFlag}
   <PartnerSelectionModal
     {user}
-    on:close={() => (createPartner = false)}
+    on:close={() => (createPartnerFlag = false)}
     on:add-users={(event) => handleCreatePartners(event.detail)}
   />
 {/if}
 
-{#if removePartner}
+{#if removePartnerDto}
   <ConfirmDialogue
     title="Stop sharing your photos?"
-    prompt="{removePartner.name} will no longer be able to access your photos."
-    on:cancel={() => (removePartner = null)}
+    prompt="{removePartnerDto.name} will no longer be able to access your photos."
+    on:cancel={() => (removePartnerDto = null)}
     on:confirm={() => handleRemovePartner()}
   />
 {/if}

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

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { api, type APIKeyResponseDto } from '@api';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { type APIKeyResponseDto } from '@api';
+  import { createApiKey, deleteApiKey, getApiKeys, updateApiKey } from '@immich/sdk';
+  import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
   import APIKeyForm from '../forms/api-key-form.svelte';
   import APIKeySecret from '../forms/api-key-secret.svelte';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import { locale } from '$lib/stores/preferences.store';
-  import Button from '../elements/buttons/button.svelte';
-  import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   export let keys: APIKeyResponseDto[];
 
@@ -25,13 +26,12 @@
   };
 
   async function refreshKeys() {
-    const { data } = await api.keyApi.getApiKeys();
-    keys = data;
+    keys = await getApiKeys();
   }
 
   const handleCreate = async (detail: Partial<APIKeyResponseDto>) => {
     try {
-      const { data } = await api.keyApi.createApiKey({ aPIKeyCreateDto: detail });
+      const data = await createApiKey({ apiKeyCreateDto: detail });
       secret = data.secret;
     } catch (error) {
       handleError(error, 'Unable to create a new API Key');
@@ -47,7 +47,7 @@
     }
 
     try {
-      await api.keyApi.updateApiKey({ id: editKey.id, aPIKeyUpdateDto: { name: detail.name } });
+      await updateApiKey({ id: editKey.id, apiKeyUpdateDto: { name: detail.name } });
       notificationController.show({
         message: `Saved API Key`,
         type: NotificationType.Info,
@@ -66,7 +66,7 @@
     }
 
     try {
-      await api.keyApi.deleteApiKey({ id: deleteKey.id });
+      await deleteApiKey({ id: deleteKey.id });
       notificationController.show({
         message: `Removed API Key: ${deleteKey.name}`,
         type: NotificationType.Info,

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

@@ -3,19 +3,19 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { api } from '@api';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
   import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
   import Button from '../elements/buttons/button.svelte';
   import { user } from '$lib/stores/user.store';
   import { cloneDeep } from 'lodash-es';
+  import { updateUser } from '@immich/sdk';
 
   let editedUser = cloneDeep($user);
 
   const handleSaveProfile = async () => {
     try {
-      const { data } = await api.userApi.updateUser({
+      const data = await updateUser({
         updateUserDto: {
           id: editedUser.id,
           email: editedUser.email,

web/src/lib/stores/server-config.store.ts

@@ -1,4 +1,5 @@
-import { api, type ServerConfigDto, type ServerFeaturesDto } from '@api';
+import { type ServerConfigDto, type ServerFeaturesDto } from '@api';
+import { getServerConfig, getServerFeatures } from '@immich/sdk';
 import { writable } from 'svelte/store';
 
 export type FeatureFlags = ServerFeaturesDto & { loaded: boolean };
@@ -31,10 +32,7 @@ export const serverConfig = writable<ServerConfig>({
 });
 
 export const loadConfig = async () => {
-  const [{ data: flags }, { data: config }] = await Promise.all([
-    api.serverInfoApi.getServerFeatures(),
-    api.serverInfoApi.getServerConfig(),
-  ]);
+  const [flags, config] = await Promise.all([getServerFeatures(), getServerConfig()]);
 
   featureFlags.update(() => ({ ...flags, loaded: true }));
   serverConfig.update(() => ({ ...config, loaded: true }));

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

@@ -1,34 +1,33 @@
 import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import { downloadManager } from '$lib/stores/download';
+import { api } from '@api';
 import {
-  api,
-  type BulkIdResponseDto,
+  addAssetsToAlbum as addAssets,
   type AssetResponseDto,
-  type DownloadResponseDto,
+  type AssetTypeEnum,
+  type BulkIdResponseDto,
   type DownloadInfoDto,
-  AssetTypeEnum,
+  type DownloadResponseDto,
   type UserResponseDto,
-} from '@api';
-import { handleError } from './handle-error';
+} from '@immich/sdk';
 import { DateTime } from 'luxon';
+import { handleError } from './handle-error';
 
 export const addAssetsToAlbum = async (albumId: string, assetIds: Array<string>): Promise<BulkIdResponseDto[]> =>
-  api.albumApi
-    .addAssetsToAlbum({
-      id: albumId,
-      bulkIdsDto: { ids: assetIds },
-      key: api.getKey(),
-    })
-    .then(({ data: results }) => {
-      const count = results.filter(({ success }) => success).length;
-      notificationController.show({
-        type: NotificationType.Info,
-        message: `Added ${count} asset${count === 1 ? '' : 's'}`,
-      });
-
-      return results;
+  addAssets({
+    id: albumId,
+    bulkIdsDto: { ids: assetIds },
+    key: api.getKey(),
+  }).then((results) => {
+    const count = results.filter(({ success }) => success).length;
+    notificationController.show({
+      type: NotificationType.Info,
+      message: `Added ${count} asset${count === 1 ? '' : 's'}`,
     });
 
+    return results;
+  });
+
 export const downloadBlob = (data: Blob, filename: string) => {
   const url = URL.createObjectURL(data);
 

web/src/lib/utils/auth.ts

@@ -1,10 +1,10 @@
-import { api } from '@api';
-import { redirect } from '@sveltejs/kit';
-import { AppRoute } from '../constants';
-import { get } from 'svelte/store';
-import { serverInfo } from '$lib/stores/server-info.store';
 import { browser } from '$app/environment';
+import { serverInfo } from '$lib/stores/server-info.store';
 import { user } from '$lib/stores/user.store';
+import { getMyUserInfo, getServerInfo } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+import { AppRoute } from '../constants';
 
 export interface AuthOptions {
   admin?: true;
@@ -15,8 +15,7 @@ export const loadUser = async () => {
   try {
     let loaded = get(user);
     if (!loaded && hasAuthCookie()) {
-      const { data } = await api.userApi.getMyUserInfo();
-      loaded = data;
+      loaded = await getMyUserInfo();
       user.set(loaded);
     }
     return loaded;
@@ -59,7 +58,7 @@ export const authenticate = async (options?: AuthOptions) => {
 
 export const requestServerInfo = async () => {
   if (get(user)) {
-    const { data } = await api.serverInfoApi.getServerInfo();
+    const data = await getServerInfo();
     serverInfo.set(data);
   }
 };

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

@@ -1,8 +1,9 @@
+import { UploadState } from '$lib/models/upload-asset';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import { addAssetsToAlbum } from '$lib/utils/asset-utils';
-import { api, type AssetFileUploadResponseDto } from '@api';
-import { UploadState } from '$lib/models/upload-asset';
 import { ExecutorQueue } from '$lib/utils/executor-queue';
+import { api, type AssetFileUploadResponseDto } from '@api';
+import { getSupportedMediaTypes } from '@immich/sdk';
 import { getServerErrorMessage, handleError } from './handle-error';
 
 let _extensions: string[];
@@ -11,8 +12,8 @@ export const uploadExecutionQueue = new ExecutorQueue({ concurrency: 2 });
 
 const getExtensions = async () => {
   if (!_extensions) {
-    const { data } = await api.serverInfoApi.getSupportedMediaTypes();
-    _extensions = [...data.image, ...data.video];
+    const { image, video } = await getSupportedMediaTypes();
+    _extensions = [...image, ...video];
   }
   return _extensions;
 };

web/src/routes/(user)/albums/+page.ts

@@ -1,10 +1,10 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getAllAlbums } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
-  const { data: albums } = await api.albumApi.getAllAlbums();
+  const albums = await getAllAlbums({});
 
   return {
     albums,

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
+  import AlbumOptions from '$lib/components/album-page/album-options.svelte';
   import ShareInfoModal from '$lib/components/album-page/share-info-modal.svelte';
   import UserSelectionModal from '$lib/components/album-page/user-selection-modal.svelte';
+  import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
+  import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
   import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
@@ -26,40 +30,47 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute, dateFormats } from '$lib/constants';
+  import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { AssetStore } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
+  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
+  import { user } from '$lib/stores/user.store';
   import { downloadArchive } from '$lib/utils/asset-utils';
-  import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import { handleError } from '$lib/utils/handle-error';
-  import { type ActivityResponseDto, ReactionLevel, ReactionType, type UserResponseDto, api } from '@api';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import type { PageData } from './$types';
+  import { autoGrowHeight } from '$lib/utils/autogrow';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { handleError } from '$lib/utils/handle-error';
+  import { ReactionLevel, ReactionType, type ActivityResponseDto, type UserResponseDto } from '@api';
+  import {
+    addAssetsToAlbum,
+    addUsersToAlbum,
+    createActivity,
+    deleteActivity,
+    deleteAlbum,
+    getActivities,
+    getActivityStatistics,
+    getAlbumInfo,
+    updateAlbumInfo,
+  } from '@immich/sdk';
   import {
-    mdiPlus,
-    mdiDotsVertical,
     mdiArrowLeft,
+    mdiDeleteOutline,
+    mdiDotsVertical,
     mdiFileImagePlusOutline,
     mdiFolderDownloadOutline,
     mdiLink,
+    mdiPlus,
     mdiShareVariantOutline,
-    mdiDeleteOutline,
   } from '@mdi/js';
   import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
-  import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
-  import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
-  import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
-  import AlbumOptions from '$lib/components/album-page/album-options.svelte';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
-  import { user } from '$lib/stores/user.store';
-  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
@@ -141,13 +152,12 @@
 
   const handleToggleEnableActivity = async () => {
     try {
-      const { data } = await api.albumApi.updateAlbumInfo({
+      album = await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           isActivityEnabled: !album.isActivityEnabled,
         },
       });
-      album = data;
       notificationController.show({
         type: NotificationType.Info,
         message: `Activity is ${album.isActivityEnabled ? 'enabled' : 'disabled'}`,
@@ -161,14 +171,13 @@
     try {
       if (isLiked) {
         const activityId = isLiked.id;
-        await api.activityApi.deleteActivity({ id: activityId });
+        await deleteActivity({ id: activityId });
         reactions = reactions.filter((reaction) => reaction.id !== activityId);
         isLiked = null;
       } else {
-        const { data } = await api.activityApi.createActivity({
+        isLiked = await createActivity({
           activityCreateDto: { albumId: album.id, type: ReactionType.Like },
         });
-        isLiked = data;
         reactions = [...reactions, isLiked];
       }
     } catch (error) {
@@ -179,10 +188,10 @@
   const getFavorite = async () => {
     if ($user) {
       try {
-        const { data } = await api.activityApi.getActivities({
+        const data = await getActivities({
           userId: $user.id,
           albumId: album.id,
-          type: ReactionType.Like,
+          $type: ReactionType.Like,
           level: ReactionLevel.Album,
         });
         if (data.length > 0) {
@@ -196,8 +205,8 @@
 
   const getNumberOfComments = async () => {
     try {
-      const { data } = await api.activityApi.getActivityStatistics({ albumId: album.id });
-      setNumberOfComments(data.comments);
+      const { comments } = await getActivityStatistics({ albumId: album.id });
+      setNumberOfComments(comments);
     } catch (error) {
       handleError(error, "Can't get number of comments");
     }
@@ -269,8 +278,7 @@
   };
 
   const refreshAlbum = async () => {
-    const { data } = await api.albumApi.getAlbumInfo({ id: album.id, withoutAssets: true });
-    album = data;
+    album = await getAlbumInfo({ id: album.id, withoutAssets: true });
   };
 
   const getDateRange = () => {
@@ -302,7 +310,7 @@
     const assetIds = [...$timelineSelected].map((asset) => asset.id);
 
     try {
-      const { data: results } = await api.albumApi.addAssetsToAlbum({
+      const results = await addAssetsToAlbum({
         id: album.id,
         bulkIdsDto: { ids: assetIds },
       });
@@ -346,15 +354,13 @@
 
   const handleAddUsers = async (users: UserResponseDto[]) => {
     try {
-      const { data } = await api.albumApi.addUsersToAlbum({
+      album = await addUsersToAlbum({
         id: album.id,
         addUsersDto: {
           sharedUserIds: [...users].map(({ id }) => id),
         },
       });
 
-      album = data;
-
       viewMode = ViewMode.VIEW;
     } catch (error) {
       handleError(error, 'Error adding users to album');
@@ -381,7 +387,7 @@
 
   const handleRemoveAlbum = async () => {
     try {
-      await api.albumApi.deleteAlbum({ id: album.id });
+      await deleteAlbum({ id: album.id });
       goto(backUrl);
     } catch (error) {
       handleError(error, 'Unable to delete album');
@@ -399,7 +405,7 @@
     assetInteractionStore.clearMultiselect();
 
     try {
-      await api.albumApi.updateAlbumInfo({
+      await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           albumThumbnailAssetId: assetId,
@@ -418,7 +424,7 @@
     }
 
     try {
-      await api.albumApi.updateAlbumInfo({
+      await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           albumName: album.albumName,
@@ -436,7 +442,7 @@
       return;
     }
     try {
-      await api.albumApi.updateAlbumInfo({
+      await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           description,

web/src/routes/(user)/albums/[albumId]/+page.ts

@@ -1,10 +1,10 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getAlbumInfo } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
-  const { data: album } = await api.albumApi.getAlbumInfo({ id: params.albumId, withoutAssets: true });
+  const album = await getAlbumInfo({ id: params.albumId, withoutAssets: true });
 
   return {
     album,

web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts

@@ -1,158 +0,0 @@
-import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
-import { api, type CreateAlbumDto } from '@api';
-import { albumFactory } from '@test-data';
-import { get } from 'svelte/store';
-import { useAlbums } from '../albums.bloc';
-import type { MockedObject } from 'vitest';
-
-vi.mock('@api');
-
-const apiMock: MockedObject<typeof api> = api as MockedObject<typeof api>;
-
-describe('Albums BLoC', () => {
-  let sut: ReturnType<typeof useAlbums>;
-  const _albums = albumFactory.buildList(5);
-
-  beforeEach(() => {
-    sut = useAlbums({ albums: [..._albums] });
-  });
-
-  afterEach(() => {
-    const notifications = get(notificationController.notificationList);
-
-    for (const notification of notifications) {
-      notificationController.removeNotificationById(notification.id);
-    }
-  });
-
-  it('inits with provided albums', () => {
-    const albums = get(sut.albums);
-    expect(albums.length).toEqual(5);
-    expect(albums).toEqual(_albums);
-  });
-
-  it('loads albums from the server', async () => {
-    // TODO: this method currently deletes albums with no assets and albumName === '' which might not be the best approach
-    const loadedAlbums = [..._albums, albumFactory.build({ id: 'new_loaded_uuid' })];
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.albumApi.getAllAlbums.mockResolvedValueOnce({
-      data: loadedAlbums,
-      config: {},
-      headers: {},
-      status: 200,
-      statusText: '',
-    });
-
-    await sut.loadAlbums();
-    const albums = get(sut.albums);
-
-    expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
-    expect(albums).toEqual(loadedAlbums);
-  });
-
-  it('shows error message when it fails loading albums', async () => {
-    // TODO: implement APIProblem interface in the server
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.albumApi.getAllAlbums.mockRejectedValueOnce({});
-
-    expect(get(notificationController.notificationList)).toHaveLength(0);
-    await sut.loadAlbums();
-    const albums = get(sut.albums);
-    const notifications = get(notificationController.notificationList);
-
-    expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(2);
-    expect(albums).toEqual(_albums);
-    expect(notifications).toHaveLength(1);
-    expect(notifications[0].type).toEqual(NotificationType.Error);
-  });
-
-  it('creates a new album', async () => {
-    const payload: CreateAlbumDto = {
-      albumName: '',
-    };
-
-    const returnedAlbum = albumFactory.build();
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.albumApi.createAlbum.mockResolvedValueOnce({
-      data: returnedAlbum,
-      config: {},
-      headers: {},
-      status: 200,
-      statusText: '',
-    });
-
-    const newAlbum = await sut.createAlbum();
-
-    expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
-    expect(apiMock.albumApi.createAlbum).toHaveBeenCalledWith({ createAlbumDto: payload });
-    expect(newAlbum).toEqual(returnedAlbum);
-  });
-
-  it('shows error message when it fails creating an album', async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.albumApi.createAlbum.mockRejectedValueOnce({});
-
-    const newAlbum = await sut.createAlbum();
-    const notifications = get(notificationController.notificationList);
-
-    expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(2);
-    expect(newAlbum).not.toBeDefined();
-    expect(notifications).toHaveLength(1);
-    expect(notifications[0].type).toEqual(NotificationType.Error);
-  });
-
-  it('selects an album and deletes it', async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.albumApi.deleteAlbum.mockResolvedValueOnce({
-      data: undefined,
-      config: {},
-      headers: {},
-      status: 200,
-      statusText: '',
-    });
-
-    const albumToDelete = get(sut.albums)[2]; // delete third album
-    const albumToDeleteId = albumToDelete.id;
-    const contextMenuCoords = { x: 100, y: 150 };
-
-    expect(get(sut.isShowContextMenu)).toBe(false);
-    sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
-    expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
-    expect(get(sut.isShowContextMenu)).toBe(true);
-    expect(get(sut.contextMenuTargetAlbum)).toEqual(albumToDelete);
-
-    await sut.deleteAlbum(albumToDelete);
-    const updatedAlbums = get(sut.albums);
-
-    expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
-    expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith({ id: albumToDeleteId });
-    expect(updatedAlbums).toHaveLength(4);
-    expect(updatedAlbums).not.toContain(albumToDelete);
-  });
-
-  it('closes album context menu, deselecting album', () => {
-    const albumToDelete = get(sut.albums)[2]; // delete third album
-    sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
-
-    expect(get(sut.isShowContextMenu)).toBe(true);
-
-    sut.closeAlbumContextMenu();
-    expect(get(sut.isShowContextMenu)).toBe(false);
-  });
-});

web/src/routes/(user)/albums/albums.bloc.ts

@@ -1,6 +1,7 @@
 import type { OnShowContextMenuDetail } from '$lib/components/album-page/album-card';
 import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
-import { type AlbumResponseDto, api } from '@api';
+import { handleError } from '$lib/utils/handle-error';
+import { createAlbum, deleteAlbum, getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
 import { derived, get, writable } from 'svelte/store';
 
 type AlbumsProperties = { albums: AlbumResponseDto[] };
@@ -13,14 +14,14 @@ export const useAlbums = (properties: AlbumsProperties) => {
 
   async function loadAlbums(): Promise<void> {
     try {
-      const { data } = await api.albumApi.getAllAlbums();
+      const data = await getAllAlbums({});
       albums.set(data);
 
       // Delete album that has no photos and is named ''
       for (const album of data) {
         if (album.albumName === '' && album.assetCount === 0) {
           setTimeout(async () => {
-            await deleteAlbum(album);
+            await handleDeleteAlbum(album);
           }, 500);
         }
       }
@@ -32,30 +33,17 @@ export const useAlbums = (properties: AlbumsProperties) => {
     }
   }
 
-  async function createAlbum(): Promise<AlbumResponseDto | undefined> {
+  async function handleCreateAlbum(): Promise<AlbumResponseDto | undefined> {
     try {
-      const { data: newAlbum } = await api.albumApi.createAlbum({
-        createAlbumDto: {
-          albumName: '',
-        },
-      });
-
-      return newAlbum;
-    } catch {
-      notificationController.show({
-        message: 'Error creating album',
-        type: NotificationType.Error,
-      });
+      return await createAlbum({ createAlbumDto: { albumName: '' } });
+    } catch (error) {
+      handleError(error, 'Unable to create album');
     }
   }
 
-  async function deleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
-    await api.albumApi.deleteAlbum({ id: albumToDelete.id });
-    albums.set(
-      get(albums).filter(({ id }) => {
-        return id !== albumToDelete.id;
-      }),
-    );
+  async function handleDeleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
+    await deleteAlbum({ id: albumToDelete.id });
+    albums.set(get(albums).filter(({ id }) => id !== albumToDelete.id));
   }
 
   async function showAlbumContextMenu(
@@ -80,8 +68,8 @@ export const useAlbums = (properties: AlbumsProperties) => {
     contextMenuPosition,
     contextMenuTargetAlbum,
     loadAlbums,
-    createAlbum,
-    deleteAlbum,
+    createAlbum: handleCreateAlbum,
+    deleteAlbum: handleDeleteAlbum,
     showAlbumContextMenu,
     closeAlbumContextMenu,
   };

web/src/routes/(user)/partners/[userId]/+page.ts

@@ -1,11 +1,11 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getUserById } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
 
-  const { data: partner } = await api.userApi.getUserById({ id: params.userId });
+  const partner = await getUserById({ id: params.userId });
 
   return {
     partner,

web/src/routes/(user)/sharing/+page.svelte

@@ -3,38 +3,25 @@
   import empty2Url from '$lib/assets/empty-2.svg';
   import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute } from '$lib/constants';
-  import { api } from '@api';
-  import { flip } from 'svelte/animate';
-  import type { PageData } from './$types';
+  import { createAlbum } from '@immich/sdk';
   import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import { flip } from 'svelte/animate';
+  import { handleError } from '../../../lib/utils/handle-error';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
   const createSharedAlbum = async () => {
     try {
-      const { data: newAlbum } = await api.albumApi.createAlbum({
-        createAlbumDto: {
-          albumName: '',
-        },
-      });
-
+      const newAlbum = await createAlbum({ createAlbumDto: { albumName: '' } });
       goto(`${AppRoute.ALBUMS}/${newAlbum.id}`);
     } catch (error) {
-      notificationController.show({
-        message: 'Error creating album, check console for more details',
-        type: NotificationType.Error,
-      });
-
-      console.log('Error [createAlbum]', error);
+      handleError(error, 'Unable to create album');
     }
   };
 </script>

web/src/routes/(user)/sharing/+page.ts

@@ -1,11 +1,11 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getAllAlbums, getPartners } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
-  const { data: sharedAlbums } = await api.albumApi.getAllAlbums({ shared: true });
-  const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-with' });
+  const sharedAlbums = await getAllAlbums({ shared: true });
+  const partners = await getPartners({ direction: 'shared-with' });
 
   return {
     sharedAlbums,

web/src/routes/(user)/trash/+page.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
+  import empty3Url from '$lib/assets/empty-3.svg';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import { handleError } from '$lib/utils/handle-error';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import { AssetStore } from '$lib/stores/assets.store';
-  import { api } from '@api';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import type { PageData } from './$types';
-  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
-  import { goto } from '$app/navigation';
-  import empty3Url from '$lib/assets/empty-3.svg';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
   import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { AssetStore } from '$lib/stores/assets.store';
+  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { emptyTrash, restoreTrash } from '@immich/sdk';
+  import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
@@ -37,7 +37,7 @@
   const handleEmptyTrash = async () => {
     isShowEmptyConfirmation = false;
     try {
-      await api.trashApi.emptyTrash();
+      await emptyTrash();
 
       notificationController.show({
         message: `Empty trash initiated. Refresh the page to see the changes`,
@@ -50,7 +50,7 @@
 
   const handleRestoreTrash = async () => {
     try {
-      await api.trashApi.restoreTrash();
+      await restoreTrash();
 
       notificationController.show({
         message: `Restore trash initiated. Refresh the page to see the changes`,

web/src/routes/(user)/user-settings/+page.ts

@@ -1,12 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getApiKeys, getAuthDevices } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
 
-  const { data: keys } = await api.keyApi.getApiKeys();
-  const { data: devices } = await api.authenticationApi.getAuthDevices();
+  const keys = await getApiKeys();
+  const devices = await getAuthDevices();
 
   return {
     keys,

web/src/routes/+page.ts

@@ -1,6 +1,6 @@
 import { AppRoute } from '$lib/constants';
+import { getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
-import { api } from '../api';
 import { loadUser } from '../lib/utils/auth';
 import type { PageLoad } from './$types';
 
@@ -13,8 +13,8 @@ export const load = (async () => {
     redirect(302, AppRoute.PHOTOS);
   }
 
-  const { data } = await api.serverInfoApi.getServerConfig();
-  if (data.isInitialized) {
+  const { isInitialized } = await getServerConfig();
+  if (isInitialized) {
     // Redirect to login page if there exists an admin account (i.e. server is initialized)
     redirect(302, AppRoute.AUTH_LOGIN);
   }

web/src/routes/admin/jobs-status/+page.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { AppRoute } from '$lib/constants';
-  import { type AllJobStatusResponseDto, api } from '@api';
-  import { onDestroy, onMount } from 'svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import type { PageData } from './$types';
+  import { type AllJobStatusResponseDto } from '@api';
+  import { getAllJobsStatus } from '@immich/sdk';
   import { mdiCog } from '@mdi/js';
+  import { onDestroy, onMount } from 'svelte';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
@@ -16,8 +17,7 @@
   let jobs: AllJobStatusResponseDto;
 
   const load = async () => {
-    const { data } = await api.jobApi.getAllJobsStatus();
-    jobs = data;
+    jobs = await getAllJobsStatus();
   };
 
   onMount(async () => {

web/src/routes/admin/jobs-status/+page.ts

@@ -1,11 +1,11 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getAllJobsStatus } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
 
-  const { data: jobs } = await api.jobApi.getAllJobsStatus();
+  const jobs = await getAllJobsStatus();
 
   return {
     jobs,

web/src/routes/admin/repair/+page.svelte

@@ -11,10 +11,11 @@
   import { downloadManager } from '$lib/stores/download';
   import { downloadBlob } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { type FileReportItemDto, api, copyToClipboard } from '@api';
+  import { type FileReportItemDto, copyToClipboard } from '@api';
   import Icon from '$lib/components/elements/icon.svelte';
   import type { PageData } from './$types';
   import { mdiWrench, mdiCheckAll, mdiDownload, mdiRefresh, mdiContentCopy } from '@mdi/js';
+  import { fixAuditFiles, getAuditFiles, getFileChecksums } from '@immich/sdk';
 
   export let data: PageData;
 
@@ -65,7 +66,7 @@
     repairing = true;
 
     try {
-      await api.auditApi.fixAuditFiles({
+      await fixAuditFiles({
         fileReportFixDto: {
           items: matches.map(({ orphan, extra }) => ({
             entityId: orphan.entityId,
@@ -101,7 +102,7 @@
     extras = [];
 
     try {
-      const { data: report } = await api.auditApi.getAuditFiles();
+      const report = await getAuditFiles();
 
       orphans = report.orphans;
       extras = normalize(report.extras);
@@ -144,7 +145,7 @@
   };
 
   const loadAndMatch = async (filenames: string[]) => {
-    const { data: items } = await api.auditApi.getFileChecksums({
+    const items = await getFileChecksums({
       fileChecksumDto: { filenames },
     });
 

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

@@ -1,12 +1,10 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getAuditFiles } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
-  const {
-    data: { orphans, extras },
-  } = await api.auditApi.getAuditFiles();
+  const { orphans, extras } = await getAuditFiles();
 
   return {
     orphans,

web/src/routes/admin/server-status/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import { api } from '@api';
+  import { getServerStatistics } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
   import type { PageData } from './$types';
 
@@ -11,8 +11,7 @@
 
   onMount(async () => {
     setIntervalHandler = setInterval(async () => {
-      const { data: stats } = await api.serverInfoApi.getServerStatistics();
-      data.stats = stats;
+      data.stats = await getServerStatistics();
     }, 5000);
   });
 

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

@@ -1,10 +1,10 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getServerStatistics } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
-  const { data: stats } = await api.serverInfoApi.getServerStatistics();
+  const stats = await getServerStatistics();
 
   return {
     stats,

web/src/routes/admin/system-settings/+page.ts

@@ -1,10 +1,10 @@
 import { authenticate } from '$lib/utils/auth';
-import { api } from '@api';
+import { getConfig } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
-  const { data: configs } = await api.systemConfigApi.getConfig();
+  const configs = await getConfig();
 
   return {
     configs,

web/src/routes/admin/user-management/+page.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { onMount } from 'svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
-  import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
+  import { page } from '$app/stores';
   import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
   import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
-  import { page } from '$app/stores';
-  import { locale } from '$lib/stores/preferences.store';
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
+  import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import type { PageData } from './$types';
-  import { mdiCheck, mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import { asByteUnitString } from '$lib/utils/byte-units';
+  import { getAllUsers, type UserResponseDto } from '@immich/sdk';
+  import { mdiCheck, mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
@@ -47,8 +47,7 @@
   };
 
   const onUserCreated = async () => {
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowCreateUserForm = false;
   };
 
@@ -58,14 +57,12 @@
   };
 
   const onEditUserSuccess = async () => {
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowEditUserForm = false;
   };
 
   const onEditPasswordSuccess = async () => {
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowEditUserForm = false;
     shouldShowInfoPanel = true;
   };
@@ -76,14 +73,12 @@
   };
 
   const onUserDeleteSuccess = async () => {
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowDeleteConfirmDialog = false;
   };
 
   const onUserDeleteFail = async () => {
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowDeleteConfirmDialog = false;
   };
 
@@ -93,15 +88,13 @@
   };
 
   const onUserRestoreSuccess = async () => {
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowRestoreDialog = false;
   };
 
   const onUserRestoreFail = async () => {
     // show fail dialog
-    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-    allUsers = getAllUsersRes.data;
+    allUsers = await getAllUsers({ isAll: false });
     shouldShowRestoreDialog = false;
   };
 </script>

web/src/routes/admin/user-management/+page.ts

@@ -1,11 +1,11 @@
 import { authenticate, requestServerInfo } from '$lib/utils/auth';
-import { api } from '@api';
+import { getAllUsers } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   await requestServerInfo();
-  const { data: allUsers } = await api.userApi.getAllUsers({ isAll: false });
+  const allUsers = await getAllUsers({ isAll: false });
 
   return {
     allUsers,

web/src/routes/auth/login/+page.svelte

@@ -5,7 +5,7 @@
   import { AppRoute } from '$lib/constants';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { resetSavedUser } from '$lib/stores/user.store';
-  import { api } from '@api';
+  import { logout } from '@immich/sdk';
   import type { PageData } from './$types';
 
   export let data: PageData;
@@ -13,7 +13,7 @@
   afterNavigate(async ({ from }) => {
     if (from?.url?.pathname === AppRoute.AUTH_CHANGE_PASSWORD) {
       resetSavedUser();
-      await api.authenticationApi.logout();
+      await logout();
     }
   });
 </script>

web/src/routes/auth/login/+page.ts

@@ -1,11 +1,11 @@
 import { AppRoute } from '$lib/constants';
-import { api } from '@api';
+import { getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const { data } = await api.serverInfoApi.getServerConfig();
-  if (!data.isInitialized) {
+  const { isInitialized } = await getServerConfig();
+  if (!isInitialized) {
     // Admin not registered
     redirect(302, AppRoute.AUTH_REGISTER);
   }

web/src/routes/auth/onboarding/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
-  import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
-  import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
-  import { api } from '@api';
   import { goto } from '$app/navigation';
-  import { AppRoute, QueryParameter } from '$lib/constants';
   import { page } from '$app/stores';
+  import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
+  import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
+  import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
+  import { AppRoute, QueryParameter } from '$lib/constants';
+  import { setAdminOnboarding } from '@immich/sdk';
 
   let index = 0;
 
@@ -28,7 +28,7 @@
 
   const handleDoneClicked = async () => {
     if (index >= onboardingSteps.length - 1) {
-      await api.serverInfoApi.setAdminOnboarding();
+      await setAdminOnboarding();
       goto(AppRoute.PHOTOS);
     } else {
       index++;

web/src/routes/auth/register/+page.ts

@@ -1,11 +1,11 @@
 import { AppRoute } from '$lib/constants';
-import { api } from '@api';
+import { getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const { data } = await api.serverInfoApi.getServerConfig();
-  if (data.isInitialized) {
+  const { isInitialized } = await getServerConfig();
+  if (isInitialized) {
     // Admin has been registered, redirect to login
     redirect(302, AppRoute.AUTH_LOGIN);
   }