feat(shares): restore userVignette

This commit is contained in:
Edouard Vanbelle
2026-06-20 02:13:23 +02:00
parent 498cbbfbab
commit 77521eb913
3 changed files with 35 additions and 40 deletions
+10 -28
View File
@@ -54,6 +54,7 @@
import EmptyState from '$lib/components/EmptyState.svelte'; import EmptyState from '$lib/components/EmptyState.svelte';
import SkeletonList from '$lib/components/SkeletonList.svelte'; import SkeletonList from '$lib/components/SkeletonList.svelte';
import ListToolbar from '$lib/components/ListToolbar.svelte'; import ListToolbar from '$lib/components/ListToolbar.svelte';
import UserVignette from '$lib/components/UserVignette.svelte';
import VirtualList from '$lib/components/VirtualList.svelte'; import VirtualList from '$lib/components/VirtualList.svelte';
import { t } from '$lib/i18n/index.svelte'; import { t } from '$lib/i18n/index.svelte';
import { files as filesStore } from '$lib/stores/files.svelte'; import { files as filesStore } from '$lib/stores/files.svelte';
@@ -329,12 +330,14 @@
</div> </div>
{#if showOwner} {#if showOwner}
<div class="owner-cell"> <div class="owner-cell">
<span class="rl-vignette"> {#if entry.ownerId}
<span class="rl-vignette__avatar" aria-hidden="true" <UserVignette
>{(entry.ownerName ?? '?').slice(0, 1).toUpperCase()}</span userId={entry.ownerId}
> fallbackLabel={entry.ownerName ?? undefined}
<span class="rl-vignette__name">{entry.ownerName ?? entry.ownerId ?? ''}</span> />
</span> {:else}
<span class="owner-cell__placeholder">{entry.ownerName ?? '—'}</span>
{/if}
</div> </div>
{/if} {/if}
{#if showPath}<div class="path-cell">{entry.path ?? ''}</div>{/if} {#if showPath}<div class="path-cell">{entry.path ?? ''}</div>{/if}
@@ -570,28 +573,7 @@
min-width: 0; min-width: 0;
} }
.rl-vignette { .owner-cell__placeholder {
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 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -22,9 +22,13 @@
name: it.resource.name, name: it.resource.name,
kind: it.resource_type, kind: it.resource_type,
iconClass: it.resource.icon_class, iconClass: it.resource.icon_class,
path: it.granted_by // The sharer becomes the "owner" surface — ResourceList renders
? t('shared_with_me.from', { who: it.granted_by }, 'Shared by {{who}}') // `<UserVignette userId>` (avatar / name / external badge),
: it.resource.path, // 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, size: it.resource_type === 'file' ? (it.resource as FileItem).size : null,
date: it.granted_at date: it.granted_at
}) })
@@ -79,6 +83,7 @@
{error} {error}
emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')} emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')}
hasMore={!!cursor} hasMore={!!cursor}
showOwner={true}
onloadmore={() => load(false)} onloadmore={() => load(false)}
onopen={open} onopen={open}
/> />
+17 -9
View File
@@ -22,6 +22,7 @@
import Icon from '$lib/icons/Icon.svelte'; import Icon from '$lib/icons/Icon.svelte';
import ListToolbar from '$lib/components/ListToolbar.svelte'; import ListToolbar from '$lib/components/ListToolbar.svelte';
import ShareDialog from '$lib/components/ShareDialog.svelte'; import ShareDialog from '$lib/components/ShareDialog.svelte';
import UserVignette from '$lib/components/UserVignette.svelte';
import { t } from '$lib/i18n/index.svelte'; import { t } from '$lib/i18n/index.svelte';
import { ui } from '$lib/stores/ui.svelte'; import { ui } from '$lib/stores/ui.svelte';
import { iconNameFromClass } from '$lib/utils/display'; import { iconNameFromClass } from '$lib/utils/display';
@@ -388,16 +389,21 @@
<Icon name="pencil-alt" /> <Icon name="pencil-alt" />
{t('myshares.editSharing', 'Edit sharing')} {t('myshares.editSharing', 'Edit sharing')}
</button> </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} {:else}
<span class="ms-lane__subject"> <span class="ms-lane__subject">
<Icon <Icon
name={lane.header.kind === 'user' name={lane.header.kind === 'group'
? 'user' ? 'user-group'
: lane.header.kind === 'group' : lane.header.kind === 'linkPassword'
? 'user-group' ? 'lock'
: lane.header.kind === 'linkPassword' : 'link'}
? 'lock'
: 'link'}
/> />
<span class="ms-lane__name">{laneTitle(lane.header)}</span> <span class="ms-lane__name">{laneTitle(lane.header)}</span>
</span> </span>
@@ -416,8 +422,10 @@
<span class="ms-row__name">{item.resource.name}</span> <span class="ms-row__name">{item.resource.name}</span>
</button> </button>
{:else if grant.subject_type === 'user'} {:else if grant.subject_type === 'user'}
<Icon name="user" /> <UserVignette
<span class="ms-row__name">{resolveLabel('user', grant.subject_id)}</span> userId={grant.subject_id}
fallbackLabel={resolveLabel('user', grant.subject_id)}
/>
{:else if grant.subject_type === 'group'} {:else if grant.subject_type === 'group'}
<Icon name="user-group" /> <Icon name="user-group" />
<span class="ms-row__name">{resolveLabel('group', grant.subject_id)}</span> <span class="ms-row__name">{resolveLabel('group', grant.subject_id)}</span>