feat: Add new UI components for number input, time input, and calculator mode selection.

src/components/CalculatorMode.jsx

@@ -1,22 +1,27 @@
-import { Select } from 'antd';
+import { Segmented } from 'antd';
 
 export default function CalculatorMode({ value, onChange }) {
     return (
         <div className="form-row">
-            <label htmlFor="calculator-mode" className="form-label">
+            <label className="form-label" style={{ display: 'block', marginBottom: 8 }}>
                 Calculate
             </label>
-            <Select
+            <Segmented
-                id="calculator-mode"
                 value={value}
                 onChange={onChange}
+                block
                 size="large"
-                style={{ width: '100%' }}
                 options={[
-                    { value: 'shooting-interval', label: 'Shooting interval' },
+                    { value: 'shooting-interval', label: 'Interval' },
-                    { value: 'clip-length', label: 'Clip length' },
+                    { value: 'clip-length', label: 'Clip' },
-                    { value: 'event-duration', label: 'Event duration' },
+                    { value: 'event-duration', label: 'Event' },
                 ]}
+                style={{
+                    backgroundColor: '#F8F9FA',
+                    padding: 4,
+                    borderRadius: 8,
+                    border: '1px solid #DEE2E6'
+                }}
             />
         </div>
     );

src/components/NumberInput.jsx

@@ -1,4 +1,4 @@
-import { InputNumber } from 'antd';
+import { InputNumber, Button, Flex } from 'antd';
 
 export default function NumberInput({ label, value, onChange, unit, min = 0, step = 1 }) {
     const handleChange = (newValue) => {
@@ -6,20 +6,45 @@ export default function NumberInput({ label, value, onChange, unit, min = 0, ste
         onChange(numValue);
     };
 
+    const handleDecrement = () => {
+        handleChange(value - step);
+    };
+
+    const handleIncrement = () => {
+        handleChange(value + step);
+    };
+
     return (
         <div className="form-row">
             <label className="form-label">{label}</label>
+            <Flex gap="small">
+                <Button
+                    onClick={handleDecrement}
+                    size="large"
+                    disabled={value <= min}
+                    style={{ width: 44, padding: 0 }}
+                >
+                    -
+                </Button>
                 <InputNumber
                     value={value}
                     onChange={handleChange}
                     min={min}
                     step={step}
                     placeholder="0"
-                addonAfter={unit}
+                    suffix={<span style={{ color: '#999' }}>{unit}</span>}
                     size="large"
-                style={{ width: '100%' }}
+                    style={{ flex: 1 }}
                     controls={false}
                 />
+                <Button
+                    onClick={handleIncrement}
+                    size="large"
+                    style={{ width: 44, padding: 0 }}
+                >
+                    +
+                </Button>
+            </Flex>
         </div>
     );
 }

src/components/TimeInput.jsx

@@ -20,7 +20,7 @@ export default function TimeInput({ label, hours, minutes, seconds, onChange })
                     onChange={(value) => handleChange('hours', value)}
                     min={0}
                     placeholder="0"
-                    addonAfter="h"
+                    suffix={<span style={{ color: '#999' }}>h</span>}
                     size="large"
                     style={{ width: '33.33%' }}
                     controls={false}
@@ -31,7 +31,7 @@ export default function TimeInput({ label, hours, minutes, seconds, onChange })
                     min={0}
                     max={59}
                     placeholder="0"
-                    addonAfter="m"
+                    suffix={<span style={{ color: '#999' }}>m</span>}
                     size="large"
                     style={{ width: '33.33%' }}
                     controls={false}
@@ -42,7 +42,7 @@ export default function TimeInput({ label, hours, minutes, seconds, onChange })
                     min={0}
                     max={59}
                     placeholder="0"
-                    addonAfter="s"
+                    suffix={<span style={{ color: '#999' }}>s</span>}
                     size="large"
                     style={{ width: '33.34%' }}
                     controls={false}