feat: add tracking code on project settings

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

@@ -1,7 +1,7 @@
-import { formatDateTime, formatTime } from '@/utils/date';
+import { DropdownMenuSeparator } from '@radix-ui/react-dropdown-menu';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { ColumnDef } from '@tanstack/react-table';
-import { isToday } from 'date-fns';
-
+import { toast } from 'sonner';
 import { ColumnCreatedAt } from '@/components/column-created-at';
 import CopyInput from '@/components/forms/copy-input';
 import { createActionColumn } from '@/components/ui/data-table/data-table-helpers';
@@ -10,9 +10,6 @@ import { handleError, useTRPC } from '@/integrations/trpc/react';
 import { pushModal, showConfirm } from '@/modals';
 import type { RouterOutputs } from '@/trpc/client';
 import { clipboard } from '@/utils/clipboard';
-import { DropdownMenuSeparator } from '@radix-ui/react-dropdown-menu';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast } from 'sonner';
 
 export function useColumns() {
   const columns: ColumnDef<RouterOutputs['client']['list'][number]>[] = [
@@ -51,7 +48,7 @@ export function useColumns() {
             queryClient.invalidateQueries(trpc.client.list.pathFilter());
           },
           onError: handleError,
-        }),
+        })
       );
       return (
         <>
@@ -67,7 +64,6 @@ export function useColumns() {
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem
-            variant="destructive"
             onClick={() => {
               showConfirm({
                 title: 'Revoke client',
@@ -79,6 +75,7 @@ export function useColumns() {
                 },
               });
             }}
+            variant="destructive"
           >
             Revoke
           </DropdownMenuItem>

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

@@ -1,17 +1,16 @@
 import type { UseQueryResult } from '@tanstack/react-query';
-
+import { PlusIcon } from 'lucide-react';
+import { useColumns } from './columns';
 import { Button } from '@/components/ui/button';
 import { DataTable } from '@/components/ui/data-table/data-table';
 import { DataTableToolbar } from '@/components/ui/data-table/data-table-toolbar';
 import { useTable } from '@/components/ui/data-table/use-table';
 import { pushModal } from '@/modals';
 import type { RouterOutputs } from '@/trpc/client';
-import { PlusIcon } from 'lucide-react';
-import { useColumns } from './columns';
 
-type Props = {
+interface Props {
   query: UseQueryResult<RouterOutputs['client']['list'], unknown>;
-};
+}
 
 export const ClientsTable = ({ query }: Props) => {
   const columns = useColumns();
@@ -30,13 +29,13 @@ export const ClientsTable = ({ query }: Props) => {
       <DataTableToolbar table={table}>
         <Button
           icon={PlusIcon}
-          responsive
           onClick={() => pushModal('AddClient')}
+          responsive
         >
           Create client
         </Button>
       </DataTableToolbar>
-      <DataTable table={table} loading={isLoading} />
+      <DataTable loading={isLoading} table={table} />
     </>
   );
 };

apps/start/src/components/onboarding/connect-web.tsx

@@ -27,7 +27,7 @@ const ConnectWeb = ({ client }: Props) => {
 </script>
 <script src="https://openpanel.dev/op1.js" defer async></script>`;
   return (
-    <>
+    <div className="col gap-4">
       <div className="col gap-2">
         <div className="row items-center justify-between gap-4">
           <div className="flex items-center gap-2 font-bold text-xl capitalize">
@@ -44,7 +44,7 @@ const ConnectWeb = ({ client }: Props) => {
             </Button>
           </div>
         </div>
-        <Syntax className="border" code={code} />
+        <Syntax className="border" code={code} copyable={false} />
       </div>
       <div className="col gap-4">
         <p className="text-center text-muted-foreground text-sm">
@@ -80,7 +80,7 @@ const ConnectWeb = ({ client }: Props) => {
           </a>
         </p>
       </div>
-    </>
+    </div>
   );
 };