feat: Sprachnotizen in Synchronisierung, Warteschlange und Abmelden (T7 L5 Task 18)
Wartende Sprachnotizen werden nach Einträgen und Fotos hochgeladen, je Notiz ein fester Idempotency-Key; endgültige 4xx markieren die Notiz mit festem deutschem Text, 401/408/429/5xx/Netz warten auf den nächsten Lauf, „wird bearbeitet“ wird übersprungen. Warteschlangen-Sheet mit Abschnitt „Sprachnotizen“ (Verwerfen je Notiz nur für den Besitzer, alle verwerfen mit Rückfrage, Hinweis bei zu vielen offenen Notizen), Offline-Band zählt nur wartende Notizen, Abmelden fragt bei wartenden Notizen nach. Zählen liest keine Audiodaten. Gates: Frontend lint, typecheck, 2886 Tests. Refs #27 Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed
1 parent
0c7147f626
commit
e614ded967
18 files changed
+1201
-30
No files matched your search
@@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import type { ComponentProps, ReactNode } from "react";
|
||||
import { AlertTriangle, Camera, Clock, RotateCw } from "lucide-react";
|
||||
import { useRef, type ComponentProps, type MouseEvent, type ReactNode } from "react";
|
||||
import Link from "next/link";
|
||||
import { AlertTriangle, Camera, Clock, Mic, RotateCw } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { NavSheet } from "@/components/nav/nav-sheet";
|
||||
import { ConfirmDialog } from "@/components/confirm-dialog";
|
||||
import { PhotoThumbnail } from "@/components/photos/photo-capture-field";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
discardQueueItem,
|
||||
listQueue,
|
||||
@@ -21,9 +22,12 @@ import {
|
||||
foreignEntriesWaiting,
|
||||
photosAttached,
|
||||
queueRejectionText,
|
||||
VOICE_TOO_MANY_OPEN_HINT,
|
||||
voiceRejectionText,
|
||||
} from "@/lib/offline/queue-texts";
|
||||
import { syncPendingEntries } from "@/lib/offline/sync";
|
||||
import { OFFLINE_QUEUE_QUERY_KEY } from "@/lib/offline/use-capture-mutation";
|
||||
import { discardAllPendingVoice, discardPendingVoice } from "@/lib/voice/pending-voice";
|
||||
import { discardReadyPhoto, listPendingPhotos, resetPhotoError } from "@/lib/photos/store";
|
||||
|
||||
interface PendingQueueSheetProps {
|
||||
@@ -44,6 +48,30 @@ interface Named {
|
||||
}
|
||||
|
||||
const PHOTO_LABEL = "Foto";
|
||||
const VOICE_STORE = "pending-voice";
|
||||
|
||||
/** 75 seconds as "1:15". */
|
||||
function durationLabel(totalSec: number): string {
|
||||
const seconds = Math.round(totalSec);
|
||||
return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
/** True for a plain left click; ctrl, meta, shift, alt and middle click open a link elsewhere. */
|
||||
function isPlainLeftClick(event: MouseEvent): boolean {
|
||||
return (
|
||||
event.button === 0 &&
|
||||
!event.defaultPrevented &&
|
||||
!event.metaKey &&
|
||||
!event.ctrlKey &&
|
||||
!event.shiftKey &&
|
||||
!event.altKey
|
||||
);
|
||||
}
|
||||
|
||||
/** The recording page, for the colony of a rejected note. */
|
||||
function recordAgainHref(item: QueueItem): string {
|
||||
return `/voice/new?${new URLSearchParams({ colonyId: item.voice?.colonyId ?? "" }).toString()}`;
|
||||
}
|
||||
|
||||
function queuedAtLabel(queuedAt: string): string {
|
||||
return new Date(queuedAt).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
|
||||
@@ -81,14 +109,19 @@ function discardDescription(item: QueueItem): string {
|
||||
function QueueStatus({
|
||||
lastError,
|
||||
changesHive = false,
|
||||
isVoice = false,
|
||||
}: {
|
||||
lastError?: QueueError;
|
||||
changesHive?: boolean;
|
||||
isVoice?: boolean;
|
||||
}) {
|
||||
return lastError ? (
|
||||
<p className="flex items-start gap-2 text-sm text-destructive">
|
||||
<AlertTriangle className="mt-0.5 size-4 shrink-0" aria-hidden />
|
||||
<span>Abgelehnt: {queueRejectionText(lastError, changesHive)}</span>
|
||||
<span>
|
||||
Abgelehnt:{" "}
|
||||
{isVoice ? voiceRejectionText(lastError) : queueRejectionText(lastError, changesHive)}
|
||||
</span>
|
||||
</p>
|
||||
) : (
|
||||
<p className="flex items-start gap-2 text-sm text-muted-foreground">
|
||||
@@ -164,6 +197,29 @@ export function PendingQueueSheet({
|
||||
onError: () => toast.error("Eintrag konnte nicht verworfen werden."),
|
||||
});
|
||||
|
||||
const voiceHeadingRef = useRef<HTMLHeadingElement>(null);
|
||||
const discardVoice = useMutation({
|
||||
mutationFn: (noteId: string) => discardPendingVoice(noteId, userId),
|
||||
networkMode: "always",
|
||||
onSuccess: () => {
|
||||
// The discard button is gone: keep the focus inside the list.
|
||||
voiceHeadingRef.current?.focus();
|
||||
void queryClient.invalidateQueries({ queryKey: OFFLINE_QUEUE_QUERY_KEY });
|
||||
toast.success("Sprachnotiz verworfen");
|
||||
},
|
||||
onError: () => toast.error("Sprachnotiz konnte nicht verworfen werden."),
|
||||
});
|
||||
|
||||
const discardAllVoice = useMutation({
|
||||
mutationFn: () => discardAllPendingVoice(userId),
|
||||
networkMode: "always",
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: OFFLINE_QUEUE_QUERY_KEY });
|
||||
toast.success("Sprachnotizen verworfen");
|
||||
},
|
||||
onError: () => toast.error("Sprachnotizen konnten nicht verworfen werden."),
|
||||
});
|
||||
|
||||
const discardPhoto = useMutation({
|
||||
mutationFn: (photoId: string) => discardReadyPhoto(photoId),
|
||||
networkMode: "always",
|
||||
@@ -233,7 +289,10 @@ export function PendingQueueSheet({
|
||||
onError: () => toast.error("Eintrag konnte nicht erneut gesendet werden."),
|
||||
});
|
||||
|
||||
const names = entryNames(items);
|
||||
const records = items.filter((item) => item.store !== VOICE_STORE);
|
||||
const voiceNotes = items.filter((item) => item.store === VOICE_STORE);
|
||||
const names = entryNames(records);
|
||||
const voiceNames = entryNames(voiceNotes);
|
||||
const photoNames = entryNames(
|
||||
photos.map((photo) => ({ label: PHOTO_LABEL, queuedAt: photo.createdAt })),
|
||||
);
|
||||
@@ -251,7 +310,7 @@ export function PendingQueueSheet({
|
||||
<p className="text-sm text-muted-foreground">Von dir wartet nichts mehr.</p>
|
||||
) : null}
|
||||
<ul className="flex flex-col gap-2">
|
||||
{items.map((item, index) => (
|
||||
{records.map((item, index) => (
|
||||
<li
|
||||
key={`${item.store}-${item.id}`}
|
||||
className="flex flex-col gap-2 rounded-xl border border-border/60 p-3"
|
||||
@@ -357,6 +416,87 @@ export function PendingQueueSheet({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{voiceNotes.length > 0 ? (
|
||||
<section aria-labelledby="queue-voice-heading" className="flex flex-col gap-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h3
|
||||
id="queue-voice-heading"
|
||||
ref={voiceHeadingRef}
|
||||
tabIndex={-1}
|
||||
className="font-medium outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
>
|
||||
Sprachnotizen
|
||||
</h3>
|
||||
{voiceNotes.length > 1 ? (
|
||||
<ConfirmDialog
|
||||
triggerLabel="Alle Sprachnotizen verwerfen"
|
||||
triggerVariant="ghost"
|
||||
triggerSize="touch"
|
||||
title="Alle Sprachnotizen verwerfen?"
|
||||
description="Die Sprachnotizen werden von diesem Gerät gelöscht und nicht mehr gesendet."
|
||||
confirmLabel="Alle verwerfen"
|
||||
onConfirm={() => discardAllVoice.mutate()}
|
||||
isPending={discardAllVoice.isPending}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
{voiceNotes.some((item) => item.voice?.blockedBy === "TOO_MANY_OPEN") ? (
|
||||
<p role="status" className="text-sm text-muted-foreground">
|
||||
{VOICE_TOO_MANY_OPEN_HINT}
|
||||
</p>
|
||||
) : null}
|
||||
<ul className="flex flex-col gap-2">
|
||||
{voiceNotes.map((item, index) => (
|
||||
<li
|
||||
key={`voice-${item.id}`}
|
||||
className="flex flex-col gap-2 rounded-xl border border-border/60 p-3"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<Mic className="mt-0.5 size-5 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium">{item.label}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Aufgenommen am {queuedAtLabel(item.queuedAt)}
|
||||
{item.voice ? ` · Dauer ${durationLabel(item.voice.durationSec)}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<QueueStatus lastError={item.lastError} isVoice />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.lastError ? (
|
||||
<Link
|
||||
href={recordAgainHref(item)}
|
||||
className={buttonVariants({ variant: "outline", size: "touch" })}
|
||||
aria-label={`Erneut aufnehmen: ${voiceNames[index]}`}
|
||||
onClick={(event) => {
|
||||
// Only a plain click stays in this tab; the refused audio is of no
|
||||
// use any more and the new recording replaces it.
|
||||
if (!isPlainLeftClick(event)) return;
|
||||
discardVoice.mutate(String(item.id));
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<RotateCw aria-hidden />
|
||||
Erneut aufnehmen
|
||||
</Link>
|
||||
) : null}
|
||||
<ConfirmDialog
|
||||
triggerLabel="Verwerfen"
|
||||
triggerAriaLabel={`Verwerfen: ${voiceNames[index]}`}
|
||||
triggerVariant="ghost"
|
||||
triggerSize="touch"
|
||||
title={`${voiceNames[index]} verwerfen?`}
|
||||
description="Die Sprachnotiz wird von diesem Gerät gelöscht und nicht mehr gesendet."
|
||||
confirmLabel="Verwerfen"
|
||||
onConfirm={() => discardVoice.mutate(String(item.id))}
|
||||
isPending={discardVoice.isPending}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
) : null}
|
||||
{foreignCount > 0 ? (
|
||||
<p className="text-sm text-muted-foreground">{foreignEntriesWaiting(foreignCount)}</p>
|
||||
) : null}
|
||||
|
||||
Reference in new issue
Block a user