feat(drive): improve drive edition from owners

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

@@ -3,17 +3,13 @@
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
 
-	import {
-		listDriveMembers,
-		removeDriveMember,
-		updateDriveMember
-	} from '$lib/api/endpoints/drives';
+	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 { errorToast } from '$lib/utils/errors';
 	import { formatDate } from '$lib/utils/display';
 	import { formatBytes } from '$lib/utils/format';
 
@@ -30,10 +26,6 @@
 	// honest UX. Shared drives + Owner role → full controls.
 	const canManageMembers = $derived(drive?.kind === 'shared' && drive?.caller_role === 'owner');
 
-	// Roles offered in the dropdown. Owner sets the bundle; other roles
-	// match the backend `Role` enum order (owner → viewer = strongest → weakest).
-	const ASSIGNABLE_ROLES: DriveRole[] = ['owner', 'editor', 'viewer'];
-
 	function roleLabel(role: DriveRole): string {
 		switch (role) {
 			case 'owner':
@@ -49,6 +41,19 @@
 		}
 	}
 
+	// `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 {
@@ -64,27 +69,12 @@
 		}
 	}
 
-	async function changeRole(member: DriveMember, role: DriveRole) {
-		if (member.role === role) return;
-		try {
-			const updated = await updateDriveMember(uuid, member.subject, role);
-			members = members.map((m) => (m.id === member.id ? updated : m));
-		} catch (e) {
-			errorToast(e);
-			// Re-fetch so the dropdown reflects the server-side state, not the
-			// optimistic-but-rejected change.
-			await loadMembers();
-		}
-	}
-
-	async function removeMember(member: DriveMember) {
-		try {
-			await removeDriveMember(uuid, member.subject);
-			members = members.filter((m) => m.id !== member.id);
-		} catch (e) {
-			errorToast(e);
-			await loadMembers();
-		}
+	// 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(() => {
@@ -133,7 +123,21 @@
 
 	onMount(() => {
 		void drivesStore.load();
-		void loadMembers();
+	});
+
+	// 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>
 
@@ -210,7 +214,21 @@
 		</div>
 
 		<div class="card">
-			<h2><Icon name="users" /> {t('drive.members', 'Members')}</h2>
+			<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}
@@ -218,6 +236,10 @@
 					{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">
@@ -234,33 +256,9 @@
 									<span class="mono">{m.subject.id}</span>
 								</span>
 							{/if}
-
-							{#if canManageMembers}
-								<select
-									class="members__role-select"
-									value={m.role}
-									onchange={(e) =>
-										void changeRole(m, (e.currentTarget as HTMLSelectElement).value as DriveRole)}
-									aria-label={t('drive.member.change_role_aria', 'Change role')}
-								>
-									{#each ASSIGNABLE_ROLES as r (r)}
-										<option value={r}>{roleLabel(r)}</option>
-									{/each}
-								</select>
-								<button
-									type="button"
-									class="members__remove"
-									title={t('drive.member.remove', 'Remove member')}
-									aria-label={t('drive.member.remove', 'Remove member')}
-									onclick={() => void removeMember(m)}
-								>
-									<Icon name="times" />
-								</button>
-							{:else}
-								<span class="members__role members__role--{m.role}">
-									{roleLabel(m.role)}
-								</span>
-							{/if}
+							<span class="members__role members__role--{m.role}">
+								{roleLabel(m.role)}
+							</span>
 						</li>
 					{/each}
 				</ul>
@@ -290,6 +288,19 @@
 	{/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;
@@ -391,6 +402,20 @@
 		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;

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

@@ -26,26 +26,33 @@
 	const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
 
 	const entries = $derived(
-		raw.map((it): ResourceEntry => {
-			const isFile = it.resource_type === 'file';
-			return {
-				id: it.resource.id,
-				name: it.resource.name,
-				kind: it.resource_type,
-				iconClass: it.resource.icon_class,
-				// 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,
-				ownerName: sharers.name(it.granted_by),
-				path: it.resource.path,
-				size: isFile ? (it.resource as FileItem).size : null,
-				date: it.granted_at,
-				category: isFile ? it.resource.category : 'Folder'
-			};
-		})
+		// Drive resources also surface in `/api/grants/incoming/resources`
+		// since the role_grants rewrite, but they don't belong in the
+		// file/folder ResourceList — they're reached through the drive
+		// picker / breadcrumb. Filter them out here so the row UI keeps
+		// its file|folder type contract.
+		raw
+			.filter((it) => it.resource_type !== 'drive')
+			.map((it): ResourceEntry => {
+				const isFile = it.resource_type === 'file';
+				return {
+					id: it.resource.id,
+					name: it.resource.name,
+					kind: it.resource_type as 'file' | 'folder',
+					iconClass: it.resource.icon_class,
+					// 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,
+					ownerName: sharers.name(it.granted_by),
+					path: it.resource.path,
+					size: isFile ? (it.resource as FileItem).size : null,
+					date: it.granted_at,
+					category: isFile ? it.resource.category : 'Folder'
+				};
+			})
 	);
 
 	// Server-supported sort_by values (see grant_handler.rs:615):

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

@@ -19,7 +19,8 @@
 	import { copyShareLink, deleteShare, getShareById, updateShare } from '$lib/api/endpoints/shares';
 	import { ensureResolvers, resolveLabel } from '$lib/api/endpoints/recipients';
 	import { fileInlineUrl } from '$lib/api/endpoints/files';
-	import type { FileItem, FolderItem, ItemType } from '$lib/api/types';
+	import type { FileItem, FolderItem } from '$lib/api/types';
+	import type { GrantResourceType } from '$lib/api/endpoints/grants';
 	import Icon from '$lib/icons/Icon.svelte';
 	import ListToolbar from '$lib/components/ListToolbar.svelte';
 	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
@@ -53,7 +54,7 @@
 
 	// Edit-sharing dialog
 	let dialogOpen = $state(false);
-	let dialogItem = $state<{ id: string; name: string; kind: ItemType } | null>(null);
+	let dialogItem = $state<{ id: string; name: string; kind: GrantResourceType } | null>(null);
 
 	// ShareDialog is heavy and only opens on demand — keep it out of this route's
 	// initial chunk and load it the first time the dialog is opened.
@@ -189,6 +190,13 @@
 	}
 
 	function openResource(item: OutgoingGrantItem) {
+		// Drives don't have a Files-page deep-link the same way folders do
+		// (their id is the drive UUID, not a folder UUID); route to the
+		// per-drive settings page so the user lands somewhere meaningful.
+		if (item.resource_type === 'drive') {
+			goto(resolve(`/config/drive/${item.resource.id}`));
+			return;
+		}
 		if (item.resource_type === 'folder') goto(resolve(`/files/${item.resource.id}`));
 		else window.open(fileInlineUrl(item.resource.id), '_blank', 'noopener');
 	}
@@ -351,6 +359,11 @@
 	}
 
 	function resourceIcon(item: OutgoingGrantItem): string {
+		// Drives use the `hdd` glyph (shared with DrivePicker / breadcrumb)
+		// so a shared drive reads as a distinct kind at a glance — folder
+		// and drive both grant access to a tree, but the scope is very
+		// different.
+		if (item.resource_type === 'drive') return 'hdd';
 		return item.resource_type === 'folder'
 			? 'folder'
 			: iconNameFromClass((item.resource as FileItem | FolderItem).icon_class);
@@ -629,7 +642,10 @@
 
 {#if shareDialog.component}
 	{@const ShareDialog = shareDialog.component}
-	<ShareDialog bind:open={dialogOpen} item={dialogItem} />
+	<!-- Drives don't support shareable URLs — hide the Public-link tab
+	     when the dialog is opened for a drive resource. File/folder
+	     resources keep the default tab set. -->
+	<ShareDialog bind:open={dialogOpen} item={dialogItem} allowLinks={dialogItem?.kind !== 'drive'} />
 {/if}
 
 <style>