From e4ce7c9071294bfb85b6335ed4490e833c788d55 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Thu, 9 Oct 2025 14:31:53 -0700
Subject: [PATCH] Created ExpandedViewModal component.

---
 src/app/(main)/links/[linkId]/LinkPage.tsx    | 36 ++-------------
 src/app/(main)/pixels/[pixelId]/PixelPage.tsx | 36 ++-------------
 .../[websiteId]/ExpandedViewModal.tsx         | 44 +++++++++++++++++++
 .../websites/[websiteId]/WebsitePage.tsx      | 29 ++----------
 4 files changed, 53 insertions(+), 92 deletions(-)
 create mode 100644 src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx

diff --git a/src/app/(main)/links/[linkId]/LinkPage.tsx b/src/app/(main)/links/[linkId]/LinkPage.tsx
index 10cdaf8d..b4377e5c 100644
--- a/src/app/(main)/links/[linkId]/LinkPage.tsx
+++ b/src/app/(main)/links/[linkId]/LinkPage.tsx
@@ -7,30 +7,12 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
 import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
 import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
 import { LinkPanels } from '@/app/(main)/links/[linkId]/LinkPanels';
-import { Column, Dialog, Grid, Modal } from '@umami/react-zen';
-import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView';
-import { useNavigation } from '@/components/hooks';
+import { Column, Grid } from '@umami/react-zen';
+import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
 
 const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event'];
 
 export function LinkPage({ linkId }: { linkId: string }) {
-  const {
-    router,
-    query: { view },
-    updateParams,
-  } = useNavigation();
-
-  const handleClose = (close: () => void) => {
-    router.push(updateParams({ view: undefined }));
-    close();
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      router.push(updateParams({ view: undefined }));
-    }
-  };
-
   return (
     <LinkProvider linkId={linkId}>
       <Grid width="100%" height="100%">
@@ -44,19 +26,7 @@ export function LinkPage({ linkId }: { linkId: string }) {
             </Panel>
             <LinkPanels linkId={linkId} />
           </PageBody>
-          <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
-            <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
-              {({ close }) => {
-                return (
-                  <WebsiteExpandedView
-                    websiteId={linkId}
-                    excludedIds={excludedIds}
-                    onClose={() => handleClose(close)}
-                  />
-                );
-              }}
-            </Dialog>
-          </Modal>
+          <ExpandedViewModal websiteId={linkId} excludedIds={excludedIds} />
         </Column>
       </Grid>
     </LinkProvider>
diff --git a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
index be462bfd..46cfe338 100644
--- a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
+++ b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
@@ -7,30 +7,12 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
 import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
 import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
 import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels';
-import { Column, Dialog, Grid, Modal } from '@umami/react-zen';
-import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView';
-import { useNavigation } from '@/components/hooks';
+import { Column, Grid } from '@umami/react-zen';
+import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
 
 const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event'];
 
 export function PixelPage({ pixelId }: { pixelId: string }) {
-  const {
-    router,
-    query: { view },
-    updateParams,
-  } = useNavigation();
-
-  const handleClose = (close: () => void) => {
-    router.push(updateParams({ view: undefined }));
-    close();
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      router.push(updateParams({ view: undefined }));
-    }
-  };
-
   return (
     <PixelProvider pixelId={pixelId}>
       <Grid width="100%" height="100%">
@@ -44,19 +26,7 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
             </Panel>
             <PixelPanels pixelId={pixelId} />
           </PageBody>
-          <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
-            <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
-              {({ close }) => {
-                return (
-                  <WebsiteExpandedView
-                    websiteId={pixelId}
-                    excludedIds={excludedIds}
-                    onClose={() => handleClose(close)}
-                  />
-                );
-              }}
-            </Dialog>
-          </Modal>
+          <ExpandedViewModal websiteId={pixelId} excludedIds={excludedIds} />
         </Column>
       </Grid>
     </PixelProvider>
diff --git a/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx b/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx
new file mode 100644
index 00000000..76a17fbb
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx
@@ -0,0 +1,44 @@
+import { Dialog, Modal } from '@umami/react-zen';
+import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView';
+import { useNavigation } from '@/components/hooks';
+
+export function ExpandedViewModal({
+  websiteId,
+  excludedIds,
+}: {
+  websiteId: string;
+  excludedIds?: string[];
+}) {
+  const {
+    router,
+    query: { view },
+    updateParams,
+  } = useNavigation();
+
+  const handleClose = (close: () => void) => {
+    router.push(updateParams({ view: undefined }));
+    close();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.push(updateParams({ view: undefined }));
+    }
+  };
+
+  return (
+    <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
+      <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
+        {({ close }) => {
+          return (
+            <WebsiteExpandedView
+              websiteId={websiteId}
+              excludedIds={excludedIds}
+              onClose={() => handleClose(close)}
+            />
+          );
+        }}
+      </Dialog>
+    </Modal>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/WebsitePage.tsx b/src/app/(main)/websites/[websiteId]/WebsitePage.tsx
index 4bc109ad..bf8afe98 100644
--- a/src/app/(main)/websites/[websiteId]/WebsitePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsitePage.tsx
@@ -1,30 +1,13 @@
 'use client';
-import { Column, Modal, Dialog } from '@umami/react-zen';
-import { useNavigation } from '@/components/hooks';
+import { Column } from '@umami/react-zen';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteChart } from './WebsiteChart';
-import { WebsiteExpandedView } from './WebsiteExpandedView';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { WebsitePanels } from './WebsitePanels';
 import { WebsiteControls } from './WebsiteControls';
+import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
 
 export function WebsitePage({ websiteId }: { websiteId: string }) {
-  const {
-    router,
-    query: { view },
-    updateParams,
-  } = useNavigation();
-  const handleClose = (close: () => void) => {
-    router.push(updateParams({ view: undefined }));
-    close();
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      router.push(updateParams({ view: undefined }));
-    }
-  };
-
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
@@ -33,13 +16,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
         <WebsiteChart websiteId={websiteId} />
       </Panel>
       <WebsitePanels websiteId={websiteId} />
-      <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
-        <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
-          {({ close }) => {
-            return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
-          }}
-        </Dialog>
-      </Modal>
+      <ExpandedViewModal websiteId={websiteId} />
     </Column>
   );
 }