refactor(web) open api client (#7103)

* refactor: person api

* refactor: shared link and others

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -4,16 +4,17 @@
   } from '$lib/components/admin-page/settings/setting-input-field.svelte';
   import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { api, copyToClipboard, makeSharedLinkUrl, type SharedLinkResponseDto, SharedLinkType } from '@api';
-  import { createEventDispatcher, onMount } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { serverConfig } from '$lib/stores/server-config.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { SharedLinkType, copyToClipboard, makeSharedLinkUrl, type SharedLinkResponseDto } from '@api';
+  import { createSharedLink, updateSharedLink } from '@immich/sdk';
+  import { mdiLink } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
   import BaseModal from '../base-modal.svelte';
   import type { ImmichDropDownOption } from '../dropdown-button.svelte';
   import DropdownButton from '../dropdown-button.svelte';
-  import { notificationController, NotificationType } from '../notification/notification';
-  import { mdiLink } from '@mdi/js';
-  import { serverConfig } from '$lib/stores/server-config.store';
+  import { NotificationType, notificationController } from '../notification/notification';
 
   export let albumId: string | undefined = undefined;
   export let assetIds: string[] = [];
@@ -70,7 +71,7 @@
     const expirationDate = expirationTime ? new Date(currentTime + expirationTime).toISOString() : undefined;
 
     try {
-      const { data } = await api.sharedLinkApi.createSharedLink({
+      const data = await createSharedLink({
         sharedLinkCreateDto: {
           type: shareType,
           albumId,
@@ -135,7 +136,7 @@
         ? new Date(currentTime + expirationTime).toISOString()
         : null;
 
-      await api.sharedLinkApi.updateSharedLink({
+      await updateSharedLink({
         id: editingLink.id,
         sharedLinkEditDto: {
           description,

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

@@ -2,8 +2,8 @@
   import Icon from '$lib/components/elements/icon.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 { getAssetThumbnailUrl } from '$lib/utils';
+  import { getMapStyle, type MapMarkerResponseDto } 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';
@@ -174,7 +174,7 @@
           />
         {:else}
           <img
-            src={api.getAssetThumbnailUrl(feature.properties?.id)}
+            src={getAssetThumbnailUrl(feature.properties?.id, undefined)}
             class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
             alt={`Image with id ${feature.properties?.id}`}
           />

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

@@ -4,12 +4,11 @@
   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 { deleteProfileImage, updateUser, type UserAvatarColor } 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 { NotificationType, notificationController } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
 

web/src/lib/components/shared-components/search-bar/search-filter-box.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { SearchSuggestionType, type PersonResponseDto } from '@api';
+  import { getAllPeople, getSearchSuggestions } from '@immich/sdk';
+  import { mdiArrowRight, mdiClose } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
   import Combobox, { type ComboBoxOption } from '../combobox.svelte';
-  import { SearchSuggestionType, api, type PersonResponseDto } from '@api';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiArrowRight, mdiClose } from '@mdi/js';
-  import { handleError } from '$lib/utils/handle-error';
-  import { onMount } from 'svelte';
 
   enum MediaType {
     All = 'all',
@@ -108,8 +110,8 @@
 
   const getPeople = async () => {
     try {
-      const { data } = await api.personApi.getAllPeople({ withHidden: false });
-      suggestions.people = data.people;
+      const { people } = await getAllPeople({ withHidden: false });
+      suggestions.people = people;
     } catch (error) {
       handleError(error, 'Failed to get people');
     }
@@ -143,8 +145,8 @@
     }
 
     try {
-      const { data } = await api.searchApi.getSearchSuggestions({
-        type: type,
+      const data = await getSearchSuggestions({
+        $type: type,
         country: params.country,
         state: params.state,
         make: params.cameraMake,
@@ -251,7 +253,7 @@
               <ImageThumbnail
                 circle
                 shadow
-                url={api.getPeopleThumbnailUrl(person.id)}
+                url={getPeopleThumbnailUrl(person.id)}
                 altText={person.name}
                 widthStyle="100px"
               />

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

@@ -2,8 +2,8 @@
   import { page } from '$app/stores';
   import { locale, sidebarSettings } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { api, type AssetApiGetAssetStatisticsRequest } from '@api';
-  import { getAlbumCount } from '@immich/sdk';
+  import { type AssetApiGetAssetStatisticsRequest } from '@api';
+  import { getAlbumCount, getAssetStatistics } from '@immich/sdk';
   import {
     mdiAccount,
     mdiAccountMultiple,
@@ -24,10 +24,7 @@
   import SideBarButton from './side-bar-button.svelte';
   import SideBarSection from './side-bar-section.svelte';
 
-  const getStats = async (dto: AssetApiGetAssetStatisticsRequest) => {
-    const { data: stats } = await api.assetApi.getAssetStatistics(dto);
-    return stats;
-  };
+  const getStats = (dto: AssetApiGetAssetStatisticsRequest) => getAssetStatistics(dto);
 
   const handleAlbumCount = async () => {
     try {

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

@@ -3,8 +3,9 @@
 </script>
 
 <script lang="ts">
+  import { getProfileImageUrl } from '$lib/utils';
+  import { type UserAvatarColor } from '@immich/sdk';
   import { onMount, tick } from 'svelte';
-  import { UserAvatarColor, api } from '@api';
 
   interface User {
     id: string;
@@ -74,7 +75,7 @@
   {#if showProfileImage && user.profileImagePath}
     <img
       bind:this={img}
-      src={api.getProfileImageUrl(user.id)}
+      src={getProfileImageUrl(user.id)}
       alt="Profile image of {title}"
       class="h-full w-full object-cover"
       class:hidden={showFallback}