feat: voice messages, offline queue, delivery ticks, volume slider, admin + scaling

- Voice messages: MediaRecorder → encrypted attachment, custom waveform player via OfflineAudioContext, 60s limit + live mic-level meter - Offline message queue: localStorage outbox, exponential backoff retries, optimistic pending bubble with retry/discard - Delivery indicator: message_deliveries table + RLS (reciprocal receipts), ✓ / ✓✓ / ✓✓-blue tick states, group-aware (all members must ack) - Per-participant volume slider in calls via right-click tile menu, persisted to localStorage, applied to attached audio elements - Group call scaling: grid up to 12 tiles with pagination, active-speaker auto-promotion in fullscreen - Push notifications scaffolding: service worker, VAPID subscription registration, notify-push edge function skeleton - Backup recovery code: 24-char base32 code (~120 bits entropy) as alternative decrypt path, restore UI with mode toggle - Admin panel: conversations list, audit log (admin_audit_log table + admin_log_action RPC), audit entry on user flag toggle - Search v2: sender filter, attachment-only toggle, date range - Reactions pop animation (scale 0.4→1.15→1 on count change) - Message list windowing (150 default, expand via IntersectionObserver) - Stub cleanup: removed dead ScreenshareStub from CallParticipantTile Fixes: - Focus-triggered flicker: dropped window.focus listeners in three spots, throttled visibilitychange/online wake-refreshes to 30s, keep existing data visible during background re-syncs (no more spinner on every click) - Voice attachment audio element collapsed to 0px on peer side — now forces 280px min-width on bubble Migrations (push required): 20260421000001_message_deliveries.sql 20260421000002_admin_audit_log.sql Server TODO: VAPID keys + notify-push edge function deploy
2026-04-21 01:14:16 +02:00
parent da85f0ba54
commit a04ecf7a19
40 changed files with 4286 additions and 430 deletions
@@ -0,0 +1,87 @@
+import {
+  listGroupDeliveriesForMessages,
+  listGroupReadsForMessages,
+} from '@chat-app/shared/chat';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { supabase } from './supabase';
+
+export interface GroupReceiptState {
+  // message_id → set of user ids who have delivered/read.
+  deliveredByMessage: Map<string, Set<string>>;
+  readByMessage: Map<string, Set<string>>;
+  refresh: () => Promise<void>;
+}
+
+// Aggregated delivery + read receipts for group conversations. Returns the
+// set of user ids per message; consumers join with conversation members to
+// figure out who has not yet acknowledged.
+export function useGroupReceipts(
+  messageIds: string[],
+  selfUserId: string | undefined,
+  active: boolean,
+): GroupReceiptState {
+  const idsKey = useMemo(() => messageIds.join(','), [messageIds]);
+  const [deliveredByMessage, setDelivered] = useState<Map<string, Set<string>>>(new Map());
+  const [readByMessage, setRead] = useState<Map<string, Set<string>>>(new Map());
+
+  const refresh = useCallback(async () => {
+    if (!active || !selfUserId || messageIds.length === 0) {
+      setDelivered(new Map());
+      setRead(new Map());
+      return;
+    }
+    try {
+      const [delivered, read] = await Promise.all([
+        listGroupDeliveriesForMessages(supabase, messageIds, selfUserId),
+        listGroupReadsForMessages(supabase, messageIds, selfUserId),
+      ]);
+      setDelivered(toIdSets(delivered));
+      setRead(toIdSets(read));
+    } catch (err: unknown) {
+      console.warn('useGroupReceipts refresh failed', err);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active, selfUserId, idsKey]);
+
+  useEffect(() => {
+    void refresh();
+    if (!active || !selfUserId) return;
+
+    // Listen on both tables. RLS already enforces visibility.
+    const reads = supabase
+      .channel('group-reads:' + selfUserId)
+      .on(
+        'postgres_changes',
+        { event: 'INSERT', schema: 'public', table: 'message_reads' },
+        () => {
+          void refresh();
+        },
+      )
+      .subscribe();
+    const deliveries = supabase
+      .channel('group-deliv:' + selfUserId)
+      .on(
+        'postgres_changes',
+        { event: 'INSERT', schema: 'public', table: 'message_deliveries' },
+        () => {
+          void refresh();
+        },
+      )
+      .subscribe();
+    return () => {
+      void supabase.removeChannel(reads);
+      void supabase.removeChannel(deliveries);
+    };
+  }, [active, selfUserId, refresh]);
+
+  return { deliveredByMessage, readByMessage, refresh };
+}
+
+function toIdSets(input: Map<string, Map<string, string>>): Map<string, Set<string>> {
+  const out = new Map<string, Set<string>>();
+  for (const [mid, inner] of input) {
+    out.set(mid, new Set(inner.keys()));
+  }
+  return out;
+}