feature: custom format module (#11)

- improve custom formats
- general tab for name, description tags
- improved conditions tab
- add testing system
- add app footer
- remove redundant data page headers

frontend/src/components/format/AddFormatTestModal.jsx

@@ -0,0 +1,141 @@
+import React, {useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import Modal from '@ui/Modal';
+
+const AddFormatTestModal = ({
+    isOpen,
+    onClose,
+    onAdd,
+    tests,
+    editTest = null
+}) => {
+    const [input, setInput] = useState('');
+    const [expected, setExpected] = useState(true);
+
+    // Reset form when opening modal, handling both new and edit cases
+    useEffect(() => {
+        if (isOpen) {
+            if (editTest) {
+                setInput(editTest.input);
+                setExpected(editTest.expected);
+            } else {
+                setInput('');
+                setExpected(true);
+            }
+        }
+    }, [isOpen, editTest]);
+
+    const handleSubmit = () => {
+        const getNextTestId = testArray => {
+            if (!testArray || testArray.length === 0) return 1;
+            return Math.max(...testArray.map(test => test.id)) + 1;
+        };
+
+        const testData = {
+            id: editTest ? editTest.id : getNextTestId(tests),
+            input,
+            expected,
+            passes: false,
+            lastRun: null,
+            conditionResults: [] // This will be populated when the test is run
+        };
+
+        onAdd(testData);
+        handleClose();
+    };
+
+    const handleClose = () => {
+        setInput('');
+        setExpected(true);
+        onClose();
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={handleClose}
+            title={editTest ? 'Edit Test Case' : 'Add Test Case'}
+            width='3xl'
+            footer={
+                <div className='flex justify-end space-x-3'>
+                    <button
+                        onClick={handleClose}
+                        className='px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 
+            bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md 
+            hover:bg-gray-50 dark:hover:bg-gray-700'>
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSubmit}
+                        disabled={!input.trim()}
+                        className='px-3 py-1.5 text-sm font-medium text-white bg-blue-600 rounded-md 
+            hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed'>
+                        {editTest ? 'Save Changes' : 'Add Test'}
+                    </button>
+                </div>
+            }>
+            <div className='space-y-4'>
+                <div className='space-y-2'>
+                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        Test String
+                    </label>
+                    <input
+                        type='text'
+                        value={input}
+                        onChange={e => setInput(e.target.value)}
+                        className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 
+            rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 
+            placeholder-gray-500 dark:placeholder-gray-400
+            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+                        placeholder='Enter release title to test...'
+                        autoFocus
+                    />
+                </div>
+
+                <div className='space-y-2'>
+                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        Expected Result
+                    </label>
+                    <div className='flex space-x-4'>
+                        <label className='flex items-center space-x-2'>
+                            <input
+                                type='radio'
+                                checked={expected}
+                                onChange={() => setExpected(true)}
+                                className='text-blue-600 focus:ring-blue-500'
+                            />
+                            <span className='text-sm text-gray-700 dark:text-gray-300'>
+                                Format Should Apply
+                            </span>
+                        </label>
+                        <label className='flex items-center space-x-2'>
+                            <input
+                                type='radio'
+                                checked={!expected}
+                                onChange={() => setExpected(false)}
+                                className='text-blue-600 focus:ring-blue-500'
+                            />
+                            <span className='text-sm text-gray-700 dark:text-gray-300'>
+                                Format Should Not Apply
+                            </span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+AddFormatTestModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    tests: PropTypes.array.isRequired,
+    editTest: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        input: PropTypes.string.isRequired,
+        expected: PropTypes.bool.isRequired
+    })
+};
+
+export default AddFormatTestModal;