Merge branch 'main' into feature/invoice-form-enhancements

Author: Kingsman-99

src/app/api/collab/[invoiceId]/route.ts

@@ -0,0 +1,142 @@
+import { NextRequest } from "next/server";
+
+interface CursorEvent {
+  type: "cursor";
+  address: string;
+  field: string;
+  timestamp: number;
+}
+
+interface PresenceEvent {
+  type: "presence";
+  address: string;
+  online: boolean;
+  timestamp: number;
+}
+
+type CollabEvent = CursorEvent | PresenceEvent;
+
+interface SseClient {
+  id: string;
+  controller: ReadableStreamDefaultController;
+  encoder: TextEncoder;
+  address: string | null;
+}
+
+const clients = new Map<string, SseClient[]>();
+
+function broadcast(invoiceId: string, event: CollabEvent) {
+  const invoiceClients = clients.get(invoiceId);
+  if (!invoiceClients) return;
+  const data = `data: ${JSON.stringify(event)}\n\n`;
+  const encoded = new TextEncoder().encode(data);
+  for (const client of invoiceClients) {
+    try {
+      client.controller.enqueue(encoded);
+    } catch {
+      // client disconnected
+    }
+  }
+}
+
+function prune(invoiceId: string) {
+  const invoiceClients = clients.get(invoiceId);
+  if (!invoiceClients) return;
+  const now = Date.now();
+  const active = invoiceClients.filter(
+    (c) => now - c.id.split("-").map(Number)[1] < 60_000
+  );
+  if (active.length === 0) {
+    clients.delete(invoiceId);
+  } else {
+    clients.set(invoiceId, active);
+  }
+}
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: { invoiceId: string } }
+) {
+  const { invoiceId } = params;
+
+  const stream = new ReadableStream({
+    start(controller) {
+      const client: SseClient = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        controller,
+        encoder: new TextEncoder(),
+        address: null,
+      };
+
+      if (!clients.has(invoiceId)) {
+        clients.set(invoiceId, []);
+      }
+      clients.get(invoiceId)!.push(client);
+
+      controller.enqueue(
+        new TextEncoder().encode(`data: ${JSON.stringify({ type: "connected", clientId: client.id })}\n\n`)
+      );
+
+      prune(invoiceId);
+    },
+    cancel() {
+      const invoiceClients = clients.get(invoiceId);
+      if (invoiceClients) {
+        const remaining = invoiceClients.filter(
+          (c) => !c.controller.locked
+        );
+        if (remaining.length === 0) {
+          clients.delete(invoiceId);
+          broadcast(invoiceId, {
+            type: "presence",
+            address: "all",
+            online: false,
+            timestamp: Date.now(),
+          });
+        } else {
+          clients.set(invoiceId, remaining);
+        }
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { invoiceId: string } }
+) {
+  const { invoiceId } = params;
+  const body = (await request.json()) as { address?: string; field?: string; online?: boolean };
+
+  if (!body.address) {
+    return Response.json({ error: "address is required" }, { status: 400 });
+  }
+
+  if (body.field !== undefined) {
+    broadcast(invoiceId, {
+      type: "cursor",
+      address: body.address,
+      field: body.field,
+      timestamp: Date.now(),
+    });
+  }
+
+  if (body.online !== undefined) {
+    broadcast(invoiceId, {
+      type: "presence",
+      address: body.address,
+      online: body.online,
+      timestamp: Date.now(),
+    });
+  }
+
+  return Response.json({ ok: true });
+}

src/app/api/invoices/route.ts

@@ -4,11 +4,13 @@ import { splitClient } from "@/lib/stellar";
 const PAGE_SIZE = 20;
 
 /**
- * GET /api/invoices?cursor=<id>&limit=20&publicKey=<address>
+ * GET /api/invoices?cursor=<id>&limit=20&publicKey=<address>&q=<query>
  *
  * Cursor-paginated invoice list. `cursor` is the exclusive lower bound —
  * the first page omits it, subsequent pages pass the last invoice id returned.
  *
+ * With `q` parameter, performs case-insensitive prefix matching on title and memo.
+ *
  * Response shape:
  *   { invoices: Invoice[], nextCursor: string | null }
  *
@@ -19,6 +21,7 @@ export async function GET(request: NextRequest) {
   const publicKey = searchParams.get("publicKey");
   const cursorParam = searchParams.get("cursor");
   const limitParam = searchParams.get("limit");
+  const q = searchParams.get("q")?.trim().toLowerCase() || "";
 
   if (!publicKey) {
     return NextResponse.json(
@@ -49,8 +52,19 @@ export async function GET(request: NextRequest) {
       const mine =
         inv.creator === publicKey ||
         inv.recipients.some((r) => r.address === publicKey);
+
       if (mine) {
-        results.push(inv);
+        if (q) {
+          const memo = (inv as any).memo as string | undefined;
+          const matchesQuery =
+            (inv.title || "").toLowerCase().startsWith(q) ||
+            (memo || "").toLowerCase().startsWith(q);
+          if (matchesQuery) {
+            results.push(inv);
+          }
+        } else {
+          results.push(inv);
+        }
       }
     } catch {
       // splitClient throws when invoice id does not exist — treat as end of list

src/app/invoice/[id]/page.tsx

@@ -130,7 +130,7 @@ export default function InvoiceDetailPage({ params }: Props) {
   const {
     invoice: streamInvoice,
     latestEvent,
-    isConnected,
+    isConnected: streamConnected,
     error: streamError,
   } = useInvoiceStream(id);
 
@@ -460,6 +460,12 @@ export default function InvoiceDetailPage({ params }: Props) {
         </div>
       )}
 
+      {/* Reconnecting indicator */}
+      <ReconnectionBanner
+        show={showReconnecting}
+        isConnected={streamConnected && collabConnected}
+      />
+
       {/* Release Banner */}
       {showReleaseBanner && (
         <ReleaseBanner
@@ -709,10 +715,17 @@ export default function InvoiceDetailPage({ params }: Props) {
                 placeholder="Amount in USDC"
                 value={payAmount}
                 onChange={(e) => setPayAmount(e.target.value)}
+                onFocus={() => setFocusedField("pay-amount-freighter")}
+                onBlur={() => {
+                  if (focusedField === "pay-amount-freighter") {
+                    emitFieldBlur();
+                  }
+                }}
                 required
                 aria-label="Amount in USDC"
                 className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
               />
+              <CursorOverlay cursors={remoteCursors} fieldName="pay-amount-freighter" />
               {error && <p className="text-red-400 text-sm">{error}</p>}
               {txHash && (
                 <p className="text-green-400 text-sm">
@@ -847,9 +860,16 @@ export default function InvoiceDetailPage({ params }: Props) {
                 placeholder="0.00"
                 value={payAmount}
                 onChange={(e) => setPayAmount(e.target.value)}
+                onFocus={() => setFocusedField("pay-amount")}
+                onBlur={() => {
+                  if (focusedField === "pay-amount") {
+                    emitFieldBlur();
+                  }
+                }}
                 required
                 className="w-full min-h-11 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
               />
+              <CursorOverlay cursors={remoteCursors} fieldName="pay-amount" />
             </div>
             {paymentError && (
               <p role="alert" className="text-red-400 text-sm">{paymentError}</p>