From 935a43c311e91d0a94544d896bad1422f9a99909 Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Tue, 28 Apr 2026 03:11:31 +0530
Subject: [PATCH] refactor: expose props on ui components

---
 frontend/src/components/reader/EnvelopeReveal.tsx | 4 ++++
 frontend/src/components/ui/FormField.tsx          | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/frontend/src/components/reader/EnvelopeReveal.tsx b/frontend/src/components/reader/EnvelopeReveal.tsx
index beaebed..dc62736 100644
--- a/frontend/src/components/reader/EnvelopeReveal.tsx
+++ b/frontend/src/components/reader/EnvelopeReveal.tsx
@@ -9,6 +9,7 @@ export interface EnvelopeRevealProps {
   onRevealComplete: () => void;
   ignite: boolean;
   isFlip?: boolean;
+  isInteractive?: boolean;
 }
 
 export function EnvelopeReveal({
@@ -17,6 +18,7 @@ export function EnvelopeReveal({
   onRevealComplete,
   ignite,
   isFlip,
+  isInteractive = true,
 }: EnvelopeRevealProps) {
   const [revealLetter, setRevealLetter] = useState(false);
   const [isFlipped, setIsFlipped] = useState(!!isFlip);
@@ -67,6 +69,7 @@ export function EnvelopeReveal({
               type="checkbox"
               className="transition checkbox absolute h-full w-full text-transparent bg-transparent z-100"
               ref={flapCheckbox}
+              disabled={!isInteractive}
             />
           </div>
           <img
@@ -103,6 +106,7 @@ export function EnvelopeReveal({
         <button
           id="env-front"
           type="button"
+          disabled={!isInteractive}
           className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
           onClick={() => setIsFlipped((prev) => !prev)}
         >
diff --git a/frontend/src/components/ui/FormField.tsx b/frontend/src/components/ui/FormField.tsx
index e6d42a6..367cd77 100644
--- a/frontend/src/components/ui/FormField.tsx
+++ b/frontend/src/components/ui/FormField.tsx
@@ -6,6 +6,7 @@ interface FormFieldProps {
   placeholder?: string;
   registration: UseFormRegisterReturn;
   error?: string;
+  handleFocus?: () => void;
 }
 
 export default function FormField({
@@ -14,6 +15,7 @@ export default function FormField({
   placeholder,
   registration,
   error,
+  handleFocus,
 }: FormFieldProps) {
   return (
     <div className="form-control">
@@ -31,6 +33,7 @@ export default function FormField({
         className={`input input-bordered focus:input-primary ${
           error ? "input-error" : ""
         }`}
+        onFocus={handleFocus}
       />
       {error && <p className="text-error">{error}</p>}
     </div>