client/src/components/EntryForm.jsx

import { useEffect, useRef, useState } from "react";
const initialState = {
  question: "",
  answer: ""
};
export function EntryForm({ onSubmit, onCancel, initialValue, saving }) {
  const [form, setForm] = useState(initialState);
  const formRef = useRef(null);
  useEffect(() => {
    setForm(initialValue || initialState);
    if (formRef.current) {
      formRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
      formRef.current.querySelector("input")?.focus();
    }
  }, [initialValue]);
  return (
    <form
      className="editor-panel"
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit(form);
      }}
      style={{ display: "flex", flexDirection: "column", gap: "32px" }}
    >
      <div className="field-group">
        <label className="field-label" htmlFor="question" style={{ display: "block", marginBottom: "12px", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-muted)" }}>
          Question
        </label>
        <textarea
          id="question"
          rows="2"
          style={{ minHeight: "80px", width: "100%", padding: "16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--bg-input)", color: "var(--text-primary)", fontSize: "16px" }}
          value={form.question}
          onChange={(event) => setForm((current) => ({ ...current, question: event.target.value }))}
          placeholder="What do you want to remember?"
        />
      </div>

      <div className="field-group">
        <label className="field-label" htmlFor="answer" style={{ display: "block", marginBottom: "12px", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-muted)" }}>
          Answer (Markdown)
        </label>
        <textarea
          id="answer"
          rows="12"
          style={{ minHeight: "300px", width: "100%", padding: "16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--bg-input)", color: "var(--text-primary)", fontSize: "16px", fontFamily: "inherit" }}
          value={form.answer}
          onChange={(event) => setForm((current) => ({ ...current, answer: event.target.value }))}
          placeholder="Markdown renders as formatted answer output."
        />
      </div>

      <div className="form-actions" style={{ display: "flex", gap: "12px", paddingTop: "16px" }}>
        <button className="button-primary" disabled={saving} style={{ flex: 1, padding: "16px" }} type="submit">
          {saving ? "Saving..." : "Save to Library"}
        </button>
        <button className="button-ghost" onClick={onCancel} style={{ padding: "16px 24px" }} type="button">
          Cancel
        </button>
      </div>
    </form>
  );
}