Added segment filtering to filter form.

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

@@ -13,19 +13,26 @@ export function WebsiteFilterButton({
   showText?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { updateParams, router } = useNavigation();
+  const {
+    replaceParams,
+    router,
+    query: { segment },
+  } = useNavigation();
   const { filters } = useFilters();
 
-  const handleChange = (filters: any[]) => {
-    const params = filters.reduce((obj, filter) => {
-      const { name, operator, value } = filter;
+  const handleChange = ({ filters, segment }) => {
+    const params = filters.reduce(
+      (obj: { [x: string]: string }, filter: { name: any; operator: any; value: any }) => {
+        const { name, operator, value } = filter;
 
-      obj[name] = `${operator}.${value}`;
+        obj[name] = `${operator}.${value}`;
 
-      return obj;
-    }, {});
+        return obj;
+      },
+      {},
+    );
 
-    const url = updateParams(params);
+    const url = replaceParams({ ...params, segment: segment?.id });
 
     router.push(url);
   };
@@ -39,12 +46,13 @@ export function WebsiteFilterButton({
         {showText && <Text>{formatMessage(labels.filter)}</Text>}
       </Button>
       <Modal>
-        <Dialog>
+        <Dialog title={formatMessage(labels.filters)} style={{ width: 800, minHeight: 600 }}>
           {({ close }) => {
             return (
               <FilterEditForm
                 websiteId={websiteId}
-                data={filters}
+                filters={filters}
+                segmentId={segment}
                 onChange={handleChange}
                 onClose={close}
               />

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

@@ -14,7 +14,7 @@ const KEY_NAME = 'umami.events.tab';
 
 export function EventsPage({ websiteId }) {
   const [label, setLabel] = useState(null);
-  const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity');
+  const [tab, setTab] = useState(getItem(KEY_NAME) || 'chart');
   const { formatMessage, labels } = useMessages();
 
   const handleLabelClick = (value: string) => {
@@ -32,8 +32,8 @@ export function EventsPage({ websiteId }) {
       <Panel>
         <Tabs selectedKey={tab} onSelectionChange={key => handleSelect(key)}>
           <TabList>
-            <Tab id="activity">{formatMessage(labels.activity)}</Tab>
             <Tab id="chart">{formatMessage(labels.chart)}</Tab>
+            <Tab id="activity">{formatMessage(labels.activity)}</Tab>
             <Tab id="properties">{formatMessage(labels.properties)}</Tab>
           </TabList>
           <TabPanel id="activity">
@@ -41,7 +41,9 @@ export function EventsPage({ websiteId }) {
           </TabPanel>
           <TabPanel id="chart">
             <Column gap="6">
-              <EventsChart websiteId={websiteId} focusLabel={label} />
+              <Column border="bottom" paddingBottom="6">
+                <EventsChart websiteId={websiteId} focusLabel={label} />
+              </Column>
               <EventsTable
                 websiteId={websiteId}
                 type="event"

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

@@ -43,7 +43,7 @@ export function EventsTable({ data = [] }) {
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="browser" label={formatMessage(labels.browser)} width="120px">
+      <DataColumn id="browser" label={formatMessage(labels.browser)} width="140px">
         {(row: any) => (
           <TypeIcon type="browser" value={row.browser}>
             {formatValue(row.browser, 'browser')}

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

@@ -1,21 +1,29 @@
 'use client';
-import { useState } from 'react';
+import { Key, useState } from 'react';
 import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
 import { SessionsDataTable } from './SessionsDataTable';
 import { SessionProperties } from './SessionProperties';
 import { useMessages } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { getItem, setItem } from '@/lib/storage';
+
+const KEY_NAME = 'umami.sessions.tab';
 
 export function SessionsPage({ websiteId }) {
-  const [tab, setTab] = useState('activity');
+  const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity');
   const { formatMessage, labels } = useMessages();
 
+  const handleSelect = (value: Key) => {
+    setItem(KEY_NAME, value);
+    setTab(value);
+  };
+
   return (
     <Column gap="3">
       <WebsiteControls websiteId={websiteId} />
       <Panel>
-        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
+        <Tabs selectedKey={tab} onSelectionChange={handleSelect}>
           <TabList>
             <Tab id="activity">{formatMessage(labels.activity)}</Tab>
             <Tab id="properties">{formatMessage(labels.properties)}</Tab>