From 01f52c9021f296fcbc867d88cb9b2392e5955df4 Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sat, 1 Jun 2024 22:58:35 +0000
Subject: [PATCH] chore(web): unique ID generation (#9932)

* chore(web): automatically generate unique IDs

* fix: revert changes to Slider

* chore: add test for id store
---
 .../admin-page/delete-confirm-dialogue.svelte |  1 -
 .../admin-page/restore-dialogue.svelte        |  1 -
 .../settings/auth/auth-settings.svelte        | 19 ++----------------
 .../settings/ffmpeg/ffmpeg-settings.svelte    |  3 ---
 .../settings/image/image-settings.svelte      |  2 --
 .../library-settings/library-settings.svelte  |  2 --
 .../logging-settings/logging-settings.svelte  |  8 +-------
 .../machine-learning-settings.svelte          |  4 ----
 .../settings/map-settings/map-settings.svelte |  2 --
 .../new-version-check-settings.svelte         |  1 -
 .../notification-settings.svelte              |  2 --
 .../storage-template-settings.svelte          |  2 --
 .../trash-settings/trash-settings.svelte      |  1 -
 .../album-page/album-options.svelte           |  3 +--
 .../album-page/share-info-modal.svelte        |  4 +---
 .../album-page/user-selection-modal.svelte    |  2 +-
 .../faces-page/merge-suggestion-modal.svelte  |  2 +-
 .../faces-page/set-birth-date-modal.svelte    |  2 +-
 .../lib/components/forms/api-key-form.svelte  |  2 +-
 .../components/forms/api-key-secret.svelte    |  2 +-
 .../components/forms/create-user-form.svelte  |  2 +-
 .../components/forms/edit-album-form.svelte   |  2 +-
 .../components/forms/edit-user-form.svelte    |  2 +-
 .../library-exclusion-pattern-form.svelte     |  7 +------
 .../forms/library-import-path-form.svelte     |  2 +-
 .../forms/library-user-picker-form.svelte     |  7 +------
 .../map-page/map-settings-modal.svelte        | 16 ++++++---------
 .../photos-page/delete-asset-dialog.svelte    |  1 -
 .../album-selection-modal.svelte              |  2 +-
 .../shared-components/change-date.svelte      |  9 +--------
 .../shared-components/change-location.svelte  |  1 -
 .../shared-components/combobox.svelte         |  9 +++++----
 .../create-shared-link-modal.svelte           | 20 ++++++-------------
 .../dialog/confirm-dialog.svelte              |  3 +--
 .../full-screen-modal.svelte                  | 11 +++++-----
 .../navigation-bar/avatar-selector.svelte     |  2 +-
 .../profile-image-cropper.svelte              |  2 +-
 .../search-bar/search-camera-section.svelte   |  2 --
 .../search-bar/search-location-section.svelte |  3 ---
 .../settings/setting-combobox.svelte          |  2 --
 .../settings/setting-switch.svelte            |  4 +++-
 .../shared-components/show-shortcuts.svelte   |  7 +------
 .../version-announcement-box.svelte           |  2 +-
 .../lib/components/slideshow-settings.svelte  |  4 ++--
 .../user-settings-page/app-settings.svelte    |  9 ---------
 .../memories-settings.svelte                  |  1 -
 .../partner-selection-modal.svelte            |  2 +-
 .../partner-settings.svelte                   |  1 -
 web/src/lib/stores/unique-id.store.spec.ts    | 14 +++++++++++++
 web/src/lib/stores/unique-id.store.ts         | 16 +++++++++++++++
 web/src/routes/(user)/people/+page.svelte     |  2 +-
 .../routes/admin/user-management/+page.svelte |  1 -
 52 files changed, 83 insertions(+), 150 deletions(-)
 create mode 100644 web/src/lib/stores/unique-id.store.spec.ts
 create mode 100644 web/src/lib/stores/unique-id.store.ts

diff --git a/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte b/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
index 8436935cae..004f8deeed 100644
--- a/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
+++ b/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
@@ -43,7 +43,6 @@
 </script>
 
 <ConfirmDialog
-  id="delete-user-confirmation-modal"
   title="Delete user"
   confirmText={forceDelete ? 'Permanently Delete' : 'Delete'}
   onConfirm={handleDeleteUser}
diff --git a/web/src/lib/components/admin-page/restore-dialogue.svelte b/web/src/lib/components/admin-page/restore-dialogue.svelte
index 3c48b13970..b606caf4e7 100644
--- a/web/src/lib/components/admin-page/restore-dialogue.svelte
+++ b/web/src/lib/components/admin-page/restore-dialogue.svelte
@@ -28,7 +28,6 @@
 </script>
 
 <ConfirmDialog
-  id="restore-user-modal"
   title="Restore user"
   confirmText="Continue"
   confirmColor="green"
diff --git a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
index b5862eda70..a71de88941 100644
--- a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
@@ -42,12 +42,7 @@
 </script>
 
 {#if isConfirmOpen}
-  <ConfirmDialog
-    id="disable-login-modal"
-    title="Disable login"
-    onCancel={() => (isConfirmOpen = false)}
-    onConfirm={() => handleSave(true)}
-  >
+  <ConfirmDialog title="Disable login" onCancel={() => (isConfirmOpen = false)} onConfirm={() => handleSave(true)}>
     <svelte:fragment slot="prompt">
       <div class="flex flex-col gap-4">
         <p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
@@ -82,13 +77,7 @@
               >.
             </p>
 
-            <SettingSwitch
-              id="login-with-oauth"
-              {disabled}
-              title="ENABLE"
-              subtitle="Login with OAuth"
-              bind:checked={config.oauth.enabled}
-            />
+            <SettingSwitch {disabled} title="ENABLE" subtitle="Login with OAuth" bind:checked={config.oauth.enabled} />
 
             {#if config.oauth.enabled}
               <hr />
@@ -177,7 +166,6 @@
               />
 
               <SettingSwitch
-                id="auto-register-new-users"
                 title="AUTO REGISTER"
                 subtitle="Automatically register new users after signing in with OAuth"
                 bind:checked={config.oauth.autoRegister}
@@ -185,7 +173,6 @@
               />
 
               <SettingSwitch
-                id="auto-launch-oauth"
                 title="AUTO LAUNCH"
                 subtitle="Start the OAuth login flow automatically upon navigating to the login page"
                 disabled={disabled || !config.oauth.enabled}
@@ -193,7 +180,6 @@
               />
 
               <SettingSwitch
-                id="mobile-redirect-uri-override"
                 title="MOBILE REDIRECT URI OVERRIDE"
                 subtitle="Enable when 'app.immich:/' is an invalid redirect URI."
                 disabled={disabled || !config.oauth.enabled}
@@ -219,7 +205,6 @@
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <div class="ml-4 mt-4 flex flex-col">
               <SettingSwitch
-                id="enable-password-login"
                 title="ENABLED"
                 {disabled}
                 subtitle="Login with email and password"
diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
index ff45224221..684eafc2a5 100644
--- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -234,7 +234,6 @@
         />
 
         <SettingSwitch
-          id="two-pass-encoding"
           title="TWO-PASS ENCODING"
           {disabled}
           subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
@@ -277,7 +276,6 @@
             />
 
             <SettingSwitch
-              id="hardware-decoding"
               title="HARDWARE DECODING"
               {disabled}
               subtitle="Applies only to NVENC and RKMPP. Enables end-to-end acceleration instead of only accelerating encoding. May not work on all videos."
@@ -299,7 +297,6 @@
             />
 
             <SettingSwitch
-              id="temporal-aq"
               title="TEMPORAL AQ"
               {disabled}
               subtitle="Applies only to NVENC. Increases quality of high-detail, low-motion scenes. May not be compatible with older devices."
diff --git a/web/src/lib/components/admin-page/settings/image/image-settings.svelte b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
index 2a1853f904..dbe21fe16a 100644
--- a/web/src/lib/components/admin-page/settings/image/image-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
@@ -93,7 +93,6 @@
         />
 
         <SettingSwitch
-          id="prefer-wide-gamut"
           title="PREFER WIDE GAMUT"
           subtitle="Use Display P3 for thumbnails. This better preserves the vibrance of images with wide colorspaces, but images may appear differently on old devices with an old browser version. sRGB images are kept as sRGB to avoid color shifts."
           checked={config.image.colorspace === Colorspace.P3}
@@ -103,7 +102,6 @@
         />
 
         <SettingSwitch
-          id="prefer-embedded"
           title="PREFER EMBEDDED PREVIEW"
           subtitle="Use embedded previews in RAW photos as the input to image processing when available. This can produce more accurate colors for some images, but the quality of the preview is camera-dependent and the image may have more compression artifacts."
           checked={config.image.extractEmbedded}
diff --git a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
index f1b2d25b97..c1076abc54 100644
--- a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
@@ -37,7 +37,6 @@
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            id="watch-filesystem"
             title="Watch filesystem"
             {disabled}
             subtitle="Watch external libraries for file changes"
@@ -65,7 +64,6 @@
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            id="periodic-library-scan"
             title="ENABLED"
             {disabled}
             subtitle="Enable periodic library scanning"
diff --git a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
index c5ab2328ad..97ae006816 100644
--- a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
@@ -20,13 +20,7 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch
-          id="enable-logging"
-          title="ENABLED"
-          {disabled}
-          subtitle="Logging"
-          bind:checked={config.logging.enabled}
-        />
+        <SettingSwitch title="ENABLED" {disabled} subtitle="Logging" bind:checked={config.logging.enabled} />
         <SettingSelect
           label="LEVEL"
           desc="When enabled, what log level to use."
diff --git a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
index 1b85352f9e..c65b07f9e8 100644
--- a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
@@ -26,7 +26,6 @@
     <form autocomplete="off" on:submit|preventDefault class="mx-4 mt-4">
       <div class="flex flex-col gap-4">
         <SettingSwitch
-          id="enable-machine-learning"
           title="ENABLED"
           subtitle="If disabled, all ML features will be disabled regardless of the below settings."
           {disabled}
@@ -53,7 +52,6 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            id="enable-clip"
             title="ENABLED"
             subtitle="If disabled, images will not be encoded for smart search."
             bind:checked={config.machineLearning.clip.enabled}
@@ -85,7 +83,6 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            id="enable-duplicate-detection"
             title="ENABLED"
             subtitle="If disabled, exactly identical assets will still be de-duplicated."
             bind:checked={config.machineLearning.duplicateDetection.enabled}
@@ -116,7 +113,6 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            id="enable-facial-recognition"
             title="ENABLED"
             subtitle="If disabled, images will not be encoded for facial recognition and will not populate the People section in the Explore page."
             bind:checked={config.machineLearning.facialRecognition.enabled}
diff --git a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
index 3be7ad96e1..46dc7a6351 100644
--- a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
@@ -26,7 +26,6 @@
         <SettingAccordion key="map" title="Map Settings" subtitle="Manage map settings">
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
-              id="enable-map-features"
               title="ENABLED"
               {disabled}
               subtitle="Enable map features"
@@ -67,7 +66,6 @@
           </svelte:fragment>
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
-              id="enable-reverse-geocoding"
               title="ENABLED"
               {disabled}
               subtitle="Enable reverse geocoding"
diff --git a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
index 5ab7735f9c..ec8c9c8df5 100644
--- a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
@@ -20,7 +20,6 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4">
         <SettingSwitch
-          id="enable-new-version-check"
           title="ENABLED"
           subtitle="Enable periodic requests to GitHub to check for new releases"
           bind:checked={config.newVersionCheck.enabled}
diff --git a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
index 8702f8beca..8628b45ece 100644
--- a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
@@ -26,7 +26,6 @@
         <SettingAccordion key="email" title="Email" subtitle="Settings for sending email notifications">
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
-              id="enable-smtp"
               title="Enabled"
               subtitle="Enable email notifications"
               {disabled}
@@ -76,7 +75,6 @@
             />
 
             <SettingSwitch
-              id="enable-ignore-cert"
               title="Ignore certificate errors"
               subtitle="Ignore TLS certificate validation errors (not recommended)"
               disabled={disabled || !config.notifications.smtp.enabled}
diff --git a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
index 4a4e3c60b4..d9a2dea9e6 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -107,7 +107,6 @@
   {#await getTemplateOptions() then}
     <div id="directory-path-builder" class="flex flex-col gap-4 {minified ? '' : 'ml-4 mt-4'}">
       <SettingSwitch
-        id="storage-template-enabled"
         title="ENABLED"
         {disabled}
         subtitle="Enable storage template engine"
@@ -117,7 +116,6 @@
 
       {#if !minified}
         <SettingSwitch
-          id="hash-verification-enabled"
           title="HASH VERIFICATION ENABLED"
           {disabled}
           subtitle="Enables hash verification, don't disable this unless you're certain of the implications"
diff --git a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
index 8f2bf235e3..2b0e82ff91 100644
--- a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
@@ -23,7 +23,6 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <SettingSwitch
-          id="enable-trash-features"
           title="ENABLED"
           {disabled}
           subtitle="Enable Trash features"
diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index ead7f6e5e9..5815b83859 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -50,7 +50,7 @@
   };
 </script>
 
-<FullScreenModal id="album-options-modal" title="Options" onClose={() => dispatch('close')}>
+<FullScreenModal title="Options" onClose={() => dispatch('close')}>
   <div class="items-center justify-center">
     <div class="py-2">
       <h2 class="text-gray text-sm mb-2">SETTINGS</h2>
@@ -64,7 +64,6 @@
           />
         {/if}
         <SettingSwitch
-          id="comments-likes"
           title="Comments & likes"
           subtitle="Let others respond"
           checked={album.isActivityEnabled}
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte
index dba4cfdf8b..6856b0b357 100644
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@@ -87,7 +87,7 @@
 </script>
 
 {#if !selectedRemoveUser}
-  <FullScreenModal id="share-info-modal" title="Options" {onClose}>
+  <FullScreenModal title="Options" {onClose}>
     <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
       <div class="flex w-full place-items-center justify-between gap-4 p-5">
         <div class="flex place-items-center gap-4">
@@ -156,7 +156,6 @@
 
 {#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
   <ConfirmDialog
-    id="leave-album-modal"
     title="Leave album?"
     prompt="Are you sure you want to leave {album.albumName}?"
     confirmText="Leave"
@@ -167,7 +166,6 @@
 
 {#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
   <ConfirmDialog
-    id="remove-user-modal"
     title="Remove user?"
     prompt="Are you sure you want to remove {selectedRemoveUser.name}?"
     confirmText="Remove"
diff --git a/web/src/lib/components/album-page/user-selection-modal.svelte b/web/src/lib/components/album-page/user-selection-modal.svelte
index 291f5c112e..d7d742c239 100644
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@@ -70,7 +70,7 @@
   };
 </script>
 
-<FullScreenModal id="user-selection-modal" title="Invite to album" showLogo {onClose}>
+<FullScreenModal title="Invite to album" showLogo {onClose}>
   {#if Object.keys(selectedUsers).length > 0}
     <div class="mb-2 py-2 sticky">
       <p class="text-xs font-medium">SELECTED</p>
diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index e29e49711a..6fe603eeb0 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -30,7 +30,7 @@
   };
 </script>
 
-<FullScreenModal id="merge-people-modal" title="Merge people - {title}" onClose={() => dispatch('close')}>
+<FullScreenModal title="Merge people - {title}" onClose={() => dispatch('close')}>
   <div class="flex items-center justify-center py-4 md:h-36 md:py-4">
     {#if !choosePersonToMerge}
       <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">
diff --git a/web/src/lib/components/faces-page/set-birth-date-modal.svelte b/web/src/lib/components/faces-page/set-birth-date-modal.svelte
index 810ec9b073..1433852c90 100644
--- a/web/src/lib/components/faces-page/set-birth-date-modal.svelte
+++ b/web/src/lib/components/faces-page/set-birth-date-modal.svelte
@@ -20,7 +20,7 @@
   };
 </script>
 
-<FullScreenModal id="set-birth-date-modal" title="Set date of birth" icon={mdiCake} onClose={handleCancel}>
+<FullScreenModal title="Set date of birth" icon={mdiCake} onClose={handleCancel}>
   <div class="text-immich-primary dark:text-immich-dark-primary">
     <p class="text-sm dark:text-immich-dark-fg">
       Date of birth is used to calculate the age of this person at the time of a photo.
diff --git a/web/src/lib/components/forms/api-key-form.svelte b/web/src/lib/components/forms/api-key-form.svelte
index 8fcf547fe5..07fcd0ffdf 100644
--- a/web/src/lib/components/forms/api-key-form.svelte
+++ b/web/src/lib/components/forms/api-key-form.svelte
@@ -28,7 +28,7 @@
   };
 </script>
 
-<FullScreenModal id="api-key-modal" {title} icon={mdiKeyVariant} onClose={handleCancel}>
+<FullScreenModal {title} icon={mdiKeyVariant} onClose={handleCancel}>
   <form on:submit|preventDefault={handleSubmit} autocomplete="off" id="api-key-form">
     <div class="mb-4 flex flex-col gap-2">
       <label class="immich-form-label" for="name">Name</label>
diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte
index f01758de26..5a77630a1a 100644
--- a/web/src/lib/components/forms/api-key-secret.svelte
+++ b/web/src/lib/components/forms/api-key-secret.svelte
@@ -13,7 +13,7 @@
   const handleDone = () => dispatch('done');
 </script>
 
-<FullScreenModal id="api-key-secret-modal" title="API key" icon={mdiKeyVariant} onClose={() => handleDone()}>
+<FullScreenModal title="API key" icon={mdiKeyVariant} onClose={() => handleDone()}>
   <div class="text-immich-primary dark:text-immich-dark-primary">
     <p class="text-sm dark:text-immich-dark-fg">
       This value will only be shown once. Please be sure to copy it before closing the window.
diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte
index 5a8c8dc37b..4dbf55d7a5 100644
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@@ -74,7 +74,7 @@
   }
 </script>
 
-<FullScreenModal id="create-new-user-modal" title="Create new user" showLogo {onClose}>
+<FullScreenModal title="Create new user" showLogo {onClose}>
   <form on:submit|preventDefault={registerUser} autocomplete="off" id="create-new-user-form">
     <div class="my-4 flex flex-col gap-2">
       <label class="immich-form-label" for="email">Email</label>
diff --git a/web/src/lib/components/forms/edit-album-form.svelte b/web/src/lib/components/forms/edit-album-form.svelte
index bfd7b43260..f983beefe8 100644
--- a/web/src/lib/components/forms/edit-album-form.svelte
+++ b/web/src/lib/components/forms/edit-album-form.svelte
@@ -36,7 +36,7 @@
   };
 </script>
 
-<FullScreenModal id="edit-album-modal" title="Edit album" width="wide" {onClose}>
+<FullScreenModal title="Edit album" width="wide" {onClose}>
   <form on:submit|preventDefault={handleUpdateAlbumInfo} autocomplete="off" id="edit-album-form">
     <div class="flex items-center">
       <div class="hidden sm:flex">
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index 20d1ad0fa1..b7bf261442 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -96,7 +96,7 @@
   }
 </script>
 
-<FullScreenModal id="edit-user-modal" title="Edit user" icon={mdiAccountEditOutline} {onClose}>
+<FullScreenModal title="Edit user" icon={mdiAccountEditOutline} {onClose}>
   <form on:submit|preventDefault={editUser} autocomplete="off" id="edit-user-form">
     <div class="my-4 flex flex-col gap-2">
       <label class="immich-form-label" for="email">Email</label>
diff --git a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
index 48585608e1..782017c18f 100644
--- a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
+++ b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
@@ -28,12 +28,7 @@
   const handleSubmit = () => dispatch('submit', { excludePattern: exclusionPattern });
 </script>
 
-<FullScreenModal
-  id="add-exclusion-pattern-modal"
-  title="Add exclusion pattern"
-  icon={mdiFolderRemove}
-  onClose={handleCancel}
->
+<FullScreenModal title="Add exclusion pattern" icon={mdiFolderRemove} onClose={handleCancel}>
   <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" id="add-exclusion-pattern-form">
     <p class="py-5 text-sm">
       Exclusion patterns lets you ignore files and folders when scanning your library. This is useful if you have
diff --git a/web/src/lib/components/forms/library-import-path-form.svelte b/web/src/lib/components/forms/library-import-path-form.svelte
index 46937053ba..832f2f17e8 100644
--- a/web/src/lib/components/forms/library-import-path-form.svelte
+++ b/web/src/lib/components/forms/library-import-path-form.svelte
@@ -30,7 +30,7 @@
   const handleSubmit = () => dispatch('submit', { importPath });
 </script>
 
-<FullScreenModal id="library-import-path-modal" {title} icon={mdiFolderSync} onClose={handleCancel}>
+<FullScreenModal {title} icon={mdiFolderSync} onClose={handleCancel}>
   <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" id="library-import-path-form">
     <p class="py-5 text-sm">
       Specify a folder to import. This folder, including subfolders, will be scanned for images and videos.
diff --git a/web/src/lib/components/forms/library-user-picker-form.svelte b/web/src/lib/components/forms/library-user-picker-form.svelte
index 07da560b82..c3293c3636 100644
--- a/web/src/lib/components/forms/library-user-picker-form.svelte
+++ b/web/src/lib/components/forms/library-user-picker-form.svelte
@@ -27,12 +27,7 @@
   const handleSubmit = () => dispatch('submit', { ownerId });
 </script>
 
-<FullScreenModal
-  id="select-library-owner-modal"
-  title="Select library owner"
-  icon={mdiFolderSync}
-  onClose={handleCancel}
->
+<FullScreenModal title="Select library owner" icon={mdiFolderSync} onClose={handleCancel}>
   <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" id="select-library-owner-form">
     <p class="p-5 text-sm">NOTE: This cannot be changed later!</p>
 
diff --git a/web/src/lib/components/map-page/map-settings-modal.svelte b/web/src/lib/components/map-page/map-settings-modal.svelte
index aded865a06..a45ffc4bba 100644
--- a/web/src/lib/components/map-page/map-settings-modal.svelte
+++ b/web/src/lib/components/map-page/map-settings-modal.svelte
@@ -21,21 +21,17 @@
   const handleClose = () => dispatch('close');
 </script>
 
-<FullScreenModal id="map-settings-modal" title="Map settings" onClose={handleClose}>
+<FullScreenModal title="Map settings" onClose={handleClose}>
   <form
     on:submit|preventDefault={() => dispatch('save', settings)}
     class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
     id="map-settings-form"
   >
-    <SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
-    <SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
-    <SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
-    <SettingSwitch
-      id="include-shared-partner-assets"
-      title="Include shared partner assets"
-      bind:checked={settings.withPartners}
-    />
-    <SettingSwitch id="include-shared-albums" title="Include shared albums" bind:checked={settings.withSharedAlbums} />
+    <SettingSwitch title="Allow dark mode" bind:checked={settings.allowDarkMode} />
+    <SettingSwitch title="Only favorites" bind:checked={settings.onlyFavorites} />
+    <SettingSwitch title="Include archived" bind:checked={settings.includeArchived} />
+    <SettingSwitch title="Include shared partner assets" bind:checked={settings.withPartners} />
+    <SettingSwitch title="Include shared albums" bind:checked={settings.withSharedAlbums} />
     {#if customDateRange}
       <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
         <div class="flex items-center justify-between gap-8">
diff --git a/web/src/lib/components/photos-page/delete-asset-dialog.svelte b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
index 58efb7302a..abc778be70 100644
--- a/web/src/lib/components/photos-page/delete-asset-dialog.svelte
+++ b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
@@ -23,7 +23,6 @@
 </script>
 
 <ConfirmDialog
-  id="permanently-delete-asset-modal"
   title="Permanently delete asset{s(size)}"
   confirmText="Delete"
   onConfirm={handleConfirm}
diff --git a/web/src/lib/components/shared-components/album-selection-modal.svelte b/web/src/lib/components/shared-components/album-selection-modal.svelte
index 97b4959835..7906d5a5c5 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -53,7 +53,7 @@
   };
 </script>
 
-<FullScreenModal id="album-selection-modal" title={getTitle()} {onClose}>
+<FullScreenModal title={getTitle()} {onClose}>
   <div class="mb-2 flex max-h-[400px] flex-col">
     {#if loading}
       {#each { length: 3 } as _}
diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte
index d434ecd4eb..eb9e705f58 100644
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@@ -56,7 +56,6 @@
 </script>
 
 <ConfirmDialog
-  id="edit-date-time-modal"
   confirmColor="primary"
   title="Edit date and time"
   prompt="Please select a new date:"
@@ -75,13 +74,7 @@
       />
     </div>
     <div class="flex flex-col w-full mt-2">
-      <Combobox
-        bind:selectedOption
-        id="settings-timezone"
-        label="Timezone"
-        options={timezones}
-        placeholder="Search timezone..."
-      />
+      <Combobox bind:selectedOption label="Timezone" options={timezones} placeholder="Search timezone..." />
     </div>
   </div>
 </ConfirmDialog>
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index 52fbcbed1f..dfc8583725 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -104,7 +104,6 @@
 </script>
 
 <ConfirmDialog
-  id="change-location-modal"
   confirmColor="primary"
   title="Change location"
   width="wide"
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index f4c8bd5ec8..dc93ebb321 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -19,17 +19,18 @@
   import { clickOutside } from '$lib/actions/click-outside';
   import { focusOutside } from '$lib/actions/focus-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { uniqueIdStore } from '$lib/stores/unique-id.store';
 
-  /**
-   * Unique identifier for the combobox.
-   */
-  export let id: string;
   export let label: string;
   export let hideLabel = false;
   export let options: ComboBoxOption[] = [];
   export let selectedOption: ComboBoxOption | undefined;
   export let placeholder = '';
 
+  /**
+   * Unique identifier for the combobox.
+   */
+  let id: string = uniqueIdStore.generateId();
   /**
    * Indicates whether or not the dropdown autocomplete list should be visible.
    */
diff --git a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
index 5243eff462..026b4e6cb4 100644
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@@ -159,7 +159,7 @@
   };
 </script>
 
-<FullScreenModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} {onClose}>
+<FullScreenModal title={getTitle()} icon={mdiLink} {onClose}>
   <section>
     {#if shareType === SharedLinkType.Album}
       {#if !editingLink}
@@ -204,33 +204,25 @@
         </div>
 
         <div class="my-3">
-          <SettingSwitch id="require-password" bind:checked={enablePassword} title={'Require password'} />
+          <SettingSwitch bind:checked={enablePassword} title={'Require password'} />
         </div>
 
         <div class="my-3">
-          <SettingSwitch id="show-metadata" bind:checked={showMetadata} title={'Show metadata'} />
+          <SettingSwitch bind:checked={showMetadata} title={'Show metadata'} />
         </div>
 
         <div class="my-3">
-          <SettingSwitch
-            id="allow-public-download"
-            bind:checked={allowDownload}
-            title={'Allow public user to download'}
-          />
+          <SettingSwitch bind:checked={allowDownload} title={'Allow public user to download'} />
         </div>
 
         <div class="my-3">
-          <SettingSwitch id="allow-public-upload" bind:checked={allowUpload} title={'Allow public user to upload'} />
+          <SettingSwitch bind:checked={allowUpload} title={'Allow public user to upload'} />
         </div>
 
         <div class="text-sm">
           {#if editingLink}
             <p class="immich-form-label my-2">
-              <SettingSwitch
-                id="change-expiration-time"
-                bind:checked={shouldChangeExpirationTime}
-                title={'Change expiration time'}
-              />
+              <SettingSwitch bind:checked={shouldChangeExpirationTime} title={'Change expiration time'} />
             </p>
           {:else}
             <p class="immich-form-label my-2">Expire after</p>
diff --git a/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte b/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
index b16dfb2bf5..e6a2c6bd00 100644
--- a/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
+++ b/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
@@ -3,7 +3,6 @@
   import Button from '../../elements/buttons/button.svelte';
   import type { Color } from '$lib/components/elements/buttons/button.svelte';
 
-  export let id: string = 'confirm-dialog';
   export let title = 'Confirm';
   export let prompt = 'Are you sure you want to do this?';
   export let confirmText = 'Confirm';
@@ -24,7 +23,7 @@
   };
 </script>
 
-<FullScreenModal {title} {id} onClose={onCancel} {width}>
+<FullScreenModal {title} onClose={onCancel} {width}>
   <div class="text-md py-5 text-center">
     <slot name="prompt">
       <p>{prompt}</p>
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index b8ef289edc..7c86bd05d6 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -3,13 +3,9 @@
   import { fade } from 'svelte/transition';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
+  import { uniqueIdStore } from '$lib/stores/unique-id.store';
 
   export let onClose: () => void;
-
-  /**
-   * Unique identifier for the modal.
-   */
-  export let id: string;
   export let title: string;
   /**
    * If true, the logo will be displayed next to the modal title.
@@ -28,6 +24,11 @@
    */
   export let width: 'wide' | 'narrow' | 'auto' = 'narrow';
 
+  /**
+   * Unique identifier for the modal.
+   */
+  let id: string = uniqueIdStore.generateId();
+
   $: titleId = `${id}-title`;
   $: isStickyBottom = !!$$slots['sticky-bottom'];
 
diff --git a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte b/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
index fda9ec6d50..4e8fa1efff 100644
--- a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
@@ -13,7 +13,7 @@
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
 
-<FullScreenModal id="avatar-selector-modal" title="Select avatar color" width="auto" onClose={() => dispatch('close')}>
+<FullScreenModal title="Select avatar color" width="auto" onClose={() => dispatch('close')}>
   <div class="flex items-center justify-center mt-4">
     <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
       {#each colors as color}
diff --git a/web/src/lib/components/shared-components/profile-image-cropper.svelte b/web/src/lib/components/shared-components/profile-image-cropper.svelte
index 1cd50f4c4f..06961caed9 100644
--- a/web/src/lib/components/shared-components/profile-image-cropper.svelte
+++ b/web/src/lib/components/shared-components/profile-image-cropper.svelte
@@ -69,7 +69,7 @@
   };
 </script>
 
-<FullScreenModal id="profile-image-cropper" title="Set profile picture" width="auto" {onClose}>
+<FullScreenModal title="Set profile picture" width="auto" {onClose}>
   <div class="flex place-items-center items-center justify-center">
     <div
       class="relative flex aspect-square w-[250px] overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
diff --git a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte b/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
index 7acac54d8e..e4238e5093 100644
--- a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
@@ -41,7 +41,6 @@
   <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
     <div class="w-full">
       <Combobox
-        id="camera-make"
         label="Make"
         on:select={({ detail }) => (filters.make = detail?.value)}
         options={toComboBoxOptions(makes)}
@@ -52,7 +51,6 @@
 
     <div class="w-full">
       <Combobox
-        id="camera-model"
         label="Model"
         on:select={({ detail }) => (filters.model = detail?.value)}
         options={toComboBoxOptions(models)}
diff --git a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte b/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
index fdaabe0f75..d95ea68d1b 100644
--- a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
@@ -63,7 +63,6 @@
   <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
     <div class="w-full">
       <Combobox
-        id="location-country"
         label="Country"
         on:select={({ detail }) => (filters.country = detail?.value)}
         options={toComboBoxOptions(countries)}
@@ -74,7 +73,6 @@
 
     <div class="w-full">
       <Combobox
-        id="location-state"
         label="State"
         on:select={({ detail }) => (filters.state = detail?.value)}
         options={toComboBoxOptions(states)}
@@ -85,7 +83,6 @@
 
     <div class="w-full">
       <Combobox
-        id="location-city"
         label="City"
         on:select={({ detail }) => (filters.city = detail?.value)}
         options={toComboBoxOptions(cities)}
diff --git a/web/src/lib/components/shared-components/settings/setting-combobox.svelte b/web/src/lib/components/shared-components/settings/setting-combobox.svelte
index ee396935c6..f6c1aa8139 100644
--- a/web/src/lib/components/shared-components/settings/setting-combobox.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-combobox.svelte
@@ -3,7 +3,6 @@
   import { fly } from 'svelte/transition';
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
 
-  export let id: string;
   export let title: string;
   export let comboboxPlaceholder: string;
   export let subtitle = '';
@@ -33,7 +32,6 @@
   </div>
   <div class="flex items-center">
     <Combobox
-      {id}
       label={title}
       hideLabel={true}
       {selectedOption}
diff --git a/web/src/lib/components/shared-components/settings/setting-switch.svelte b/web/src/lib/components/shared-components/settings/setting-switch.svelte
index 2701fd2820..2f6c3ba8b5 100644
--- a/web/src/lib/components/shared-components/settings/setting-switch.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-switch.svelte
@@ -3,14 +3,16 @@
   import { fly } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
   import Slider from '$lib/components/elements/slider.svelte';
+  import { uniqueIdStore } from '$lib/stores/unique-id.store';
 
-  export let id: string;
   export let title: string;
   export let subtitle = '';
   export let checked = false;
   export let disabled = false;
   export let isEdited = false;
 
+  let id: string = uniqueIdStore.generateId();
+
   $: sliderId = `${id}-slider`;
   $: subtitleId = subtitle ? `${id}-subtitle` : undefined;
 
diff --git a/web/src/lib/components/shared-components/show-shortcuts.svelte b/web/src/lib/components/shared-components/show-shortcuts.svelte
index 5f1f7cd53f..b2042517db 100644
--- a/web/src/lib/components/shared-components/show-shortcuts.svelte
+++ b/web/src/lib/components/shared-components/show-shortcuts.svelte
@@ -37,12 +37,7 @@
   }>();
 </script>
 
-<FullScreenModal
-  id="keyboard-shortcuts-modal"
-  title="Keyboard shortcuts"
-  width="auto"
-  onClose={() => dispatch('close')}
->
+<FullScreenModal title="Keyboard shortcuts" width="auto" onClose={() => dispatch('close')}>
   <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
     <div class="p-4">
       <h2>General</h2>
diff --git a/web/src/lib/components/shared-components/version-announcement-box.svelte b/web/src/lib/components/shared-components/version-announcement-box.svelte
index 6967962fad..a5aea58a05 100644
--- a/web/src/lib/components/shared-components/version-announcement-box.svelte
+++ b/web/src/lib/components/shared-components/version-announcement-box.svelte
@@ -33,7 +33,7 @@
 </script>
 
 {#if showModal}
-  <FullScreenModal id="new-version-modal" title="🎉 NEW VERSION AVAILABLE" onClose={() => (showModal = false)}>
+  <FullScreenModal title="🎉 NEW VERSION AVAILABLE" onClose={() => (showModal = false)}>
     <div>
       Hi friend, there is a new version of the application please take your time to visit the
       <span class="font-medium underline"
diff --git a/web/src/lib/components/slideshow-settings.svelte b/web/src/lib/components/slideshow-settings.svelte
index 64480dfdbf..fee8a2b099 100644
--- a/web/src/lib/components/slideshow-settings.svelte
+++ b/web/src/lib/components/slideshow-settings.svelte
@@ -45,7 +45,7 @@
   };
 </script>
 
-<FullScreenModal id="slideshow-settings-modal" title="Slideshow settings" {onClose}>
+<FullScreenModal title="Slideshow settings" {onClose}>
   <div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
     <SettingDropdown
       title="Direction"
@@ -63,7 +63,7 @@
         $slideshowLook = handleToggle(option, lookOptions) || $slideshowLook;
       }}
     />
-    <SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
+    <SettingSwitch title="Show Progress Bar" bind:checked={$showProgressBar} />
     <SettingInputField
       inputType={SettingInputFieldType.NUMBER}
       label="Duration"
diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte
index a9a1839cf6..ce5ffb4bd7 100644
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -72,7 +72,6 @@
     <div class="ml-4 mt-4 flex flex-col gap-4">
       <div class="ml-4">
         <SettingSwitch
-          id="theme-selection"
           title="Theme selection"
           subtitle="Automatically set the theme to light or dark based on your browser's system preference"
           bind:checked={$colorTheme.system}
@@ -82,7 +81,6 @@
 
       <div class="ml-4">
         <SettingSwitch
-          id="default-locale"
           title="Default Locale"
           subtitle="Format dates and numbers based on your browser locale"
           checked={$locale == undefined}
@@ -94,7 +92,6 @@
       {#if $locale !== undefined}
         <div class="ml-4">
           <SettingCombobox
-            id="custom-locale"
             comboboxPlaceholder="Searching locales..."
             {selectedOption}
             options={getAllLanguages()}
@@ -107,7 +104,6 @@
 
       <div class="ml-4">
         <SettingSwitch
-          id="always-load-original-file"
           title="Display original photos"
           subtitle="Prefer to display the original photo when viewing an asset rather than thumbnails when the original asset is web-compatible. This may result in slower photo display speeds."
           bind:checked={$alwaysLoadOriginalFile}
@@ -116,7 +112,6 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
-          id="play-video-thumbnail-on-hover"
           title="Play video thumbnail on hover"
           subtitle="Play video thumbnail when mouse is hovering over item. Even when disabled, playback can be started by hovering over the play icon."
           bind:checked={$playVideoThumbnailOnHover}
@@ -125,7 +120,6 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
-          id="loop-video"
           title="Loop videos"
           subtitle="Enable to automatically loop a video in the detail viewer."
           bind:checked={$loopVideo}
@@ -135,7 +129,6 @@
 
       <div class="ml-4">
         <SettingSwitch
-          id="show-delete-warning"
           title="Permanent deletion warning"
           subtitle="Show a warning when permanently deleting assets"
           bind:checked={$showDeleteModal}
@@ -144,7 +137,6 @@
 
       <div class="ml-4">
         <SettingSwitch
-          id="people-sidebar-link"
           title="People"
           subtitle="Display a link to People in the sidebar"
           bind:checked={$sidebarSettings.people}
@@ -152,7 +144,6 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
-          id="sharing-sidebar-link"
           title="Sharing"
           subtitle="Display a link to Sharing in the sidebar"
           bind:checked={$sidebarSettings.sharing}
diff --git a/web/src/lib/components/user-settings-page/memories-settings.svelte b/web/src/lib/components/user-settings-page/memories-settings.svelte
index 4d103ade13..ca2a4d4e3c 100644
--- a/web/src/lib/components/user-settings-page/memories-settings.svelte
+++ b/web/src/lib/components/user-settings-page/memories-settings.svelte
@@ -31,7 +31,6 @@
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <div class="ml-4">
           <SettingSwitch
-            id="time-based-memories"
             title="Time-based memories"
             subtitle="Photos from previous years"
             bind:checked={memoriesEnabled}
diff --git a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
index f6b01091a3..37cc29a596 100644
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@@ -32,7 +32,7 @@
   };
 </script>
 
-<FullScreenModal id="partner-selection-modal" title="Add partner" showLogo {onClose}>
+<FullScreenModal title="Add partner" showLogo {onClose}>
   <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
     {#if availableUsers.length > 0}
       {#each availableUsers as user}
diff --git a/web/src/lib/components/user-settings-page/partner-settings.svelte b/web/src/lib/components/user-settings-page/partner-settings.svelte
index e9c0119367..07a08d0b3d 100644
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -167,7 +167,6 @@
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
             <p class="text-xs font-medium my-4">PHOTOS FROM {partner.user.name.toUpperCase()}</p>
             <SettingSwitch
-              id="show-in-timeline"
               title="Show in timeline"
               subtitle="Show photos and videos from this user in your timeline"
               bind:checked={partner.inTimeline}
diff --git a/web/src/lib/stores/unique-id.store.spec.ts b/web/src/lib/stores/unique-id.store.spec.ts
new file mode 100644
index 0000000000..4788b18304
--- /dev/null
+++ b/web/src/lib/stores/unique-id.store.spec.ts
@@ -0,0 +1,14 @@
+import { uniqueIdStore } from '$lib/stores/unique-id.store';
+
+describe('uniqueIdStore', () => {
+  afterEach(() => {
+    uniqueIdStore.update(() => -1);
+  });
+
+  it('should generate unique ids', () => {
+    const { generateId } = uniqueIdStore;
+    const ids = [generateId(), generateId(), generateId()];
+
+    expect(ids).toEqual(['id-0', 'id-1', 'id-2']);
+  });
+});
diff --git a/web/src/lib/stores/unique-id.store.ts b/web/src/lib/stores/unique-id.store.ts
new file mode 100644
index 0000000000..949074c8f5
--- /dev/null
+++ b/web/src/lib/stores/unique-id.store.ts
@@ -0,0 +1,16 @@
+import { get, writable } from 'svelte/store';
+
+function createIdStore() {
+  const { subscribe, update } = writable(-1);
+
+  return {
+    subscribe,
+    update,
+    generateId: () => {
+      update((value) => value + 1);
+      return `id-${get(uniqueIdStore)}`;
+    },
+  };
+}
+
+export const uniqueIdStore = createIdStore();
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 64ae4658a3..e16fa234b2 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -453,7 +453,7 @@
   {/if}
 
   {#if showChangeNameModal}
-    <FullScreenModal id="change-name-modal" title="Change name" onClose={() => (showChangeNameModal = false)}>
+    <FullScreenModal title="Change name" onClose={() => (showChangeNameModal = false)}>
       <form on:submit|preventDefault={submitNameChange} autocomplete="off" id="change-name-form">
         <div class="flex flex-col gap-2">
           <label class="immich-form-label" for="name">Name</label>
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index d45c0be6c2..4f60d988f0 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -154,7 +154,6 @@
 
       {#if shouldShowPasswordResetSuccess}
         <ConfirmDialog
-          id="password-reset-success-modal"
           title="Password reset success"
           confirmText="Done"
           onConfirm={() => (shouldShowPasswordResetSuccess = false)}