- add toggle to show/hide asset owner names

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -273,7 +273,7 @@
 
         {#if !!assetOwner}
           <div class="absolute bottom-0 end-1">
-            <span class="text-white font-light">{assetOwner.name}</span>
+            <span class="text-white font-light text-sm">{assetOwner.name}</span>
           </div>
         {/if}
 

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -27,7 +27,6 @@
     timelineManager: TimelineManager;
     assetInteraction: AssetInteraction;
     albumUsers?: UserResponseDto[];
-
     onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
     onSelectAssets: (asset: TimelineAsset) => void;
     onSelectAssetCandidates: (asset: TimelineAsset | null) => void;

web/src/lib/components/photos-page/asset-grid.svelte

@@ -31,11 +31,11 @@
   import { navigate } from '$lib/utils/navigation';
   import { getTimes, toTimelineAsset, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
   import {
-    AlbumUserRole,
     AssetVisibility,
     getAssetInfo,
     type AlbumResponseDto,
     type PersonResponseDto,
+    type UserResponseDto,
   } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { DateTime } from 'luxon';
@@ -65,6 +65,7 @@
     showArchiveIcon?: boolean;
     isShared?: boolean;
     album?: AlbumResponseDto | null;
+    albumUsers?: UserResponseDto[];
     person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
     onSelect?: (asset: TimelineAsset) => void;
@@ -84,6 +85,7 @@
     showArchiveIcon = false,
     isShared = false,
     album = null,
+    albumUsers = [],
     person = null,
     isShowDeleteConfirmation = $bindable(false),
     onSelect = () => {},
@@ -94,11 +96,11 @@
 
   let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets, gridScrollTarget, mutex } = assetViewingStore;
 
-  const albumUsers = $derived(
-    album?.shared && album.albumUsers.some(({ role }) => role === AlbumUserRole.Editor)
-      ? [album.owner, ...album.albumUsers.map(({ user }) => user)]
-      : [],
-  );
+  // const albumUsers = $derived(
+  //   album?.shared && album.albumUsers.some(({ role }) => role === AlbumUserRole.Editor)
+  //     ? [album.owner, ...album.albumUsers.map(({ user }) => user)]
+  //     : [],
+  // );
 
   let element: HTMLElement | undefined = $state();
 

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

@@ -71,6 +71,7 @@
   } from '@immich/sdk';
   import { Button, IconButton, modalManager } from '@immich/ui';
   import {
+    mdiAccountEyeOutline,
     mdiArrowLeft,
     mdiCogOutline,
     mdiDeleteOutline,
@@ -104,6 +105,7 @@
   let isCreatingSharedAlbum = $state(false);
   let isShowActivity = $state(false);
   let albumOrder: AssetOrder | undefined = $state(data.album.order);
+  let showAlbumUsers = $state(false);
 
   const assetInteraction = new AssetInteraction();
   const timelineInteraction = new AssetInteraction();
@@ -321,6 +323,11 @@
 
   let album = $derived(data.album);
   let albumId = $derived(album.id);
+  const albumUsers = $derived(
+    showAlbumUsers && album?.shared && album.albumUsers.some(({ role }) => role === AlbumUserRole.Editor)
+      ? [album.owner, ...album.albumUsers.map(({ user }) => user)]
+      : [],
+  );
 
   $effect(() => {
     if (!album.isActivityEnabled && activityManager.commentCount === 0) {
@@ -445,6 +452,7 @@
       <AssetGrid
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}
+        {albumUsers}
         {timelineManager}
         assetInteraction={currentAssetIntersection}
         {isShared}
@@ -615,6 +623,15 @@
           {#snippet trailing()}
             <CastButton />
 
+            <IconButton
+              variant="ghost"
+              shape="round"
+              color="secondary"
+              aria-label="view asset owners"
+              icon={mdiAccountEyeOutline}
+              onclick={() => (showAlbumUsers = !showAlbumUsers)}
+            />
+
             {#if isEditor}
               <IconButton
                 variant="ghost"