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:
@@ -25,17 +25,15 @@ let {
|
||||
} = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
let isCollapsed = $state(
|
||||
typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
|
||||
let manualCollapse = $state(
|
||||
typeof localStorage !== 'undefined' &&
|
||||
localStorage.getItem('admin_users_list_collapsed') === 'true'
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (autocollapse) isCollapsed = true;
|
||||
});
|
||||
const isCollapsed = $derived(autocollapse || manualCollapse);
|
||||
|
||||
$effect(() => {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('admin_list_collapsed', String(isCollapsed));
|
||||
localStorage.setItem('admin_users_list_collapsed', String(manualCollapse));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -53,7 +51,7 @@ const filtered = $derived(
|
||||
{#if isCollapsed}
|
||||
<!-- Collapsed handle: 32px -->
|
||||
<button
|
||||
onclick={() => (isCollapsed = false)}
|
||||
onclick={() => (manualCollapse = false)}
|
||||
aria-label={m.admin_btn_expand_list()}
|
||||
class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
|
||||
>
|
||||
@@ -93,7 +91,7 @@ const filtered = $derived(
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
onclick={() => (isCollapsed = true)}
|
||||
onclick={() => (manualCollapse = true)}
|
||||
aria-label={m.admin_btn_collapse_list()}
|
||||
class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
|
||||
>
|
||||
|
||||
@@ -12,7 +12,7 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
|
||||
|
||||
let isDirty = $state(false);
|
||||
let showUnsavedWarning = $state(false);
|
||||
let discardTarget = $state<string | null>(null);
|
||||
let discardTarget: string | null = $state(null);
|
||||
|
||||
beforeNavigate(({ cancel, to }) => {
|
||||
if (isDirty) {
|
||||
@@ -33,6 +33,21 @@ $effect(() => {
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Detail panel header -->
|
||||
<div class="flex items-center border-b border-line px-5 py-3">
|
||||
<a
|
||||
href="/admin/users"
|
||||
class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</a>
|
||||
<h2 class="flex-1 font-sans text-sm font-bold text-ink">
|
||||
{m.admin_user_edit_heading({ username: data.editUser.username })}
|
||||
</h2>
|
||||
|
||||
@@ -97,7 +97,7 @@ describe('UsersListPanel — empty state', () => {
|
||||
// ─── Collapse toggle ──────────────────────────────────────────────────────────
|
||||
|
||||
describe('UsersListPanel — collapse toggle', () => {
|
||||
beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
|
||||
beforeEach(() => localStorage.removeItem('admin_users_list_collapsed'));
|
||||
|
||||
it('renders a collapse button with aria-label', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
@@ -129,4 +129,12 @@ describe('UsersListPanel — collapse toggle', () => {
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('persists collapse state using the users-specific localStorage key', async () => {
|
||||
const setSpy = vi.spyOn(Storage.prototype, 'setItem');
|
||||
render(UsersListPanel, { users });
|
||||
document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
|
||||
expect(setSpy).toHaveBeenCalledWith('admin_users_list_collapsed', 'true');
|
||||
setSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@ let { data, form } = $props();
|
||||
|
||||
let isDirty = $state(false);
|
||||
let showUnsavedWarning = $state(false);
|
||||
let discardTarget = $state<string | null>(null);
|
||||
let discardTarget: string | null = $state(null);
|
||||
|
||||
beforeNavigate(({ cancel, to }) => {
|
||||
if (isDirty) {
|
||||
@@ -24,6 +24,21 @@ beforeNavigate(({ cancel, to }) => {
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Detail panel header -->
|
||||
<div class="flex items-center border-b border-line px-5 py-3">
|
||||
<a
|
||||
href="/admin/users"
|
||||
class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</a>
|
||||
<h2 class="flex-1 font-sans text-sm font-bold text-ink">{m.admin_user_new_heading()}</h2>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user