apps/web/app/(app)/compose/MultiEmailInput.tsx (4)

69-70: Remove console.log statement.

There's a debugging console.log statement that should be removed before merging to production.

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
  if ((e.key === " " || e.key === "Tab") && inputValue) {
-    console.log("came here,", e.key);
    e.preventDefault();
    addEmail(inputValue);

---

19-21: Consider using more specific types instead of any.

The register and error props are typed as any, which reduces type safety. Consider using more specific types based on react-hook-form's types.

interface MultiEmailInputProps {
  name: string;
  label: string;
  placeholder?: string;
  className?: string;
-  register?: any;
-  error?: any;
+  register?: UseFormRegister<any>;
+  error?: FieldError;
}

You'll need to import these types from react-hook-form:

import { UseFormRegister, FieldError } from "react-hook-form";

---

36-38: Consider using a more comprehensive email validation regex.

The current email validation is basic and might not catch all edge cases. Consider using a more comprehensive regex for validating emails.

const isValidEmail = (email: string) => {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(email);
};

---

104-119: Use email as key instead of index.

Using array indices as React keys can lead to unexpected behavior when items are removed from the middle of the list. Since email addresses are unique in this context, use them as keys instead.

{emails.map((email, index) => (
  <div
-    key={index}
+    key={email}
    className="flex w-fit items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-sm text-primary"
  >
    <span>{email}</span>
    <button
      type="button"
      onClick={() => removeEmail(index)}
      className="flex h-4 w-4 items-center justify-center rounded-full hover:bg-primary/20"
      aria-label={`Remove ${email}`}
    >
      <X className="h-3 w-3" />
    </button>
  </div>
))}

apps/web/app/(app)/compose/ComposeEmailForm.tsx (1)

29-30: Use import type for type-only imports.

Since SendEmailBody is only used as a type, it should be imported using import type to ensure it's removed during compilation.

import ComposeMailBox from "@/app/(app)/compose/ComposeMailBox";
-import { SendEmailBody } from "@/utils/gmail/mail";
+import type { SendEmailBody } from "@/utils/gmail/mail";

🧰 Tools

🪛 Biome (1.9.4)

[error] 30-30: All these imports are only used as types.

Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.

(lint/style/useImportType)

apps/web/app/(app)/compose/ComposeMailBox.tsx (5)

2-2: Remove unused import.

The useEffect import is not used in this component and should be removed.

-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";

---

15-16: Consider using more specific types instead of any.

The register and errors props are typed as any, which reduces type safety. Consider using more specific types based on react-hook-form's types.

type ComposeMailBoxProps = {
  to: string;
  cc?: string;
  bcc?: string;
-  register: any;
-  errors?: any;
+  register: UseFormRegister<any>;
+  errors?: {
+    to?: FieldError;
+    cc?: FieldError;
+    bcc?: FieldError;
+  };
};

You'll need to import these types from react-hook-form:

import { UseFormRegister, FieldError } from "react-hook-form";

---

41-41: Use string literal instead of template literal.

No template interpolation is needed here, so a simple string literal would be more appropriate.

-<div className={`relative flex flex-col gap-2 rounded-md border p-2`}>
+<div className="relative flex flex-col gap-2 rounded-md border p-2">

🧰 Tools

🪛 Biome (1.9.4)

[error] 41-41: Do not use template literals if interpolation and special-character handling are not needed.

Unsafe fix: Replace with string literal

(lint/style/noUnusedTemplateLiteral)

---

101-116: Simplify array filtering logic.

The current implementation creates an array with potentially falsy elements, filters them, and then checks again whether each button exists. This can be simplified.

-{[
-  !showCC && { type: CarbonCopyType.CC, width: "w-8" },
-  !showBCC && { type: CarbonCopyType.BCC, width: "w-10" },
-]
-  .filter(Boolean)
-  .map(
-    (button) =>
-      button && (
-        <ToggleButton
-          key={button.type}
-          label={button.type}
-          className={button.width}
-          onClick={() => toggleCarbonCopy(button.type)}
-        />
-      ),
-  )}
+{[
+  { type: CarbonCopyType.CC, width: "w-8", show: !showCC },
+  { type: CarbonCopyType.BCC, width: "w-10", show: !showBCC },
+]
+  .filter(button => button.show)
+  .map(button => (
+    <ToggleButton
+      key={button.type}
+      label={button.type}
+      className={button.width}
+      onClick={() => toggleCarbonCopy(button.type)}
+    />
+  ))}

---

135-135: Use string literal instead of template literal.

No template interpolation is needed here, so a simple string literal would be more appropriate.

-className={cn(`h-6 w-8 text-[10px]`, className)}
+className={cn("h-6 w-8 text-[10px]", className)}

🧰 Tools

🪛 Biome (1.9.4)

[error] 135-135: Do not use template literals if interpolation and special-character handling are not needed.

Unsafe fix: Replace with string literal

(lint/style/noUnusedTemplateLiteral)

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

apps/web/app/(app)/compose/ComposeMailBox.tsx (5)

11-17: Improve type definitions for better type safety.

The register and errors props are currently typed as any, which reduces type safety and IDE assistance. Consider using more specific types for these props.

- type ComposeMailBoxProps = {
-   to: string;
-   cc?: string;
-   bcc?: string;
-   register: any;
-   errors?: any;
- };
+ type ComposeMailBoxProps = {
+   to: string;
+   cc?: string;
+   bcc?: string;
+   register: UseFormRegister<any>;
+   errors?: FieldErrors<any>;
+ };

You would need to import these types from react-hook-form:

import { UseFormRegister, FieldErrors } from "react-hook-form";

---

19-35: Props destructuring is incomplete.

You're destructuring some props in line 20 but still using props directly in other parts of the component. Consider destructuring all the props you need for better readability.

- export default function ComposeMailBox(props: ComposeMailBoxProps) {
-   const { register, to, errors } = props;
+ export default function ComposeMailBox({
+   register,
+   to,
+   cc,
+   bcc,
+   errors
+ }: ComposeMailBoxProps) {

---

37-38: Consider renaming state variable for clarity.

The variable moveToggleButtonsToNewLine doesn't actually move buttons but determines whether to render them on a new line. A more accurate name would improve readability.

- const moveToggleButtonsToNewLine =
-   carbonCopy.cc || carbonCopy.bcc || (to && to.length > 0);
+ const shouldRenderButtonsBelow =
+   carbonCopy.cc || carbonCopy.bcc || (to && to.length > 0);

Update the references to this variable in the JSX as well.

---

40-41: Fix template literal usage.

Template literals are used without any interpolation or special characters, which is flagged by static analysis.

- <div className={`relative flex flex-col gap-2 rounded-md border p-2`}>
+ <div className="relative flex flex-col gap-2 rounded-md border p-2">

🧰 Tools

🪛 Biome (1.9.4)

[error] 41-41: Do not use template literals if interpolation and special-character handling are not needed.

Unsafe fix: Replace with string literal

(lint/style/noUnusedTemplateLiteral)

---

119-138: Fix template literal usage in ToggleButton.

Template literals are used without any interpolation or special characters, which is flagged by static analysis.

- className={cn(`h-6 w-8 text-[10px]`, className)}
+ className={cn("h-6 w-8 text-[10px]", className)}

🧰 Tools

🪛 Biome (1.9.4)

[error] 132-132: Do not use template literals if interpolation and special-character handling are not needed.

Unsafe fix: Replace with string literal

(lint/style/noUnusedTemplateLiteral)

apps/web/app/(app)/compose/MultiEmailInput.tsx (3)

8-15: Improve type definitions for better type safety.

The register and error props are typed as any, which reduces type safety. Consider using more specific types for form handling.

interface MultiEmailInputProps {
  name: string;
  label: string;
  placeholder?: string;
  className?: string;
- register?: any;
- error?: any;
+ register?: UseFormRegister<any>;
+ error?: FieldError;
}

You would need to import these types from react-hook-form:

import { UseFormRegister, FieldError } from "react-hook-form";

---

29-34: Consider extracting the email validation regex to a utility function.

The email validation regex is complex and would be better maintained as a utility function that can be reused across the application.

Create a utility file for validation functions (e.g., utils/validation.ts):

export const isValidEmail = (email: string): boolean => {
  return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(
    email,
  );
};

Then import and use it in your component:

- // Email validation regex
- const isValidEmail = (email: string) => {
-   return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(
-     email,
-   );
- };
+ import { isValidEmail } from "@/utils/validation";

---

125-125: Consider handling initial values more explicitly.

The component doesn't seem to handle initial values that might be passed from parent components. This could be important when editing an existing email.

Add an effect to handle initial values:

+ useEffect(() => {
+   // If an initial value is provided as a comma-separated string
+   if (register && register(name).value && typeof register(name).value === 'string') {
+     const initialEmails = register(name).value.split(',').filter(email => email.trim() && isValidEmail(email.trim()));
+     if (initialEmails.length > 0) {
+       setEmails(initialEmails);
+     }
+   }
+ }, [name, register]);

Don't forget to import useEffect if it's not already imported.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro