feat: enhance zap integration with backend stats and UI improvements

- Updated ContentDetailModal to display zap statistics from both Nostr and backend sources, improving visibility of zap activities.
- Refactored zap data handling to merge Nostr relay and backend zap stats, ensuring accurate totals and recent zapper information.
- Introduced a new function to fetch backend zap stats, enhancing the modal's responsiveness to user interactions.
- Enhanced error handling and added mock data support in the IndeehubApiService for development purposes.

These changes improve the user experience by providing comprehensive zap insights and ensuring the UI reflects real-time data accurately.

src/services/indeehub-api.service.ts

@@ -206,15 +206,48 @@ class IndeehubApiService {
 
   /**
    * Get zap stats for film cards (count, amount, recent zapper pubkeys) by project id.
+   * In dev, merges mock zap data for the first few projects so the UI is visible without real zaps.
    */
   async getZapStats(projectIds: string[]): Promise<Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }>> {
     if (projectIds.length === 0) return {}
     const ids = projectIds.join(',')
-    const response = await this.client.get<Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }>>(
-      '/zaps/stats',
-      { params: { projectIds: ids } },
-    )
-    return response.data ?? {}
+    let data: Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }> = {}
+    try {
+      const response = await this.client.get<Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }>>(
+        '/zaps/stats',
+        { params: { projectIds: ids } },
+      )
+      data = response.data ?? {}
+    } catch {
+      data = {}
+    }
+    if (import.meta.env.DEV) {
+      Object.assign(data, this.getMockZapStats(projectIds))
+    }
+    return data
+  }
+
+  /**
+   * Mock zap stats for dev so cards and modal show the zap UI.
+   * Uses fake pubkeys so robohash avatars display.
+   */
+  private getMockZapStats(projectIds: string[]): Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }> {
+    const mockPubkeys = [
+      'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+      'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+      'c7937c1d0f8d0a2e8a0e8a0e8a0e8a0e8a0e8a0e8a0e8a0e8a0e8a0e8a0e8a',
+    ]
+    const result: Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }> = {}
+    const mockCounts = [3, 7, 1, 12, 2]
+    const mockSats = [2100, 50000, 1000, 100000, 420]
+    projectIds.slice(0, 5).forEach((id, i) => {
+      result[id] = {
+        zapCount: mockCounts[i % mockCounts.length],
+        zapAmountSats: mockSats[i % mockSats.length],
+        recentZapperPubkeys: mockPubkeys.slice(0, (i % 3) + 1),
+      }
+    })
+    return result
   }
 
   /**