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

src/app/(main)/links/[linkId]/LinkPage.tsx

@@ -7,9 +7,30 @@ 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, 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 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%">
@@ -23,6 +44,19 @@ 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>
         </Column>
       </Grid>
     </LinkProvider>

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>

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -26,9 +26,11 @@ import { Lightning } from '@/components/svg';
 
 export function WebsiteExpandedView({
   websiteId,
+  excludedIds = [],
   onClose,
 }: {
   websiteId: string;
+  excludedIds?: string[];
   onClose?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
@@ -37,9 +39,11 @@ export function WebsiteExpandedView({
     query: { view },
   } = useNavigation();
 
+  const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
+
   const items = [
     {
-      label: formatMessage(labels.pages),
+      label: 'URL',
       items: [
         {
           id: 'path',
@@ -71,7 +75,7 @@ export function WebsiteExpandedView({
           path: updateParams({ view: 'query' }),
           icon: <Search />,
         },
-      ],
+      ].filter(filterExcluded),
     },
     {
       label: formatMessage(labels.sources),
@@ -94,7 +98,7 @@ export function WebsiteExpandedView({
           path: updateParams({ view: 'domain' }),
           icon: <Globe />,
         },
-      ],
+      ].filter(filterExcluded),
     },
     {
       label: formatMessage(labels.location),
@@ -117,7 +121,7 @@ export function WebsiteExpandedView({
           path: updateParams({ view: 'city' }),
           icon: <Landmark />,
         },
-      ],
+      ].filter(filterExcluded),
     },
     {
       label: formatMessage(labels.environment),
@@ -152,7 +156,7 @@ export function WebsiteExpandedView({
           path: updateParams({ view: 'screen' }),
           icon: <Monitor />,
         },
-      ],
+      ].filter(filterExcluded),
     },
     {
       label: formatMessage(labels.other),
@@ -175,7 +179,7 @@ export function WebsiteExpandedView({
           path: updateParams({ view: 'tag' }),
           icon: <Tag />,
         },
-      ],
+      ].filter(filterExcluded),
     },
   ];