From 9fd6dc11c3a4112eb4d22598e8fa606055690c31 Mon Sep 17 00:00:00 2001 From: GamerBoss101 Date: Sun, 28 Sep 2025 02:30:52 -0400 Subject: [PATCH] feat: Enhance DirectionsSidebar with gradient routes and theming options - Added `gradientRoutes` and `mapStyleChoice` props to DirectionsSidebar for customizable route rendering and theming. - Implemented logic to handle gradient routes based on crash data availability. - Updated route rendering colors and styles for better visual distinction. - Refactored sidebar and toggle button styles for improved UI consistency across themes. refactor: Introduce UnifiedControlPanel for better control management - Replaced ControlsPanel with UnifiedControlPanel to consolidate map and crash data controls. - Added state management for panel visibility and local storage persistence. - Enhanced UI for map controls, including options for heatmap visibility and gradient routes. style: Update GeocodeInput and Legend components for consistent theming - Refactored styles in GeocodeInput to use CSS variables for background and border colors. - Updated Legend component styles to align with new theming variables for better integration. chore: Introduce new CSS variables for panel theming - Added a new color palette for panels and sidebars in globals.css to support light and dark themes. --- web/src/app/components/ControlsPanel.tsx | 49 ++- web/src/app/components/CrashDataControls.tsx | 105 +++-- web/src/app/components/DirectionsSidebar.tsx | 84 +++- web/src/app/components/GeocodeInput.tsx | 14 +- web/src/app/components/Legend.tsx | 4 +- .../app/components/UnifiedControlPanel.tsx | 377 ++++++++++++++++++ web/src/app/globals.css | 16 + web/src/app/page.tsx | 19 +- 8 files changed, 581 insertions(+), 87 deletions(-) create mode 100644 web/src/app/components/UnifiedControlPanel.tsx diff --git a/web/src/app/components/ControlsPanel.tsx b/web/src/app/components/ControlsPanel.tsx index 1ee99f1..a7324ec 100644 --- a/web/src/app/components/ControlsPanel.tsx +++ b/web/src/app/components/ControlsPanel.tsx @@ -15,21 +15,53 @@ interface ControlsPanelProps { onChangeRadius: (v: number) => void; heatIntensity: number; onChangeIntensity: (v: number) => void; + gradientRoutes: boolean; + onToggleGradientRoutes: (v: boolean) => void; } -export default function ControlsPanel({ panelOpen, onTogglePanel, mapStyleChoice, onChangeStyle, heatVisible, onToggleHeat, pointsVisible, onTogglePoints, heatRadius, onChangeRadius, heatIntensity, onChangeIntensity }: ControlsPanelProps) { +export default function ControlsPanel({ panelOpen, onTogglePanel, mapStyleChoice, onChangeStyle, heatVisible, onToggleHeat, pointsVisible, onTogglePoints, heatRadius, onChangeRadius, heatIntensity, onChangeIntensity, gradientRoutes, onToggleGradientRoutes }: ControlsPanelProps) { + const panelStyle = { + backgroundColor: 'var(--panel-darker)', + color: '#f9fafb', + border: '2px solid var(--panel-medium)', + boxShadow: '0 20px 60px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2)', + backdropFilter: 'blur(20px)', + zIndex: 20, // Ensure proper layering + fontWeight: '500' + }; + + const selectStyle = { + backgroundColor: 'var(--panel-dark)', + color: '#f9fafb', + border: '2px solid var(--panel-medium)', + fontSize: '14px', + fontWeight: '500', + padding: '8px 12px', + borderRadius: '8px', + outline: 'none' + }; + return ( -
-
-
Map Controls
- +
+
+
Map Controls
+
{panelOpen && ( <>
- onChangeStyle(e.target.value as 'dark' | 'streets')}> @@ -44,6 +76,11 @@ export default function ControlsPanel({ panelOpen, onTogglePanel, mapStyleChoice onTogglePoints(e.target.checked)} />
+
+ + onToggleGradientRoutes(e.target.checked)} /> +
+
onChangeRadius(Number(e.target.value))} style={{ width: '100%' }} /> diff --git a/web/src/app/components/CrashDataControls.tsx b/web/src/app/components/CrashDataControls.tsx index f3fd22e..bba26fa 100644 --- a/web/src/app/components/CrashDataControls.tsx +++ b/web/src/app/components/CrashDataControls.tsx @@ -6,9 +6,10 @@ import { UseCrashDataResult } from '../hooks/useCrashData'; interface CrashDataControlsProps { crashDataHook: UseCrashDataResult; onDataLoaded?: (dataCount: number) => void; + mapStyleChoice?: 'dark' | 'streets'; } -export default function CrashDataControls({ crashDataHook, onDataLoaded }: CrashDataControlsProps) { +export default function CrashDataControls({ crashDataHook, onDataLoaded, mapStyleChoice = 'dark' }: CrashDataControlsProps) { const { data, loading, error, pagination, loadMore, refresh, yearFilter, setYearFilter } = crashDataHook; const currentYear = new Date().getFullYear().toString(); const [selectedYear, setSelectedYear] = useState(yearFilter || currentYear); @@ -47,39 +48,40 @@ export default function CrashDataControls({ crashDataHook, onDataLoaded }: Crash }, [data.length, onDataLoaded]); return ( -
{/* Crash Density Legend */} -
-
Crash Density
-
-
-
-
-
-
-
-
+
+
Crash Density
+
+
+
+
+
+
+
+
-
- Low - High +
+ Low + High
-
+
@@ -87,37 +89,42 @@ export default function CrashDataControls({ crashDataHook, onDataLoaded }: Crash
{/* Year Filter */} -
-