feat: add close button to adjudicate notification

packages/frontend/src/features/reporting/components/AdjudicateNotification/AdjudicateButton.tsx

@@ -1,26 +1,41 @@
 import { ReactComponent as ArrowRight } from '@/assets/svg/arrow-right.svg'
 import { ReactComponent as GavelRaisedIcon } from '@/assets/svg/gavel-raised.svg'
+import { ReactComponent as CloseIcon } from '@/assets/svg/close-button.svg'
 
 export default function AdjudicationButton({
     onClick = () => {},
+    onClose = () => {},
 }: {
     onClick?: () => void
+    onClose?: () => void
 }) {
     return (
-        <button
-            className="relative py-2 pl-12 pr-2 bg-black border border-white rounded-tl-lg rounded-tr rounded-bl rounded-br-lg lg:py-3 lg:pr-4 lg:pl-14 drop-shadow"
-            onClick={onClick}
-        >
-            <GavelRaisedIcon className="absolute bottom-0 -left-3 w-[4.5rem] lg:w-[5.25rem] h-auto" />
-            <div className="inline-flex flex-col items-start">
-                <span className="text-base font-bold leading-tight tracking-normal text-white lg:tracking-wider lg:text-lg">
-                    新檢舉案出現
-                </span>
-                <span className="text-xs font-medium leading-tight text-white lg:text-sm">
-                    <ArrowRight className="inline-block w-3 lg:w-auto mr-0.5 lg:mr-1" />
-                    立即前往評判！
-                </span>
-            </div>
-        </button>
+        <div className="relative inline-block">
+            {/* Main Button */}
+            <button
+                className="relative py-2 pl-12 pr-2 bg-black border border-white rounded-lg lg:py-3 lg:pr-4 lg:pl-14 drop-shadow"
+                onClick={onClick}
+            >
+                <GavelRaisedIcon className="absolute bottom-0 -left-3 w-[4.5rem] lg:w-[5.25rem] h-auto" />
+                <div className="inline-flex flex-col items-start">
+                    <span className="text-base font-bold leading-tight tracking-normal text-white lg:tracking-wider lg:text-lg">
+                        新檢舉案出現
+                    </span>
+                    <span className="text-xs font-medium leading-tight text-white lg:text-sm">
+                        <ArrowRight className="inline-block w-3 lg:w-auto mr-0.5 lg:mr-1" />
+                        立即前往評判！
+                    </span>
+                </div>
+            </button>
+
+            {/* Close Button */}
+            <button
+                className="absolute -top-3.5 -right-3.5 w-7 h-7 flex items-center justify-center 
+                        bg-white rounded-full border border-gray-300 shadow-md hover:bg-gray-100"
+                onClick={onClose}
+            >
+                <CloseIcon className="w-4 h-4 text-black" />
+            </button>
+        </div>
     )
 }

packages/frontend/src/features/reporting/components/AdjudicateNotification/AdjudicateNotification.tsx

@@ -2,10 +2,13 @@ import { useUserState } from '@/features/core'
 import { isMyEpochKey } from '@/utils/helpers/epochKey'
 import { useToggle } from '@uidotdev/usehooks'
 import { useMemo } from 'react'
+import { useState, useEffect } from 'react'
 import { usePendingReports } from '../../hooks/usePendingReports/usePendingReports'
 import { isMyAdjudicateNullifier } from '../../utils/helpers'
 import Adjudicate from '../Adjudicate/Adjudicate'
 import AdjudicateButton from './AdjudicateButton'
+import ConfirmationDialog from './ConfirmationDialog'
+import { truncate } from 'lodash'
 
 function useActiveAdjudication() {
     const { userState } = useUserState()
@@ -75,25 +78,64 @@ function useActiveAdjudication() {
 
 export default function AdjudicationNotification() {
     const { data: activeAdjudication, refetch } = useActiveAdjudication()
-
     const [open, toggle] = useToggle(false)
+    const [confirmOpen, setConfirmOpen] = useState(false)
+    const [buttonVisible, setButtonVisible] = useState(true)
 
-    const onClose = () => {
-        refetch()
+    useEffect(() => {
+        if (activeAdjudication) {
+            setButtonVisible(true)
+        }
+    }, [activeAdjudication])
+
+    const closeAdjudication = () => {
+        setButtonVisible(true)
         toggle(false)
     }
 
+    const closeConfirmation = () => {
+        setConfirmOpen(false)
+    }
+
+    const openConfirmation = () => {
+        setConfirmOpen(true)
+    }
+
+    const openAdjudication = () => {
+        toggle(true)
+        setButtonVisible(false)
+        setConfirmOpen(false)
+    }
+
+    const rejectAdjudication = () => {
+        toggle(false)
+        setConfirmOpen(false)
+        setButtonVisible(false)
+        refetch()
+    }
+
     if (!activeAdjudication) {
         return null
     }
 
     return (
         <div data-testid="adjudication-notification">
-            <AdjudicateButton onClick={toggle} />
+            {buttonVisible && (
+                <AdjudicateButton
+                    onClick={openAdjudication}
+                    onClose={openConfirmation}
+                />
+            )}
+            <ConfirmationDialog
+                open={confirmOpen}
+                onConfirm={rejectAdjudication}
+                onCancel={openAdjudication}
+                onClose={closeConfirmation}
+            />
             <Adjudicate
                 reportData={activeAdjudication}
                 open={open}
-                onClose={onClose}
+                onClose={closeAdjudication}
             />
         </div>
     )

packages/frontend/src/features/reporting/components/AdjudicateNotification/ConfirmationDialog.tsx

@@ -0,0 +1,49 @@
+import { ReactComponent as CloseIcon } from '@/assets/svg/close.svg'
+
+export default function ConfirmationDialog({
+    open,
+    onConfirm,
+    onCancel,
+    onClose,
+}: {
+    open: boolean
+    onConfirm: () => void
+    onCancel: () => void
+    onClose: () => void
+}) {
+    if (!open) return null
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-black/70 z-50">
+            <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full relative">
+                {/* Close Button */}
+                <button className="absolute top-4 right-4" onClick={onClose}>
+                    <CloseIcon className="w-6 h-6 text-gray-500 hover:text-black" />
+                </button>
+
+                {/* Title and Message */}
+                <p className="text-lg font-bold mb-4">親愛的用戶：</p>
+                <p className="text-base text-gray-700 leading-relaxed">
+                    你確定要放棄這個評判機會嗎？協助評判不僅能與其他用戶一同維護平台的自治與健康，
+                    也能提高聲譽分數 1 分。
+                </p>
+
+                {/* Action Buttons */}
+                <div className="mt-6 flex space-x-4">
+                    <button
+                        className="flex-1 py-2 bg-orange-500 text-white font-bold rounded-md hover:bg-orange-600"
+                        onClick={onConfirm}
+                    >
+                        確認放棄
+                    </button>
+                    <button
+                        className="flex-1 py-2 bg-orange-500 text-white font-bold rounded-md hover:bg-orange-600"
+                        onClick={onCancel}
+                    >
+                        前往協助評判
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}