feat: redesign aplikace pomocí claude code

client/src/components/Footer.tsx

@@ -1,12 +1,12 @@
-import { Navbar } from "react-bootstrap";
-
 export default function Footer() {
-    return <Navbar className="text-light" variant='dark' expand="lg" style={{
-        display: "flex",
-        justifyContent: "center",
-        marginTop: "auto", // Pushne footer na spodek
-        flexShrink: 0 // Zabrání zmenšování při malém obsahu
-    }}>
-        <span>🄯 Žádná práva nevyhrazena. TODO a zdrojové kódy dostupné <a href="https://gitea.melancholik.eu/mates/Luncher">zde</a>.</span>
-    </Navbar >
-}
+    return (
+        <footer className="footer">
+            <span>
+                Zdroj. kódy dostupné na{' '}
+                <a href="https://gitea.melancholik.eu/mates/Luncher" target="_blank" rel="noopener noreferrer">
+                    Gitea
+                </a>
+            </span>
+        </footer>
+    );
+}

client/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import SettingsModal from "./modals/SettingsModal";
 import { useSettings, ThemePreference } from "../context/settings";
@@ -9,6 +9,14 @@ import RefreshMenuModal from "./modals/RefreshMenuModal";
 import { useNavigate } from "react-router";
 import { STATS_URL } from "../AppRoutes";
 import { FeatureRequest, getVotes, updateVote } from "../../../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+const CHANGELOG = [
+    "Nový moderní design aplikace",
+    "Oprava parsování Sladovnické a TechTower",
+    "Možnost označit se jako objednávající u volby \"budu objednávat\"",
+];
 
 export default function Header() {
     const auth = useAuth();
@@ -18,8 +26,29 @@ export default function Header() {
     const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
     const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
     const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
+    const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
     const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);
 
+    // Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
+    const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
+
+    useEffect(() => {
+        const updateEffectiveTheme = () => {
+            if (settings?.themePreference === 'system') {
+                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                setEffectiveTheme(isDark ? 'dark' : 'light');
+            } else {
+                setEffectiveTheme(settings?.themePreference || 'light');
+            }
+        };
+
+        updateEffectiveTheme();
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', updateEffectiveTheme);
+        return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
+    }, [settings?.themePreference]);
+
     useEffect(() => {
         if (auth?.login) {
             getVotes().then(response => {
@@ -44,6 +73,12 @@ export default function Header() {
         setRefreshMenuModalOpen(false);
     }
 
+    const toggleTheme = () => {
+        // Přepínáme mezi light a dark (ignorujeme system pro jednoduchost)
+        const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
+        settings?.setThemePreference(newTheme);
+    }
+
     const isValidInteger = (str: string) => {
         str = str.trim();
         if (!str) {
@@ -121,12 +156,21 @@ export default function Header() {
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="nav">
+                <button
+                    className="theme-toggle"
+                    onClick={toggleTheme}
+                    title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
+                    aria-label="Přepnout barevný motiv"
+                >
+                    <FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
+                </button>
                 <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
                     <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
                     <NavDropdown.Divider />
                     <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
                 </NavDropdown>
@@ -136,5 +180,22 @@ export default function Header() {
         <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
         <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
         <PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
+        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Novinky</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <ul>
+                    {CHANGELOG.map((item, index) => (
+                        <li key={index}>{item}</li>
+                    ))}
+                </ul>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>
+                    Zavřít
+                </Button>
+            </Modal.Footer>
+        </Modal>
     </Navbar>
-}
+}

client/src/components/Loader.tsx

@@ -9,11 +9,13 @@ type Props = {
 }
 
 function Loader(props: Readonly<Props>) {
-  return <div className='loader'>
-    <h1>{props.title ?? 'Prosím čekejte...'}</h1>
-    <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
-    <p>{props.description}</p>
-  </div>
+  return (
+    <div className='loader'>
+      <FontAwesomeIcon icon={props.icon} className={`loader-icon ${props.animation ?? ''}`} />
+      <h2 className='loader-title'>{props.title ?? 'Prosím čekejte...'}</h2>
+      <p className='loader-description'>{props.description}</p>
+    </div>
+  );
 }
 
 export default Loader;

client/src/components/PizzaOrderList.tsx

@@ -15,29 +15,43 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
     }
 
     if (!orders?.length) {
-        return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
+        return <p className="mt-4" style={{ color: 'var(--luncher-text-muted)', fontStyle: 'italic' }}>Zatím žádné objednávky...</p>
     }
 
     const total = orders.reduce((total, order) => total + order.totalPrice, 0);
 
-    return <Table className="mt-3" striped bordered hover>
-        <thead>
-            <tr>
-                <th>Jméno</th>
-                <th>Objednávka</th>
-                <th>Poznámka</th>
-                <th>Příplatek</th>
-                <th>Cena</th>
-            </tr>
-        </thead>
-        <tbody>
-            {orders.map(order => <tr key={order.customer}>
-                <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
-            </tr>)}
-            <tr style={{ fontWeight: 'bold' }}>
-                <td colSpan={4}>Celkem</td>
-                <td>{`${total} Kč`}</td>
-            </tr>
-        </tbody>
-    </Table>
-}
+    return (
+        <div className="mt-4" style={{
+            background: 'var(--luncher-bg-card)',
+            borderRadius: 'var(--luncher-radius-lg)',
+            overflow: 'hidden',
+            border: '1px solid var(--luncher-border-light)',
+            boxShadow: 'var(--luncher-shadow)'
+        }}>
+            <Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
+                <thead style={{ background: 'var(--luncher-primary-light)' }}>
+                    <tr>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {orders.map(order => <tr key={order.customer} style={{ borderColor: 'var(--luncher-border-light)' }}>
+                        <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
+                    </tr>)}
+                    <tr style={{
+                        fontWeight: 700,
+                        background: 'var(--luncher-bg-hover)',
+                        borderTop: '2px solid var(--luncher-border)'
+                    }}>
+                        <td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
+                        <td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total} Kč`}</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    );
+}

client/src/components/modals/RefreshMenuModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { Modal, Button, Alert } from "react-bootstrap";
+import { Modal, Button, Alert, Form } from "react-bootstrap";
 
 type Props = {
     isOpen: boolean;
@@ -30,7 +30,6 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             if (res.ok) {
                 setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
                 if (refreshPassRef.current) {
-                    // Clean hesla xd
                     refreshPassRef.current.value = '';
                 }
             } else {
@@ -50,7 +49,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
     };
 
     return (
-        <Modal show={isOpen} onHide={handleClose} size="lg">
+        <Modal show={isOpen} onHide={handleClose}>
             <Modal.Header closeButton>
                 <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
             </Modal.Header>
@@ -63,36 +62,29 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
                     </Alert>
                 )}
 
-                <div className="mb-3">
-                    Heslo: <input
+                <Form.Group className="mb-3">
+                    <Form.Label>Heslo</Form.Label>
+                    <Form.Control
                         ref={refreshPassRef}
                         type="password"
                         placeholder="Zadejte heslo"
-                        className="form-control d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
                         onKeyDown={e => e.stopPropagation()}
                     />
-                </div>
+                </Form.Group>
 
-                <div className="mb-3">
-                    Typ refreshe: <select
-                        ref={refreshTypeRef}
-                        className="form-select d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
-                        defaultValue="week"
-                    >
+                <Form.Group className="mb-3">
+                    <Form.Label>Typ refreshe</Form.Label>
+                    <Form.Select ref={refreshTypeRef} defaultValue="week">
                         <option value="week">Týden</option>
                         <option value="day">Den</option>
-                    </select>
-                </div>
+                    </Form.Select>
+                </Form.Group>
 
                 <Button
-                    variant="info"
                     onClick={handleRefresh}
                     disabled={refreshLoading}
-                    className="mb-3"
                 >
-                    {refreshLoading ? 'Refreshing...' : 'Refresh'}
+                    {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
                 </Button>
             </Modal.Body>
             <Modal.Footer>
@@ -102,4 +94,4 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             </Modal.Footer>
         </Modal>
     );
-}
+}

client/src/components/modals/SettingsModal.tsx

@@ -16,38 +16,81 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
     const hideSoupsRef = useRef<HTMLInputElement>(null);
     const themeRef = useRef<HTMLSelectElement>(null);
 
-    return <Modal show={isOpen} onHide={onClose} size="lg">
-        <Modal.Header closeButton>
-            <Modal.Title><h2>Nastavení</h2></Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-            <h4>Vzhled</h4>
-            <Form.Group className="mb-3">
-                <Form.Label>Barevný motiv</Form.Label>
-                <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
-                    <option value="system">Podle systému</option>
-                    <option value="light">Světlý</option>
-                    <option value="dark">Tmavý</option>
-                </Form.Select>
-            </Form.Group>
-            <hr />
-            <h4>Obecné</h4>
-            <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
-                <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
-            </span>
-            <hr />
-            <h4>Bankovní účet</h4>
-            <p>Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
-            Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
-            Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
-        </Modal.Body>
-        <Modal.Footer>
-            <Button variant="secondary" onClick={onClose}>
-                Storno
-            </Button>
-            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
-                Uložit
-            </Button>
-        </Modal.Footer>
-    </Modal>
-}
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Nastavení</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <h4>Vzhled</h4>
+                <Form.Group className="mb-3">
+                    <Form.Label>Barevný motiv</Form.Label>
+                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
+                        <option value="system">Podle systému</option>
+                        <option value="light">Světlý</option>
+                        <option value="dark">Tmavý</option>
+                    </Form.Select>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Obecné</h4>
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        ref={hideSoupsRef}
+                        type="checkbox"
+                        label="Skrýt polévky"
+                        defaultChecked={settings?.hideSoups}
+                        title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
+                    />
+                    <Form.Text className="text-muted">
+                        Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
+                    </Form.Text>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Bankovní účet</h4>
+                <p>
+                    Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
+                </p>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Číslo účtu</Form.Label>
+                    <Form.Control
+                        ref={bankAccountRef}
+                        type="text"
+                        placeholder="123456-1234567890/1234"
+                        defaultValue={settings?.bankAccount}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Název příjemce</Form.Label>
+                    <Form.Control
+                        ref={nameRef}
+                        type="text"
+                        placeholder="Jan Novák"
+                        defaultValue={settings?.holderName}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Jméno majitele účtu pro QR platbu.
+                    </Form.Text>
+                </Form.Group>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose}>
+                    Storno
+                </Button>
+                <Button onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
+                    Uložit
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}