Implemented expanded view in dialog.

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

@@ -1,6 +1,5 @@
-import { Grid, Heading, Column, Row } from '@umami/react-zen';
+import { Grid, Heading, Column, Row, NavMenu, NavMenuItem, Text } from '@umami/react-zen';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
-import { SideMenu } from '@/components/common/SideMenu';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
@@ -40,7 +39,7 @@ const views = {
 };
 
 export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
-  const [data, setData] = useState([]);
+  const [data] = useState([]);
   const { dateRange, dateCompare } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
   const {
@@ -53,72 +52,72 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
     {
       id: 'path',
       label: formatMessage(labels.pages),
-      url: updateParams({ view: 'path' }),
+      path: updateParams({ view: 'path' }),
     },
     {
       id: 'referrer',
       label: formatMessage(labels.referrers),
-      url: updateParams({ view: 'referrer' }),
+      path: updateParams({ view: 'referrer' }),
     },
     {
       id: 'browser',
       label: formatMessage(labels.browsers),
-      url: updateParams({ view: 'browser' }),
+      path: updateParams({ view: 'browser' }),
     },
     {
       id: 'os',
       label: formatMessage(labels.os),
-      url: updateParams({ view: 'os' }),
+      path: updateParams({ view: 'os' }),
     },
     {
       id: 'device',
       label: formatMessage(labels.devices),
-      url: updateParams({ view: 'device' }),
+      path: updateParams({ view: 'device' }),
     },
     {
       id: 'country',
       label: formatMessage(labels.countries),
-      url: updateParams({ view: 'country' }),
+      path: updateParams({ view: 'country' }),
     },
     {
       id: 'region',
       label: formatMessage(labels.regions),
-      url: updateParams({ view: 'region' }),
+      path: updateParams({ view: 'region' }),
     },
     {
       id: 'city',
       label: formatMessage(labels.cities),
-      url: updateParams({ view: 'city' }),
+      path: updateParams({ view: 'city' }),
     },
     {
       id: 'language',
       label: formatMessage(labels.languages),
-      url: updateParams({ view: 'language' }),
+      path: updateParams({ view: 'language' }),
     },
     {
       id: 'screen',
       label: formatMessage(labels.screens),
-      url: updateParams({ view: 'screen' }),
+      path: updateParams({ view: 'screen' }),
     },
     {
       id: 'event',
       label: formatMessage(labels.events),
-      url: updateParams({ view: 'event' }),
+      path: updateParams({ view: 'event' }),
     },
     {
       id: 'query',
       label: formatMessage(labels.queryParameters),
-      url: updateParams({ view: 'query' }),
+      path: updateParams({ view: 'query' }),
     },
     {
       id: 'hostname',
       label: formatMessage(labels.hostname),
-      url: updateParams({ view: 'hostname' }),
+      path: updateParams({ view: 'hostname' }),
     },
     {
       id: 'tag',
       label: formatMessage(labels.tags),
-      url: updateParams({ view: 'tag' }),
+      path: updateParams({ view: 'tag' }),
     },
   ];
 
@@ -150,19 +149,21 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
   return (
     <Panel>
       <Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
-        <SideMenu items={items} selectedKey={view} />
+        <NavMenu>
+          {items.map(({ id, label }) => {
+            return (
+              <NavMenuItem key={id}>
+                <Text>{label}</Text>
+              </NavMenuItem>
+            );
+          })}
+        </NavMenu>
         <Column border="left" paddingLeft="6" gap="6">
           <Row alignItems="center" justifyContent="space-between">
             <Heading size="1">{formatMessage(labels.previous)}</Heading>
             <DateDisplay startDate={startDate} endDate={endDate} />
           </Row>
-          <Component
+          <Component websiteId={websiteId} limit={20} showMore={false} params={params} />
-            websiteId={websiteId}
-            limit={20}
-            showMore={false}
-            onDataLoad={setData}
-            params={params}
-          />
         </Column>
         <Column border="left" paddingLeft="6" gap="6">
           <Row alignItems="center" justifyContent="space-between">

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

@@ -1,18 +1,29 @@
 'use client';
-import { Column } from '@umami/react-zen';
+import { Column, Modal, Dialog } from '@umami/react-zen';
 import { useNavigation } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteExpandedView } from './WebsiteExpandedView';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { WebsiteTableView } from './WebsiteTableView';
-import { WebsiteCompareTables } from './WebsiteCompareTables';
 import { WebsiteControls } from './WebsiteControls';
 
 export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
   const {
+    router,
     query: { view, compare },
+    updateParams,
   } = useNavigation();
+  const handleClose = (close: () => void) => {
+    router.push(updateParams({ view: undefined }));
+    close();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.push(updateParams({ view: undefined }));
+    }
+  };
 
   return (
     <Column gap>
@@ -21,9 +32,14 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
       <Panel>
         <WebsiteChart websiteId={websiteId} compareMode={compare} />
       </Panel>
-      {!view && !compare && <WebsiteTableView websiteId={websiteId} />}
+      <WebsiteTableView websiteId={websiteId} />
-      {view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
+      <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
-      {compare && <WebsiteCompareTables websiteId={websiteId} />}
+        <Dialog style={{ width: '90vw', height: '90vh' }}>
+          {({ close }) => {
+            return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
+          }}
+        </Dialog>
+      </Modal>
     </Column>
   );
 }

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

@@ -1,7 +1,5 @@
-import { Icon, Text, Grid, Column } from '@umami/react-zen';
+import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
-import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { SideMenu } from '@/components/common/SideMenu';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
 import { CountriesTable } from '@/components/metrics/CountriesTable';
@@ -17,8 +15,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
 import { ScreenTable } from '@/components/metrics/ScreenTable';
 import { TagsTable } from '@/components/metrics/TagsTable';
 import { ChannelsTable } from '@/components/metrics/ChannelsTable';
-import { Panel } from '@/components/common/Panel';
+import Link from 'next/link';
-import { Arrow } from '@/components/icons';
 
 const views = {
   path: PagesTable,
@@ -44,10 +41,10 @@ const views = {
 
 export function WebsiteExpandedView({
   websiteId,
-  domainName,
+  onClose,
 }: {
   websiteId: string;
-  domainName?: string;
+  onClose?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
   const {
@@ -59,107 +56,107 @@ export function WebsiteExpandedView({
     {
       id: 'path',
       label: formatMessage(labels.pages),
-      url: updateParams({ view: 'path' }),
+      path: updateParams({ view: 'path' }),
     },
     {
       id: 'referrer',
       label: formatMessage(labels.referrers),
-      url: updateParams({ view: 'referrer' }),
+      path: updateParams({ view: 'referrer' }),
     },
     {
       id: 'channel',
       label: formatMessage(labels.channels),
-      url: updateParams({ view: 'channel' }),
+      path: updateParams({ view: 'channel' }),
     },
     {
       id: 'browser',
       label: formatMessage(labels.browsers),
-      url: updateParams({ view: 'browser' }),
+      path: updateParams({ view: 'browser' }),
     },
     {
       id: 'os',
       label: formatMessage(labels.os),
-      url: updateParams({ view: 'os' }),
+      path: updateParams({ view: 'os' }),
     },
     {
       id: 'device',
       label: formatMessage(labels.devices),
-      url: updateParams({ view: 'device' }),
+      path: updateParams({ view: 'device' }),
     },
     {
       id: 'country',
       label: formatMessage(labels.countries),
-      url: updateParams({ view: 'country' }),
+      path: updateParams({ view: 'country' }),
     },
     {
       id: 'region',
       label: formatMessage(labels.regions),
-      url: updateParams({ view: 'region' }),
+      path: updateParams({ view: 'region' }),
     },
     {
       id: 'city',
       label: formatMessage(labels.cities),
-      url: updateParams({ view: 'city' }),
+      path: updateParams({ view: 'city' }),
     },
     {
       id: 'language',
       label: formatMessage(labels.languages),
-      url: updateParams({ view: 'language' }),
+      path: updateParams({ view: 'language' }),
     },
     {
       id: 'screen',
       label: formatMessage(labels.screens),
-      url: updateParams({ view: 'screen' }),
+      path: updateParams({ view: 'screen' }),
     },
     {
       id: 'event',
       label: formatMessage(labels.events),
-      url: updateParams({ view: 'event' }),
+      path: updateParams({ view: 'event' }),
     },
     {
       id: 'query',
       label: formatMessage(labels.queryParameters),
-      url: updateParams({ view: 'query' }),
+      path: updateParams({ view: 'query' }),
     },
     {
       id: 'hostname',
       label: formatMessage(labels.hostname),
-      url: updateParams({ view: 'hostname' }),
+      path: updateParams({ view: 'hostname' }),
     },
     {
       id: 'tag',
       label: formatMessage(labels.tags),
-      url: updateParams({ view: 'tag' }),
+      path: updateParams({ view: 'tag' }),
     },
   ];
 
   const DetailsComponent = views[view] || (() => null);
 
   return (
-    <Panel>
+    <Grid columns="auto 1fr" gap="6" height="100%">
-      <Grid columns="auto 1fr" gap="6">
+      <Column gap="6" width="200px" border="right" paddingRight="3">
-        <Column gap="6" width="200px" border="right" paddingRight="3">
+        <NavMenu position="sticky" top="0">
-          <LinkButton href={updateParams({ view: undefined })} variant="quiet" scroll={false}>
+          {items.map(({ id, label, path }) => {
-            <Icon rotate={180}>
+            return (
-              <Arrow />
+              <Link key={id} href={path}>
-            </Icon>
+                <NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
-            <Text>{formatMessage(labels.back)}</Text>
+              </Link>
-          </LinkButton>
+            );
-          <SideMenu items={items} selectedKey={view} />
+          })}
-        </Column>
+        </NavMenu>
-        <Column>
+      </Column>
-          <DetailsComponent
+      <Column>
-            websiteId={websiteId}
+        <DetailsComponent
-            domainName={domainName}
+          websiteId={websiteId}
-            animate={false}
+          animate={false}
-            virtualize={true}
+          virtualize={true}
-            itemCount={25}
+          itemCount={25}
-            allowFilter={true}
+          allowFilter={true}
-            allowSearch={true}
+          allowSearch={true}
-            expanded={true}
+          isExpanded={true}
-          />
+          onClose={onClose}
-        </Column>
+        />
-      </Grid>
+      </Column>
-    </Panel>
+    </Grid>
   );
 }

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

@@ -10,25 +10,27 @@ import { WorldMap } from '@/components/metrics/WorldMap';
 import { CountriesTable } from '@/components/metrics/CountriesTable';
 
 export function WebsiteTableView({ websiteId }: { websiteId: string }) {
+  const props = { websiteId, limit: 10, allowDownload: false };
+
   return (
     <Grid gap="3">
       <GridRow layout="two">
         <Panel>
-          <PagesTable websiteId={websiteId} limit={10} />
+          <PagesTable {...props} />
         </Panel>
         <Panel>
-          <ReferrersTable websiteId={websiteId} limit={10} />
+          <ReferrersTable {...props} />
         </Panel>
       </GridRow>
       <GridRow layout="three">
         <Panel>
-          <BrowsersTable websiteId={websiteId} limit={10} />
+          <BrowsersTable {...props} />
         </Panel>
         <Panel>
-          <OSTable websiteId={websiteId} limit={10} />
+          <OSTable {...props} />
         </Panel>
         <Panel>
-          <DevicesTable websiteId={websiteId} limit={10} />
+          <DevicesTable {...props} />
         </Panel>
       </GridRow>
       <GridRow layout="two-one">
@@ -36,7 +38,7 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
           <WorldMap websiteId={websiteId} />
         </Panel>
         <Panel>
-          <CountriesTable websiteId={websiteId} limit={10} />
+          <CountriesTable {...props} />
         </Panel>
       </GridRow>
     </Grid>

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

@@ -22,7 +22,7 @@ export function SegmentEditForm({
   onSave,
   onClose,
 }: {
-  segmentId: string;
+  segmentId?: string;
   websiteId: string;
   filters?: any[];
   showFilters?: boolean;

src/components/common/SideMenu.tsx

@@ -15,9 +15,16 @@ export interface SideMenuProps {
   title?: string;
   selectedKey?: string;
   allowMinimize?: boolean;
+  children?: React.ReactNode;
 }
 
-export function SideMenu({ items, title, selectedKey, allowMinimize, children }: SideMenuProps) {
+export function SideMenu({
+  items = [],
+  title,
+  selectedKey,
+  allowMinimize,
+  children,
+}: SideMenuProps) {
   return (
     <Column
       gap
@@ -36,7 +43,7 @@ export function SideMenu({ items, title, selectedKey, allowMinimize, children }:
         </Row>
       )}
       <NavMenu muteItems={false} gap="6">
-        {items.map(({ label, items }) => {
+        {items?.map(({ label, items }) => {
           return (
             <NavMenuGroup
               title={label}
@@ -45,7 +52,7 @@ export function SideMenu({ items, title, selectedKey, allowMinimize, children }:
               allowMinimize={allowMinimize}
               marginBottom="3"
             >
-              {items.map(({ id, label, icon, path }) => {
+              {items?.map(({ id, label, icon, path }) => {
                 const isSelected = selectedKey === id;
 
                 return (

src/components/hooks/useNavigation.ts

@@ -18,10 +18,6 @@ export function useNavigation() {
     return buildUrl(pathname, params);
   };
 
-  useEffect(() => {
-    setQueryParams(Object.fromEntries(searchParams));
-  }, [searchParams.toString()]);
-
   const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
     return buildUrl(
       teamId ? `/teams/${teamId}${path}` : path,
@@ -29,6 +25,10 @@ export function useNavigation() {
     );
   };
 
+  useEffect(() => {
+    setQueryParams(Object.fromEntries(searchParams));
+  }, [searchParams.toString()]);
+
   return {
     router,
     pathname,

src/components/metrics/MetricsTable.tsx

@@ -7,11 +7,11 @@ import {
   useWebsiteExpandedMetricsQuery,
   useWebsiteMetricsQuery,
 } from '@/components/hooks';
-import { Arrow } from '@/components/icons';
+import { Close, Maximize } from '@/components/icons';
 import { DownloadButton } from '@/components/input/DownloadButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
+import { Button, Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
 import { ReactNode, useMemo, useState } from 'react';
 import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable';
 import { ListTable, ListTableProps } from './ListTable';
@@ -28,7 +28,8 @@ export interface MetricsTableProps extends ListTableProps {
   showMore?: boolean;
   params?: { [key: string]: any };
   allowDownload?: boolean;
-  expanded?: boolean;
+  isExpanded?: boolean;
+  onClose?: () => void;
   children?: ReactNode;
 }
 
@@ -43,7 +44,8 @@ export function MetricsTable({
   showMore = true,
   params,
   allowDownload = true,
-  expanded = false,
+  isExpanded = false,
+  onClose,
   children,
   ...props
 }: MetricsTableProps) {
@@ -61,7 +63,7 @@ export function MetricsTable({
     },
     {
       retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-      enabled: expanded,
+      enabled: isExpanded,
     },
   );
 
@@ -75,11 +77,11 @@ export function MetricsTable({
     },
     {
       retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-      enabled: !expanded,
+      enabled: !isExpanded,
     },
   );
 
-  const { data, isLoading, isFetching, error } = expanded ? expandedQuery : query;
+  const { data, isLoading, isFetching, error } = isExpanded ? expandedQuery : query;
 
   const filteredData = useMemo(() => {
     if (data) {
@@ -110,20 +112,27 @@ export function MetricsTable({
     return [];
   }, [data, dataFilter, search, limit, formatValue, type]);
 
-  const downloadData = expanded ? data : filteredData;
+  const downloadData = isExpanded ? data : filteredData;
 
   return (
     <Column gap="3" justifyContent="space-between">
       <LoadingPanel isFetching={isFetching} isLoading={isLoading} error={error} gap>
         <Row alignItems="center" justifyContent="space-between">
           {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
-          <Row>
+          <Row gap>
             {children}
             {allowDownload && <DownloadButton filename={type} data={downloadData} />}
+            {onClose && (
+              <Button onPress={onClose} variant="quiet">
+                <Icon>
+                  <Close />
+                </Icon>
+              </Button>
+            )}
           </Row>
         </Row>
         {data &&
-          (expanded ? (
+          (isExpanded ? (
             <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
           ) : (
             <ListTable {...(props as ListTableProps)} data={filteredData} />
@@ -131,10 +140,10 @@ export function MetricsTable({
         <Row justifyContent="center">
           {showMore && data && !error && limit && (
             <LinkButton href={updateParams({ view: type })} variant="quiet">
-              <Text>{formatMessage(labels.more)}</Text>
               <Icon size="sm">
-                <Arrow />
+                <Maximize />
               </Icon>
+              <Text>{formatMessage(labels.more)}</Text>
             </LinkButton>
           )}
         </Row>

src/components/metrics/QueryParametersTable.tsx

@@ -58,7 +58,7 @@ export function QueryParametersTable({
       dataFilter={filters[filter]}
       renderLabel={renderLabel}
       delay={0}
-      expanded={false}
+      isExpanded={false}
     >
       {allowFilter && <FilterButtons items={buttons} value={filter} onChange={setFilter} />}
     </MetricsTable>