refactor(web) open api client (#7103)

* refactor: person api

* refactor: shared link and others

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

@@ -1,16 +1,18 @@
 <script lang="ts">
-  import { api, AssetTypeEnum, type AssetFaceResponseDto, type PersonResponseDto, ThumbnailFormat } from '@api';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { photoViewer } from '$lib/stores/assets.store';
+  import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
+  import { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@api';
+  import { searchPerson } from '@immich/sdk';
+  import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import Icon from '../elements/icon.svelte';
-  import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
-  import { handleError } from '$lib/utils/handle-error';
-  import { photoViewer } from '$lib/stores/assets.store';
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import Icon from '../elements/icon.svelte';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
@@ -42,7 +44,7 @@
     if (assetType === AssetTypeEnum.Image) {
       image = $photoViewer;
     } else if (assetType === AssetTypeEnum.Video) {
-      const data = await api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp);
+      const data = await getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp);
       const img: HTMLImageElement = new Image();
       img.src = data;
 
@@ -116,7 +118,7 @@
     }
     const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
     try {
-      const { data } = await api.searchApi.searchPerson({ name: searchName });
+      const data = await searchPerson({ name: searchName });
       searchedPeople = data;
       searchedPeopleCopy = data;
       searchWord = searchName;
@@ -229,7 +231,7 @@
                   <ImageThumbnail
                     curve
                     shadow
-                    url={api.getPeopleThumbnailUrl(person.id)}
+                    url={getPeopleThumbnailUrl(person.id)}
                     altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                     title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                     widthStyle="90px"
@@ -255,7 +257,7 @@
                   <ImageThumbnail
                     curve
                     shadow
-                    url={api.getPeopleThumbnailUrl(person.id)}
+                    url={getPeopleThumbnailUrl(person.id)}
                     altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                     title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                     widthStyle="90px"

web/src/lib/components/faces-page/face-thumbnail.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { api, type PersonResponseDto } from '@api';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { type PersonResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
 
   export let person: PersonResponseDto;
   export let selectable = false;
@@ -34,13 +35,7 @@
     class:dark:border-immich-dark-primary={border}
     class:border-immich-primary={border}
   >
-    <ImageThumbnail
-      {circle}
-      url={api.getPeopleThumbnailUrl(person.id)}
-      altText={person.name}
-      widthStyle="100%"
-      shadow
-    />
+    <ImageThumbnail {circle} url={getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" shadow />
   </div>
 
   <div

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { type PersonResponseDto } from '@api';
+  import { getAllPeople, getPerson, mergePerson } from '@immich/sdk';
+  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { api, type PersonResponseDto } from '@api';
-  import FaceThumbnail from './face-thumbnail.svelte';
+  import { flip } from 'svelte/animate';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import Button from '../elements/buttons/button.svelte';
-  import { flip } from 'svelte/animate';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { goto } from '$app/navigation';
-  import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
-  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import FaceThumbnail from './face-thumbnail.svelte';
   import PeopleList from './people-list.svelte';
-  import { page } from '$app/stores';
 
   export let person: PersonResponseDto;
   let people: PersonResponseDto[] = [];
@@ -35,7 +36,7 @@
   );
 
   onMount(async () => {
-    const { data } = await api.personApi.getAllPeople({ withHidden: false });
+    const data = await getAllPeople({ withHidden: false });
     people = data.people;
   });
 
@@ -68,11 +69,11 @@
 
   const handleMerge = async () => {
     try {
-      let { data: results } = await api.personApi.mergePerson({
+      let results = await mergePerson({
         id: person.id,
         mergePersonDto: { ids: selectedPeople.map(({ id }) => id) },
       });
-      const { data: mergedPerson } = await api.personApi.getPerson({ id: person.id });
+      const mergedPerson = await getPerson({ id: person.id });
       const count = results.filter(({ success }) => success).length;
       notificationController.show({
         message: `Merged ${count} ${count === 1 ? 'person' : 'people'}`,

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { api, type PersonResponseDto } from '@api';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { type PersonResponseDto } from '@api';
+  import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
 
   export let personMerge1: PersonResponseDto;
   export let personMerge2: PersonResponseDto;
@@ -60,7 +61,7 @@
             <ImageThumbnail
               circle
               shadow
-              url={api.getPeopleThumbnailUrl(personMerge1.id)}
+              url={getPeopleThumbnailUrl(personMerge1.id)}
               altText={personMerge1.name}
               widthStyle="100%"
             />
@@ -85,7 +86,7 @@
               border={potentialMergePeople.length > 0}
               circle
               shadow
-              url={api.getPeopleThumbnailUrl(personMerge2.id)}
+              url={getPeopleThumbnailUrl(personMerge2.id)}
               altText={personMerge2.name}
               widthStyle="100%"
             />
@@ -104,7 +105,7 @@
                         border={true}
                         circle
                         shadow
-                        url={api.getPeopleThumbnailUrl(person.id)}
+                        url={getPeopleThumbnailUrl(person.id)}
                         altText={person.name}
                         widthStyle="100%"
                         on:click={() => changePersonToMerge(person)}

web/src/lib/components/faces-page/people-card.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { type PersonResponseDto, api } from '@api';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute, QueryParameter } from '$lib/constants';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
+  import { type PersonResponseDto } from '@api';
+  import { mdiDotsVertical } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import IconButton from '../elements/buttons/icon-button.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import Portal from '../shared-components/portal/portal.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import { AppRoute, QueryParameter } from '$lib/constants';
-  import { mdiDotsVertical } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
 
   export let person: PersonResponseDto;
   export let preload = false;
@@ -50,7 +51,7 @@
       <ImageThumbnail
         shadow
         {preload}
-        url={api.getPeopleThumbnailUrl(person.id)}
+        url={getPeopleThumbnailUrl(person.id)}
         altText={person.name}
         title={person.name}
         widthStyle="100%"

web/src/lib/components/faces-page/people-list.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { api, type PersonResponseDto } from '@api';
-  import FaceThumbnail from './face-thumbnail.svelte';
-  import { createEventDispatcher } from 'svelte';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { searchNameLocal } from '$lib/utils/person';
+  import { type PersonResponseDto } from '@api';
+  import { searchPerson } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
+  import FaceThumbnail from './face-thumbnail.svelte';
   import SearchBar from './search-bar.svelte';
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
@@ -40,8 +41,7 @@
 
     const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
     try {
-      const { data } = await api.searchApi.searchPerson({ name });
-      people = data;
+      people = await searchPerson({ name });
       searchWord = name;
     } catch (error) {
       handleError(error, "Can't search people");

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

@@ -1,20 +1,21 @@
 <script lang="ts">
-  import { fly } from 'svelte/transition';
-  import { linear } from 'svelte/easing';
-  import { api, type PersonResponseDto, type AssetFaceResponseDto, AssetTypeEnum } from '@api';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { createEventDispatcher, onMount } from 'svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { mdiArrowLeftThin, mdiRestart } from '@mdi/js';
-  import Icon from '../elements/icon.svelte';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { websocketStore } from '$lib/stores/websocket';
-  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
-  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { getFaces, reassignFacesById } from '@immich/sdk';
+  import { AssetTypeEnum, type AssetFaceResponseDto, type PersonResponseDto } from '@api';
+  import { createPerson, getAllPeople, getFaces, reassignFacesById } from '@immich/sdk';
+  import { mdiArrowLeftThin, mdiRestart } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { linear } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import Icon from '../elements/icon.svelte';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
 
   export let assetId: string;
   export let assetType: AssetTypeEnum;
@@ -69,8 +70,8 @@
   onMount(async () => {
     const timeout = setTimeout(() => (isShowLoadingPeople = true), timeBeforeShowLoadingSpinner);
     try {
-      const { data } = await api.personApi.getAllPeople({ withHidden: true });
-      allPeople = data.people;
+      const { people } = await getAllPeople({ withHidden: true });
+      allPeople = people;
       peopleWithFaces = await getFaces({ id: assetId });
       selectedPersonToCreate = Array.from({ length: peopleWithFaces.length });
       selectedPersonToReassign = Array.from({ length: peopleWithFaces.length });
@@ -115,7 +116,7 @@
               faceDto: { id: peopleWithFace.id },
             });
           } else if (selectedPersonToCreate[index]) {
-            const { data } = await api.personApi.createPerson();
+            const data = await createPerson();
             numberOfPersonToCreate.push(data.id);
             await reassignFacesById({
               id: data.id,
@@ -214,7 +215,7 @@
                     curve
                     shadow
                     url={selectedPersonToCreate[index] ||
-                      api.getPeopleThumbnailUrl(selectedPersonToReassign[index]?.id || face.person.id)}
+                      getPeopleThumbnailUrl(selectedPersonToReassign[index]?.id || face.person.id)}
                     altText={selectedPersonToReassign[index]
                       ? selectedPersonToReassign[index]?.name || ''
                       : selectedPersonToCreate[index]

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-  import FaceThumbnail from './face-thumbnail.svelte';
-  import { quintOut } from 'svelte/easing';
-  import { fly } from 'svelte/transition';
-  import { api, type AssetFaceUpdateItem, type PersonResponseDto } from '@api';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { mdiPlus, mdiMerge } from '@mdi/js';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import PeopleList from './people-list.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import {
+    createPerson,
+    getAllPeople,
+    reassignFaces,
+    type AssetFaceUpdateItem,
+    type PersonResponseDto,
+  } from '@immich/sdk';
+  import { mdiMerge, mdiPlus } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import Button from '../elements/buttons/button.svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import FaceThumbnail from './face-thumbnail.svelte';
+  import PeopleList from './people-list.svelte';
 
   export let assetIds: string[];
   export let personAssets: PersonResponseDto;
@@ -41,7 +47,7 @@
   }
 
   onMount(async () => {
-    const { data } = await api.personApi.getAllPeople({ withHidden: false });
+    const data = await getAllPeople({ withHidden: false });
     people = data.people;
   });
 
@@ -68,11 +74,8 @@
 
     try {
       disableButtons = true;
-      const { data } = await api.personApi.createPerson();
-      await api.personApi.reassignFaces({
-        id: data.id,
-        assetFaceUpdateDto: { data: selectedPeople },
-      });
+      const data = await createPerson();
+      await reassignFaces({ id: data.id, assetFaceUpdateDto: { data: selectedPeople } });
 
       notificationController.show({
         message: `Re-assigned ${assetIds.length} asset${assetIds.length > 1 ? 's' : ''} to a new person`,
@@ -93,10 +96,7 @@
     try {
       disableButtons = true;
       if (selectedPerson) {
-        await api.personApi.reassignFaces({
-          id: selectedPerson.id,
-          assetFaceUpdateDto: { data: selectedPeople },
-        });
+        await reassignFaces({ id: selectedPerson.id, assetFaceUpdateDto: { data: selectedPeople } });
         notificationController.show({
           message: `Re-assigned ${assetIds.length} asset${assetIds.length > 1 ? 's' : ''} to ${
             selectedPerson.name || 'an existing person'