refactor: centralize newsletter dialogs and optimize newsletter card

frontend/components/letterfeed/EditNewsletterDialog.tsx

@@ -1,186 +0,0 @@
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Plus } from "lucide-react"
-import { Newsletter, updateNewsletter, deleteNewsletter } from "@/lib/api"
-import { Checkbox } from "@/components/ui/checkbox"
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-interface EditNewsletterDialogProps {
-  newsletter: Newsletter | null
-  isOpen: boolean
-  folderOptions: string[]
-  onOpenChange: (isOpen: boolean) => void
-  onSuccess: () => void
-}
-
-export function EditNewsletterDialog({ newsletter, isOpen, folderOptions, onOpenChange, onSuccess }: EditNewsletterDialogProps) {
-  const [editedDetails, setEditedDetails] = useState<{ name: string; emails: string[], move_to_folder: string | null, extract_content: boolean }>({
-    name: "",
-    emails: [],
-    move_to_folder: "",
-    extract_content: false,
-  })
-
-  useEffect(() => {
-    if (newsletter) {
-      setEditedDetails({
-        name: newsletter.name,
-        emails: newsletter.senders.map((s) => s.email),
-        move_to_folder: newsletter.move_to_folder || "",
-        extract_content: newsletter.extract_content,
-      })
-    }
-  }, [newsletter])
-
-  if (!newsletter) return null
-
-  const handleUpdateEmailChange = (index: number, value: string) => {
-    setEditedDetails((prev) => ({
-      ...prev,
-      emails: prev.emails.map((email, i) => (i === index ? value : email)),
-    }))
-  }
-
-  const handleAddEmailToEdit = () => {
-    setEditedDetails((prev) => ({
-      ...prev,
-      emails: [...prev.emails, ""],
-    }))
-  }
-
-  const handleRemoveEmailFromEdit = (index: number) => {
-    setEditedDetails((prev) => ({
-      ...prev,
-      emails: prev.emails.filter((_, i) => i !== index),
-    }))
-  }
-
-  const handleUpdate = async () => {
-    try {
-      await updateNewsletter(newsletter.id, {
-        name: editedDetails.name,
-        sender_emails: editedDetails.emails.filter((email) => email.trim()),
-        move_to_folder: editedDetails.move_to_folder,
-        extract_content: editedDetails.extract_content,
-      })
-      onOpenChange(false)
-      onSuccess()
-    } catch (error) {
-      console.error("Failed to update newsletter:", error)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (window.confirm(`Are you sure you want to delete the "${newsletter.name}" newsletter?`)) {
-      try {
-        await deleteNewsletter(newsletter.id)
-        onOpenChange(false)
-        onSuccess()
-      } catch (error) {
-        console.error("Failed to delete newsletter:", error)
-      }
-    }
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit Newsletter</DialogTitle>
-          <DialogDescription>Update the details for {newsletter.name}.</DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="space-y-2">
-            <Label htmlFor="edit-name">Newsletter Name</Label>
-            <Input
-              id="edit-name"
-              value={editedDetails.name}
-              onChange={(e) => setEditedDetails((prev) => ({ ...prev, name: e.target.value }))}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="edit-move_to_folder">Move To Folder</Label>
-            <Select
-              value={editedDetails.move_to_folder || "None"}
-              onValueChange={(value) =>
-                setEditedDetails((prev) => ({ ...prev, move_to_folder: value === "None" ? "" : value }))
-              }
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select folder or leave empty" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="None">Default (use global setting)</SelectItem>
-                {folderOptions.map((folder) => (
-                  <SelectItem key={folder} value={folder}>
-                    {folder}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label>Email Addresses</Label>
-            {editedDetails.emails.map((email, index) => (
-              <div key={index} className="flex gap-2">
-                <Input
-                  value={email}
-                  onChange={(e) => handleUpdateEmailChange(index, e.target.value)}
-                  placeholder="Enter email address"
-                  type="email"
-                />
-                {editedDetails.emails.length > 1 && (
-                  <Button variant="outline" size="sm" onClick={() => handleRemoveEmailFromEdit(index)}>
-                    Remove
-                  </Button>
-                )}
-              </div>
-            ))}
-            <Button variant="outline" size="sm" onClick={handleAddEmailToEdit} className="w-full bg-transparent">
-              <Plus className="w-4 h-4 mr-2" />
-              Add Another Email
-            </Button>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="edit-extract-content"
-              checked={editedDetails.extract_content}
-              onCheckedChange={(checked) =>
-                setEditedDetails((prev) => ({ ...prev, extract_content: !!checked }))
-              }
-            />
-            <Label htmlFor="edit-extract-content">Extract main content from emails</Label>
-          </div>
-        </div>
-        <DialogFooter className="sm:justify-between">
-          <Button variant="destructive" onClick={handleDelete}>
-            Delete Newsletter
-          </Button>
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleUpdate}>Save Changes</Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

frontend/components/letterfeed/NewsletterCard.tsx

@@ -3,7 +3,6 @@ import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Rss, Mail, ExternalLink, Edit } from "lucide-react"
 import { Newsletter, getFeedUrl } from "@/lib/api"
-import { useEffect, useState } from "react"
 
 interface NewsletterCardProps {
   newsletter: Newsletter
@@ -11,16 +10,7 @@ interface NewsletterCardProps {
 }
 
 export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
-  const [absoluteFeedUrl, setAbsoluteFeedUrl] = useState(getFeedUrl(newsletter.id))
-
-  useEffect(() => {
-    const url = getFeedUrl(newsletter.id)
-    if (url.startsWith("/")) {
-      setAbsoluteFeedUrl(`${window.location.origin}${url}`)
-    } else {
-      setAbsoluteFeedUrl(url)
-    }
-  }, [newsletter.id])
+  const feedUrl = getFeedUrl(newsletter.id)
 
   return (
     <Card className="hover:shadow-md transition-shadow flex flex-col">
@@ -32,8 +22,8 @@ export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
               {newsletter.name}
             </CardTitle>
             <CardDescription>
-                      {newsletter.entries_count} entr{newsletter.entries_count !== 1 ? "ies" : "y"}
-                    </CardDescription>
+              {newsletter.entries_count} entr{newsletter.entries_count !== 1 ? "ies" : "y"}
+            </CardDescription>
           </div>
           <Button variant="ghost" size="icon" onClick={() => onEdit(newsletter)} aria-label="Edit Newsletter">
             <Edit className="w-4 h-4" />
@@ -58,13 +48,13 @@ export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
         <div>
           <h4 className="text-sm font-medium text-gray-700 mb-2">RSS Feed</h4>
           <a
-            href={getFeedUrl(newsletter.id)}
+            href={feedUrl}
             target="_blank"
             rel="noopener noreferrer"
             className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 hover:underline"
           >
             <ExternalLink className="w-3 h-3" />
-            {absoluteFeedUrl}
+            {feedUrl}
           </a>
         </div>
       </CardContent>

frontend/components/letterfeed/NewsletterDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -11,9 +11,8 @@ import {
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Plus } from "lucide-react"
-import { createNewsletter } from "@/lib/api"
+import { Newsletter, createNewsletter, updateNewsletter, deleteNewsletter } from "@/lib/api"
 import { Checkbox } from "@/components/ui/checkbox"
-
 import {
   Select,
   SelectContent,
@@ -22,56 +21,95 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-interface AddNewsletterDialogProps {
+interface NewsletterDialogProps {
+  newsletter?: Newsletter | null
   isOpen: boolean
   folderOptions: string[]
   onOpenChange: (isOpen: boolean) => void
   onSuccess: () => void
 }
 
-export function AddNewsletterDialog({ isOpen, folderOptions, onOpenChange, onSuccess }: AddNewsletterDialogProps) {
-  const [newNewsletter, setNewNewsletter] = useState({
+const getInitialState = (newsletter: Newsletter | null | undefined) => {
+  if (newsletter) {
+    return {
+      name: newsletter.name,
+      emails: newsletter.senders.map((s) => s.email),
+      move_to_folder: newsletter.move_to_folder || "",
+      extract_content: newsletter.extract_content,
+    }
+  }
+  return {
     name: "",
     emails: [""],
     move_to_folder: "",
     extract_content: false,
-  })
+  }
+}
+
+export function NewsletterDialog({ newsletter, isOpen, folderOptions, onOpenChange, onSuccess }: NewsletterDialogProps) {
+  const isEditMode = !!newsletter
+  const [formData, setFormData] = useState(getInitialState(newsletter))
+
+  useEffect(() => {
+    if (isOpen) {
+      setFormData(getInitialState(newsletter))
+    }
+  }, [isOpen, newsletter])
+
+  const handleEmailChange = (index: number, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      emails: prev.emails.map((email, i) => (i === index ? value : email)),
+    }))
+  }
 
   const handleAddEmail = () => {
-    setNewNewsletter((prev) => ({
+    setFormData((prev) => ({
       ...prev,
       emails: [...prev.emails, ""],
     }))
   }
 
   const handleRemoveEmail = (index: number) => {
-    setNewNewsletter((prev) => ({
+    setFormData((prev) => ({
       ...prev,
       emails: prev.emails.filter((_, i) => i !== index),
     }))
   }
 
-  const handleEmailChange = (index: number, value: string) => {
-    setNewNewsletter((prev) => ({
-      ...prev,
-      emails: prev.emails.map((email, i) => (i === index ? value : email)),
-    }))
+  const handleSubmit = async () => {
+    if (!formData.name || !formData.emails.some((email) => email.trim())) {
+      return
+    }
+
+    const payload = {
+      name: formData.name,
+      sender_emails: formData.emails.filter((email) => email.trim()),
+      move_to_folder: formData.move_to_folder,
+      extract_content: formData.extract_content,
+    }
+
+    try {
+      if (isEditMode) {
+        await updateNewsletter(newsletter.id, payload)
+      } else {
+        await createNewsletter(payload)
+      }
+      onOpenChange(false)
+      onSuccess()
+    } catch (error) {
+      console.error(`Failed to ${isEditMode ? "update" : "create"} newsletter:`, error)
+    }
   }
 
-  const handleSubmit = async () => {
-    if (newNewsletter.name && newNewsletter.emails.some((email) => email.trim())) {
+  const handleDelete = async () => {
+    if (isEditMode && window.confirm(`Are you sure you want to delete the "${newsletter.name}" newsletter?`)) {
       try {
-        await createNewsletter({
-          name: newNewsletter.name,
-          sender_emails: newNewsletter.emails.filter((email) => email.trim()),
-          move_to_folder: newNewsletter.move_to_folder,
-          extract_content: newNewsletter.extract_content,
-        })
-        setNewNewsletter({ name: "", emails: [""], move_to_folder: "", extract_content: false })
+        await deleteNewsletter(newsletter.id)
         onOpenChange(false)
         onSuccess()
       } catch (error) {
-        console.error("Failed to create newsletter:", error)
+        console.error("Failed to delete newsletter:", error)
       }
     }
   }
@@ -80,16 +118,18 @@ export function AddNewsletterDialog({ isOpen, folderOptions, onOpenChange, onSuc
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle>Register New Newsletter</DialogTitle>
-          <DialogDescription>Add a new newsletter.</DialogDescription>
+          <DialogTitle>{isEditMode ? "Edit" : "Register New"} Newsletter</DialogTitle>
+          <DialogDescription>
+            {isEditMode ? `Update the details for ${newsletter.name}.` : "Add a new newsletter."}
+          </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="space-y-2">
             <Label htmlFor="name">Newsletter Name</Label>
             <Input
               id="name"
-              value={newNewsletter.name}
-              onChange={(e) => setNewNewsletter((prev) => ({ ...prev, name: e.target.value }))}
+              value={formData.name}
+              onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
               placeholder="Enter newsletter name"
             />
           </div>
@@ -97,9 +137,9 @@ export function AddNewsletterDialog({ isOpen, folderOptions, onOpenChange, onSuc
           <div className="space-y-2">
             <Label htmlFor="move_to_folder">Move To Folder</Label>
             <Select
-              value={newNewsletter.move_to_folder || "None"}
+              value={formData.move_to_folder || "None"}
               onValueChange={(value) =>
-                setNewNewsletter((prev) => ({ ...prev, move_to_folder: value === "None" ? "" : value }))
+                setFormData((prev) => ({ ...prev, move_to_folder: value === "None" ? "" : value }))
               }
             >
               <SelectTrigger>
@@ -118,7 +158,7 @@ export function AddNewsletterDialog({ isOpen, folderOptions, onOpenChange, onSuc
 
           <div className="space-y-2">
             <Label>Email Addresses</Label>
-            {newNewsletter.emails.map((email, index) => (
+            {formData.emails.map((email, index) => (
               <div key={index} className="flex gap-2">
                 <Input
                   value={email}
@@ -126,7 +166,7 @@ export function AddNewsletterDialog({ isOpen, folderOptions, onOpenChange, onSuc
                   placeholder="Enter email address"
                   type="email"
                 />
-                {newNewsletter.emails.length > 1 && (
+                {formData.emails.length > 1 && (
                   <Button variant="outline" size="sm" onClick={() => handleRemoveEmail(index)}>
                     Remove
                   </Button>
@@ -141,19 +181,28 @@ export function AddNewsletterDialog({ isOpen, folderOptions, onOpenChange, onSuc
           <div className="flex items-center space-x-2">
             <Checkbox
               id="extract-content"
-              checked={newNewsletter.extract_content}
+              checked={formData.extract_content}
               onCheckedChange={(checked) =>
-                setNewNewsletter((prev) => ({ ...prev, extract_content: !!checked }))
+                setFormData((prev) => ({ ...prev, extract_content: !!checked }))
               }
             />
             <Label htmlFor="extract-content">Extract main content from emails</Label>
           </div>
         </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={handleSubmit}>Register Newsletter</Button>
+        <DialogFooter className={isEditMode ? "sm:justify-between" : ""}>
+          {isEditMode && (
+            <Button variant="destructive" onClick={handleDelete}>
+              Delete Newsletter
+            </Button>
+          )}
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit}>
+              {isEditMode ? "Save Changes" : "Register Newsletter"}
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

frontend/components/letterfeed/__tests__/AddNewsletterDialog.test.tsx

@@ -1,77 +0,0 @@
-import React from "react"
-import { render, screen, fireEvent, waitFor } from "@testing-library/react"
-import "@testing-library/jest-dom"
-import { AddNewsletterDialog } from "../AddNewsletterDialog"
-import * as api from "@/lib/api"
-
-// Mock the API module
-jest.mock("@/lib/api", () => ({
-  ...jest.requireActual("@/lib/api"),
-  createNewsletter: jest.fn(),
-}))
-
-const mockedApi = api as jest.Mocked<typeof api>
-
-describe("AddNewsletterDialog", () => {
-  const handleOpenChange = jest.fn()
-  const handleSuccess = jest.fn()
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it("allows user to fill out the form and submit", async () => {
-    mockedApi.createNewsletter.mockResolvedValueOnce({
-      id: 1,
-      name: "My New Newsletter",
-      is_active: true,
-      extract_content: false,
-      senders: [{ id: 1, email: "test@example.com", newsletter_id: 1 }],
-      entries_count: 0,
-    })
-
-    render(<AddNewsletterDialog isOpen={true} folderOptions={["INBOX", "Archive"]} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
-
-    // Fill out the form
-    fireEvent.change(screen.getByLabelText(/Newsletter Name/i), { target: { value: "My New Newsletter" } })
-    fireEvent.change(screen.getByPlaceholderText(/Enter email address/i), { target: { value: "test@example.com" } })
-
-    // Submit the form
-    fireEvent.click(screen.getByRole("button", { name: /Register Newsletter/i }))
-
-    // Wait for the async operation to complete
-    await waitFor(() => {
-      expect(mockedApi.createNewsletter).toHaveBeenCalledWith({
-        name: "My New Newsletter",
-        sender_emails: ["test@example.com"],
-        move_to_folder: "",
-        extract_content: false,
-      })
-      expect(handleSuccess).toHaveBeenCalledTimes(1)
-      expect(handleOpenChange).toHaveBeenCalledWith(false)
-    })
-  })
-
-  it("allows adding and removing email fields", () => {
-    render(<AddNewsletterDialog isOpen={true} folderOptions={[]} onOpenChange={() => {}} onSuccess={() => {}} />)
-
-    // Initial state
-    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
-
-    // Add another email
-    fireEvent.click(screen.getByRole("button", { name: /Add Another Email/i }))
-    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(2)
-
-    // Remove the first email
-    fireEvent.click(screen.getAllByRole("button", { name: /Remove/i })[0])
-    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
-  })
-
-  it("closes the dialog when cancel is clicked", () => {
-    render(<AddNewsletterDialog isOpen={true} folderOptions={["INBOX", "Archive"]} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
-
-    fireEvent.click(screen.getByRole("button", { name: /Cancel/i }))
-    expect(handleOpenChange).toHaveBeenCalledWith(false)
-    expect(handleSuccess).not.toHaveBeenCalled()
-  })
-})

frontend/components/letterfeed/__tests__/EditNewsletterDialog.test.tsx

@@ -1,114 +0,0 @@
-import React from "react"
-import { render, screen, fireEvent, waitFor } from "@testing-library/react"
-import "@testing-library/jest-dom"
-import { EditNewsletterDialog } from "../EditNewsletterDialog"
-import { Newsletter } from "@/lib/api"
-import * as api from "@/lib/api"
-
-// Mock the API module
-jest.mock("@/lib/api", () => ({
-  ...jest.requireActual("@/lib/api"),
-  updateNewsletter: jest.fn(),
-  deleteNewsletter: jest.fn(),
-}))
-
-const mockedApi = api as jest.Mocked<typeof api>
-
-const mockNewsletter: Newsletter = {
-  id: 1,
-  name: "Existing Newsletter",
-  is_active: true,
-  extract_content: false,
-  senders: [{ id: 1, email: "current@example.com", newsletter_id: 1 }],
-  entries_count: 5,
-}
-
-describe("EditNewsletterDialog", () => {
-  const handleOpenChange = jest.fn()
-  const handleSuccess = jest.fn()
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-    // Mock window.confirm for the delete action
-    window.confirm = jest.fn(() => true)
-  })
-
-  it("renders with initial newsletter data and allows updates", async () => {
-    mockedApi.updateNewsletter.mockResolvedValueOnce({ ...mockNewsletter, name: "Updated Name" })
-
-    render(
-      <EditNewsletterDialog
-        newsletter={mockNewsletter}
-        isOpen={true}
-        folderOptions={["INBOX", "Archive"]}
-        onOpenChange={handleOpenChange}
-        onSuccess={handleSuccess}
-      />
-    )
-
-    // Check that initial data is present
-    const nameInput = screen.getByLabelText(/Newsletter Name/i)
-    expect(nameInput).toHaveValue("Existing Newsletter")
-    expect(screen.getByDisplayValue("current@example.com")).toBeInTheDocument()
-
-    // Update the name
-    fireEvent.change(nameInput, { target: { value: "Updated Name" } })
-
-    // Submit
-    fireEvent.click(screen.getByRole("button", { name: /Save Changes/i }))
-
-    await waitFor(() => {
-      expect(mockedApi.updateNewsletter).toHaveBeenCalledWith(1, {
-        name: "Updated Name",
-        sender_emails: ["current@example.com"],
-        move_to_folder: "",
-        extract_content: false,
-      })
-      expect(handleSuccess).toHaveBeenCalledTimes(1)
-      expect(handleOpenChange).toHaveBeenCalledWith(false)
-    })
-  })
-
-  it("calls deleteNewsletter when delete button is clicked and confirmed", async () => {
-    mockedApi.deleteNewsletter.mockResolvedValueOnce()
-
-    render(
-      <EditNewsletterDialog
-        newsletter={mockNewsletter}
-        isOpen={true}
-        folderOptions={["INBOX", "Archive"]}
-        onOpenChange={handleOpenChange}
-        onSuccess={handleSuccess}
-      />
-    )
-
-    fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
-
-    expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete the "Existing Newsletter" newsletter?')
-
-    await waitFor(() => {
-      expect(mockedApi.deleteNewsletter).toHaveBeenCalledWith(1)
-      expect(handleSuccess).toHaveBeenCalledTimes(1)
-      expect(handleOpenChange).toHaveBeenCalledWith(false)
-    })
-  })
-
-  it("does not call deleteNewsletter when delete is not confirmed", () => {
-    window.confirm = jest.fn(() => false) // User clicks "Cancel"
-
-    render(
-      <EditNewsletterDialog
-        newsletter={mockNewsletter}
-        isOpen={true}
-        folderOptions={["INBOX", "Archive"]}
-        onOpenChange={handleOpenChange}
-        onSuccess={handleSuccess}
-      />
-    )
-
-    fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
-
-    expect(mockedApi.deleteNewsletter).not.toHaveBeenCalled()
-    expect(handleSuccess).not.toHaveBeenCalled()
-  })
-})

frontend/components/letterfeed/__tests__/NewsletterDialog.test.tsx

@@ -0,0 +1,136 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { NewsletterDialog } from "../NewsletterDialog"
+import { Newsletter } from "@/lib/api"
+import * as api from "@/lib/api"
+
+// Mock the API module
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"),
+  createNewsletter: jest.fn(),
+  updateNewsletter: jest.fn(),
+  deleteNewsletter: jest.fn(),
+}))
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+const mockNewsletter: Newsletter = {
+  id: "1",
+  name: "Existing Newsletter",
+  is_active: true,
+  extract_content: false,
+  senders: [{ id: "1", email: "current@example.com" }],
+  entries_count: 5,
+  move_to_folder: "",
+}
+
+describe("NewsletterDialog", () => {
+  const handleOpenChange = jest.fn()
+  const handleSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    window.confirm = jest.fn(() => true)
+  })
+
+  describe("Add Mode", () => {
+    it("allows user to fill out the form and submit", async () => {
+      mockedApi.createNewsletter.mockResolvedValueOnce({
+        id: "2",
+        name: "My New Newsletter",
+        is_active: true,
+        extract_content: false,
+        senders: [{ id: "2", email: "test@example.com" }],
+        entries_count: 0,
+      })
+
+      render(<NewsletterDialog isOpen={true} folderOptions={["INBOX", "Archive"]} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
+
+      expect(screen.getByText("Register New Newsletter")).toBeInTheDocument()
+
+      fireEvent.change(screen.getByLabelText(/Newsletter Name/i), { target: { value: "My New Newsletter" } })
+      fireEvent.change(screen.getByPlaceholderText(/Enter email address/i), { target: { value: "test@example.com" } })
+
+      fireEvent.click(screen.getByRole("button", { name: /Register Newsletter/i }))
+
+      await waitFor(() => {
+        expect(mockedApi.createNewsletter).toHaveBeenCalledWith({
+          name: "My New Newsletter",
+          sender_emails: ["test@example.com"],
+          move_to_folder: "",
+          extract_content: false,
+        })
+        expect(handleSuccess).toHaveBeenCalledTimes(1)
+        expect(handleOpenChange).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it("allows adding and removing email fields", () => {
+      render(<NewsletterDialog isOpen={true} folderOptions={[]} onOpenChange={() => {}} onSuccess={() => {}} />)
+      expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
+      fireEvent.click(screen.getByRole("button", { name: /Add Another Email/i }))
+      expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(2)
+      fireEvent.click(screen.getAllByRole("button", { name: /Remove/i })[0])
+      expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
+    })
+  })
+
+  describe("Edit Mode", () => {
+    it("renders with initial newsletter data and allows updates", async () => {
+      mockedApi.updateNewsletter.mockResolvedValueOnce({ ...mockNewsletter, name: "Updated Name" })
+
+      render(
+        <NewsletterDialog
+          newsletter={mockNewsletter}
+          isOpen={true}
+          folderOptions={["INBOX", "Archive"]}
+          onOpenChange={handleOpenChange}
+          onSuccess={handleSuccess}
+        />
+      )
+
+      expect(screen.getByText("Edit Newsletter")).toBeInTheDocument()
+      const nameInput = screen.getByLabelText(/Newsletter Name/i)
+      expect(nameInput).toHaveValue("Existing Newsletter")
+      expect(screen.getByDisplayValue("current@example.com")).toBeInTheDocument()
+
+      fireEvent.change(nameInput, { target: { value: "Updated Name" } })
+      fireEvent.click(screen.getByRole("button", { name: /Save Changes/i }))
+
+      await waitFor(() => {
+        expect(mockedApi.updateNewsletter).toHaveBeenCalledWith("1", {
+          name: "Updated Name",
+          sender_emails: ["current@example.com"],
+          move_to_folder: "",
+          extract_content: false,
+        })
+        expect(handleSuccess).toHaveBeenCalledTimes(1)
+        expect(handleOpenChange).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it("calls deleteNewsletter when delete button is clicked and confirmed", async () => {
+      mockedApi.deleteNewsletter.mockResolvedValueOnce(undefined)
+
+      render(
+        <NewsletterDialog
+          newsletter={mockNewsletter}
+          isOpen={true}
+          folderOptions={["INBOX", "Archive"]}
+          onOpenChange={handleOpenChange}
+          onSuccess={handleSuccess}
+        />
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
+      expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete the "Existing Newsletter" newsletter?')
+
+      await waitFor(() => {
+        expect(mockedApi.deleteNewsletter).toHaveBeenCalledWith("1")
+        expect(handleSuccess).toHaveBeenCalledTimes(1)
+        expect(handleOpenChange).toHaveBeenCalledWith(false)
+      })
+    })
+  })
+})

frontend/src/app/page.tsx

@@ -12,8 +12,7 @@ import { LoadingSpinner } from "@/components/letterfeed/LoadingSpinner"
 import { Header } from "@/components/letterfeed/Header"
 import { NewsletterList } from "@/components/letterfeed/NewsletterList"
 import { EmptyState } from "@/components/letterfeed/EmptyState"
-import { AddNewsletterDialog } from "@/components/letterfeed/AddNewsletterDialog"
-import { EditNewsletterDialog } from "@/components/letterfeed/EditNewsletterDialog"
+import { NewsletterDialog } from "@/components/letterfeed/NewsletterDialog"
 import { SettingsDialog } from "@/components/letterfeed/SettingsDialog"
 
 export default function LetterFeedApp() {
@@ -24,7 +23,6 @@ export default function LetterFeedApp() {
 
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
   const [isSettingsOpen, setIsSettingsOpen] = useState(false)
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
   const [editingNewsletter, setEditingNewsletter] = useState<Newsletter | null>(null)
 
   const fetchData = useCallback(async () => {
@@ -50,7 +48,10 @@ export default function LetterFeedApp() {
 
   const openEditDialog = (newsletter: Newsletter) => {
     setEditingNewsletter(newsletter)
-    setIsEditDialogOpen(true)
+  }
+
+  const closeEditDialog = () => {
+    setEditingNewsletter(null)
   }
 
   if (isLoading) {
@@ -71,25 +72,23 @@ export default function LetterFeedApp() {
           <EmptyState onAddNewsletter={() => setIsAddDialogOpen(true)} />
         )}
 
-        <AddNewsletterDialog
+        <NewsletterDialog
           isOpen={isAddDialogOpen}
           folderOptions={folderOptions}
           onOpenChange={setIsAddDialogOpen}
           onSuccess={fetchData}
         />
 
-        {editingNewsletter && (
-          <EditNewsletterDialog
-            newsletter={editingNewsletter}
-            isOpen={isEditDialogOpen}
-            folderOptions={folderOptions}
-            onOpenChange={setIsEditDialogOpen}
-            onSuccess={() => {
-              setEditingNewsletter(null)
-              fetchData()
-            }}
-          />
-        )}
+        <NewsletterDialog
+          newsletter={editingNewsletter}
+          isOpen={!!editingNewsletter}
+          folderOptions={folderOptions}
+          onOpenChange={closeEditDialog}
+          onSuccess={() => {
+            closeEditDialog()
+            fetchData()
+          }}
+        />
 
         {settings && (
           <SettingsDialog