Onboarding

.cursorrules

@@ -61,6 +61,9 @@ You are an expert in TypeScript, Node.js, Next.js App Router, React, Prisma, Pos
 - Use React Hook Form with Zod for validation. The same validation should be done in the server action too. Example:
 
   ```tsx
+  import { Input } from "@/components/Input";
+  import { Button } from "@/components/ui/button";
+
   export const ProcessHistory = () => {
     const {
       register,

apps/web/app/(app)/automation/RulesPrompt.tsx

@@ -40,7 +40,7 @@ const examplePrompts = [
   'Label pitch decks as "Pitch Deck" and forward them to [email protected]',
   "Reply to cold emails by telling them to check out Inbox Zero. Then mark them as spam",
   'Label high priority emails as "High Priority"',
-  "If a founder asks to set up a call, send them my Cal link: https://cal.com/max",
+  "If a founder asks to set up a call, send them my Cal link: https://cal.com/example",
   "If someone asks to cancel a plan, ask to set up a call by sending my Cal link",
   'If a founder sends me an investor update, label it "Investor Update" and archive it',
   'If someone pitches me their startup, label it as "Investing", archive it, and respond with a friendly reply that I no longer have time to look at the email but if they get a warm intro, that\'s their best bet to get funding from me',
@@ -151,7 +151,7 @@ function RulesPromptForm({
       <div className="sm:col-span-2">
         <CardHeader>
           <CardTitle>
-            How your AI personal assistant should handle your emails
+            How your AI personal assistant should handle incoming emails
           </CardTitle>
           <CardDescription>
             Write a prompt for your assistant to follow.
@@ -176,9 +176,8 @@ Feel free to add as many as you want:
 * Archive all marketing emails.
 * Label receipts as "Receipt" and forward them to [email protected].
 * Label emails that require a reply as "Reply Required".
-* If a customer asks to set up a call, send them my Cal link: https://cal.com/max
-* Review any emails from [email protected] and see if any are about finance. If so, respond with a friendly draft a reply that answers the question.
-            `}
+* If a customer asks to set up a call, send them my Cal link: https://cal.com/example
+* Review any emails from [email protected] and see if any are about finance. If so, respond with a friendly draft a reply that answers the question.`}
               />
 
               <div className="flex gap-2">

apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeMobile.tsx

@@ -58,13 +58,15 @@ export function BulkUnsubscribeRowMobile({
     mutate,
     posthog,
   });
-  const { unsubscribeLoading, onUnsubscribe } = useUnsubscribe({
-    item,
-    hasUnsubscribeAccess,
-    mutate,
-    posthog,
-    refetchPremium,
-  });
+  const { unsubscribeLoading, onUnsubscribe, unsubscribeLink } = useUnsubscribe(
+    {
+      item,
+      hasUnsubscribeAccess,
+      mutate,
+      refetchPremium,
+      posthog,
+    },
+  );
   const { archiveAllLoading, onArchiveAll } = useArchiveAll({
     item,
     posthog,
@@ -117,15 +119,11 @@ export function BulkUnsubscribeRowMobile({
             variant={
               item.status === NewsletterStatus.UNSUBSCRIBED ? "red" : "default"
             }
-            asChild={!!item.lastUnsubscribeLink}
+            asChild
           >
             <Link
-              href={
-                hasUnsubscribeAccess && item.lastUnsubscribeLink
-                  ? cleanUnsubscribeLink(item.lastUnsubscribeLink) || "#"
-                  : "#"
-              }
-              target="_blank"
+              href={unsubscribeLink}
+              target={unsubscribeLink !== "#" ? "_blank" : undefined}
               onClick={onUnsubscribe}
               rel="noreferrer"
             >

apps/web/app/(app)/bulk-unsubscribe/common.tsx

@@ -157,18 +157,18 @@ function UnsubscribeButton<T extends Row>({
   item: T;
   hasUnsubscribeAccess: boolean;
   mutate: () => Promise<void>;
-  posthog: PostHog;
   refetchPremium: () => Promise<any>;
+  posthog: PostHog;
 }) {
-  const { unsubscribeLoading, onUnsubscribe } = useUnsubscribe({
-    item,
-    hasUnsubscribeAccess,
-    mutate,
-    posthog,
-    refetchPremium,
-  });
-
-  const isLink = hasUnsubscribeAccess && item.lastUnsubscribeLink;
+  const { unsubscribeLoading, onUnsubscribe, unsubscribeLink } = useUnsubscribe(
+    {
+      item,
+      hasUnsubscribeAccess,
+      mutate,
+      posthog,
+      refetchPremium,
+    },
+  );
 
   return (
     <Button
@@ -179,12 +179,8 @@ function UnsubscribeButton<T extends Row>({
       asChild
     >
       <Link
-        href={
-          isLink
-            ? cleanUnsubscribeLink(item.lastUnsubscribeLink || "") || ""
-            : ""
-        }
-        target={isLink ? "_blank" : undefined}
+        href={unsubscribeLink}
+        target={unsubscribeLink !== "#" ? "_blank" : undefined}
         onClick={onUnsubscribe}
         rel="noreferrer"
       >

apps/web/app/(app)/bulk-unsubscribe/hooks.ts

@@ -75,6 +75,10 @@ export function useUnsubscribe<T extends Row>({
   return {
     unsubscribeLoading,
     onUnsubscribe,
+    unsubscribeLink:
+      hasUnsubscribeAccess && item.lastUnsubscribeLink
+        ? cleanUnsubscribeLink(item.lastUnsubscribeLink) || "#"
+        : "#",
   };
 }
 

apps/web/app/(app)/cold-email-blocker/ColdEmailPromptModal.tsx

@@ -3,7 +3,7 @@ import { type SubmitHandler, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenIcon } from "lucide-react";
 import { Modal, useModal } from "@/components/Modal";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/Input";
 import {
   type UpdateColdEmailSettingsBody,
@@ -29,7 +29,7 @@ export function ColdEmailPromptModal(props: {
 
   return (
     <>
-      <Button onClick={openModal} type="button" color="white">
+      <Button onClick={openModal} type="button" variant="outline">
         <PenIcon className="mr-2 h-4 w-4" />
         Edit Prompt
       </Button>
@@ -102,7 +102,7 @@ function ColdEmailPromptForm(props: {
       />
 
       <div className="mt-2">
-        <Button type="submit" size="lg" loading={isSubmitting}>
+        <Button type="submit" loading={isSubmitting}>
           Save
         </Button>
       </div>

apps/web/app/(app)/cold-email-blocker/ColdEmailSettings.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
+import { Controller, type SubmitHandler, useForm } from "react-hook-form";
 import useSWR from "swr";
 import type { UserResponse } from "@/app/api/user/me/route";
 import type { SaveEmailUpdateSettingsResponse } from "@/app/api/user/settings/email-updates/route";
@@ -10,15 +10,15 @@ import { toastError, toastSuccess } from "@/components/Toast";
 import { postRequest } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ColdEmailSetting } from "@prisma/client";
-import { Select } from "@/components/Select";
 import { isError } from "@/utils/error";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import {
   type UpdateColdEmailSettingsBody,
   updateColdEmailSettingsBody,
 } from "@/app/api/user/settings/cold-email/validation";
 import { TestRules } from "@/app/(app)/cold-email-blocker/TestRules";
 import { ColdEmailPromptModal } from "@/app/(app)/cold-email-blocker/ColdEmailPromptModal";
+import { RadioGroup } from "@/components/RadioGroup";
 
 export function ColdEmailSettings() {
   const { data, isLoading, error, mutate } =
@@ -29,7 +29,7 @@ export function ColdEmailSettings() {
       {data && (
         <>
           <ColdEmailForm coldEmailBlocker={data.coldEmailBlocker} />
-          <div className="mt-2 space-x-2">
+          <div className="mt-2 flex items-center gap-2">
             <TestRules />
             <ColdEmailPromptModal
               coldEmailPrompt={data.coldEmailPrompt}
@@ -42,14 +42,22 @@ export function ColdEmailSettings() {
   );
 }
 
-function ColdEmailForm(props: { coldEmailBlocker?: ColdEmailSetting | null }) {
+export function ColdEmailForm({
+  coldEmailBlocker,
+  onSuccess,
+}: {
+  coldEmailBlocker?: ColdEmailSetting | null;
+  onSuccess?: () => void;
+}) {
   const {
-    register,
+    control,
     handleSubmit,
     formState: { errors, isSubmitting },
   } = useForm<UpdateColdEmailSettingsBody>({
     resolver: zodResolver(updateColdEmailSettingsBody),
-    defaultValues: { coldEmailBlocker: props.coldEmailBlocker },
+    defaultValues: {
+      coldEmailBlocker: coldEmailBlocker || ColdEmailSetting.DISABLED,
+    },
   });
 
   const onSubmit: SubmitHandler<UpdateColdEmailSettingsBody> = useCallback(
@@ -67,46 +75,60 @@ function ColdEmailForm(props: { coldEmailBlocker?: ColdEmailSetting | null }) {
         });
       } else {
         toastSuccess({ description: "Settings updated!" });
+        onSuccess?.();
       }
     },
     [],
   );
 
-  const options: { label: string; value: ColdEmailSetting }[] = useMemo(
+  const onSubmitForm = handleSubmit(onSubmit);
+
+  const options: {
+    value: ColdEmailSetting;
+    label: string;
+    description: string;
+  }[] = useMemo(
     () => [
       {
-        label: 'Archive and label as "Cold Email"',
         value: ColdEmailSetting.ARCHIVE_AND_LABEL,
+        label: "Archive & Label",
+        description: "Archive and label cold emails",
       },
       {
-        label: 'Label as "Cold Email"',
         value: ColdEmailSetting.LABEL,
+        label: "Label Only",
+        description: "Label cold emails as 'Cold Email', but keep in inbox",
       },
       {
-        label: "Only list here",
         value: ColdEmailSetting.LIST,
+        label: "List in App",
+        description: "List cold emails in app. Make no changes to inbox.",
       },
       {
-        label: "Disabled",
         value: ColdEmailSetting.DISABLED,
+        label: "Turn Off",
+        description: "Disable cold email detection",
       },
     ],
     [],
   );
 
-  const onSubmitForm = handleSubmit(onSubmit);
-
   return (
-    <form onSubmit={onSubmitForm} className="flex max-w-sm items-end space-x-2">
-      <Select
+    <form onSubmit={onSubmitForm} className="max-w-lg">
+      <Controller
         name="coldEmailBlocker"
-        label="How should we handle cold emails?"
-        options={options}
-        registerProps={register("coldEmailBlocker")}
-        error={errors.coldEmailBlocker}
+        control={control}
+        render={({ field }) => (
+          <RadioGroup
+            label="How should we handle cold emails?"
+            options={options}
+            {...field}
+            error={errors.coldEmailBlocker}
+          />
+        )}
       />
 
-      <div className="">
+      <div className="mt-2">
         <Button type="submit" loading={isSubmitting}>
           Save
         </Button>

apps/web/app/(app)/cold-email-blocker/TestRules.tsx

@@ -8,7 +8,7 @@ import { type SubmitHandler, useForm } from "react-hook-form";
 import useSWR from "swr";
 import { BookOpenCheckIcon, SparklesIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/Input";
 import { toastError } from "@/components/Toast";
 import { postRequest } from "@/utils/api";
@@ -32,7 +32,7 @@ export function TestRules() {
       description="Test which emails are flagged as cold emails. We also check if the sender has emailed you before and if it includes unsubscribe links."
       content={<TestRulesContent />}
     >
-      <Button color="white" type="button">
+      <Button type="button" variant="outline">
         <BookOpenCheckIcon className="mr-2 h-4 w-4" />
         Test
       </Button>