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

Author: mikecao

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),
     },
   ];
 

src/components/input/WebsiteFilterButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
+import { Button, Icon, DialogTrigger, Dialog, Popover, Text } from '@umami/react-zen';
 import { ListFilter } from '@/components/icons';
 import { FilterEditForm } from '@/components/input/FilterEditForm';
 import { useMessages, useNavigation } from '@/components/hooks';
@@ -32,13 +32,13 @@ export function WebsiteFilterButton({
         </Icon>
         {showText && <Text>{formatMessage(labels.filter)}</Text>}
       </Button>
-      <Modal>
+      <Popover placement="bottom start">
         <Dialog title={formatMessage(labels.filters)} style={{ width: 800, minHeight: 600 }}>
           {({ close }) => {
             return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
           }}
         </Dialog>
-      </Modal>
+      </Popover>
     </DialogTrigger>
   );
 }