feat(drive): UI: add drive edition for admin
This commit is contained in:
Edouard Vanbelle
@@ -62,23 +62,13 @@
|
||||
onMount(() => {
|
||||
void drivesStore.load();
|
||||
});
|
||||
|
||||
// Dev/test override — set `localStorage.setItem('oxi-show-drive-picker', '1')`
|
||||
// from DevTools to force the picker visible even with a single drive (useful
|
||||
// for testing the UI before D3's shared-drive creation lands). Evaluated once
|
||||
// at component mount; reload after toggling to apply.
|
||||
const forceShowPicker = $derived(
|
||||
typeof localStorage !== 'undefined' && localStorage.getItem('oxi-show-drive-picker') === '1'
|
||||
);
|
||||
</script>
|
||||
|
||||
<!-- Only show the drive switcher when there's an actual choice to make. With a
|
||||
single drive (the default personal one) the picker just repeats "Personal"
|
||||
under the Files nav row, so hide it; it reappears the moment a second drive
|
||||
(e.g. a shared one) exists.
|
||||
|
||||
`forceShowPicker` is the localStorage-driven dev override (see script). -->
|
||||
{#if drivesStore.loaded && (drivesStore.drives.length > 1 || forceShowPicker)}
|
||||
(e.g. a shared one created from the admin Drives tab) exists. -->
|
||||
{#if drivesStore.loaded && drivesStore.drives.length > 1}
|
||||
<ul class="drive-picker" aria-label={t('drive.picker', 'Drives')}>
|
||||
{#each sortedDrives as d (d.id)}
|
||||
<li class="drive-picker__row" class:drive-picker__row--active={isActive(d)}>
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
<script lang="ts">
|
||||
import Icon from '$lib/icons/Icon.svelte';
|
||||
import { t } from '$lib/i18n/index.svelte';
|
||||
import { resolveRecipient } from '$lib/api/endpoints/recipients';
|
||||
import { resolveUser, type ResolvedUser } from '$lib/api/endpoints/users';
|
||||
import { userInitials, avatarColorIndex } from '$lib/utils/avatar';
|
||||
import type { DriveMember } from '$lib/api/types';
|
||||
|
||||
interface Props {
|
||||
members: DriveMember[];
|
||||
max?: number;
|
||||
}
|
||||
let { members, max = 6 }: Props = $props();
|
||||
|
||||
// Render only Owner-role grants and exclude token subjects (they can't
|
||||
// own a drive per the service contract; defensive filter so a stray
|
||||
// row from a future role doesn't render as an avatar).
|
||||
const owners = $derived(
|
||||
members.filter(
|
||||
(m) => m.role === 'owner' && (m.subject.type === 'user' || m.subject.type === 'group')
|
||||
)
|
||||
);
|
||||
|
||||
const shown = $derived(owners.slice(0, max));
|
||||
const overflow = $derived(Math.max(0, owners.length - shown.length));
|
||||
|
||||
// Per-user profile cache (image + email + real name). The cache itself
|
||||
// lives in `resolveUser`; this state just mirrors what we've fetched so
|
||||
// reactive `$derived` recomputes when a lookup lands.
|
||||
let resolved = $state<Record<string, ResolvedUser | null>>({});
|
||||
|
||||
$effect(() => {
|
||||
// Refresh on every membership change. `resolveUser` dedupes
|
||||
// concurrent calls and caches per id, so this is cheap when the
|
||||
// same id reappears across rows.
|
||||
const users = owners.filter((m) => m.subject.type === 'user');
|
||||
for (const m of users) {
|
||||
if (m.subject.id in resolved) continue;
|
||||
void resolveUser(m.subject.id).then((u) => {
|
||||
resolved = { ...resolved, [m.subject.id]: u };
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function nameFor(m: DriveMember): string {
|
||||
if (m.subject.type === 'group') return resolveRecipient('group', m.subject.id).label;
|
||||
return resolved[m.subject.id]?.name ?? resolveRecipient('user', m.subject.id).label;
|
||||
}
|
||||
|
||||
function imageFor(m: DriveMember): string | null {
|
||||
if (m.subject.type !== 'user') return null;
|
||||
return resolved[m.subject.id]?.image ?? null;
|
||||
}
|
||||
|
||||
function isExternalFor(m: DriveMember): boolean {
|
||||
if (m.subject.type !== 'user') return false;
|
||||
return resolved[m.subject.id]?.isExternal ?? false;
|
||||
}
|
||||
|
||||
// "Name — email" tooltip; group falls back to label only.
|
||||
function titleFor(m: DriveMember): string {
|
||||
const name = nameFor(m);
|
||||
if (m.subject.type === 'group') return name;
|
||||
const email = resolved[m.subject.id]?.email ?? '';
|
||||
return email ? `${name} — ${email}` : name;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if owners.length === 0}
|
||||
<span class="owner-stack__empty">{t('admin.drive_no_owners', 'No owners')}</span>
|
||||
{:else}
|
||||
<ul class="owner-stack" aria-label={t('admin.drive_owners_aria', 'Drive owners')}>
|
||||
{#each shown as m (`${m.subject.type}-${m.subject.id}`)}
|
||||
{@const title = titleFor(m)}
|
||||
{@const image = imageFor(m)}
|
||||
<li class="owner-stack__chip" {title}>
|
||||
{#if m.subject.type === 'group'}
|
||||
<span class="owner-stack__avatar owner-stack__avatar--group">
|
||||
<Icon name="users" />
|
||||
</span>
|
||||
{:else if image}
|
||||
<img class="owner-stack__photo" src={image} alt="" />
|
||||
{:else}
|
||||
<span class="owner-stack__avatar owner-stack__avatar--c{avatarColorIndex(m.subject.id)}">
|
||||
{userInitials(nameFor(m))}
|
||||
</span>
|
||||
{/if}
|
||||
{#if isExternalFor(m)}
|
||||
<span class="owner-stack__ext-badge" title={t('share.externalUser', 'External user')}>
|
||||
<Icon name="building-circle-xmark" />
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
{#if overflow > 0}
|
||||
<li class="owner-stack__chip" title={owners.slice(max).map(titleFor).join('\n')}>
|
||||
<span class="owner-stack__avatar owner-stack__avatar--more">
|
||||
+{overflow}
|
||||
</span>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.owner-stack {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Negative margin = overlap. The chip after this one slides under,
|
||||
producing the stacked look. First chip keeps full margin so the
|
||||
leftmost avatar isn't clipped by the container. */
|
||||
.owner-stack__chip {
|
||||
position: relative;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.owner-stack__chip:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.owner-stack__avatar,
|
||||
.owner-stack__photo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 50%;
|
||||
font-size: 0.7rem;
|
||||
font-weight: var(--weight-semibold, 600);
|
||||
color: var(--color-text-light);
|
||||
border: 2px solid var(--color-bg-surface);
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Group icon avatar — neutral background, distinct from the coloured
|
||||
user buckets so a viewer can tell user-vs-group at a glance. */
|
||||
.owner-stack__avatar--group {
|
||||
background: var(--color-bg-muted);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* "+N" overflow chip mirrors the group neutral palette. */
|
||||
.owner-stack__avatar--more {
|
||||
background: var(--color-bg-muted);
|
||||
color: var(--color-text);
|
||||
font-weight: var(--weight-semibold, 600);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
/* Colour buckets mirror UserVignette so the same user gets the same
|
||||
colour across the app. */
|
||||
.owner-stack__avatar--c0 {
|
||||
background: var(--color-badge-indigo-bg);
|
||||
color: var(--color-badge-indigo-text);
|
||||
}
|
||||
|
||||
.owner-stack__avatar--c1 {
|
||||
background: var(--color-badge-green-bg);
|
||||
color: var(--color-badge-green-text);
|
||||
}
|
||||
|
||||
.owner-stack__avatar--c2 {
|
||||
background: var(--color-badge-orange-bg);
|
||||
color: var(--color-badge-orange-text);
|
||||
}
|
||||
|
||||
.owner-stack__avatar--c3 {
|
||||
background: var(--color-badge-blue-bg);
|
||||
color: var(--color-badge-blue-text);
|
||||
}
|
||||
|
||||
.owner-stack__avatar--c4 {
|
||||
background: var(--color-badge-amber-bg);
|
||||
color: var(--color-badge-amber-text);
|
||||
}
|
||||
|
||||
/* External-user marker — small badge in the bottom-right corner. */
|
||||
.owner-stack__ext-badge {
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
||||
.owner-stack__empty {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user