diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 869b170..be524a0 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,6 +5,7 @@ import { Toolbar } from './components/Toolbar'; import { InspectorPanel } from './components/InspectorPanel'; import type { InspectorTab } from './components/InspectorPanel'; import { SignatureModal } from './components/SignatureModal'; +import { AboutModal } from './components/AboutModal'; import { ToastViewport } from './components/ui'; import { CustomConfirmationModal } from './components/custom/CustomConfirmationModal'; import type { CustomConfirmationOptions } from './components/custom/CustomConfirmationModal'; @@ -55,6 +56,7 @@ function App() { // Tool aux state const [pendingSignature, setPendingSignature] = useState<{ url: string; aspect: number } | null>(null); const [signatureModalOpen, setSignatureModalOpen] = useState(false); + const [aboutModalOpen, setAboutModalOpen] = useState(false); const [activeStamp, setActiveStamp] = useState<{ label: string; color: string } | null>(null); const [confirmState, setConfirmState] = useState<(CustomConfirmationOptions & { onConfirm: () => void }) | null>(null); @@ -439,6 +441,7 @@ function App() { onToolChange={setActiveTool} hasSignature={!!pendingSignature} onOpenSignature={() => setSignatureModalOpen(true)} + onOpenAbout={() => setAboutModalOpen(true)} />
@@ -542,6 +545,11 @@ function App() { toast('Signature ready — click on the page to place it', 'info'); }} /> + + setAboutModalOpen(false)} + /> setConfirmState(null)} /> diff --git a/frontend/src/components/AboutModal.tsx b/frontend/src/components/AboutModal.tsx new file mode 100644 index 0000000..77f39a7 --- /dev/null +++ b/frontend/src/components/AboutModal.tsx @@ -0,0 +1,77 @@ +import React, { useEffect, useRef } from 'react'; +import { XIcon } from './icons'; + +interface AboutModalProps { + open: boolean; + onClose: () => void; +} + +export const AboutModal: React.FC = ({ open, onClose }) => { + const modalRef = useRef(null); + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape' && open) onClose(); + }; + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [open, onClose]); + + useEffect(() => { + if (open) { + modalRef.current?.focus(); + } + }, [open]); + + if (!open) return null; + + return ( +
+
+ + +
+
+
+ + + +
+ MASKAN PDF +
+
+ PDF EDITOR +
+
+ Version 1.0.0 +
+
+ +
+
+ Maskan Technologies +
+ +
+

address: Bangalore, Karnataka, India

+

email: contact@maskantechnologies.com

+

tel.: +91 000-000-0000

+
+ +
+ www.maskantechnologies.com +
+
+
+
+ ); +}; diff --git a/frontend/src/components/ToolRail.tsx b/frontend/src/components/ToolRail.tsx index f23e973..f157f20 100644 --- a/frontend/src/components/ToolRail.tsx +++ b/frontend/src/components/ToolRail.tsx @@ -4,7 +4,7 @@ import type { ToolId } from '../lib/tools'; import { Popover } from './ui'; import { SelectIcon, PanIcon, HighlightIcon, DrawIcon, CommentIcon, TextBoxIcon, - SignatureIcon, StampIcon, RedactIcon, InfoIcon, + SignatureIcon, StampIcon, RedactIcon, InfoIcon, HelpIcon, } from './icons'; interface ToolDef { id: ToolId; label: string; shortcut: string; icon: React.ReactNode; danger?: boolean } @@ -28,6 +28,7 @@ interface ToolRailProps { onToolChange: (t: ToolId) => void; hasSignature: boolean; onOpenSignature: () => void; + onOpenAbout: () => void; } const RailButton: React.FC<{ t: ToolDef; active: boolean; onClick: () => void }> = ({ t, active, onClick }) => ( @@ -48,7 +49,7 @@ const RailButton: React.FC<{ t: ToolDef; active: boolean; onClick: () => void }> ); -export const ToolRail: React.FC = ({ activeTool, onToolChange, hasSignature, onOpenSignature }) => { +export const ToolRail: React.FC = ({ activeTool, onToolChange, hasSignature, onOpenSignature, onOpenAbout }) => { const pickTool = (id: ToolId) => { onToolChange(id); if (id === 'signature' && !hasSignature) onOpenSignature(); @@ -64,12 +65,16 @@ export const ToolRail: React.FC = ({ activeTool, onToolChange, ha
+ + + + ( - + )} > diff --git a/frontend/src/components/icons.tsx b/frontend/src/components/icons.tsx index 66bf1f0..68160f5 100644 --- a/frontend/src/components/icons.tsx +++ b/frontend/src/components/icons.tsx @@ -75,5 +75,6 @@ export const CopyIcon: IC = mk(<>); export const UploadIcon: IC = mk(); export const InfoIcon: IC = mk(<>); +export const HelpIcon: IC = mk(<>); export const SpinnerIcon: IC = ({ size = 18, className }) => base(size, `${className ?? ''} animate-spin`, 2, <>);