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
This commit is contained in:
2026-04-21 01:14:16 +02:00
parent da85f0ba54
commit a04ecf7a19
40 changed files with 4286 additions and 430 deletions
+138
View File
@@ -187,3 +187,141 @@ export async function setUserFlag(
.eq('user_id', userId);
if (error) throw error;
}
// ---------------------------------------------------------------------------
// Conversations (admin view — reads all regardless of membership)
// ---------------------------------------------------------------------------
export interface AdminConversationRow {
id: string;
type: 'dm' | 'group';
name: string | null;
memberCount: number;
lastMessageAt: string | null;
createdAt: string;
}
export async function listAllConversations(
client: AppSupabaseClient,
): Promise<AdminConversationRow[]> {
const { data, error } = await client
.from('conversations')
.select('id, type, name, created_at')
.order('created_at', { ascending: false });
if (error) throw error;
const conversations = data ?? [];
if (conversations.length === 0) return [];
const ids = conversations.map((c) => c.id);
const { data: memberRows, error: mErr } = await client
.from('conversation_members')
.select('conversation_id')
.in('conversation_id', ids);
if (mErr) throw mErr;
const counts = new Map<string, number>();
for (const row of memberRows ?? []) {
counts.set(row.conversation_id, (counts.get(row.conversation_id) ?? 0) + 1);
}
// Approximate "last message at" by peeking at latest message.created_at per
// conversation. Cheap since conversation count stays small (<20 users,
// <few hundred conversations).
const { data: lastMsg, error: lErr } = await client
.from('messages')
.select('conversation_id, created_at')
.in('conversation_id', ids)
.order('created_at', { ascending: false })
.limit(5000);
if (lErr) throw lErr;
const lastAt = new Map<string, string>();
for (const row of lastMsg ?? []) {
if (!lastAt.has(row.conversation_id)) {
lastAt.set(row.conversation_id, row.created_at);
}
}
return conversations.map((c) => ({
id: c.id,
type: c.type as 'dm' | 'group',
name: c.name,
memberCount: counts.get(c.id) ?? 0,
lastMessageAt: lastAt.get(c.id) ?? null,
createdAt: c.created_at,
}));
}
// ---------------------------------------------------------------------------
// Audit log
// ---------------------------------------------------------------------------
export interface AdminAuditEntry {
id: string;
actorId: string | null;
action: string;
targetType: string | null;
targetId: string | null;
metadata: Record<string, unknown>;
createdAt: string;
}
export async function listAuditLog(
client: AppSupabaseClient,
limit = 100,
): Promise<AdminAuditEntry[]> {
const { data, error } = await (client as unknown as {
from: (t: string) => {
select: (cols: string) => {
order: (
col: string,
opts: { ascending: boolean },
) => {
limit: (n: number) => Promise<{
data:
| {
id: string;
actor_id: string | null;
action: string;
target_type: string | null;
target_id: string | null;
metadata: Record<string, unknown>;
created_at: string;
}[]
| null;
error: Error | null;
}>;
};
};
};
})
.from('admin_audit_log')
.select('id, actor_id, action, target_type, target_id, metadata, created_at')
.order('created_at', { ascending: false })
.limit(limit);
if (error) throw error;
return (data ?? []).map((r) => ({
id: r.id,
actorId: r.actor_id,
action: r.action,
targetType: r.target_type,
targetId: r.target_id,
metadata: r.metadata ?? {},
createdAt: r.created_at,
}));
}
export async function logAdminAction(
client: AppSupabaseClient,
action: string,
target?: { type?: string; id?: string },
metadata?: Record<string, unknown>,
): Promise<void> {
const { error } = await (client as unknown as {
rpc: (
name: string,
args: Record<string, unknown>,
) => Promise<{ error: Error | null }>;
}).rpc('admin_log_action', {
p_action: action,
p_target_type: target?.type ?? null,
p_target_id: target?.id ?? null,
p_metadata: metadata ?? {},
});
if (error) throw error;
}
+128
View File
@@ -245,6 +245,134 @@ export async function listPeerReadsForMessages(
return new Set((data ?? []).map((r) => r.message_id));
}
// Group variant: returns reads from ALL users (other than `excludeUserId`,
// typically caller themselves) keyed by message id → user id → timestamp.
// RLS already filters out users whose receipts are off.
export async function listGroupReadsForMessages(
client: AppSupabaseClient,
messageIds: string[],
excludeUserId: string,
): Promise<Map<string, Map<string, string>>> {
if (messageIds.length === 0) return new Map();
const { data, error } = await client
.from('message_reads')
.select('message_id, user_id, read_at')
.neq('user_id', excludeUserId)
.in('message_id', messageIds);
if (error) throw error;
const out = new Map<string, Map<string, string>>();
for (const row of data ?? []) {
const mid = row.message_id;
const uid = row.user_id;
const at = row.read_at;
let inner = out.get(mid);
if (!inner) {
inner = new Map();
out.set(mid, inner);
}
inner.set(uid, at);
}
return out;
}
// Group variant of delivery receipts. Same shape as listGroupReadsForMessages.
export async function listGroupDeliveriesForMessages(
client: AppSupabaseClient,
messageIds: string[],
excludeUserId: string,
): Promise<Map<string, Map<string, string>>> {
if (messageIds.length === 0) return new Map();
const { data, error } = await (client as unknown as {
from: (t: string) => {
select: (cols: string) => {
neq: (col: string, val: string) => {
in: (
col: string,
vals: string[],
) => Promise<{
data:
| { message_id: string; user_id: string; delivered_at: string }[]
| null;
error: Error | null;
}>;
};
};
};
})
.from('message_deliveries')
.select('message_id, user_id, delivered_at')
.neq('user_id', excludeUserId)
.in('message_id', messageIds);
if (error) throw error;
const out = new Map<string, Map<string, string>>();
for (const row of data ?? []) {
let inner = out.get(row.message_id);
if (!inner) {
inner = new Map();
out.set(row.message_id, inner);
}
inner.set(row.user_id, row.delivered_at);
}
return out;
}
// ---------------------------------------------------------------------------
// Delivery receipts
// ---------------------------------------------------------------------------
// Records that the caller has received (fetched + decrypted) these messages.
// Idempotent; composite PK absorbs duplicates.
export async function markMessagesDelivered(
client: AppSupabaseClient,
messageIds: string[],
): Promise<void> {
if (messageIds.length === 0) return;
const { data: session, error: aErr } = await client.auth.getUser();
if (aErr) throw aErr;
if (!session.user) return;
const myId = session.user.id;
const rows = messageIds.map((id) => ({ message_id: id, user_id: myId }));
// `message_deliveries` is a later migration and not yet in the generated
// Supabase types; skip the strict table-name check for this call.
const { error } = await (client as unknown as {
from: (t: string) => {
upsert: (
rows: unknown,
opts: { onConflict: string; ignoreDuplicates: boolean },
) => Promise<{ error: Error | null }>;
};
})
.from('message_deliveries')
.upsert(rows, { onConflict: 'message_id,user_id', ignoreDuplicates: true });
if (error) throw error;
}
export async function listPeerDeliveriesForMessages(
client: AppSupabaseClient,
messageIds: string[],
peerUserId: string,
): Promise<Set<string>> {
if (messageIds.length === 0) return new Set();
const { data, error } = await (client as unknown as {
from: (t: string) => {
select: (cols: string) => {
eq: (col: string, val: string) => {
in: (
col: string,
vals: string[],
) => Promise<{ data: { message_id: string }[] | null; error: Error | null }>;
};
};
};
})
.from('message_deliveries')
.select('message_id')
.eq('user_id', peerUserId)
.in('message_id', messageIds);
if (error) throw error;
return new Set((data ?? []).map((r) => r.message_id));
}
// ---------------------------------------------------------------------------
// Reactions
// ---------------------------------------------------------------------------