From 67028a072cf73da1f3b808c88e2931188ff1414e Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 13 Jun 2024 16:05:53 +0530
Subject: [PATCH] Fix

---
 .../new/photos/components/WhatsNew.tsx        | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/web/packages/new/photos/components/WhatsNew.tsx b/web/packages/new/photos/components/WhatsNew.tsx
index 2d455aef22..9a98ee5e48 100644
--- a/web/packages/new/photos/components/WhatsNew.tsx
+++ b/web/packages/new/photos/components/WhatsNew.tsx
@@ -30,8 +30,8 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
     const fullScreen = useMediaQuery("(max-width: 428px)");
 
     useEffect(() => {
-        void didShowWhatsNew();
-    }, []);
+        if (open) void didShowWhatsNew();
+    }, [open]);
 
     return (
         <Dialog
@@ -42,25 +42,7 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
             <DialogTitle>{"What's new"}</DialogTitle>
             <DialogContent>
                 <DialogContentText>
-                    <StyledUL>
-                        <li>
-                            <Typography>
-                                <Typography color="primary">
-                                    Support for Passkeys
-                                </Typography>
-                                Passkeys can now be used as a second factor
-                                authentication mechanism.
-                            </Typography>
-                        </li>
-                        <li>
-                            <Typography color="primary">Window size</Typography>
-                            <Typography>
-                                {
-                                    "The app's window will remember its size and position."
-                                }
-                            </Typography>
-                        </li>
-                    </StyledUL>
+                    <ChangelogContent />
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
@@ -87,6 +69,31 @@ const SlideTransition = React.forwardRef(function Transition(
     return <Slide direction="up" ref={ref} {...props} />;
 });
 
+const ChangelogContent: React.FC = () => {
+    // NOTE: Remember to update changelogVersion when changing the content
+    // below.
+
+    return (
+        <StyledUL>
+            <li>
+                <Typography>
+                    <Typography color="primary">
+                        Support for Passkeys
+                    </Typography>
+                    Passkeys can now be used as a second factor authentication
+                    mechanism.
+                </Typography>
+            </li>
+            <li>
+                <Typography color="primary">Window size</Typography>
+                <Typography>
+                    {"The app's window will remember its size and position."}
+                </Typography>
+            </li>
+        </StyledUL>
+    );
+};
+
 const StyledUL = styled("ul")`
     padding-inline: 1rem;