From 95c1acbf20f6068da219bd83666abe5aff681bd8 Mon Sep 17 00:00:00 2001
From: Mees Frensel <meesfrensel@gmail.com>
Date: Thu, 5 Mar 2026 17:34:31 +0100
Subject: [PATCH] fix(web): shared album avatars opening modal

---
 .../[[assetId=id]]/+page.svelte               | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 44a0c5e678..73741c7ec5 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -367,6 +367,12 @@
 
               <!-- ALBUM SHARING -->
               {#if album.albumUsers.length > 0 || (album.hasSharedLink && isOwned)}
+                <!-- owner & users with write access (collaborators) -->
+                {@const sortedAlbumUsers = [
+                  album.owner,
+                  ...album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor).map(({ user }) => user),
+                ]}
+
                 <div class="my-3 flex gap-x-1">
                   <!-- link -->
                   {#if album.hasSharedLink && isOwned}
@@ -380,28 +386,28 @@
                     />
                   {/if}
 
-                  <!-- owner -->
-                  <button type="button" onclick={() => modalManager.show(AlbumOptionsModal, { album })}>
-                    <UserAvatar user={album.owner} size="md" />
-                  </button>
+                  {#if isOwned}
+                    {#each sortedAlbumUsers as user (user.id)}
+                      <button type="button" onclick={() => modalManager.show(AlbumOptionsModal, { album })}>
+                        <UserAvatar {user} size="md" />
+                      </button>
+                    {/each}
 
-                  <!-- users with write access (collaborators) -->
-                  {#each album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor) as { user } (user.id)}
-                    <button type="button" onclick={() => modalManager.show(AlbumOptionsModal, { album })}>
+                    <!-- display ellipsis if there are readonly users too -->
+                    {#if albumHasViewers}
+                      <IconButton
+                        shape="round"
+                        aria-label={$t('view_all_users')}
+                        color="secondary"
+                        size="medium"
+                        icon={mdiDotsVertical}
+                        onclick={() => modalManager.show(AlbumOptionsModal, { album })}
+                      />
+                    {/if}
+                  {:else}
+                    {#each sortedAlbumUsers as user (user.id)}
                       <UserAvatar {user} size="md" />
-                    </button>
-                  {/each}
-
-                  <!-- display ellipsis if there are readonly users too -->
-                  {#if albumHasViewers}
-                    <IconButton
-                      shape="round"
-                      aria-label={$t('view_all_users')}
-                      color="secondary"
-                      size="medium"
-                      icon={mdiDotsVertical}
-                      onclick={() => modalManager.show(AlbumOptionsModal, { album })}
-                    />
+                    {/each}
                   {/if}
 
                   <ActionButton action={Share} />