From b660f0f6c31b81ef3593150c0e8faff7741daf14 Mon Sep 17 00:00:00 2001
From: David Fencl <fencld@malfini.com>
Date: Fri, 5 Jun 2026 23:40:56 +0200
Subject: [PATCH] feat: add contact link to settings, update lake labels and
 sidebar icons, and enhance KPI flow visualization

---
 src/components/KpiCards.tsx      | 20 ++++++++++++++++----
 src/components/SettingsModal.tsx | 25 +++++++++++++++++++++++++
 src/components/Sidebar.tsx       |  4 ++--
 src/translations.ts              |  8 ++++++--
 4 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/components/KpiCards.tsx b/src/components/KpiCards.tsx
index dfd8632..b60f993 100644
--- a/src/components/KpiCards.tsx
+++ b/src/components/KpiCards.tsx
@@ -79,10 +79,22 @@ const KpiCards = ({ data, language, lakeName = 'Lipno 1' }: Props) => {
           </div>
           
           {/* Flow Circle */}
-          <div style={{ width: '40px', height: '40px', borderRadius: '50%', border: '4px solid rgba(0, 195, 255, 0.2)', borderTopColor: 'var(--color-cyan)', borderRightColor: 'var(--color-cyan)', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(-45deg)' }}>
-            <span style={{ fontSize: '0.65rem', transform: 'rotate(45deg)', color: 'var(--text-main)', fontWeight: 'bold' }}>
-              <div style={{ lineHeight: 1 }}>{data.outflow.toFixed(1)}</div>
-              <div style={{ fontSize: '0.45rem', opacity: 0.7 }}>m³/s</div>
+          <div style={{
+            width: '70px',
+            height: '70px',
+            borderRadius: '50%',
+            border: `4px solid ${flowDiff >= 0 ? 'rgba(74, 222, 128, 0.2)' : 'rgba(248, 113, 113, 0.2)'}`,
+            borderTopColor: flowDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)',
+            borderRightColor: flowDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: 'rotate(-45deg)',
+            flexShrink: 0
+          }}>
+            <span style={{ transform: 'rotate(45deg)', color: flowDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)', fontWeight: 'bold', textAlign: 'center', lineHeight: 1.2 }}>
+              <div style={{ fontSize: '0.8rem' }}>{flowDiff > 0 ? '+' : ''}{flowDiff.toFixed(1)}</div>
+              <div style={{ fontSize: '0.6rem', opacity: 0.8 }}>m³/s</div>
             </span>
           </div>
         </div>
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 6176a5b..aa2f8da 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -114,6 +114,31 @@ const SettingsModal = ({ language, setLanguage, theme, setTheme, onClose }: Prop
           </div>
         </div>
 
+        {/* Contact */}
+        <div style={{ marginBottom: '2rem' }}>
+          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
+            {dict.contact}
+          </label>
+          <a
+            href="mailto:info@hladinator.cz"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+              color: 'var(--color-cyan)',
+              fontSize: '0.95rem',
+              textDecoration: 'none',
+              fontWeight: 500,
+              opacity: 0.9,
+              transition: 'opacity 0.2s'
+            }}
+            onMouseOver={(e) => e.currentTarget.style.opacity = '1'}
+            onMouseOut={(e) => e.currentTarget.style.opacity = '0.9'}
+          >
+            ✉ info@hladinator.cz
+          </a>
+        </div>
+
         {/* Buy me a coffee */}
         <div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '1.5rem', textAlign: 'center' }}>
           <a
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 7dacf61..640dbdd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { FiDroplet, FiStar, FiMap, FiSettings, FiMenu, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { FiDroplet, FiStar, FiMap, FiSettings, FiChevronLeft, FiChevronRight, FiDatabase } from 'react-icons/fi';
 import { type Language, t } from '../translations';
 
 interface Props {
@@ -54,7 +54,7 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
           <span className="sidebar-text">{dict.favorites}</span>
         </div>
         <div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
-          <FiMenu />
+          <FiDatabase />
           <span className="sidebar-text">{dict.lakes}</span>
         </div>
         <div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
diff --git a/src/translations.ts b/src/translations.ts
index 106c0bc..1e99ae8 100644
--- a/src/translations.ts
+++ b/src/translations.ts
@@ -4,7 +4,7 @@ export const t = {
   en: {
     sidebar: {
       favorites: 'Favorites',
-      lakes: 'Lakes',
+      lakes: 'Lakes & Reservoirs',
       map: 'Map',
       settings: 'Settings'
     },
@@ -46,13 +46,15 @@ export const t = {
       language: 'Language',
       english: 'English',
       czech: 'Čeština',
+      contact: 'Contact',
+      contactPlaceholder: 'Your email address',
       buyCoffee: 'Buy Me a Coffee'
     }
   },
   cs: {
     sidebar: {
       favorites: 'Oblíbené',
-      lakes: 'Jezera',
+      lakes: 'Jezera a nádrže',
       map: 'Mapa',
       settings: 'Nastavení'
     },
@@ -94,6 +96,8 @@ export const t = {
       language: 'Jazyk',
       english: 'English',
       czech: 'Čeština',
+      contact: 'Kontakt',
+      contactPlaceholder: 'Vaše e-mailová adresa',
       buyCoffee: 'Kup mi kávu'
     }
   }