From b06b8a5794e9ebc19ccf713ac24c092a9634e19e Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Thu, 27 Feb 2025 13:12:49 +0530
Subject: [PATCH] Manage fi open/close

---
 .../gallery/components/viewer/FileViewer.tsx  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx
index 00af6a74da..3d45de58b8 100644
--- a/web/packages/gallery/components/viewer/FileViewer.tsx
+++ b/web/packages/gallery/components/viewer/FileViewer.tsx
@@ -13,10 +13,7 @@ if (process.env.NEXT_PUBLIC_ENTE_WIP_PS5) {
     throw new Error("Whoa");
 }
 
-import {
-    useModalVisibility,
-    type ModalVisibilityProps,
-} from "@/base/components/utils/modal";
+import { type ModalVisibilityProps } from "@/base/components/utils/modal";
 import type { LocalUser } from "@/base/local-user";
 import log from "@/base/log";
 import {
@@ -127,17 +124,17 @@ const FileViewer: React.FC<FileViewerProps> = ({
         FileInfoExif | undefined
     >(undefined);
 
+    const [openFileInfo, setOpenFileInfo] = useState(false);
+
     // If `true`, then we need to trigger a sync with remote when we close.
     const [, setNeedsSync] = useState(false);
 
-    const { show: showFileInfo, props: fileInfoVisibilityProps } =
-        useModalVisibility();
-
     const handleClose = useCallback(() => {
         setNeedsSync((needSync) => {
             if (needSync) onTriggerSyncWithRemote?.();
             return false;
         });
+        setOpenFileInfo(false);
         onClose();
     }, [onTriggerSyncWithRemote, onClose]);
 
@@ -158,11 +155,13 @@ const FileViewer: React.FC<FileViewerProps> = ({
                     setActiveFileExif(exif),
                 ),
             );
-            showFileInfo();
+            setOpenFileInfo(true);
         },
-        [showFileInfo],
+        [],
     );
 
+    const handleInfoClose = useCallback(() => setOpenFileInfo(false), []);
+
     const handleScheduleUpdate = useCallback(() => setNeedsSync(true), []);
 
     const handleSelectCollection = useCallback(
@@ -235,7 +234,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
         <Container>
             <Button>Test</Button>
             <FileInfo
-                {...fileInfoVisibilityProps}
+                open={openFileInfo}
+                onClose={handleInfoClose}
                 file={activeAnnotatedFile?.file}
                 exif={activeFileExif}
                 allowEdits={!!activeAnnotatedFile?.annotation.isOwnFile}