feat: permission-aware layout (issue #37)

[smartlabsAT]

Summary

Fixes Issue #37 — adds permission-aware filtering across the entire Super Layout Table pipeline.

Closes #37.

Changes

• New usePermissions composable + sanitizeFilter utility (single source of truth)
• Translation language columns hidden when user can't read the language
• Inline-edit popover gated on canUpdate
• Filter sanitization with user notification
• Bulk-action duplicate button hidden when no create permission
• Display bug [object Object] fixed
• 403 errors surface as notifications

Test plan

• Unit tests: usePermissions, sanitizeFilter, resolveTranslationValue (120/120 passing)
• Manual: bookmark 137 as issue37@test.com (limited user)
• Manual: bookmark 137 as admin
• Quality checks: pnpm run quality

[github-actions]

Quality Check Results

TypeScript Type Check

✅ Passed - No type errors found

ESLint

✅ Passed - No linting errors

Prettier Format Check

✅ Passed - Code is properly formatted

Build

✅ Passed - Extension builds successfully

---

Updated: 2026-05-11T12:06:22.227Z

[smartlabsAT]

Code review

Found 1 issue:

1. Primary key field can be silently dropped after the explicit "always include" guard. The PK is added to adjustedFields per the comment // CRITICAL: Always include the primary key field for navigation and identification, but permissions.sanitizeFields runs immediately after and removes any field where canRead(collection, field) returns false — including the PK if the user's read-permission fields[] whitelist does not contain it. This breaks :item-key="getPrimaryKeyFieldName()", editItem navigation (item[pkField]), and handleManualSort for any user whose permission entry is { access: 'partial', fields: [...] } without id. Fix by re-injecting the PK after sanitisation or exempting it inside sanitizeFields.

directus-super-table/src/super-table.vue

Lines 555 to 577 in 37deb8f

	// CRITICAL: Always include the primary key field for navigation and identification
	const pkField = getPrimaryKeyFieldName();
	if (!adjustedFields.includes(pkField)) {
	adjustedFields.unshift(pkField); // Add at the beginning
	}
	// Ensure language code field is included for translations
	const languageFieldPath = getTranslationLanguageFieldPath(translationConfig.value);
	if (hasTranslationFields.value && !adjustedFields.includes(languageFieldPath)) {
	adjustedFields.push(languageFieldPath);
	}
	// Permission gate: drop fields/language-suffixed entries the user cannot read
	const translationsCollection = relationsStore.getRelationsForField(
	props.collection,
	'translations'
	)?.[0]?.collection;
	return permissions.sanitizeFields(props.collection, adjustedFields, {
	translationsCollection,
	accessibleLanguages: effectiveAccessibleLanguages.value,
	});
	});

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}