mirror of
https://github.com/mgeeky/decode-spam-headers.git
synced 2026-02-22 05:23:31 +01:00
MAESTRO: add analyse button component
This commit is contained in:
@@ -31,7 +31,9 @@ This phase implements the user-facing input layer: a multi-line textarea for pas
|
|||||||
- [x] T016 [US1] Create main page layout in `frontend/src/app/page.tsx` with dark hacker theme (#1e1e2e background, monospace code areas, project title). Responsive from 320px to 2560px (NFR-04)
|
- [x] T016 [US1] Create main page layout in `frontend/src/app/page.tsx` with dark hacker theme (#1e1e2e background, monospace code areas, project title). Responsive from 320px to 2560px (NFR-04)
|
||||||
- [x] T017 [P] [US1] Create `frontend/src/components/HeaderInput.tsx` — multi-line textarea for SMTP headers with placeholder, character count, clear button (FontAwesome icon), monospace styling, keyboard accessible (NFR-02), validation for empty and oversized >1MB input (NFR-10). Verify `HeaderInput.test.tsx` passes (TDD Green)
|
- [x] T017 [P] [US1] Create `frontend/src/components/HeaderInput.tsx` — multi-line textarea for SMTP headers with placeholder, character count, clear button (FontAwesome icon), monospace styling, keyboard accessible (NFR-02), validation for empty and oversized >1MB input (NFR-10). Verify `HeaderInput.test.tsx` passes (TDD Green)
|
||||||
- [x] T018 [P] [US1] Create `frontend/src/components/FileDropZone.tsx` — drag-and-drop zone accepting `.eml` and `.txt` files, reads client-side via File API (FR-02), populates HeaderInput on drop, shows drag-over highlight and rejection feedback, FontAwesome upload icon. Verify `FileDropZone.test.tsx` passes (TDD Green)
|
- [x] T018 [P] [US1] Create `frontend/src/components/FileDropZone.tsx` — drag-and-drop zone accepting `.eml` and `.txt` files, reads client-side via File API (FR-02), populates HeaderInput on drop, shows drag-over highlight and rejection feedback, FontAwesome upload icon. Verify `FileDropZone.test.tsx` passes (TDD Green)
|
||||||
- [ ] T019 [US1] Create `frontend/src/components/AnalyseButton.tsx` — primary action button with FontAwesome analyse icon, Ctrl+Enter shortcut (FR-05), disabled when input empty, loading state during analysis (NFR-05), hacker accent colour. Verify `AnalyseButton.test.tsx` passes (TDD Green)
|
- [x] T019 [US1] Create `frontend/src/components/AnalyseButton.tsx` — primary action button with FontAwesome analyse icon, Ctrl+Enter shortcut (FR-05), disabled when input empty, loading state during analysis (NFR-05), hacker accent colour. Verify `AnalyseButton.test.tsx` passes (TDD Green)
|
||||||
|
|
||||||
|
Note: `npx vitest run src/__tests__/AnalyseButton.test.tsx` passes; Vitest emits existing act() environment warnings.
|
||||||
|
|
||||||
## Completion
|
## Completion
|
||||||
|
|
||||||
|
|||||||
52
frontend/src/components/AnalyseButton.tsx
Normal file
52
frontend/src/components/AnalyseButton.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useMemo } from "react";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { faMagnifyingGlass, faSpinner } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
type AnalyseButtonProps = {
|
||||||
|
hasInput: boolean;
|
||||||
|
onAnalyse: () => void;
|
||||||
|
isLoading?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AnalyseButton({
|
||||||
|
hasInput,
|
||||||
|
onAnalyse,
|
||||||
|
isLoading = false,
|
||||||
|
}: AnalyseButtonProps) {
|
||||||
|
const isDisabled = useMemo(() => !hasInput || isLoading, [hasInput, isLoading]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleShortcut = (event: KeyboardEvent) => {
|
||||||
|
if (!event.ctrlKey || event.key !== "Enter") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDisabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
onAnalyse();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", handleShortcut);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleShortcut);
|
||||||
|
};
|
||||||
|
}, [isDisabled, onAnalyse]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex w-full items-center justify-center gap-2 rounded-full bg-accent px-5 py-3 text-sm font-semibold text-background transition hover:brightness-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
|
||||||
|
onClick={onAnalyse}
|
||||||
|
disabled={isDisabled}
|
||||||
|
aria-busy={isLoading ? "true" : undefined}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={isLoading ? faSpinner : faMagnifyingGlass} spin={isLoading} />
|
||||||
|
{isLoading ? "Analysing..." : "Analyse Headers"}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user