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