add close button on session modal

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

@@ -29,9 +29,11 @@ export function SessionModal({ websiteId, ...props }: SessionModalProps) {
     >
       <Column height="100%" maxWidth="1320px" style={{ margin: '0 auto' }}>
         <Dialog variant="sheet">
-          <Column padding="6">
+          {({ close }) => (
-            <SessionProfile websiteId={websiteId} sessionId={session} />
+            <Column padding="6">
-          </Column>
+              <SessionProfile websiteId={websiteId} sessionId={session} onClose={() => close()} />
+            </Column>
+          )}
         </Dialog>
       </Column>
     </Modal>

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

@@ -1,4 +1,14 @@
-import { TextField, Row, Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
+import {
+  TextField,
+  Row,
+  Column,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+  Button,
+  Icon,
+} from '@umami/react-zen';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
@@ -6,8 +16,17 @@ import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
 import { SessionStats } from './SessionStats';
+import { X } from 'lucide-react';
 
-export function SessionProfile({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
+export function SessionProfile({
+  websiteId,
+  sessionId,
+  onClose,
+}: {
+  websiteId: string;
+  sessionId: string;
+  onClose?: () => void;
+}) {
   const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
   const { formatMessage, labels } = useMessages();
 
@@ -21,6 +40,15 @@ export function SessionProfile({ websiteId, sessionId }: { websiteId: string; se
     >
       {data && (
         <Column gap>
+          {onClose && (
+            <Row justifyContent="flex-end">
+              <Button onPress={onClose} variant="quiet">
+                <Icon>
+                  <X />
+                </Icon>
+              </Button>
+            </Row>
+          )}
           <Column gap="6">
             <Row justifyContent="center" alignItems="center" gap="6">
               <Avatar seed={data?.id} size={128} />