feat: reports, timeline toggles, and stock correction improvements (#236)

* refactor(frontend): modularize styles and polish modal/ui interactions

* feat: add report workflow and timeline/settings improvements

* fix: resolve CI failures for backend typing, lint, and playwright config

frontend/src/components/Lightbox.tsx

@@ -3,6 +3,7 @@
 // =============================================================================
 
 import type { MouseEvent } from "react";
+import { useEffect } from "react";
 
 export interface LightboxProps {
 	src: string;
@@ -11,6 +12,17 @@ export interface LightboxProps {
 }
 
 export function Lightbox({ src, alt, onClose }: LightboxProps) {
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				onClose();
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [onClose]);
+
 	function handleOverlayClick(e: MouseEvent) {
 		e.stopPropagation();
 		if (e.target === e.currentTarget) {
@@ -19,13 +31,7 @@ export function Lightbox({ src, alt, onClose }: LightboxProps) {
 	}
 
 	return (
-		<div
-			className="lightbox-overlay"
-			onClick={handleOverlayClick}
-			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
-			}}
-		>
+		<div className="lightbox-overlay" onClick={handleOverlayClick}>
 			<div className="lightbox-container">
 				<button className="lightbox-close" onClick={onClose}>
 					×