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 }) {
+
+
+
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 }) {
+
+
+
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)}}
-
+
-
+
);
}