Add CSV export for bookmarks (#266)

* Initial plan

* Add CSV export functionality for bookmarks

Co-authored-by: alexthemitchell <[email protected]>

* Address PR review comments - extract shared type, fix CSV escaping, remove unused mock

Co-authored-by: alexthemitchell <[email protected]>

* Address second round of PR review comments - improve date mocking, aria-label, docs, and RFC 4180 compliance

Co-authored-by: alexthemitchell <[email protected]>

* Add formula injection protection and align with codebase CSV conventions

Co-authored-by: alexthemitchell <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: alexthemitchell <[email protected]>

Author: Copilot

src/panels/Bookmarks.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect, useMemo, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { notify } from "../lib/notifications";
+import { downloadBookmarksCSV } from "../utils/bookmark-import-export";
 import { formatFrequency } from "../utils/frequency";
 import { generateBookmarkId } from "../utils/id";
+import type { Bookmark } from "../types/bookmark";
 
 /**
  * Bookmarks panel/page for frequency management
@@ -24,16 +26,6 @@ import { generateBookmarkId } from "../utils/id";
  * TODO: Migrate to IndexedDB for better performance with 10k+ entries
  */
 
-interface Bookmark {
-  id: string;
-  frequency: number; // Hz
-  name: string;
-  tags: string[];
-  notes: string;
-  createdAt: number; // timestamp
-  lastUsed: number; // timestamp
-}
-
 interface BookmarksProps {
   isPanel?: boolean; // True when rendered as a side panel, false for full-page route
 }
@@ -261,6 +253,16 @@ function Bookmarks({ isPanel = false }: BookmarksProps): React.JSX.Element {
     });
   };
 
+  const handleExport = (): void => {
+    downloadBookmarksCSV(bookmarks);
+    notify({
+      message: `Exported ${bookmarks.length} bookmark${bookmarks.length !== 1 ? "s" : ""} to CSV`,
+      sr: "polite",
+      visual: true,
+      tone: "success",
+    });
+  };
+
   const containerClass = isPanel ? "panel-container" : "page-container";
   const showForm = isAdding || editingId !== null;
   const bookmarkToDelete = pendingDeleteId
@@ -371,8 +373,16 @@ function Bookmarks({ isPanel = false }: BookmarksProps): React.JSX.Element {
             )}
           </section>
 
-          <section aria-label="Add Bookmark">
+          <section aria-label="Bookmark Actions">
             <button onClick={handleAdd}>Add Bookmark</button>
+            {bookmarks.length > 0 && (
+              <button
+                onClick={handleExport}
+                aria-label="Export bookmarks to CSV"
+              >
+                Export CSV
+              </button>
+            )}
           </section>
         </>
       )}

src/panels/__tests__/Bookmarks.test.tsx

@@ -304,4 +304,45 @@ describe("Bookmarks", () => {
       expect(arg).toMatch(/\/monitor\?frequency=162550000/);
     });
   });
+
+  describe("CSV Export", () => {
+    it("does not show export button when no bookmarks exist", () => {
+      render(
+        <BrowserRouter>
+          <Bookmarks />
+        </BrowserRouter>,
+      );
+
+      expect(
+        screen.queryByRole("button", { name: /export/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows export button when bookmarks exist", async () => {
+      const bookmarks = [
+        {
+          id: "bm-1",
+          frequency: 100000000,
+          name: "FM Radio",
+          tags: ["fm"],
+          notes: "",
+          createdAt: Date.now(),
+          lastUsed: Date.now(),
+        },
+      ];
+      localStorageMock.setItem("rad.io:bookmarks", JSON.stringify(bookmarks));
+
+      render(
+        <BrowserRouter>
+          <Bookmarks />
+        </BrowserRouter>,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /export bookmarks to csv/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
 });

src/types/bookmark.ts

@@ -0,0 +1,12 @@
+/**
+ * Bookmark type definition for frequency management
+ */
+export interface Bookmark {
+  id: string;
+  frequency: number; // Hz
+  name: string;
+  tags: string[];
+  notes: string;
+  createdAt: number; // timestamp
+  lastUsed: number; // timestamp
+}