feat(emails): add ability to select an email

This commit adds the ability to select an email in the list by clicking on it. The selected email is highlighted with a french-blue background color. The first email in the list is automatically selected by default.

The `EmailItem` component now accepts an `onClick` prop and an `isSelected` prop, which are used to handle click events and apply styles respectively.

The `EmailList` component now uses state to keep track of the currently selected email ID, and passes this information down to each `EmailItem`.

src/pages/popup/components/home/emails/EmailItem.tsx

@@ -3,9 +3,19 @@ import { MaskedEmail } from 'fastmail-masked-email';
 
 interface MaskedEmailListItemProps {
   maskedEmail: MaskedEmail;
+  onClick: (id: string) => void;
+  isSelected: boolean;
 }
 
-export default function EmailItem({ maskedEmail }: MaskedEmailListItemProps) {
+export default function EmailItem({
+  maskedEmail,
+  onClick,
+  isSelected
+}: MaskedEmailListItemProps) {
+  const handleClick = () => {
+    onClick(maskedEmail.id);
+  };
+
   const truncatedEmail = useMemo(() => {
     const emailLength = maskedEmail.email.length;
     const maxLength = 28;
@@ -16,8 +26,16 @@ export default function EmailItem({ maskedEmail }: MaskedEmailListItemProps) {
       return maskedEmail.email;
     }
   }, [maskedEmail.email]);
+
+  // If the email item is currently selected, use the french-blue background color.
+  const backgroundStyle = isSelected
+    ? 'bg-french-blue'
+    : 'hover:bg-big-stone/[0.4]';
   return (
-    <div className="h-[50px] w-[95%] hover:bg-big-stone/[0.4] rounded-[5px] mx-auto m-auto">
+    <div
+      className={`h-[50px] w-[95%] rounded-[5px] mx-auto m-auto ${backgroundStyle}`}
+      onClick={handleClick}
+    >
       <div className="flex flex-row justify-between">
         <div className="flex flex-col align-middle ml-2 mt-1">
           <div className="text-sm text-white font-bold">{truncatedEmail}</div>

src/pages/popup/components/home/emails/EmailList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { MaskedEmail } from 'fastmail-masked-email';
 import EmailItem from '@pages/popup/components/home/emails/EmailItem';
 import Fuse from 'fuse.js';
@@ -32,8 +32,19 @@ function EmailList({
     useExtendedSearch: true
   });
   const searchResults = searchQuery ? fuse.search(searchQuery) : filteredEmails;
+  const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);
+  const handleEmailItemClick = (id: string) => {
+    setSelectedEmailId(id);
+  };
 
   useEffect(() => {
+    // Select the first email in the list by default
+    if (searchResults.length > 0) {
+      const firstEmailId = isFuseResult(searchResults[0])
+        ? searchResults[0].item.id
+        : searchResults[0].id;
+      setSelectedEmailId(firstEmailId);
+    }
     // Call the onFilteredEmailsCountChange callback with the searchResults length
     onFilteredEmailsCountChange(searchResults.length);
   }, [searchResults, onFilteredEmailsCountChange]);
@@ -45,7 +56,14 @@ function EmailList({
           const maskedEmail: MaskedEmail = isFuseResult(result)
             ? result.item
             : result;
-          return <EmailItem key={maskedEmail.id} maskedEmail={maskedEmail} />;
+          return (
+            <EmailItem
+              key={maskedEmail.id}
+              maskedEmail={maskedEmail}
+              onClick={handleEmailItemClick}
+              isSelected={maskedEmail.id === selectedEmailId}
+            />
+          );
         })}
       </ul>
     </div>