feat(frontend): UX review followups — primitives + a11y/UX fixes across 4 passes
New shared primitives: - Toaster + toast-store, ConfirmSheet, Modal, focusTrap action, pullToRefresh action, avatarPalette + initials helper, Skeleton, HeartBurst, haptics, export-status store with onClearAuth hook Critical UX/a11y: - Replaced window.confirm with branded ConfirmSheet - Focus management + Escape on every modal (PIN, Lightbox, Onboarding, ContextSheet, data-mode sheet, leave-confirm, HTML guide, host/admin ban + PIN-display modals) - Sheet backdrops are real buttons with aria-label - Silent ApiError catches now surface via global Toaster Major polish: - Dark-mode parity on HashtagChips + avatars (shared palette) - Conditional Export tab in BottomNav (badge dot when ZIP ready) - Back chevrons on /recover (history-aware) and /export - Upload composer discard confirmation when content is staged - Camera segmented Photo/Video shutter - PIN auto-submit on 4th digit, paste-flash-free (controlled input) - Welcome-back toast on /feed after PIN recovery Minor: - Skeleton states on feed; pull-to-refresh with live drag indicator - Haptics on like / capture / submit / PIN-copy / onboarding complete - Comment 500-char counter; quota "Fast voll" / "Limit erreicht" labels - Onboarding pip ≥24px tap targets; long-press hint step - overscroll-behavior lock on <html> while feed mounted - teardownExportStatus wired via onClearAuth (covers 401 + explicit logout) - ConfirmSheet per-instance titleId; Modal requires titleId or ariaLabel Tests (7 new Playwright specs): - 01-auth/pin-auto-submit, 01-auth/back-chevron - 03-feed/confirm-sheet-delete, 03-feed/toast-on-failure - 09-mobile/focus-trap, 09-mobile/sheet-escape, 09-mobile/upload-cancel-confirm FOLLOWUPS.md captures the deferred AT inert containment work with acceptance criteria + implementation sketches. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { vibrate } from '$lib/haptics';
|
||||
|
||||
interface Props {
|
||||
oncapture: (blob: Blob, type: 'photo' | 'video') => void;
|
||||
@@ -12,6 +13,7 @@
|
||||
let canvasEl: HTMLCanvasElement = $state()!;
|
||||
let stream: MediaStream | null = $state(null);
|
||||
let facingMode = $state<'environment' | 'user'>('environment');
|
||||
let mode = $state<'photo' | 'video'>('photo');
|
||||
let recording = $state(false);
|
||||
let recordingTime = $state(0);
|
||||
let error = $state<string | null>(null);
|
||||
@@ -19,6 +21,17 @@
|
||||
let recordedChunks: Blob[] = [];
|
||||
let recordingInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function handleShutter() {
|
||||
vibrate(15);
|
||||
if (mode === 'photo') {
|
||||
capturePhoto();
|
||||
} else if (recording) {
|
||||
stopRecording();
|
||||
} else {
|
||||
startRecording();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
startCamera();
|
||||
});
|
||||
@@ -172,44 +185,74 @@
|
||||
|
||||
<!-- Controls -->
|
||||
{#if !error}
|
||||
<div class="flex items-center justify-center gap-8 bg-black/80 px-4 py-6">
|
||||
<!-- Mode toggle — segmented control above the shutter. Hidden while recording. -->
|
||||
{#if !recording}
|
||||
<div class="flex justify-center bg-black/80 pt-3 pb-1">
|
||||
<div
|
||||
class="inline-flex rounded-full bg-white/10 p-0.5"
|
||||
role="tablist"
|
||||
aria-label="Aufnahmemodus"
|
||||
data-testid="camera-mode"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={mode === 'photo'}
|
||||
onclick={() => (mode = 'photo')}
|
||||
data-testid="camera-mode-photo"
|
||||
class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
|
||||
>
|
||||
Foto
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={mode === 'video'}
|
||||
onclick={() => (mode = 'video')}
|
||||
data-testid="camera-mode-video"
|
||||
class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
|
||||
>
|
||||
Video
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6" style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)">
|
||||
<!-- Close -->
|
||||
<button
|
||||
onclick={onclose}
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
|
||||
aria-label="Schliessen"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
|
||||
aria-label="Schließen"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Capture photo / record video -->
|
||||
{#if recording}
|
||||
<button
|
||||
onclick={stopRecording}
|
||||
class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-600"
|
||||
aria-label="Aufnahme stoppen"
|
||||
>
|
||||
<div class="h-6 w-6 rounded-sm bg-white"></div>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
onclick={capturePhoto}
|
||||
class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:bg-white/40"
|
||||
aria-label="Foto aufnehmen"
|
||||
>
|
||||
<!-- Shutter — single button, behaviour depends on mode + recording state. -->
|
||||
<button
|
||||
onclick={handleShutter}
|
||||
data-testid="camera-shutter"
|
||||
class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording ? 'bg-red-600' : 'bg-white/20'}"
|
||||
aria-label={mode === 'photo' ? 'Foto aufnehmen' : recording ? 'Aufnahme stoppen' : 'Video aufnehmen'}
|
||||
>
|
||||
{#if mode === 'photo'}
|
||||
<div class="h-12 w-12 rounded-full bg-white"></div>
|
||||
</button>
|
||||
{/if}
|
||||
{:else if recording}
|
||||
<div class="h-6 w-6 rounded-sm bg-white"></div>
|
||||
{:else}
|
||||
<div class="h-10 w-10 rounded-full bg-red-500"></div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Toggle camera / start recording -->
|
||||
<!-- Toggle camera (hidden while recording to discourage interruption). -->
|
||||
{#if recording}
|
||||
<div class="h-12 w-12"></div>
|
||||
{:else}
|
||||
<button
|
||||
onclick={toggleCamera}
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
|
||||
aria-label="Kamera wechseln"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@@ -218,19 +261,6 @@
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Video record button -->
|
||||
{#if !recording}
|
||||
<div class="flex justify-center bg-black/80 pb-4">
|
||||
<button
|
||||
onclick={startRecording}
|
||||
class="flex items-center gap-2 rounded-full bg-red-600/80 px-4 py-2 text-sm text-white transition hover:bg-red-600"
|
||||
>
|
||||
<div class="h-2.5 w-2.5 rounded-full bg-white"></div>
|
||||
Video aufnehmen
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user