descrybe/apps/web/src/lib/components/settings/MemberPermissionsDialog.svelte

<script lang="ts">
	import { api } from "$lib/api";
	import { i18n } from "$lib/i18n";
	import { notifyApiError } from "$lib/notify";
	import { planCapabilities } from "$lib/plan-capabilities.svelte";
	import { sectionLabel } from "$lib/plan-feature-catalog";
	import { Badge, Button, Checkbox, Dialog, Input, Spinner } from "$lib/components/ui";
	import Alert from "$lib/components/Alert.svelte";
	import {
		catalogKeys,
		denyAll,
		filterCatalog,
		isDenied,
		permissionSummary,
		samePermissions,
		setPermissionAllowed,
		type MemberPermissionsView,
		type PermissionCatalog
	} from "$lib/member-permissions";

	let {
		open = $bindable(false),
		member,
		canEdit = false,
		onSaved = undefined
	}: {
		open?: boolean;
		/** The teammate being edited — null while the dialog is closed. */
		member: { user_id: string; email: string; is_owner?: boolean } | null;
		/** Only the company owner may change permissions; others get a read-only view. */
		canEdit?: boolean;
		onSaved?: (view: MemberPermissionsView) => void;
	} = $props();

	let catalog = $state<PermissionCatalog | null>(null);
	let denied = $state<string[]>([]);
	let savedDenied = $state<string[]>([]);
	let loading = $state(false);
	let saving = $state(false);
	let loadError = $state<string | null>(null);
	let search = $state("");
	let isOwnerMember = $state(false);

	const allKeys = $derived(catalogKeys(catalog));
	const summary = $derived(permissionSummary(catalog, denied));
	const dirty = $derived(!samePermissions(denied, savedDenied));
	const readOnly = $derived(!canEdit || isOwnerMember);

	function labelFor(key: string): string {
		const translated = i18n.t(`plan.feature.${key}`);
		// Untranslated keys fall back to the raw key rather than an empty cell.
		return translated === `plan.feature.${key}` ? key : translated;
	}

	const visibleSections = $derived(filterCatalog(catalog, search, labelFor));

	/** Reload whenever the dialog opens for a member (never on every keystroke). */
	$effect(() => {
		if (!open || !member) return;
		const userId = member.user_id;
		const ac = new AbortController();
		loading = true;
		loadError = null;
		search = "";
		void (async () => {
			try {
				const [catalogPayload, view] = await Promise.all([
					api<PermissionCatalog>("/api/team/permission-catalog", { signal: ac.signal }),
					api<MemberPermissionsView>(`/api/team/${userId}/permissions`, { signal: ac.signal })
				]);
				catalog = catalogPayload;
				denied = [...(view.denied ?? [])];
				savedDenied = [...(view.denied ?? [])];
				isOwnerMember = Boolean(view.is_owner);
			} catch (err) {
				if ((err as { name?: string })?.name === "AbortError") return;
				loadError = i18n.t("settings.permissions.loadFailed");
			} finally {
				loading = false;
			}
		})();
		return () => ac.abort();
	});

	function toggle(key: string, nextAllowed: boolean) {
		if (readOnly) return;
		denied = setPermissionAllowed(denied, key, nextAllowed, allKeys);
	}

	function allowEverything() {
		if (readOnly) return;
		denied = [];
	}

	function denyEverything() {
		if (readOnly) return;
		denied = denyAll(catalog);
	}

	async function save() {
		if (!member || readOnly || saving) return;
		saving = true;
		try {
			const view = await api<MemberPermissionsView>(`/api/team/${member.user_id}/permissions`, {
				method: "PUT",
				body: { denied }
			});
			savedDenied = [...(view.denied ?? [])];
			denied = [...(view.denied ?? [])];
			// The editor may have just restricted themselves out of a section elsewhere in
			// this tab — refetch so the sidebar and route guard agree with the server.
			await planCapabilities.refresh(undefined, true);
			onSaved?.(view);
			open = false;
		} catch (err) {
			notifyApiError(err, i18n.t("settings.permissions.saveFailed"));
		} finally {
			saving = false;
		}
	}

	/** Indent nested keys so "Products - Error tab" reads as a child of "Products". */
	function indentClass(key: string): string {
		const depth = key.split(".").length - 2;
		if (depth <= 0) return "";
		return depth === 1 ? "pl-6" : "pl-12";
	}
</script>

<Dialog
	bind:open
	title={i18n.t("settings.permissions.title", { email: member?.email ?? "" })}
	description={i18n.t("settings.permissions.description")}
	class="sm:max-w-2xl sm:min-w-0"
>
	<div class="space-y-4 py-2">
		{#if loading}
			<div class="flex justify-center py-10">
				<Spinner />
			</div>
		{:else if loadError}
			<Alert tone="error" message={loadError} />
		{:else}
			{#if isOwnerMember}
				<Alert tone="info" message={i18n.t("settings.permissions.ownerNotice")} />
			{:else if !canEdit}
				<Alert tone="info" message={i18n.t("settings.permissions.ownerOnly")} />
			{/if}

			<div class="flex flex-wrap items-center justify-between gap-3">
				<p class="text-sm text-muted-foreground" data-testid="permissions-summary">
					{i18n.t("settings.permissions.summary", {
						allowed: summary.allowed,
						total: summary.total
					})}
				</p>
				{#if !readOnly}
					<div class="flex gap-2">
						<Button variant="outline" size="sm" data-testid="permissions-allow-all" onclick={allowEverything}>
							{i18n.t("settings.permissions.allowAll")}
						</Button>
						<Button variant="outline" size="sm" data-testid="permissions-deny-all" onclick={denyEverything}>
							{i18n.t("settings.permissions.denyAll")}
						</Button>
					</div>
				{/if}
			</div>

			<Input
				type="search"
				bind:value={search}
				placeholder={i18n.t("settings.permissions.searchPlaceholder")}
				aria-label={i18n.t("settings.permissions.searchPlaceholder")}
			/>

			<div class="max-h-[24rem] space-y-5 overflow-y-auto pr-1">
				{#if visibleSections.length === 0}
					<p class="py-8 text-center text-sm text-muted-foreground">
						{i18n.t("settings.permissions.noMatches")}
					</p>
				{/if}
				{#each visibleSections as section (section.id)}
					<section class="space-y-1">
						<h3
							class="sticky top-0 bg-background py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
						>
							{sectionLabel(section.id)}
						</h3>
						{#each section.entries as entry (entry.key)}
							{@const allowed = entry.plan_allowed && !isDenied(denied, entry.key)}
							{@const locked = !entry.plan_allowed}
							<div
								class="flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted/40 {indentClass(
									entry.key
								)}"
							>
								<Checkbox
									id={`perm-${entry.key}`}
									checked={allowed}
									disabled={readOnly || locked}
									aria-label={labelFor(entry.key)}
									data-testid={`perm-${entry.key}`}
									onchange={() => toggle(entry.key, !allowed)}
								/>
								<label
									for={`perm-${entry.key}`}
									class="min-w-0 flex-1 cursor-pointer text-sm {locked
										? 'text-muted-foreground'
										: 'text-foreground'}"
								>
									{labelFor(entry.key)}
								</label>
								{#if locked}
									<Badge variant="secondary">{i18n.t("settings.permissions.planLocked")}</Badge>
								{/if}
							</div>
						{/each}
					</section>
				{/each}
			</div>
		{/if}
	</div>

	{#snippet footer()}
		<Button variant="outline" onclick={() => (open = false)}>
			{readOnly ? i18n.t("common.close") : i18n.t("common.cancel")}
		</Button>
		{#if !readOnly}
			<Button
				data-testid="permissions-save"
				disabled={saving || loading || !dirty}
				loading={saving}
				onclick={save}
			>
				{i18n.t("settings.permissions.save")}
			</Button>
		{/if}
	{/snippet}
</Dialog>