added stored problems

src/main.tsx

@@ -22,7 +22,26 @@ b =  4
 B = 2 3;
 `.trim()
 
+const useLocalStorage = <T,>(key: string, initialValue: T) => {
+    const [value, setValue] = useState<T>(() => {
+        const item = window.localStorage.getItem(key)
+        return item ? JSON.parse(item) : initialValue
+    })
+
+    const setItem = (newValue: T) => {
+        setValue(newValue)
+        window.localStorage.setItem(key, JSON.stringify(newValue))
+    }
+
+    return [value, setItem] as const
+}
+
 const App = () => {
+    const [currentProblemName, setCurrentProblemName] = useState('Pintel')
+    const [savedProblems, setSavedProblems] = useLocalStorage<{ name: string; source: string }[]>('savedProblems', [
+        { name: 'Pintel', source: INITIAL_PROBLEM_INPUT },
+    ])
+
     const [problemInput, setProblemInput] = useState(INITIAL_PROBLEM_INPUT)
 
     const problemValuesResult = parseSafeProblemInput(problemInput)
@@ -36,6 +55,53 @@ const App = () => {
             </p>
             <h2>Visualizzazione</h2>
             <p>I dati del problema vanno inseriti nel seguente campo di testo nel formato:</p>
+
+            <div class="flex-row">
+                <select
+                    onInput={e => {
+                        const name = e.currentTarget.value
+                        console.log(name)
+
+                        const savedProblem = savedProblems.find(p => p.name === name)
+                        if (savedProblem) {
+                            setCurrentProblemName(name)
+                            setProblemInput(savedProblem.source)
+                        }
+                    }}
+                >
+                    {savedProblems.find(p => p.name === currentProblemName)?.source !== problemInput && (
+                        <option selected>Unsaved</option>
+                    )}
+                    {savedProblems.map(({ name }) => (
+                        <option
+                            value={name}
+                            selected={
+                                name === currentProblemName &&
+                                savedProblems.find(p => p.name === name)!.source === problemInput
+                            }
+                        >
+                            {name}
+                        </option>
+                    ))}
+                </select>
+                <div class="spacer"></div>
+                <input
+                    type="text"
+                    onInput={e => {
+                        const name = e.currentTarget.value
+                        setCurrentProblemName(name)
+                    }}
+                    value={currentProblemName}
+                />
+                <button
+                    onClick={() => {
+                        setSavedProblems([...savedProblems, { name: currentProblemName, source: problemInput }])
+                    }}
+                >
+                    Salva
+                </button>
+            </div>
+
             <textarea
                 value={problemInput}
                 onInput={e => setProblemInput(e.currentTarget.value)}

src/parser-problem.tsx

@@ -64,6 +64,14 @@ export function parseSafeProblemInput(source: string): Result<ProblemInput> {
         }
     }
 
+    // check dimensions
+    if (A.cols !== c.size) {
+        return { error: 'Il numero di colonne di A deve essere uguale alla dimensione di c' }
+    }
+    if (A.rows !== b.size) {
+        return { error: 'Il numero di righe di A deve essere uguale alla dimensione di b' }
+    }
+
     return {
         result: {
             A,

src/style.css

@@ -40,14 +40,52 @@
         }
     }
 
+    textarea,
+    input[type='text'] {
+        background: #fff;
+        border: 1px solid #888;
+        min-height: 1.75rem;
+        padding: 0 0.25rem;
+        border-radius: 0.25rem;
+
+        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+    }
+
+    input[type='text'] {
+        font-size: 16px;
+    }
+
     textarea {
         resize: vertical;
 
+        padding: 0.5rem;
+
         font-family: 'JetBrains Mono', monospace;
         font-weight: 400;
         color: #333;
     }
 
+    button,
+    select {
+        font-family: 'Open Sans', sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        color: #333;
+
+        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+        background: #f0f0f0;
+        border: 1px solid #888;
+        padding: 0 0.5rem;
+        border-radius: 0.25rem;
+        min-height: 1.75rem;
+
+        cursor: pointer;
+
+        &:hover {
+            background: #e0e0e0;
+        }
+    }
+
     p {
         line-height: 1.75;
     }
@@ -164,4 +202,15 @@
         grid-auto-flow: column;
         align-items: center;
     }
+
+    .flex-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+
+        > .spacer {
+            flex-grow: 1;
+        }
+    }
 }