v0.1.0

frontend/components/letterfeed/AddNewsletterDialog.tsx

@@ -0,0 +1,115 @@
+import { useState } 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 { createNewsletter } from "@/lib/api"
+
+interface AddNewsletterDialogProps {
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  onSuccess: () => void
+}
+
+export function AddNewsletterDialog({ isOpen, onOpenChange, onSuccess }: AddNewsletterDialogProps) {
+  const [newNewsletter, setNewNewsletter] = useState({
+    name: "",
+    emails: [""],
+  })
+
+  const handleAddEmail = () => {
+    setNewNewsletter((prev) => ({
+      ...prev,
+      emails: [...prev.emails, ""],
+    }))
+  }
+
+  const handleRemoveEmail = (index: number) => {
+    setNewNewsletter((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 (newNewsletter.name && newNewsletter.emails.some((email) => email.trim())) {
+      try {
+        await createNewsletter({
+          name: newNewsletter.name,
+          sender_emails: newNewsletter.emails.filter((email) => email.trim()),
+        })
+        setNewNewsletter({ name: "", emails: [""] })
+        onOpenChange(false)
+        onSuccess()
+      } catch (error) {
+        console.error("Failed to create newsletter:", error)
+      }
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Register New Newsletter</DialogTitle>
+          <DialogDescription>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 }))}
+              placeholder="Enter newsletter name"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Email Addresses</Label>
+            {newNewsletter.emails.map((email, index) => (
+              <div key={index} className="flex gap-2">
+                <Input
+                  value={email}
+                  onChange={(e) => handleEmailChange(index, e.target.value)}
+                  placeholder="Enter email address"
+                  type="email"
+                />
+                {newNewsletter.emails.length > 1 && (
+                  <Button variant="outline" size="sm" onClick={() => handleRemoveEmail(index)}>
+                    Remove
+                  </Button>
+                )}
+              </div>
+            ))}
+            <Button variant="outline" size="sm" onClick={handleAddEmail} className="w-full bg-transparent">
+              <Plus className="w-4 h-4 mr-2" />
+              Add Another Email
+            </Button>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Register Newsletter</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/components/letterfeed/EditNewsletterDialog.tsx

@@ -0,0 +1,139 @@
+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"
+
+interface EditNewsletterDialogProps {
+  newsletter: Newsletter | null
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  onSuccess: () => void
+}
+
+export function EditNewsletterDialog({ newsletter, isOpen, onOpenChange, onSuccess }: EditNewsletterDialogProps) {
+  const [editedDetails, setEditedDetails] = useState<{ name: string; emails: string[] }>({
+    name: "",
+    emails: [],
+  })
+
+  useEffect(() => {
+    if (newsletter) {
+      setEditedDetails({
+        name: newsletter.name,
+        emails: newsletter.senders.map((s) => s.email),
+      })
+    }
+  }, [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()),
+      })
+      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>
+        <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>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>
+        <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/EmptyState.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button"
+import { Plus, Rss } from "lucide-react"
+
+interface EmptyStateProps {
+  onAddNewsletter: () => void
+}
+
+export function EmptyState({ onAddNewsletter }: EmptyStateProps) {
+  return (
+    <div className="text-center py-12">
+      <Rss className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+      <h3 className="text-lg font-medium text-gray-900 mb-2">No newsletters registered</h3>
+      <p className="text-gray-600 mb-4">Get started by adding your first newsletter</p>
+      <Button onClick={onAddNewsletter}>
+        <Plus className="w-4 h-4 mr-2" />
+        Add Your First Newsletter
+      </Button>
+    </div>
+  )
+}

frontend/components/letterfeed/Header.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button"
+import { Plus, Settings } from "lucide-react"
+import Image from "next/image"
+
+interface HeaderProps {
+  onOpenAddNewsletter: () => void
+  onOpenSettings: () => void
+}
+
+export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-8">
+      <div className="flex items-center gap-4">
+        <Image src="/logo.png" alt="LetterFeed Logo" width={48} height={48} className="rounded-lg" />
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">LetterFeed</h1>
+          <p className="text-gray-600 mt-1">Read your newsletters as RSS feeds!</p>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        <Button onClick={onOpenAddNewsletter}>
+          <Plus className="w-4 h-4 mr-2" />
+          Add Newsletter
+        </Button>
+
+        <Button variant="outline" onClick={onOpenSettings}>
+          <Settings className="w-4 h-4 mr-2" />
+          Settings
+        </Button>
+      </div>
+    </div>
+  )
+}

frontend/components/letterfeed/LoadingSpinner.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-react"
+
+export function LoadingSpinner() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <Loader2 className="w-12 h-12 text-gray-400 animate-spin" data-testid="loading-spinner" />
+    </div>
+  )
+}

frontend/components/letterfeed/NewsletterCard.tsx

@@ -0,0 +1,61 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+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"
+
+interface NewsletterCardProps {
+  newsletter: Newsletter
+  onEdit: (newsletter: Newsletter) => void
+}
+
+export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
+  return (
+    <Card className="hover:shadow-md transition-shadow flex flex-col">
+      <CardHeader>
+        <div className="flex justify-between items-start">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Rss className="w-5 h-5 text-orange-500" />
+              {newsletter.name}
+            </CardTitle>
+            <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" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4 flex-grow">
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+            <Mail className="w-4 h-4" />
+            Email Addresses
+          </h4>
+          <div className="flex flex-wrap gap-1">
+            {newsletter.senders.map((sender) => (
+              <Badge key={sender.id} variant="secondary" className="text-xs">
+                {sender.email}
+              </Badge>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">RSS Feed</h4>
+          <a
+            href={getFeedUrl(newsletter.id)}
+            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" />
+            {getFeedUrl(newsletter.id)}
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

frontend/components/letterfeed/NewsletterList.tsx

@@ -0,0 +1,17 @@
+import { Newsletter } from "@/lib/api"
+import { NewsletterCard } from "./NewsletterCard"
+
+interface NewsletterListProps {
+  newsletters: Newsletter[]
+  onEditNewsletter: (newsletter: Newsletter) => void
+}
+
+export function NewsletterList({ newsletters, onEditNewsletter }: NewsletterListProps) {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {newsletters.map((newsletter) => (
+        <NewsletterCard key={newsletter.id} newsletter={newsletter} onEdit={onEditNewsletter} />
+      ))}
+    </div>
+  )
+}

frontend/components/letterfeed/SettingsDialog.tsx

@@ -0,0 +1,227 @@
+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 { Checkbox } from "@/components/ui/checkbox"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Loader2, CheckCircle, XCircle } from "lucide-react"
+import { Settings as AppSettings, SettingsCreate, updateSettings, testImapConnection } from "@/lib/api"
+
+interface SettingsDialogProps {
+  settings: AppSettings
+  folderOptions: string[]
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  onSuccess: () => void
+}
+
+export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange, onSuccess }: SettingsDialogProps) {
+  const [currentSettings, setCurrentSettings] = useState<SettingsCreate | null>(null)
+  const [testConnectionStatus, setTestConnectionStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+  const [testConnectionMessage, setTestConnectionMessage] = useState("")
+
+  useEffect(() => {
+    if (settings) {
+      setCurrentSettings({ ...settings, imap_password: "" })
+    }
+  }, [settings])
+
+  if (!currentSettings) return null
+
+  const handleSettingsChange = <K extends keyof SettingsCreate>(key: K, value: SettingsCreate[K]) => {
+    setCurrentSettings((prev) => (prev ? { ...prev, [key]: value } : null))
+  }
+
+  const handleSave = async () => {
+    if (!currentSettings) return
+    try {
+      await updateSettings(currentSettings)
+      onOpenChange(false)
+      onSuccess()
+    } catch (error) {
+      console.error("Failed to save settings:", error)
+    }
+  }
+
+  const handleTestConnection = async () => {
+    if (!currentSettings) return
+    setTestConnectionStatus("loading")
+    try {
+      await updateSettings(currentSettings)
+      const result = await testImapConnection()
+      setTestConnectionStatus("success")
+      setTestConnectionMessage(result.message)
+    } catch (error: unknown) {
+      setTestConnectionStatus("error")
+      if (error instanceof Error) {
+        setTestConnectionMessage(error.message || "Connection failed")
+      } else {
+        setTestConnectionMessage("An unknown error occurred")
+      }
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+          <DialogDescription>Fields are locked if they are set by environment variables.</DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 py-4">
+          {/* IMAP Configuration */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium col-span-1 md:col-span-2">IMAP Configuration</h3>
+            <div className="space-y-2">
+              <Label htmlFor="imap-server">IMAP Server</Label>
+              <Input
+                id="imap-server"
+                value={currentSettings.imap_server}
+                onChange={(e) => handleSettingsChange("imap_server", e.target.value)}
+                placeholder="imap.gmail.com"
+                disabled={settings.locked_fields.includes("imap_server")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="imap-username">IMAP Username</Label>
+              <Input
+                id="imap-username"
+                value={currentSettings.imap_username}
+                onChange={(e) => handleSettingsChange("imap_username", e.target.value)}
+                placeholder="your-email@gmail.com"
+                disabled={settings.locked_fields.includes("imap_username")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="imap-password">IMAP Password</Label>
+              <Input
+                id="imap-password"
+                type="password"
+                value={currentSettings.imap_password}
+                onChange={(e) => handleSettingsChange("imap_password", e.target.value)}
+                placeholder="Your password or app password"
+                disabled={settings.locked_fields.includes("imap_password")}
+              />
+            </div>
+            <div className="pt-2">
+              <Button
+                onClick={handleTestConnection}
+                disabled={testConnectionStatus === "loading"}
+                variant="outline"
+                size="sm"
+              >
+                {testConnectionStatus === "loading" && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                Test Connection
+              </Button>
+              {testConnectionStatus !== "idle" && (
+                <div
+                  data-testid="connection-status"
+                  className={`mt-2 flex items-center text-sm ${
+                    testConnectionStatus === "success" ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {testConnectionStatus === "success" && <CheckCircle className="w-4 h-4 mr-2" />}
+                  {testConnectionStatus === "error" && <XCircle className="w-4 h-4 mr-2" />}
+                  {testConnectionMessage}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Email Processing */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium col-span-1 md:col-span-2">Email Processing</h3>
+            <div className="space-y-2">
+              <Label htmlFor="search-folder">Folder to Search</Label>
+              <Select
+                value={currentSettings.search_folder}
+                onValueChange={(value) => handleSettingsChange("search_folder", value)}
+                disabled={settings.locked_fields.includes("search_folder")}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select folder" />
+                </SelectTrigger>
+                <SelectContent>
+                  {folderOptions.map((folder) => (
+                    <SelectItem key={folder} value={folder}>
+                      {folder}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="move-folder">Move to Folder</Label>
+              <Select
+                value={currentSettings.move_to_folder || "None"}
+                onValueChange={(value) => handleSettingsChange("move_to_folder", value === "None" ? null : value)}
+                disabled={settings.locked_fields.includes("move_to_folder")}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select folder or leave empty" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="None">None (Don&apos;t move)</SelectItem>
+                  {folderOptions.map((folder) => (
+                    <SelectItem key={folder} value={folder}>
+                      {folder}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="check-interval">Check Interval (minutes)</Label>
+              <Input
+                id="check-interval"
+                type="number"
+                min="1"
+                max="1440"
+                value={currentSettings.email_check_interval}
+                onChange={(e) => handleSettingsChange("email_check_interval", Number.parseInt(e.target.value) || 15)}
+                placeholder="15"
+                disabled={settings.locked_fields.includes("email_check_interval")}
+              />
+            </div>
+            <div className="flex items-center space-x-2 pt-2">
+              <Checkbox
+                id="mark-read"
+                checked={currentSettings.mark_as_read}
+                onCheckedChange={(checked) => handleSettingsChange("mark_as_read", !!checked)}
+                disabled={settings.locked_fields.includes("mark_as_read")}
+              />
+              <Label htmlFor="mark-read" className="text-sm font-normal">
+                Mark emails as read
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="auto-add"
+                checked={currentSettings.auto_add_new_senders}
+                onCheckedChange={(checked) => handleSettingsChange("auto_add_new_senders", !!checked)}
+                disabled={settings.locked_fields.includes("auto_add_new_senders")}
+              />
+              <Label htmlFor="auto-add" className="text-sm font-normal">
+                Auto-add new senders
+              </Label>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>Save Settings</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,74 @@
+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,
+      senders: [{ id: 1, email: "test@example.com", newsletter_id: 1 }],
+      entries_count: 0,
+    })
+
+    render(<AddNewsletterDialog isOpen={true} 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"],
+      })
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("allows adding and removing email fields", () => {
+    render(<AddNewsletterDialog isOpen={true} 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} 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

@@ -0,0 +1,108 @@
+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,
+  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}
+        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"],
+      })
+      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}
+        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}
+        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__/EmptyState.test.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { EmptyState } from "../EmptyState"
+
+describe("EmptyState", () => {
+  it("renders the correct content", () => {
+    render(<EmptyState onAddNewsletter={() => {}} />)
+
+    expect(screen.getByText("No newsletters registered")).toBeInTheDocument()
+    expect(screen.getByText("Get started by adding your first newsletter")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /Add Your First Newsletter/i })).toBeInTheDocument()
+  })
+
+  it("calls onAddNewsletter when the button is clicked", () => {
+    const handleAddNewsletter = jest.fn()
+    render(<EmptyState onAddNewsletter={handleAddNewsletter} />)
+
+    const addButton = screen.getByRole("button", { name: /Add Your First Newsletter/i })
+    fireEvent.click(addButton)
+
+    expect(handleAddNewsletter).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,30 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { Header } from "../Header"
+
+describe("Header", () => {
+  it("renders the title and description", () => {
+    render(<Header onOpenAddNewsletter={() => {}} onOpenSettings={() => {}} />)
+    expect(screen.getByText("LetterFeed")).toBeInTheDocument()
+    expect(screen.getByText("Read your newsletters as RSS feeds!")).toBeInTheDocument()
+  })
+
+  it('calls onOpenAddNewsletter when "Add Newsletter" button is clicked', () => {
+    const handleOpenAdd = jest.fn()
+    render(<Header onOpenAddNewsletter={handleOpenAdd} onOpenSettings={() => {}} />)
+
+    const addButton = screen.getByRole("button", { name: /Add Newsletter/i })
+    fireEvent.click(addButton)
+    expect(handleOpenAdd).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onOpenSettings when "Settings" button is clicked', () => {
+    const handleOpenSettings = jest.fn()
+    render(<Header onOpenAddNewsletter={() => {}} onOpenSettings={handleOpenSettings} />)
+
+    const settingsButton = screen.getByRole("button", { name: /Settings/i })
+    fireEvent.click(settingsButton)
+    expect(handleOpenSettings).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,13 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { LoadingSpinner } from "../LoadingSpinner"
+
+describe("LoadingSpinner", () => {
+  it("renders the spinner with the correct animation class", () => {
+    render(<LoadingSpinner />)
+    const spinner = screen.getByTestId("loading-spinner")
+    expect(spinner).toBeInTheDocument()
+    expect(spinner).toHaveClass("animate-spin")
+  })
+})

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

@@ -0,0 +1,63 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { NewsletterCard } from "../NewsletterCard"
+import { Newsletter } from "@/lib/api"
+
+// Mock the getFeedUrl function
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"), // import and retain all actual implementations
+  getFeedUrl: jest.fn((id) => `http://mock-api/feeds/${id}`),
+}))
+
+const mockNewsletter: Newsletter = {
+  id: 1,
+  name: "Tech Weekly",
+  is_active: true,
+  senders: [
+    { id: 1, email: "contact@techweekly.com", newsletter_id: 1 },
+    { id: 2, email: "updates@techweekly.com", newsletter_id: 1 },
+  ],
+  entries_count: 42,
+}
+
+describe("NewsletterCard", () => {
+  it("renders newsletter details correctly", () => {
+    const handleEdit = jest.fn()
+    render(<NewsletterCard newsletter={mockNewsletter} onEdit={handleEdit} />)
+
+    // Check for the title
+    expect(screen.getByText("Tech Weekly")).toBeInTheDocument()
+
+    // Check for the entries count
+    expect(screen.getByText("42 entries")).toBeInTheDocument()
+
+    // Check for sender emails
+    expect(screen.getByText("contact@techweekly.com")).toBeInTheDocument()
+    expect(screen.getByText("updates@techweekly.com")).toBeInTheDocument()
+
+    // Check for the RSS feed link
+    const feedLink = screen.getByRole("link")
+    expect(feedLink).toHaveAttribute("href", "http://mock-api/feeds/1")
+    expect(feedLink).toHaveTextContent("http://mock-api/feeds/1")
+  })
+
+  it('calls the onEdit function with the correct newsletter when the edit button is clicked', () => {
+    const handleEdit = jest.fn()
+    render(<NewsletterCard newsletter={mockNewsletter} onEdit={handleEdit} />)
+
+    const editButton = screen.getByRole("button", { name: /edit newsletter/i })
+    fireEvent.click(editButton)
+
+    expect(handleEdit).toHaveBeenCalledTimes(1)
+    expect(handleEdit).toHaveBeenCalledWith(mockNewsletter)
+  })
+
+  it('displays "entry" for a single entry', () => {
+    const singleEntryNewsletter = { ...mockNewsletter, entries_count: 1 }
+    const handleEdit = jest.fn()
+    render(<NewsletterCard newsletter={singleEntryNewsletter} onEdit={handleEdit} />)
+
+    expect(screen.getByText("1 entry")).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,47 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { NewsletterList } from "../NewsletterList"
+import { Newsletter } from "@/lib/api"
+
+// Mock the child component to isolate the list component's behavior
+jest.mock("../NewsletterCard", () => ({
+  NewsletterCard: ({ newsletter }: { newsletter: Newsletter }) => (
+    <div data-testid={`newsletter-card-${newsletter.id}`}>{newsletter.name}</div>
+  ),
+}))
+
+const mockNewsletters: Newsletter[] = [
+  {
+    id: 1,
+    name: "Newsletter One",
+    is_active: true,
+    senders: [],
+    entries_count: 10,
+  },
+  {
+    id: 2,
+    name: "Newsletter Two",
+    is_active: true,
+    senders: [],
+    entries_count: 5,
+  },
+]
+
+describe("NewsletterList", () => {
+  it("renders a list of newsletter cards", () => {
+    render(<NewsletterList newsletters={mockNewsletters} onEditNewsletter={() => {}} />)
+
+    // Check that both newsletters are rendered
+    expect(screen.getByText("Newsletter One")).toBeInTheDocument()
+    expect(screen.getByText("Newsletter Two")).toBeInTheDocument()
+    expect(screen.getByTestId("newsletter-card-1")).toBeInTheDocument()
+    expect(screen.getByTestId("newsletter-card-2")).toBeInTheDocument()
+  })
+
+  it("renders nothing when the newsletter list is empty", () => {
+    const { container } = render(<NewsletterList newsletters={[]} onEditNewsletter={() => {}} />)
+    // The main div should be empty
+    expect(container.firstChild).toBeEmptyDOMElement()
+  })
+})

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

@@ -0,0 +1,131 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { SettingsDialog } from "../SettingsDialog"
+import { Settings } from "@/lib/api"
+import * as api from "@/lib/api"
+
+// Mock the API module
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"),
+  updateSettings: jest.fn(),
+  testImapConnection: jest.fn(),
+}))
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+const mockSettings: Settings = {
+  id: 1,
+  imap_server: "imap.example.com",
+  imap_username: "user@example.com",
+  search_folder: "INBOX",
+  move_to_folder: "Archive",
+  mark_as_read: true,
+  email_check_interval: 30,
+  auto_add_new_senders: false,
+  locked_fields: ["imap_server"], // Mock a locked field
+}
+
+const mockFolderOptions = ["INBOX", "Sent", "Archive", "Spam"]
+
+describe("SettingsDialog", () => {
+  const handleOpenChange = jest.fn()
+  const handleSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("renders settings and respects locked fields", () => {
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    // Check that a locked field is disabled
+    expect(screen.getByLabelText(/IMAP Server/i)).toBeDisabled()
+    // Check that a non-locked field is enabled
+    expect(screen.getByLabelText(/IMAP Username/i)).toBeEnabled()
+
+    // Check that values are set correctly
+    expect(screen.getByLabelText(/IMAP Username/i)).toHaveValue(mockSettings.imap_username)
+    expect(screen.getByLabelText(/Mark emails as read/i)).toBeChecked()
+  })
+
+  it("allows updating and saving settings", async () => {
+    mockedApi.updateSettings.mockResolvedValueOnce(mockSettings)
+
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    // Change a setting
+    fireEvent.change(screen.getByLabelText(/IMAP Username/i), { target: { value: "new.user@example.com" } })
+
+    // Save
+    fireEvent.click(screen.getByRole("button", { name: /Save Settings/i }))
+
+    await waitFor(() => {
+      expect(mockedApi.updateSettings).toHaveBeenCalledWith(
+        expect.objectContaining({
+          imap_username: "new.user@example.com",
+        })
+      )
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("handles successful connection test", async () => {
+    mockedApi.testImapConnection.mockResolvedValueOnce({ message: "Connection successful!" })
+
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Test Connection/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText("Connection successful!")).toBeInTheDocument()
+      expect(screen.getByTestId("connection-status")).toHaveClass("text-green-600")
+    })
+  })
+
+  it("handles failed connection test", async () => {
+    mockedApi.testImapConnection.mockRejectedValueOnce(new Error("Authentication failed"))
+
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Test Connection/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText("Authentication failed")).toBeInTheDocument()
+      expect(screen.getByTestId("connection-status")).toHaveClass("text-red-600")
+    })
+  })
+})

frontend/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

frontend/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

frontend/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

frontend/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

frontend/components/ui/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

frontend/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

frontend/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

frontend/components/ui/select.tsx

@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}