From 6c926203f0308062bce34dac1776dd22c0d1b1c0 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Sun, 31 May 2026 11:12:10 -0400
Subject: [PATCH] fix: ConfirmDialog uses forwardRef for React 18 compatibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React 18 doesn't pass ref as a regular prop to function components — it
needs forwardRef. Without it, the <dialog> element never received the
ref, so showModal() had no target. Click icon, nothing happens.

This was the real bug behind 'click icon, nothing happens' — Gallery
was already using ConfirmDialog but the ref was silently null.
---
 frontend/src/components/ConfirmDialog.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 57c8bb6..34479d3 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,8 +1,6 @@
-import { useEffect } from 'react'
+import { useEffect, forwardRef } from 'react'
 
 interface Props {
-  /** The <dialog> element ref — call ref.current?.showModal() to open. */
-  ref?: React.Ref<HTMLDialogElement>
   /** Title shown in the dialog header. */
   title: string
   /** Body text explaining what will happen. */
@@ -17,18 +15,17 @@ interface Props {
   danger?: boolean
 }
 
-export default function ConfirmDialog({
-  ref,
+const ConfirmDialog = forwardRef<HTMLDialogElement, Props>(function ConfirmDialog({
   title,
   message,
   confirmLabel = 'Confirm',
   onConfirm,
   onCancel,
   danger = true,
-}: Props) {
+}, ref) {
   useEffect(() => {
-    const dialog = ref && 'current' in ref ? ref.current : null
-    if (!dialog) return
+    if (!ref || !('current' in ref) || !ref.current) return
+    const dialog = ref.current
 
     const handleClose = () => onCancel?.()
     dialog.addEventListener('close', handleClose)
@@ -78,4 +75,6 @@ export default function ConfirmDialog({
       </form>
     </dialog>
   )
-}
\ No newline at end of file
+})
+
+export default ConfirmDialog
\ No newline at end of file