Add lightbox retries and queue removal

resources/js/guest/i18n/messages.ts

@@ -549,6 +549,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       actions: {
         retryAll: 'Alle erneut versuchen',
         clearFinished: 'Erledigte löschen',
+        removeFailed: 'Entfernen',
       },
       status: {
         uploaded: 'Hochgeladen',
@@ -721,6 +722,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       },
       review: {
         retake: 'Nochmal aufnehmen',
+        retakeGallery: 'Ein anderes Foto auswählen',
         keep: 'Foto verwenden',
         readyAnnouncement: 'Foto aufgenommen. Bitte Vorschau prüfen.',
       },
@@ -1462,6 +1464,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       actions: {
         retryAll: 'Retry all',
         clearFinished: 'Clear finished',
+        removeFailed: 'Remove',
       },
       status: {
         uploaded: 'Uploaded',
@@ -1634,6 +1637,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       },
       review: {
         retake: 'Retake photo',
+        retakeGallery: 'Choose another photo',
         keep: 'Use this photo',
         readyAnnouncement: 'Photo captured. Please review the preview.',
       },

resources/js/guest/queue/hooks.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { enqueue, list, processQueue, clearDone, type QueueItem } from './queue';
+import { enqueue, list, processQueue, clearDone, remove, type QueueItem } from './queue';
 
 export function useUploadQueue() {
   const [items, setItems] = React.useState<QueueItem[]>([]);
@@ -28,6 +28,14 @@ export function useUploadQueue() {
     await refresh();
   }, [refresh]);
 
+  const removeItem = React.useCallback(
+    async (id: number) => {
+      await remove(id);
+      await refresh();
+    },
+    [refresh]
+  );
+
   React.useEffect(() => {
     refresh();
     const online = () => processQueue().then(refresh);
@@ -35,6 +43,5 @@ export function useUploadQueue() {
     return () => window.removeEventListener('online', online);
   }, [refresh]);
 
-  return { items, loading, refresh, add, retryAll, clearFinished } as const;
+  return { items, loading, refresh, add, retryAll, clearFinished, remove: removeItem } as const;
 }
-

resources/js/guest/queue/queue.ts

@@ -57,6 +57,12 @@ export async function clearDone() {
   });
 }
 
+export async function remove(id: number) {
+  await withStore('readwrite', (store) => {
+    store.delete(id);
+  });
+}
+
 export async function processQueue() {
   if (processing) return; processing = true;
   try {