From 6ece47e3edfea17aca7cf844e386ed32986dd328 Mon Sep 17 00:00:00 2001
From: SatsFaucet <satsfaucet@localhost>
Date: Mon, 6 Apr 2026 20:23:39 +0200
Subject: [PATCH] feat(frontend): allow sponsors to edit ads from My Ads

Add patchSponsor API, SponsorEditModal for title/description/URLs, and
Edit actions on desktop and mobile. Server PATCH /sponsor/:id already
enforces creator-only edits.

Made-with: Cursor
---
 frontend/src/api.ts                          |  17 ++
 frontend/src/components/SponsorEditModal.tsx | 158 +++++++++++++++++++
 frontend/src/pages/MyAdsPage.tsx             |  37 ++++-
 frontend/src/styles/global.css               |  32 ++++
 4 files changed, 240 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/SponsorEditModal.tsx

diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 18781de..ebd018f 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -445,3 +445,20 @@ export async function postSponsorRegenerateInvoice(sponsorId: number): Promise<{
   }
   return requestWithNip98("POST", `/sponsor/${sponsorId}/regenerate-invoice`);
 }
+
+export async function patchSponsor(
+  sponsorId: number,
+  body: {
+    title?: string;
+    description?: string;
+    link_url?: string;
+    image_url?: string;
+    category?: string;
+    lightning_address?: string;
+  }
+): Promise<SponsorMyAd> {
+  if (getToken()) {
+    return requestWithBearer<SponsorMyAd>("PATCH", `/sponsor/${sponsorId}`, body);
+  }
+  return requestWithNip98<SponsorMyAd>("PATCH", `/sponsor/${sponsorId}`, body);
+}
diff --git a/frontend/src/components/SponsorEditModal.tsx b/frontend/src/components/SponsorEditModal.tsx
new file mode 100644
index 0000000..4f3eea6
--- /dev/null
+++ b/frontend/src/components/SponsorEditModal.tsx
@@ -0,0 +1,158 @@
+import { useState, useEffect, useCallback } from "react";
+import { Modal } from "./Modal";
+import { patchSponsor, type ApiError, type SponsorMyAd } from "../api";
+
+interface SponsorEditModalProps {
+  open: boolean;
+  ad: SponsorMyAd | null;
+  onClose: () => void;
+  /** Called after a successful save with the updated row from the server. */
+  onSaved?: (updated: SponsorMyAd) => void;
+}
+
+export function SponsorEditModal({ open, ad, onClose, onSaved }: SponsorEditModalProps) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [linkUrl, setLinkUrl] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open || !ad) return;
+    setTitle(ad.title);
+    setDescription(ad.description);
+    setLinkUrl(ad.link_url);
+    setImageUrl(ad.image_url ?? "");
+    setError(null);
+  }, [open, ad]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!ad) return;
+      setError(null);
+      if (!title.trim()) {
+        setError("Title is required");
+        return;
+      }
+      if (!description.trim()) {
+        setError("Description is required");
+        return;
+      }
+      if (!linkUrl.trim() || !/^https?:\/\/.+/.test(linkUrl)) {
+        setError("Valid URL (https://...) is required");
+        return;
+      }
+      setLoading(true);
+      try {
+        const updated = await patchSponsor(ad.id, {
+          title: title.trim(),
+          description: description.trim(),
+          link_url: linkUrl.trim(),
+          image_url: imageUrl.trim() || undefined,
+        });
+        onSaved?.(updated);
+        onClose();
+      } catch (e) {
+        const msg =
+          e && typeof e === "object" && "message" in e
+            ? String((e as ApiError).message)
+            : "Failed to save changes";
+        setError(msg);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [ad, title, description, linkUrl, imageUrl, onSaved, onClose]
+  );
+
+  if (!ad) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Edit sponsor ad"
+      variant="sponsor"
+      preventClose={loading}
+    >
+      <form className="sponsor-form sponsor-edit-form" onSubmit={handleSubmit}>
+        <div className="sponsor-form-row">
+          <label htmlFor="sponsor-edit-title" className="sponsor-form-label">
+            Title <span className="required">*</span>
+          </label>
+          <input
+            id="sponsor-edit-title"
+            type="text"
+            className="sponsor-form-input"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Your project or product name"
+            maxLength={100}
+            required
+            disabled={loading}
+          />
+        </div>
+        <div className="sponsor-form-row">
+          <label htmlFor="sponsor-edit-desc" className="sponsor-form-label">
+            Short description <span className="required">*</span>
+          </label>
+          <textarea
+            id="sponsor-edit-desc"
+            className="sponsor-form-textarea"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Brief description (max 500 chars)"
+            maxLength={500}
+            rows={3}
+            required
+            disabled={loading}
+          />
+        </div>
+        <div className="sponsor-form-row">
+          <label htmlFor="sponsor-edit-link" className="sponsor-form-label">
+            Destination URL <span className="required">*</span>
+          </label>
+          <input
+            id="sponsor-edit-link"
+            type="url"
+            className="sponsor-form-input"
+            value={linkUrl}
+            onChange={(e) => setLinkUrl(e.target.value)}
+            placeholder="https://..."
+            required
+            disabled={loading}
+          />
+        </div>
+        <div className="sponsor-form-row">
+          <label htmlFor="sponsor-edit-image" className="sponsor-form-label">
+            Image URL <span className="optional">(optional)</span>
+          </label>
+          <input
+            id="sponsor-edit-image"
+            type="url"
+            className="sponsor-form-input"
+            value={imageUrl}
+            onChange={(e) => setImageUrl(e.target.value)}
+            placeholder="https://..."
+            disabled={loading}
+          />
+        </div>
+        {error && (
+          <p className="sponsor-form-error" role="alert">
+            {error}
+          </p>
+        )}
+        <div className="sponsor-form-actions">
+          <button type="button" className="sponsor-form-btn secondary" onClick={onClose} disabled={loading}>
+            Cancel
+          </button>
+          <button type="submit" className="sponsor-form-btn primary" disabled={loading}>
+            {loading ? "Saving…" : "Save changes"}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
diff --git a/frontend/src/pages/MyAdsPage.tsx b/frontend/src/pages/MyAdsPage.tsx
index 82ecacc..f69017b 100644
--- a/frontend/src/pages/MyAdsPage.tsx
+++ b/frontend/src/pages/MyAdsPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import { Link } from "react-router-dom";
 import { getSponsorMyAds, getToken, postSponsorRegenerateInvoice } from "../api";
 import { SponsorInvoiceModal } from "../components/SponsorInvoiceModal";
+import { SponsorEditModal } from "../components/SponsorEditModal";
 import type { SponsorMyAd } from "../api";
 
 function formatStatus(s: string): string {
@@ -26,6 +27,7 @@ export function MyAdsPage() {
     duration_days: number;
   } | null>(null);
   const [invoiceLoading, setInvoiceLoading] = useState(false);
+  const [editingAd, setEditingAd] = useState<SponsorMyAd | null>(null);
 
   useEffect(() => {
     document.title = "My Ads — Sats Faucet";
@@ -55,14 +57,16 @@ export function MyAdsPage() {
     return () => { cancelled = true; };
   }, []);
 
-  const refreshAds = useCallback(() => {
+  const refreshAds = useCallback((opts?: { silent?: boolean }) => {
     const token = getToken();
     if (!token) return;
-    setLoading(true);
+    if (!opts?.silent) setLoading(true);
     getSponsorMyAds()
       .then(setAds)
       .catch(() => setAds([]))
-      .finally(() => setLoading(false));
+      .finally(() => {
+        if (!opts?.silent) setLoading(false);
+      });
   }, []);
 
   const handlePayInvoice = useCallback(async (ad: SponsorMyAd) => {
@@ -137,7 +141,16 @@ export function MyAdsPage() {
                         <td>{getDaysLeft(ad.expires_at)} days</td>
                         <td>{ad.views}</td>
                         <td>{ad.clicks}</td>
-                        <td>
+                        <td className="my-ads-actions-cell">
+                          {(ad.status === "active" || ad.status === "pending_payment") && (
+                            <button
+                              type="button"
+                              className="my-ads-edit-btn"
+                              onClick={() => setEditingAd(ad)}
+                            >
+                              Edit
+                            </button>
+                          )}
                           {ad.status === "active" || ad.status === "expired" ? (
                             <Link to={`/sponsors?extend=${ad.id}`}>Extend</Link>
                           ) : ad.status === "pending_payment" ? (
@@ -170,6 +183,15 @@ export function MyAdsPage() {
                       <span className="my-ads-mobile-meta">{ad.views} views · {ad.clicks} clicks</span>
                     </div>
                     <div className="my-ads-mobile-actions">
+                      {(ad.status === "active" || ad.status === "pending_payment") && (
+                        <button
+                          type="button"
+                          className="my-ads-mobile-action-link"
+                          onClick={() => setEditingAd(ad)}
+                        >
+                          Edit
+                        </button>
+                      )}
                       {ad.status === "active" || ad.status === "expired" ? (
                         <Link to={`/sponsors?extend=${ad.id}`} className="my-ads-mobile-action-link">Extend</Link>
                       ) : ad.status === "pending_payment" ? (
@@ -200,6 +222,13 @@ export function MyAdsPage() {
         result={pendingInvoice}
         onPaid={refreshAds}
       />
+
+      <SponsorEditModal
+        open={editingAd !== null}
+        ad={editingAd}
+        onClose={() => setEditingAd(null)}
+        onSaved={() => refreshAds({ silent: true })}
+      />
     </div>
   );
 }
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d993adf..f6cb818 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -3296,6 +3296,10 @@ h1 {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
 }
 .my-ads-mobile-action-link {
   display: inline-flex;
@@ -3351,3 +3355,31 @@ h1 {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+.my-ads-actions-cell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+}
+.my-ads-edit-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+}
+.my-ads-edit-btn:hover:not(:disabled) {
+  color: var(--accent-hover);
+}
+.my-ads-edit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sponsor-edit-form {
+  margin-top: 4px;
+}