marcel/familienarchiv
1
0
Fork 0
Code Issues 107 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

fix(notification-dropdown): handle error result type, add role=alert, fix update ordering

Browse Source 
- Add role="alert" to error banner so screen-reader users hear failures
- Handle result.type === 'error' (network failure) alongside 'failure' in both enhance callbacks
- Clear errorMessage at the start of each submit so stale errors don't persist on retry
- On dismiss success: skip update() entirely since goto() navigates away from the page
- On dismiss failure: await update() then set error message
- On mark-all success: skip update() (optimistic state already applied)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-20 07:05:50 +02:00
parent 7fe8842b57
commit 6049dcadd3
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/notification/NotificationDropdown.svelte
View File

@@ -39,12 +39,13 @@ function handleViewAll() {
action="/aktivitaeten?/mark-all-read"
method="POST"
use:enhance={() => {
errorMessage = null;
optimisticMarkAllRead();
return async ({ result, update }) => {
if (result.type === 'failure') {
errorMessage = (result.data as { error?: string } | undefined)?.error ?? m.notification_error_generic();
if (result.type === 'failure' || result.type === 'error') {
errorMessage = (result as { data?: { error?: string } }).data?.error ?? m.notification_error_generic();
await update({ reset: false, invalidateAll: false });
}
await update({ reset: false, invalidateAll: false });
};
}}
>
@@ -60,7 +61,7 @@ function handleViewAll() {
<!-- Error banner (shown when a dismiss or mark-all action fails) -->
{#if errorMessage}
<p class="px-4 py-2 text-sm text-red-600">{errorMessage}</p>
<p role="alert" class="px-4 py-2 text-sm text-red-600">{errorMessage}</p>
{/if}
<!-- Notification list -->
@@ -93,11 +94,14 @@ function handleViewAll() {
method="POST"
class="contents"
use:enhance={() => {
errorMessage = null;
optimisticMarkRead(notification.id);
return async ({ result, update }) => {
if (result.type === 'failure') {
errorMessage = (result.data as { error?: string } | undefined)?.error ?? m.notification_error_generic();
if (result.type === 'failure' || result.type === 'error') {
errorMessage = (result as { data?: { error?: string } }).data?.error ?? m.notification_error_generic();
await update({ reset: false, invalidateAll: false });
} else {
// Navigate away — no need to update the store since we're leaving the page
onClose();
goto(
buildCommentHref(
@@ -107,7 +111,6 @@ function handleViewAll() {
)
);
}
await update({ reset: false, invalidateAll: false });
};
}}
>