feat: implement map view for lake visualization and automate data scraping pipeline

src/App.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import LakeDetail from './components/LakeDetail';
 import LakesOverview from './components/LakesOverview';
+import LakeMap from './components/LakeMap';
 import Sidebar from './components/Sidebar';
 import Topbar from './components/Topbar';
 import SettingsModal from './components/SettingsModal';
@@ -11,7 +12,7 @@ function App() {
   const [language, setLanguage] = useState<Language>('en');
   const [theme, setTheme] = useState<'dark' | 'light'>('dark');
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [activeView, setActiveView] = useState<'overview' | 'detail'>('overview');
+  const [activeView, setActiveView] = useState<'overview' | 'detail' | 'map'>('overview');
   const [activeLakeId, setActiveLakeId] = useState<string | null>(null);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
@@ -29,7 +30,7 @@ function App() {
     setIsMobileMenuOpen(false);
   };
 
-  const handleNavigate = (view: 'overview' | 'detail') => {
+  const handleNavigate = (view: 'overview' | 'detail' | 'map') => {
     setActiveView(view);
     setIsMobileMenuOpen(false);
   };
@@ -55,11 +56,9 @@ function App() {
       
       <div className="main-content">
         <Topbar language={language} onToggleMobileMenu={() => setIsMobileMenuOpen(!isMobileMenuOpen)} />
-        {activeView === 'overview' ? (
-          <LakesOverview language={language} onSelectLake={handleSelectLake} />
-        ) : (
-          <LakeDetail language={language} lakeId={activeLakeId} />
-        )}
+        {activeView === 'overview' && <LakesOverview language={language} onSelectLake={handleSelectLake} />}
+        {activeView === 'detail' && <LakeDetail language={language} lakeId={activeLakeId} />}
+        {activeView === 'map' && <LakeMap language={language} onSelectLake={handleSelectLake} />}
       </div>
       
       {isSettingsOpen && (