From 3328f89865d51fd7805e24e03de0a5d1a5b5456c Mon Sep 17 00:00:00 2001
From: Zeya Phyo <zeya@qikbite.asia>
Date: Thu, 26 Feb 2026 09:42:16 +0000
Subject: [PATCH] Fix AdminButton keyboard listener - use useEffect hook

- Move event listener to useEffect for proper lifecycle
- Add cleanup function to remove listener
- Add preventDefault to avoid browser shortcuts
- Toggle panel on/off with Alt+Shift+A
---
 frontend/components/AdminButton.tsx | 33 +++++++++++++++++------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/components/AdminButton.tsx b/frontend/components/AdminButton.tsx
index 1d1d5f8..bf6b3ec 100644
--- a/frontend/components/AdminButton.tsx
+++ b/frontend/components/AdminButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 interface AdminButtonProps {
   articleId: number;
@@ -14,11 +14,30 @@ export default function AdminButton({ articleId, articleTitle }: AdminButtonProp
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState('');
 
+  // Set up keyboard shortcut listener
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.altKey && e.shiftKey && e.key === 'A') {
+        e.preventDefault();
+        setShowPanel(prev => !prev);
+        checkAdmin();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    
+    // Cleanup
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   // Check if admin mode is enabled (password in sessionStorage)
   const checkAdmin = () => {
     if (typeof window !== 'undefined') {
       const stored = sessionStorage.getItem('adminAuth');
       if (stored) {
+        setPassword(stored);
         setIsAdmin(true);
         return true;
       }
@@ -82,18 +101,6 @@ export default function AdminButton({ articleId, articleTitle }: AdminButtonProp
     }
   };
 
-  // Show admin button only when Alt+Shift+A is pressed
-  if (typeof window !== 'undefined') {
-    if (!showPanel) {
-      window.addEventListener('keydown', (e) => {
-        if (e.altKey && e.shiftKey && e.key === 'A') {
-          setShowPanel(true);
-          checkAdmin();
-        }
-      });
-    }
-  }
-
   if (!showPanel) return null;
 
   return (