Oxicloud/frontend/src/routes/config/drive/[uuid]/+page.svelte

<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/state';
	import { onMount } from 'svelte';

	import { listDriveMembers } from '$lib/api/endpoints/drives';
	import type { Drive, DriveMember, DriveRole } from '$lib/api/types';
	import ShareDialog from '$lib/components/ShareDialog.svelte';
	import UserVignette from '$lib/components/UserVignette.svelte';
	import Icon from '$lib/icons/Icon.svelte';
	import { t } from '$lib/i18n/index.svelte';
	import { drives as drivesStore, driveIcon } from '$lib/stores/drives.svelte';
	import { formatDate } from '$lib/utils/display';
	import { formatBytes } from '$lib/utils/format';

	const uuid = $derived(page.params.uuid ?? '');
	const drive = $derived<Drive | null>(drivesStore.findById(uuid));

	let members = $state<DriveMember[]>([]);
	let membersLoaded = $state(false);
	let membersError = $state<string | null>(null);

	// Mutation controls are gated by *both* caller_role AND drive kind:
	// even an Owner of a personal drive can't change membership (the
	// backend guard refuses), so the UI hides the controls upfront for
	// honest UX. Shared drives + Owner role → full controls.
	const canManageMembers = $derived(drive?.kind === 'shared' && drive?.caller_role === 'owner');

	function roleLabel(role: DriveRole): string {
		switch (role) {
			case 'owner':
				return t('drive.role.owner', 'Owner');
			case 'editor':
				return t('drive.role.editor', 'Editor');
			case 'contributor':
				return t('drive.role.contributor', 'Contributor');
			case 'commenter':
				return t('drive.role.commenter', 'Commenter');
			case 'viewer':
				return t('drive.role.viewer', 'Viewer');
		}
	}

	// `shareDialogOpen` drives the ShareDialog modal — the same dialog
	// used for file/folder sharing, parameterised with `kind: 'drive'`
	// + `allowLinks: false`. Add/change-role/remove flow through the
	// dialog's existing grants plumbing (server-side those routes
	// dispatch to `DriveManagementService`).
	let shareDialogOpen = $state(false);

	// `dialogItem` is recomputed from the drive so the dialog title
	// reflects renames.
	const dialogItem = $derived(
		drive ? { id: drive.id, name: drive.name, kind: 'drive' as const } : null
	);

	async function loadMembers() {
		if (!uuid) return;
		try {
			members = await listDriveMembers(uuid);
		} catch (e) {
			// 404 here means the caller lacks Read on the drive — which is
			// also what the parent "Drive not found" card already conveys.
			// Keep the listing area empty rather than surfacing a noisy toast.
			membersError = e instanceof Error ? e.message : String(e);
			members = [];
		} finally {
			membersLoaded = true;
		}
	}

	// Refresh the on-page member list on every dialog mutation (add,
	// role change, remove). ShareDialog fires `onchange` for the full
	// set of grant mutations — `onshared` only covers creation, which
	// would leave role-change and removal stale here.
	function onShareDialogChange() {
		void loadMembers();
	}

	const kindLabel = $derived.by(() => {
		if (!drive) return '';
		return drive.kind === 'shared'
			? t('drive.kind_shared', 'Shared drive')
			: t('drive.kind_personal', 'Personal drive');
	});

	const storagePct = $derived.by(() => {
		if (!drive || !drive.quota_bytes || drive.quota_bytes <= 0) return 0;
		return Math.min(100, (drive.used_bytes / drive.quota_bytes) * 100);
	});

	const policyEntries = $derived.by(() => {
		if (!drive) return [];
		return Object.entries(drive.policies).map(([key, value]) => ({ key, value }));
	});

	function policyLabel(key: string): string {
		// Known policy keys get a friendlier translated label; unknown keys
		// surface verbatim so operators still see them (forward-compat).
		switch (key) {
			case 'forbid_public_links':
				return t('drive.policy.forbid_public_links', 'Forbid public links');
			case 'forbid_external_sharing':
				return t('drive.policy.forbid_external_sharing', 'Forbid external sharing');
			case 'forbid_sharing':
				return t('drive.policy.forbid_sharing', 'Forbid sharing');
			case 'forbid_cross_drive_move':
				return t('drive.policy.forbid_cross_drive_move', 'Forbid cross-drive move');
			case 'include_in_photo_index':
				return t('drive.policy.include_in_photo_index', 'Include in photo index');
			case 'forbid_music_index':
				return t('drive.policy.forbid_music_index', 'Forbid music index');
			default:
				return key;
		}
	}

	function policyValueDisplay(value: unknown): string {
		if (value === true) return t('drive.policy.on', 'On');
		if (value === false) return t('drive.policy.off', 'Off');
		return String(value);
	}

	onMount(() => {
		void drivesStore.load();
	});

	// SvelteKit reuses this component when navigating between
	// `/config/drive/<A>` and `/config/drive/<B>` (same route, different
	// dynamic param), so `onMount` only fires once. Re-run the members
	// fetch whenever `uuid` changes — without this, the previous drive's
	// rows linger until a hard refresh. Resetting `members` + the loaded
	// flag first prevents the brief flash of stale data before the new
	// fetch returns.
	$effect(() => {
		const id = uuid;
		members = [];
		membersLoaded = false;
		membersError = null;
		if (id) void loadMembers();
	});
</script>

<div class="config-drive">
	{#if !drivesStore.loaded}
		<p class="muted">{t('common.loading', 'Loading…')}</p>
	{:else if !drive}
		<div class="card">
			<h2>{t('drive.not_found_title', 'Drive not found')}</h2>
			<p class="muted">
				{t('drive.not_found_body', "This drive doesn't exist or you don't have access to it.")}
			</p>
			<a class="link" href={resolve('/files')}>{t('drive.back_to_files', 'Back to Files')}</a>
		</div>
	{:else}
		<h1>
			<Icon name={driveIcon(drive)} />
			{drive.name}
		</h1>

		<div class="card">
			<h2><Icon name="info-circle" /> {t('drive.info', 'Drive info')}</h2>
			<dl class="info-grid">
				<dt>{t('drive.field.kind', 'Kind')}</dt>
				<dd>{kindLabel}</dd>

				{#if drive.default_for_user}
					<dt>{t('drive.field.default', 'Default')}</dt>
					<dd>{t('drive.field.default_yes', 'This is your home drive')}</dd>
				{/if}

				<dt>{t('drive.field.created', 'Created')}</dt>
				<dd>{formatDate(drive.created_at)}</dd>

				<dt>{t('drive.field.updated', 'Last updated')}</dt>
				<dd>{formatDate(drive.updated_at)}</dd>

				<dt>{t('drive.field.id', 'Identifier')}</dt>
				<dd class="mono">{drive.id}</dd>
			</dl>
		</div>

		<div class="card">
			<h2><Icon name="hdd" /> {t('drive.storage', 'Storage')}</h2>
			<div class="storage-row">
				<div class="storage-stat">
					<div class="storage-stat__value">{formatBytes(drive.used_bytes)}</div>
					<div class="storage-stat__label">{t('drive.used', 'Used')}</div>
				</div>
				<div class="storage-stat">
					<div class="storage-stat__value">
						{drive.quota_bytes && drive.quota_bytes > 0 ? formatBytes(drive.quota_bytes) : '∞'}
					</div>
					<div class="storage-stat__label">{t('drive.quota', 'Quota')}</div>
				</div>
				<div class="storage-stat">
					<div class="storage-stat__value">
						{drive.quota_bytes && drive.quota_bytes > 0 ? `${Math.round(storagePct)}%` : '—'}
					</div>
					<div class="storage-stat__label">{t('drive.usage', 'Usage')}</div>
				</div>
			</div>
			{#if drive.quota_bytes && drive.quota_bytes > 0}
				<div
					class="bar"
					role="progressbar"
					aria-valuemin="0"
					aria-valuemax="100"
					aria-valuenow={Math.round(storagePct)}
				>
					<div class="bar__fill" style:width="{storagePct}%"></div>
				</div>
			{/if}
		</div>

		<div class="card">
			<div class="members__header">
				<h2><Icon name="users" /> {t('drive.members', 'Members')}</h2>
				{#if canManageMembers}
					<button
						type="button"
						class="btn btn-primary"
						data-testid="drive-manage-members-btn"
						onclick={() => (shareDialogOpen = true)}
					>
						<Icon name="user-plus" />
						{t('drive.manage_members', 'Manage members')}
					</button>
				{/if}
			</div>

			{#if !membersLoaded}
				<p class="muted">{t('common.loading', 'Loading…')}</p>
			{:else if members.length === 0}
				<p class="muted">
					{membersError ?? t('drive.members_empty', 'No members.')}
				</p>
			{:else}
				<!-- Read-only summary. Add/change/remove happens inside the
				     ShareDialog modal opened by the button above; the inline
				     row controls used to live here have moved into the dialog
				     so the same flow handles file/folder + drive grants. -->
				<ul class="members">
					{#each members as m (m.id)}
						<li class="members__row">
							{#if m.subject.type === 'user'}
								<UserVignette userId={m.subject.id} />
							{:else if m.subject.type === 'group'}
								<span class="members__group">
									<Icon name="users" />
									<span class="mono">{m.subject.id}</span>
								</span>
							{:else}
								<span class="members__token">
									<Icon name="link" />
									<span class="mono">{m.subject.id}</span>
								</span>
							{/if}
							<span class="members__role members__role--{m.role}">
								{roleLabel(m.role)}
							</span>
						</li>
					{/each}
				</ul>

				{#if !canManageMembers && drive.kind === 'personal'}
					<p class="muted members__personal-note">
						{t(
							'drive.members.personal_immutable',
							'Personal drives have a fixed single-owner membership.'
						)}
					</p>
				{/if}
			{/if}
		</div>

		{#if policyEntries.length > 0}
			<div class="card">
				<h2><Icon name="shield-alt" /> {t('drive.policies', 'Policies')}</h2>
				<dl class="info-grid">
					{#each policyEntries as p (p.key)}
						<dt>{policyLabel(p.key)}</dt>
						<dd>{policyValueDisplay(p.value)}</dd>
					{/each}
				</dl>
			</div>
		{/if}
	{/if}
</div>

<!-- Drive members modal — reuses the same ShareDialog as file/folder
     sharing. `allowLinks={false}` hides the public-link tab because
     drives don't support shareable URLs (the backend service refuses
     token subjects on drive resources). -->
{#if dialogItem}
	<ShareDialog
		bind:open={shareDialogOpen}
		item={dialogItem}
		allowLinks={false}
		onchange={onShareDialogChange}
	/>
{/if}

<style>
	.config-drive {
		max-width: 800px;
		margin: 0 auto;
		padding: 1.5rem 1rem;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.config-drive h1 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		font-size: 1.5rem;
		color: var(--color-text-heading);
	}

	.card {
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-md);
		padding: 1.25rem;
	}

	.card h2 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0 0 1rem;
		font-size: 1.05rem;
		color: var(--color-text-heading);
	}

	.info-grid {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 0.5rem 1.5rem;
		margin: 0;
	}

	.info-grid dt {
		color: var(--color-text-muted);
		font-size: 0.85rem;
	}

	.info-grid dd {
		margin: 0;
		color: var(--color-text);
	}

	.mono {
		font-family: var(--font-mono);
		font-size: 0.85rem;
	}

	.storage-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.storage-stat__value {
		font-size: 1.1rem;
		font-weight: var(--weight-semibold);
		color: var(--color-text);
	}

	.storage-stat__label {
		font-size: 0.8rem;
		color: var(--color-text-muted);
	}

	.bar {
		height: 6px;
		background: var(--color-bg-muted);
		border-radius: 3px;
		overflow: hidden;
	}

	.bar__fill {
		height: 100%;
		background: var(--color-accent);
		transition: width 200ms ease;
	}

	.muted {
		color: var(--color-text-muted);
	}

	.link {
		color: var(--color-accent);
		text-decoration: none;
	}

	.link:hover {
		text-decoration: underline;
	}

	/* Members card header: title on the left, "Manage members" button on
	   the right when the caller can mutate membership. */
	.members__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3, 0.75rem);
		margin-bottom: var(--space-3, 0.75rem);
	}

	.members__header h2 {
		margin: 0;
	}

	/* Members list */
	.members {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.members__row {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--color-border-faint);
		border-radius: var(--radius-sm);
		background: var(--color-bg-page);
	}

	.members__group,
	.members__token {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		flex: 1;
		min-width: 0;
		color: var(--color-text-secondary);
	}

	.members__role {
		display: inline-flex;
		align-items: center;
		padding: 0.2rem 0.65rem;
		border-radius: var(--radius-pill, 999px);
		font-size: 0.8rem;
		background: var(--color-bg-muted);
		color: var(--color-text-secondary);
		flex: none;
	}

	.members__role--owner {
		background: var(--color-accent-tint, var(--color-bg-muted));
		color: var(--color-accent-text, var(--color-text-secondary));
		font-weight: var(--weight-semibold);
	}

	.members__role--editor,
	.members__role--contributor {
		background: var(--color-accent-ring, var(--color-bg-muted));
		color: var(--color-accent-text, var(--color-text-secondary));
	}

	.members__role-select {
		flex: none;
		padding: 0.25rem 0.5rem;
		border-radius: var(--radius-sm);
		border: 1px solid var(--color-border);
		background: var(--color-bg-input);
		color: var(--color-text);
		font: inherit;
		font-size: 0.85rem;
		cursor: pointer;
	}

	.members__remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: none;
		border-radius: var(--radius-sm);
		background: transparent;
		color: var(--color-text-faint);
		cursor: pointer;
	}

	.members__remove:hover {
		background: var(--color-bg-hover);
		color: var(--color-danger-text, var(--color-text));
	}

	.members__personal-note {
		margin-top: 0.75rem;
		font-size: 0.85rem;
	}
</style>