refactor: album users modal (#18266)

web/src/lib/constants.ts

@@ -369,7 +369,6 @@ export enum SettingInputFieldType {
 export const AlbumPageViewMode = {
   SELECT_THUMBNAIL: 'select-thumbnail',
   SELECT_ASSETS: 'select-assets',
-  VIEW_USERS: 'view-users',
   VIEW: 'view',
   OPTIONS: 'options',
 };
@@ -377,7 +376,6 @@ export const AlbumPageViewMode = {
 export type AlbumPageViewMode =
   | typeof AlbumPageViewMode.SELECT_THUMBNAIL
   | typeof AlbumPageViewMode.SELECT_ASSETS
-  | typeof AlbumPageViewMode.VIEW_USERS
   | typeof AlbumPageViewMode.VIEW
   | typeof AlbumPageViewMode.OPTIONS;
 

web/src/lib/modals/AlbumUsersModal.svelte

@@ -23,12 +23,10 @@
 
   interface Props {
     album: AlbumResponseDto;
-    onClose: () => void;
+    onClose: (changed?: boolean) => void;
-    onRemove: (userId: string) => void;
-    onRefreshAlbum: () => void;
   }
 
-  let { album, onClose, onRemove, onRefreshAlbum }: Props = $props();
+  let { album, onClose }: Props = $props();
 
   let currentUser: UserResponseDto | undefined = $state();
 
@@ -71,12 +69,12 @@
 
     try {
       await removeUserFromAlbum({ id: album.id, userId });
-      onRemove(userId);
       const message =
         userId === 'me'
           ? $t('album_user_left', { values: { album: album.albumName } })
           : $t('album_user_removed', { values: { user: user.name } });
       notificationController.show({ type: NotificationType.Info, message });
+      onClose(true);
     } catch (error) {
       handleError(error, $t('errors.unable_to_remove_album_users'));
     }
@@ -88,8 +86,9 @@
       const message = $t('user_role_set', {
         values: { user: user.name, role: role == AlbumUserRole.Viewer ? $t('role_viewer') : $t('role_editor') },
       });
-      onRefreshAlbum();
+
       notificationController.show({ type: NotificationType.Info, message });
+      onClose(true);
     } catch (error) {
       handleError(error, $t('errors.unable_to_change_album_user_role'));
     }

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -441,6 +441,14 @@
       await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
     }
   };
+
+  const handleEditUsers = async () => {
+    const changed = await modalManager.show(AlbumUsersModal, { album });
+
+    if (changed) {
+      album = await getAlbumInfo({ id: album.id, withoutAssets: true });
+    }
+  };
 </script>
 
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
@@ -631,13 +639,13 @@
                   {/if}
 
                   <!-- owner -->
-                  <button type="button" onclick={() => (viewMode = AlbumPageViewMode.VIEW_USERS)}>
+                  <button type="button" onclick={handleEditUsers}>
                     <UserAvatar user={album.owner} size="md" />
                   </button>
 
                   <!-- users with write access (collaborators) -->
                   {#each album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor) as { user } (user.id)}
-                    <button type="button" onclick={() => (viewMode = AlbumPageViewMode.VIEW_USERS)}>
+                    <button type="button" onclick={handleEditUsers}>
                       <UserAvatar {user} size="md" />
                     </button>
                   {/each}
@@ -649,7 +657,7 @@
                       color="gray"
                       size="20"
                       icon={mdiDotsVertical}
-                      onclick={() => (viewMode = AlbumPageViewMode.VIEW_USERS)}
+                      onclick={handleEditUsers}
                     />
                   {/if}
 
@@ -722,15 +730,6 @@
   {/if}
 </div>
 
-{#if viewMode === AlbumPageViewMode.VIEW_USERS}
-  <AlbumUsersModal
-    onClose={() => (viewMode = AlbumPageViewMode.VIEW)}
-    {album}
-    onRemove={(userId) => handleRemoveUser(userId, AlbumPageViewMode.VIEW_USERS)}
-    onRefreshAlbum={refreshAlbum}
-  />
-{/if}
-
 {#if viewMode === AlbumPageViewMode.OPTIONS && $user}
   <AlbumOptions
     {album}