feat: infinite scroll, responsive layout, focus management, dark mode (closes #460 #461 #462 #463) (#525)

* feat(dashboard): replace loop fetch with cursor-paginated infinite scroll - Add GET /api/invoices route with cursor + limit params (closes #460) - Add useInfiniteInvoices hook backed by useSWRInfinite - Add InvoiceListSentinel component (IntersectionObserver, rootMargin 300px) - Wire DashboardClient to useInfiniteInvoices; remove 1-50 id scan loop - Sentinel shows spinner while fetching, 'All invoices loaded' when done - persistSize:true preserves loaded pages on browser back-button

* feat(invoice): responsive detail layout with px-4 sm:px-6 lg:px-8 gutters - Update layout.tsx wrapper: overflow-x-hidden + responsive padding (closes #461) - Update page.tsx main container: max-w-3xl, overflow-x-hidden, py-8 sm:py-12 - Add justify-end to header action button row to wrap cleanly on mobile - No horizontal overflow at 375px / 390px / 414px viewport widths

* feat(a11y): focus management — trap, restoration, Cancel Invoice trigger - Add src/components/ui/Modal.tsx: reusable accessible dialog shell using FocusTrap (closes #462) - Add triggerRef for each modal in InvoiceDetailPage (share, shareQR, duplicate, cancel, pay) - Add useEffect per modal to restore focus to trigger on close - Add Cancel Invoice button in header (creator-only, Pending invoices) - Tab cycling within open modals already handled by existing FocusTrap

* feat(theme): dark mode hook + ui re-exports + implementation docs - Add src/hooks/useTheme.ts: re-exports useTheme from ThemeContext (closes #463) - Add src/components/ui/ThemeToggle.tsx: re-export from ThemeToggle - darkMode:'class' already set in tailwind.config.js - themeBootstrap IIFE already injected in layout.tsx (no FOUC) - ThemeContext + ThemeToggle already implement light/dark/system cycle with localStorage persistence under key 'split-theme' - Add docs/IMPLEMENTATION_SUMMARY.md covering all 4 issues

Author: joshfatoye0011-bit

docs/IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,81 @@
+import { NextRequest, NextResponse } from "next/server";
+import { splitClient } from "@/lib/stellar";
+
+const PAGE_SIZE = 20;
+
+/**
+ * GET /api/invoices?cursor=<id>&limit=20&publicKey=<address>
+ *
+ * Cursor-paginated invoice list. `cursor` is the exclusive lower bound —
+ * the first page omits it, subsequent pages pass the last invoice id returned.
+ *
+ * Response shape:
+ *   { invoices: Invoice[], nextCursor: string | null }
+ *
+ * `nextCursor` is null when there are no further pages.
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const publicKey = searchParams.get("publicKey");
+  const cursorParam = searchParams.get("cursor");
+  const limitParam = searchParams.get("limit");
+
+  if (!publicKey) {
+    return NextResponse.json(
+      { error: "publicKey query parameter is required" },
+      { status: 400 },
+    );
+  }
+
+  const limit = Math.min(
+    Math.max(1, parseInt(limitParam ?? String(PAGE_SIZE), 10) || PAGE_SIZE),
+    50,
+  );
+
+  // Determine starting invoice id (cursor is the last id we already returned)
+  const startId = cursorParam ? parseInt(cursorParam, 10) + 1 : 1;
+
+  const results = [];
+  let lastCheckedId = startId - 1;
+
+  for (let id = startId; results.length < limit; id++) {
+    // Safety cap — don't scan more than limit*10 ids in a single request
+    if (id > startId + limit * 10) break;
+
+    lastCheckedId = id;
+
+    try {
+      const inv = await splitClient.getInvoice(String(id));
+      const mine =
+        inv.creator === publicKey ||
+        inv.recipients.some((r) => r.address === publicKey);
+      if (mine) {
+        results.push(inv);
+      }
+    } catch {
+      // splitClient throws when invoice id does not exist — treat as end of list
+      return NextResponse.json(
+        { invoices: results, nextCursor: null },
+        {
+          headers: {
+            "Cache-Control": "private, no-store",
+          },
+        },
+      );
+    }
+  }
+
+  // If we filled the page we don't know yet whether there are more — return the
+  // id of the last invoice we fetched so the client can continue from there.
+  const nextCursor =
+    results.length === limit ? String(results[results.length - 1].id) : null;
+
+  return NextResponse.json(
+    { invoices: results, nextCursor },
+    {
+      headers: {
+        "Cache-Control": "private, no-store",
+      },
+    },
+  );
+}

src/app/api/invoices/route.ts

@@ -31,5 +31,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default function InvoiceLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
+  return (
+    <div className="min-h-screen overflow-x-hidden">
+      <div className="px-4 sm:px-6 lg:px-8">
+        {children}
+      </div>
+    </div>
+  );
 }

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

@@ -139,6 +139,29 @@ export default function InvoiceDetailPage({ params }: Props) {
 
   const prevStatusRef = useRef<string | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
+  // Focus restoration refs — track which button opened the most-recently opened modal
+  const cancelModalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const shareModalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const shareQRModalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const payModalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const duplicateModalTriggerRef = useRef<HTMLButtonElement | null>(null);
+
+  // Restore focus to the trigger button when each modal closes
+  useEffect(() => {
+    if (!showShareModal) shareModalTriggerRef.current?.focus();
+  }, [showShareModal]);
+  useEffect(() => {
+    if (!showShareQRModal) shareQRModalTriggerRef.current?.focus();
+  }, [showShareQRModal]);
+  useEffect(() => {
+    if (!showDuplicateModal) duplicateModalTriggerRef.current?.focus();
+  }, [showDuplicateModal]);
+  useEffect(() => {
+    if (!showCancelModal) cancelModalTriggerRef.current?.focus();
+  }, [showCancelModal]);
+  useEffect(() => {
+    if (!showPayModal) payModalTriggerRef.current?.focus();
+  }, [showPayModal]);
   const [exportingTimeline, setExportingTimeline] = useState(false);
   const { status: pushStatus, subscribe: subscribeToPush, unsubscribe: unsubscribeFromPush } =
     usePushNotifications(id);
@@ -394,7 +417,7 @@ export default function InvoiceDetailPage({ params }: Props) {
     process.env.NEXT_PUBLIC_CONTRACT_ID ?? invoice.token;
 
   return (
-    <main className="max-w-2xl mx-auto px-4 sm:px-6 py-16">
+    <main className="w-full max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 overflow-x-hidden">
       {/* Reconnecting indicator */}
       {showReconnecting && (
         <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 bg-yellow-600 text-white px-4 py-2 rounded-xl shadow-lg flex items-center gap-2 animate-pulse">
@@ -448,11 +471,12 @@ export default function InvoiceDetailPage({ params }: Props) {
           )}
           <CopyButton text={id} className="!py-1 !px-2 text-xs" />
         </div>
-        <div className="ml-auto flex items-center gap-2 flex-wrap">
+        <div className="ml-auto flex items-center gap-2 flex-wrap justify-end">
           <CopyLinkButton url={`${typeof window !== "undefined" ? window.location.origin : ""}/verify/${id}`} />
           <button
             type="button"
             onClick={() => setShowShareModal(true)}
+            ref={shareModalTriggerRef}
             className="px-3 py-1.5 rounded-lg bg-gray-700 hover:bg-gray-600 text-white text-sm transition-colors"
             aria-label="Share invoice"
           >
@@ -461,6 +485,7 @@ export default function InvoiceDetailPage({ params }: Props) {
           <button
             type="button"
             onClick={() => setShowDuplicateModal(true)}
+            ref={duplicateModalTriggerRef}
             className="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-sm transition-colors"
             aria-label="Duplicate invoice"
           >
@@ -487,6 +512,7 @@ export default function InvoiceDetailPage({ params }: Props) {
           <button
             type="button"
             onClick={() => setShowShareQRModal(true)}
+            ref={shareQRModalTriggerRef}
             className="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold text-white transition-colors"
             aria-label="Share invoice via QR"
           >
@@ -519,6 +545,17 @@ export default function InvoiceDetailPage({ params }: Props) {
           >
             Print Invoice
           </button>
+          {invoice.status === "Pending" && publicKey === invoice.creator && (
+            <button
+              type="button"
+              ref={cancelModalTriggerRef}
+              onClick={() => setShowCancelModal(true)}
+              className="px-3 py-1.5 rounded-lg bg-red-700 hover:bg-red-600 text-white text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500"
+              aria-label="Cancel this invoice"
+            >
+              Cancel Invoice
+            </button>
+          )}
         </div>
       </div>
 
@@ -881,7 +918,10 @@ export default function InvoiceDetailPage({ params }: Props) {
             await load();
             setShowCancelModal(false);
           }}
-          onClose={() => setShowCancelModal(false)}
+          onClose={() => {
+            setShowCancelModal(false);
+            // focus restored by useEffect watching showCancelModal
+          }}
         />
       )}
 

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

@@ -3,8 +3,8 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { splitClient } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
+import { splitClient } from "@/lib/stellar";
 import InvoiceSearch from "@/components/InvoiceSearch";
 import InvoiceCard from "@/components/InvoiceCard";
 import ActivityFeed from "@/components/ActivityFeed";
@@ -16,6 +16,8 @@ import { setBulkReminders, type BulkReminderResult } from "@/lib/reminders";
 import { getOrAssignDisplayNumber } from "@/lib/invoiceNumbering";
 import { formatAmount } from "@stellar-split/sdk";
 import type { Invoice } from "@stellar-split/sdk";
+import { useInfiniteInvoices } from "@/hooks/useInfiniteInvoices";
+import InvoiceListSentinel from "@/components/InvoiceListSentinel";
 import {
   DASHBOARD_PRESETS,
   SORT_OPTIONS,
@@ -50,9 +52,7 @@ export default function DashboardClient() {
   );
 
   const [publicKey, setPublicKey] = useState<string | null>(null);
-  const [invoices, setInvoices] = useState<Invoice[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [walletError, setWalletError] = useState<string | null>(null);
   const [searchValue, setSearchValue] = useState("");
   const [numericResult, setNumericResult] = useState<Invoice | null>(null);
   const [searchLoading, setSearchLoading] = useState(false);
@@ -108,9 +108,21 @@ export default function DashboardClient() {
   useEffect(() => {
     getFreighterPublicKey()
       .then(setPublicKey)
-      .catch(() => setError("Connect your Freighter wallet to view your dashboard."));
+      .catch(() => setWalletError("Connect your Freighter wallet to view your dashboard."));
   }, []);
 
+  // Infinite-scroll invoice list
+  const {
+    invoices,
+    isLoading: loading,
+    isFetchingMore,
+    hasMore,
+    loadMore,
+    error: invoicesError,
+  } = useInfiniteInvoices(publicKey);
+
+  const error = walletError ?? (invoicesError ? String(invoicesError) : null);
+
   // Listen for N key to create invoice
   useEffect(() => {
     const handleCreateInvoice = () => {
@@ -123,32 +135,7 @@ export default function DashboardClient() {
     };
   }, [router]);
 
-  // Fetch invoices progressively
-  useEffect(() => {
-    if (!publicKey) return;
-    const fetchInvoices = async () => {
-      setLoading(true);
-      const results: Invoice[] = [];
-      for (let id = 1; id <= 50; id++) {
-        try {
-          const inv = await splitClient.getInvoice(String(id));
-          const mine =
-            inv.creator === publicKey ||
-            inv.recipients.some((r) => r.address === publicKey);
-          if (mine) {
-            results.push(inv);
-            setInvoices([...results]);
-          }
-        } catch {
-          break;
-        }
-      }
-      setLoading(false);
-    };
-    fetchInvoices().catch((e) => { setError(String(e)); setLoading(false); });
-  }, [publicKey]);
-
-  // Numeric search debounce
+  // ── Numeric search debounce ─────────────────────────────────────────────────
   useEffect(() => {
     const trimmed = searchValue.trim();
     if (!trimmed || !/^\d+$/.test(trimmed)) {
@@ -574,10 +561,6 @@ export default function DashboardClient() {
             const isCompareSelectable = compareMode;
             const isCompareSelected = compareSelected.has(inv.id);
 
-            const card = (
-              <InvoiceCard invoice={inv} displayNumber={getOrAssignDisplayNumber(inv.id)} />
-            );
-
             return (
               <div key={inv.id}>
                 {isSelectable ? (
@@ -692,6 +675,15 @@ export default function DashboardClient() {
         </div>
       )}
 
+      {/* Infinite scroll sentinel — only shown when we have a non-empty list */}
+      {invoices.length > 0 && (
+        <InvoiceListSentinel
+          onVisible={loadMore}
+          loading={isFetchingMore && !loading}
+          allLoaded={!hasMore && !loading}
+        />
+      )}
+
       {/* Batch Pay Modal */}
       {showBatchModal && publicKey && selectedInvoices.length > 0 && (
         <BatchPayModal

src/components/DashboardClient.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface Props {
+  /** Called when the sentinel enters the viewport. */
+  onVisible: () => void;
+  /** True while the next page is being fetched. */
+  loading: boolean;
+  /** True when all pages have been loaded. */
+  allLoaded: boolean;
+  /**
+   * Root margin passed to IntersectionObserver.
+   * Defaults to "300px" so the fetch triggers 300 px before the user hits the bottom.
+   */
+  rootMargin?: string;
+}
+
+/**
+ * InvoiceListSentinel — a zero-height div observed by IntersectionObserver.
+ *
+ * - Shows a loading spinner while the next page is in flight.
+ * - Shows an "all invoices loaded" message when there are no further pages.
+ * - Is invisible when more pages may exist and nothing is loading.
+ */
+export default function InvoiceListSentinel({
+  onVisible,
+  loading,
+  allLoaded,
+  rootMargin = "300px",
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          onVisible();
+        }
+      },
+      { rootMargin },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [onVisible, rootMargin]);
+
+  return (
+    <div ref={ref} className="flex items-center justify-center py-6" aria-live="polite">
+      {loading && (
+        <div className="flex items-center gap-3 text-sm text-gray-400">
+          <svg
+            className="animate-spin h-5 w-5 text-indigo-500"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+          <span>Loading more invoices…</span>
+        </div>
+      )}
+      {allLoaded && !loading && (
+        <p className="text-sm text-gray-500">All invoices loaded</p>
+      )}
+    </div>
+  );
+}