chore(web): unique ID generation

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}

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"

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,23 +166,20 @@
               />
 
               <SettingSwitch
-                id="auto-register-new-users"
                 title="AUTO REGISTER"
                 subtitle="Automatically register new users after signing in with OAuth"
                 bind:checked={config.oauth.autoRegister}
                 disabled={disabled || !config.oauth.enabled}
               />
 
               <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}
                 bind:checked={config.oauth.autoLaunch}
               />
 
               <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"

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."

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}

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"

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."

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}

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"

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}

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}

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"

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"

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}

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"

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>

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">

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.

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>

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.

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>

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">

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>

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

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.

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>