Fixed empty website select. Converted session profile to popover.

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

@@ -0,0 +1,73 @@
+import { Grid, Row, Column, Tabs, TabList, Tab, TabPanel, Icon, Button } from '@umami/react-zen';
+import { Avatar } from '@/components/common/Avatar';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { X } from '@/components/icons';
+import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
+import { SessionActivity } from './SessionActivity';
+import { SessionData } from './SessionData';
+import { SessionInfo } from './SessionInfo';
+import { SessionStats } from './SessionStats';
+
+export function SessionProfile({
+  websiteId,
+  sessionId,
+  onClose,
+}: {
+  websiteId: string;
+  sessionId: string;
+  onClose?: () => void;
+}) {
+  const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <LoadingPanel
+      data={data}
+      isLoading={isLoading}
+      error={error}
+      loadingIcon="spinner"
+      loadingPlacement="absolute"
+    >
+      {data && (
+        <Column gap>
+          <Row alignItems="center" justifyContent="flex-end">
+            <Button onPress={onClose} variant="quiet">
+              <Icon>
+                <X />
+              </Icon>
+            </Button>
+          </Row>
+          <Grid columns="340px 1fr" gap="6">
+            <Column gap="6">
+              <Row justifyContent="center">
+                <Avatar seed={data?.id} size={128} />
+              </Row>
+              <SessionInfo data={data} />
+            </Column>
+            <Column gap>
+              <SessionStats data={data} />
+
+              <Tabs>
+                <TabList>
+                  <Tab id="activity">{formatMessage(labels.activity)}</Tab>
+                  <Tab id="properties">{formatMessage(labels.properties)}</Tab>
+                </TabList>
+                <TabPanel id="activity">
+                  <SessionActivity
+                    websiteId={websiteId}
+                    sessionId={sessionId}
+                    startDate={data?.firstAt}
+                    endDate={data?.lastAt}
+                  />
+                </TabPanel>
+                <TabPanel id="properties">
+                  <SessionData sessionId={sessionId} websiteId={websiteId} />
+                </TabPanel>
+              </Tabs>
+            </Column>
+          </Grid>
+        </Column>
+      )}
+    </LoadingPanel>
+  );
+}