MAESTRO: add header input component

2026-02-22 05:23:31 +01:00 · 2026-02-18 00:33:26 +01:00
parent a4fbd00cb2
commit 3e842eede1
2 changed files with 121 additions and 1 deletions
--- a/frontend/src/components/HeaderInput.tsx
+++ b/frontend/src/components/HeaderInput.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { type FormEvent, useEffect, useId, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
+const MAX_INPUT_BYTES = 1024 * 1024;
+
+type HeaderInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+const defaultPlaceholder =
+  "Paste SMTP headers here. Each line is parsed for sender, authentication, and delivery hops.";
+
+const formatCount = (count: number): string => count.toLocaleString("en-US");
+
+const validateValue = (value: string): string | null => {
+  if (value.length > MAX_INPUT_BYTES) {
+    return "Header input exceeds the 1 MB limit.";
+  }
+
+  if (value.trim().length === 0) {
+    return "Header input cannot be empty.";
+  }
+
+  return null;
+};
+
+export default function HeaderInput({
+  value,
+  onChange,
+  placeholder = defaultPlaceholder,
+}: HeaderInputProps) {
+  const inputId = useId();
+  const errorId = useId();
+  const [error, setError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    const node = textareaRef.current;
+    if (!node) {
+      return;
+    }
+
+    const handleNativeBlur = () => {
+      setError(validateValue(node.value));
+    };
+
+    node.addEventListener("blur", handleNativeBlur);
+
+    return () => {
+      node.removeEventListener("blur", handleNativeBlur);
+    };
+  }, []);
+
+  const handleInput = (event: FormEvent<HTMLTextAreaElement>) => {
+    const nextValue = event.currentTarget.value;
+    onChange(nextValue);
+    if (error) {
+      setError(validateValue(nextValue));
+    }
+  };
+
+  const handleClear = () => {
+    onChange("");
+    setError(null);
+  };
+
+  const hasError = Boolean(error);
+  const hintText = `${formatCount(value.length)} / 1MB`;
+
+  return (
+    <section className="rounded-2xl border border-info/10 bg-surface p-6 shadow-[0_0_40px_rgba(15,23,42,0.45)]">
+      <div className="flex items-center justify-between text-xs uppercase tracking-[0.2em] text-info/90">
+        <label htmlFor={inputId}>Header Input</label>
+        <span className="font-mono text-[10px] text-text/50">{hintText}</span>
+      </div>
+      <div className="mt-4 flex flex-col gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
+          <textarea
+            id={inputId}
+            className="min-h-[180px] flex-1 resize-y rounded-xl border border-info/20 bg-background/60 p-4 font-mono text-sm text-text/80 shadow-inner focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info sm:text-base"
+            placeholder={placeholder}
+            spellCheck={false}
+            value={value}
+            onInput={handleInput}
+            aria-invalid={hasError ? "true" : undefined}
+            aria-describedby={hasError ? errorId : undefined}
+            ref={textareaRef}
+          />
+          <button
+            type="button"
+            className="inline-flex items-center justify-center gap-2 rounded-full border border-info/20 bg-background/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-text/70 transition hover:border-info/40 hover:text-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info disabled:cursor-not-allowed disabled:opacity-50"
+            onClick={handleClear}
+            aria-label="Clear header input"
+            disabled={value.length === 0}
+          >
+            <FontAwesomeIcon icon={faXmark} className="text-xs" />
+            Clear
+          </button>
+        </div>
+        {hasError ? (
+          <p role="alert" id={errorId} className="text-xs text-spam">
+            {error}
+          </p>
+        ) : null}
+      </div>
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-text/50">
+        <span>Tip:</span>
+        <span className="font-mono">Ctrl</span>
+        <span>+</span>
+        <span className="font-mono">Enter</span>
+        <span>to analyse.</span>
+      </div>
+    </section>
+  );
+}