refactor: update caching and zap handling in components

- Replaced CacheInterceptor with HttpCacheInterceptor in app.module.ts for improved caching strategy.
- Enhanced ContentDetailModal to dispatch a custom event upon zap completion, improving inter-component communication.
- Refactored ContentRow to streamline zap stats fetching and added a listener for zap completion events, ensuring real-time updates.
- Updated Analytics.vue to improve number formatting functions, handling undefined and null values more robustly.

These changes enhance the application's performance and user experience by optimizing caching and ensuring accurate, real-time data updates across components.

src/components/ContentDetailModal.vue

@@ -543,7 +543,10 @@ function handleZap() {
 
 function handleZapped(_amount: number) {
   // In-app zaps go through BTCPay; refetch backend stats so modal updates.
-  if (props.content?.id) fetchBackendZapStats(props.content.id)
+  if (props.content?.id) {
+    fetchBackendZapStats(props.content.id)
+    window.dispatchEvent(new CustomEvent('indeehub:zap-completed', { detail: { contentId: props.content.id } }))
+  }
 }
 
 function getZapperName(pubkey: string): string {

src/components/ContentRow.vue

@@ -95,25 +95,27 @@ const { getStats } = useContentDiscovery()
 /** Backend zap stats (BTCPay zaps) so film cards show total + who zapped. */
 const backendZapStats = ref<Record<string, { zapCount: number; zapAmountSats: number; recentZapperPubkeys: string[] }>>({})
 
-watch(
-  () => props.contents,
-  (contents) => {
-    const ids = contents?.map((c) => c.id).filter(Boolean) ?? []
-    if (ids.length === 0) {
+function fetchZapStats() {
+  const ids = props.contents?.map((c) => c.id).filter(Boolean) ?? []
+  if (ids.length === 0) {
+    backendZapStats.value = {}
+    return
+  }
+  indeehubApiService
+    .getZapStats(ids)
+    .then((data) => {
+      backendZapStats.value = data
+    })
+    .catch(() => {
       backendZapStats.value = {}
-      return
-    }
-    indeehubApiService
-      .getZapStats(ids)
-      .then((data) => {
-        backendZapStats.value = data
-      })
-      .catch(() => {
-        backendZapStats.value = {}
-      })
-  },
-  { immediate: true },
-)
+    })
+}
+
+watch(() => props.contents, fetchZapStats, { immediate: true })
+
+function onZapCompleted() {
+  fetchZapStats()
+}
 
 function getReactionCount(contentId: string): number {
   return getStats(contentId).plusCount ?? 0
@@ -156,12 +158,14 @@ onMounted(() => {
     sliderRef.value.addEventListener('scroll', handleScroll)
     handleScroll()
   }
+  window.addEventListener('indeehub:zap-completed', onZapCompleted)
 })
 
 onUnmounted(() => {
   if (sliderRef.value) {
     sliderRef.value.removeEventListener('scroll', handleScroll)
   }
+  window.removeEventListener('indeehub:zap-completed', onZapCompleted)
 })
 </script>