fix(admin): address PR review feedback from all personas

Blockers resolved:
- localStorage key collision: UsersListPanel/GroupsListPanel/TagsListPanel
  now each use their own key (admin_*_list_collapsed)
- $effect autocollapse replaced with $derived(autocollapse || manualCollapse)
  across all three list panels (Felix — Svelte 5 rule violation)
- groups/new: add READ_ALL and ANNOTATE_ALL to available standard permissions
- Mobile back-to-list links added to all five detail panel headers (md:hidden)
  so users landing directly on a detail URL on mobile can navigate back
- onDestroy(() => stopPolling()) added to system/+page.svelte (Tobias)

High priority resolved:
- Permission labels in groups/[id] and groups/new now use Paraglide i18n keys
  (admin_perm_read_all, admin_perm_annotate_all, etc.) across de/en/es
- $derived used for permission arrays (reactive i18n) — Felix Svelte 5 rule
- UserGroup type in +layout.server.ts now uses generated API type (Markus/Felix)
- discardTarget annotation changed to variable-level type annotation

Accessibility (Leonie):
- EntityNav tablet icon strip buttons: min-h-[44px] for WCAG 2.5.8 compliance
- Flyout focus management: openFlyout() focuses first link, closeFlyout()
  returns focus to the trigger button that opened it
- Flyout animation replaced: broken inline style -> transition:fly={{ x: -160 }}

Tests (Sara/Felix):
- localStorage key assertion tests added per panel
- localStorage.removeItem calls updated to use the panel-specific keys
- page.server.spec.ts added for groups/[id] and tags/[id] delete actions
- Polling lifecycle tests added to system/page.svelte.spec.ts

Note: Paraglide types for new admin_perm_* keys regenerate automatically on
next npm run dev (Vite plugin). No manual compilation step needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-30 11:23:27 +02:00
parent 09d8fb5f95
commit 393cb52178
21 changed files with 434 additions and 71 deletions

View File

@@ -0,0 +1,87 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { actions } from './+page.server';
const mockApi = {
PATCH: vi.fn(),
DELETE: vi.fn()
};
vi.mock('$lib/api.server', () => ({
createApiClient: () => mockApi
}));
beforeEach(() => vi.clearAllMocks());
// ─── update action ─────────────────────────────────────────────────────────────
describe('groups/[id] — update action', () => {
it('returns success: true when API responds ok', async () => {
mockApi.PATCH.mockResolvedValue({ response: { ok: true }, data: {} });
const formData = new FormData();
formData.set('name', 'Editors');
formData.append('permissions', 'WRITE_ALL');
const result = await actions.update({
params: { id: 'g1' },
request: { formData: async () => formData },
fetch
} as never);
expect(result).toEqual({ success: true });
});
it('returns fail with error message when API responds not ok', async () => {
mockApi.PATCH.mockResolvedValue({
response: { ok: false, status: 409 },
error: { code: 'GROUP_NOT_FOUND' }
});
const formData = new FormData();
formData.set('name', 'Editors');
const result = await actions.update({
params: { id: 'g1' },
request: { formData: async () => formData },
fetch
} as never);
expect((result as { status: number }).status).toBe(409);
});
});
// ─── delete action ─────────────────────────────────────────────────────────────
describe('groups/[id] — delete action', () => {
it('redirects to /admin/groups on successful delete', async () => {
mockApi.DELETE.mockResolvedValue({ response: { ok: true } });
let redirectUrl: string | null = null;
try {
await actions.delete({
params: { id: 'g1' },
fetch
} as never);
} catch (e: unknown) {
// SvelteKit redirect throws a Response-like object
const r = e as { location?: string; status?: number };
redirectUrl = r.location ?? null;
}
expect(redirectUrl).toBe('/admin/groups');
});
it('returns fail with error message when delete API responds not ok', async () => {
mockApi.DELETE.mockResolvedValue({
response: { ok: false, status: 403 },
error: { code: 'FORBIDDEN' }
});
const result = await actions.delete({
params: { id: 'g1' },
fetch
} as never);
expect((result as { status: number }).status).toBe(403);
});
});