- add toggle to show/hide asset owner names

- use font-light for the user's name

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

@@ -5,7 +5,7 @@
   import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
   import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, AssetVisibility } from '@immich/sdk';
+  import { AssetMediaSize, AssetVisibility, type UserResponseDto } from '@immich/sdk';
   import {
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,
@@ -45,6 +45,7 @@
     imageClass?: ClassValue;
     brokenAssetClass?: ClassValue;
     dimmed?: boolean;
+    albumUsers?: UserResponseDto[];
     onClick?: (asset: TimelineAsset) => void;
     onSelect?: (asset: TimelineAsset) => void;
     onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
@@ -63,6 +64,7 @@
     readonly = false,
     showArchiveIcon = false,
     showStackedIcon = true,
+    albumUsers = [],
     onClick = undefined,
     onSelect = undefined,
     onMouseEvent = undefined,
@@ -84,6 +86,8 @@
   let width = $derived(thumbnailSize || thumbnailWidth || 235);
   let height = $derived(thumbnailSize || thumbnailHeight || 235);
 
+  let assetOwner = $derived(albumUsers?.find((user) => user.id === asset.ownerId) ?? null);
+
   const onIconClickedHandler = (e?: MouseEvent) => {
     e?.stopPropagation();
     e?.preventDefault();
@@ -267,6 +271,12 @@
           </div>
         {/if}
 
+        {#if !!assetOwner}
+          <div class="absolute bottom-0 end-1">
+            <span class="text-white font-light text-sm">{assetOwner.name}</span>
+          </div>
+        {/if}
+
         {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
           <div class={['absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />

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

@@ -9,6 +9,7 @@
   import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import { navigate } from '$lib/utils/navigation';
+  import type { UserResponseDto } from '@immich/sdk';
 
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
 
@@ -25,7 +26,7 @@
     monthGroup: MonthGroup;
     timelineManager: TimelineManager;
     assetInteraction: AssetInteraction;
-
+    albumUsers?: UserResponseDto[];
     onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
     onSelectAssets: (asset: TimelineAsset) => void;
     onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
@@ -40,6 +41,7 @@
     monthGroup = $bindable(),
     assetInteraction,
     timelineManager,
+    albumUsers = [],
     onSelect,
     onSelectAssets,
     onSelectAssetCandidates,
@@ -189,6 +191,7 @@
             showStackedIcon={withStacked}
             {showArchiveIcon}
             {asset}
+            {albumUsers}
             {groupIndex}
             onClick={(asset) => onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset)}
             onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}

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

@@ -30,7 +30,13 @@
   import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import { getTimes, toTimelineAsset, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
-  import { AssetVisibility, getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import {
+    AssetVisibility,
+    getAssetInfo,
+    type AlbumResponseDto,
+    type PersonResponseDto,
+    type UserResponseDto,
+  } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { DateTime } from 'luxon';
   import { onMount, type Snippet } from 'svelte';
@@ -59,6 +65,7 @@
     showArchiveIcon?: boolean;
     isShared?: boolean;
     album?: AlbumResponseDto | null;
+    albumUsers?: UserResponseDto[];
     person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
     onSelect?: (asset: TimelineAsset) => void;
@@ -78,6 +85,7 @@
     showArchiveIcon = false,
     isShared = false,
     album = null,
+    albumUsers = [],
     person = null,
     isShowDeleteConfirmation = $bindable(false),
     onSelect = () => {},
@@ -88,6 +96,12 @@
 
   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)]
+  //     : [],
+  // );
+
   let element: HTMLElement | undefined = $state();
 
   let timelineElement: HTMLElement | undefined = $state();
@@ -936,6 +950,7 @@
             {isSelectionMode}
             {singleSelect}
             {monthGroup}
+            {albumUsers}
             onSelect={({ title, assets }) => handleGroupSelect(timelineManager, title, assets)}
             onSelectAssetCandidates={handleSelectAssetCandidates}
             onSelectAssets={handleSelectAssets}

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"