chore: enum support for new API (#7110)

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

open-api/bin/generate-open-api.sh

@@ -19,7 +19,7 @@ function dart {
 function typescript {
   rm -rf ./typescript-sdk/client
   npx --yes @openapitools/openapi-generator-cli generate -g typescript-axios -i ./immich-openapi-specs.json -o ./typescript-sdk/axios-client --additional-properties=useSingleRequestParameter=true,supportsES6=true
-  npx --yes oazapfts --optimistic --argumentStyle=object immich-openapi-specs.json typescript-sdk/fetch-client.ts
+  npx --yes oazapfts --optimistic --argumentStyle=object --useEnumType immich-openapi-specs.json typescript-sdk/fetch-client.ts
   npm --prefix typescript-sdk ci && npm --prefix typescript-sdk run build
 }
 

open-api/typescript-sdk/fetch-client.ts

@@ -14,9 +14,6 @@ const oazapfts = Oazapfts.runtime(defaults);
 export const servers = {
     server1: "/api"
 };
-export type ReactionLevel = "album" | "asset";
-export type ReactionType = "comment" | "like";
-export type UserAvatarColor = "primary" | "pink" | "red" | "yellow" | "blue" | "green" | "purple" | "orange" | "gray" | "amber";
 export type UserDto = {
     avatarColor: UserAvatarColor;
     email: string;
@@ -29,7 +26,7 @@ export type ActivityResponseDto = {
     comment?: string | null;
     createdAt: string;
     id: string;
-    "type": "comment" | "like";
+    "type": Type;
     user: UserDto;
 };
 export type ActivityCreateDto = {
@@ -103,14 +100,12 @@ export type SmartInfoResponseDto = {
     objects?: string[] | null;
     tags?: string[] | null;
 };
-export type TagTypeEnum = "OBJECT" | "FACE" | "CUSTOM";
 export type TagResponseDto = {
     id: string;
     name: string;
     "type": TagTypeEnum;
     userId: string;
 };
-export type AssetTypeEnum = "IMAGE" | "VIDEO" | "AUDIO" | "OTHER";
 export type AssetResponseDto = {
     /** base64 encoded sha1 hash */
     checksum: string;
@@ -186,7 +181,7 @@ export type BulkIdsDto = {
     ids: string[];
 };
 export type BulkIdResponseDto = {
-    error?: "duplicate" | "no_permission" | "not_found" | "unknown";
+    error?: Error;
     id: string;
     success: boolean;
 };
@@ -232,10 +227,10 @@ export type AssetBulkUploadCheckDto = {
     assets: AssetBulkUploadCheckItem[];
 };
 export type AssetBulkUploadCheckResult = {
-    action: "accept" | "reject";
+    action: Action;
     assetId?: string;
     id: string;
-    reason?: "duplicate" | "unsupported-format";
+    reason?: Reason;
 };
 export type AssetBulkUploadCheckResponseDto = {
     results: AssetBulkUploadCheckResult[];
@@ -261,7 +256,6 @@ export type CheckExistingAssetsDto = {
 export type CheckExistingAssetsResponseDto = {
     existingIds: string[];
 };
-export type AssetJobName = "regenerate-thumbnail" | "refresh-metadata" | "transcode-video";
 export type AssetJobsDto = {
     assetIds: string[];
     name: AssetJobName;
@@ -284,8 +278,6 @@ export type AssetStatsResponseDto = {
     total: number;
     videos: number;
 };
-export type ThumbnailFormat = "JPEG" | "WEBP";
-export type TimeBucketSize = "DAY" | "MONTH";
 export type TimeBucketResponseDto = {
     count: number;
     timeBucket: string;
@@ -319,14 +311,10 @@ export type UpdateAssetDto = {
     latitude?: number;
     longitude?: number;
 };
-export type AssetOrder = "asc" | "desc";
-export type EntityType = "ASSET" | "ALBUM";
 export type AuditDeletesResponseDto = {
     ids: string[];
     needsFullSync: boolean;
 };
-export type PathEntityType = "asset" | "person" | "user";
-export type PathType = "original" | "jpeg_thumbnail" | "webp_thumbnail" | "encoded_video" | "sidecar" | "face" | "profile";
 export type FileReportItemDto = {
     checksum?: string;
     entityId: string;
@@ -452,13 +440,10 @@ export type AllJobStatusResponseDto = {
     thumbnailGeneration: JobStatusDto;
     videoConversion: JobStatusDto;
 };
-export type JobName = "thumbnailGeneration" | "metadataExtraction" | "videoConversion" | "faceDetection" | "facialRecognition" | "smartSearch" | "backgroundTask" | "storageTemplateMigration" | "migration" | "search" | "sidecar" | "library";
-export type JobCommand = "start" | "pause" | "resume" | "empty" | "clear-failed";
 export type JobCommandDto = {
     command: JobCommand;
     force: boolean;
 };
-export type LibraryType = "UPLOAD" | "EXTERNAL";
 export type LibraryResponseDto = {
     assetCount: number;
     createdAt: string;
@@ -603,7 +588,6 @@ export type SearchExploreResponseDto = {
     fieldName: string;
     items: SearchExploreItem[];
 };
-export type SearchSuggestionType = "country" | "state" | "city" | "camera-make" | "camera-model";
 export type ServerInfoResponseDto = {
     diskAvailable: string;
     diskAvailableRaw: number;
@@ -665,7 +649,6 @@ export type ServerVersionResponseDto = {
     minor: number;
     patch: number;
 };
-export type SharedLinkType = "ALBUM" | "INDIVIDUAL";
 export type SharedLinkResponseDto = {
     album?: AlbumResponseDto;
     allowDownload: boolean;
@@ -707,21 +690,15 @@ export type SharedLinkEditDto = {
 };
 export type AssetIdsResponseDto = {
     assetId: string;
-    error?: "duplicate" | "no_permission" | "not_found";
+    error?: Error2;
     success: boolean;
 };
-export type TranscodeHwAccel = "nvenc" | "qsv" | "vaapi" | "rkmpp" | "disabled";
-export type AudioCodec = "mp3" | "aac" | "libopus";
-export type VideoCodec = "h264" | "hevc" | "vp9";
-export type CqMode = "auto" | "cqp" | "icq";
-export type ToneMapping = "hable" | "mobius" | "reinhard" | "disabled";
-export type TranscodePolicy = "all" | "optimal" | "bitrate" | "required" | "disabled";
 export type SystemConfigFFmpegDto = {
-    accel: TranscodeHwAccel;
+    accel: TranscodeHWAccel;
     acceptedAudioCodecs: AudioCodec[];
     acceptedVideoCodecs: VideoCodec[];
     bframes: number;
-    cqMode: CqMode;
+    cqMode: CQMode;
     crf: number;
     gopSize: number;
     maxBitrate: string;
@@ -766,16 +743,13 @@ export type SystemConfigLibraryDto = {
     scan: SystemConfigLibraryScanDto;
     watch: SystemConfigLibraryWatchDto;
 };
-export type LogLevel = "verbose" | "debug" | "log" | "warn" | "error" | "fatal";
 export type SystemConfigLoggingDto = {
     enabled: boolean;
     level: LogLevel;
 };
-export type ClipMode = "vision" | "text";
-export type ModelType = "facial-recognition" | "clip";
 export type ClipConfig = {
     enabled: boolean;
-    mode?: ClipMode;
+    mode?: CLIPMode;
     modelName: string;
     modelType?: ModelType;
 };
@@ -833,7 +807,6 @@ export type SystemConfigStorageTemplateDto = {
 export type SystemConfigThemeDto = {
     customCss: string;
 };
-export type Colorspace = "srgb" | "p3";
 export type SystemConfigThumbnailDto = {
     colorspace: Colorspace;
     jpegSize: number;
@@ -861,7 +834,6 @@ export type SystemConfigDto = {
     thumbnail: SystemConfigThumbnailDto;
     trash: SystemConfigTrashDto;
 };
-export type MapTheme = "light" | "dark";
 export type SystemConfigTemplateStorageOptionDto = {
     dayOptions: string[];
     hourOptions: string[];
@@ -2716,3 +2688,187 @@ export function restoreUser({ id }: {
         method: "POST"
     }));
 }
+export enum ReactionLevel {
+    Album = "album",
+    Asset = "asset"
+}
+export enum ReactionType {
+    Comment = "comment",
+    Like = "like"
+}
+export enum Type {
+    Comment = "comment",
+    Like = "like"
+}
+export enum UserAvatarColor {
+    Primary = "primary",
+    Pink = "pink",
+    Red = "red",
+    Yellow = "yellow",
+    Blue = "blue",
+    Green = "green",
+    Purple = "purple",
+    Orange = "orange",
+    Gray = "gray",
+    Amber = "amber"
+}
+export enum TagTypeEnum {
+    Object = "OBJECT",
+    Face = "FACE",
+    Custom = "CUSTOM"
+}
+export enum AssetTypeEnum {
+    Image = "IMAGE",
+    Video = "VIDEO",
+    Audio = "AUDIO",
+    Other = "OTHER"
+}
+export enum Error {
+    Duplicate = "duplicate",
+    NoPermission = "no_permission",
+    NotFound = "not_found",
+    Unknown = "unknown"
+}
+export enum Action {
+    Accept = "accept",
+    Reject = "reject"
+}
+export enum Reason {
+    Duplicate = "duplicate",
+    UnsupportedFormat = "unsupported-format"
+}
+export enum AssetJobName {
+    RegenerateThumbnail = "regenerate-thumbnail",
+    RefreshMetadata = "refresh-metadata",
+    TranscodeVideo = "transcode-video"
+}
+export enum ThumbnailFormat {
+    Jpeg = "JPEG",
+    Webp = "WEBP"
+}
+export enum TimeBucketSize {
+    Day = "DAY",
+    Month = "MONTH"
+}
+export enum AssetOrder {
+    Asc = "asc",
+    Desc = "desc"
+}
+export enum EntityType {
+    Asset = "ASSET",
+    Album = "ALBUM"
+}
+export enum PathEntityType {
+    Asset = "asset",
+    Person = "person",
+    User = "user"
+}
+export enum PathType {
+    Original = "original",
+    JpegThumbnail = "jpeg_thumbnail",
+    WebpThumbnail = "webp_thumbnail",
+    EncodedVideo = "encoded_video",
+    Sidecar = "sidecar",
+    Face = "face",
+    Profile = "profile"
+}
+export enum JobName {
+    ThumbnailGeneration = "thumbnailGeneration",
+    MetadataExtraction = "metadataExtraction",
+    VideoConversion = "videoConversion",
+    FaceDetection = "faceDetection",
+    FacialRecognition = "facialRecognition",
+    SmartSearch = "smartSearch",
+    BackgroundTask = "backgroundTask",
+    StorageTemplateMigration = "storageTemplateMigration",
+    Migration = "migration",
+    Search = "search",
+    Sidecar = "sidecar",
+    Library = "library"
+}
+export enum JobCommand {
+    Start = "start",
+    Pause = "pause",
+    Resume = "resume",
+    Empty = "empty",
+    ClearFailed = "clear-failed"
+}
+export enum LibraryType {
+    Upload = "UPLOAD",
+    External = "EXTERNAL"
+}
+export enum SearchSuggestionType {
+    Country = "country",
+    State = "state",
+    City = "city",
+    CameraMake = "camera-make",
+    CameraModel = "camera-model"
+}
+export enum SharedLinkType {
+    Album = "ALBUM",
+    Individual = "INDIVIDUAL"
+}
+export enum Error2 {
+    Duplicate = "duplicate",
+    NoPermission = "no_permission",
+    NotFound = "not_found"
+}
+export enum TranscodeHWAccel {
+    Nvenc = "nvenc",
+    Qsv = "qsv",
+    Vaapi = "vaapi",
+    Rkmpp = "rkmpp",
+    Disabled = "disabled"
+}
+export enum AudioCodec {
+    Mp3 = "mp3",
+    Aac = "aac",
+    Libopus = "libopus"
+}
+export enum VideoCodec {
+    H264 = "h264",
+    Hevc = "hevc",
+    Vp9 = "vp9"
+}
+export enum CQMode {
+    Auto = "auto",
+    Cqp = "cqp",
+    Icq = "icq"
+}
+export enum ToneMapping {
+    Hable = "hable",
+    Mobius = "mobius",
+    Reinhard = "reinhard",
+    Disabled = "disabled"
+}
+export enum TranscodePolicy {
+    All = "all",
+    Optimal = "optimal",
+    Bitrate = "bitrate",
+    Required = "required",
+    Disabled = "disabled"
+}
+export enum LogLevel {
+    Verbose = "verbose",
+    Debug = "debug",
+    Log = "log",
+    Warn = "warn",
+    Error = "error",
+    Fatal = "fatal"
+}
+export enum CLIPMode {
+    Vision = "vision",
+    Text = "text"
+}
+export enum ModelType {
+    FacialRecognition = "facial-recognition",
+    Clip = "clip"
+}
+export enum Colorspace {
+    Srgb = "srgb",
+    P3 = "p3"
+}
+export enum MapTheme {
+    Light = "light",
+    Dark = "dark"
+}

open-api/typescript-sdk/tsconfig.fetch.json

@@ -1,5 +1,5 @@
 {
-  "include": ["fetch.ts"],
+  "include": ["fetch.ts", "fetch-client.ts"],
   "compilerOptions": {
     "target": "esnext",
     "strict": true,

web/src/api/index.ts

@@ -1,3 +0,0 @@
-export * from './api';
-export * from '@immich/sdk/axios';
-export * from './utils';

web/src/api/types.ts

@@ -1,8 +0,0 @@
-import type { Configuration } from '@immich/sdk/axios';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export type ApiFp = (configuration: Configuration) => Record<any, (...arguments_: any) => any>;
-
-export type OmitLast<T extends readonly unknown[]> = T extends readonly [...infer U, any?] ? U : [...T];
-
-export type ApiParams<F extends ApiFp, K extends keyof ReturnType<F>> = OmitLast<Parameters<ReturnType<F>[K]>>;

web/src/api/utils.ts

@@ -1,63 +0,0 @@
-import { finishOAuth, linkOAuthAccount, startOAuth, unlinkOAuthAccount } from '@immich/sdk';
-import { type UserResponseDto } from '@immich/sdk/axios';
-import type { AxiosError } from 'axios';
-import {
-  NotificationType,
-  notificationController,
-} from '../lib/components/shared-components/notification/notification';
-import { handleError } from '../lib/utils/handle-error';
-
-export type ApiError = AxiosError<{ message: string }>;
-
-export const copyToClipboard = async (secret: string) => {
-  try {
-    await navigator.clipboard.writeText(secret);
-    notificationController.show({ message: 'Copied to clipboard!', type: NotificationType.Info });
-  } catch (error) {
-    handleError(error, 'Cannot copy to clipboard, make sure you are accessing the page through https');
-  }
-};
-
-export const makeSharedLinkUrl = (externalDomain: string, key: string) => {
-  let url = externalDomain || window.location.origin;
-  if (!url.endsWith('/')) {
-    url += '/';
-  }
-  return `${url}share/${key}`;
-};
-
-export const oauth = {
-  isCallback: (location: Location) => {
-    const search = location.search;
-    return search.includes('code=') || search.includes('error=');
-  },
-  isAutoLaunchDisabled: (location: Location) => {
-    const values = ['autoLaunch=0', 'password=1', 'password=true'];
-    for (const value of values) {
-      if (location.search.includes(value)) {
-        return true;
-      }
-    }
-    return false;
-  },
-  authorize: async (location: Location) => {
-    try {
-      const redirectUri = location.href.split('?')[0];
-      const { url } = await startOAuth({ oAuthConfigDto: { redirectUri } });
-      window.location.href = url;
-      return true;
-    } catch (error) {
-      handleError(error, 'Unable to login with OAuth');
-      return false;
-    }
-  },
-  login: (location: Location) => {
-    return finishOAuth({ oAuthCallbackDto: { url: location.href } });
-  },
-  link: (location: Location): Promise<UserResponseDto> => {
-    return linkOAuthAccount({ oAuthCallbackDto: { url: location.href } });
-  },
-  unlink: () => {
-    return unlinkOAuthAccount();
-  },
-};

web/src/lib/api/index.ts

@@ -4,12 +4,10 @@ class ImmichApi {
   public downloadApi: DownloadApi;
   public assetApi: AssetApi;
 
-  private config: configuration.Configuration;
-
   constructor(parameters: configuration.ConfigurationParameters) {
-    this.config = new configuration.Configuration(parameters);
+    const config = new configuration.Configuration(parameters);
-    this.downloadApi = new DownloadApi(this.config);
+    this.downloadApi = new DownloadApi(config);
-    this.assetApi = new AssetApi(this.config);
+    this.assetApi = new AssetApi(config);
   }
 }
 

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -3,8 +3,7 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import { type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
+  import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
-  import { JobCommand } from '@immich/sdk/axios';
   import {
     mdiAlertCircle,
     mdiAllInclusive,

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

@@ -6,8 +6,7 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { getJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { sendJobCommand, type AllJobStatusResponseDto, type JobCommandDto } from '@immich/sdk';
+  import { JobCommand, JobName, sendJobCommand, type AllJobStatusResponseDto, type JobCommandDto } from '@immich/sdk';
-  import { JobCommand, JobName } from '@immich/sdk/axios';
   import {
     mdiFaceRecognition,
     mdiFileJpgBox,

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

@@ -1,7 +1,14 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { type SystemConfigDto } from '@immich/sdk';
+  import {
-  import { AudioCodec, CQMode, ToneMapping, TranscodeHWAccel, TranscodePolicy, VideoCodec } from '@immich/sdk/axios';
+    AudioCodec,
+    CQMode,
+    ToneMapping,
+    TranscodeHWAccel,
+    TranscodePolicy,
+    VideoCodec,
+    type SystemConfigDto,
+  } from '@immich/sdk';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import { isEqual, sortBy } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getJobName } from '$lib/utils';
-  import { type SystemConfigDto, type SystemConfigJobDto } from '@immich/sdk';
+  import { JobName, type SystemConfigDto, type SystemConfigJobDto } from '@immich/sdk';
-  import { JobName } from '@immich/sdk/axios';
   import { isEqual } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -29,7 +28,8 @@
     JobName.Migration,
   ];
 
-  function isSystemConfigJobDto(jobName: JobName): jobName is keyof SystemConfigJobDto {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function isSystemConfigJobDto(jobName: any): jobName is keyof SystemConfigJobDto {
     return jobName in config.job;
   }
 </script>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { type SystemConfigDto } from '@immich/sdk';
+  import { LogLevel, type SystemConfigDto } from '@immich/sdk';
-  import { LogLevel } from '@immich/sdk/axios';
   import { isEqual } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
   import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
-  import { type SystemConfigDto } from '@immich/sdk';
+  import { Colorspace, type SystemConfigDto } from '@immich/sdk';
-  import { Colorspace } from '@immich/sdk/axios';
   import { isEqual } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -1,12 +1,13 @@
 import { createObjectURLMock } from '$lib/__mocks__/jsdom-url.mock';
-import { api, ThumbnailFormat } from '@api';
+import { api } from '$lib/api';
+import { ThumbnailFormat } from '@immich/sdk';
 import { albumFactory } from '@test-data';
 import '@testing-library/jest-dom';
-import { fireEvent, render, type RenderResult, waitFor } from '@testing-library/svelte';
+import { fireEvent, render, waitFor, type RenderResult } from '@testing-library/svelte';
-import AlbumCard from '../album-card.svelte';
 import type { MockedObject } from 'vitest';
+import AlbumCard from '../album-card.svelte';
 
-vi.mock('@api');
+vi.mock('$lib/api');
 const apiMock: MockedObject<typeof api> = api as MockedObject<typeof api>;
 
 describe('AlbumCard component', () => {

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

@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { api } from '$lib/api';
   import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { ThumbnailFormat, api, type AlbumResponseDto } from '@api';
+  import { ThumbnailFormat, getUserById, type AlbumResponseDto } from '@immich/sdk';
-  import { getUserById } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { getContextMenuPosition } from '../../utils/context-menu';

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

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { AlbumResponseDto, UserResponseDto } from '@immich/sdk';
   import { mdiClose, mdiPlus } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
   import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import type { AlbumResponseDto, UserResponseDto } from '@api';
-  import Icon from '$lib/components/elements/icon.svelte';
 
   export let album: AlbumResponseDto;
   export let user: UserResponseDto;

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

@@ -5,7 +5,7 @@
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { locale } from '$lib/stores/preferences.store';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@api';
+  import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
   import { dateFormats } from '../../constants';
   import { createAssetInteractionStore } from '../../stores/asset-interaction.store';

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
+  import { getMyUserInfo, removeUserFromAlbum, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
-  import { getMyUserInfo, removeUserFromAlbum } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { getContextMenuPosition } from '../../utils/context-menu';

web/src/lib/components/album-page/thumbnail-selection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { AlbumResponseDto, AssetResponseDto } from '@api';
+  import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import type { ActivityResponseDto } from '@immich/sdk';
   import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import Icon from '../elements/icon.svelte';
-  import type { ActivityResponseDto } from '@api';
 
   export let isLiked: ActivityResponseDto | null;
   export let numberOfComments: number | undefined;

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

@@ -8,6 +8,8 @@
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import {
+    ReactionType,
+    ThumbnailFormat,
     createActivity,
     deleteActivity,
     getActivities,
@@ -15,7 +17,6 @@
     type AssetTypeEnum,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { ReactionType, ThumbnailFormat } from '@immich/sdk/axios';
   import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
   import * as luxon from 'luxon';
   import { createEventDispatcher, onMount } from 'svelte';

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { ThumbnailFormat, type AlbumResponseDto } from '@api';
+  import { ThumbnailFormat, type AlbumResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
 
   const dispatch = createEventDispatcher<{

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

@@ -5,7 +5,7 @@
   import { getAssetJobName } from '$lib/utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import { AssetJobName, AssetTypeEnum, type AssetResponseDto } from '@api';
+  import { AssetJobName, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
   import {
     mdiAlertOutline,
     mdiArrowLeft,

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

@@ -20,12 +20,6 @@
     AssetJobName,
     AssetTypeEnum,
     ReactionType,
-    type ActivityResponseDto,
-    type AlbumResponseDto,
-    type AssetResponseDto,
-    type SharedLinkResponseDto,
-  } from '@api';
-  import {
     createActivity,
     createAlbum,
     deleteActivity,
@@ -36,6 +30,10 @@
     runAssetJobs,
     updateAsset,
     updateAssets,
+    type ActivityResponseDto,
+    type AlbumResponseDto,
+    type AssetResponseDto,
+    type SharedLinkResponseDto,
   } from '@immich/sdk';
   import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';

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

@@ -11,8 +11,13 @@
   import { getAssetFilename } from '$lib/utils/asset-utils';
   import { autoGrowHeight } from '$lib/utils/autogrow';
   import { clickOutside } from '$lib/utils/click-outside';
-  import { ThumbnailFormat, type AlbumResponseDto, type AssetResponseDto } from '@api';
+  import {
-  import { getAssetInfo, updateAsset } from '@immich/sdk';
+    ThumbnailFormat,
+    getAssetInfo,
+    updateAsset,
+    type AlbumResponseDto,
+    type AssetResponseDto,
+  } from '@immich/sdk';
   import {
     mdiCalendar,
     mdiCameraIris,

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

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { api } from '$lib/api';
+  import { getKey } from '$lib/utils';
+  import { type AssetResponseDto } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-  import { api, type AssetResponseDto } from '@api';
-  import { getKey } from '$lib/utils';
 
   export let asset: AssetResponseDto;
 

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { api } from '$lib/api';
   import { photoViewer } from '$lib/stores/assets.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
@@ -7,7 +8,7 @@
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { api, type AssetResponseDto } from '@api';
+  import { type AssetResponseDto } from '@immich/sdk';
   import { useZoomImageWheel } from '@zoom-image/svelte';
   import { onDestroy, onMount } from 'svelte';
   import { fade } from 'svelte/transition';

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

@@ -2,7 +2,7 @@
   import { videoViewerVolume } from '$lib/stores/preferences.store';
   import { getAssetFileUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { ThumbnailFormat } from '@api';
+  import { ThumbnailFormat } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -4,7 +4,7 @@
   import { ProjectionType } from '$lib/constants';
   import { getAssetFileUrl, getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/time-to-seconds';
-  import { AssetTypeEnum, ThumbnailFormat, type AssetResponseDto } from '@api';
+  import { AssetTypeEnum, ThumbnailFormat, type AssetResponseDto } from '@immich/sdk';
   import {
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,

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

@@ -4,8 +4,13 @@
   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 {
-  import { searchPerson } from '@immich/sdk';
+    AssetTypeEnum,
+    ThumbnailFormat,
+    searchPerson,
+    type AssetFaceResponseDto,
+    type PersonResponseDto,
+  } from '@immich/sdk';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { linear } from 'svelte/easing';

web/src/lib/components/faces-page/edit-name-input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type PersonResponseDto } from '@api';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Button from '../elements/buttons/button.svelte';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { type PersonResponseDto } from '@api';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
 

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

@@ -4,8 +4,7 @@
   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, type PersonResponseDto } from '@immich/sdk';
-  import { getAllPeople, getPerson, mergePerson } from '@immich/sdk';
   import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { flip } from 'svelte/animate';

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

@@ -2,7 +2,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { type PersonResponseDto } from '@api';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';

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

@@ -3,7 +3,7 @@
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import { type PersonResponseDto } from '@api';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';

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

@@ -2,8 +2,7 @@
   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, type PersonResponseDto } from '@immich/sdk';
-  import { searchPerson } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import FaceThumbnail from './face-thumbnail.svelte';
   import SearchBar from './search-bar.svelte';

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

@@ -6,8 +6,15 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
-  import { AssetTypeEnum, type AssetFaceResponseDto, type PersonResponseDto } from '@api';
+  import {
-  import { createPerson, getAllPeople, getFaces, reassignFacesById } from '@immich/sdk';
+    AssetTypeEnum,
+    createPerson,
+    getAllPeople,
+    getFaces,
+    reassignFacesById,
+    type AssetFaceResponseDto,
+    type PersonResponseDto,
+  } from '@immich/sdk';
   import { mdiArrowLeftThin, mdiRestart } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { linear } from 'svelte/easing';

web/src/lib/components/forms/api-key-form.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { APIKeyResponseDto } from '@api';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { ApiKeyResponseDto } from '@immich/sdk';
+  import { mdiKeyVariant } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiKeyVariant } from '@mdi/js';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
-  export let apiKey: Partial<APIKeyResponseDto>;
+  export let apiKey: Partial<ApiKeyResponseDto>;
   export let title = 'API Key';
   export let cancelText = 'Cancel';
   export let submitText = 'Save';
@@ -15,7 +15,7 @@
 
   const dispatch = createEventDispatcher<{
     cancel: void;
-    submit: Partial<APIKeyResponseDto>;
+    submit: Partial<ApiKeyResponseDto>;
   }>();
   const handleCancel = () => dispatch('cancel');
   const handleSubmit = () => {

web/src/lib/components/forms/api-key-secret.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { copyToClipboard } from '$lib/utils';
+  import { mdiKeyVariant } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { copyToClipboard } from '@api';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-  import { mdiKeyVariant } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
 
   export let secret = '';
 

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { handleError } from '../../utils/handle-error';
-  import LibraryImportPathForm from './library-import-path-form.svelte';
-  import { onMount } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import type { LibraryResponseDto } from '@api';
+  import type { LibraryResponseDto } from '@immich/sdk';
   import { mdiPencilOutline } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
+  import LibraryImportPathForm from './library-import-path-form.svelte';
 
   export let library: Partial<LibraryResponseDto>;
 

web/src/lib/components/forms/library-rename-form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import type { LibraryResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
-  import type { LibraryResponseDto } from '@api';
 
   export let library: Partial<LibraryResponseDto>;
 

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { LibraryType, type LibraryResponseDto } from '@api';
-  import { handleError } from '../../utils/handle-error';
-  import { onMount } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
+  import { LibraryType, type LibraryResponseDto } from '@immich/sdk';
   import { mdiPencilOutline } from '@mdi/js';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
+  import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
 
   export let library: Partial<LibraryResponseDto>;
 

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

@@ -3,8 +3,8 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { AppRoute } from '$lib/constants';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { oauth } from '$lib/utils';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
-  import { oauth } from '@api';
   import { getServerConfig, login } from '@immich/sdk';
   import { createEventDispatcher, onMount } from 'svelte';
   import { fade } from 'svelte/transition';

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -10,7 +10,7 @@
   import { memoryStore } from '$lib/stores/memory.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { fromLocalDateTime } from '$lib/utils/timeline-util';
-  import { getMemoryLane } from '@immich/sdk';
+  import { ThumbnailFormat, getMemoryLane } from '@immich/sdk';
   import { mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiPause, mdiPlay } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';
@@ -168,7 +168,9 @@
           <button class="relative h-full w-full rounded-2xl" disabled={!previousMemory} on:click={toPreviousMemory}>
             <img
               class="h-full w-full rounded-2xl object-cover"
-              src={previousMemory ? getAssetThumbnailUrl(previousMemory.assets[0].id, 'JPEG') : noThumbnailUrl}
+              src={previousMemory
+                ? getAssetThumbnailUrl(previousMemory.assets[0].id, ThumbnailFormat.Jpeg)
+                : noThumbnailUrl}
               alt=""
               draggable="false"
             />
@@ -191,7 +193,7 @@
               <img
                 transition:fade
                 class="h-full w-full rounded-2xl object-contain transition-all"
-                src={getAssetThumbnailUrl(currentAsset.id, 'JPEG')}
+                src={getAssetThumbnailUrl(currentAsset.id, ThumbnailFormat.Jpeg)}
                 alt=""
                 draggable="false"
               />
@@ -231,7 +233,7 @@
           <button class="relative h-full w-full rounded-2xl" on:click={toNextMemory} disabled={!nextMemory}>
             <img
               class="h-full w-full rounded-2xl object-cover"
-              src={nextMemory ? getAssetThumbnailUrl(nextMemory.assets[0].id, 'JPEG') : noThumbnailUrl}
+              src={nextMemory ? getAssetThumbnailUrl(nextMemory.assets[0].id, ThumbnailFormat.Jpeg) : noThumbnailUrl}
               alt=""
               draggable="false"
             />

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
-  import { type SystemConfigDto } from '@api';
+  import { getConfig, type SystemConfigDto } from '@immich/sdk';
-  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';

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

@@ -8,8 +8,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
   import { addAssetsToAlbum } from '$lib/utils/asset-utils';
-  import { type AlbumResponseDto } from '@api';
+  import { createAlbum, type AlbumResponseDto } from '@immich/sdk';
-  import { createAlbum } from '@immich/sdk';
   import { getMenuContext } from '../asset-select-context-menu.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 

web/src/lib/components/photos-page/actions/asset-job-actions.svelte

@@ -6,8 +6,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { getAssetJobMessage, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { AssetJobName, AssetTypeEnum } from '@api';
+  import { AssetJobName, AssetTypeEnum, runAssetJobs } from '@immich/sdk';
-  import { runAssetJobs } from '@immich/sdk';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let jobs: AssetJobName[] = [

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

@@ -2,8 +2,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { getKey } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { type SharedLinkResponseDto } from '@api';
+  import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
-  import { removeSharedLinkAssets } from '@immich/sdk';
   import { mdiDeleteOutline } from '@mdi/js';
   import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import type { AssetStore, Viewport } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
   import { getAssetRatio } from '$lib/utils/asset-utils';
   import { formatGroupTitle, fromLocalDateTime, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
-  import type { AssetResponseDto } from '@api';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
   import justifiedLayout from 'justified-layout';
   import { createEventDispatcher } from 'svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { AssetStore } from '$lib/stores/assets.store';
-  import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import type { Viewport } from '$lib/stores/assets.store';
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
 
   export let assets: AssetResponseDto[];
   export let bucketDate: string;

web/src/lib/components/photos-page/asset-grid.svelte

@@ -7,8 +7,11 @@
   import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
   import { locale, showDeleteModal } from '$lib/stores/preferences.store';
   import { isSearchEnabled } from '$lib/stores/search.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { deleteAssets } from '$lib/utils/actions';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
-  import type { AlbumResponseDto, AssetResponseDto } from '@api';
+  import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
@@ -17,9 +20,6 @@
   import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { deleteAssets } from '$lib/utils/actions';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
 
   export let isSelectionMode = false;

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -14,9 +14,9 @@
 
 <script lang="ts">
   import { locale } from '$lib/stores/preferences.store';
-  import type { AssetResponseDto } from '@api';
+  import type { AssetResponseDto } from '@immich/sdk';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import { mdiClose } from '@mdi/js';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
   export let assets: Set<AssetResponseDto>;
   export let clearSelect: () => void;

web/src/lib/components/photos-page/memory-lane.svelte

@@ -4,7 +4,7 @@
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { memoryStore } from '$lib/stores/memory.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { getMemoryLane } from '@immich/sdk';
+  import { ThumbnailFormat, getMemoryLane } from '@immich/sdk';
   import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -73,7 +73,7 @@
         >
           <img
             class="h-full w-full rounded-xl object-cover"
-            src={getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
+            src={getAssetThumbnailUrl(memory.assets[0].id, ThumbnailFormat.Jpeg)}
             alt={memory.title}
             draggable="false"
           />

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -6,8 +6,7 @@
   import { downloadArchive } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
-  import { type AssetResponseDto, type SharedLinkResponseDto } from '@api';
+  import { addSharedLinkAssets, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
-  import { addSharedLinkAssets } from '@immich/sdk';
   import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { type AlbumResponseDto } from '@api';
+  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
-  import { getAllAlbums } from '@immich/sdk';
   import { mdiPlus } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import AlbumListItem from '../asset-viewer/album-list-item.svelte';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { AssetResponseDto } from '@api';
+  import type { AssetResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from './confirm-dialogue.svelte';
   import Map from './map/map.svelte';

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

@@ -6,9 +6,9 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
+  import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { SharedLinkType, copyToClipboard, makeSharedLinkUrl, type SharedLinkResponseDto } from '@api';
+  import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
-  import { createSharedLink, updateSharedLink } from '@immich/sdk';
   import { mdiLink } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import BaseModal from '../base-modal.svelte';

web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { getThumbnailSize } from '$lib/utils/thumbnail-util';
-  import { type AssetResponseDto, ThumbnailFormat } from '@api';
+  import { ThumbnailFormat, type AssetResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import { flip } from 'svelte/animate';
 

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { type AssetResponseDto, ThumbnailFormat } from '@api';
-  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import { flip } from 'svelte/animate';
-  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { onDestroy } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
   import type { BucketPosition } from '$lib/stores/assets.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
+  import { ThumbnailFormat, type AssetResponseDto } from '@immich/sdk';
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
 
   const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
 

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

@@ -3,7 +3,7 @@
   import { Theme } from '$lib/constants';
   import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { getMapStyle, type MapMarkerResponseDto } from '@immich/sdk';
+  import { getMapStyle, MapTheme, 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';
@@ -38,7 +38,7 @@
 
   $: style = (() =>
     getMapStyle({
-      theme: $mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT,
+      theme: ($mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT) as unknown as MapTheme,
     }) as Promise<StyleSpecification>)();
 
   const dispatch = createEventDispatcher<{

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

@@ -8,7 +8,7 @@
   import { mdiCog, mdiLogout, mdiPencil } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { NotificationType, notificationController } from '../notification/notification';
+  import { notificationController, NotificationType } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
   import { mdiClose } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
-  import { UserAvatarColor, type UserResponseDto } from '@api';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import FullScreenModal from '../full-screen-modal.svelte';
   import UserAvatar from '../user-avatar.svelte';
 

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
-  import { type AssetResponseDto } from '@api';
+  import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
-  import { createProfileImage } from '@immich/sdk';
   import domtoimage from 'dom-to-image';
   import { createEventDispatcher, onMount } from 'svelte';
   import PhotoViewer from '../asset-viewer/photo-viewer.svelte';

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

@@ -4,7 +4,7 @@
   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 { SearchSuggestionType, type PersonResponseDto } from '@immich/sdk';
   import { getAllPeople, getSearchSuggestions } from '@immich/sdk';
   import { mdiArrowRight, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';

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

@@ -2,7 +2,6 @@
   import { page } from '$app/stores';
   import { locale, sidebarSettings } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { type AssetApiGetAssetStatisticsRequest } from '@api';
   import { getAlbumCount, getAssetStatistics } from '@immich/sdk';
   import {
     mdiAccount,
@@ -24,7 +23,7 @@
   import SideBarButton from './side-bar-button.svelte';
   import SideBarSection from './side-bar-section.svelte';
 
-  const getStats = (dto: AssetApiGetAssetStatisticsRequest) => getAssetStatistics(dto);
+  const getStats = (dto: Parameters<typeof getAssetStatistics>[0]) => getAssetStatistics(dto);
 
   const handleAlbumCount = async () => {
     try {

web/src/lib/components/shared-components/version-announcement-box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ServerVersionResponseDto } from '@api';
   import { websocketStore } from '$lib/stores/websocket';
+  import type { ServerVersionResponseDto } from '@immich/sdk';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from './full-screen-modal.svelte';
 

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -4,8 +4,13 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { SharedLinkType, ThumbnailFormat, type AssetResponseDto, type SharedLinkResponseDto } from '@api';
+  import {
-  import { getAssetInfo } from '@immich/sdk';
+    SharedLinkType,
+    ThumbnailFormat,
+    getAssetInfo,
+    type AssetResponseDto,
+    type SharedLinkResponseDto,
+  } from '@immich/sdk';
   import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiOpenInNew } from '@mdi/js';
   import * as luxon from 'luxon';
   import { createEventDispatcher } from 'svelte';

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

@@ -3,7 +3,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { type ApiError } from '@api';
+  import { type ApiError } from '$lib/utils';
   import { changePassword } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';

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

@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
-  import type { AuthDeviceResponseDto } from '@api';
-  import { DateTime, type ToRelativeCalendarOptions } from 'luxon';
-  import { createEventDispatcher } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AuthDeviceResponseDto } from '@immich/sdk';
   import {
     mdiAndroid,
     mdiApple,
     mdiAppleSafari,
-    mdiMicrosoftWindows,
-    mdiLinux,
     mdiGoogleChrome,
-    mdiTrashCanOutline,
     mdiHelp,
+    mdiLinux,
+    mdiMicrosoftWindows,
+    mdiTrashCanOutline,
   } from '@mdi/js';
+  import { DateTime, type ToRelativeCalendarOptions } from 'luxon';
+  import { createEventDispatcher } from 'svelte';
 
   export let device: AuthDeviceResponseDto;
 

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

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { type AuthDeviceResponseDto } from '@api';
+  import { getAuthDevices, logoutAuthDevice, logoutAuthDevices, type AuthDeviceResponseDto } from '@immich/sdk';
-  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';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import DeviceCard from './device-card.svelte';
 
   export let devices: AuthDeviceResponseDto[];

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

@@ -4,8 +4,8 @@
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { handleError } from '$lib/utils/handle-error';
-  import { LibraryType, type LibraryResponseDto, type LibraryStatsResponseDto } from '@api';
   import {
+    LibraryType,
     createLibrary,
     deleteLibrary,
     getLibraries,
@@ -13,6 +13,8 @@
     removeOfflineFiles,
     scanLibrary,
     updateLibrary,
+    type LibraryResponseDto,
+    type LibraryStatsResponseDto,
   } from '@immich/sdk';
   import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js';
   import { onMount } from 'svelte';

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

@@ -3,8 +3,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { type UserResponseDto } from '@api';
+  import { updateUser, type UserResponseDto } from '@immich/sdk';
-  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';

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

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { oauth, type UserResponseDto } from '@api';
+  import { oauth } from '$lib/utils';
+  import { type UserResponseDto } from '@immich/sdk';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { type UserResponseDto } from '@api';
+  import { getAllUsers, getPartners, type UserResponseDto } from '@immich/sdk';
-  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';

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

@@ -1,6 +1,12 @@
 <script lang="ts">
-  import { type PartnerResponseDto, type UserResponseDto } from '@api';
+  import {
-  import { createPartner, getPartners, removePartner, updatePartner } from '@immich/sdk';
+    createPartner,
+    getPartners,
+    removePartner,
+    updatePartner,
+    type PartnerResponseDto,
+    type UserResponseDto,
+  } from '@immich/sdk';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { handleError } from '../../utils/handle-error';

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   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, type ApiKeyResponseDto } from '@immich/sdk';
-  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';
@@ -12,11 +11,11 @@
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
-  export let keys: APIKeyResponseDto[];
+  export let keys: ApiKeyResponseDto[];
 
-  let newKey: Partial<APIKeyResponseDto> | null = null;
+  let newKey: Partial<ApiKeyResponseDto> | null = null;
-  let editKey: APIKeyResponseDto | null = null;
+  let editKey: ApiKeyResponseDto | null = null;
-  let deleteKey: APIKeyResponseDto | null = null;
+  let deleteKey: ApiKeyResponseDto | null = null;
   let secret = '';
 
   const format: Intl.DateTimeFormatOptions = {
@@ -29,7 +28,7 @@
     keys = await getApiKeys();
   }
 
-  const handleCreate = async (detail: Partial<APIKeyResponseDto>) => {
+  const handleCreate = async (detail: Partial<ApiKeyResponseDto>) => {
     try {
       const data = await createApiKey({ apiKeyCreateDto: detail });
       secret = data.secret;
@@ -41,7 +40,7 @@
     }
   };
 
-  const handleUpdate = async (detail: Partial<APIKeyResponseDto>) => {
+  const handleUpdate = async (detail: Partial<ApiKeyResponseDto>) => {
     if (!editKey || !detail.name) {
       return;
     }

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

@@ -1,25 +1,26 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
+  import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { type APIKeyResponseDto, type AuthDeviceResponseDto, oauth } from '@api';
+  import { user } from '$lib/stores/user.store';
+  import { oauth } from '$lib/utils';
+  import { type ApiKeyResponseDto, type AuthDeviceResponseDto } from '@immich/sdk';
   import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
+  import AppearanceSettings from './appearance-settings.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';
   import LibraryList from './library-list.svelte';
   import MemoriesSettings from './memories-settings.svelte';
   import OAuthSettings from './oauth-settings.svelte';
   import PartnerSettings from './partner-settings.svelte';
+  import QualitySettings from './quality-settings.svelte';
   import SidebarSettings from './sidebar-settings.svelte';
+  import TrashSettings from './trash-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
-  import { user } from '$lib/stores/user.store';
-  import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
-  import AppearanceSettings from './appearance-settings.svelte';
-  import TrashSettings from './trash-settings.svelte';
-  import QualitySettings from './quality-settings.svelte';
 
-  export let keys: APIKeyResponseDto[] = [];
+  export let keys: ApiKeyResponseDto[] = [];
   export let devices: AuthDeviceResponseDto[] = [];
 
   let oauthOpen = false;

web/src/lib/stores/asset-interaction.store.ts

@@ -1,4 +1,4 @@
-import type { AssetResponseDto } from '@api';
+import type { AssetResponseDto } from '@immich/sdk';
 import { derived, writable } from 'svelte/store';
 
 export interface AssetInteractionStore {

web/src/lib/stores/asset-viewing.store.ts

@@ -1,6 +1,5 @@
 import { getKey } from '$lib/utils';
-import { type AssetResponseDto } from '@api';
+import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-import { getAssetInfo } from '@immich/sdk';
 import { writable } from 'svelte/store';
 
 function createAssetViewingStore() {

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

@@ -1,6 +1,5 @@
 import { getKey } from '$lib/utils';
-import { getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
+import { TimeBucketSize, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
-import { TimeBucketSize, type AssetApiGetTimeBucketsRequest } from '@immich/sdk/axios';
 import { throttle } from 'lodash-es';
 import { DateTime } from 'luxon';
 import { writable, type Unsubscriber } from 'svelte/store';
@@ -13,7 +12,7 @@ export enum BucketPosition {
   Visible = 'visible',
   Unknown = 'unknown',
 }
-
+type AssetApiGetTimeBucketsRequest = Parameters<typeof getTimeBuckets>[0];
 export type AssetStoreOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'>;
 
 export interface Viewport {
@@ -157,10 +156,7 @@ export class AssetStore {
     this.assetToBucket = {};
     this.albumAssets = new Set();
 
-    const buckets = await getTimeBuckets({
+    const buckets = await getTimeBuckets({ ...this.options, key: getKey() });
-      ...this.options,
-      key: getKey(),
-    });
 
     this.initialized = true;
 

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

@@ -1,4 +1,4 @@
+import type { MemoryLaneResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
-import type { MemoryLaneResponseDto } from '@api';
 
 export const memoryStore = writable<MemoryLaneResponseDto[]>();

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

@@ -1,5 +1,4 @@
-import { type ServerConfigDto, type ServerFeaturesDto } from '@api';
+import { getServerConfig, getServerFeatures, type ServerConfigDto, type ServerFeaturesDto } from '@immich/sdk';
-import { getServerConfig, getServerFeatures } from '@immich/sdk';
 import { writable } from 'svelte/store';
 
 export type FeatureFlags = ServerFeaturesDto & { loaded: boolean };

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

@@ -1,4 +1,4 @@
+import type { ServerInfoResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
-import type { ServerInfoResponseDto } from '@api';
 
 export const serverInfo = writable<ServerInfoResponseDto>();

web/src/lib/stores/stacked-asset.store.ts

@@ -1,4 +1,4 @@
+import type { AssetResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
-import type { AssetResponseDto } from '@api';
 
 export const stackAssetsStore = writable<AssetResponseDto[]>([]);

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

@@ -1,5 +1,5 @@
+import type { UserResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
-import type { UserResponseDto } from '@api';
 
 export let user = writable<UserResponseDto>();
 

web/src/lib/stores/websocket.ts

@@ -1,5 +1,5 @@
-import type { AssetResponseDto, ServerVersionResponseDto } from '@api';
+import type { AssetResponseDto, ServerVersionResponseDto } from '@immich/sdk';
-import { type Socket, io } from 'socket.io-client';
+import { io, type Socket } from 'socket.io-client';
 import { get, writable } from 'svelte/store';
 import { loadConfig } from './server-config.store';
 import { user } from './user.store';

web/src/lib/utils.ts

@@ -1,7 +1,20 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { defaults } from '@immich/sdk';
+import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
-import { AssetJobName, JobName, ThumbnailFormat, common } from '@immich/sdk/axios';
+import { handleError } from '$lib/utils/handle-error';
+import {
+  AssetJobName,
+  JobName,
+  ThumbnailFormat,
+  defaults,
+  finishOAuth,
+  linkOAuthAccount,
+  startOAuth,
+  unlinkOAuthAccount,
+  type UserResponseDto,
+} from '@immich/sdk';
+import { common } from '@immich/sdk/axios';
+import type { AxiosError } from 'axios';
 import { get } from 'svelte/store';
 
 interface UpdateParamAction {
@@ -121,3 +134,58 @@ export const getAssetJobMessage = (job: AssetJobName) => {
 
   return messages[job];
 };
+
+export type ApiError = AxiosError<{ message: string }>;
+
+export const copyToClipboard = async (secret: string) => {
+  try {
+    await navigator.clipboard.writeText(secret);
+    notificationController.show({ message: 'Copied to clipboard!', type: NotificationType.Info });
+  } catch (error) {
+    handleError(error, 'Cannot copy to clipboard, make sure you are accessing the page through https');
+  }
+};
+
+export const makeSharedLinkUrl = (externalDomain: string, key: string) => {
+  let url = externalDomain || window.location.origin;
+  if (!url.endsWith('/')) {
+    url += '/';
+  }
+  return `${url}share/${key}`;
+};
+
+export const oauth = {
+  isCallback: (location: Location) => {
+    const search = location.search;
+    return search.includes('code=') || search.includes('error=');
+  },
+  isAutoLaunchDisabled: (location: Location) => {
+    const values = ['autoLaunch=0', 'password=1', 'password=true'];
+    for (const value of values) {
+      if (location.search.includes(value)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  authorize: async (location: Location) => {
+    try {
+      const redirectUri = location.href.split('?')[0];
+      const { url } = await startOAuth({ oAuthConfigDto: { redirectUri } });
+      window.location.href = url;
+      return true;
+    } catch (error) {
+      handleError(error, 'Unable to login with OAuth');
+      return false;
+    }
+  },
+  login: (location: Location) => {
+    return finishOAuth({ oAuthCallbackDto: { url: location.href } });
+  },
+  link: (location: Location): Promise<UserResponseDto> => {
+    return linkOAuthAccount({ oAuthCallbackDto: { url: location.href } });
+  },
+  unlink: () => {
+    return unlinkOAuthAccount();
+  },
+};

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

@@ -1,4 +1,4 @@
-import type { AssetResponseDto } from '@api';
+import type { AssetResponseDto } from '@immich/sdk';
 import { getAssetFilename, getFilenameExtension } from './asset-utils';
 
 describe('get file extension from filename', () => {

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

@@ -1,6 +1,6 @@
+import { api } from '$lib/api';
 import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import { downloadManager } from '$lib/stores/download';
-import { api } from '@api';
 import {
   addAssetsToAlbum as addAssets,
   getDownloadInfo,

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

@@ -1,10 +1,10 @@
+import { api } from '$lib/api';
 import { UploadState } from '$lib/models/upload-asset';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import { getKey } from '$lib/utils';
 import { addAssetsToAlbum } from '$lib/utils/asset-utils';
 import { ExecutorQueue } from '$lib/utils/executor-queue';
-import { api, type AssetFileUploadResponseDto } from '@api';
+import { getSupportedMediaTypes, type AssetFileUploadResponseDto } from '@immich/sdk';
-import { getSupportedMediaTypes } from '@immich/sdk';
 import { getServerErrorMessage, handleError } from './handle-error';
 
 let _extensions: string[];

web/src/lib/utils/handle-error.ts

@@ -1,4 +1,4 @@
-import type { ApiError } from '@api';
+import type { ApiError } from '$lib/utils';
 import axios from 'axios';
 import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
 

web/src/lib/utils/person.ts

@@ -1,4 +1,4 @@
-import type { PersonResponseDto } from '@api';
+import type { PersonResponseDto } from '@immich/sdk';
 
 export const searchNameLocal = (
   name: string,

web/src/lib/utils/timeline-util.ts

@@ -1,4 +1,4 @@
-import type { AssetResponseDto } from '@api';
+import type { AssetResponseDto } from '@immich/sdk';
 import { groupBy, sortBy } from 'lodash-es';
 import { DateTime, Interval } from 'luxon';
 

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

@@ -8,42 +8,41 @@
 </script>
 
 <script lang="ts">
-  import { albumViewSettings } from '$lib/stores/preferences.store';
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import { goto } from '$app/navigation';
+  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Dropdown from '$lib/components/elements/dropdown.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import TableHeader from '$lib/components/elements/table-header.svelte';
+  import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import type { PageData } from './$types';
-  import { useAlbums } from './albums.bloc';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import { onMount } from 'svelte';
-  import { flip } from 'svelte/animate';
-  import Dropdown from '$lib/components/elements/dropdown.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { AppRoute, dateFormats } from '$lib/constants';
-  import { locale, AlbumViewMode } from '$lib/stores/preferences.store';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  import type { AlbumResponseDto } from '@api';
-  import TableHeader from '$lib/components/elements/table-header.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { orderBy } from 'lodash-es';
   import {
-    mdiPlusBoxOutline,
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AppRoute, dateFormats } from '$lib/constants';
+  import { AlbumViewMode, albumViewSettings, locale } from '$lib/stores/preferences.store';
+  import type { AlbumResponseDto } from '@immich/sdk';
+  import {
     mdiArrowDownThin,
     mdiArrowUpThin,
+    mdiDeleteOutline,
     mdiFormatListBulletedSquare,
     mdiPencilOutline,
+    mdiPlusBoxOutline,
     mdiTrashCanOutline,
     mdiViewGridOutline,
-    mdiDeleteOutline,
   } from '@mdi/js';
+  import { orderBy } from 'lodash-es';
+  import { onMount } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import type { PageData } from './$types';
+  import { useAlbums } from './albums.bloc';
 
   export let data: PageData;
 

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

@@ -46,8 +46,9 @@
   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 {
+    ReactionLevel,
+    ReactionType,
     addAssetsToAlbum,
     addUsersToAlbum,
     createActivity,
@@ -57,6 +58,8 @@
     getActivityStatistics,
     getAlbumInfo,
     updateAlbumInfo,
+    type ActivityResponseDto,
+    type UserResponseDto,
   } from '@immich/sdk';
   import {
     mdiArrowLeft,

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

@@ -10,8 +10,7 @@
   import type { MapSettings } from '$lib/stores/preferences.store';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { type MapMarkerResponseDto } from '@api';
+  import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
-  import { getMapMarkers } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { DateTime, Duration } from 'luxon';
   import { onDestroy, onMount } from 'svelte';

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

@@ -28,8 +28,15 @@
   import { handleError } from '$lib/utils/handle-error';
   import { searchNameLocal } from '$lib/utils/person';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { type PeopleUpdateItem, type PersonResponseDto } from '@api';
+  import {
-  import { getPerson, mergePerson, searchPerson, updatePeople, updatePerson } from '@immich/sdk';
+    getPerson,
+    mergePerson,
+    searchPerson,
+    updatePeople,
+    updatePerson,
+    type PeopleUpdateItem,
+    type PersonResponseDto,
+  } from '@immich/sdk';
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import type { PageData } from './$types';

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -31,6 +31,7 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/stores/assets.store';
   import { websocketStore } from '$lib/stores/websocket';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { handleError } from '$lib/utils/handle-error';
   import { isExternalUrl } from '$lib/utils/navigation';
@@ -46,7 +47,6 @@
   import { mdiArrowLeft, mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
 
   export let data: PageData;
 

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { SearchExploreResponseDto } from '@api';
-  import type { PageData } from './$types';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import { mdiMapMarkerOff } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { AppRoute } from '$lib/constants';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.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 { SearchExploreResponseDto } from '@immich/sdk';
+  import { mdiMapMarkerOff } from '@mdi/js';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 

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

@@ -1,6 +1,10 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import AlbumCard from '$lib/components/album-page/album-card.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';
@@ -14,20 +18,16 @@
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
-  import type { PageData } from './$types';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
-  import { flip } from 'svelte/animate';
-  import { onDestroy, onMount } from 'svelte';
-  import { browser } from '$app/environment';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
-  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
-  import { search, type AssetResponseDto, type SearchResponseDto } from '@immich/sdk';
   import { authenticate } from '$lib/utils/auth';
+  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { search, type AssetResponseDto, type SearchResponseDto } from '@immich/sdk';
+  import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
+  import { onDestroy, onMount } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 

web/src/routes/(user)/share/[key]/+page.svelte

@@ -7,8 +7,7 @@
   import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
   import { user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
-  import { SharedLinkType } from '@api';
+  import { getMySharedLink, SharedLinkType } from '@immich/sdk';
-  import { getMySharedLink } from '@immich/sdk';
   import type { PageData } from './$types';
 
   export let data: PageData;