feat(shares): restore userVignette

frontend/src/lib/components/ResourceList.svelte

@@ -54,6 +54,7 @@
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import SkeletonList from '$lib/components/SkeletonList.svelte';
 	import ListToolbar from '$lib/components/ListToolbar.svelte';
+	import UserVignette from '$lib/components/UserVignette.svelte';
 	import VirtualList from '$lib/components/VirtualList.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { files as filesStore } from '$lib/stores/files.svelte';
@@ -329,12 +330,14 @@
 		</div>
 		{#if showOwner}
 			<div class="owner-cell">
-				<span class="rl-vignette">
-					<span class="rl-vignette__avatar" aria-hidden="true"
-						>{(entry.ownerName ?? '?').slice(0, 1).toUpperCase()}</span
-					>
-					<span class="rl-vignette__name">{entry.ownerName ?? entry.ownerId ?? ''}</span>
-				</span>
+				{#if entry.ownerId}
+					<UserVignette
+						userId={entry.ownerId}
+						fallbackLabel={entry.ownerName ?? undefined}
+					/>
+				{:else}
+					<span class="owner-cell__placeholder">{entry.ownerName ?? '—'}</span>
+				{/if}
 			</div>
 		{/if}
 		{#if showPath}<div class="path-cell">{entry.path ?? ''}</div>{/if}
@@ -570,28 +573,7 @@
 		min-width: 0;
 	}
 
-	.rl-vignette {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--space-2);
-		min-width: 0;
-	}
-
-	.rl-vignette__avatar {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border-radius: 50%;
-		background: var(--color-accent-bg-sm);
-		color: var(--color-accent-text);
-		font-size: var(--text-xs);
-		font-weight: var(--weight-semibold);
-		flex: none;
-	}
-
-	.rl-vignette__name {
+	.owner-cell__placeholder {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

frontend/src/routes/shared-with-me/+page.svelte

@@ -22,9 +22,13 @@
 				name: it.resource.name,
 				kind: it.resource_type,
 				iconClass: it.resource.icon_class,
-				path: it.granted_by
-					? t('shared_with_me.from', { who: it.granted_by }, 'Shared by {{who}}')
-					: it.resource.path,
+				// The sharer becomes the "owner" surface — ResourceList renders
+				// `<UserVignette userId>` (avatar / name / external badge),
+				// resolved lazily via `/api/users/{id}`. `path` keeps the
+				// resource's real location so the row still shows where it
+				// lives, not a translated string.
+				ownerId: it.granted_by ?? null,
+				path: it.resource.path,
 				size: it.resource_type === 'file' ? (it.resource as FileItem).size : null,
 				date: it.granted_at
 			})
@@ -79,6 +83,7 @@
 	{error}
 	emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')}
 	hasMore={!!cursor}
+	showOwner={true}
 	onloadmore={() => load(false)}
 	onopen={open}
 />

frontend/src/routes/shared/+page.svelte

@@ -22,6 +22,7 @@
 	import Icon from '$lib/icons/Icon.svelte';
 	import ListToolbar from '$lib/components/ListToolbar.svelte';
 	import ShareDialog from '$lib/components/ShareDialog.svelte';
+	import UserVignette from '$lib/components/UserVignette.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
 	import { iconNameFromClass } from '$lib/utils/display';
@@ -388,16 +389,21 @@
 							<Icon name="pencil-alt" />
 							{t('myshares.editSharing', 'Edit sharing')}
 						</button>
+					{:else if lane.header.kind === 'user'}
+						<span class="ms-lane__subject">
+							<UserVignette
+								userId={lane.header.id}
+								fallbackLabel={resolveLabel('user', lane.header.id)}
+							/>
+						</span>
 					{:else}
 						<span class="ms-lane__subject">
 							<Icon
-								name={lane.header.kind === 'user'
-									? 'user'
-									: lane.header.kind === 'group'
-										? 'user-group'
-										: lane.header.kind === 'linkPassword'
-											? 'lock'
-											: 'link'}
+								name={lane.header.kind === 'group'
+									? 'user-group'
+									: lane.header.kind === 'linkPassword'
+										? 'lock'
+										: 'link'}
 							/>
 							<span class="ms-lane__name">{laneTitle(lane.header)}</span>
 						</span>
@@ -416,8 +422,10 @@
 										<span class="ms-row__name">{item.resource.name}</span>
 									</button>
 								{:else if grant.subject_type === 'user'}
-									<Icon name="user" />
-									<span class="ms-row__name">{resolveLabel('user', grant.subject_id)}</span>
+									<UserVignette
+										userId={grant.subject_id}
+										fallbackLabel={resolveLabel('user', grant.subject_id)}
+									/>
 								{:else if grant.subject_type === 'group'}
 									<Icon name="user-group" />
 									<span class="ms-row__name">{resolveLabel('group', grant.subject_id)}</span>