Fixed empty website select. Converted session profile to popover.

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

@@ -1,18 +1,35 @@
 'use client';
 import { Key, useState } from 'react';
-import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
+import { TabList, Tab, Tabs, TabPanel, Column, Modal, Dialog } from '@umami/react-zen';
 import { SessionsDataTable } from './SessionsDataTable';
 import { SessionProperties } from './SessionProperties';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { getItem, setItem } from '@/lib/storage';
+import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
 
 const KEY_NAME = 'umami.sessions.tab';
 
 export function SessionsPage({ websiteId }) {
   const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity');
   const { formatMessage, labels } = useMessages();
+  const {
+    router,
+    query: { session },
+    updateParams,
+  } = useNavigation();
+
+  const handleClose = (close: () => void) => {
+    router.push(updateParams({ session: undefined }));
+    close();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.push(updateParams({ session: undefined }));
+    }
+  };
 
   const handleSelect = (value: Key) => {
     setItem(KEY_NAME, value);
@@ -36,6 +53,26 @@ export function SessionsPage({ websiteId }) {
           </TabPanel>
         </Tabs>
       </Panel>
+      <Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable>
+        <Dialog
+          style={{
+            maxWidth: 1320,
+            width: '100vw',
+            minHeight: '300px',
+            height: 'calc(100vh - 40px)',
+          }}
+        >
+          {({ close }) => {
+            return (
+              <SessionProfile
+                websiteId={websiteId}
+                sessionId={session}
+                onClose={() => handleClose(close)}
+              />
+            );
+          }}
+        </Dialog>
+      </Modal>
     </Column>
   );
 }