change how we create/edit clients

apps/dashboard/src/components/animate-height.tsx

@@ -0,0 +1,21 @@
+import ReactAnimateHeight from 'react-animate-height';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  open: boolean;
+};
+
+const AnimateHeight = ({ children, className, open }: Props) => {
+  return (
+    <ReactAnimateHeight
+      duration={300}
+      height={open ? 'auto' : 0}
+      className={className}
+    >
+      {children}
+    </ReactAnimateHeight>
+  );
+};
+
+export default AnimateHeight;

apps/dashboard/src/components/clients/create-client-success.tsx

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { clipboard } from '@/utils/clipboard';
 import { Copy, RocketIcon } from 'lucide-react';
-import Link from 'next/link';
 
 import type { IServiceClient } from '@openpanel/db';
 
@@ -19,17 +18,28 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
           <Copy size={16} />
         </div>
       </button>
-      {secret ? (
-        <button className="text-left" onClick={() => clipboard(secret)}>
-          <Label>Secret</Label>
-          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
-            {secret}
-            <Copy size={16} />
-          </div>
-        </button>
-      ) : (
+      {secret && (
+        <div className="w-full">
+          <button
+            className="w-full text-left"
+            onClick={() => clipboard(secret)}
+          >
+            <Label>Client secret</Label>
+            <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+              {secret}
+              <Copy size={16} />
+            </div>
+          </button>
+          {cors && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              You will only need the secret if you want to send server events.
+            </p>
+          )}
+        </div>
+      )}
+      {cors && (
         <div className="text-left">
-          <Label>Cors settings</Label>
+          <Label>CORS settings</Label>
           <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
             {cors}
           </div>
@@ -39,7 +49,15 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
         <RocketIcon className="h-4 w-4" />
         <AlertTitle>Get started!</AlertTitle>
         <AlertDescription>
-          Read our documentation to get started. Easy peasy!
+          Read our{' '}
+          <a
+            target="_blank"
+            href="https://docs.openpanel.dev"
+            className="underline"
+          >
+            documentation
+          </a>{' '}
+          to get started. Easy peasy!
         </AlertDescription>
       </Alert>
     </div>

apps/dashboard/src/components/clients/table.tsx

@@ -14,7 +14,7 @@ export const columns: ColumnDef<IServiceClientWithProject>[] = [
         <div>
           <div>{row.original.name}</div>
           <div className="text-sm text-muted-foreground">
-            {row.original.project.name}
+            {row.original.project?.name ?? 'No project'}
           </div>
         </div>
       );

apps/dashboard/src/components/overview/overview-live-histogram.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import { Fragment } from 'react';
 import { api } from '@/trpc/client';
 import { cn } from '@/utils/cn';
-import AnimateHeight from 'react-animate-height';
 
 import type { IChartInput } from '@openpanel/validation';
 
+import AnimateHeight from '../animate-height';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { useOverviewOptions } from './useOverviewOptions';
 
@@ -135,7 +134,7 @@ interface WrapperProps {
 
 function Wrapper({ open, children, count }: WrapperProps) {
   return (
-    <AnimateHeight duration={500} height={open ? 'auto' : 0}>
+    <AnimateHeight open={open}>
       <div className="flex flex-col items-end md:flex-row">
         <div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
           <div className="text-sm max-md:mb-1">Last 30 minutes</div>

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-3 w-3 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };