feat(dashboard): edit events

apps/dashboard/src/modals/Modal/Container.tsx

@@ -30,21 +30,36 @@ export function ModalHeader({
   className,
 }: ModalHeaderProps) {
   return (
-    <div className={cn('mb-6 flex justify-between', className)}>
-      <div>
-        <div className="mt-0.5 font-medium">{title}</div>
-        {!!text && <div className=" text-muted-foreground">{text}</div>}
-      </div>
-      {onClose !== false && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => (onClose ? onClose() : popModal())}
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </Button>
+    <div
+      className={cn(
+        'relative -m-6 mb-6 flex justify-between rounded-t-lg border-b bg-def-100 p-6',
+        className
       )}
+      style={{
+        backgroundImage: `url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(85)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='0.5' stroke='hsla(259, 0%, 52%, 0.46)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'repeat',
+      }}
+    >
+      <div className="absolute inset-0 bg-gradient-to-r from-def-100/95 to-def-100/80"></div>
+      <div className="row relative w-full items-start justify-between">
+        <div className="col mt-1 flex-1 gap-2">
+          <div className="text-3xl font-semibold">{title}</div>
+          {!!text && (
+            <div className="text-lg text-muted-foreground">{text}</div>
+          )}
+        </div>
+        {onClose !== false && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => (onClose ? onClose() : popModal())}
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        )}
+      </div>
     </div>
   );
 }

apps/dashboard/src/modals/edit-event.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+import {
+  EventIconColors,
+  EventIconMapper,
+  EventIconRecords,
+} from '@/components/events/event-icon';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { useAppParams } from '@/hooks/useAppParams';
+import { api } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { useQueryClient } from '@tanstack/react-query';
+import { getQueryKey } from '@trpc/react-query';
+import { AnimatePresence, motion } from 'framer-motion';
+import { UndoIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface Props {
+  id: string;
+}
+
+export default function EditEvent({ id }: Props) {
+  const { projectId } = useAppParams();
+  const client = useQueryClient();
+
+  const { data: event } = api.event.byId.useQuery({ id, projectId });
+
+  const [selectedIcon, setIcon] = useState(EventIconRecords.default!.icon);
+  const [selectedColor, setColor] = useState(EventIconRecords.default!.color);
+  const [conversion, setConversion] = useState(false);
+  const [step, setStep] = useState<'icon' | 'color'>('icon');
+  useEffect(() => {
+    if (event?.meta?.icon) {
+      setIcon(event.meta.icon);
+    }
+    if (event?.meta?.color) {
+      setColor(event.meta.color);
+    }
+    if (event?.meta?.conversion) {
+      setConversion(event.meta.conversion);
+    }
+  }, [event]);
+
+  const SelectedIcon = EventIconMapper[selectedIcon]!;
+
+  const mutation = api.event.updateEventMeta.useMutation({
+    onSuccess() {
+      toast('Event updated');
+      client.refetchQueries({
+        queryKey: getQueryKey(api.event.events),
+      });
+      popModal();
+    },
+  });
+  const getBg = (color: string) => `bg-${color}-200`;
+  const getText = (color: string) => `text-${color}-700`;
+  const iconGrid = 'grid grid-cols-10 gap-4';
+  return (
+    <ModalContent>
+      <ModalHeader
+        title={`Edit: ${event?.name}`}
+        text={`Changes here will affect all "${event?.name}" events`}
+        onClose={() => popModal()}
+      />
+      <div className="col gap-4">
+        <div>
+          <Label className="mb-4 block">Conversion</Label>
+          <label className="flex cursor-pointer select-none items-center gap-4 rounded-md border border-border p-4">
+            <Checkbox
+              checked={conversion}
+              onCheckedChange={(checked) => {
+                if (checked === 'indeterminate') return;
+                setConversion(checked);
+              }}
+            />
+            <div>
+              <span>Yes, this event is important!</span>
+            </div>
+          </label>
+        </div>
+        <AnimatePresence mode="wait">
+          {step === 'icon' ? (
+            <motion.div
+              key="icon-step"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.15 }}
+            >
+              <Label className="mb-4 block">Pick an icon</Label>
+              <div className={iconGrid}>
+                {Object.entries(EventIconMapper).map(([name, Icon]) => (
+                  <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>
+          ) : (
+            <motion.div
+              key="color-step"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.15 }}
+            >
+              <div className="row mb-4 items-center justify-between">
+                <div className="font-medium leading-none">Pick a color</div>
+                <button onClick={() => setStep('icon')}>
+                  <Badge variant="muted">
+                    Select icon
+                    <UndoIcon className="ml-1 h-3 w-3" />
+                  </Badge>
+                </button>
+              </div>
+              <div className={iconGrid}>
+                {EventIconColors.map((color) => (
+                  <button
+                    key={color}
+                    onClick={() => {
+                      setColor(color);
+                    }}
+                    className={cn(
+                      'flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md transition-all',
+                      color === selectedColor ? 'ring-1 ring-black' : '',
+                      getBg(color)
+                    )}
+                  >
+                    {SelectedIcon ? (
+                      <SelectedIcon size={16} className={getText(color)} />
+                    ) : (
+                      <svg
+                        className={`${getText(color)} opacity-70`}
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <circle cx="12.1" cy="12.1" r="4" />
+                      </svg>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <Button
+          className="mt-8 w-full"
+          disabled={mutation.isLoading || !event}
+          onClick={() =>
+            mutation.mutate({
+              projectId,
+              name: event!.name,
+              icon: selectedIcon,
+              color: selectedColor,
+              conversion,
+            })
+          }
+        >
+          Update event
+        </Button>
+      </div>
+    </ModalContent>
+  );
+}

apps/dashboard/src/modals/index.tsx

@@ -14,6 +14,9 @@ const Loading = () => (
 );
 
 const modals = {
+  EditEvent: dynamic(() => import('./edit-event'), {
+    loading: Loading,
+  }),
   EventDetails: dynamic(() => import('./event-details'), {
     loading: Loading,
   }),