Improve frontend UI/UX: accessibility, discoverability, and cleanup

- Add prefers-reduced-motion support (global CSS + SwipeCard spring config)
- Add dismissible map click hint overlay with localStorage persistence
- Replace generic image alt text with descriptive property info across 4 components
- Rename filter buttons to clarify intent (Show Matching Listings / Scrape New from Rightmove)
- Fix mobile FAB overlap with bottom sheet via dynamic snap-aware positioning
- Add swipe review onboarding overlay with gesture explanations and button labels
- Delete unused components: AppSidebar, ActiveQuery, SavedView
This commit is contained in:
Viktor Barzin 2026-02-22 18:47:09 +00:00
parent 268f4fd272
commit 339e2cf2ab
No known key found for this signature in database
GPG key ID: 0EB088298288D958
13 changed files with 143 additions and 354 deletions

View file

@ -1,4 +1,4 @@
import { useState, useMemo, useCallback } from 'react';
import { useState, useMemo, useCallback, useEffect } from 'react';
import { Drawer } from 'vaul';
import { MapPin, PoundSterling } from 'lucide-react';
import { SwipeableCardRow } from './SwipeableCardRow';
@ -11,6 +11,7 @@ interface MobileBottomSheetProps {
highlightedPropertyUrl?: string | null;
onActiveListingChange?: (feature: PropertyFeature | null) => void;
poiMetricSelection?: { poiId: number; travelMode: string } | null;
onSnapChange?: (snap: string | number | null) => void;
}
function formatCurrency(value: number): string {
@ -24,10 +25,16 @@ export function MobileBottomSheet({
highlightedPropertyUrl,
onActiveListingChange,
poiMetricSelection,
onSnapChange,
}: MobileBottomSheetProps) {
const [snap, setSnap] = useState<string | number | null>("148px");
const [activeCardIndex, setActiveCardIndex] = useState(0);
// Notify parent when snap changes
useEffect(() => {
onSnapChange?.(snap);
}, [snap, onSnapChange]);
const features = listingData?.features ?? [];
const stats = useMemo(() => {