Added expanded view for pixels/links. Made filter form into a popover.

src/app/(main)/pixels/[pixelId]/PixelPage.tsx

@@ -7,9 +7,30 @@ 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, Grid } from '@umami/react-zen';
+import { Column, Dialog, Grid, Modal } from '@umami/react-zen';
+import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView';
+import { useNavigation } from '@/components/hooks';
+
+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%">
@@ -23,6 +44,19 @@ 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>
         </Column>
       </Grid>
     </PixelProvider>