feat: custom newsletter slug

frontend/src/components/letterfeed/NewsletterCard.tsx

@@ -10,7 +10,7 @@ interface NewsletterCardProps {
 }
 
 export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
-  const feedUrl = getFeedUrl(newsletter.id)
+  const feedUrl = getFeedUrl(newsletter)
 
   return (
     <Card className="hover:shadow-md transition-shadow flex flex-col">

frontend/src/components/letterfeed/NewsletterDialog.tsx

@@ -33,6 +33,7 @@ const getInitialState = (newsletter: Newsletter | null | undefined) => {
   if (newsletter) {
     return {
       name: newsletter.name,
+      slug: newsletter.slug || "",
       emails: newsletter.senders.map((s) => s.email),
       move_to_folder: newsletter.move_to_folder || "",
       extract_content: newsletter.extract_content,
@@ -40,6 +41,7 @@ const getInitialState = (newsletter: Newsletter | null | undefined) => {
   }
   return {
     name: "",
+    slug: "",
     emails: [""],
     move_to_folder: "",
     extract_content: false,
@@ -84,6 +86,7 @@ export function NewsletterDialog({ newsletter, isOpen, folderOptions, onOpenChan
 
     const payload = {
       name: formData.name,
+      slug: formData.slug,
       sender_emails: formData.emails.filter((email) => email.trim()),
       move_to_folder: formData.move_to_folder,
       extract_content: formData.extract_content,
@@ -134,6 +137,16 @@ export function NewsletterDialog({ newsletter, isOpen, folderOptions, onOpenChan
             />
           </div>
 
+          <div className="space-y-2">
+            <Label htmlFor="slug">Custom URL</Label>
+            <Input
+              id="slug"
+              value={formData.slug}
+              onChange={(e) => setFormData((prev) => ({ ...prev, slug: e.target.value }))}
+              placeholder="my-custom-url"
+            />
+          </div>
+
           <div className="space-y-2">
             <Label htmlFor="move_to_folder">Move To Folder</Label>
             <Select

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

@@ -3,7 +3,6 @@ import { Header } from "../Header"
 import { Toaster } from "@/components/ui/sonner"
 import { toast } from "sonner"
 import * as api from "@/lib/api"
-import { AuthProvider } from "@/contexts/AuthContext"
 import { useAuth } from "@/hooks/useAuth"
 
 jest.mock("@/lib/api")
@@ -35,10 +34,6 @@ describe("Header", () => {
   const logout = jest.fn()
   const consoleError = jest.spyOn(console, "error").mockImplementation(() => {})
 
-  const renderWithAuthProvider = (component: React.ReactElement) => {
-    return render(<AuthProvider>{component}</AuthProvider>)
-  }
-
   beforeEach(() => {
     jest.clearAllMocks()
     consoleError.mockClear()

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

@@ -7,16 +7,17 @@ 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}`),
+  getFeedUrl: jest.fn((newsletter: Newsletter) => `http://mock-api/feeds/${newsletter.slug || newsletter.id}`),
 }))
 
 const mockNewsletter: Newsletter = {
-  id: 1,
+  id: "1",
   name: "Tech Weekly",
+  slug: "tech-weekly",
   is_active: true,
   senders: [
-    { id: 1, email: "contact@techweekly.com", newsletter_id: 1 },
-    { id: 2, email: "updates@techweekly.com", newsletter_id: 1 },
+    { id: "1", email: "contact@techweekly.com" },
+    { id: "2", email: "updates@techweekly.com" },
   ],
   entries_count: 42,
 }
@@ -38,8 +39,8 @@ describe("NewsletterCard", () => {
 
     // 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")
+    expect(feedLink).toHaveAttribute("href", "http://mock-api/feeds/tech-weekly")
+    expect(feedLink).toHaveTextContent("http://mock-api/feeds/tech-weekly")
   })
 
   it('calls the onEdit function with the correct newsletter when the edit button is clicked', () => {

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

@@ -18,6 +18,7 @@ const mockedApi = api as jest.Mocked<typeof api>
 const mockNewsletter: Newsletter = {
   id: "1",
   name: "Existing Newsletter",
+  slug: "existing-newsletter",
   is_active: true,
   extract_content: false,
   senders: [{ id: "1", email: "current@example.com" }],
@@ -39,6 +40,7 @@ describe("NewsletterDialog", () => {
       mockedApi.createNewsletter.mockResolvedValueOnce({
         id: "2",
         name: "My New Newsletter",
+        slug: "my-new-newsletter",
         is_active: true,
         extract_content: false,
         senders: [{ id: "2", email: "test@example.com" }],
@@ -50,6 +52,7 @@ describe("NewsletterDialog", () => {
       expect(screen.getByText("Register New Newsletter")).toBeInTheDocument()
 
       fireEvent.change(screen.getByLabelText(/Newsletter Name/i), { target: { value: "My New Newsletter" } })
+      fireEvent.change(screen.getByLabelText(/Custom URL/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 }))
@@ -57,6 +60,7 @@ describe("NewsletterDialog", () => {
       await waitFor(() => {
         expect(mockedApi.createNewsletter).toHaveBeenCalledWith({
           name: "My New Newsletter",
+          slug: "my-new-newsletter",
           sender_emails: ["test@example.com"],
           move_to_folder: "",
           extract_content: false,
@@ -92,7 +96,9 @@ describe("NewsletterDialog", () => {
 
       expect(screen.getByText("Edit Newsletter")).toBeInTheDocument()
       const nameInput = screen.getByLabelText(/Newsletter Name/i)
+      const slugInput = screen.getByLabelText(/Custom URL/i)
       expect(nameInput).toHaveValue("Existing Newsletter")
+      expect(slugInput).toHaveValue("existing-newsletter")
       expect(screen.getByDisplayValue("current@example.com")).toBeInTheDocument()
 
       fireEvent.change(nameInput, { target: { value: "Updated Name" } })
@@ -101,6 +107,7 @@ describe("NewsletterDialog", () => {
       await waitFor(() => {
         expect(mockedApi.updateNewsletter).toHaveBeenCalledWith("1", {
           name: "Updated Name",
+          slug: "existing-newsletter",
           sender_emails: ["current@example.com"],
           move_to_folder: "",
           extract_content: false,

frontend/src/lib/__tests__/api.test.ts

@@ -13,6 +13,7 @@ import {
   NewsletterCreate,
   NewsletterUpdate,
   SettingsCreate,
+  Newsletter,
 } from "../api"
 import { toast } from "sonner"
 
@@ -259,10 +260,33 @@ describe("API Functions", () => {
   })
 
   describe("getFeedUrl", () => {
-    it("should return the correct feed URL", () => {
-      const newsletterId = "123"
-      const expectedUrl = `${API_BASE_URL}/feeds/${newsletterId}`
-      const url = getFeedUrl(newsletterId)
+    it("should return the correct feed URL using slug if available", () => {
+      const newsletter: Newsletter = {
+        id: "123",
+        slug: "my-newsletter",
+        name: "Test",
+        is_active: true,
+        senders: [],
+        entries_count: 0,
+        extract_content: false,
+      }
+      const expectedUrl = `${API_BASE_URL}/feeds/my-newsletter`
+      const url = getFeedUrl(newsletter)
+      expect(url).toBe(expectedUrl)
+    })
+
+    it("should return the correct feed URL using id if slug is not available", () => {
+      const newsletter: Newsletter = {
+        id: "123",
+        slug: null,
+        name: "Test",
+        is_active: true,
+        senders: [],
+        entries_count: 0,
+        extract_content: false,
+      }
+      const expectedUrl = `${API_BASE_URL}/feeds/123`
+      const url = getFeedUrl(newsletter)
       expect(url).toBe(expectedUrl)
     })
   })

frontend/src/lib/api.ts

@@ -9,6 +9,7 @@ export interface Sender {
 export interface Newsletter {
   id: string
   name: string
+  slug: string | null
   is_active: boolean
   move_to_folder?: string | null
   extract_content: boolean
@@ -18,6 +19,7 @@ export interface Newsletter {
 
 export interface NewsletterCreate {
     name: string;
+    slug?: string | null;
     sender_emails: string[];
     move_to_folder?: string | null;
     extract_content: boolean;
@@ -25,6 +27,7 @@ export interface NewsletterCreate {
 
 export interface NewsletterUpdate {
     name: string;
+    slug?: string | null;
     sender_emails: string[];
     move_to_folder?: string | null;
     extract_content: boolean;
@@ -198,6 +201,7 @@ export async function processEmails(): Promise<{ message: string }> {
     }, "Failed to process emails");
 }
 
-export function getFeedUrl(newsletterId: string): string {
-    return `${API_BASE_URL}/feeds/${newsletterId}`;
+export function getFeedUrl(newsletter: Newsletter): string {
+    const feedIdentifier = newsletter.slug || newsletter.id;
+    return `${API_BASE_URL}/feeds/${feedIdentifier}`;
 }