feat(dashboard): edit events

apps/dashboard/src/components/events/event-icon.tsx

@@ -0,0 +1,145 @@
+import { cn } from '@/utils/cn';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react';
+import * as Icons from 'lucide-react';
+
+import type { EventMeta } from '@openpanel/db';
+
+const variants = cva('flex shrink-0 items-center justify-center rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-6 w-6',
+      default: 'h-10 w-10',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+type EventIconProps = VariantProps<typeof variants> & {
+  name: string;
+  meta?: EventMeta;
+  className?: string;
+};
+
+export const EventIconRecords: Record<
+  string,
+  {
+    icon: string;
+    color: string;
+  }
+> = {
+  default: {
+    icon: 'BotIcon',
+    color: 'slate',
+  },
+  screen_view: {
+    icon: 'MonitorPlayIcon',
+    color: 'blue',
+  },
+  session_start: {
+    icon: 'ActivityIcon',
+    color: 'teal',
+  },
+  link_out: {
+    icon: 'ExternalLinkIcon',
+    color: 'indigo',
+  },
+};
+
+export const EventIconMapper: Record<string, LucideIcon> = {
+  DownloadIcon: Icons.DownloadIcon,
+  BotIcon: Icons.BotIcon,
+  BoxIcon: Icons.BoxIcon,
+  AccessibilityIcon: Icons.AccessibilityIcon,
+  ActivityIcon: Icons.ActivityIcon,
+  AirplayIcon: Icons.AirplayIcon,
+  AlarmCheckIcon: Icons.AlarmCheckIcon,
+  AlertTriangleIcon: Icons.AlertTriangleIcon,
+  BellIcon: Icons.BellIcon,
+  BoltIcon: Icons.BoltIcon,
+  CandyIcon: Icons.CandyIcon,
+  ConeIcon: Icons.ConeIcon,
+  MonitorPlayIcon: Icons.MonitorPlayIcon,
+  PizzaIcon: Icons.PizzaIcon,
+  SearchIcon: Icons.SearchIcon,
+  HomeIcon: Icons.HomeIcon,
+  MailIcon: Icons.MailIcon,
+  AngryIcon: Icons.AngryIcon,
+  AnnoyedIcon: Icons.AnnoyedIcon,
+  ArchiveIcon: Icons.ArchiveIcon,
+  AwardIcon: Icons.AwardIcon,
+  BadgeCheckIcon: Icons.BadgeCheckIcon,
+  BeerIcon: Icons.BeerIcon,
+  BluetoothIcon: Icons.BluetoothIcon,
+  BookIcon: Icons.BookIcon,
+  BookmarkIcon: Icons.BookmarkIcon,
+  BookCheckIcon: Icons.BookCheckIcon,
+  BookMinusIcon: Icons.BookMinusIcon,
+  BookPlusIcon: Icons.BookPlusIcon,
+  CalendarIcon: Icons.CalendarIcon,
+  ClockIcon: Icons.ClockIcon,
+  CogIcon: Icons.CogIcon,
+  LoaderIcon: Icons.LoaderIcon,
+  CrownIcon: Icons.CrownIcon,
+  FileIcon: Icons.FileIcon,
+  KeyRoundIcon: Icons.KeyRoundIcon,
+  GemIcon: Icons.GemIcon,
+  GlobeIcon: Icons.GlobeIcon,
+  LightbulbIcon: Icons.LightbulbIcon,
+  LightbulbOffIcon: Icons.LightbulbOffIcon,
+  LockIcon: Icons.LockIcon,
+  MessageCircleIcon: Icons.MessageCircleIcon,
+  RadioIcon: Icons.RadioIcon,
+  RepeatIcon: Icons.RepeatIcon,
+  ShareIcon: Icons.ShareIcon,
+  ExternalLinkIcon: Icons.ExternalLinkIcon,
+};
+
+export const EventIconColors = [
+  'rose',
+  'pink',
+  'fuchsia',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'sky',
+  'cyan',
+  'teal',
+  'emerald',
+  'green',
+  'lime',
+  'yellow',
+  'amber',
+  'orange',
+  'red',
+  'stone',
+  'neutral',
+  'zinc',
+  'grey',
+  'slate',
+];
+
+export function EventIcon({ className, name, size, meta }: EventIconProps) {
+  const Icon =
+    EventIconMapper[
+      meta?.icon ??
+        EventIconRecords[name]?.icon ??
+        EventIconRecords.default?.icon ??
+        ''
+    ]!;
+  const color =
+    meta?.color ??
+    EventIconRecords[name]?.color ??
+    EventIconRecords.default?.color ??
+    '';
+
+  return (
+    <div className={cn(`bg-${color}-200`, variants({ size }), className)}>
+      <Icon size={size === 'sm' ? 14 : 20} className={`text-${color}-700`} />
+    </div>
+  );
+}

apps/dashboard/src/components/events/event-list-item.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { SerieIcon } from '@/components/report/chart/SerieIcon';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { useAppParams } from '@/hooks/useAppParams';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+import { getProfileName } from '@/utils/getters';
+import Link from 'next/link';
+
+import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
+
+import { EventIcon } from './event-icon';
+
+type EventListItemProps = IServiceEventMinimal | IServiceEvent;
+
+export function EventListItem(props: EventListItemProps) {
+  const { organizationSlug, projectId } = useAppParams();
+  const { createdAt, name, path, duration, meta } = props;
+  const profile = 'profile' in props ? props.profile : null;
+
+  const number = useNumber();
+
+  const renderName = () => {
+    if (name === 'screen_view') {
+      if (path.includes('/')) {
+        return path;
+      }
+
+      return `Route: ${path}`;
+    }
+
+    return name.replace(/_/g, ' ');
+  };
+
+  const renderDuration = () => {
+    if (name === 'screen_view') {
+      return (
+        <span className="text-muted-foreground">
+          {number.shortWithUnit(duration / 1000, 'min')}
+        </span>
+      );
+    }
+
+    return null;
+  };
+
+  const isMinimal = 'minimal' in props;
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          if (!isMinimal) {
+            pushModal('EventDetails', {
+              id: props.id,
+            });
+          }
+        }}
+        className={cn(
+          'card hover:bg-light-background flex w-full items-center justify-between rounded-lg p-4 transition-colors',
+          meta?.conversion &&
+            `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`
+        )}
+      >
+        <div>
+          <div className="flex items-center gap-4 text-left ">
+            <EventIcon size="sm" name={name} meta={meta} />
+            <span>
+              <span className="font-medium">{renderName()}</span>
+              {'  '}
+              {renderDuration()}
+            </span>
+          </div>
+          <div className="pl-10">
+            <div className="flex origin-left scale-75 gap-1">
+              <SerieIcon name={props.country} />
+              <SerieIcon name={props.os} />
+              <SerieIcon name={props.browser} />
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-4">
+          <Tooltiper asChild content={getProfileName(profile)}>
+            <Link
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              href={`/${organizationSlug}/${projectId}/profiles/${profile?.id}`}
+              className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap  text-muted-foreground hover:underline"
+            >
+              {getProfileName(profile)}
+            </Link>
+          </Tooltiper>
+
+          <Tooltiper asChild content={createdAt.toLocaleString()}>
+            <div className=" text-muted-foreground">
+              {createdAt.toLocaleTimeString()}
+            </div>
+          </Tooltiper>
+        </div>
+      </button>
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+'use client';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useAppParams } from '@/hooks/useAppParams';
+import { useDebounceState } from '@/hooks/useDebounceState';
+import useWS from '@/hooks/useWS';
+import { cn } from '@/utils/cn';
+import dynamic from 'next/dynamic';
+
+import type { IServiceEventMinimal } from '@openpanel/db';
+
+const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
+  ssr: false,
+  loading: () => <div>0</div>,
+});
+
+export default function EventListener({
+  onRefresh,
+}: {
+  onRefresh: () => void;
+}) {
+  const { projectId } = useAppParams();
+  const counter = useDebounceState(0, 1000, {
+    maxWait: 5000,
+  });
+
+  useWS<IServiceEventMinimal>(`/live/events/${projectId}`, (event) => {
+    if (event?.name) {
+      counter.set((prev) => prev + 1);
+    }
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          onClick={() => {
+            counter.set(0);
+            onRefresh();
+          }}
+          className="flex h-8 items-center gap-2 rounded border border-border bg-card px-3 font-medium leading-none"
+        >
+          <div className="relative">
+            <div
+              className={cn(
+                'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all'
+              )}
+            ></div>
+            <div
+              className={cn(
+                'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all'
+              )}
+            ></div>
+          </div>
+          {counter.debounced === 0 ? (
+            'Listening'
+          ) : (
+            <>
+              <AnimatedNumbers
+                includeComma
+                transitions={(index) => ({
+                  type: 'spring',
+                  duration: index + 0.3,
+                  damping: 10,
+                  stiffness: 200,
+                })}
+                animateToNumber={counter.debounced}
+                locale="en"
+              />
+              new events
+            </>
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {counter.debounced === 0
+          ? 'Listening to new events'
+          : 'Click to refresh'}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { EventIcon } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon';
+import { EventIcon } from '@/components/events/event-icon';
 import { ProjectLink } from '@/components/links';
 import { SerieIcon } from '@/components/report/chart/SerieIcon';
 import { TooltipComplete } from '@/components/tooltip-complete';
@@ -50,11 +50,22 @@ export function useColumns() {
 
         return (
           <div className="flex items-center gap-2">
-            <EventIcon
-              size="sm"
-              name={row.original.name}
-              meta={row.original.meta}
-            />
+            <TooltipComplete content="Click to edit" side="left">
+              <button
+                className="transition-transform hover:scale-105"
+                onClick={() => {
+                  pushModal('EditEvent', {
+                    id: row.original.id,
+                  });
+                }}
+              >
+                <EventIcon
+                  size="sm"
+                  name={row.original.name}
+                  meta={row.original.meta}
+                />
+              </button>
+            </TooltipComplete>
             <span className="flex gap-2">
               <button
                 onClick={() => {

apps/dashboard/src/components/ui/dialog.tsx

@@ -40,7 +40,9 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
-        className
+        className,
+        'max-h-screen overflow-y-auto', // Ensure the dialog is scrollable if it exceeds the screen height
+        'mt-auto' // Add margin-top: auto for all screen sizes
       )}
       {...props}
     >

apps/dashboard/src/components/ui/label.tsx

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const labelVariants = cva(
-  'mb-2 block  font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+  'mb-2 block font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 );
 
 const Label = React.forwardRef<