fix: improvements for frontend

apps/start/src/components/events/event-listener.tsx

@@ -8,7 +8,8 @@ import { useDebounceState } from '@/hooks/use-debounce-state';
 import useWS from '@/hooks/use-ws';
 import { cn } from '@/utils/cn';
 
-import type { IServiceEventMinimal } from '@openpanel/db';
+import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
+import { useParams } from '@tanstack/react-router';
 import { AnimatedNumber } from '../animated-number';
 
 export default function EventListener({
@@ -16,13 +17,24 @@ export default function EventListener({
 }: {
   onRefresh: () => void;
 }) {
+  const params = useParams({
+    strict: false,
+  });
   const { projectId } = useAppParams();
   const counter = useDebounceState(0, 1000);
-
-  useWS<IServiceEventMinimal>(
+  useWS<IServiceEventMinimal | IServiceEvent>(
     `/live/events/${projectId}`,
     (event) => {
-      if (event?.name) {
+      if (event) {
+        const isProfilePage = !!params?.profileId;
+        if (isProfilePage) {
+          const profile = 'profile' in event ? event.profile : null;
+          if (profile?.id === params?.profileId) {
+            counter.set((prev) => prev + 1);
+          }
+          return;
+        }
+
         counter.set((prev) => prev + 1);
       }
     },

apps/start/src/components/events/table/columns.tsx

@@ -3,10 +3,11 @@ import { ProjectLink } from '@/components/links';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
 import { useNumber } from '@/hooks/use-numer-formatter';
 import { pushModal } from '@/modals';
-import { formatDateTime, formatTimeAgoOrDateTime } from '@/utils/date';
+import { formatDateTime, formatTimeAgoOrDateTime, timeAgo } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
 import type { ColumnDef } from '@tanstack/react-table';
 
+import { ColumnCreatedAt } from '@/components/column-created-at';
 import { KeyValueGrid } from '@/components/ui/key-value-grid';
 import type { IServiceEvent } from '@openpanel/db';
 
@@ -16,19 +17,10 @@ export function useColumns() {
     {
       accessorKey: 'createdAt',
       header: 'Created at',
-      size: 140,
+      size: ColumnCreatedAt.size,
       cell: ({ row }) => {
         const session = row.original;
-        return (
-          <div className="relative">
-            <div className="absolute inset-0 opacity-0 group-hover/row:opacity-100 transition-opacity duration-100">
-              {formatDateTime(session.createdAt)}
-            </div>
-            <div className="text-muted-foreground group-hover/row:opacity-0 transition-opacity duration-100">
-              {formatTimeAgoOrDateTime(session.createdAt)}
-            </div>
-          </div>
-        );
+        return <ColumnCreatedAt>{session.createdAt}</ColumnCreatedAt>;
       },
     },
     {

apps/start/src/components/events/table/index.tsx

@@ -1,6 +1,8 @@
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
-import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import {
+  OverviewFilterButton,
+  OverviewFiltersButtons,
+} from '@/components/overview/filters/overview-filters-buttons';
 import { Skeleton } from '@/components/skeleton';
 import { Button } from '@/components/ui/button';
 import { useDataTableColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
@@ -9,24 +11,19 @@ import { DataTableViewOptions } from '@/components/ui/data-table/data-table-view
 import { useAppParams } from '@/hooks/use-app-params';
 import { pushModal } from '@/modals';
 import type { RouterInputs, RouterOutputs } from '@/trpc/client';
-import { arePropsEqual } from '@/utils/are-props-equal';
 import { cn } from '@/utils/cn';
 import type { IServiceEvent } from '@openpanel/db';
 import type { UseInfiniteQueryResult } from '@tanstack/react-query';
 import type { Table } from '@tanstack/react-table';
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { Updater } from '@tanstack/react-table';
-import { ColumnOrderState } from '@tanstack/react-table';
 import { useWindowVirtualizer } from '@tanstack/react-virtual';
 import type { TRPCInfiniteData } from '@trpc/tanstack-react-query';
 import { format } from 'date-fns';
-import throttle from 'lodash.throttle';
-import { CalendarIcon, Loader2Icon } from 'lucide-react';
+import { CalendarIcon, FilterIcon, Loader2Icon } from 'lucide-react';
 import { parseAsIsoDateTime, useQueryState } from 'nuqs';
 import { last } from 'ramda';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { useInViewport } from 'react-in-viewport';
-import { useLocalStorage } from 'usehooks-ts';
 import EventListener from '../event-listener';
 import { useColumns } from './columns';
 
@@ -328,11 +325,7 @@ function EventsTableToolbar({
             ? `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`
             : 'Date range'}
         </Button>
-        <OverviewFiltersDrawer
-          mode="events"
-          projectId={projectId}
-          enableEventsFilter
-        />
+        <OverviewFilterButton enableEventsFilter />
         <OverviewFiltersButtons className="justify-end p-0" />
       </div>
       <DataTableViewOptions table={table} />