improve(dashboard): better event selector and other improvements

2025-06-05 11:28:06 +02:00
parent cd5dce02b8
commit f59bcfba3c
17 changed files with 470 additions and 145 deletions
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-content.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-content.tsx
@@ -13,13 +13,17 @@ export default function LayoutContent({
  const segments = useSelectedLayoutSegments();

  if (segments[0] && NOT_MIGRATED_PAGES.includes(segments[0])) {
-    return <div className="pb-20 transition-all lg:pl-72">{children}</div>;
+    return (
+      <div className="pb-20 transition-all lg:pl-72 max-w-screen-2xl">
+        {children}
+      </div>
+    );
  }

  return (
    <div
      className={cn(
-        'pb-20 transition-all max-lg:mt-12 lg:pl-72',
+        'pb-20 transition-all max-lg:mt-12 lg:pl-72 max-w-screen-2xl',
        segments.includes('chat') && 'pb-0',
      )}
    >
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
@@ -53,7 +53,7 @@ export default async function Page({
          <SettingsToggle />
        </div>
      </FullWidthNavbar>
-      <div className="mx-auto flex flex-col gap-4 p-4 pt-20 md:max-w-[95vw] lg:max-w-[80vw] ">
+      <div className="mx-auto flex flex-col gap-4 p-4 pt-20 md:w-[95vw] lg:w-[80vw] max-w-screen-2xl">
        <div className="grid gap-4 md:grid-cols-2">
          {projects.map((item) => (
            <ProjectCard key={item.id} {...item} />
--- a/apps/dashboard/src/components/events/event-icon.tsx
+++ b/apps/dashboard/src/components/events/event-icon.tsx
@@ -9,6 +9,7 @@ import type { EventMeta } from '@openpanel/db';
 const variants = cva('flex shrink-0 items-center justify-center rounded-full', {
  variants: {
    size: {
+      xs: 'h-5 w-5',
      sm: 'h-6 w-6',
      default: 'h-10 w-10',
    },
@@ -96,6 +97,98 @@ export const EventIconMapper: Record<string, LucideIcon> = {
  RepeatIcon: Icons.RepeatIcon,
  ShareIcon: Icons.ShareIcon,
  ExternalLinkIcon: Icons.ExternalLinkIcon,
+  UserIcon: Icons.UserIcon,
+  UsersIcon: Icons.UsersIcon,
+  UserPlusIcon: Icons.UserPlusIcon,
+  UserMinusIcon: Icons.UserMinusIcon,
+  UserCheckIcon: Icons.UserCheckIcon,
+  UserXIcon: Icons.UserXIcon,
+  PlayIcon: Icons.PlayIcon,
+  PauseIcon: Icons.PauseIcon,
+  SkipForwardIcon: Icons.SkipForwardIcon,
+  SkipBackIcon: Icons.SkipBackIcon,
+  VolumeIcon: Icons.VolumeIcon,
+  VolumeOffIcon: Icons.VolumeOffIcon,
+  ImageIcon: Icons.ImageIcon,
+  VideoIcon: Icons.VideoIcon,
+  MusicIcon: Icons.MusicIcon,
+  CameraIcon: Icons.CameraIcon,
+  ClickIcon: Icons.MousePointerClickIcon,
+  ChevronDownIcon: Icons.ChevronDownIcon,
+  ChevronUpIcon: Icons.ChevronUpIcon,
+  ChevronLeftIcon: Icons.ChevronLeftIcon,
+  ChevronRightIcon: Icons.ChevronRightIcon,
+  ArrowUpIcon: Icons.ArrowUpIcon,
+  ArrowDownIcon: Icons.ArrowDownIcon,
+  ArrowLeftIcon: Icons.ArrowLeftIcon,
+  ArrowRightIcon: Icons.ArrowRightIcon,
+  PhoneIcon: Icons.PhoneIcon,
+  MessageSquareIcon: Icons.MessageSquareIcon,
+  SendIcon: Icons.SendIcon,
+  ShoppingCartIcon: Icons.ShoppingCartIcon,
+  ShoppingBagIcon: Icons.ShoppingBagIcon,
+  CreditCardIcon: Icons.CreditCardIcon,
+  DollarSignIcon: Icons.DollarSignIcon,
+  EuroIcon: Icons.EuroIcon,
+  HeartIcon: Icons.HeartIcon,
+  StarIcon: Icons.StarIcon,
+  ThumbsUpIcon: Icons.ThumbsUpIcon,
+  ThumbsDownIcon: Icons.ThumbsDownIcon,
+  SmileIcon: Icons.SmileIcon,
+  FrownIcon: Icons.FrownIcon,
+  BarChartIcon: Icons.BarChartIcon,
+  LineChartIcon: Icons.LineChartIcon,
+  PieChartIcon: Icons.PieChartIcon,
+  TrendingUpIcon: Icons.TrendingUpIcon,
+  TrendingDownIcon: Icons.TrendingDownIcon,
+  TargetIcon: Icons.TargetIcon,
+  ShieldIcon: Icons.ShieldIcon,
+  EyeIcon: Icons.EyeIcon,
+  EyeOffIcon: Icons.EyeOffIcon,
+  KeyIcon: Icons.KeyIcon,
+  UnlockIcon: Icons.UnlockIcon,
+  SettingsIcon: Icons.SettingsIcon,
+  RefreshCwIcon: Icons.RefreshCwIcon,
+  TrashIcon: Icons.TrashIcon,
+  EditIcon: Icons.EditIcon,
+  PlusIcon: Icons.PlusIcon,
+  MinusIcon: Icons.MinusIcon,
+  XIcon: Icons.XIcon,
+  CheckIcon: Icons.CheckIcon,
+  SaveIcon: Icons.SaveIcon,
+  UploadIcon: Icons.UploadIcon,
+  SmartphoneIcon: Icons.SmartphoneIcon,
+  TabletIcon: Icons.TabletIcon,
+  LaptopIcon: Icons.LaptopIcon,
+  MonitorIcon: Icons.MonitorIcon,
+  WifiIcon: Icons.WifiIcon,
+  MapPinIcon: Icons.MapPinIcon,
+  NavigationIcon: Icons.NavigationIcon,
+  CompassIcon: Icons.CompassIcon,
+  FolderIcon: Icons.FolderIcon,
+  FileTextIcon: Icons.FileTextIcon,
+  FilePlusIcon: Icons.FilePlusIcon,
+  FileMinusIcon: Icons.FileMinusIcon,
+  DatabaseIcon: Icons.DatabaseIcon,
+  AlertCircleIcon: Icons.AlertCircleIcon,
+  InfoIcon: Icons.InfoIcon,
+  HelpCircleIcon: Icons.HelpCircleIcon,
+  CheckCircleIcon: Icons.CheckCircleIcon,
+  XCircleIcon: Icons.XCircleIcon,
+  CalendarDaysIcon: Icons.CalendarDaysIcon,
+  CalendarPlusIcon: Icons.CalendarPlusIcon,
+  TimerIcon: Icons.TimerIcon,
+  FilterIcon: Icons.FilterIcon,
+  SortAscIcon: Icons.ArrowUpAZIcon,
+  SortDescIcon: Icons.ArrowDownZAIcon,
+  CopyIcon: Icons.CopyIcon,
+  LinkIcon: Icons.LinkIcon,
+  QrCodeIcon: Icons.QrCodeIcon,
+  ScanIcon: Icons.ScanIcon,
+  ZapIcon: Icons.ZapIcon,
+  FlameIcon: Icons.FlameIcon,
+  RocketIcon: Icons.RocketIcon,
+  TrophyIcon: Icons.TrophyIcon,
 };

 export const EventIconColors = [
@@ -139,7 +232,10 @@ export function EventIcon({ className, name, size, meta }: EventIconProps) {

  return (
    <div className={cn(`bg-${color}-200`, variants({ size }), className)}>
-      <Icon size={size === 'sm' ? 14 : 20} className={`text-${color}-700`} />
+      <Icon
+        size={size === 'xs' ? 12 : size === 'sm' ? 14 : 20}
+        className={`text-${color}-700`}
+      />
    </div>
  );
 }
--- a/apps/dashboard/src/components/full-width-navbar.tsx
+++ b/apps/dashboard/src/components/full-width-navbar.tsx
@@ -12,7 +12,7 @@ type Props = {
 const FullWidthNavbar = ({ children, className }: Props) => {
  return (
    <div className={cn('border-b border-border bg-card', className)}>
-      <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:max-w-[95vw] lg:max-w-[80vw]">
+      <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:w-[95vw] lg:w-[80vw] max-w-screen-2xl">
        <LogoSquare className="size-8" />
        {children}
      </div>
--- a/apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
+++ b/apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
@@ -21,6 +21,7 @@ import type {
  IChartEventFilterValue,
 } from '@openpanel/validation';

+import { ComboboxEvents } from '@/components/ui/combobox-events';
 import { useOverviewOptions } from '../useOverviewOptions';
 import { OriginFilter } from './origin-filter';

@@ -41,7 +42,6 @@ export function OverviewFiltersDrawerContent({
  enableEventsFilter,
  mode,
 }: OverviewFiltersDrawerContentProps) {
-  const { interval, range, startDate, endDate } = useOverviewOptions();
  const [filters, setFilter] = useEventQueryFilters(nuqsOptions);
  const [event, setEvent] = useEventQueryNamesFilter(nuqsOptions);
  const eventNames = useEventNames({ projectId });
@@ -59,18 +59,16 @@ export function OverviewFiltersDrawerContent({
        <div className="flex flex-col gap-4 p-4">
          <OriginFilter />
          {enableEventsFilter && (
-            <ComboboxAdvanced
+            <ComboboxEvents
              className="w-full"
              value={event}
              onChange={setEvent}
-              // First items is * which is only used for report editing
-              items={eventNames
-                .filter((item) => !excludePropertyFilter(item.name))
-                .map((item) => ({
-                  label: item.name,
-                  value: item.name,
-                }))}
+              multiple
+              items={eventNames.filter(
+                (item) => !excludePropertyFilter(item.name),
+              )}
              placeholder="Select event"
+              maxDisplayItems={2}
            />
          )}
          <Combobox
--- a/apps/dashboard/src/components/report-chart/funnel/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/funnel/chart.tsx
@@ -300,7 +300,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {

  return (
    <TooltipProvider data={data.current}>
-      <div className="aspect-video max-h-[100px] w-full p-4 card pb-1">
+      <div className="aspect-video max-h-[250px] w-full p-4 card pb-1">
        <ResponsiveContainer>
          <LineChart data={rechartData}>
            <CartesianGrid
--- a/apps/dashboard/src/components/report/ReportSegment.tsx
+++ b/apps/dashboard/src/components/report/ReportSegment.tsx
@@ -60,7 +60,7 @@ export function ReportSegment({
        <Button
          variant="outline"
          icon={Icons[value]}
-          className={cn('justify-start', className)}
+          className={cn('justify-start text-sm', className)}
        >
          {items.find((item) => item.value === value)?.label}
        </Button>
--- a/apps/dashboard/src/components/report/reportSlice.ts
+++ b/apps/dashboard/src/components/report/reportSlice.ts
@@ -94,6 +94,17 @@ export const reportSlice = createSlice({
        ...action.payload,
      });
    },
+    duplicateEvent: (state, action: PayloadAction<Omit<IChartEvent, 'id'>>) => {
+      state.dirty = true;
+      state.events.push({
+        ...action.payload,
+        filters: action.payload.filters.map((filter) => ({
+          ...filter,
+          id: shortId(),
+        })),
+        id: shortId(),
+      });
+    },
    removeEvent: (
      state,
      action: PayloadAction<{
@@ -270,6 +281,7 @@ export const {
  setName,
  addEvent,
  removeEvent,
+  duplicateEvent,
  changeEvent,
  addBreakdown,
  removeBreakdown,
--- a/apps/dashboard/src/components/report/sidebar/ReportEventMore.tsx
+++ b/apps/dashboard/src/components/report/sidebar/ReportEventMore.tsx
@@ -1,40 +1,17 @@
 import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Filter, MoreHorizontal, Tags, Trash } from 'lucide-react';
+import { CopyIcon, MoreHorizontal, TrashIcon } from 'lucide-react';
 import * as React from 'react';

-const labels = [
-  'feature',
-  'bug',
-  'enhancement',
-  'documentation',
-  'design',
-  'question',
-  'maintenance',
-];
-
 export interface ReportEventMoreProps {
-  onClick: (action: 'remove') => void;
+  onClick: (action: 'remove' | 'duplicate') => void;
 }

 export function ReportEventMore({ onClick }: ReportEventMoreProps) {
@@ -49,12 +26,16 @@ export function ReportEventMore({ onClick }: ReportEventMoreProps) {
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[200px]">
        <DropdownMenuGroup>
-          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => onClick('duplicate')}>
+            <CopyIcon className="mr-2 h-4 w-4" />
+            Duplicate
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
          <DropdownMenuItem
            className="text-red-600"
            onClick={() => onClick('remove')}
          >
-            <Trash className="mr-2 h-4 w-4" />
+            <TrashIcon className="mr-2 h-4 w-4" />
            Delete
            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
          </DropdownMenuItem>
--- a/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
@@ -1,8 +1,7 @@
 'use client';

 import { ColorSquare } from '@/components/color-square';
-import { Combobox } from '@/components/ui/combobox';
-import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
+import { ComboboxEvents } from '@/components/ui/combobox-events';
 import { Input } from '@/components/ui/input';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
@@ -27,11 +26,12 @@ import { CSS } from '@dnd-kit/utilities';
 import { shortId } from '@openpanel/common';
 import { alphabetIds } from '@openpanel/constants';
 import type { IChartEvent } from '@openpanel/validation';
-import { FilterIcon, GanttChartIcon, HandIcon } from 'lucide-react';
+import { FilterIcon, HandIcon } from 'lucide-react';
 import { ReportSegment } from '../ReportSegment';
 import {
  addEvent,
  changeEvent,
+  duplicateEvent,
  removeEvent,
  reorderEvents,
 } from '../reportSlice';
@@ -146,6 +146,7 @@ export function ReportEvents() {
  const eventNames = useEventNames({
    projectId,
  });
+
  const showSegment = !['retention', 'funnel'].includes(chartType);
  const showAddFilter = !['retention'].includes(chartType);
  const showDisplayNameInput = !['retention'].includes(chartType);
@@ -181,6 +182,9 @@ export function ReportEvents() {
        case 'remove': {
          return dispatch(removeEvent(event));
        }
+        case 'duplicate': {
+          return dispatch(duplicateEvent(event));
+        }
      }
    };

@@ -211,54 +215,42 @@ export function ReportEvents() {
                  isSelectManyEvents={isSelectManyEvents}
                  className="rounded-lg border bg-def-100"
                >
-                  {isSelectManyEvents ? (
-                    <ComboboxAdvanced
-                      className="flex-1"
-                      value={event.filters[0]?.value ?? []}
-                      onChange={(value) => {
-                        dispatch(
-                          changeEvent({
-                            id: event.id,
-                            segment: 'user',
-                            filters: [
-                              {
-                                name: 'name',
-                                operator: 'is',
-                                value: value,
+                  <ComboboxEvents
+                    className="flex-1"
+                    searchable
+                    multiple={isSelectManyEvents as false}
+                    value={
+                      (isSelectManyEvents
+                        ? (event.filters[0]?.value ?? [])
+                        : event.name) as any
+                    }
+                    onChange={(value) => {
+                      dispatch(
+                        changeEvent(
+                          Array.isArray(value)
+                            ? {
+                                id: event.id,
+                                segment: 'user',
+                                filters: [
+                                  {
+                                    name: 'name',
+                                    operator: 'is',
+                                    value: value,
+                                  },
+                                ],
+                                name: '*',
+                              }
+                            : {
+                                ...event,
+                                name: value,
+                                filters: [],
                              },
-                            ],
-                            name: '*',
-                          }),
-                        );
-                      }}
-                      items={eventNames.map((item) => ({
-                        label: item.name,
-                        value: item.name,
-                      }))}
-                      placeholder="Select event"
-                    />
-                  ) : (
-                    <Combobox
-                      icon={GanttChartIcon}
-                      className="flex-1"
-                      searchable
-                      value={event.name}
-                      onChange={(value) => {
-                        dispatch(
-                          changeEvent({
-                            ...event,
-                            name: value,
-                            filters: [],
-                          }),
-                        );
-                      }}
-                      items={eventNames.map((item) => ({
-                        label: item.name,
-                        value: item.name,
-                      }))}
-                      placeholder="Select event"
-                    />
-                  )}
+                        ),
+                      );
+                    }}
+                    items={eventNames}
+                    placeholder="Select event"
+                  />
                  {showDisplayNameInput && (
                    <Input
                      placeholder={
@@ -280,9 +272,8 @@ export function ReportEvents() {
              );
            })}

-            <Combobox
+            <ComboboxEvents
              disabled={isAddEventDisabled}
-              icon={GanttChartIcon}
              value={''}
              searchable
              onChange={(value) => {
@@ -310,11 +301,8 @@ export function ReportEvents() {
                  );
                }
              }}
-              items={eventNames.map((item) => ({
-                label: item.name,
-                value: item.name,
-              }))}
              placeholder="Select event"
+              items={eventNames}
            />
          </div>
        </SortableContext>
--- a/apps/dashboard/src/components/tooltip-complete.tsx
+++ b/apps/dashboard/src/components/tooltip-complete.tsx
@@ -6,6 +6,7 @@ interface TooltipCompleteProps {
  content: React.ReactNode | string;
  disabled?: boolean;
  side?: 'top' | 'right' | 'bottom' | 'left';
+  delay?: number;
 }

 export function TooltipComplete({
@@ -13,9 +14,10 @@ export function TooltipComplete({
  disabled,
  content,
  side,
+  delay,
 }: TooltipCompleteProps) {
  return (
-    <Tooltip>
+    <Tooltip delayDuration={delay}>
      <TooltipTrigger
        className="appearance-none"
        style={{ textAlign: 'inherit' }}
--- a/apps/dashboard/src/components/ui/combobox-events.tsx
+++ b/apps/dashboard/src/components/ui/combobox-events.tsx
@@ -0,0 +1,225 @@
+import type { ButtonProps } from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import type { RouterOutputs } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { PopoverPortal } from '@radix-ui/react-popover';
+import type { LucideIcon } from 'lucide-react';
+import { Check, CheckIcon, ChevronsUpDown, GanttChartIcon } from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
+import * as React from 'react';
+import { EventIcon, EventIconMapper } from '../events/event-icon';
+import { TooltipComplete } from '../tooltip-complete';
+
+/**
+ * Type-safe ComboboxEvents component that supports both single and multiple selection.
+ *
+ * @example
+ * // Single selection mode (default)
+ * <ComboboxEvents<string>
+ *   items={events}
+ *   value={selectedEvent}
+ *   onChange={(event: string) => setSelectedEvent(event)}
+ *   placeholder="Select an event"
+ * />
+ *
+ * @example
+ * // Multiple selection mode
+ * <ComboboxEvents<string, true>
+ *   items={events}
+ *   value={selectedEvents}
+ *   onChange={(events: string[]) => setSelectedEvents(events)}
+ *   placeholder="Select events"
+ *   multiple={true}
+ * />
+ */
+export interface ComboboxProps<T, TMultiple extends boolean = false> {
+  placeholder: string;
+  items: RouterOutputs['chart']['events'];
+  value: TMultiple extends true ? T[] : T | null | undefined;
+  onChange: TMultiple extends true ? (value: T[]) => void : (value: T) => void;
+  className?: string;
+  searchable?: boolean;
+  size?: ButtonProps['size'];
+  label?: string;
+  align?: 'start' | 'end' | 'center';
+  portal?: boolean;
+  error?: string;
+  disabled?: boolean;
+  multiple?: TMultiple;
+  maxDisplayItems?: number;
+}
+
+export function ComboboxEvents<
+  T extends string,
+  TMultiple extends boolean = false,
+>({
+  placeholder,
+  value,
+  onChange,
+  className,
+  searchable,
+  size,
+  align = 'start',
+  portal,
+  error,
+  disabled,
+  items,
+  multiple = false as TMultiple,
+  maxDisplayItems = 2,
+}: ComboboxProps<T, TMultiple>) {
+  const number = useNumber();
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState('');
+
+  const selectedValues = React.useMemo((): T[] => {
+    if (multiple) {
+      return Array.isArray(value) ? (value as T[]) : value ? [value as T] : [];
+    }
+    return value ? [value as T] : [];
+  }, [value, multiple]);
+
+  function find(value: string) {
+    return items.find(
+      (item) => item.name.toLowerCase() === value.toLowerCase(),
+    );
+  }
+
+  const current =
+    selectedValues.length > 0 && selectedValues[0]
+      ? find(selectedValues[0])
+      : null;
+
+  const handleSelection = (selectedValue: string) => {
+    if (multiple) {
+      const currentValues = selectedValues;
+      const newValues = currentValues.includes(selectedValue as T)
+        ? currentValues.filter((v) => v !== selectedValue)
+        : [...currentValues, selectedValue as T];
+      onChange(newValues as any);
+    } else {
+      onChange(selectedValue as any);
+      setOpen(false);
+    }
+  };
+
+  const renderTriggerContent = () => {
+    if (selectedValues.length === 0) {
+      return placeholder;
+    }
+
+    const firstValue = selectedValues[0];
+    const item = firstValue ? find(firstValue) : null;
+    let label = item?.name || firstValue;
+
+    if (multiple && selectedValues.length > 1) {
+      label += ` +${selectedValues.length - 1}`;
+    }
+
+    return label;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          disabled={disabled}
+          size={size}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            'justify-between',
+            !!error && 'border-destructive',
+            className,
+          )}
+        >
+          <div className="flex min-w-0 items-center">
+            {current?.meta ? (
+              <EventIcon
+                name={current.name}
+                meta={current.meta}
+                size="xs"
+                className="mr-2 shrink-0"
+              />
+            ) : (
+              <GanttChartIcon size={16} className="mr-2 shrink-0" />
+            )}
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+              {renderTriggerContent()}
+            </span>
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          className="w-full max-w-[33em] max-sm:max-w-[100vw] p-0"
+          align={align}
+          portal={portal}
+        >
+          <Command shouldFilter={false}>
+            {searchable === true && (
+              <CommandInput
+                placeholder="Search event..."
+                value={search}
+                onValueChange={setSearch}
+              />
+            )}
+
+            <CommandEmpty>Nothing selected</CommandEmpty>
+            <VirtualList
+              height={400}
+              data={items.filter((item) => {
+                if (search === '') return true;
+                return item.name.toLowerCase().includes(search.toLowerCase());
+              })}
+              itemHeight={32}
+              itemKey="value"
+              className="w-[33em] max-sm:max-w-[100vw]"
+            >
+              {(item) => {
+                return (
+                  <CommandItem
+                    className={cn(
+                      'p-4 py-2.5 gap-4',
+                      selectedValues.includes(item.name as T) && 'bg-accent',
+                    )}
+                    key={item.name}
+                    value={item.name}
+                    onSelect={(currentValue) => {
+                      handleSelection(currentValue);
+                    }}
+                  >
+                    {selectedValues.includes(item.name as T) ? (
+                      <CheckIcon className="h-4 w-4 flex-shrink-0" />
+                    ) : (
+                      <EventIcon name={item.name} meta={item.meta} size="sm" />
+                    )}
+                    <span className="font-medium flex-1 truncate">
+                      {item.name === '*' ? 'Any events' : item.name}
+                    </span>
+                    <span className="text-muted-foreground font-mono font-medium">
+                      {number.short(item.count)}
+                    </span>
+                  </CommandItem>
+                );
+              }}
+            </VirtualList>
+          </Command>
+        </PopoverContent>
+      </PopoverPortal>
+    </Popover>
+  );
+}
--- a/apps/dashboard/src/modals/add-notification-rule.tsx
+++ b/apps/dashboard/src/modals/add-notification-rule.tsx
@@ -15,6 +15,7 @@ import { PureFilterItem } from '@/components/report/sidebar/filters/FilterItem';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
+import { ComboboxEvents } from '@/components/ui/combobox-events';
 import { Textarea } from '@/components/ui/textarea';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useEventNames } from '@/hooks/useEventNames';
@@ -269,16 +270,13 @@ function EventField({
          control={form.control}
          name={`config.events.${index}.name`}
          render={({ field }) => (
-            <Combobox
+            <ComboboxEvents
              searchable
              className="flex-1"
              value={field.value}
              placeholder="Select event"
              onChange={field.onChange}
-              items={eventNames.map((item) => ({
-                label: item.name,
-                value: item.name,
-              }))}
+              items={eventNames}
            />
          )}
        />
--- a/apps/dashboard/src/modals/edit-event.tsx
+++ b/apps/dashboard/src/modals/edit-event.tsx
@@ -17,6 +17,7 @@ import { UndoIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';

+import { Input } from '@/components/ui/input';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';

@@ -60,6 +61,7 @@ export default function EditEvent({ id }: Props) {
  const getBg = (color: string) => `bg-${color}-200`;
  const getText = (color: string) => `text-${color}-700`;
  const iconGrid = 'grid grid-cols-10 gap-4';
+  const [search, setSearch] = useState('');
  return (
    <ModalContent>
      <ModalHeader
@@ -92,26 +94,36 @@ export default function EditEvent({ id }: Props) {
              exit={{ opacity: 0, x: -20 }}
              transition={{ duration: 0.15 }}
            >
-              <Label className="mb-4 block">Pick an icon</Label>
+              <Label className="mb-2 block">Pick an icon</Label>
+              <Input
+                className="mb-4"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search for an icon"
+              />
              <div className={iconGrid}>
-                {Object.entries(EventIconMapper).map(([name, Icon]) => (
-                  <button
-                    type="button"
-                    key={name}
-                    onClick={() => {
-                      setIcon(name);
-                      setStep('color');
-                    }}
-                    className={cn(
-                      'inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-def-200 transition-all',
-                      name === selectedIcon
-                        ? 'scale-110 ring-1 ring-black'
-                        : '[&_svg]:opacity-50',
-                    )}
-                  >
-                    <Icon size={16} />
-                  </button>
-                ))}
+                {Object.entries(EventIconMapper)
+                  .filter(([name]) =>
+                    name.toLowerCase().includes(search.toLowerCase()),
+                  )
+                  .map(([name, Icon]) => (
+                    <button
+                      type="button"
+                      key={name}
+                      onClick={() => {
+                        setIcon(name);
+                        setStep('color');
+                      }}
+                      className={cn(
+                        'inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-def-200 transition-all',
+                        name === selectedIcon
+                          ? 'scale-110 ring-1 ring-black'
+                          : '[&_svg]:opacity-50',
+                      )}
+                    >
+                      <Icon size={16} />
+                    </button>
+                  ))}
              </div>
            </motion.div>
          ) : (
@@ -131,6 +143,7 @@ export default function EditEvent({ id }: Props) {
                  </Badge>
                </button>
              </div>
+
              <div className={iconGrid}>
                {EventIconColors.map((color) => (
                  <button
--- a/packages/db/src/services/event.service.ts
+++ b/packages/db/src/services/event.service.ts
@@ -238,6 +238,16 @@ export function transformMinimalEvent(
  };
 }

+export function getEventMetas(projectId: string) {
+  return db.eventMeta.findMany({
+    where: {
+      projectId,
+    },
+  });
+}
+
+export const getEventMetasCached = cacheable(getEventMetas, 60 * 5);
+
 export async function getEvents(
  sql: string,
  options: GetEventsOptions = {},
@@ -261,17 +271,7 @@ export async function getEvents(
  }

  if (options.meta && projectId) {
-    const metas = await getCache(
-      `event-metas-${projectId}`,
-      60 * 5,
-      async () => {
-        return db.eventMeta.findMany({
-          where: {
-            projectId,
-          },
-        });
-      },
-    );
+    const metas = await getEventMetasCached(projectId);
    const map = new Map<string, EventMeta>();
    for (const meta of metas) {
      map.set(meta.name, meta);
--- a/packages/trpc/src/routers/chart.ts
+++ b/packages/trpc/src/routers/chart.ts
@@ -12,6 +12,7 @@ import {
  createSqlBuilder,
  db,
  funnelService,
+  getEventMetasCached,
  getSelectPropertyKey,
  getSettingsForProject,
  toDate,
@@ -61,15 +62,24 @@ export const chartRouter = createTRPCRouter({
      }),
    )
    .query(async ({ input: { projectId } }) => {
-      const events = await chQuery<{ name: string }>(
-        `SELECT DISTINCT name FROM ${TABLE_NAMES.event_names_mv} WHERE project_id = ${escape(projectId)}`,
-      );
+      const [events, meta] = await Promise.all([
+        chQuery<{ name: string; count: number }>(
+          `SELECT name, count(name) as count FROM ${TABLE_NAMES.event_names_mv} WHERE project_id = ${escape(projectId)} GROUP BY name ORDER BY count DESC, name ASC`,
+        ),
+        getEventMetasCached(projectId),
+      ]);

      return [
        {
          name: '*',
+          count: events.reduce((acc, event) => acc + event.count, 0),
+          meta: undefined,
        },
-        ...events,
+        ...events.map((event) => ({
+          name: event.name,
+          count: event.count,
+          meta: meta.find((m) => m.name === event.name),
+        })),
      ];
    }),

--- a/packages/trpc/src/routers/event.ts
+++ b/packages/trpc/src/routers/event.ts
@@ -10,7 +10,9 @@ import {
  db,
  eventService,
  formatClickhouseDate,
+  getConversionEventNames,
  getEventList,
+  getEventMetasCached,
  getEvents,
  getSettingsForProject,
  overviewService,
@@ -41,6 +43,7 @@ export const eventRouter = createTRPCRouter({
    )
    .mutation(
      async ({ input: { projectId, name, icon, color, conversion } }) => {
+        await getEventMetasCached.clear(projectId);
        return db.eventMeta.upsert({
          where: {
            name_projectId: {
@@ -173,12 +176,7 @@ export const eventRouter = createTRPCRouter({
      }),
    )
    .query(async ({ input: { projectId, cursor } }) => {
-      const conversions = await db.eventMeta.findMany({
-        where: {
-          projectId,
-          conversion: true,
-        },
-      });
+      const conversions = await getConversionEventNames(projectId);

      if (conversions.length === 0) {
        return {