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
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { page } from '$app/state';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
@@ -24,10 +26,24 @@ const currentPath = $derived(page.url.pathname);
|
||||
const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
|
||||
|
||||
let flyoutOpen = $state(false);
|
||||
let flyoutTriggerElement: HTMLButtonElement | null = null;
|
||||
|
||||
async function openFlyout(event: MouseEvent) {
|
||||
flyoutTriggerElement = event.currentTarget as HTMLButtonElement;
|
||||
flyoutOpen = true;
|
||||
await tick();
|
||||
const firstLink = document.querySelector<HTMLAnchorElement>('[role="dialog"] a');
|
||||
firstLink?.focus();
|
||||
}
|
||||
|
||||
function closeFlyout() {
|
||||
flyoutOpen = false;
|
||||
flyoutTriggerElement?.focus();
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && flyoutOpen) {
|
||||
flyoutOpen = false;
|
||||
closeFlyout();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -55,8 +71,8 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_users()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
@@ -121,8 +137,8 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_groups()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
@@ -187,8 +203,8 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_tags()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
@@ -257,8 +273,8 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_system()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors lg:hidden
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] w-full flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors lg:hidden
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
@@ -320,7 +336,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
data-flyout-backdrop
|
||||
role="none"
|
||||
class="fixed inset-0 z-40 bg-black/40"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
onclick={closeFlyout}
|
||||
></div>
|
||||
|
||||
<!-- Flyout panel -->
|
||||
@@ -329,7 +345,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
aria-modal="true"
|
||||
aria-label={m.admin_heading()}
|
||||
class="fixed top-0 left-12 z-50 flex h-full w-40 flex-col bg-brand-navy shadow-xl"
|
||||
style="transform: translateX(0); transition: transform 180ms ease-out;"
|
||||
transition:fly={{ x: -160, duration: 180 }}
|
||||
>
|
||||
<!-- Heading -->
|
||||
<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
|
||||
@@ -339,7 +355,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
{#if canManageUsers}
|
||||
<a
|
||||
href="/admin/users"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
onclick={closeFlyout}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
@@ -377,7 +393,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
{#if canManageGroups}
|
||||
<a
|
||||
href="/admin/groups"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
onclick={closeFlyout}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
@@ -415,7 +431,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
{#if canManageTags}
|
||||
<a
|
||||
href="/admin/tags"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
onclick={closeFlyout}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
@@ -454,7 +470,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
{#if canRunMaintenance}
|
||||
<a
|
||||
href="/admin/system"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
onclick={closeFlyout}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
|
||||
Reference in New Issue
Block a user