Conversation
…rid views - Restore map view functionality for dive-trips page with TripMap component - Add tripNameGenerator utility for consistent trip naming - Implement sorting & view controls (list, grid, map) with URL parameter support - Enhance list and grid views with conditional data display - Add diving center name linking to detail pages - Display dive site ratings next to names - Remove unnecessary buttons (contact center, view details) - Fix map viewport state management and component integration - Restore status toggles and clustering functionality for map view This commit consolidates all core dive trips functionality including map restoration, view controls, and enhanced display features for a complete user experience.
…mobile optimization - Implement Phase 1: Search consolidation and dropdown removal * Unify search inputs into single intelligent search field * Remove redundant dive site dropdown filter * Add smart search routing for countries/regions vs. dive site names * Implement routeSearchTerms helper for optimal backend API usage - Implement Phase 2: Collapsible advanced filters * Add progressive disclosure for complex filter options * Collapse advanced filters by default on desktop * Maintain mobile-responsive filter behavior * Reduce initial visual complexity while preserving functionality - Implement Phase 3: Quick filter chips and smart suggestions * Add context-aware filter suggestions based on search input * Implement location-based and difficulty-based suggestions * Provide intelligent search term routing * Simplify interface while maintaining filter power - Implement Phase 4: Progressive disclosure and mobile optimization * Add mobile detection and responsive behavior * Implement mobile filter toggle with visual feedback * Add floating action button for quick filter access * Enhance touch-friendly interactions and mobile layouts * Add mobile-specific view mode buttons and gesture hints This commit consolidates all UX improvement phases into a comprehensive enhancement that transforms the page from filter-heavy to content-first.
- Modify geolocation behavior to only request permission for authenticated users - Set default location (Athens, Greece) for anonymous users without geolocation prompts - Update UI to show 'Login required for location access' for unauthenticated users - Conditionally render 'Use Current Location' button based on authentication status - Update help text to dynamically reflect authentication requirements - Maintain all existing functionality while improving user privacy and experience This fix ensures that geolocation permission is only requested when necessary, providing a better user experience and respecting user privacy preferences.
kargig
force-pushed
the
feature/improve-dive-trips-list-grid-views
branch
from
96fef97 to
d22ff71
Compare
8 tasks
kargig
added a commit
that referenced
this pull request
Dec 7, 2025
Implement comprehensive cache optimizations to reduce Open-Meteo API calls and improve wind overlay performance: Backend optimizations: - Increase cache size from 100 to 500 entries to accommodate 24-hour caching for multiple grid points - Always use hourly forecast API to cache all 24 hours from single API response (Optimization #10) - Implement smart cache lookup checking representative hours (00:00, 12:00, requested hour) to quickly find cached data - Group grid points by cache key (0.1° rounding) before API calls, ensuring only one call per cache cell (Optimization #3) - Add skip_validation parameter to avoid redundant datetime validation when called from grid function - Add detailed cache logging with [CACHE HIT], [CACHE MISS], [API CALL] prefixes for better debugging - Detect and warn about cache inconsistencies when date data exists but specific hour is missing Frontend optimizations: - Add prefetchWindHours function that prefetches next 2 days (one request per day at noon) when play button is pressed - Integrate prefetch with WindDateTimePicker via onPrefetch prop to cache upcoming hours before slider advances - Enhance useViewportData with zoom-based detail levels (minimal < 4, basic 8-9, full >= 10) for progressive loading - Expand bounds for zoom >= 11 to ensure nearby dive sites remain visible when panning - Increase debounce time from 1s to 1.5s for smoother UX These optimizations significantly reduce API calls by leveraging 24-hour bulk caching and intelligent cache lookup strategies.
kargig
added a commit
that referenced
this pull request
Dec 7, 2025
* Add wind overlay backend and shore direction detection
Implement backend infrastructure for wind overlay feature on dive
sites map. Adds automatic shore direction detection from OpenStreetMap
coastline data and wind-based dive site suitability recommendations.
Backend Services:
- Open-Meteo service for fetching wind data (current and forecast)
- OSM coastline service for automatic shore direction detection
- Wind recommendation service with 6.2 m/s safe threshold
- In-memory caching with TTL for wind data
Database Changes:
- Migration 0042: Add shore_direction fields to dive_sites table
- Fields: shore_direction, shore_direction_confidence,
shore_direction_method, shore_direction_distance_m
API Endpoints:
- GET /api/v1/weather/wind - Fetch wind data for coordinates/bounds
- GET /api/v1/dive-sites/wind-recommendations - Get suitability
recommendations with datetime_str support (max +2 days ahead)
- POST /api/v1/dive-sites/{id}/detect-shore-direction - Trigger
automatic detection
Features:
- Auto-detect shore direction on dive site create/update
- Wind speed threshold: 6.2 m/s (safe for diving)
- Gust handling: Upgrades severity if gusts > 25 knots
- Validation: shore_direction cannot be set to None
- Forecast support: Recommendations for current time or future dates
Fixes:
- Fixed response serialization for shore_direction fields
- Fixed Open-Meteo unit issue (explicitly request m/s)
- Updated DiveSiteUpdate schema with all shore_direction fields
Phase: Backend foundation complete (Phases 1-2)
* Add wind overlay to dive sites map with toggle control
Implement wind overlay feature displaying real-time wind speed and
direction on dive sites map. Wind arrows show where wind is going
(opposite of meteorological wind direction) with color-coded speed
indicators.
Key features:
- WindOverlay component renders SVG arrows on Leaflet map
- WindOverlayToggle button enables/disables overlay (zoom 13+)
- Integration into IndependentMapView and DiveSitesMap
- Arrow direction calculation fixed to point correctly
- Toggle functionality fixed (arrows disappear when disabled)
- Improved marker cleanup on component unmount
- Tooltip updated to show zoom requirement
Technical improvements:
- Arrow size increased (40px base, max 80px) for visibility
- White outline/shadow added for better contrast
- React Query caching (5min stale, 15min cache)
- Debounced map movements (1s delay)
- Coordinate validation before marker creation
- Auto-disable overlay when zoom < 13
Files modified:
- frontend/src/components/WindOverlay.js (new)
- frontend/src/components/WindOverlayToggle.js (new)
- frontend/src/components/LeafletMapView.js
- frontend/src/components/DiveSitesMap.js
- frontend/src/pages/IndependentMapView.js
- frontend/src/pages/DiveSiteMap.js
- docs/development/work/.../task.md (updated)
* Update button colors to colorblind-safe palette
Replace all Tailwind button color classes with Okabe-Ito
colorblind-safe colors from the approved palette. This ensures
accessibility for users with color vision deficiencies while
maintaining visual consistency across the application.
Button color mapping:
- Primary actions (Save/Submit): Tailwind blue-600 -> Okabe-Ito Blue (#0072B2)
- Add/Auxiliary actions: Tailwind green-600 -> Okabe-Ito Bluish Green (#009E73)
- Cancel actions: Tailwind gray-600 -> Dark Gray (#374151)
All buttons now use inline styles with UI_COLORS constants from
colorPalette.js, ensuring consistency and accessibility compliance.
Files updated:
- EditDiveSite.js: All form buttons (Save, Add, Cancel, Re-detect)
- EditDive.js: Media and form action buttons
- EditDivingCenter.js: Organization and gear rental buttons
- DivingCenterForm.js: Suggest and form submission buttons
- CreateDiveSite.js: Suggest and create buttons
- DiveSitesMap.js: Wind suitability indicators and popups
- LeafletMapView.js: Wind suitability indicators and popups
Documentation:
- Added button-color-coding-standards.md with comprehensive
guidelines for button color usage, implementation examples,
and colorblind accessibility notes
- Updated wind overlay task.md with recent changes
This change improves accessibility for approximately 8% of men
and 0.5% of women who experience color vision deficiencies,
particularly red-green color blindness.
* Improve wind overlay with jitter and fix viewport issues
Add jitter factor to multiply wind arrows (5x default) for better
visual density. Implement retry logic to ensure jittered points
stay within bounds. Fix wind arrows appearing at viewport edges
by adding margin to bounds and filtering points strictly within
viewport.
Rename enabled props to isWindOverlayEnabled/isOverlayEnabled for
better clarity. Fix React Query enabled prop to always be boolean
using !! operator to prevent runtime errors.
Update backend grid generation to create points INSIDE bounds with
margin. Add jitter_factor parameter to weather API endpoint (default
5, max 10). Implement adaptive grid spacing for zoom levels 13-18.
Update task.md documentation with all recent fixes and improvements.
* Add comprehensive backend tests for wind overlay
Add 71 new tests across 4 test files covering Open-Meteo service,
Weather API router, OSM Coastline service, and Meteo API response
parsing.
Test coverage includes:
- Grid point generation and jitter factor functionality
- Wind data fetching (current/forecast) with caching
- API error handling and edge cases
- Overpass API querying with retry/fallback logic
- Shore direction detection with confidence levels
- Response structure parsing and validation
- Endpoint parameter validation and HTTP behavior
Fixed cache interference issues in Docker test environment using
monkeypatch to ensure test isolation.
All 969 tests passing in Docker CI-like environment.
* Fix datetime validation and display format
Fixed backend datetime validation to round max_future to next hour,
allowing users to select any hour within the 2-day window without
hitting edge cases at the 2-day limit.
Updated frontend datetime display to show full time format (22:00)
instead of just hours (22) for better clarity in wind data info box.
Updated task.md documentation with recent datetime-related fixes.
Files modified:
- backend/app/routers/weather.py: Rounded max_future validation
- backend/app/routers/dive_sites.py: Rounded max_future validation
- frontend/src/components/LeafletMapView.js: Added minute display
- frontend/src/components/DiveSitesMap.js: Added minute display
- docs/development/work/.../task.md: Updated with recent fixes
* Refactor tests and add wind suitability filter
Refactor test suite for better maintainability and add wind
suitability filtering to dive sites endpoint.
Test Refactoring:
- Split large test_dive_sites.py (1625 lines) into focused test
files for better organization and maintainability
- Created test_dive_sites_crud.py: 21 CRUD operation tests
- Created test_dive_sites_diving_centers.py: 13 diving center
association tests (MySQL-only, skipped on SQLite)
- Created test_dive_sites_wind_suitability.py: 14 wind suitability
filter tests (MySQL-only, skipped on SQLite)
- Removed 414 lines of duplicate tests from test_dive_sites.py
Test Improvements:
- Added freezegun==1.5.5 to requirements.txt for simplified
datetime mocking
- Refactored datetime mocking in test_open_meteo_service.py and
test_open_meteo_api_responses.py to use @freeze_time() decorator
- Reduced test code complexity by ~13 lines per test (from 15
lines of manual datetime patching to 1 decorator)
- Fixed test cache isolation: Added monkeypatch cache clearing
to test_fetch_wind_data_single_point_caching
Wind Suitability Filter:
- Added wind_suitability query parameter to GET /api/v1/dive-sites/
endpoint (values: good, caution, difficult, avoid, unknown)
- Added optional datetime_str parameter for forecast filtering
(defaults to current time, max +2 days ahead)
- Implemented filtering logic: Fetches wind data for center point
of matching dive sites, calculates suitability for each site,
filters results based on wind_suitability parameter
- Added validation for wind_suitability parameter
- Handles edge cases: Sites without shore_direction match
'unknown' filter, graceful error handling for wind data fetch
failures
Documentation:
- Updated task.md with freezegun refactoring details
- Documented test file splitting and wind suitability filter
implementation
All tests passing. Test suite is now more maintainable with
focused test files and simplified datetime mocking.
Files changed:
- backend/requirements.txt: Added freezegun==1.5.5
- backend/tests/test_dive_sites.py: Removed 414 lines (moved to
separate files)
- backend/tests/test_dive_sites_crud.py: New file (292 lines)
- backend/tests/test_dive_sites_diving_centers.py: New file
(155 lines)
- backend/tests/test_dive_sites_wind_suitability.py: New file
(432 lines)
- backend/tests/test_open_meteo_service.py: Refactored datetime
mocking
- backend/tests/test_open_meteo_api_responses.py: Refactored
datetime mocking
- backend/app/routers/dive_sites.py: Added wind suitability
filtering (108 lines added)
- docs/development/work/.../task.md: Updated with recent changes
* Fix wind arrow direction and improve UX
Fixed critical bug in wind arrow direction calculation and improved user experience with better loading indicators and accessibility.
Wind Arrow Direction Fix:
- Corrected SVG rotation formula from (targetDirection - 90) to (targetDirection - 180) to account for default arrow pointing down (south, 180° compass)
- Arrows now correctly point in direction wind is going
- Validated formula for all cardinal directions (0°, 90°, 180°, 270°, 360°)
Zoom Level Improvements:
- Reduced minimum zoom from 13 to 12 for better accessibility
- Added zoom level 12 support in backend (0.10° spacing)
- Updated all zoom level checks and tooltips throughout frontend components
Loading Indicator Enhancements:
- Added centered loading overlay on map showing "Loading wind data..." with spinner
- Uses isFetching in addition to isLoading to show indicator on refetches (map movement, zoom changes, datetime changes)
- Loading indicator now visible during all data fetches, not just initial load
UX Improvements:
- Reduced frontend margin from 5% to 2.5% for better arrow coverage while maintaining viewport visibility
- Added close button to map info box (points count and coordinates) allowing users to dismiss it
- Added comprehensive logging for debugging: frontend console logs for bounds calculation and grid point distribution, backend logs for grid point generation
Files Modified:
- backend/app/services/open_meteo_service.py: Added zoom 12 support, grid point distribution logging
- frontend/src/components/WindOverlay.js: Fixed arrow direction calculation formula
- frontend/src/components/WindOverlayToggle.js: Updated zoom level checks and tooltips
- frontend/src/components/LeafletMapView.js: Added loading indicator, reduced margin, added info box close button, updated zoom checks, added logging
- frontend/src/components/DiveSitesMap.js: Added loading indicator, reduced margin, updated zoom checks, added logging
- frontend/src/pages/IndependentMapView.js: Updated zoom level references
- docs/development/work/.../task.md: Updated documentation with all recent changes
This commit fixes the critical arrow direction bug reported by users and significantly improves the wind overlay user experience.
* Enhance wind date/time picker with slider UI
Replace dropdown/calendar date picker with modern slider-based
interface using react-slider library. The new slider provides
better UX with floating design, play/pause animation, and manual
control.
Major improvements:
- Slider-based date/time selection with visual timeline
- Play/pause animation advances by 3 hours, waits for data
loading with minimum 3-second pause between advances
- Date labels centered in day ranges for better readability
- Day boundary markers show transitions at midnight
- Compact design: reduced height (24px), increased width
(600px min, 95vw max)
- Close button allows users to hide slider when not needed
- "Show Time Slider" button appears when slider is hidden
Additional enhancements:
- Wind feature promotion banner with one-click enable and
auto-zoom to demo location
- Fixed zoom level tracking using map instance for accurate
wind button state (fixes disabled button at zoom 15)
- Fixed z-index layering: popups can now overlay slider
(changed from z-50 to z-40, added CSS rules)
- Removed redundant wind data info box (timestamp now on
slider)
- Removed all debugging console.log statements from
frontend files for cleaner production code
Files modified:
- WindDateTimePicker.js: Complete rewrite with react-slider
- IndependentMapView.js: Added promotion banner, slider
visibility controls, accurate zoom tracking
- LeafletMapView.js: Fixed z-index, removed debug logs,
added fetching callback
- DiveSitesMap.js: Removed debug logs, removed info box
- index.css: Added React Slider styles and popup z-index
rules
- Various files: Removed console.log debugging statements
This improves user experience by making date/time selection
more intuitive and providing better visual feedback for wind
data navigation.
* Add tooltips and legends for wind overlay (Phase 6)
Implement comprehensive tooltips and legends to help users
understand wind overlay features, arrow meanings, and dive site
suitability indicators.
Major features:
- Enhanced tooltips in WindOverlayToggle with detailed
explanations of wind overlay, arrow direction, and zoom
requirements
- WindOverlayLegend component with tabbed interface (Wind
Arrows / Suitability tabs)
- Wind arrow legend: Color scale, speed thresholds, arrow
direction explanation, and size information
- Dive site suitability legend: All suitability levels with
descriptions and wind speed thresholds
- "Show Legend" button on map (top right) similar to "Show
Time Slider" button
- Map info button: Changed from always visible to toggle
button (left side, below zoom buttons) for cleaner UI
Implementation details:
- WindOverlayToggle: Enhanced tooltip shows title,
description, and current zoom level on hover
- WindOverlayLegend: Collapsible legend with tabs, color
swatches, and detailed explanations
- Map buttons: Legend and map info buttons positioned on map
for better UX (not in controls area)
- Accessibility: ARIA labels, keyboard navigation, screen
reader support
Files modified:
- WindOverlayToggle.js: Enhanced tooltip with detailed
explanations
- WindOverlayLegend.js: New combined legend component
- WindArrowLegend.js: New wind arrow legend (standalone)
- DiveSiteSuitabilityLegend.js: New suitability legend
(standalone)
- IndependentMapView.js: Added "Show Legend" button and
legend integration
- DiveSitesMap.js: Added "Show Legend" button and legend
integration
- LeafletMapView.js: Changed map info to toggle button
- task.md: Updated Phase 6 progress and documentation
This improves user understanding of wind overlay features
and makes the interface more intuitive with clear visual
guides.
* Add bulk update script for shore direction
Create scripts/bulk_update_shore_direction.py to enable bulk
updating of shore_direction field for multiple dive sites.
The script provides comprehensive CLI options including:
- Dry-run mode to preview changes
- Force mode to skip confirmation prompts
- Selective processing via --ids option
- Rate limiting controls (max-retries, base-wait-time,
max-requests-per-minute)
- Debug logging support
Implements sophisticated rate limiting similar to
update_dive_site_locations.py:
- Sliding window rate limiting with proactive checking
- Retry logic with exponential backoff for 429 responses
- Respects Retry-After headers from API
- Auto-refreshes expired authentication tokens
Features comprehensive progress display:
- Progress percentage and estimated time remaining
- Running statistics after each site
- Total time and average time per site in summary
- Timestamped logging with emoji indicators
Updated task.md documentation to reflect the new script
and its capabilities.
This enables administrators to efficiently update shore
direction for existing dive sites that lack this data.
* Add error handling with retry for wind data fetching
Implement comprehensive error handling for wind data fetching
failures with user-friendly error messages and retry functionality.
Created WindDataError component (frontend/src/components/WindDataError.js):
- Displays contextual error messages for different error types
(network errors, rate limits, server errors, 404, etc.)
- Shows "Using cached data" indicator when cached data exists
but fresh fetch fails
- Provides "Retry" button to manually retry fetching wind data
- Optional dismiss button to close error message
- Positioned at top center of map (z-50) for visibility
Updated LeafletMapView.js:
- Extracts error, isError, and refetch from React Query useQuery
- Displays WindDataError component when wind data fetch fails
- Checks for cached data to show appropriate indicator
- Only displays error when wind overlay enabled and zoom >= 12
Updated DiveSitesMap.js:
- Same error handling implementation as LeafletMapView
- Consistent error display across both map components
Simplified legend text:
- Removed specific arrow size details from WindArrowLegend and
WindOverlayLegend components for cleaner, more concise UI
- Changed from "40px base + 10px per 5 m/s, max 80px" to
"Larger arrows indicate stronger winds"
Updated task.md documentation:
- Marked error messages task as complete
- Updated Phase 6 progress from 60% to 70%
- Added comprehensive details about error handling implementation
This enables users to understand and recover from wind data
fetching failures, improving overall user experience and
reliability of the wind overlay feature.
* Optimize wind data caching and API calls
Implement comprehensive cache optimizations to reduce Open-Meteo
API calls and improve wind overlay performance:
Backend optimizations:
- Increase cache size from 100 to 500 entries to accommodate
24-hour caching for multiple grid points
- Always use hourly forecast API to cache all 24 hours from
single API response (Optimization #10)
- Implement smart cache lookup checking representative hours
(00:00, 12:00, requested hour) to quickly find cached data
- Group grid points by cache key (0.1° rounding) before API
calls, ensuring only one call per cache cell (Optimization #3)
- Add skip_validation parameter to avoid redundant datetime
validation when called from grid function
- Add detailed cache logging with [CACHE HIT], [CACHE MISS],
[API CALL] prefixes for better debugging
- Detect and warn about cache inconsistencies when date data
exists but specific hour is missing
Frontend optimizations:
- Add prefetchWindHours function that prefetches next 2 days
(one request per day at noon) when play button is pressed
- Integrate prefetch with WindDateTimePicker via onPrefetch prop
to cache upcoming hours before slider advances
- Enhance useViewportData with zoom-based detail levels
(minimal < 4, basic 8-9, full >= 10) for progressive loading
- Expand bounds for zoom >= 11 to ensure nearby dive sites
remain visible when panning
- Increase debounce time from 1s to 1.5s for smoother UX
These optimizations significantly reduce API calls by leveraging
24-hour bulk caching and intelligent cache lookup strategies.
* Disable dive site clustering at zoom level 13+
Update clustering threshold to show individual markers at high
zoom levels for better user interaction and visibility.
- Change clustering threshold from zoom <= 11 to zoom <= 12 in
DiveSitesMap.js
- Add conditional clustering logic in LeafletMapView.js:
- Dive sites at zoom <= 12: Use clustering
- Dive sites at zoom >= 13: Show individual markers
- Other entity types: Always use clustering
- Add zoom tracking and individual marker management
- Add comprehensive backend tests for cache optimizations
- Update task documentation with clustering improvements
This ensures users can see and interact with individual dive
sites without needing to click clusters when zoomed in at
levels 13 and above.
* Add database caching and wind suitability range filter
Implement 3-tier caching system for Open-Meteo API calls:
- Add WindDataCache database model with persistent storage
- Create migrations 0043 (table) and 0044 (last_accessed_at)
- Implement database cache as Tier 2 (in-memory → database → API)
- Add automatic TTL cleanup via MySQL event scheduler
- Serialize/deserialize timestamps for JSON storage
Change wind suitability filter to range-based:
- Backend: Filter by cumulative range (good, caution, difficult, avoid)
- Backend: Add include_unknown_wind parameter for unknown conditions
- Backend: Optimize by grouping sites by cache key for batch fetching
- Frontend: Update dropdown to show range behavior
- Frontend: Add checkbox to include unknown conditions
- Frontend: Fix duplicate 'All Conditions' labels
Fix React component deprecation warning:
- Replace defaultProps with JavaScript default parameters in WindDateTimePicker
Files modified:
- backend/app/models.py: Add WindDataCache model
- backend/migrations/versions/0043_add_wind_data_cache_table.py: Create cache table
- backend/migrations/versions/0044_add_last_accessed_at_to_wind_cache.py: Add access tracking
- backend/app/services/open_meteo_service.py: Implement 3-tier caching
- backend/app/routers/dive_sites.py: Range-based wind suitability filtering
- frontend/src/components/UnifiedMapFilters.js: Range filter UI with unknown checkbox
- frontend/src/components/WindDateTimePicker.js: Fix defaultProps warning
- frontend/src/hooks/useViewportData.js: Add include_unknown_wind support
- frontend/src/pages/IndependentMapView.js: Minor updates
- scripts/bulk_update_shore_direction.py: Script file (existing)
- docs/development/work/2025-11-30-11-59-24-add-wind-overlay-dive-sites-map/task.md: Update documentation
kargig
added a commit
that referenced
this pull request
Jan 26, 2026
This commit addresses multiple technical debt items: 1. Refactor Monolithic API (Violation #3): - Extract `services/auth.js` for authentication logic. - Extract `utils/apiErrors.js` for error handling utilities. - Update `AuthContext` and 15+ other files to use these modular imports. - Remove unused code from `api.js` while preserving internal usage. 2. Fix Ant Design Deprecations: - Update `Card` props: `bordered` -> `variant`, `bodyStyle` -> `styles.body`. - Update `Progress` props: `width` -> `size`. - Update `Avatar.Group` props: `maxCount` -> `max={{ count }}`. - Update `Statistic` props: `valueStyle` -> `styles.content`. - Resolve `Spin` tip warning by separating text from spinner. 3. Fix Import Errors: - Restore accidentally removed imports in `CreateDive`, `EditDive`, etc. - Fix syntax error in `DiveDetail.js`. Verified with full test suite and manual page navigation. No console warnings remain.
kargig
added a commit
that referenced
this pull request
Jan 26, 2026
This commit introduces several user experience improvements to the Map
View and includes code style fixes for Admin pages related to the
ongoing React architecture cleanup.
Map View Improvements:
- **Persist Filter:** The 'selectedEntityType' (e.g., 'Dive Trips') is
now synced to the URL query parameters, ensuring it persists during
map navigation (scrolling/zooming).
- **Clustering:** Disabled marker clustering for all entity types at
zoom level 11 and higher to improve visibility of individual points.
- **Mobile UX:**
- Replaced the native select dropdown with Ant Design Mobile
components for a better native-like experience.
- **Desktop UX:**
- Upgraded the header controls to use Ant Design components.
- Grouped the "Show on map" label with the dropdown.
- Added descriptive text to the "Map Controls" button.
- Optimize map popup layout for mobile and desktop:
- Unified compact view with icons for key weather metrics.
- Expandable "More Info" tooltip for detailed reasoning to prevent
popup resizing and map shifting.
- Suitability badge moved to header for better space utilization.
- **Visual Consistency:**
- Replaced unicode emojis in 'Dive' popups with SVG icons (Lucide)
and the custom shell image for ratings, matching the Dive Detail page.
- Fixed horizontal scrollbar issues in popups by wrapping content.
- Reduce map auto-panning aggressiveness when opening popups to prevent
popup closure issues.
React Best Practices (Refactor):
- **Admin Pages:** Reordered imports in AdminGrowthVisualizations,
AdminRecentActivity, and AdminSystemMetrics. This aligns with the
cleanup of Barrel File Imports (Violation #3 in react-violations.md),
ensuring consistent ordering following the extraction of specific
service files (e.g., 'services/admin.js').
kargig
added a commit
that referenced
this pull request
Jan 26, 2026
* Fix React best practice violations and optimize PWA Refactor frontend codebase to adhere to React best practices and resolve Service Worker development issues. React Best Practice Fixes: - Implement `useFlickrImages` hook to replace manual data fetching in `DiveDetail` and `DiveSiteDetail`, resolving waterfall fetching and race conditions. - Create `useClickOutside` hook to centralize click-outside logic in `NotificationBell` and `ResponsiveFilterBar`. - Standardize responsive logic with `useResponsive` hook across multiple components. - Optimize high-frequency updates in `Home.js` using `AnimatedCounter`. - Add passive event listeners for scroll and resize events to improve scroll performance. - Optimize SVG animations in `IndependentMapView` using GPU acceleration. PWA & Service Worker Improvements: - Update `vite.config.js` to remove conflicting Workbox options and disable SW in development by default. - Fix `PWAUpdater` double-mount issue in Strict Mode using refs. - Remove redundant manual Service Worker registration in `index.html`. - Configure Nginx proxy to correctly serve Service Worker in dev mode. This commit resolves 9/10 identified architectural violations. * Refactor Auth/Error logic and fix AntD deprecations This commit addresses multiple technical debt items: 1. Refactor Monolithic API (Violation #3): - Extract `services/auth.js` for authentication logic. - Extract `utils/apiErrors.js` for error handling utilities. - Update `AuthContext` and 15+ other files to use these modular imports. - Remove unused code from `api.js` while preserving internal usage. 2. Fix Ant Design Deprecations: - Update `Card` props: `bordered` -> `variant`, `bodyStyle` -> `styles.body`. - Update `Progress` props: `width` -> `size`. - Update `Avatar.Group` props: `maxCount` -> `max={{ count }}`. - Update `Statistic` props: `valueStyle` -> `styles.content`. - Resolve `Spin` tip warning by separating text from spinner. 3. Fix Import Errors: - Restore accidentally removed imports in `CreateDive`, `EditDive`, etc. - Fix syntax error in `DiveDetail.js`. Verified with full test suite and manual page navigation. No console warnings remain. * Refactor notification API logic to dedicated service Move notification-related API functions from `frontend/src/api.js` to a new `frontend/src/services/notifications.js` file to improve modularity and separation of concerns. Update all dependent components, hooks, and pages to import from the new service location. Clean up unused imports (including `React`, `SEO`, and `antd` components) in the modified files. Fix `NotificationBell` tests to mock the correct hook path. * Refactor dive API logic to dedicated service Move dive-related API functions from `frontend/src/api.js` to a new `frontend/src/services/dives.js` file to improve modularity and reduce the size of `api.js`. Update imports in all dependent files: - `CreateDive.js`, `DiveDetail.js`, `Dives.js`, `EditDive.js` - `ImportDivesModal.js` - `flickrHelpers.js` Clean up unused imports in `DiveDetail.js` and `CreateDive.js`. Resolve "api is not defined" error in `DiveDetail.js` by ensuring `api` is correctly imported for profile data fetching. * Refactor admin API logic to dedicated service Move system, storage, metrics, statistics, and settings API functions from `frontend/src/api.js` to a new `frontend/src/services/admin.js` file to improve modularity and reduce the size of `api.js`. Update imports in: - `AdminGeneralStatistics.js` - `AdminGrowthVisualizations.js` - `AdminRecentActivity.js` - `AdminSystemMetrics.js` - `useSettings.js` Clean up unused imports in admin pages (Recharts, React, etc.) and fix JSDoc and signature in `useSettings.js`. * Improve Map View UX and Fix React Violations This commit introduces several user experience improvements to the Map View and includes code style fixes for Admin pages related to the ongoing React architecture cleanup. Map View Improvements: - **Persist Filter:** The 'selectedEntityType' (e.g., 'Dive Trips') is now synced to the URL query parameters, ensuring it persists during map navigation (scrolling/zooming). - **Clustering:** Disabled marker clustering for all entity types at zoom level 11 and higher to improve visibility of individual points. - **Mobile UX:** - Replaced the native select dropdown with Ant Design Mobile components for a better native-like experience. - **Desktop UX:** - Upgraded the header controls to use Ant Design components. - Grouped the "Show on map" label with the dropdown. - Added descriptive text to the "Map Controls" button. - Optimize map popup layout for mobile and desktop: - Unified compact view with icons for key weather metrics. - Expandable "More Info" tooltip for detailed reasoning to prevent popup resizing and map shifting. - Suitability badge moved to header for better space utilization. - **Visual Consistency:** - Replaced unicode emojis in 'Dive' popups with SVG icons (Lucide) and the custom shell image for ratings, matching the Dive Detail page. - Fixed horizontal scrollbar issues in popups by wrapping content. - Reduce map auto-panning aggressiveness when opening popups to prevent popup closure issues. React Best Practices (Refactor): - **Admin Pages:** Reordered imports in AdminGrowthVisualizations, AdminRecentActivity, and AdminSystemMetrics. This aligns with the cleanup of Barrel File Imports (Violation #3 in react-violations.md), ensuring consistent ordering following the extraction of specific service files (e.g., 'services/admin.js').
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Transform dive trips page from basic list view to comprehensive multi-view experience with map integration, enhanced filtering, and mobile optimization.
What Changed
Technical Details
Testing
Impact
Users can now explore dive trips visually on maps, switch between view modes seamlessly, and enjoy a mobile-optimized experience with enhanced filtering capabilities.
Ready for review and merge.