Merge branch 'main' of github.com:immich-app/immich into web/automation-ui

web/src/routes/(user)/+layout.svelte

@@ -1,29 +1,6 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
-  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { fileUploadHandler } from '$lib/utils/file-uploader';
-
-  let albumId: string | undefined;
-
-  const dropHandler = async ({ dataTransfer }: DragEvent) => {
-    const files = dataTransfer?.files;
-    if (!files) {
-      return;
-    }
-
-    const filesArray: File[] = Array.from<File>(files);
-    albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
-
-    const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
-    if (isShare) {
-      dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
-    } else {
-      await fileUploadHandler(filesArray, albumId);
-    }
-  };
 </script>
 
-<slot {albumId} />
-
-<UploadCover {dropHandler} />
+<slot />
+<UploadCover />

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

@@ -448,6 +448,7 @@
             {/if}
 
             {#if album.assetCount > 0}
+              <CircleIconButton title="Slideshow" on:click={handleStartSlideshow} icon={mdiPresentationPlay} />
               <CircleIconButton title="Download" on:click={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
 
               {#if isOwned}
@@ -455,7 +456,6 @@
                   <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical}>
                     {#if viewMode === ViewMode.ALBUM_OPTIONS}
                       <ContextMenu {...contextMenuPosition}>
-                        <MenuOption icon={mdiPresentationPlay} text="Slideshow" on:click={handleStartSlideshow} />
                         <MenuOption
                           icon={mdiImageOutline}
                           text="Select album cover"
@@ -665,17 +665,17 @@
     {album}
     on:select={({ detail: users }) => handleAddUsers(users)}
     on:share={() => (viewMode = ViewMode.LINK_SHARING)}
-    on:close={() => (viewMode = ViewMode.VIEW)}
+    onClose={() => (viewMode = ViewMode.VIEW)}
   />
 {/if}
 
 {#if viewMode === ViewMode.LINK_SHARING}
-  <CreateSharedLinkModal albumId={album.id} on:close={() => (viewMode = ViewMode.VIEW)} />
+  <CreateSharedLinkModal albumId={album.id} onClose={() => (viewMode = ViewMode.VIEW)} />
 {/if}
 
 {#if viewMode === ViewMode.VIEW_USERS}
   <ShareInfoModal
-    on:close={() => (viewMode = ViewMode.VIEW)}
+    onClose={() => (viewMode = ViewMode.VIEW)}
     {album}
     on:remove={({ detail: userId }) => handleRemoveUser(userId)}
   />
@@ -683,6 +683,7 @@
 
 {#if viewMode === ViewMode.CONFIRM_DELETE}
   <ConfirmDialogue
+    id="delete-album-modal"
     title="Delete album"
     confirmText="Delete"
     onConfirm={handleRemoveAlbum}

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

@@ -40,6 +40,7 @@
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { locale } from '$lib/stores/preferences.store';
+  import { clearQueryParam } from '$lib/utils/navigation';
 
   export let data: PageData;
 
@@ -279,10 +280,7 @@
 
   const handleSearchPeople = async (force: boolean) => {
     if (searchName === '') {
-      if ($page.url.searchParams.has(QueryParameter.SEARCHED_PEOPLE)) {
-        $page.url.searchParams.delete(QueryParameter.SEARCHED_PEOPLE);
-        await goto($page.url);
-      }
+      await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
       return;
     }
     if (!force && people.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
@@ -393,6 +391,11 @@
       handleError(error, 'Unable to save name');
     }
   };
+
+  const onResetSearchBar = async () => {
+    searchedPeople = [];
+    await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
+  };
 </script>
 
 <svelte:window bind:innerHeight use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: handleCloseClick }} />
@@ -421,9 +424,7 @@
               bind:name={searchName}
               isSearching={isSearchingPeople}
               placeholder="Search people"
-              on:reset={() => {
-                searchedPeople = [];
-              }}
+              on:reset={onResetSearchBar}
               on:search={({ detail }) => handleSearch(detail.force ?? false)}
             />
           </div>
@@ -463,35 +464,23 @@
   {/if}
 
   {#if showChangeNameModal}
-    <FullScreenModal onClose={() => (showChangeNameModal = false)}>
-      <div
-        class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-      >
-        <div
-          class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-        >
-          <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Change name</h1>
+    <FullScreenModal id="change-name-modal" 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>
+          <input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} />
         </div>
-
-        <form on:submit|preventDefault={submitNameChange} autocomplete="off">
-          <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="name">Name</label>
-            <!-- svelte-ignore a11y-autofocus -->
-            <input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
-          </div>
-
-          <div class="mt-8 flex w-full gap-4 px-4">
-            <Button
-              color="gray"
-              fullwidth
-              on:click={() => {
-                showChangeNameModal = false;
-              }}>Cancel</Button
-            >
-            <Button type="submit" fullwidth>Ok</Button>
-          </div>
-        </form>
-      </div>
+      </form>
+      <svelte:fragment slot="sticky-bottom">
+        <Button
+          color="gray"
+          fullwidth
+          on:click={() => {
+            showChangeNameModal = false;
+          }}>Cancel</Button
+        >
+        <Button type="submit" fullwidth form="change-name-form">Ok</Button>
+      </svelte:fragment>
     </FullScreenModal>
   {/if}
 

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -83,12 +83,13 @@
 </section>
 
 {#if editSharedLink}
-  <CreateSharedLinkModal editingLink={editSharedLink} on:close={handleEditDone} />
+  <CreateSharedLinkModal editingLink={editSharedLink} onClose={handleEditDone} />
 {/if}
 
 {#if deleteLinkId}
   <ConfirmDialogue
-    title="Delete Shared Link"
+    id="delete-shared-link-modal"
+    title="Delete shared link"
     prompt="Are you sure you want to delete this shared link?"
     confirmText="Delete"
     onConfirm={() => handleDeleteLink()}

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

@@ -98,7 +98,8 @@
 
 {#if isShowEmptyConfirmation}
   <ConfirmDialogue
-    title="Empty Trash"
+    id="empty-trash-modal"
+    title="Empty trash"
     confirmText="Empty"
     onConfirm={handleEmptyTrash}
     onClose={() => (isShowEmptyConfirmation = false)}

web/src/routes/+layout.svelte

@@ -19,7 +19,6 @@
   import '../app.css';
 
   let showNavigationLoadingBar = false;
-  let albumId: string | undefined;
 
   const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
 
@@ -111,7 +110,7 @@
   </FullscreenContainer>
 </noscript>
 
-<slot {albumId} />
+<slot />
 
 {#if showNavigationLoadingBar}
   <NavigationLoadingBar />

web/src/routes/admin/library-management/+page.svelte

@@ -118,7 +118,9 @@
 
   const handleCreate = async (ownerId: string) => {
     try {
-      const createdLibrary = await createLibrary({ createLibraryDto: { ownerId, type: LibraryType.External } });
+      const createdLibrary = await createLibrary({
+        createLibraryDto: { ownerId, type: LibraryType.External },
+      });
 
       notificationController.show({
         message: `Created library: ${createdLibrary.name}`,
@@ -300,6 +302,7 @@
 
 {#if confirmDeleteLibrary}
   <ConfirmDialogue
+    id="warning-modal"
     title="Warning!"
     prompt="Are you sure you want to delete this library? This will delete all {deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk."
     onConfirm={handleDelete}

web/src/routes/admin/user-management/+page.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
+  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
+  import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
   import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import {
     NotificationType,
     notificationController,
@@ -116,22 +115,22 @@
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 lg:w-[850px]">
       {#if shouldShowCreateUserForm}
-        <FullScreenModal onClose={() => (shouldShowCreateUserForm = false)}>
-          <CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
-        </FullScreenModal>
+        <CreateUserForm
+          on:submit={onUserCreated}
+          on:cancel={() => (shouldShowCreateUserForm = false)}
+          onClose={() => (shouldShowCreateUserForm = false)}
+        />
       {/if}
 
       {#if shouldShowEditUserForm}
-        <FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
-          <EditUserForm
-            user={selectedUser}
-            bind:newPassword
-            canResetPassword={selectedUser?.id !== $user.id}
-            on:editSuccess={onEditUserSuccess}
-            on:resetPasswordSuccess={onEditPasswordSuccess}
-            on:close={() => (shouldShowEditUserForm = false)}
-          />
-        </FullScreenModal>
+        <EditUserForm
+          user={selectedUser}
+          bind:newPassword
+          canResetPassword={selectedUser?.id !== $user.id}
+          on:editSuccess={onEditUserSuccess}
+          on:resetPasswordSuccess={onEditPasswordSuccess}
+          onClose={() => (shouldShowEditUserForm = false)}
+        />
       {/if}
 
       {#if shouldShowDeleteConfirmDialog}
@@ -153,40 +152,39 @@
       {/if}
 
       {#if shouldShowPasswordResetSuccess}
-        <FullScreenModal onClose={() => (shouldShowPasswordResetSuccess = false)}>
-          <ConfirmDialogue
-            title="Password Reset Success"
-            confirmText="Done"
-            onConfirm={() => (shouldShowPasswordResetSuccess = false)}
-            onClose={() => (shouldShowPasswordResetSuccess = false)}
-            hideCancelButton={true}
-            confirmColor="green"
-          >
-            <svelte:fragment slot="prompt">
-              <div class="flex flex-col gap-4">
-                <p>The user's password has been reset:</p>
+        <ConfirmDialogue
+          id="password-reset-success-modal"
+          title="Password reset success"
+          confirmText="Done"
+          onConfirm={() => (shouldShowPasswordResetSuccess = false)}
+          onClose={() => (shouldShowPasswordResetSuccess = false)}
+          hideCancelButton={true}
+          confirmColor="green"
+        >
+          <svelte:fragment slot="prompt">
+            <div class="flex flex-col gap-4">
+              <p>The user's password has been reset:</p>
 
-                <div class="flex justify-center gap-2">
-                  <code
-                    class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
-                  >
-                    {newPassword}
-                  </code>
-                  <LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
-                    <div class="flex place-items-center gap-2 text-sm">
-                      <Icon path={mdiContentCopy} size="18" />
-                    </div>
-                  </LinkButton>
-                </div>
-
-                <p>
-                  Please provide the temporary password to the user and inform them they will need to change the
-                  password at their next login.
-                </p>
+              <div class="flex justify-center gap-2">
+                <code
+                  class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
+                >
+                  {newPassword}
+                </code>
+                <LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
+                  <div class="flex place-items-center gap-2 text-sm">
+                    <Icon path={mdiContentCopy} size="18" />
+                  </div>
+                </LinkButton>
               </div>
-            </svelte:fragment>
-          </ConfirmDialogue>
-        </FullScreenModal>
+
+              <p>
+                Please provide the temporary password to the user and inform them they will need to change the password
+                at their next login.
+              </p>
+            </div>
+          </svelte:fragment>
+        </ConfirmDialogue>
       {/if}
 
       <table class="my-5 w-full text-left">
@@ -200,7 +198,7 @@
             <th class="w-4/12 lg:w-3/12 xl:w-2/12 text-center text-sm font-medium">Action</th>
           </tr>
         </thead>
-        <tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+        <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
           {#if allUsers}
             {#each allUsers as immichUser, index}
               <tr