diff --git a/src/app/(main)/links/[linkId]/LinkPage.tsx b/src/app/(main)/links/[linkId]/LinkPage.tsx index e0e10213..10cdaf8d 100644 --- a/src/app/(main)/links/[linkId]/LinkPage.tsx +++ b/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 ( @@ -23,6 +44,19 @@ export function LinkPage({ linkId }: { linkId: string }) { + + + {({ close }) => { + return ( + handleClose(close)} + /> + ); + }} + + diff --git a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx index a65c821e..be462bfd 100644 --- a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx +++ b/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 ( @@ -23,6 +44,19 @@ export function PixelPage({ pixelId }: { pixelId: string }) { + + + {({ close }) => { + return ( + handleClose(close)} + /> + ); + }} + + diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx index 9fac4c8e..b90a6da0 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx +++ b/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: , }, - ], + ].filter(filterExcluded), }, { label: formatMessage(labels.sources), @@ -94,7 +98,7 @@ export function WebsiteExpandedView({ path: updateParams({ view: 'domain' }), icon: , }, - ], + ].filter(filterExcluded), }, { label: formatMessage(labels.location), @@ -117,7 +121,7 @@ export function WebsiteExpandedView({ path: updateParams({ view: 'city' }), icon: , }, - ], + ].filter(filterExcluded), }, { label: formatMessage(labels.environment), @@ -152,7 +156,7 @@ export function WebsiteExpandedView({ path: updateParams({ view: 'screen' }), icon: , }, - ], + ].filter(filterExcluded), }, { label: formatMessage(labels.other), @@ -175,7 +179,7 @@ export function WebsiteExpandedView({ path: updateParams({ view: 'tag' }), icon: , }, - ], + ].filter(filterExcluded), }, ]; diff --git a/src/components/input/WebsiteFilterButton.tsx b/src/components/input/WebsiteFilterButton.tsx index 723c0249..09fe8453 100644 --- a/src/components/input/WebsiteFilterButton.tsx +++ b/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({ {showText && {formatMessage(labels.filter)}} - + {({ close }) => { return ; }} - + ); }