Moyettes/DiscordClone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

1.1.00
All checks were successful
Build and Release / build-and-release (push) Successful in 20m36s
Details

Browse Source
This commit is contained in:
Bryan1029384756
2026-04-16 20:14:27 -05:00
parent 56a12fdf3e
commit 6813bb40dc
40 changed files with 2228 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/android/android/app/build.gradle
View File

@@ -8,7 +8,7 @@ android {
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 27
versionName "1.0.90"
versionName "1.1.00"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
aaptOptions {
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

2
apps/electron/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@discord-clone/electron",
"private": true,
"version": "1.0.90",
"version": "1.1.00",
"description": "Brycord - Electron app",
"author": "Moyettes",
"type": "module",

2
apps/web/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@discord-clone/web",
"private": true,
"version": "1.0.90",
"version": "1.1.00",
"type": "module",
"scripts": {
"dev": "vite",

6
convex/_generated/api.d.ts vendored
View File

@@ -9,6 +9,8 @@
*/
import type * as auth from "../auth.js";
import type * as authActions from "../authActions.js";
import type * as authGuard from "../authGuard.js";
import type * as categories from "../categories.js";
import type * as channelKeys from "../channelKeys.js";
import type * as channels from "../channels.js";
@@ -19,6 +21,7 @@ import type * as gifs from "../gifs.js";
import type * as invites from "../invites.js";
import type * as links from "../links.js";
import type * as members from "../members.js";
import type * as messageActions from "../messageActions.js";
import type * as messages from "../messages.js";
import type * as polls from "../polls.js";
import type * as presence from "../presence.js";
@@ -41,6 +44,8 @@ import type {
declare const fullApi: ApiFromModules<{
auth: typeof auth;
authActions: typeof authActions;
authGuard: typeof authGuard;
categories: typeof categories;
channelKeys: typeof channelKeys;
channels: typeof channels;
@@ -51,6 +56,7 @@ declare const fullApi: ApiFromModules<{
invites: typeof invites;
links: typeof links;
members: typeof members;
messageActions: typeof messageActions;
messages: typeof messages;
polls: typeof polls;
presence: typeof presence;

71
convex/auth.ts
View File

@@ -123,11 +123,7 @@ export const createUserWithProfile = mutation({
return { error: "Invite expired" };
}
if (
invite.maxUses !== undefined &&
invite.maxUses !== null &&
invite.uses >= invite.maxUses
) {
if (invite.maxUses !== undefined && invite.uses >= invite.maxUses) {
return { error: "Invite max uses reached" };
}
@@ -240,8 +236,12 @@ export const getPublicKeys = query({
},
});
// Update user profile (aboutMe, avatar, customStatus)
export const updateProfile = mutation({
// Internal writer. Public entry point: `authActions.updateProfile`. The
// action layer verifies the caller controls `userId` via Ed25519
// signature before this runs; calling this from another mutation
// without that check would reintroduce the "anyone can change anyone's
// profile" vulnerability.
export const updateProfileInternal = internalMutation({
args: {
userId: v.id("userProfiles"),
displayName: v.optional(v.string()),
@@ -278,8 +278,8 @@ export const getMyJoinSoundUrl = query({
},
});
// Update user status
export const updateStatus = mutation({
// Internal writer. Public entry point: `authActions.updateStatus`.
export const updateStatusInternal = internalMutation({
args: {
userId: v.id("userProfiles"),
status: v.string(),
@@ -343,8 +343,51 @@ export const getUserForRecovery = internalQuery({
},
});
// Set nickname (displayName) for a user
export const setNickname = mutation({
// Internal: resolve a userId to the fields needed by the voice-token action
// (server-side signature verification + LiveKit identity).
export const getUserForVoiceToken = internalQuery({
args: { userId: v.id("userProfiles") },
returns: v.union(
v.object({
userId: v.id("userProfiles"),
username: v.string(),
publicSigningKey: v.string(),
}),
v.null()
),
handler: async (ctx, args) => {
const user = await ctx.db.get(args.userId);
if (!user) return null;
return {
userId: user._id,
username: user.username,
publicSigningKey: user.publicSigningKey,
};
},
});
// Internal: fetch a channel for the voice-token action so it can confirm the
// target channel exists and is actually a voice/dm room.
export const getChannelForVoiceToken = internalQuery({
args: { channelId: v.id("channels") },
returns: v.union(
v.object({
channelId: v.id("channels"),
type: v.string(),
}),
v.null()
),
handler: async (ctx, args) => {
const channel = await ctx.db.get(args.channelId);
if (!channel) return null;
return { channelId: channel._id, type: channel.type };
},
});
// Internal writer. Public entry point: `authActions.setNickname`. The
// action layer verifies the caller controls `actorUserId` via
// signature; the existing self-or-manage_nicknames gate stays here.
export const setNicknameInternal = internalMutation({
args: {
actorUserId: v.id("userProfiles"),
targetUserId: v.id("userProfiles"),
@@ -371,8 +414,10 @@ export const setNickname = mutation({
},
});
// Delete a user and all their associated data (admin only)
export const deleteUser = mutation({
// Internal writer. Public entry point: `authActions.deleteUser`. Both
// the isAdmin check and the destructive delete live here; the action
// layer verifies the caller controls `requestingUserId`.
export const deleteUserInternal = internalMutation({
args: {
requestingUserId: v.id("userProfiles"),
targetUserId: v.id("userProfiles"),

109
convex/authActions.ts Normal file
View File

@@ -0,0 +1,109 @@
"use node";
import { action } from "./_generated/server";
import { internal } from "./_generated/api";
import { v } from "convex/values";
import { requireAuth } from "./authGuard";
/**
* Signed profile update. The canonical message binds userId + timestamp;
* the 5-minute replay window limits damage if a signature leaks. See
* `authGuard.requireAuth` for the full verification flow.
*/
export const updateProfile = action({
args: {
userId: v.id("userProfiles"),
displayName: v.optional(v.string()),
aboutMe: v.optional(v.string()),
avatarStorageId: v.optional(v.id("_storage")),
customStatus: v.optional(v.string()),
joinSoundStorageId: v.optional(v.id("_storage")),
removeJoinSound: v.optional(v.boolean()),
accentColor: v.optional(v.string()),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.null(),
handler: async (ctx, args): Promise<null> => {
const canonical = `updateProfile:${args.userId}:${args.authTimestamp}`;
await requireAuth(ctx, args.userId, args.authTimestamp, args.authSignature, canonical);
await ctx.runMutation(internal.auth.updateProfileInternal, {
userId: args.userId,
displayName: args.displayName,
aboutMe: args.aboutMe,
avatarStorageId: args.avatarStorageId,
customStatus: args.customStatus,
joinSoundStorageId: args.joinSoundStorageId,
removeJoinSound: args.removeJoinSound,
accentColor: args.accentColor,
});
return null;
},
});
export const updateStatus = action({
args: {
userId: v.id("userProfiles"),
status: v.string(),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.null(),
handler: async (ctx, args): Promise<null> => {
const canonical = `updateStatus:${args.userId}:${args.status}:${args.authTimestamp}`;
await requireAuth(ctx, args.userId, args.authTimestamp, args.authSignature, canonical);
await ctx.runMutation(internal.auth.updateStatusInternal, {
userId: args.userId,
status: args.status,
});
return null;
},
});
export const setNickname = action({
args: {
actorUserId: v.id("userProfiles"),
targetUserId: v.id("userProfiles"),
displayName: v.string(),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.null(),
handler: async (ctx, args): Promise<null> => {
const canonical = `setNickname:${args.actorUserId}:${args.targetUserId}:${args.authTimestamp}`;
await requireAuth(ctx, args.actorUserId, args.authTimestamp, args.authSignature, canonical);
await ctx.runMutation(internal.auth.setNicknameInternal, {
actorUserId: args.actorUserId,
targetUserId: args.targetUserId,
displayName: args.displayName,
});
return null;
},
});
export const deleteUser = action({
args: {
requestingUserId: v.id("userProfiles"),
targetUserId: v.id("userProfiles"),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.object({ success: v.boolean(), error: v.optional(v.string()) }),
handler: async (
ctx,
args,
): Promise<{ success: boolean; error?: string }> => {
const canonical = `deleteUser:${args.requestingUserId}:${args.targetUserId}:${args.authTimestamp}`;
await requireAuth(
ctx,
args.requestingUserId,
args.authTimestamp,
args.authSignature,
canonical,
);
return await ctx.runMutation(internal.auth.deleteUserInternal, {
requestingUserId: args.requestingUserId,
targetUserId: args.targetUserId,
});
},
});

63
convex/authGuard.ts Normal file
View File

@@ -0,0 +1,63 @@
"use node";
import crypto from "crypto";
import type { ActionCtx } from "./_generated/server";
import { internal } from "./_generated/api";
import type { Id } from "./_generated/dataModel";
const MAX_CLOCK_SKEW_MS = 5 * 60 * 1000;
/**
* Detached Ed25519 check: caller must sign `canonicalMessage` with the
* Ed25519 private key that pairs with the userProfile's stored
* `publicSigningKey`. Matches `voice.getToken` and
* `recovery.resetPasswordAction` — same window, same SPKI/PEM encoding,
* same hex signature format — so client-side signing code looks
* identical across every sensitive call.
*
* Throws on failure. Sensitive mutations that previously trusted a raw
* `userId` arg should now route through a "use node" action that calls
* this helper before running the internal mutation.
*/
export async function requireAuth(
ctx: ActionCtx,
userId: Id<"userProfiles">,
timestamp: number,
signature: string,
canonicalMessage: string,
): Promise<void> {
if (
!Number.isFinite(timestamp) ||
Math.abs(Date.now() - timestamp) > MAX_CLOCK_SKEW_MS
) {
throw new Error("Request expired. Please try again.");
}
const user = await ctx.runQuery(internal.auth.getUserForVoiceToken, {
userId,
});
if (!user) {
throw new Error("User not found");
}
let isValid = false;
try {
const publicKeyObj = crypto.createPublicKey({
key: user.publicSigningKey,
format: "pem",
type: "spki",
});
isValid = crypto.verify(
null,
Buffer.from(canonicalMessage),
publicKeyObj,
Buffer.from(signature, "hex"),
);
} catch {
throw new Error("Signature verification failed");
}
if (!isValid) {
throw new Error("Invalid signature");
}
}

6
convex/invites.ts
View File

@@ -51,11 +51,7 @@ export const use = query({
return { error: "Invite expired" };
}
if (
invite.maxUses !== undefined &&
invite.maxUses !== null &&
invite.uses >= invite.maxUses
) {
if (invite.maxUses !== undefined && invite.uses >= invite.maxUses) {
return { error: "Invite max uses reached" };
}

37
convex/links.ts
View File

@@ -11,6 +11,13 @@ export const fetchPreview = action({
description: v.optional(v.string()),
image: v.optional(v.string()),
siteName: v.optional(v.string()),
// Image dimensions sourced from og:image:width/height or
// twitter:image:width/height when the page emits them. The client
// uses these to reserve the preview card's image slot *before* the
// image decodes, eliminating the height shift that used to expand
// the card on first paint.
imageWidth: v.optional(v.number()),
imageHeight: v.optional(v.number()),
}),
v.null(),
),
@@ -89,6 +96,26 @@ export const fetchPreview = action({
const siteName =
pick(/<meta[^>]+property=["']og:site_name["'][^>]+content=["']([^"']+)["']/i);
const pickNum = (re: RegExp): number | undefined => {
const raw = pick(re);
if (!raw) return undefined;
const n = Number(raw);
return Number.isFinite(n) && n > 0 ? Math.round(n) : undefined;
};
// og: and twitter: tags both publish the intended image dimensions
// in their own namespaces — use whichever is available. The attr
// order in HTML varies (some sites emit `content="w"` before
// `property=...`), so fall back to a second regex with the
// attributes swapped.
const imageWidth =
pickNum(/<meta[^>]+property=["']og:image:width["'][^>]+content=["']([^"']+)["']/i) ??
pickNum(/<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:image:width["']/i) ??
pickNum(/<meta[^>]+name=["']twitter:image:width["'][^>]+content=["']([^"']+)["']/i);
const imageHeight =
pickNum(/<meta[^>]+property=["']og:image:height["'][^>]+content=["']([^"']+)["']/i) ??
pickNum(/<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:image:height["']/i) ??
pickNum(/<meta[^>]+name=["']twitter:image:height["'][^>]+content=["']([^"']+)["']/i);
// Resolve relative image URLs
if (image) {
try {
@@ -97,7 +124,15 @@ export const fetchPreview = action({
}
if (!title && !description && !image) return null;
return { url: u.toString(), title, description, image, siteName };
return {
url: u.toString(),
title,
description,
image,
siteName,
imageWidth,
imageHeight,
};
} catch {
return null;
}

109
convex/messageActions.ts Normal file
View File

@@ -0,0 +1,109 @@
"use node";
import { action } from "./_generated/server";
import { internal } from "./_generated/api";
import { v } from "convex/values";
import { requireAuth } from "./authGuard";
/**
* Signed-send: the client signs `send:${channelId}:${senderId}:${timestamp}`
* with their Ed25519 key so the server can prove the caller controls
* `senderId`. Prevents the "anyone posts as anyone" bypass that existed
* when `messages.send` was a plain mutation trusting the client-supplied
* `senderId`.
*
* The per-message `signature` over the ciphertext is a separate,
* recipient-verified integrity check and is unchanged.
*/
export const send = action({
args: {
channelId: v.id("channels"),
senderId: v.id("userProfiles"),
ciphertext: v.string(),
nonce: v.string(),
signature: v.string(),
keyVersion: v.number(),
replyTo: v.optional(v.id("messages")),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.object({ id: v.id("messages") }),
handler: async (ctx, args): Promise<{ id: any }> => {
const canonical = `send:${args.channelId}:${args.senderId}:${args.authTimestamp}`;
await requireAuth(ctx, args.senderId, args.authTimestamp, args.authSignature, canonical);
return await ctx.runMutation(internal.messages.sendInternal, {
channelId: args.channelId,
senderId: args.senderId,
ciphertext: args.ciphertext,
nonce: args.nonce,
signature: args.signature,
keyVersion: args.keyVersion,
replyTo: args.replyTo,
});
},
});
export const edit = action({
args: {
id: v.id("messages"),
userId: v.id("userProfiles"),
ciphertext: v.string(),
nonce: v.string(),
signature: v.string(),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.null(),
handler: async (ctx, args): Promise<null> => {
const canonical = `edit:${args.id}:${args.userId}:${args.authTimestamp}`;
await requireAuth(ctx, args.userId, args.authTimestamp, args.authSignature, canonical);
await ctx.runMutation(internal.messages.editInternal, {
id: args.id,
userId: args.userId,
ciphertext: args.ciphertext,
nonce: args.nonce,
signature: args.signature,
});
return null;
},
});
export const pin = action({
args: {
id: v.id("messages"),
userId: v.id("userProfiles"),
pinned: v.boolean(),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.null(),
handler: async (ctx, args): Promise<null> => {
const canonical = `pin:${args.id}:${args.userId}:${args.pinned}:${args.authTimestamp}`;
await requireAuth(ctx, args.userId, args.authTimestamp, args.authSignature, canonical);
await ctx.runMutation(internal.messages.pinInternal, {
id: args.id,
userId: args.userId,
pinned: args.pinned,
});
return null;
},
});
export const remove = action({
args: {
id: v.id("messages"),
userId: v.id("userProfiles"),
authTimestamp: v.number(),
authSignature: v.string(),
},
returns: v.null(),
handler: async (ctx, args): Promise<null> => {
const canonical = `remove:${args.id}:${args.userId}:${args.authTimestamp}`;
await requireAuth(ctx, args.userId, args.authTimestamp, args.authSignature, canonical);
await ctx.runMutation(internal.messages.removeInternal, {
id: args.id,
userId: args.userId,
});
return null;
},
});

55
convex/messages.ts
View File

@@ -1,4 +1,4 @@
import { query, mutation } from "./_generated/server";
import { query, internalMutation } from "./_generated/server";
import { paginationOptsValidator } from "convex/server";
import { v } from "convex/values";
import { getPublicStorageUrl } from "./storageUrl";
@@ -225,7 +225,19 @@ export const searchScan = query({
},
});
export const send = mutation({
// Plain text caps out at 4000 chars in the composer, which encodes to
// well under 8KB of AES-GCM output. Attachments ride a separate
// metadata-only JSON path, so 64KB leaves ~8× headroom for future
// structured content without letting a rogue client write multi-MB
// rows and bloat the database.
const MAX_CIPHERTEXT_CHARS = 64 * 1024;
// Internal write. The public API is `messageActions.send`, which verifies
// the caller's Ed25519 signature over (channelId, senderId, timestamp)
// before invoking this. Never call this from a public mutation — it
// trusts `senderId` completely and doing so would reintroduce the
// spoofing vulnerability.
export const sendInternal = internalMutation({
args: {
channelId: v.id("channels"),
senderId: v.id("userProfiles"),
@@ -237,6 +249,9 @@ export const send = mutation({
},
returns: v.object({ id: v.id("messages") }),
handler: async (ctx, args) => {
if (args.ciphertext.length > MAX_CIPHERTEXT_CHARS) {
throw new Error("Message too large");
}
const id = await ctx.db.insert("messages", {
channelId: args.channelId,
senderId: args.senderId,
@@ -250,7 +265,11 @@ export const send = mutation({
},
});
export const sendBatch = mutation({
// Internal-only: there's no public caller and no way to verify every
// senderId in a batch without a signature per message, which defeats
// the point of batching. Kept as internalMutation so internal seed
// scripts / migrations can still use it.
export const sendBatchInternal = internalMutation({
args: {
messages: v.array(v.object({
channelId: v.id("channels"),
@@ -270,15 +289,24 @@ export const sendBatch = mutation({
},
});
export const edit = mutation({
// Internal write — public entry point is `messageActions.edit`.
// Enforces that only the original sender can edit. The action layer
// has already verified the caller controls `userId`.
export const editInternal = internalMutation({
args: {
id: v.id("messages"),
userId: v.id("userProfiles"),
ciphertext: v.string(),
nonce: v.string(),
signature: v.string(),
},
returns: v.null(),
handler: async (ctx, args) => {
const msg = await ctx.db.get(args.id);
if (!msg) throw new Error("Message not found");
if (msg.senderId !== args.userId) {
throw new Error("Only the author can edit this message");
}
await ctx.db.patch(args.id, {
ciphertext: args.ciphertext,
nonce: args.nonce,
@@ -289,13 +317,24 @@ export const edit = mutation({
},
});
export const pin = mutation({
// Internal write — public entry point is `messageActions.pin`. Only
// `manage_messages` role-holders can pin/unpin; the action layer has
// already verified the caller controls `userId`.
export const pinInternal = internalMutation({
args: {
id: v.id("messages"),
userId: v.id("userProfiles"),
pinned: v.boolean(),
},
returns: v.null(),
handler: async (ctx, args) => {
const roles = await getRolesForUser(ctx, args.userId);
const canManage = roles.some(
(role) => (role.permissions as Record<string, boolean>)?.manage_messages,
);
if (!canManage) {
throw new Error("Not authorized to pin messages");
}
await ctx.db.patch(args.id, { pinned: args.pinned });
return null;
},
@@ -460,7 +499,11 @@ export const listAfter = query({
},
});
export const remove = mutation({
// Internal write — public entry point is `messageActions.remove`. The
// existing isSender-or-manage_messages check stays here; the action
// layer verifies the caller actually controls `userId` before we trust
// that arg.
export const removeInternal = internalMutation({
args: { id: v.id("messages"), userId: v.id("userProfiles") },
returns: v.null(),
handler: async (ctx, args) => {

3
convex/schema.ts
View File

@@ -107,7 +107,8 @@ export default defineSchema({
username: v.string(),
expiresAt: v.number(), // timestamp
}).index("by_channel", ["channelId"])
.index("by_user", ["userId"]),
.index("by_user", ["userId"])
.index("by_expires_at", ["expiresAt"]),
voiceStates: defineTable({
channelId: v.id("channels"),

17
convex/typing.ts
View File

@@ -22,6 +22,11 @@ export const startTyping = mutation({
const userTyping = existing.find((t) => t.userId === args.userId);
if (userTyping) {
// Refreshing an existing row — the cleanup scheduled from the
// original insert is still pending, so don't pile another copy
// onto the scheduler. The audit flagged the old code (schedule
// on every heartbeat) as spamming cleanExpired tasks that all
// did the same work.
await ctx.db.patch(userTyping._id, { expiresAt });
} else {
await ctx.db.insert("typingIndicators", {
@@ -30,9 +35,9 @@ export const startTyping = mutation({
username: args.username,
expiresAt,
});
await ctx.scheduler.runAfter(TYPING_TTL_MS, internal.typing.cleanExpired, {});
}
await ctx.scheduler.runAfter(TYPING_TTL_MS, internal.typing.cleanExpired, {});
return null;
},
});
@@ -93,12 +98,16 @@ export const cleanExpired = internalMutation({
returns: v.null(),
handler: async (ctx) => {
const now = Date.now();
const expired = await ctx.db.query("typingIndicators").collect();
// Range-scan the by_expires_at index instead of collecting the whole
// table, so cleanup cost scales with number of *expired* rows rather
// than total typing activity across every channel.
const expired = await ctx.db
.query("typingIndicators")
.withIndex("by_expires_at", (q) => q.lte("expiresAt", now))
.collect();
for (const t of expired) {
if (t.expiresAt <= now) {
await ctx.db.delete(t._id);
}
}
return null;
},
});

122
convex/voice.ts
View File

@@ -1,12 +1,48 @@
"use node";
import { action } from "./_generated/server";
import { internal } from "./_generated/api";
import { v } from "convex/values";
import { AccessToken, RoomServiceClient } from "livekit-server-sdk";
import crypto from "crypto";
import type { Id } from "./_generated/dataModel";
// Shapes of the internal queries below, spelled out so voice.ts can typecheck
// without depending on `internal.auth.*` inference — otherwise the codegen
// cycle (voice exports -> _generated/api -> internal.auth typing -> voice
// usage) drops back to `any` and TS7022/TS7023 fire on the whole action.
type VoiceTokenUser = {
userId: Id<"userProfiles">;
username: string;
publicSigningKey: string;
};
type VoiceTokenChannel = {
channelId: Id<"channels">;
type: string;
};
type VoiceTokenResult = { token: string } | { error: string };
// Signed message the client must sign with their Ed25519 private signing key
// to prove they control the userId they're asking a token for. `timestamp`
// defeats replay; the channelId binds the signature to a specific room.
function buildVoiceTokenMessage(
userId: string,
channelId: string,
timestamp: number,
): string {
return `voice-token:${userId}:${channelId}:${timestamp}`;
}
/**
* Generate a LiveKit join token for a voice channel.
*
* Authorization: caller signs `voice-token:userId:channelId:timestamp` with
* their Ed25519 signing key. The server verifies against the userProfile's
* `publicSigningKey`, rejects stale timestamps, and confirms the channel
* exists and is a voice/dm room. The LiveKit identity is pinned to the
* server-resolved user so clients can't impersonate each other even with a
* valid signature for their own account.
*
* LiveKit servers run with `room.auto_create: false` reject joins for
* rooms that don't already exist — the client gets a 404 "requested
* room does not exist" back from the /rtc/v1/validate endpoint. To
@@ -22,12 +58,65 @@ import { AccessToken, RoomServiceClient } from "livekit-server-sdk";
*/
export const getToken = action({
args: {
channelId: v.string(),
userId: v.string(),
username: v.string(),
channelId: v.id("channels"),
userId: v.id("userProfiles"),
timestamp: v.number(),
signature: v.string(),
},
returns: v.object({ token: v.string() }),
handler: async (_ctx, args) => {
returns: v.union(
v.object({ token: v.string() }),
v.object({ error: v.string() }),
),
handler: async (ctx, args): Promise<VoiceTokenResult> => {
// Reject timestamps outside a 5-minute window on either side of the
// server clock. Matches the recovery action's window and keeps replay
// attempts short-lived even if a signature leaks.
const now = Date.now();
if (!Number.isFinite(args.timestamp) || Math.abs(now - args.timestamp) > 5 * 60 * 1000) {
return { error: "Request expired. Please try again." };
}
const user: VoiceTokenUser | null = await ctx.runQuery(
internal.auth.getUserForVoiceToken,
{ userId: args.userId },
);
if (!user) {
return { error: "User not found" };
}
const channel: VoiceTokenChannel | null = await ctx.runQuery(
internal.auth.getChannelForVoiceToken,
{ channelId: args.channelId },
);
if (!channel) {
return { error: "Channel not found" };
}
if (channel.type !== "voice" && channel.type !== "dm") {
return { error: "Not a voice channel" };
}
// Verify the caller actually controls `userId` by checking their
// signature over (userId, channelId, timestamp).
const message = buildVoiceTokenMessage(user.userId, channel.channelId, args.timestamp);
try {
const publicKeyObj = crypto.createPublicKey({
key: user.publicSigningKey,
format: "pem",
type: "spki",
});
const isValid = crypto.verify(
null,
Buffer.from(message),
publicKeyObj,
Buffer.from(args.signature, "hex"),
);
if (!isValid) {
return { error: "Invalid signature" };
}
} catch {
return { error: "Signature verification failed" };
}
const apiKey = process.env.LIVEKIT_API_KEY || "devkey";
const apiSecret = process.env.LIVEKIT_API_SECRET || "secret";
const livekitUrl =
@@ -43,7 +132,7 @@ export const getToken = action({
try {
const roomService = new RoomServiceClient(httpUrl, apiKey, apiSecret);
await roomService.createRoom({
name: args.channelId,
name: channel.channelId,
// Empty rooms auto-destroy after 5 minutes with no participants,
// matching LiveKit's own default so stale rooms from a crashed
// client don't pile up forever.
@@ -56,36 +145,39 @@ export const getToken = action({
} catch (err: any) {
// 409 / "already exists" is expected when a room has already
// been created by an earlier join — swallow it and continue.
const message = String(err?.message ?? err ?? "");
const errMsg = String(err?.message ?? err ?? "");
const status = err?.status ?? err?.statusCode;
const alreadyExists =
status === 409 ||
/already exists/i.test(message) ||
/AlreadyExists/i.test(message);
/already exists/i.test(errMsg) ||
/AlreadyExists/i.test(errMsg);
if (!alreadyExists) {
// Non-fatal: log and fall through to token generation. If the
// real issue was misconfiguration the client will surface the
// 404 it already does.
console.warn("LiveKit createRoom failed:", message);
console.warn("LiveKit createRoom failed:", errMsg);
}
}
}
const at = new AccessToken(apiKey, apiSecret, {
identity: args.userId,
name: args.username,
// Pin identity + name to the server-resolved user. A forged `username`
// or `userId` in the args would have already been rejected by the
// signature check, but using the DB values is defence-in-depth.
const at: AccessToken = new AccessToken(apiKey, apiSecret, {
identity: user.userId,
name: user.username,
ttl: "24h",
});
at.addGrant({
roomJoin: true,
room: args.channelId,
room: channel.channelId,
canPublish: true,
canSubscribe: true,
canPublishData: true,
});
const token = await at.toJwt();
const token: string = await at.toJwt();
return { token };
},
});

113
packages/platform-web/src/idle.js
View File

@@ -1,36 +1,121 @@
/**
* Web platform idle detection using Page Visibility API.
* Provides a simplified version of the Electron idle API.
* Web platform idle detection.
*
* Prefers the Idle Detection API (Chromium-only, requires user
* permission) which reports actual system-level idle, so a Discord tab
* in the background doesn't auto-AFK users who are actively using their
* computer. Falls back to input-event tracking + Page Visibility when
* IdleDetector is unavailable (Firefox, Safari) or permission is denied.
*
* The input-event fallback tracks mouse/keyboard/touch/scroll on the
* page and resets an activity timestamp. It only measures idle *while
* the tab has been active at some point* — it's a proxy, not a true OS
* idle signal — but it's strictly better than the old Page-Visibility
* approach which treated every backgrounded tab as idle even if the
* user was typing in another window.
*/
const ACTIVITY_EVENTS = [
'mousemove',
'mousedown',
'keydown',
'touchstart',
'scroll',
'wheel',
'pointerdown',
'focus',
];
let idleCallback = null;
let lastActiveTime = Date.now();
function handleVisibilityChange() {
if (!idleCallback) return;
if (document.hidden) {
idleCallback({ isIdle: true });
} else {
let idleDetector = null;
let idleDetectorAbort = null;
// Guard against stacked listeners when onIdleStateChanged fires twice
// without a cleanup in between (StrictMode double-invoke, hot reload,
// or a stale consumer). Without this flag, every activity event would
// call the callback N times — spotted during the bug audit.
let listenersAttached = false;
function onActivity() {
lastActiveTime = Date.now();
idleCallback({ isIdle: false });
if (idleCallback) idleCallback({ isIdle: false });
}
function handleVisibilityChange() {
if (!document.hidden) {
lastActiveTime = Date.now();
if (idleCallback) idleCallback({ isIdle: false });
}
}
function attachFallbackListeners() {
if (listenersAttached) return;
for (const ev of ACTIVITY_EVENTS) {
window.addEventListener(ev, onActivity, { passive: true, capture: true });
}
document.addEventListener('visibilitychange', handleVisibilityChange);
listenersAttached = true;
}
function detachFallbackListeners() {
if (!listenersAttached) return;
for (const ev of ACTIVITY_EVENTS) {
window.removeEventListener(ev, onActivity, { capture: true });
}
document.removeEventListener('visibilitychange', handleVisibilityChange);
listenersAttached = false;
}
async function tryStartIdleDetector() {
// IdleDetector is Chromium-only and gated behind the `idle-detection`
// permission. Fail silently if the API is missing or permission is
// denied — the fallback listeners will still run.
if (typeof window === 'undefined' || !('IdleDetector' in window)) return false;
try {
const state = await window.IdleDetector.requestPermission();
if (state !== 'granted') return false;
idleDetectorAbort = new AbortController();
idleDetector = new window.IdleDetector();
idleDetector.addEventListener('change', () => {
const isIdle =
idleDetector.userState === 'idle' ||
idleDetector.screenState === 'locked';
if (!isIdle) lastActiveTime = Date.now();
if (idleCallback) idleCallback({ isIdle });
});
// Threshold must be >= 60s per spec.
await idleDetector.start({ threshold: 60_000, signal: idleDetectorAbort.signal });
return true;
} catch {
idleDetector = null;
idleDetectorAbort = null;
return false;
}
}
export default {
getSystemIdleTime() {
// Return seconds since last activity (approximation using visibility)
if (document.hidden) {
return Math.floor((Date.now() - lastActiveTime) / 1000);
}
return 0;
},
onIdleStateChanged(callback) {
idleCallback = callback;
document.addEventListener('visibilitychange', handleVisibilityChange);
attachFallbackListeners();
void tryStartIdleDetector();
},
removeIdleStateListener() {
idleCallback = null;
document.removeEventListener('visibilitychange', handleVisibilityChange);
detachFallbackListeners();
if (idleDetectorAbort) {
try {
idleDetectorAbort.abort();
} catch {
/* already aborted */
}
idleDetectorAbort = null;
}
idleDetector = null;
},
};

24
packages/platform-web/src/session.js
View File

@@ -4,12 +4,34 @@
*/
const SESSION_KEY = 'discord-clone-session';
function isQuotaError(e) {
if (!e) return false;
const name = e.name || '';
const code = e.code;
return (
name === 'QuotaExceededError' ||
name === 'NS_ERROR_DOM_QUOTA_REACHED' ||
code === 22 ||
code === 1014
);
}
export default {
save(data) {
try {
localStorage.setItem(SESSION_KEY, JSON.stringify(data));
return Promise.resolve(true);
} catch {
} catch (e) {
if (isQuotaError(e)) {
// Reject instead of quietly returning `false` — a quota failure
// here means encryption keys never made it to disk, so the user
// will be logged out on next reload. The caller needs to know.
const err = new Error('Browser storage quota exceeded');
err.isQuotaError = true;
return Promise.reject(err);
}
// Non-quota serialization failures are still surfaced via `false`
// to preserve the existing API contract for Electron parity.
return Promise.resolve(false);
}
},

30
packages/platform-web/src/settings.js
View File

@@ -4,12 +4,29 @@
*/
const PREFIX = 'discord-clone-settings:';
// Browsers spell the quota error in a few different ways across vendors.
// Normalizing here so callers can `if (err.isQuotaError)` regardless.
function isQuotaError(e) {
if (!e) return false;
const name = e.name || '';
const code = e.code;
return (
name === 'QuotaExceededError' ||
name === 'NS_ERROR_DOM_QUOTA_REACHED' ||
code === 22 ||
code === 1014
);
}
export default {
get(key) {
try {
const raw = localStorage.getItem(PREFIX + key);
return Promise.resolve(raw !== null ? JSON.parse(raw) : undefined);
} catch {
// Corrupted JSON or blocked storage access — return undefined so
// the caller falls back to defaults. Worth recovering silently
// here because a single bad key shouldn't take down the app.
return Promise.resolve(undefined);
}
},
@@ -18,8 +35,17 @@ export default {
try {
localStorage.setItem(PREFIX + key, JSON.stringify(value));
return Promise.resolve();
} catch {
return Promise.resolve();
} catch (e) {
if (isQuotaError(e)) {
// Reject so the caller can surface the quota error to the user —
// silently swallowing meant settings just "didn't save" with no
// warning. Decorate with a flag so callers can branch without
// sniffing error names themselves.
const err = new Error('Browser storage quota exceeded');
err.isQuotaError = true;
return Promise.reject(err);
}
return Promise.reject(e);
}
},
};

2
packages/shared/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@discord-clone/shared",
"private": true,
"version": "1.0.90",
"version": "1.1.00",
"type": "module",
"main": "src/App.tsx",
"dependencies": {

12
packages/shared/src/components/auth/LoginPage.tsx
View File

@@ -66,10 +66,20 @@ export function LoginPage() {
searchDbKey: searchKeys.dak,
savedAt: Date.now(),
});
} catch (err) {
} catch (err: any) {
// Quota overflow means encryption keys never hit disk —
// user will be logged out on next reload. Surface this
// so they can clear browser storage instead of
// wondering why they keep getting kicked out.
if (err?.isQuotaError) {
setError(
'Browser storage is full. You will be logged out on reload. Free up storage to persist your session.',
);
} else {
console.warn('Session persistence unavailable:', err);
}
}
}
searchCtx?.initialize();
navigate('/channels/@me');

44
packages/shared/src/components/channel/ChannelTextarea.tsx
View File

@@ -1,4 +1,4 @@
import { useConvex, useMutation, useQuery } from 'convex/react';
import { useAction, useConvex, useMutation, useQuery } from 'convex/react';
import {
ArrowUp,
ChartBar,
@@ -130,7 +130,7 @@ export function ChannelTextarea({
);
const keyBundle = allKeys?.find((k) => k.channel_id === channelId) ?? null;
const sendMessage = useMutation(api.messages.send);
const sendMessage = useAction(api.messageActions.send);
const generateUploadUrl = useMutation(api.files.generateUploadUrl);
const validateUpload = useMutation(api.files.validateUpload);
@@ -389,6 +389,15 @@ export function ChannelTextarea({
.map((a) => a.previewUrl)
.filter((u): u is string => !!u);
// Clear the composer up front so a second Enter keystroke
// (while the signed send round-trips through the action) can't
// re-submit the same text. Snapshot innerHTML first so we can
// put the draft back if the send throws.
const prevHTML = editorRef.current?.innerHTML ?? '';
if (editorRef.current) editorRef.current.textContent = '';
setIsEmpty(true);
setMentionQuery(null);
try {
// 1. Text message first (if any). Matches the old client's
// send-then-attach order so the reply context lands on
@@ -397,6 +406,11 @@ export function ChannelTextarea({
const { content, iv, tag } = await crypto.encryptData(text, channelKey);
const ciphertext = content + tag;
const signature = await crypto.signMessage(signingKey, ciphertext);
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`send:${channelId}:${userId}:${authTimestamp}`,
);
await sendMessage({
channelId: channelId as any,
senderId: userId as any,
@@ -405,6 +419,8 @@ export function ChannelTextarea({
signature,
keyVersion: channelKeyVersion,
replyTo: replyTo ? (replyTo.eventId as any) : undefined,
authTimestamp,
authSignature,
});
}
@@ -430,9 +446,6 @@ export function ChannelTextarea({
}
}
if (editorRef.current) editorRef.current.textContent = '';
setIsEmpty(true);
setMentionQuery(null);
if (userId && channelId) {
void stopTyping({
channelId: channelId as any,
@@ -443,6 +456,13 @@ export function ChannelTextarea({
onCancelReply?.();
} catch (err) {
console.error('Failed to send message:', err);
// Send failed — restore the draft so the user can retry
// without retyping. innerHTML preserves mentions, emoji
// nodes, and any other rich content.
if (editorRef.current && prevHTML) {
editorRef.current.innerHTML = prevHTML;
setIsEmpty((editorRef.current.textContent ?? '').trim().length === 0);
}
}
};
@@ -455,6 +475,11 @@ export function ChannelTextarea({
const { content, iv, tag } = await crypto.encryptData(payload, channelKey);
const ciphertext = content + tag;
const signature = await crypto.signMessage(signingKey, ciphertext);
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`send:${channelId}:${userId}:${authTimestamp}`,
);
await sendMessage({
channelId: channelId as any,
senderId: userId as any,
@@ -463,6 +488,8 @@ export function ChannelTextarea({
signature,
keyVersion: channelKeyVersion,
replyTo: replyTo ? (replyTo.eventId as any) : undefined,
authTimestamp,
authSignature,
});
};
@@ -476,6 +503,11 @@ export function ChannelTextarea({
const { content, iv, tag } = await crypto.encryptData(payload, channelKey);
const ciphertext = content + tag;
const signature = await crypto.signMessage(signingKey, ciphertext);
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`send:${channelId}:${userId}:${authTimestamp}`,
);
await sendMessage({
channelId: channelId as any,
senderId: userId as any,
@@ -484,6 +516,8 @@ export function ChannelTextarea({
signature,
keyVersion: keyBundle?.key_version ?? 1,
replyTo: replyTo ? (replyTo.eventId as any) : undefined,
authTimestamp,
authSignature,
});
};

99
packages/shared/src/components/channel/DeleteConfirmationModal.module.css Normal file
View File

@@ -0,0 +1,99 @@
/* ── Delete confirmation modal ────────────────────────────────────
Shown before `api.messageActions.remove` actually runs. Parallels
PinConfirmationModal: description + static PinnedMessageRow
preview + Cancel / Delete actions. Two differences from the pin
dialog: the action row is horizontal (Cancel left, Delete right)
and the primary button is always the danger variant. */
.body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0;
}
.headerFlush {
border-bottom: none;
}
.description {
font-size: 0.9375rem;
line-height: 1.4;
color: var(--text-secondary);
margin: 0;
}
.previewWrap {
margin: 0 -12px;
}
.actions {
display: flex;
flex-direction: row;
gap: 8px;
margin-top: 4px;
}
.primaryButton,
.secondaryButton {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border: none;
border-radius: 0.75rem;
font: inherit;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.primaryButton {
background-color: var(--brand-primary);
color: #fff;
transition: filter 0.15s;
}
.primaryButton:active:not(:disabled) {
filter: brightness(0.92);
}
.primaryButton:disabled {
opacity: 0.55;
cursor: default;
}
/* Danger variant — Delete is always destructive so this is always on. */
.primaryButtonDanger {
background-color: var(--button-danger-fill);
}
.primaryButtonDanger:hover:not(:disabled) {
filter: brightness(1.05);
}
.primaryButtonDanger:active:not(:disabled) {
background-color: var(--button-danger-active-fill);
filter: none;
}
.secondaryButton {
background-color: var(--background-secondary-alt);
color: var(--text-primary);
transition: background-color 0.15s;
}
.secondaryButton:hover,
.secondaryButton:active {
background-color: var(--background-modifier-hover);
}
.error {
padding: 10px 14px;
background-color: hsl(0, calc(60% * var(--saturation-factor)), 22%);
color: hsl(0, calc(80% * var(--saturation-factor)), 85%);
border-radius: 0.5rem;
font-size: 0.8125rem;
}

116
packages/shared/src/components/channel/DeleteConfirmationModal.tsx Normal file
View File

@@ -0,0 +1,116 @@
/**
* DeleteConfirmationModal — confirmation dialog shown before a
* message is actually removed. Mirrors PinConfirmationModal: read-only
* `PinnedMessageRow` preview of the target, short reassurance copy,
* two stacked actions with the primary button in danger red.
*
* Calls `api.messageActions.remove` directly (with the signed auth
* payload the action layer requires) so callers don't need to plumb
* their own signing logic through to the confirm button.
*/
import { useState } from 'react';
import { useAction } from 'convex/react';
import { Modal } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import type { Id } from '../../../../../convex/_generated/dataModel';
import { usePlatform } from '../../platform';
import { PinnedMessageRow, type PinnedMessage } from './PinnedMessageRow';
import styles from './DeleteConfirmationModal.module.css';
interface DeleteConfirmationModalProps {
isOpen: boolean;
onClose: () => void;
messageId: string | null;
message: PinnedMessage | null;
}
export function DeleteConfirmationModal({
isOpen,
onClose,
messageId,
message,
}: DeleteConfirmationModalProps) {
const removeMessage = useAction(api.messageActions.remove);
const { crypto } = usePlatform();
const [busy, setBusy] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleConfirm = async () => {
if (!messageId || busy) return;
const userId =
typeof localStorage !== 'undefined' ? localStorage.getItem('userId') : null;
const signingKey =
typeof sessionStorage !== 'undefined'
? sessionStorage.getItem('signingKey')
: null;
if (!userId || !signingKey) {
setError('Not signed in');
return;
}
setBusy(true);
setError(null);
try {
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`remove:${messageId}:${userId}:${authTimestamp}`,
);
await removeMessage({
id: messageId as Id<'messages'>,
userId: userId as Id<'userProfiles'>,
authTimestamp,
authSignature,
});
onClose();
} catch (err: any) {
setError(err?.message || 'Failed to delete message.');
} finally {
setBusy(false);
}
};
return (
<Modal.Root isOpen={isOpen} onClose={onClose} size="small">
<Modal.Header
title="Delete Message"
onClose={onClose}
className={styles.headerFlush}
/>
<Modal.Content>
<div className={styles.body}>
<p className={styles.description}>
Are you sure you want to delete this message? This action cannot
be undone.
</p>
{message && (
<div className={styles.previewWrap}>
<PinnedMessageRow message={message} showEmbeds />
</div>
)}
{error && <div className={styles.error}>{error}</div>}
<div className={styles.actions}>
<button
type="button"
className={styles.secondaryButton}
onClick={onClose}
disabled={busy}
>
Cancel
</button>
<button
type="button"
className={`${styles.primaryButton} ${styles.primaryButtonDanger}`}
onClick={handleConfirm}
disabled={busy || !messageId}
>
{busy ? 'Deleting…' : 'Delete'}
</button>
</div>
</div>
</Modal.Content>
</Modal.Root>
);
}

63
packages/shared/src/components/channel/EncryptedAttachment.tsx
View File

@@ -23,6 +23,20 @@ const TAG_HEX_LEN = 32;
// same file. Keyed by the remote storage URL.
const attachmentCache = new Map<string, string>();
// Natural dimensions learned on first render for legacy images whose
// metadata predates the upload-time dimension capture. Once populated,
// remounts of the same attachment (pagination, channel re-open) go
// straight to the correctly-sized placeholder instead of the
// fluid-but-wrong 4:3 fallback that used to expand mid-load.
const probedDimsCache = new Map<string, { w: number; h: number }>();
// Placeholder box for images whose dimensions we haven't probed yet.
// Fixed size is preferable to a fluid fallback because a wrong fluid
// aspect-ratio (e.g. 4:3 for a 16:9 landscape) shifts height when the
// real image lands; a fixed-size box may leave blank margin but doesn't
// shift the scroll anchor.
const PROBE_FALLBACK = { w: 300, h: 200 } as const;
function fromHexString(hex: string): Uint8Array {
const matches = hex.match(/.{1,2}/g) ?? [];
return new Uint8Array(matches.map((b) => parseInt(b, 16)));
@@ -118,24 +132,26 @@ export function EncryptedAttachment({ metadata, onImageClick, className }: Attac
}
if (kind === 'image') {
// Reserve the exact final layout box up-front so the loaded
// image lands in the same slot the placeholder occupied — no
// post-load height shift, no scroll jump. When the metadata
// carries both width + height we compute the box from them;
// otherwise we fall back to a ratio-aware aspect-ratio so the
// browser still reserves a sensible chunk of space.
const hasDims = !!metadata.width && !!metadata.height;
const maxW = metadata.width ? Math.min(metadata.width, 400) : 300;
const renderedH =
hasDims
? Math.round(maxW * (metadata.height! / metadata.width!))
: undefined;
// Dimension resolution order:
// 1. metadata.width/height (captured at upload time — modern path)
// 2. probedDimsCache for this url (learned on a previous mount)
// 3. PROBE_FALLBACK (fixed 300×200) while we wait for the
// first successful <img> onLoad to populate the cache
// Fixed fallback (vs. a fluid 4:3 aspect-ratio) is the critical
// bit: a wrong fluid ratio shifts height when the real image
// lands, which defeats the whole point of reserving space.
const metaDims =
metadata.width && metadata.height
? { w: metadata.width, h: metadata.height }
: null;
const probedDims = metaDims ?? probedDimsCache.get(metadata.url) ?? null;
const boxDims = probedDims ?? PROBE_FALLBACK;
const maxW = Math.min(boxDims.w, 400);
const renderedH = Math.round(maxW * (boxDims.h / boxDims.w));
const sharedBoxStyle: React.CSSProperties = {
width: maxW,
...(renderedH !== undefined ? { height: renderedH } : {}),
...(hasDims
? { aspectRatio: `${metadata.width} / ${metadata.height}` }
: { aspectRatio: '4 / 3' }),
height: renderedH,
aspectRatio: `${boxDims.w} / ${boxDims.h}`,
maxHeight: '50vh',
borderRadius: 'var(--radius-lg)',
};
@@ -165,7 +181,20 @@ export function EncryptedAttachment({ metadata, onImageClick, className }: Attac
objectFit: 'cover',
cursor: 'pointer',
}}
onLoad={() => {
onLoad={(e) => {
// Learn natural dimensions for legacy attachments
// whose metadata omitted width/height. The cache is
// keyed by the remote storage url so re-mounts and
// channel re-opens pick up the correct box without
// re-probing.
if (!metaDims) {
const img = e.currentTarget;
const w = img.naturalWidth;
const h = img.naturalHeight;
if (w > 0 && h > 0) {
probedDimsCache.set(metadata.url, { w, h });
}
}
// Tell the Messages scroller that an attachment
// finished decoding so it can re-pin to bottom if
// the user is still anchored there. Belt-and-

15
packages/shared/src/components/channel/GifPicker.tsx
View File

@@ -113,26 +113,35 @@ export function GifPicker({ onSelectGif }: GifPickerProps) {
}, [trendingAction, categoriesAction]);
// Debounced search — fires 350ms after the last keystroke so we
// don't hammer the upstream API on every character.
// don't hammer the upstream API on every character. The `cancelled`
// flag is checked after every await so a slow response from an
// earlier query can't overwrite results from a newer one.
useEffect(() => {
const q = search.trim();
if (!q) {
setSearchResults([]);
return;
}
let cancelled = false;
const t = window.setTimeout(async () => {
if (cancelled) return;
setLoading(true);
setError(null);
try {
const res: any = await searchAction({ q, limit: 24 });
if (cancelled) return;
setSearchResults(res?.results ?? []);
} catch (err: any) {
if (cancelled) return;
setError(err?.message ?? 'Search failed.');
} finally {
setLoading(false);
if (!cancelled) setLoading(false);
}
}, 350);
return () => window.clearTimeout(t);
return () => {
cancelled = true;
window.clearTimeout(t);
};
}, [search, searchAction]);
const handlePick = (gif: GifResult) => {

171
packages/shared/src/components/channel/LinkEmbed.tsx
View File

@@ -11,6 +11,8 @@ interface UrlPreview {
description?: string;
imageUrl?: string;
siteName?: string;
imageWidth?: number;
imageHeight?: number;
}
const VIDEO_HOSTS = [
@@ -51,6 +53,23 @@ function isVideoUrl(url: string): boolean {
// avoid hammering the fetcher for URLs that will never resolve.
const previewCache = new Map<string, UrlPreview | null>();
// Natural dimensions learned on first successful <img> onLoad for every
// embed image (OG preview image, direct image URL). Populates the
// reserved-box aspect-ratio so the next mount of the same URL goes
// straight to its real proportions instead of the fixed fallback.
const embedImageDimsCache = new Map<string, { w: number; h: number }>();
// Fallback box for an embed image whose dimensions we haven't probed
// yet. Roughly matches the common OG-image aspect ratio (~1.91:1 for
// Twitter/Facebook card images). Fixed-size fallback > fluid fallback
// because a wrong fluid ratio shifts height when the real image lands.
const EMBED_IMG_FALLBACK = { w: 400, h: 210 } as const;
// Direct inline video embeds default to 16:9 — most web video ships at
// that ratio. A wrong default just means a little blank space above or
// below the video, not a scroll jump.
const DIRECT_VIDEO_FALLBACK_RATIO = '16 / 9';
function normaliseMetadata(raw: any): UrlPreview | null {
if (!raw || typeof raw !== 'object') return null;
@@ -65,9 +84,29 @@ function normaliseMetadata(raw: any): UrlPreview | null {
raw.image ?? raw.imageUrl ?? raw['og:image'] ?? raw.ogImage ?? undefined;
const siteName =
raw.siteName ?? raw['og:site_name'] ?? raw.ogSiteName ?? undefined;
// Dimensions come from the Convex action's `imageWidth`/`imageHeight`
// fields (parsed from og:image:width / og:image:height on the server).
// Fall through a few other naming conventions in case a platform-
// native fetcher emits the OG keys verbatim.
const pickNum = (v: unknown): number | undefined => {
if (typeof v === 'number' && Number.isFinite(v) && v > 0) return v;
if (typeof v === 'string') {
const n = Number(v);
if (Number.isFinite(n) && n > 0) return n;
}
return undefined;
};
const imageWidth =
pickNum(raw.imageWidth) ??
pickNum(raw['og:image:width']) ??
pickNum(raw.ogImageWidth);
const imageHeight =
pickNum(raw.imageHeight) ??
pickNum(raw['og:image:height']) ??
pickNum(raw.ogImageHeight);
if (!title && !description && !imageUrl) return null;
return { title, description, imageUrl, siteName };
return { title, description, imageUrl, siteName, imageWidth, imageHeight };
}
function useUrlPreview(url: string): UrlPreview | null {
@@ -79,7 +118,22 @@ function useUrlPreview(url: string): UrlPreview | null {
useEffect(() => {
if (previewCache.has(url)) {
setPreview(previewCache.get(url) ?? null);
const cached = previewCache.get(url) ?? null;
// Same cache-seeding as the fresh-fetch branch below — ensures
// the reserved image box is correct even when the preview came
// out of the module cache on a re-render.
if (
cached?.imageUrl &&
cached.imageWidth &&
cached.imageHeight &&
!embedImageDimsCache.has(cached.imageUrl)
) {
embedImageDimsCache.set(cached.imageUrl, {
w: cached.imageWidth,
h: cached.imageHeight,
});
}
setPreview(cached);
return;
}
@@ -112,6 +166,23 @@ function useUrlPreview(url: string): UrlPreview | null {
}
if (cancelled) return;
previewCache.set(url, result);
// Server-provided image dimensions populate the same
// cache the <img> onLoad handler updates — so the
// reserved box is correct on the very first paint of
// the preview card, not only after the image finishes
// decoding. Falls through to the onLoad probe if the
// server didn't have width/height tags.
if (
result?.imageUrl &&
result.imageWidth &&
result.imageHeight &&
!embedImageDimsCache.has(result.imageUrl)
) {
embedImageDimsCache.set(result.imageUrl, {
w: result.imageWidth,
h: result.imageHeight,
});
}
setPreview(result);
} catch {
if (!cancelled) previewCache.set(url, null);
@@ -146,14 +217,34 @@ function DirectMediaEmbed({
setPlaying(true);
};
// `preload="metadata"` leaves the <video> element at zero height
// until `loadedmetadata` fires — that was a measurable source of
// scroll jump. Wrap it in an aspect-ratio box so the space is
// reserved from the first paint. 16:9 is the overwhelming majority
// of web video; when the real metadata lands and differs slightly
// the ResizeObserver catches it, but the gross box is already
// there.
return (
<div className={`${styles.embed} ${styles.embedBare}`}>
<div className={styles.directVideoWrapper}>
<div
className={styles.directVideoWrapper}
style={{
aspectRatio: DIRECT_VIDEO_FALLBACK_RATIO,
width: 400,
maxWidth: '100%',
}}
>
<video
ref={videoRef}
className={styles.directVideo}
src={url}
preload="metadata"
style={{ width: '100%', height: '100%' }}
onLoadedMetadata={() => {
window.dispatchEvent(
new CustomEvent('brycord:attachment-loaded'),
);
}}
onPause={() => {
if (videoRef.current && videoRef.current.ended) {
videoRef.current.controls = false;
@@ -193,6 +284,15 @@ function DirectMediaEmbed({
);
}
// Direct image embed: reserve a box from the probed cache (or a
// fixed fallback) so the image lands in a slot of known height
// instead of expanding the wrapper from zero. `loading="lazy"` was
// here but removed — a direct-image embed is always rendered in
// view when it first mounts, and the deferred decode defeats the
// scroll anchor window we're trying to hold onto.
const probed = embedImageDimsCache.get(url) ?? EMBED_IMG_FALLBACK;
const boxW = Math.min(probed.w, 400);
const boxH = Math.round(boxW * (probed.h / probed.w));
return (
<div className={`${styles.embed} ${styles.embedBare}`}>
<a href={url} target="_blank" rel="noopener noreferrer">
@@ -200,7 +300,23 @@ function DirectMediaEmbed({
className={styles.directImage}
src={url}
alt=""
loading="lazy"
decoding="async"
width={boxW}
height={boxH}
style={{
aspectRatio: `${probed.w} / ${probed.h}`,
}}
onLoad={(e) => {
const img = e.currentTarget;
const w = img.naturalWidth;
const h = img.naturalHeight;
if (w > 0 && h > 0) {
embedImageDimsCache.set(url, { w, h });
}
window.dispatchEvent(
new CustomEvent('brycord:attachment-loaded'),
);
}}
/>
</a>
</div>
@@ -263,13 +379,49 @@ function UrlPreviewEmbed({ url }: { url: string }) {
<div className={styles.description}>{preview.description}</div>
)}
{hasImage && (
<div className={styles.mediaContainer}>
{hasImage && (() => {
// Reserve a box for the OG image so the card's
// final height is known before the image loads.
// Without this the card appears title-first, then
// expands downward as the image decodes — the
// classic link-preview height shift.
const imgUrl = preview.imageUrl!;
const probed =
embedImageDimsCache.get(imgUrl) ?? EMBED_IMG_FALLBACK;
return (
<div
className={styles.mediaContainer}
style={{
aspectRatio: `${probed.w} / ${probed.h}`,
// max-height matches .mediaImage CSS so
// the container never exceeds the
// image's own cap and the reserved
// space matches the rendered space.
maxHeight: 300,
width: '100%',
}}
>
<img
className={styles.mediaImage}
src={preview.imageUrl}
src={imgUrl}
alt={preview.title || ''}
loading="lazy"
decoding="async"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
onLoad={(e) => {
const img = e.currentTarget;
const w = img.naturalWidth;
const h = img.naturalHeight;
if (w > 0 && h > 0) {
embedImageDimsCache.set(imgUrl, { w, h });
}
window.dispatchEvent(
new CustomEvent('brycord:attachment-loaded'),
);
}}
/>
{isVideo && (
<a
@@ -289,7 +441,8 @@ function UrlPreviewEmbed({ url }: { url: string }) {
</a>
)}
</div>
)}
);
})()}
</div>
</div>
</div>

66
packages/shared/src/components/channel/MessageGroup.tsx
View File

@@ -16,6 +16,7 @@ import {
MemberProfilePopout,
type MemberProfilePopoutMember,
} from '../member/MemberProfilePopout';
import { DeleteConfirmationModal } from './DeleteConfirmationModal';
import { PinConfirmationModal } from './PinConfirmationModal';
import { ReactionsModal } from './ReactionsModal';
import { Tooltip } from '@discord-clone/ui';
@@ -23,6 +24,7 @@ import { reactionKeyToName } from '../../utils/emojiLookup';
import type { PinnedMessage } from './PinnedMessageRow';
import { TwemojiImg } from './TwemojiImg';
import { resolveReactionKeyToUnicode } from '../../utils/emojiLookup';
import { extractUrls, isGifOnlyContent } from '../../utils/messageUrls';
import styles from './MessageGroup.module.css';
interface MessageGroupProps {
@@ -31,32 +33,6 @@ interface MessageGroupProps {
onReply?: (eventId: string, username: string) => void;
}
const URL_REGEX = /https?:\/\/[^\s<>"']+/gi;
function extractUrls(text: string): string[] {
const matches = text.match(URL_REGEX) ?? [];
// Strip trailing punctuation that's almost never part of the URL but
// commonly butts up against one in prose ("see https://foo.com.").
const cleaned = matches.map((m) => m.replace(/[),.;!?]+$/, ''));
return Array.from(new Set(cleaned));
}
/** True when a message body is entirely made up of one or more GIF
* URLs plus whitespace — i.e. the user posted a GIF from the
* picker and there's nothing worth showing as text. The render
* path hides the <MessageContent> block in that case so only the
* embedded preview appears. */
function isGifOnlyContent(text: string): boolean {
const urls = extractUrls(text);
if (urls.length === 0) return false;
if (!urls.every((u) => /\.gif(\?|#|$)/i.test(u))) return false;
let remainder = text;
for (const u of urls) {
remainder = remainder.split(u).join('');
}
return remainder.trim().length === 0;
}
/**
* Discord-style relative timestamp:
* - Same calendar day → `Today at 7:08 PM`
@@ -105,7 +81,6 @@ export function MessageGroup({ messages, channelId, onReply }: MessageGroupProps
userId: m.id,
}))
: [];
const removeMessage = useMutation(api.messages.remove);
const addReaction = useMutation(api.reactions.add);
const removeReaction = useMutation(api.reactions.remove);
@@ -276,13 +251,29 @@ export function MessageGroup({ messages, channelId, onReply }: MessageGroupProps
setReactPicker(null);
};
const handleDelete = async (messageId: string) => {
if (!myUserId) return;
try {
await removeMessage({ id: messageId as any, userId: myUserId as any });
} catch (err) {
console.error('Failed to delete message:', err);
}
// Delete flows through the DeleteConfirmationModal — the old
// inline delete fired as soon as the user clicked the trash icon
// which was easy to trigger by accident on a misclick. The modal
// also holds the actual api.messageActions.remove call so the
// signing logic lives in one place.
const [deleteTarget, setDeleteTarget] = useState<{
id: string;
preview: PinnedMessage;
} | null>(null);
const handleDelete = (messageId: string) => {
const msg = messages.find((m) => m.id === messageId);
if (!msg) return;
setDeleteTarget({
id: msg.id,
preview: {
id: msg.id,
authorName: msg.authorName,
authorAvatarUrl: msg.authorAvatarUrl,
content: msg.content,
timestamp: msg.timestamp,
attachments: msg.attachments,
},
});
};
const handleToggleReaction = async (messageId: string, emoji: string, me: boolean) => {
@@ -690,6 +681,13 @@ export function MessageGroup({ messages, channelId, onReply }: MessageGroupProps
variant={pinTarget?.variant ?? 'pin'}
/>
<DeleteConfirmationModal
isOpen={!!deleteTarget}
onClose={() => setDeleteTarget(null)}
messageId={deleteTarget?.id ?? null}
message={deleteTarget?.preview ?? null}
/>
{authorPopout && (
<MemberProfilePopout
anchorRect={authorPopout.anchorRect}

399
packages/shared/src/components/channel/Messages.tsx
View File

@@ -50,15 +50,34 @@ export interface DecryptedMessage {
const TAG_LENGTH = 32;
// Small LRU-ish cache for decrypted messages so re-renders don't redecrypt.
// Entries are namespaced by the viewing user's id so decrypted plaintexts
// from a previous login can't bleed into a different user on the same
// page load (logout normally triggers a hard reload, but hot-reload in
// dev and rare reload failures can skip that path).
const decryptionCache = new Map<string, string>();
const MAX_CACHE = 2000;
function cacheSet(id: string, content: string) {
function namespacedKey(userId: string | null, id: string): string {
return `${userId ?? 'anon'}:${id}`;
}
function cacheSet(userId: string | null, id: string, content: string) {
const key = namespacedKey(userId, id);
if (decryptionCache.size >= MAX_CACHE) {
const firstKey = decryptionCache.keys().next().value;
if (firstKey !== undefined) decryptionCache.delete(firstKey);
}
decryptionCache.set(id, content);
decryptionCache.set(key, content);
}
function cacheGet(userId: string | null, id: string): string | undefined {
return decryptionCache.get(namespacedKey(userId, id));
}
// Exposed for the logout hook to flush plaintext from memory proactively,
// independently of the full-page reload useLogout does after this returns.
export function clearDecryptionCache(): void {
decryptionCache.clear();
}
// ── Day divider helpers ─────────────────────────────────────────────
@@ -308,6 +327,54 @@ export function Messages({ channelId, onReply }: MessagesProps) {
new Map(),
);
// Initial-load veil: the scroller starts invisible on every channel
// switch and reveals only once the last ~20 messages are decrypted
// (or a hard fallback timeout fires). The reveal moment is also
// when we perform the authoritative scroll-to-bottom — that way the
// user never sees the pre-hydration state that used to cause the
// viewport to visibly float upward as message bodies filled in.
const [ready, setReady] = useState(false);
const readyTimerRef = useRef<number | null>(null);
// Synchronous cache hydration. Runs as a layout effect so the
// setState + re-render happens before paint: warm-cache channel
// switches (the common case) render with real message text on the
// first frame instead of briefly showing empty `content: ''` bodies
// that then grow as the async effect below fills them in. That
// growth was the primary cause of the "scrolls to bottom, then
// jumps up" bug — no hydration wave, no jump.
useLayoutEffect(() => {
if (!pagedMessages || pagedMessages.length === 0) return;
let changed = false;
let next: Map<string, string> | null = null;
for (const msg of pagedMessages as any[]) {
const id = msg.id as string;
if (decryptedMap.has(id)) continue;
const cached = cacheGet(userId, id);
if (cached !== undefined) {
if (!next) next = new Map(decryptedMap);
next.set(id, cached);
changed = true;
}
}
if (changed && next) setDecryptedMap(next);
let replyChanged = false;
let nextReply: Map<string, string> | null = null;
for (const msg of pagedMessages as any[]) {
const id = msg.id as string;
if (replyPreviewMap.has(id)) continue;
if (!msg.replyToContent) continue;
const cached = cacheGet(userId, `reply:${id}`);
if (cached !== undefined) {
if (!nextReply) nextReply = new Map(replyPreviewMap);
nextReply.set(id, cached);
replyChanged = true;
}
}
if (replyChanged && nextReply) setReplyPreviewMap(nextReply);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pagedMessages, userId]);
// Helper: try to scroll to whatever's in `pendingJumpRef`. If the
// target is in the DOM we scroll + flash, clear the pending ref,
// and we're done. Otherwise we kick off another paginate-up so
@@ -369,59 +436,85 @@ export function Messages({ channelId, onReply }: MessagesProps) {
if (channelKeysByVersion.size === 0 || !pagedMessages) return;
let cancelled = false;
(async () => {
const next = new Map(decryptedMap);
let changed = false;
// Walk once, bucket each message into either a synchronous
// sentinel (invalid ciphertext, missing key) or an async
// decrypt job. The synchronous hits are applied in the same
// setState as the async results, so the UI never flashes
// through an intermediate "some decrypted, some not" state.
type Job =
| { kind: 'sentinel'; id: string; value: string }
| {
kind: 'decrypt';
id: string;
contentHex: string;
nonce: string;
tag: string;
key: string;
};
const jobs: Job[] = [];
for (const msg of pagedMessages as any[]) {
const id = msg.id as string;
if (next.has(id)) continue;
const cached = decryptionCache.get(id);
if (cached) {
next.set(id, cached);
changed = true;
continue;
}
if (decryptedMap.has(id)) continue;
if (cacheGet(userId, id) !== undefined) continue;
if (!msg.ciphertext || msg.ciphertext.length < TAG_LENGTH) {
next.set(id, '[Invalid Encrypted Message]');
changed = true;
jobs.push({ kind: 'sentinel', id, value: '[Invalid Encrypted Message]' });
continue;
}
// Pick the key matching this message's version. Messages
// that predate key rotation default to version 1. If the
// exact version is missing (shouldn't happen normally),
// fall back to the latest key and try that so we never
// lock the user out of their own history.
const msgVersion: number = msg.keyVersion ?? 1;
const keyForVersion =
channelKeysByVersion.get(msgVersion) ?? channelKey;
if (!keyForVersion) {
next.set(id, '[Unable to decrypt]');
changed = true;
jobs.push({ kind: 'sentinel', id, value: '[Unable to decrypt]' });
continue;
}
const tag = msg.ciphertext.slice(-TAG_LENGTH);
const contentHex = msg.ciphertext.slice(0, -TAG_LENGTH);
jobs.push({
kind: 'decrypt',
id,
contentHex: msg.ciphertext.slice(0, -TAG_LENGTH),
tag: msg.ciphertext.slice(-TAG_LENGTH),
nonce: msg.nonce,
key: keyForVersion,
});
}
if (jobs.length === 0) return;
// Fan out decrypts in parallel — 50 AES-GCM ops finish in
// one round-trip to the crypto worker instead of 50 sequential
// awaits. Collapses what used to be N setState waves (one
// after each decrypt in the original serial loop) into one.
const results = await Promise.all(
jobs.map(async (j) => {
if (j.kind === 'sentinel') {
return { id: j.id, value: j.value, cache: false };
}
try {
const plaintext = await crypto.decryptData(
contentHex,
keyForVersion,
msg.nonce,
tag,
j.contentHex,
j.key,
j.nonce,
j.tag,
);
return { id: j.id, value: plaintext, cache: true };
} catch {
return { id: j.id, value: '[Unable to decrypt]', cache: false };
}
}),
);
if (cancelled) return;
cacheSet(id, plaintext);
next.set(id, plaintext);
changed = true;
} catch {
next.set(id, '[Unable to decrypt]');
changed = true;
const next = new Map(decryptedMap);
for (const r of results) {
if (r.cache) cacheSet(userId, r.id, r.value);
next.set(r.id, r.value);
}
}
if (changed && !cancelled) setDecryptedMap(next);
setDecryptedMap(next);
})();
return () => {
cancelled = true;
};
}, [pagedMessages, channelKeysByVersion, channelKey]);
// `userId` gates the cacheGet/cacheSet namespace below; without
// it a quick logout/login in the same tab would surface the
// previous user's cached plaintext under the new identity.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pagedMessages, channelKeysByVersion, channelKey, userId]);
// Reply preview decryption — same pattern as the main loop but
// keyed by child message id and using the parent's `replyToContent`
@@ -431,11 +524,18 @@ export function Messages({ channelId, onReply }: MessagesProps) {
if (channelKeysByVersion.size === 0 || !pagedMessages) return;
let cancelled = false;
(async () => {
const next = new Map(replyPreviewMap);
let changed = false;
type Job = {
id: string;
cacheKey: string;
contentHex: string;
nonce: string;
tag: string;
key: string;
};
const jobs: Job[] = [];
for (const msg of pagedMessages as any[]) {
const id = msg.id as string;
if (next.has(id)) continue;
if (replyPreviewMap.has(id)) continue;
if (
!msg.replyToContent ||
!msg.replyToNonce ||
@@ -444,26 +544,34 @@ export function Messages({ channelId, onReply }: MessagesProps) {
continue;
}
const cacheKey = `reply:${id}`;
const cached = decryptionCache.get(cacheKey);
if (cached) {
next.set(id, cached);
changed = true;
continue;
}
if (cacheGet(userId, cacheKey) !== undefined) continue;
const replyVersion: number = msg.replyToKeyVersion ?? 1;
const keyForVersion =
channelKeysByVersion.get(replyVersion) ?? channelKey;
if (!keyForVersion) continue;
const tag = msg.replyToContent.slice(-TAG_LENGTH);
const contentHex = msg.replyToContent.slice(0, -TAG_LENGTH);
jobs.push({
id,
cacheKey,
contentHex: msg.replyToContent.slice(0, -TAG_LENGTH),
tag: msg.replyToContent.slice(-TAG_LENGTH),
nonce: msg.replyToNonce,
key: keyForVersion,
});
}
if (jobs.length === 0) return;
// Parallel decrypt — collapses the per-message setState waves
// of the original serial loop into one, so the reply-preview
// layer can't produce a second reflow after the main body
// decryption already shifted heights.
const results = await Promise.all(
jobs.map(async (j) => {
try {
const plaintext = await crypto.decryptData(
contentHex,
keyForVersion,
msg.replyToNonce,
tag,
j.contentHex,
j.key,
j.nonce,
j.tag,
);
if (cancelled) return;
// Strip JSON wrappers so the preview shows the
// human-readable text, not raw {"text":"…"} dumps.
let preview = plaintext;
@@ -484,20 +592,30 @@ export function Messages({ channelId, onReply }: MessagesProps) {
} catch {
/* plain text */
}
cacheSet(cacheKey, preview);
next.set(id, preview);
changed = true;
cacheSet(userId, j.cacheKey, preview);
return { id: j.id, preview };
} catch {
/* leave unset — UI shows the missing-context fallback */
return null;
}
}),
);
if (cancelled) return;
const next = new Map(replyPreviewMap);
let changed = false;
for (const r of results) {
if (r) {
next.set(r.id, r.preview);
changed = true;
}
}
if (changed && !cancelled) setReplyPreviewMap(next);
if (changed) setReplyPreviewMap(next);
})();
return () => {
cancelled = true;
};
// Same userId cache-namespace concern as the main loop.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pagedMessages, channelKeysByVersion, channelKey]);
}, [pagedMessages, channelKeysByVersion, channelKey, userId]);
const decrypted: DecryptedMessage[] = useMemo(() => {
if (!pagedMessages) return [];
@@ -613,15 +731,102 @@ export function Messages({ channelId, onReply }: MessagesProps) {
const scrollAnchorRef = useRef<{ bottomOffset: number } | null>(null);
const restoreActiveRef = useRef(false);
// On channel switch, re-pin and scroll to bottom.
// On channel switch, reset all scroll-state refs and drop the veil
// (reveal gate). The actual scroll-to-bottom is deferred to a
// separate effect that runs once the tail of the list is decrypted,
// so we pin against the final rendered height instead of the
// empty-content height that used to cause the visible jump.
useLayoutEffect(() => {
pinnedRef.current = true;
scrollAnchorRef.current = null;
restoreActiveRef.current = false;
const el = scrollerRef.current;
if (el) el.scrollTop = el.scrollHeight;
setReady(false);
if (readyTimerRef.current !== null) {
window.clearTimeout(readyTimerRef.current);
}
// Hard safety net: even if decryption stalls (missing key,
// network flake), drop the veil so the user always sees *some*
// channel state within ~400ms of switching. `[Unable to decrypt]`
// sentinels render at stable height too, so this fallback is
// safe — we aren't waiting for real text, we're waiting for
// *anything* to be populated so heights are final.
readyTimerRef.current = window.setTimeout(() => {
readyTimerRef.current = null;
setReady(true);
}, 400);
return () => {
if (readyTimerRef.current !== null) {
window.clearTimeout(readyTimerRef.current);
readyTimerRef.current = null;
}
};
}, [channelId]);
// Tail-ready detection: drop the veil once the newest ~20 messages
// (the ones visible on the first screen) have entries in
// `decryptedMap`. A message with an error sentinel (e.g.
// `[Unable to decrypt]`) counts as ready because its height is
// stable — we only care that heights won't grow after reveal.
useLayoutEffect(() => {
if (ready) return;
if (!pagedMessages) return;
const msgs = pagedMessages as any[];
if (msgs.length === 0) {
setReady(true);
return;
}
// pagedMessages is newest-first (the `decrypted` memo reverses
// it for render). The visible tail is the first ~20 entries.
const tailCount = Math.min(20, msgs.length);
for (let i = 0; i < tailCount; i++) {
if (!decryptedMap.has(msgs[i].id)) return;
}
setReady(true);
}, [ready, pagedMessages, decryptedMap]);
// Scroll-to-bottom + stubborn-bottom settle. Runs once `ready` flips
// true on the current channel. The initial rAF-delayed pin absorbs
// the reveal-frame layout; the later timeouts form a "stubborn
// bottom" window that keeps re-pinning for 500ms after reveal to
// catch late-loading content (OG images, cross-origin canvas taints
// in PausedGif, anything the observer's ResizeObserver misses
// because the placeholder and final content have identical boxes).
// The `pinnedRef` guard means a user who scrolls up during the
// settle window is never dragged back down.
useLayoutEffect(() => {
if (!ready) return;
const el = scrollerRef.current;
if (!el) return;
// Immediate pre-paint pin so the first painted frame is at the
// bottom. Everything after this is belt-and-suspenders.
el.scrollTop = el.scrollHeight;
const pin = () => {
if (!pinnedRef.current) return;
const cur = scrollerRef.current;
if (!cur) return;
restoreActiveRef.current = true;
cur.scrollTop = cur.scrollHeight;
requestAnimationFrame(() => {
restoreActiveRef.current = false;
});
};
const rafs: number[] = [];
const timers: number[] = [];
rafs.push(
requestAnimationFrame(() => {
pin();
rafs.push(requestAnimationFrame(pin));
}),
);
timers.push(window.setTimeout(pin, 80));
timers.push(window.setTimeout(pin, 250));
timers.push(window.setTimeout(pin, 500));
return () => {
rafs.forEach((h) => cancelAnimationFrame(h));
timers.forEach((h) => window.clearTimeout(h));
};
}, [ready, channelId]);
// Observe DOM mutations + resizes inside the scroller. If the user
// is pinned to bottom, snap to bottom on every content change. If
// the user triggered a paginate-up, preserve their position by
@@ -630,10 +835,14 @@ export function Messages({ channelId, onReply }: MessagesProps) {
const el = scrollerRef.current;
if (!el) return;
const onContentChange = () => {
// Pagination anchor wins over pinned — the user is clearly
// scrolled up and reading older context, so we must NOT
// slam them to the bottom.
// Single rAF-batched handler so MutationObserver + ResizeObserver +
// window resize + attachment-loaded events all collapse into one
// scroll write per frame. Without batching, an image loading could
// fire both observers in the same tick and cause a double
// `scrollTop = scrollHeight`.
let rafHandle: number | null = null;
const runContentChange = () => {
rafHandle = null;
const anchor = scrollAnchorRef.current;
if (anchor) {
// Restore the same distance-from-bottom on every
@@ -654,6 +863,10 @@ export function Messages({ channelId, onReply }: MessagesProps) {
el.scrollTop = el.scrollHeight;
}
};
const onContentChange = () => {
if (rafHandle !== null) return;
rafHandle = requestAnimationFrame(runContentChange);
};
const mutationObs = new MutationObserver(onContentChange);
mutationObs.observe(el, { childList: true, subtree: true });
@@ -690,6 +903,10 @@ export function Messages({ channelId, onReply }: MessagesProps) {
);
return () => {
if (rafHandle !== null) {
cancelAnimationFrame(rafHandle);
rafHandle = null;
}
mutationObs.disconnect();
resizeObs?.disconnect();
window.removeEventListener('resize', onWindowResize);
@@ -713,12 +930,18 @@ export function Messages({ channelId, onReply }: MessagesProps) {
const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
pinnedRef.current = distanceFromBottom < 150;
// If the user has visibly moved away from the loader region
// (far enough down that another paginate-up can't trigger),
// clear the anchor. This lets the next near-top scroll start
// a fresh pagination cycle instead of chaining onto stale
// coords from a previous one.
if (scrollAnchorRef.current && el.scrollTop > 200) {
// Clear the anchor in two cases:
// 1. User scrolled well past the loader region (>200px) — a
// fresh near-top scroll should start a new pagination cycle.
// 2. Pagination is no longer loading-more (either CanLoadMore
// has been re-armed or we've Exhausted). Without this,
// decryption-driven reflows in the 80-200px band would keep
// firing anchor-restore and make the scroll feel sticky
// after older history loaded.
if (
scrollAnchorRef.current &&
(el.scrollTop > 200 || status !== 'LoadingMore')
) {
scrollAnchorRef.current = null;
}
@@ -726,7 +949,14 @@ export function Messages({ channelId, onReply }: MessagesProps) {
// the current distance-from-bottom into the anchor ref BEFORE
// firing loadMore so the content-change observer can pin the
// viewport to the same message the reader was looking at.
if (el.scrollTop < 80 && status === 'CanLoadMore' && !scrollAnchorRef.current) {
// Guard against duplicate loadMore calls while an earlier one
// is still in flight (`LoadingMore`) — Convex would de-dupe but
// it's wasted traffic.
if (
el.scrollTop < 80 &&
status === 'CanLoadMore' &&
!scrollAnchorRef.current
) {
scrollAnchorRef.current = {
bottomOffset: el.scrollHeight - el.scrollTop,
};
@@ -795,14 +1025,24 @@ export function Messages({ channelId, onReply }: MessagesProps) {
// seen, update the ref and schedule a debounced mark-read. The
// ref-only update doesn't cause re-renders — it just feeds the
// mark-read flush with an up-to-date target.
//
// Only advance the "seen" mark once the newest message has actually
// decrypted — otherwise the channel's unread dot + NEW divider
// clear while the body is still rendering as blank, and users miss
// new messages they never actually saw.
useEffect(() => {
if (items.length === 0) return;
const newest = items[items.length - 1].ts;
const last = items[items.length - 1];
if (last.kind === 'group') {
const tail = last.group[last.group.length - 1];
if (!tail || !decryptedMap.has(tail.id)) return;
}
const newest = last.ts;
if (newest > latestSeenTimestampRef.current) {
latestSeenTimestampRef.current = newest;
scheduleMarkRead();
}
}, [items, scheduleMarkRead]);
}, [items, decryptedMap, scheduleMarkRead]);
// Window visibility → when the tab comes back into focus, flush
// any pending mark-read so the sidebar dot disappears without
@@ -845,7 +1085,18 @@ export function Messages({ channelId, onReply }: MessagesProps) {
return (
<div className={styles.container} ref={scrollerRef} onScroll={handleScroll}>
<div className={styles.scroller}>
<div
className={styles.scroller}
style={{
// Veil: keep the list invisible until `ready` flips
// true (after decryption of the visible tail). The
// scroller is still laid out at opacity 0 so scroll
// math works — the user just doesn't see the pre-
// stabilised state that caused the visible jump.
opacity: ready ? 1 : 0,
transition: ready ? 'opacity 80ms linear' : 'none',
}}
>
{status === 'LoadingMore' && (
<div
style={{

49
packages/shared/src/components/channel/PausedGif.tsx
View File

@@ -20,10 +20,22 @@ interface PausedGifProps {
onOpen?: (url: string) => void;
}
// Cache natural dimensions per URL so re-mounts (pagination, hover-in/out
// cycles in the parent, channel re-opens) start with the correct box
// instead of collapsing back to the fallback while the <img> re-decodes.
const gifDimsCache = new Map<string, { w: number; h: number }>();
// Fallback reservation for a GIF whose dimensions we haven't probed yet.
// Most Tenor/Giphy GIFs land in the 320–480px / 4:3 range, so this keeps
// the scroll-anchor math roughly right even before the real dims arrive.
const FALLBACK_DIMS = { w: 320, h: 240 } as const;
export function PausedGif({ url, className, onOpen }: PausedGifProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [loaded, setLoaded] = useState(false);
const [dims, setDims] = useState<{ w: number; h: number } | null>(null);
const [dims, setDims] = useState<{ w: number; h: number } | null>(
() => gifDimsCache.get(url) ?? null,
);
const [hovered, setHovered] = useState(false);
// `imgKey` is bumped every time we need to re-mount the live
// <img> so the GIF starts over from frame 0 on each hover.
@@ -33,14 +45,21 @@ export function PausedGif({ url, className, onOpen }: PausedGifProps) {
useEffect(() => {
let cancelled = false;
const cached = gifDimsCache.get(url);
if (cached) {
setDims(cached);
setLoaded(false);
} else {
setLoaded(false);
setDims(null);
}
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
if (cancelled) return;
const w = img.naturalWidth || 400;
const h = img.naturalHeight || 300;
const w = img.naturalWidth || FALLBACK_DIMS.w;
const h = img.naturalHeight || FALLBACK_DIMS.h;
gifDimsCache.set(url, { w, h });
setDims({ w, h });
const canvas = canvasRef.current;
if (canvas) {
@@ -58,6 +77,12 @@ export function PausedGif({ url, className, onOpen }: PausedGifProps) {
}
}
setLoaded(true);
// Nudge the scroll anchor in case the fallback box differed
// from the real natural dimensions by more than a handful of
// pixels — the parent ResizeObserver catches the wrapper
// resize, but fire the shared event too so the same-frame rAF
// batching picks it up alongside other late-loading content.
window.dispatchEvent(new CustomEvent('brycord:attachment-loaded'));
};
img.onerror = () => {
if (cancelled) return;
@@ -97,11 +122,19 @@ export function PausedGif({ url, className, onOpen }: PausedGifProps) {
onOpen(url);
}
}}
style={
dims
? { aspectRatio: `${dims.w} / ${dims.h}`, maxWidth: Math.min(dims.w, 400) }
: undefined
}
style={(() => {
// Always reserve a box — if we haven't probed dimensions
// yet, fall back to 320×240 / 4:3 so the wrapper doesn't
// collapse to zero height on first paint. That collapse
// used to be the third "jump" in the initial-load sequence
// (the wrapper snapped from 0px to ~240px the moment the
// Image().onload fired).
const d = dims ?? FALLBACK_DIMS;
return {
aspectRatio: `${d.w} / ${d.h}`,
maxWidth: Math.min(d.w, 400),
};
})()}
>
<canvas
ref={canvasRef}

27
packages/shared/src/components/channel/PinConfirmationModal.tsx
View File

@@ -10,10 +10,11 @@
* Calls `api.messages.setPinned` on confirm.
*/
import { useState } from 'react';
import { useMutation } from 'convex/react';
import { useAction } from 'convex/react';
import { Modal } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import type { Id } from '../../../../../convex/_generated/dataModel';
import { usePlatform } from '../../platform';
import { PinnedMessageRow, type PinnedMessage } from './PinnedMessageRow';
import styles from './PinConfirmationModal.module.css';
@@ -63,7 +64,8 @@ export function PinConfirmationModal({
message,
variant = 'pin',
}: PinConfirmationModalProps) {
const setPinned = useMutation(api.messages.pin);
const setPinned = useAction(api.messageActions.pin);
const { crypto } = usePlatform();
const [busy, setBusy] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -71,12 +73,31 @@ export function PinConfirmationModal({
const handleConfirm = async () => {
if (!messageId || busy) return;
const userId =
typeof localStorage !== 'undefined' ? localStorage.getItem('userId') : null;
const signingKey =
typeof sessionStorage !== 'undefined'
? sessionStorage.getItem('signingKey')
: null;
if (!userId || !signingKey) {
setError('Not signed in');
return;
}
setBusy(true);
setError(null);
try {
const pinned = variant === 'pin';
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`pin:${messageId}:${userId}:${pinned}:${authTimestamp}`,
);
await setPinned({
id: messageId as Id<'messages'>,
pinned: variant === 'pin',
userId: userId as Id<'userProfiles'>,
pinned,
authTimestamp,
authSignature,
});
onClose();
} catch (err: any) {

60
packages/shared/src/components/channel/PinnedMessageRow.tsx
View File

@@ -12,8 +12,13 @@
* read-only preview.
*/
import { Flag, X } from '@phosphor-icons/react';
import { useQuery } from 'convex/react';
import { Avatar } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import { EncryptedAttachment, type AttachmentMetadata } from './EncryptedAttachment';
import { LinkEmbed } from './LinkEmbed';
import { MessageContent } from './MessageContent';
import { extractUrls, isGifOnlyContent } from '../../utils/messageUrls';
import styles from './PinnedMessageRow.module.css';
export interface PinnedMessage {
@@ -41,6 +46,14 @@ interface PinnedMessageRowProps {
/** Whether the viewer has permission to unpin. Hides the X when
* they don't, even if `showHoverActions` is on. */
canUnpin?: boolean;
/**
* Render the message with the same link-embed / GIF-only handling
* the live chat row uses. Default false so the pins popover and
* pin confirmation modal stay as they are — opted in by the
* delete confirmation modal so the preview matches what the user
* sees in chat.
*/
showEmbeds?: boolean;
}
function formatTimestamp(ts: number): string {
@@ -65,7 +78,31 @@ export function PinnedMessageRow({
onUnpin,
showHoverActions = false,
canUnpin = true,
showEmbeds = false,
}: PinnedMessageRowProps) {
// When embeds are on, lift the chat's GIF-only + extract-urls
// rules so the preview matches. Up to 3 URL previews, same cap
// MessageGroup uses.
const embedUrls =
showEmbeds && message.content ? extractUrls(message.content).slice(0, 3) : [];
const hideText =
showEmbeds && message.content ? isGifOnlyContent(message.content) : false;
// Custom emoji catalog is server-wide and small, and Convex dedupes
// identical subscriptions across components — so fetching here lets
// the popover, pin confirmation, and delete confirmation all render
// `:shortcode:` tokens as images without the caller plumbing the
// list through props.
const customEmojiDocs =
(useQuery(api.customEmojis.list, {}) ?? []) as Array<{
_id: string;
name: string;
src: string;
}>;
const customEmojiList = customEmojiDocs.map((e) => ({
name: e.name,
url: e.src,
}));
const isClickable = !showHoverActions && !!onJumpTo;
const handleCardClick = () => {
@@ -137,13 +174,30 @@ export function PinnedMessageRow({
</div>
)}
</div>
{message.content ? (
<div className={styles.content}>{message.content}</div>
) : !message.attachments || message.attachments.length === 0 ? (
{message.content && !hideText ? (
<div className={styles.content}>
<MessageContent
content={message.content}
customEmojis={customEmojiList}
/>
</div>
) : !message.content &&
(!message.attachments || message.attachments.length === 0) &&
embedUrls.length === 0 ? (
<div className={`${styles.content} ${styles.undecryptable}`}>
(no preview)
</div>
) : null}
{embedUrls.length > 0 && (
<div
className={styles.embeds}
onClick={(e) => e.stopPropagation()}
>
{embedUrls.map((url, i) => (
<LinkEmbed key={`${message.id}-embed-${i}`} url={url} />
))}
</div>
)}
{message.attachments && message.attachments.length > 0 && (
<div
className={styles.attachments}

12
packages/shared/src/components/channel/TwemojiImg.tsx
View File

@@ -30,11 +30,21 @@ export function TwemojiImg({ emoji, size = 22, className }: TwemojiImgProps) {
alt={emoji}
width={size}
height={size}
loading="lazy"
// No `loading="lazy"` — deferred decode of a 22×22 CDN image
// produces exactly the per-emoji reflow this app is tuned to
// avoid. Eager load lets the browser pipeline them naturally.
decoding="async"
draggable={false}
className={className}
style={{ display: 'inline-block', verticalAlign: 'middle' }}
onError={() => setBroken(true)}
onLoad={() => {
// Each emoji's decode can nudge line height by a fraction
// of a pixel (subpixel rounding), which the ResizeObserver
// sometimes misses. Fire the shared attachment-loaded event
// so Messages re-pins if the user is anchored to bottom.
window.dispatchEvent(new CustomEvent('brycord:attachment-loaded'));
}}
data-emoji-codepoint={emojiToCodepoint(emoji)}
/>
);

23
packages/shared/src/components/layout/MobileSetStatusSheet.tsx
View File

@@ -8,11 +8,12 @@
* subscribers update automatically once the mutation completes.
*/
import { useState } from 'react';
import { useMutation, useQuery } from 'convex/react';
import { useAction, useQuery } from 'convex/react';
import { Check, X } from '@phosphor-icons/react';
import { BottomSheet } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import type { Id } from '../../../../../convex/_generated/dataModel';
import { usePlatform } from '../../platform';
import styles from './MobileSetStatusSheet.module.css';
export type UiPresence = 'online' | 'idle' | 'dnd' | 'invisible';
@@ -59,7 +60,8 @@ export function MobileSetStatusSheet({ isOpen, onClose }: MobileSetStatusSheetPr
const allUsers = useQuery(api.auth.getPublicKeys) ?? [];
const me = allUsers.find((u) => u.id === userId);
const current = (me?.status ?? 'online') as UiPresence;
const updateStatus = useMutation(api.auth.updateStatus);
const { crypto } = usePlatform();
const updateStatus = useAction(api.authActions.updateStatus);
const [busy, setBusy] = useState<UiPresence | null>(null);
const handleSelect = async (next: UiPresence) => {
@@ -68,9 +70,24 @@ export function MobileSetStatusSheet({ isOpen, onClose }: MobileSetStatusSheetPr
onClose();
return;
}
const signingKey =
typeof sessionStorage !== 'undefined'
? sessionStorage.getItem('signingKey')
: null;
if (!signingKey) return;
setBusy(next);
try {
await updateStatus({ userId: userId as Id<'userProfiles'>, status: next });
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`updateStatus:${userId}:${next}:${authTimestamp}`,
);
await updateStatus({
userId: userId as Id<'userProfiles'>,
status: next,
authTimestamp,
authSignature,
});
onClose();
} catch (err) {
console.warn('Failed to set presence:', err);

26
packages/shared/src/components/layout/UserAreaProfilePopout.tsx
View File

@@ -17,7 +17,7 @@
*/
import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useMutation, useQuery } from 'convex/react';
import { useAction, useQuery } from 'convex/react';
import {
Circle,
Moon,
@@ -30,6 +30,7 @@ import {
} from '@phosphor-icons/react';
import { Avatar, Button } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import { usePlatform } from '../../platform';
import styles from './UserAreaProfilePopout.module.css';
type StatusId = 'online' | 'idle' | 'dnd' | 'invisible';
@@ -141,7 +142,8 @@ export function UserAreaProfilePopout({
typeof localStorage !== 'undefined' ? localStorage.getItem('userId') : null;
const allUsers = useQuery(api.auth.getPublicKeys) ?? [];
const me = allUsers.find((u) => u.id === userId);
const updateStatus = useMutation(api.auth.updateStatus);
const { crypto } = usePlatform();
const updateStatus = useAction(api.authActions.updateStatus);
// Close on click-outside / Escape.
useEffect(() => {
@@ -188,8 +190,26 @@ export function UserAreaProfilePopout({
};
const handleStatusSelect = async (status: StatusId) => {
const signingKey =
typeof sessionStorage !== 'undefined'
? sessionStorage.getItem('signingKey')
: null;
if (!signingKey) {
setStatusPickerOpen(false);
return;
}
try {
await updateStatus({ userId: userId as any, status });
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`updateStatus:${userId}:${status}:${authTimestamp}`,
);
await updateStatus({
userId: userId as any,
status,
authTimestamp,
authSignature,
});
} catch (err) {
console.error('Failed to update status:', err);
}

21
packages/shared/src/components/member/MemberListContainer.tsx
View File

@@ -1,8 +1,9 @@
import { useEffect, useState } from 'react';
import { useMutation, useQuery } from 'convex/react';
import { useAction, useMutation, useQuery } from 'convex/react';
import { Avatar, Button, Modal } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import type { Id } from '../../../../../convex/_generated/dataModel';
import { usePlatform } from '../../platform';
import { useIsMobile } from '../../hooks/useIsMobile';
import { useOnlineUsers } from '../../contexts/PresenceContext';
import { MobileMemberProfileSheet } from './MobileMemberProfileSheet';
@@ -122,7 +123,8 @@ export function MemberListContainer({ channelId, variant = 'panel' }: MemberList
setContextMenu({ x: e.clientX, y: e.clientY, member });
};
const setNickname = useMutation(api.auth.setNickname);
const setNickname = useAction(api.authActions.setNickname);
const { crypto } = usePlatform();
const openNicknameEditor = (member: MemberRow) => {
setNicknameTarget(member);
@@ -147,13 +149,28 @@ export function MemberListContainer({ channelId, variant = 'panel' }: MemberList
? localStorage.getItem('userId')
: null;
if (!localUserId) return;
const signingKey =
typeof sessionStorage !== 'undefined'
? sessionStorage.getItem('signingKey')
: null;
if (!signingKey) {
setNicknameError('Not signed in');
return;
}
setNicknameSaving(true);
setNicknameError(null);
try {
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`setNickname:${localUserId}:${nicknameTarget.userId}:${authTimestamp}`,
);
await setNickname({
actorUserId: localUserId as any,
targetUserId: nicknameTarget.userId as any,
displayName: nicknameDraft.trim(),
authTimestamp,
authSignature,
});
setNicknameTarget(null);
} catch (err: any) {

27
packages/shared/src/components/settings/UserSettingsModal.tsx
View File

@@ -1,4 +1,4 @@
import { useMutation, useQuery } from 'convex/react';
import { useAction, useMutation, useQuery } from 'convex/react';
import {
Bell,
Keyboard,
@@ -171,7 +171,30 @@ export function AccountTab() {
const userId = typeof localStorage !== 'undefined' ? localStorage.getItem('userId') : null;
const allUsers = useQuery(api.auth.getPublicKeys) ?? [];
const me = allUsers.find((u) => u.id === userId);
const updateProfile = useMutation(api.auth.updateProfile);
const { crypto } = usePlatform();
const updateProfileAction = useAction(api.authActions.updateProfile);
// Wraps the signed action so the three call sites below stay readable.
// Signs `updateProfile:${userId}:${authTimestamp}` with the session's
// Ed25519 key so the server can prove the caller controls `userId`.
const updateProfile = async (
patch: Record<string, unknown> & { userId: string },
) => {
const signingKey =
typeof sessionStorage !== 'undefined'
? sessionStorage.getItem('signingKey')
: null;
if (!signingKey) throw new Error('Not signed in');
const authTimestamp = Date.now();
const authSignature = await crypto.signMessage(
signingKey,
`updateProfile:${patch.userId}:${authTimestamp}`,
);
return updateProfileAction({
...patch,
authTimestamp,
authSignature,
} as any);
};
const generateUploadUrl = useMutation(api.files.generateUploadUrl);
const validateUpload = useMutation(api.files.validateUpload);

285
packages/shared/src/contexts/VoiceContext.jsx
View File

@@ -1,4 +1,4 @@
import React, { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { Room, RoomEvent, VideoPresets, ConnectionQuality, DisconnectReason } from 'livekit-client';
import { LiveKitRoom, RoomAudioRenderer } from '@livekit/components-react';
import { useQuery, useConvex } from 'convex/react';
@@ -99,13 +99,42 @@ export const VoiceProvider = ({ children }) => {
const convex = useConvex();
// Single source of truth for the signed-in user id. All the
// voice/presence effects below used to read localStorage
// directly — that worked but wasn't reactive, so a
// logout-then-login in the same tab could leave effects
// operating on a stale id until something else triggered a
// rerender. The `storage` and `brycord:auth-change` listeners
// keep this state in sync across tabs (the former) and
// within-tab login/logout (the latter, emitted by
// hooks/useLogout + the login page).
const [myUserId, setMyUserId] = useState(
typeof localStorage !== 'undefined' ? localStorage.getItem('userId') : null,
);
useEffect(() => {
if (typeof window === 'undefined') return;
const sync = () => {
setMyUserId(
typeof localStorage !== 'undefined'
? localStorage.getItem('userId')
: null,
);
};
window.addEventListener('storage', sync);
window.addEventListener('brycord:auth-change', sync);
return () => {
window.removeEventListener('storage', sync);
window.removeEventListener('brycord:auth-change', sync);
};
}, []);
// Stream watching state (lifted from VoiceStage so PiP can persist across navigation)
const [watchingStreamOf, setWatchingStreamOfRaw] = useState(null);
const setWatchingStreamOf = useCallback((identity) => {
setWatchingStreamOfRaw(identity);
// Sync to backend
const userId = localStorage.getItem('userId');
const userId = myUserId;
if (userId) {
convex.mutation(api.voiceState.setWatchingStream, {
userId,
@@ -120,7 +149,7 @@ export const VoiceProvider = ({ children }) => {
const clearWatchingStream = useCallback(() => {
setWatchingStreamOfRaw(null);
const userId = localStorage.getItem('userId');
const userId = myUserId;
if (userId) {
convex.mutation(api.voiceState.setWatchingStream, { userId }).catch(
e => console.error('Failed to clear watching stream:', e)
@@ -205,7 +234,7 @@ export const VoiceProvider = ({ children }) => {
const isPersonallyMuted = (userId) => personallyMutedUsers.has(userId);
const serverMute = async (targetUserId, isServerMuted) => {
const actorUserId = localStorage.getItem('userId');
const actorUserId = myUserId;
if (!actorUserId) return;
try {
await convex.mutation(api.voiceState.serverMute, { actorUserId, targetUserId, isServerMuted });
@@ -215,7 +244,7 @@ export const VoiceProvider = ({ children }) => {
};
const disconnectUser = async (targetUserId) => {
const actorUserId = localStorage.getItem('userId');
const actorUserId = myUserId;
if (!actorUserId) return;
try {
await convex.mutation(api.voiceState.disconnectUser, { actorUserId, targetUserId });
@@ -236,7 +265,6 @@ export const VoiceProvider = ({ children }) => {
const serverSettings = useQuery(api.serverSettings.get);
// Subscribe to own join sound URL for self-join playback
const myUserId = localStorage.getItem('userId');
const myJoinSoundUrl = useQuery(
api.auth.getMyJoinSoundUrl,
myUserId ? { userId: myUserId } : "skip"
@@ -248,7 +276,7 @@ export const VoiceProvider = ({ children }) => {
const isInAfkChannel = !!(activeChannelId && serverSettings?.afkChannelId === activeChannelId);
async function updateVoiceState(fields) {
const userId = localStorage.getItem('userId');
const userId = myUserId;
if (!userId || !activeChannelId) return;
try {
await convex.mutation(api.voiceState.updateState, { userId, ...fields });
@@ -280,12 +308,36 @@ export const VoiceProvider = ({ children }) => {
return;
}
const { token: lkToken } = await convex.action(api.voice.getToken, {
// Prove we control `userId` by signing the (userId, channelId,
// timestamp) tuple with the Ed25519 key decrypted at login.
// The server verifies with our public signing key before minting
// a LiveKit JWT, so voice rooms can't be joined by forging args.
const signingKey = sessionStorage.getItem('signingKey');
if (!signingKey) {
console.error('Missing signing key — cannot authorize voice join');
setConnectionState('error');
setActiveChannelId(null);
return;
}
const timestamp = Date.now();
const message = `voice-token:${userId}:${channelId}:${timestamp}`;
const signature = await platform.crypto.signMessage(signingKey, message);
const tokenResult = await convex.action(api.voice.getToken, {
channelId,
userId,
username: localStorage.getItem('username') || 'Unknown'
timestamp,
signature,
});
if ('error' in tokenResult) {
console.error('Voice token rejected:', tokenResult.error);
setConnectionState('error');
setActiveChannelId(null);
return;
}
const lkToken = tokenResult.token;
if (!lkToken) throw new Error('Failed to get token');
setToken(lkToken);
@@ -515,7 +567,7 @@ export const VoiceProvider = ({ children }) => {
// Heartbeat: send periodic heartbeat to prevent ghost voice states
useEffect(() => {
if (!activeChannelId) return;
const userId = localStorage.getItem('userId');
const userId = myUserId;
if (!userId) return;
const sendHeartbeat = () => {
@@ -530,10 +582,17 @@ export const VoiceProvider = ({ children }) => {
return () => clearInterval(interval);
}, [activeChannelId, convex]);
// Handle notification action buttons (Android foreground service)
// Handle notification action buttons (Android foreground service).
// Capacitor's plugin API has historically shifted between returning
// a listener handle synchronously and returning a Promise, so we
// normalize both shapes into the same cleanup code instead of
// leaving a silent no-op when neither matches.
useEffect(() => {
if (!voiceService) return;
const listener = voiceService.addNotificationActionListener((event) => {
let cancelled = false;
let resolvedHandle = null;
const handle = voiceService.addNotificationActionListener((event) => {
switch (event.action) {
case 'disconnect':
disconnectVoice();
@@ -546,17 +605,43 @@ export const VoiceProvider = ({ children }) => {
break;
}
});
if (handle && typeof handle.then === 'function') {
handle.then((l) => {
if (cancelled) {
l?.remove?.();
} else {
resolvedHandle = l;
}
}).catch(() => { /* nothing to clean up */ });
} else {
resolvedHandle = handle;
}
return () => {
if (listener && listener.remove) listener.remove();
else if (listener && typeof listener.then === 'function') {
listener.then(l => l?.remove?.());
cancelled = true;
try {
resolvedHandle?.remove?.();
} catch (e) {
console.warn('Failed to remove notification listener:', e);
}
};
}, [voiceService, activeChannelId]);
// Detect when another user moves us to a different voice channel
// Detect when another user moves us to a different voice channel.
//
// `connectToVoice` is a plain function (not useCallback), so listing
// it as a dep would re-run this effect on every render — an infinite
// reconnect loop. We stash the latest reference in a ref so the
// effect can call the freshest copy without triggering itself. The
// audit flagged the old setup for potentially using stale
// credentials if the move fired mid-render; the ref closes that gap.
const connectToVoiceRef = useRef(connectToVoice);
useEffect(() => {
connectToVoiceRef.current = connectToVoice;
});
useEffect(() => {
const myUserId = localStorage.getItem('userId');
if (!myUserId || !activeChannelId || isMovingRef.current) return;
// Find which channel the server says we're in
@@ -571,11 +656,12 @@ export const VoiceProvider = ({ children }) => {
// If server says we're in a different channel, reconnect
if (serverChannelId && serverChannelId !== activeChannelId) {
isMovingRef.current = true;
const currentRoom = room;
(async () => {
try {
const channel = await convex.query(api.channels.get, { id: serverChannelId });
if (room) await room.disconnect();
await connectToVoice(serverChannelId, channel?.name || 'Voice', myUserId);
if (currentRoom) await currentRoom.disconnect();
await connectToVoiceRef.current(serverChannelId, channel?.name || 'Voice', myUserId);
} catch (e) {
console.error('Failed to reconnect after move:', e);
} finally {
@@ -583,18 +669,17 @@ export const VoiceProvider = ({ children }) => {
}
})();
}
}, [voiceStates, activeChannelId]);
}, [voiceStates, activeChannelId, room, convex, myUserId]);
// Enforce server mute: force-disable mic when server muted, restore when lifted
useEffect(() => {
const myUserId = localStorage.getItem('userId');
if (!myUserId || !room) return;
if (isServerMuted(myUserId)) {
room.localParticipant.setMicrophoneEnabled(false);
} else if (!isMuted && !isDeafened) {
room.localParticipant.setMicrophoneEnabled(true);
}
}, [voiceStates, room]);
}, [voiceStates, room, myUserId]);
// Re-apply personal mutes/volumes when room or participants change
useEffect(() => {
@@ -637,12 +722,25 @@ export const VoiceProvider = ({ children }) => {
}
if (idleSeconds >= afkTimeout) {
const userId = localStorage.getItem('userId');
const userId = myUserId;
if (!userId) return;
// On Capacitor, also set user status to idle
if (isCapacitor) {
await convex.mutation(api.auth.updateStatus, { userId, status: 'idle' });
const signingKey = sessionStorage.getItem('signingKey');
if (signingKey) {
const authTimestamp = Date.now();
const authSignature = await platform.crypto.signMessage(
signingKey,
`updateStatus:${userId}:idle:${authTimestamp}`,
);
await convex.action(api.authActions.updateStatus, {
userId,
status: 'idle',
authTimestamp,
authSignature,
});
}
}
await convex.mutation(api.voiceState.afkMove, {
@@ -670,7 +768,7 @@ export const VoiceProvider = ({ children }) => {
return;
}
const selfId = localStorage.getItem('userId');
const selfId = myUserId;
const channelUsers = voiceStates[activeChannelId] || [];
const currentUserIds = new Set(channelUsers.map(u => u.userId));
@@ -702,7 +800,7 @@ export const VoiceProvider = ({ children }) => {
}
prevChannelUsersRef.current = currentUserIds;
}, [voiceStates, activeChannelId]);
}, [voiceStates, activeChannelId, myUserId]);
// Manage screen share subscriptions — only subscribe when actively watching
useEffect(() => {
@@ -794,7 +892,6 @@ export const VoiceProvider = ({ children }) => {
return;
}
const myUserId = localStorage.getItem('userId');
// Collect all users currently watching the same stream
const currentViewers = new Set();
for (const users of Object.values(voiceStates)) {
@@ -831,7 +928,7 @@ export const VoiceProvider = ({ children }) => {
}
prevViewersRef.current = currentViewers;
}, [voiceStates, watchingStreamOf]);
}, [voiceStates, watchingStreamOf, myUserId]);
// Detect screen-share publications starting / stopping across the
// active voice channel (including the local user) and play a
@@ -884,29 +981,54 @@ export const VoiceProvider = ({ children }) => {
};
const toggleMute = async () => {
const myUserId = localStorage.getItem('userId');
// Block unmute if server muted or in AFK channel
if (isMuted && myUserId && isServerMuted(myUserId)) return;
if (isMuted && isInAfkChannel) return;
const nextState = !isMuted;
// Flip LiveKit first. If this rejects we bail before committing any
// UI state — otherwise the user sees "muted" while their mic is
// still publishing to everyone in the room (a privacy leak, not
// just a UX nit).
if (room) {
try {
await room.localParticipant.setMicrophoneEnabled(!nextState);
} catch (e) {
console.error('Failed to toggle microphone:', e);
return;
}
}
setIsMuted(nextState);
playSound(nextState ? 'mute' : 'unmute');
voiceService?.updateNotification({ isMuted: nextState });
if (room) {
room.localParticipant.setMicrophoneEnabled(!nextState);
}
try {
await updateVoiceState({ isMuted: nextState });
} catch (e) {
// LiveKit is already in the right state, so audio is safe;
// the server's voice-states row is just stale. Other clients
// will pick up the correct value from our next successful
// mutation or heartbeat. Log and move on.
console.error('Failed to sync mute state to server:', e);
}
};
const toggleDeafen = async () => {
const nextState = !isDeafened;
if (room && !isMuted) {
try {
await room.localParticipant.setMicrophoneEnabled(!nextState);
} catch (e) {
console.error('Failed to toggle microphone for deafen:', e);
return;
}
}
setIsDeafened(nextState);
playSound(nextState ? 'deafen' : 'undeafen');
voiceService?.updateNotification({ isDeafened: nextState });
if (room && !isMuted) {
room.localParticipant.setMicrophoneEnabled(!nextState);
}
try {
await updateVoiceState({ isDeafened: nextState });
} catch (e) {
console.error('Failed to sync deafen state to server:', e);
}
};
// Actually flip the LiveKit screen-share publication on/off. The
@@ -917,15 +1039,32 @@ export const VoiceProvider = ({ children }) => {
// resulting track, and tears it down on false.
const setScreenSharing = async (active) => {
if (!room) return;
// Snapshot the screen-share publications *before* disabling so we
// can explicitly stop the underlying MediaStreamTracks afterwards.
// LiveKit's `setScreenShareEnabled(false)` unpublishes but doesn't
// always fully release the getDisplayMedia tracks before returning,
// which caused intermittent "NotAllowedError: Permission denied"
// when the user re-shared immediately.
const toStop = [];
if (!active) {
const pubs = room.localParticipant?.trackPublications;
if (pubs?.forEach) {
pubs.forEach((pub) => {
const src = pub.source ?? pub.track?.source;
if (src === 'screen_share' || src === 'screen_share_audio') {
if (pub.track?.mediaStreamTrack) {
toStop.push(pub.track.mediaStreamTrack);
}
}
});
}
}
try {
await room.localParticipant.setScreenShareEnabled(active, {
audio: true,
});
} catch (e) {
console.warn('Failed to toggle screen share:', e);
// User cancelled the picker or permission was denied —
// keep local state in sync with whatever actually happened
// on the LiveKit side.
const published = !!room.localParticipant.getTrackPublication?.(
'screen_share',
);
@@ -933,6 +1072,11 @@ export const VoiceProvider = ({ children }) => {
await updateVoiceState({ isScreenSharing: published });
return;
}
if (!active) {
for (const mst of toStop) {
try { mst.stop(); } catch { /* already stopped */ }
}
}
setIsScreenSharingLocal(active);
await updateVoiceState({ isScreenSharing: active });
};
@@ -1054,8 +1198,16 @@ export const VoiceProvider = ({ children }) => {
}, [room, stopRecording]);
return (
<VoiceContext.Provider value={{
// Stable callback so the Provider value doesn't churn on a fresh arrow
// function every render.
const clearRecordingError = useCallback(() => setRecordingError(null), []);
// Memoize the provider value so components that subscribe via
// `useVoice()` don't re-render on every parent render. Inline object
// literals caused every voice-aware component (sidebar, chat header,
// user tiles, voice bar) to re-render whenever *anything* upstream
// changed — a huge perf hit during active voice sessions.
const value = useMemo(() => ({
activeChannelId,
activeChannelName,
connectionState,
@@ -1093,15 +1245,62 @@ export const VoiceProvider = ({ children }) => {
isReceivingScreenShareAudio,
isReconnecting,
connectionQualities,
// Voice recording
isRecording,
recordingStartedAt,
recordingSessionId,
recordingError,
startRecording,
stopRecording,
clearRecordingError: () => setRecordingError(null),
}}>
clearRecordingError,
}), [
activeChannelId,
activeChannelName,
connectionState,
connectToVoice,
disconnectVoice,
room,
token,
voiceStates,
activeSpeakers,
isMuted,
isDeafened,
toggleMute,
toggleDeafen,
isScreenSharing,
setScreenSharing,
isCameraOn,
setCamera,
toggleCamera,
personallyMutedUsers,
togglePersonalMute,
isPersonallyMuted,
userVolumes,
setUserVolume,
getUserVolume,
serverMute,
disconnectUser,
isServerMuted,
isInAfkChannel,
serverSettings,
watchingStreamOf,
setWatchingStreamOf,
switchDevice,
globalOutputVolume,
setGlobalOutputVolume,
isReceivingScreenShareAudio,
isReconnecting,
connectionQualities,
isRecording,
recordingStartedAt,
recordingSessionId,
recordingError,
startRecording,
stopRecording,
clearRecordingError,
]);
return (
<VoiceContext.Provider value={value}>
{children}
{room && (
<LiveKitRoom

11
packages/shared/src/hooks/useLogout.ts
View File

@@ -1,5 +1,6 @@
import { useCallback } from 'react';
import { usePlatform } from '../platform';
import { clearDecryptionCache } from '../components/channel/Messages';
/**
* useLogout — wipes all client-side auth state and hard-reloads the
@@ -16,6 +17,16 @@ export function useLogout(): () => Promise<void> {
const { session } = usePlatform();
return useCallback(async () => {
// Flush in-memory plaintext before anything else so a failure in a
// later step (e.g. platform session clear throws, reload never
// fires) still wipes decrypted message content from this tab's
// heap. The hard reload below normally covers this already.
try {
clearDecryptionCache();
} catch (err) {
console.warn('Failed to clear decryption cache:', err);
}
try {
await session?.clear?.();
} catch (err) {

6
packages/shared/src/platform/types.js
View File

@@ -5,9 +5,9 @@
* @property {(data: string) => Promise<string>} sha256 - Returns hex hash
* @property {(privateKey: string, message: string) => Promise<string>} signMessage
* @property {(publicKey: string, message: string, signature: string) => Promise<boolean>} verifySignature
* @property {(password: string, salt: string) => Promise<{dek: string, dak: string}>} deriveAuthKeys
* @property {(data: string, key: string) => Promise<{content: string, iv: string, tag: string}>} encryptData
* @property {(encryptedData: string, key: string, iv: string, tag: string, options?: object) => Promise<string>} decryptData
* @property {(password: string, salt: string) => Promise<{dek: Uint8Array, dak: string}>} deriveAuthKeys - `dak` is a hex string, `dek` is raw bytes (Uint8Array on web, Buffer on Electron — both accepted by encryptData)
* @property {(data: string, key: string | Uint8Array) => Promise<{content: string, iv: string, tag: string}>} encryptData
* @property {(encryptedData: string, key: string | Uint8Array, iv: string, tag: string, options?: object) => Promise<string>} decryptData
* @property {(items: Array) => Promise<Array>} decryptBatch
* @property {(items: Array) => Promise<Array>} verifyBatch
* @property {(publicKey: string, data: string) => Promise<string>} publicEncrypt

33
packages/shared/src/utils/messageUrls.ts Normal file
View File

@@ -0,0 +1,33 @@
/**
* Message URL helpers shared between the live chat row
* (`MessageGroup`) and the confirmation-modal preview card
* (`PinnedMessageRow`'s `showEmbeds` mode). Keeping them here means
* the "which URLs count as embed-worthy" rule stays consistent
* wherever a message is rendered.
*/
const URL_REGEX = /https?:\/\/[^\s<>"']+/gi;
/** All distinct http(s) URLs in `text`, with trailing punctuation
* like `),.;!?` stripped — those almost never belong to the URL
* but commonly butt up against one in prose. */
export function extractUrls(text: string): string[] {
const matches = text.match(URL_REGEX) ?? [];
const cleaned = matches.map((m) => m.replace(/[),.;!?]+$/, ''));
return Array.from(new Set(cleaned));
}
/** True when a message body is entirely made up of one or more GIF
* URLs plus whitespace — i.e. the user posted a GIF from the
* picker and there's nothing worth showing as text. Callers hide
* the text block in that case so only the embed renders. */
export function isGifOnlyContent(text: string): boolean {
const urls = extractUrls(text);
if (urls.length === 0) return false;
if (!urls.every((u) => /\.gif(\?|#|$)/i.test(u))) return false;
let remainder = text;
for (const u of urls) {
remainder = remainder.split(u).join('');
}
return remainder.trim().length === 0;
}

91
packages/shared/src/utils/userPreferences.js
View File

@@ -1,27 +1,90 @@
// In-memory preferences cache per userId. Sitting in front of localStorage
// prevents the read-modify-write race that used to lose settings when two
// rapid calls both read the same stale blob and one overwrote the other.
// Writes now merge into this cache and flush synchronously to localStorage.
const memoryCache = new Map();
function storageKey(userId) {
return `userPrefs_${userId}`;
}
function loadFromStorage(userId) {
try {
const raw = localStorage.getItem(storageKey(userId));
if (!raw) return {};
const parsed = JSON.parse(raw);
return parsed && typeof parsed === 'object' ? parsed : {};
} catch {
return {};
}
}
function getPrefs(userId) {
const cached = memoryCache.get(userId);
if (cached) return cached;
const fresh = loadFromStorage(userId);
memoryCache.set(userId, fresh);
return fresh;
}
export function getUserPref(userId, key, defaultValue) {
if (!userId) return defaultValue;
try {
const raw = localStorage.getItem(`userPrefs_${userId}`);
if (!raw) return defaultValue;
const prefs = JSON.parse(raw);
const prefs = getPrefs(userId);
return prefs[key] !== undefined ? prefs[key] : defaultValue;
} catch {
return defaultValue;
}
}
export function setUserPref(userId, key, value, settings) {
if (!userId) return;
try {
const raw = localStorage.getItem(`userPrefs_${userId}`);
const prefs = raw ? JSON.parse(raw) : {};
// Mutate the in-memory copy first so a concurrent setUserPref reads
// our update instead of the stale localStorage blob. Flushing to
// localStorage happens after so a QuotaExceededError doesn't roll
// back the in-memory state.
const prefs = getPrefs(userId);
prefs[key] = value;
localStorage.setItem(`userPrefs_${userId}`, JSON.stringify(prefs));
// Also persist to disk via platform settings (fire-and-forget)
try {
localStorage.setItem(storageKey(userId), JSON.stringify(prefs));
} catch {
// Quota / serialization failure — the in-memory cache still has
// the new value so this session stays consistent. Settings persist
// fallback handles disk.
}
if (settings) {
settings.set(`userPrefs_${userId}`, prefs);
// Fire-and-forget disk persistence via platform settings. Clone
// the blob so the platform layer can't mutate our cached ref.
// `settings.set` can reject on quota overflow — swallow here so
// an unhandled rejection doesn't pollute the console, but let the
// localStorage write above still take effect.
try {
const p = settings.set(storageKey(userId), { ...prefs });
if (p && typeof p.catch === 'function') {
p.catch(() => { /* platform persistence is best-effort */ });
}
} catch {
// Silently fail on corrupt data or full storage
/* platform settings sync failure is non-fatal */
}
}
}
// Cross-tab sync: another tab writing to the same userPrefs_<userId>
// fires a `storage` event here. Drop the stale cache entry so the next
// read picks up the freshly-written value.
if (typeof window !== 'undefined') {
window.addEventListener('storage', (e) => {
if (!e.key || !e.key.startsWith('userPrefs_')) return;
const userId = e.key.slice('userPrefs_'.length);
if (e.newValue === null) {
memoryCache.delete(userId);
return;
}
try {
const parsed = JSON.parse(e.newValue);
if (parsed && typeof parsed === 'object') {
memoryCache.set(userId, parsed);
} else {
memoryCache.delete(userId);
}
} catch {
memoryCache.delete(userId);
}
});
}