feat: implement Favorites feature with persistent storage and sidebar integration and update lake data.

src/components/Sidebar.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { FiDroplet, FiStar, FiMap, FiSettings, FiChevronLeft, FiChevronRight, FiDatabase } from 'react-icons/fi';
 import { type Language, t } from '../translations';
+import { useFavorites } from '../hooks/useFavorites';
 
 interface Props {
   language: Language;
@@ -15,10 +16,11 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
   const navigate = useNavigate();
   const location = useLocation();
   const dict = t[language].sidebar;
+  const { favorites } = useFavorites();
 
   const isOverview = location.pathname === '/';
+  const isFavoritesPage = location.pathname === '/favorites';
   const isMap = location.pathname === '/map';
-  const isDetail = !isOverview && !isMap;
 
   const handleNavigate = (path: string) => {
     navigate(path);
@@ -49,14 +51,37 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
       </div>
       
       <div className="nav-links">
-        <div className={`nav-item ${isDetail ? 'active' : ''}`} onClick={() => handleNavigate('/lipno-1')}>
-          <FiStar />
+        {/* Favourites */}
+        <div className={`nav-item ${isFavoritesPage ? 'active' : ''}`} onClick={() => handleNavigate('/favorites')} style={{ position: 'relative' }}>
+          <FiStar fill={favorites.length > 0 ? '#f59e0b' : 'none'} color={favorites.length > 0 ? '#f59e0b' : 'currentColor'} />
           <span className="sidebar-text">{dict.favorites}</span>
+          {favorites.length > 0 && (
+            <span style={{
+              marginLeft: 'auto',
+              backgroundColor: '#f59e0b',
+              color: '#000',
+              borderRadius: '999px',
+              fontSize: '0.7rem',
+              fontWeight: 'bold',
+              minWidth: '18px',
+              height: '18px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '0 5px',
+            }}>
+              {favorites.length}
+            </span>
+          )}
         </div>
+
+        {/* Lakes & Reservoirs */}
         <div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
           <FiDatabase />
           <span className="sidebar-text">{dict.lakes}</span>
         </div>
+
+        {/* Map */}
         <div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
           <FiMap />
           <span className="sidebar-text">{dict.map}</span>