chore(web): unique ID generation (#9932)

* chore(web): automatically generate unique IDs

* fix: revert changes to Slider

* chore: add test for id store

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

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"