byGalax
1954 lines
76 KiB
TypeScript
1954 lines
76 KiB
TypeScript
import { parseMessagePayload, pinMessage, unpinMessage } from '@chat-app/shared/chat';
|
||
import { extractErrorCode } from '@chat-app/shared/i18n';
|
||
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { useParams } from 'react-router-dom';
|
||
import { MessageList, type MessageListHandle } from '../components/MessageList';
|
||
|
||
import { ComposerActionsMenu } from '../components/ComposerActionsMenu';
|
||
import { ConversationHeader } from '../components/ConversationHeader';
|
||
import { EmojiPicker } from '../components/EmojiPicker';
|
||
import { EmptyState } from '../components/EmptyState';
|
||
import { ForwardDialog } from '../components/ForwardDialog';
|
||
import { GifPicker } from '../components/GifPicker';
|
||
import { GroupInfoPanel } from '../components/GroupInfoPanel';
|
||
import {
|
||
AlertIcon,
|
||
ArrowRightIcon,
|
||
ChevronDownIcon,
|
||
ChevronUpIcon,
|
||
EyeIcon,
|
||
EyeOffIcon,
|
||
PencilIcon,
|
||
PlusIcon,
|
||
ReplyIcon,
|
||
SearchIcon,
|
||
SendIcon,
|
||
SmileIcon,
|
||
SpinnerIcon,
|
||
XIcon,
|
||
} from '../components/icons';
|
||
const ImageAnnotator = lazy(() =>
|
||
import('../components/ImageAnnotator').then((m) => ({ default: m.ImageAnnotator })),
|
||
);
|
||
import { InCallPanel } from '../components/InCallPanel';
|
||
import { IncomingCallPanel } from '../components/IncomingCallPanel';
|
||
import { CallPreviewPanel } from '../components/CallPreviewPanel';
|
||
import { MediaFilesDrawer } from '../components/MediaFilesDrawer';
|
||
import { MentionAutocomplete } from '../components/MentionAutocomplete';
|
||
import { MessageBubble, type QuotedRef } from '../components/MessageBubble';
|
||
import type { AggregatedReaction } from '../lib/useMessageReactions';
|
||
import { PinnedMessagesPanel } from '../components/PinnedMessagesPanel';
|
||
import { PollComposerDialog } from '../components/PollComposerDialog';
|
||
import { UserProfilePopover } from '../components/UserProfilePopover';
|
||
import { TypingIndicator } from '../components/TypingIndicator';
|
||
import { VoiceRecorder } from '../components/VoiceRecorder';
|
||
import type { DecryptedMessage } from '@chat-app/shared/chat';
|
||
import { useAuth } from '../context/AuthContext';
|
||
import { useCall } from '../context/CallContext';
|
||
import { useConversationsContext } from '../context/ConversationsContext';
|
||
import {
|
||
collectConversationAttachments,
|
||
createPollPayload,
|
||
createWhiteboardPayload,
|
||
createWatchTogetherPayload,
|
||
createGamePayload,
|
||
} from '../lib/conversationFeatures';
|
||
const WhiteboardModal = lazy(() =>
|
||
import('../components/WhiteboardModal').then((m) => ({ default: m.WhiteboardModal })),
|
||
);
|
||
const WatchTogetherModal = lazy(() =>
|
||
import('../components/WatchTogetherModal').then((m) => ({ default: m.WatchTogetherModal })),
|
||
);
|
||
const GameModal = lazy(() =>
|
||
import('../components/GameModal').then((m) => ({ default: m.GameModal })),
|
||
);
|
||
import { createWhiteboard, createWatchSession, parseYouTubeUrl, createGame, type GameType } from '@chat-app/shared/chat';
|
||
import { compressImages } from '../lib/imageCompress';
|
||
import { ensureInstallId } from '../lib/installId';
|
||
import { searchCachedMessages } from '../lib/messageCache';
|
||
import { supabase } from '../lib/supabase';
|
||
import { type GifResult } from '../lib/tenor';
|
||
import type { OutboxItem } from '../lib/messageOutbox';
|
||
import { useConversationMessages } from '../lib/useConversationMessages';
|
||
import { useMessageReactions } from '../lib/useMessageReactions';
|
||
import { useGroupReceipts } from '../lib/useGroupReceipts';
|
||
import { markDelivered, useMessageDeliveries } from '../lib/useMessageDeliveries';
|
||
import { markRead as markMessagesReadRemote, useMessageReads } from '../lib/useMessageReads';
|
||
import { usePeerPresence } from '../lib/usePeerPresence';
|
||
import { usePinnedMessages } from '../lib/usePinnedMessages';
|
||
import { useTypingChannel } from '../lib/useTypingChannel';
|
||
import { clearDraft, getDraftSync, setDraft } from '../lib/composerDraftStore';
|
||
|
||
// Discriminated union for rows inside the virtualized message list. Keeping
|
||
// pending bubbles and the "load older" tile inside the same Virtuoso
|
||
// instance means scroll-to-bottom / followOutput stay coherent across both
|
||
// (we don't need a sibling scroll container for pending items).
|
||
export type VirtuosoRow =
|
||
| { kind: 'loader'; key: string }
|
||
| { kind: 'message'; key: string; message: DecryptedMessage; idx: number }
|
||
| { kind: 'pending'; key: string; item: OutboxItem };
|
||
|
||
// Stable empty-reactions sentinel. We pass this when a message has no
|
||
// reactions instead of `[]` literal — a fresh array per render would defeat
|
||
// `React.memo` on `MessageBubble` since the `reactions` prop reference would
|
||
// change on every parent render.
|
||
const EMPTY_REACTIONS: AggregatedReaction[] = [];
|
||
|
||
// Per-conversation scroll memory. Module-scoped so it survives the
|
||
// per-id remount of ConversationPage (see `ConversationRoute` in
|
||
// App.tsx). Session-only (lost on reload, like Discord). The
|
||
// `stickToBottom` flag is preserved alongside the topmost-visible row
|
||
// index so a chat the user left at the bottom keeps auto-following new
|
||
// messages when they return; a chat scrolled up returns to roughly the
|
||
// same row the user was reading.
|
||
//
|
||
// We track the topmost-visible row index rather than a pixel `scrollTop`
|
||
// because `react-virtuoso` virtualizes the list — the underlying scroll
|
||
// element's pixel offset depends on dynamically-measured row heights and
|
||
// is not stable across remounts. Using a row index restores the user's
|
||
// reading position even if some rows above re-render at different heights.
|
||
const scrollPositions = new Map<string, { topmostIndex: number; stickToBottom: boolean }>();
|
||
|
||
/** Pending composer attachment: the raw File plus the per-attachment
|
||
* view-once flag the user can toggle from the thumb hover button (P7.T4).
|
||
* Lives only in composer state — the flag is forwarded into
|
||
* `message_attachments.view_once` per row when the message is sent. */
|
||
interface PendingAttachment {
|
||
file: File;
|
||
viewOnce: boolean;
|
||
}
|
||
|
||
export function ConversationPage() {
|
||
const { t } = useTranslation(['app', 'errors']);
|
||
const { id } = useParams<{ id: string }>();
|
||
const { session } = useAuth();
|
||
const { conversations, setActiveConversation, markRead, unread } = useConversationsContext();
|
||
|
||
const conversation = useMemo(
|
||
() => conversations.find((c) => c.id === id) ?? null,
|
||
[conversations, id],
|
||
);
|
||
const peerId = conversation?.peer?.userId;
|
||
const peerPresence = usePeerPresence(peerId);
|
||
|
||
const { messages, loading, error, send, pending, retryPending, cancelPending } =
|
||
useConversationMessages({
|
||
conversationId: id,
|
||
userId: session?.user.id,
|
||
deviceId: ensureInstallId(),
|
||
});
|
||
const messageIds = useMemo(() => messages.map((m) => m.id), [messages]);
|
||
const {
|
||
byMessage: reactionsByMessage,
|
||
toggle: toggleReaction,
|
||
voteExclusive: votePoll,
|
||
ready: reactionsReady,
|
||
} = useMessageReactions(messageIds, session?.user.id);
|
||
|
||
// Deferred-reveal gate for MessageList: keep the list hidden until messages
|
||
// AND their reactions (the main post-paint height changer) are loaded, so the
|
||
// chat opens already-stable instead of flickering through the load cascade.
|
||
// A 300 ms max-timeout ensures a slow/empty reactions fetch never hangs it.
|
||
const [revealTimedOut, setRevealTimedOut] = useState(false);
|
||
useEffect(() => {
|
||
setRevealTimedOut(false);
|
||
if (!id || loading || messages.length === 0) return;
|
||
const tmo = window.setTimeout(() => setRevealTimedOut(true), 300);
|
||
return () => window.clearTimeout(tmo);
|
||
}, [id, loading, messages.length]);
|
||
const listReady = !loading && messages.length > 0 && (reactionsReady || revealTimedOut);
|
||
|
||
const myId = session?.user.id;
|
||
|
||
const ownMessageIds = useMemo(
|
||
() => messages.filter((m) => m.senderId === myId).map((m) => m.id),
|
||
[messages, myId],
|
||
);
|
||
const { peerReadSet } = useMessageReads(ownMessageIds, peerId);
|
||
const { peerDeliveredSet } = useMessageDeliveries(ownMessageIds, peerId);
|
||
|
||
const isGroup = conversation?.type === 'group';
|
||
const { deliveredByMessage: groupDelivered, readByMessage: groupRead } = useGroupReceipts(
|
||
ownMessageIds,
|
||
myId,
|
||
!!isGroup,
|
||
);
|
||
const groupRecipientCount = useMemo(() => {
|
||
if (!isGroup || !conversation) return 0;
|
||
return conversation.members.filter((m) => m.userId !== myId).length;
|
||
}, [isGroup, conversation, myId]);
|
||
|
||
const deliveredTrackedRef = useRef<Set<string>>(new Set());
|
||
useEffect(() => {
|
||
if (!myId || messages.length === 0) return;
|
||
const toMark: string[] = [];
|
||
for (const m of messages) {
|
||
if (m.senderId === myId) continue;
|
||
if (deliveredTrackedRef.current.has(m.id)) continue;
|
||
deliveredTrackedRef.current.add(m.id);
|
||
toMark.push(m.id);
|
||
}
|
||
if (toMark.length > 0) {
|
||
void markDelivered(toMark).catch((err: unknown) => {
|
||
console.warn('markDelivered failed', err);
|
||
});
|
||
}
|
||
}, [messages, myId]);
|
||
|
||
const lastSeenMessageId = useMemo(() => {
|
||
for (let i = messages.length - 1; i >= 0; i--) {
|
||
const m = messages[i];
|
||
if (m && m.senderId === myId && peerReadSet.has(m.id)) return m.id;
|
||
}
|
||
return null;
|
||
}, [messages, peerReadSet, myId]);
|
||
|
||
const { typingUserIds, notifyTyping, notifyStopTyping } = useTypingChannel(id, myId);
|
||
|
||
useEffect(() => {
|
||
if (!id || messages.length === 0 || !myId) return;
|
||
const incoming = messages.filter((m) => m.senderId !== myId).map((m) => m.id);
|
||
if (incoming.length === 0) return;
|
||
void markMessagesReadRemote(incoming).catch((err: unknown) => {
|
||
console.error('markMessagesRead failed', err);
|
||
});
|
||
}, [id, messages, myId]);
|
||
|
||
const [text, setText] = useState<string>(() => {
|
||
if (!id) return '';
|
||
return getDraftSync(id)?.text ?? '';
|
||
});
|
||
const [sending, setSending] = useState(false);
|
||
const [sendError, setSendError] = useState<string | null>(null);
|
||
const [stickToBottom, setStickToBottom] = useState(true);
|
||
// Pending composer attachments — each carries its own view-once flag so
|
||
// the user can mark individual images "burn after viewing" via the hover
|
||
// toggle on the thumb (P7.T4). Non-image attachments keep viewOnce=false
|
||
// but the field stays on the object so the shape is uniform.
|
||
const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
|
||
const [annotatingIndex, setAnnotatingIndex] = useState<number | null>(null);
|
||
const [infoPanelOpen, setInfoPanelOpen] = useState(false);
|
||
const [mediaDrawerOpen, setMediaDrawerOpen] = useState(false);
|
||
const [pollDialogOpen, setPollDialogOpen] = useState(false);
|
||
const [pollSending, setPollSending] = useState(false);
|
||
const [openWhiteboardId, setOpenWhiteboardId] = useState<string | null>(null);
|
||
const [creatingWhiteboard, setCreatingWhiteboard] = useState(false);
|
||
const [openWatchSessionId, setOpenWatchSessionId] = useState<string | null>(null);
|
||
const [watchDialogOpen, setWatchDialogOpen] = useState(false);
|
||
const [watchUrl, setWatchUrl] = useState('');
|
||
const [watchError, setWatchError] = useState<string | null>(null);
|
||
const [watchCreating, setWatchCreating] = useState(false);
|
||
const [openGameId, setOpenGameId] = useState<string | null>(null);
|
||
const [gameDialogOpen, setGameDialogOpen] = useState(false);
|
||
const [gameError, setGameError] = useState<string | null>(null);
|
||
const [gameCreating, setGameCreating] = useState(false);
|
||
const [pollError, setPollError] = useState<string | null>(null);
|
||
const [replyTo, setReplyTo] = useState<DecryptedMessage | null>(null);
|
||
const [forwardTarget, setForwardTarget] = useState<DecryptedMessage | null>(null);
|
||
const [searchOpen, setSearchOpen] = useState(false);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [searchIdx, setSearchIdx] = useState(0);
|
||
const [searchSenderId, setSearchSenderId] = useState<string>('');
|
||
const [searchAttachmentsOnly, setSearchAttachmentsOnly] = useState(false);
|
||
const [searchDateFrom, setSearchDateFrom] = useState<string>('');
|
||
const [searchDateTo, setSearchDateTo] = useState<string>('');
|
||
const [highlightedId, setHighlightedId] = useState<string | null>(null);
|
||
const [displayCount, setDisplayCount] = useState<number>(150);
|
||
const [isDraggingFile, setIsDraggingFile] = useState(false);
|
||
const [firstUnreadId, setFirstUnreadId] = useState<string | null>(null);
|
||
const [firstUnreadJumpDismissed, setFirstUnreadJumpDismissed] = useState(false);
|
||
const [newMessagesWhileAway, setNewMessagesWhileAway] = useState(0);
|
||
const firstUnreadComputedRef = useRef<boolean>(false);
|
||
const previousMessageIdsRef = useRef<Set<string>>(new Set());
|
||
const [profilePopover, setProfilePopover] = useState<{
|
||
userId: string;
|
||
x: number;
|
||
y: number;
|
||
} | null>(null);
|
||
const [mentionState, setMentionState] = useState<{ query: string; start: number } | null>(null);
|
||
const [emojiOpen, setEmojiOpen] = useState(false);
|
||
const [gifPickerOpen, setGifPickerOpen] = useState(false);
|
||
const [actionsMenuOpen, setActionsMenuOpen] = useState(false);
|
||
const actionsMenuAnchorRef = useRef<HTMLButtonElement>(null);
|
||
const { pins, applyOptimisticPin, applyOptimisticUnpin, restorePins } = usePinnedMessages(id);
|
||
const [pinnedPanelOpen, setPinnedPanelOpen] = useState(false);
|
||
const pinnedIds = useMemo(() => new Set(pins.map((p) => p.messageId)), [pins]);
|
||
|
||
// Optimistic pin/unpin: flip the local list synchronously so the pin badge
|
||
// / panel updates on the same frame as the click. Realtime echo via
|
||
// usePinnedMessages will refetch and reconcile (no-op since the optimistic
|
||
// row matches the server). On error we restore the snapshot so the badge
|
||
// doesn't lie about persisted state.
|
||
const handleTogglePin = useCallback(
|
||
async (messageId: string) => {
|
||
if (!id || !myId) return;
|
||
const wasPinned = pinnedIds.has(messageId);
|
||
const snapshot = wasPinned
|
||
? applyOptimisticUnpin(messageId)
|
||
: applyOptimisticPin(messageId, myId);
|
||
try {
|
||
if (wasPinned) {
|
||
await unpinMessage(supabase, id, messageId);
|
||
} else {
|
||
await pinMessage(supabase, id, messageId, myId);
|
||
}
|
||
} catch (err) {
|
||
restorePins(snapshot);
|
||
console.warn('pin toggle failed', err);
|
||
}
|
||
},
|
||
[id, myId, pinnedIds, applyOptimisticPin, applyOptimisticUnpin, restorePins],
|
||
);
|
||
|
||
const handleGifPick = useCallback(
|
||
async (gif: GifResult) => {
|
||
try {
|
||
// Download the GIF bytes once and feed them into the existing
|
||
// image-attachment pipeline so the result is end-to-end-encrypted
|
||
// like any normal image.
|
||
const res = await fetch(gif.url);
|
||
const blob = await res.blob();
|
||
const file = new File([blob], `tenor-${gif.id}.gif`, { type: 'image/gif' });
|
||
await send('', [file], null);
|
||
} catch (err) {
|
||
console.warn('GIF send failed', err);
|
||
}
|
||
},
|
||
[send],
|
||
);
|
||
const listRef = useRef<MessageListHandle>(null);
|
||
const topmostIndexRef = useRef<number>(0);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const composerRef = useRef<HTMLTextAreaElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (!id) return;
|
||
const draft = getDraftSync(id);
|
||
const savedReplyToId = draft?.replyToId ?? null;
|
||
if (!savedReplyToId) return;
|
||
if (replyTo?.id === savedReplyToId) return;
|
||
const match = messages.find((m) => m.id === savedReplyToId);
|
||
if (match) setReplyTo(match);
|
||
}, [id, messages, replyTo?.id]);
|
||
|
||
useEffect(() => {
|
||
if (!id) return;
|
||
setDraft(id, { text, replyToId: replyTo?.id ?? null });
|
||
}, [id, text, replyTo?.id]);
|
||
|
||
useEffect(() => {
|
||
if (firstUnreadComputedRef.current) return;
|
||
if (!id || messages.length === 0) return;
|
||
const count = unread[id] ?? 0;
|
||
firstUnreadComputedRef.current = true;
|
||
if (count === 0 || count > messages.length) {
|
||
setFirstUnreadId(null);
|
||
return;
|
||
}
|
||
const boundary = messages[messages.length - count];
|
||
setFirstUnreadId(boundary ? boundary.id : null);
|
||
}, [id, messages, unread]);
|
||
|
||
useEffect(() => {
|
||
const previous = previousMessageIdsRef.current;
|
||
if (previous.size > 0 && !stickToBottom) {
|
||
const addedIncoming = messages.filter(
|
||
(message) => !previous.has(message.id) && message.senderId !== myId,
|
||
).length;
|
||
if (addedIncoming > 0) {
|
||
setNewMessagesWhileAway((count) => count + addedIncoming);
|
||
}
|
||
}
|
||
previousMessageIdsRef.current = new Set(messages.map((message) => message.id));
|
||
}, [messages, myId, stickToBottom]);
|
||
|
||
// Replaces the previous IntersectionObserver-on-sentinel pattern: Virtuoso
|
||
// calls `startReached` when the user scrolls near the first row of the
|
||
// virtualized list. We bump `displayCount` the same way the old observer
|
||
// did. Wrapped in useCallback so Virtuoso doesn't tear down its scroll
|
||
// observer on every parent re-render.
|
||
const handleStartReached = useCallback(() => {
|
||
setDisplayCount((n) => {
|
||
if (n >= messages.length) return n;
|
||
return Math.min(messages.length, n * 2);
|
||
});
|
||
}, [messages.length]);
|
||
|
||
const messageById = useMemo(() => {
|
||
const m = new Map<string, DecryptedMessage>();
|
||
for (const msg of messages) m.set(msg.id, msg);
|
||
return m;
|
||
}, [messages]);
|
||
|
||
const attachmentIndex = useMemo(() => collectConversationAttachments(messages), [messages]);
|
||
|
||
const senderNameFor = useCallback(
|
||
(senderId: string): string => {
|
||
if (senderId === myId) return t('app:chats.you', { defaultValue: 'Du' });
|
||
const profile =
|
||
conversation?.members.find((mm) => mm.userId === senderId)?.profile ??
|
||
(senderId !== myId ? (conversation?.peer ?? null) : null);
|
||
return profile?.displayName ?? '?';
|
||
},
|
||
[conversation, myId, t],
|
||
);
|
||
|
||
const buildQuoted = useCallback(
|
||
(replyToId: string | null): QuotedRef | null => {
|
||
if (!replyToId) return null;
|
||
const target = messageById.get(replyToId);
|
||
if (!target) {
|
||
return {
|
||
id: replyToId,
|
||
senderName: '…',
|
||
snippet: t('app:chats.quote_unavailable', { defaultValue: 'Nachricht nicht verfügbar' }),
|
||
isAttachment: false,
|
||
deleted: true,
|
||
};
|
||
}
|
||
const parsed = parseMessagePayload(target.plaintext);
|
||
const text =
|
||
parsed.kind === 'text'
|
||
? parsed.text
|
||
: parsed.kind === 'poll'
|
||
? 'Umfrage: ' + parsed.question
|
||
: '';
|
||
const hasAttachment = parsed.kind === 'text' && parsed.attachments.length > 0;
|
||
return {
|
||
id: target.id,
|
||
senderName: senderNameFor(target.senderId),
|
||
snippet: text.length > 120 ? text.slice(0, 120) + '…' : text,
|
||
isAttachment: hasAttachment,
|
||
deleted: !!target.deletedAt,
|
||
};
|
||
},
|
||
[messageById, senderNameFor, t],
|
||
);
|
||
|
||
// Pre-compute quoted refs per message into a stable map. Calling
|
||
// `buildQuoted(m.replyToId)` inline inside the `.map` returned a fresh
|
||
// object on every parent render, defeating `React.memo` on MessageBubble.
|
||
// With the map memoized on the same deps as `buildQuoted`, each bubble
|
||
// gets a stable `quoted` reference until the underlying data actually
|
||
// changes (new messages, sender renames, language switch).
|
||
const quotedByMessage = useMemo(() => {
|
||
const out = new Map<string, QuotedRef | null>();
|
||
for (const m of messages) {
|
||
out.set(m.id, buildQuoted(m.replyToId));
|
||
}
|
||
return out;
|
||
}, [messages, buildQuoted]);
|
||
|
||
// Build the discriminated-union row list Virtuoso renders. We use a
|
||
// single virtualized list rather than separate "messages" and "pending"
|
||
// sections so the unsent items stay at the bottom of the scroll viewport
|
||
// (and Virtuoso's `followOutput` still triggers correctly when a new
|
||
// outbox item is appended). Optional row 0 is the "load older" tile —
|
||
// matches the old IntersectionObserver-sentinel pattern.
|
||
const virtuosoRows = useMemo<VirtuosoRow[]>(() => {
|
||
const out: VirtuosoRow[] = [];
|
||
const hasLoader = displayCount < messages.length;
|
||
if (hasLoader) {
|
||
out.push({ kind: 'loader', key: '__loader__' });
|
||
}
|
||
const sliceStart = Math.max(0, messages.length - displayCount);
|
||
for (let i = sliceStart; i < messages.length; i++) {
|
||
const m = messages[i];
|
||
if (!m) continue;
|
||
out.push({ kind: 'message', key: m.id, message: m, idx: i });
|
||
}
|
||
for (const p of pending) {
|
||
out.push({ kind: 'pending', key: 'pending-' + p.id, item: p });
|
||
}
|
||
return out;
|
||
}, [messages, pending, displayCount]);
|
||
|
||
// Snapshot of the saved position for this conversation, captured once on
|
||
// mount. Used to derive the `initialTopMostItemIndex` we hand to the
|
||
// Virtuoso instance below — Virtuoso applies that index synchronously
|
||
// before its first paint, so re-entering a chat shows the saved row in
|
||
// one frame rather than a "starts at top, jumps" flicker.
|
||
//
|
||
// Declared HERE (above `initialTopMostIndex`) rather than further down
|
||
// because the useMemo that consumes it would otherwise hit a TDZ on
|
||
// first render — `const` refs aren't hoisted.
|
||
const savedPositionRef = useRef<{ topmostIndex: number; stickToBottom: boolean } | null>(
|
||
null,
|
||
);
|
||
if (savedPositionRef.current === null && id) {
|
||
savedPositionRef.current = scrollPositions.get(id) ?? null;
|
||
}
|
||
|
||
// Initial scroll position for the freshly-mounted Virtuoso instance.
|
||
// Default = bottom (newest message). If we have a saved position from a
|
||
// previous visit to this chat AND the user wasn't sticking to the
|
||
// bottom, restore the saved row index (clamped to the current row
|
||
// count in case the cache was trimmed).
|
||
const initialAnchor = useMemo<{ type: 'bottom' } | { type: 'row'; index: number }>(() => {
|
||
const saved = savedPositionRef.current;
|
||
if (saved && !saved.stickToBottom) return { type: 'row', index: saved.topmostIndex };
|
||
return { type: 'bottom' };
|
||
}, []);
|
||
|
||
const jumpToMessage = useCallback(
|
||
(targetId: string) => {
|
||
const msgIdx = messages.findIndex((m) => m.id === targetId);
|
||
if (msgIdx < 0) return; // pinned message outside loaded cache — no-op
|
||
// Make sure the target is actually inside the rendered slice; if the
|
||
// user has only loaded the most-recent 150 rows but is jumping to an
|
||
// older message, expand the slice so the row exists in the virtual
|
||
// list before we ask Virtuoso to scroll to it.
|
||
const needsAtLeast = messages.length - msgIdx;
|
||
if (needsAtLeast > displayCount) {
|
||
setDisplayCount(needsAtLeast);
|
||
}
|
||
// Convert message-array index into row index for the virtuoso rows
|
||
// array (see `rows` further down). The slice starts at
|
||
// `messages.length - displayCount`, and row 0 is the optional
|
||
// "load older" header.
|
||
const targetDisplayCount = Math.max(displayCount, needsAtLeast);
|
||
const sliceStart = Math.max(0, messages.length - targetDisplayCount);
|
||
const hasLoader = targetDisplayCount < messages.length;
|
||
const rowIndex = (hasLoader ? 1 : 0) + (msgIdx - sliceStart);
|
||
// requestAnimationFrame: when we just bumped `displayCount`, Virtuoso
|
||
// needs a paint to register the new rows before scrollToIndex can
|
||
// resolve the target row. Without this, the scroll either no-ops or
|
||
// lands on a stale row.
|
||
requestAnimationFrame(() => {
|
||
listRef.current?.scrollToRow(rowIndex, 'center', 'smooth');
|
||
});
|
||
setHighlightedId(targetId);
|
||
window.setTimeout(
|
||
() => setHighlightedId((cur) => (cur === targetId ? null : cur)),
|
||
1600,
|
||
);
|
||
},
|
||
[messages, displayCount],
|
||
);
|
||
|
||
const handleReply = useCallback((m: DecryptedMessage) => {
|
||
setReplyTo(m);
|
||
composerRef.current?.focus();
|
||
}, []);
|
||
|
||
const handleForward = useCallback((m: DecryptedMessage) => {
|
||
setForwardTarget(m);
|
||
}, []);
|
||
|
||
// Stable handler for MessageBubble's `onAvatarClick`. Previously this was
|
||
// an inline arrow in the `.map`, which gave every row a fresh callback ref
|
||
// and defeated `React.memo` on the bubble (every parent re-render — every
|
||
// keystroke in the composer — re-rendered all 200 bubbles).
|
||
const handleAvatarClick = useCallback((uid: string, ev: React.MouseEvent) => {
|
||
ev.stopPropagation();
|
||
setProfilePopover({
|
||
userId: uid,
|
||
x: ev.clientX,
|
||
y: ev.clientY,
|
||
});
|
||
}, []);
|
||
|
||
const searchActive = useMemo(
|
||
() =>
|
||
searchQuery.trim().length > 0 ||
|
||
searchSenderId !== '' ||
|
||
searchAttachmentsOnly ||
|
||
searchDateFrom !== '' ||
|
||
searchDateTo !== '',
|
||
[searchQuery, searchSenderId, searchAttachmentsOnly, searchDateFrom, searchDateTo],
|
||
);
|
||
|
||
const [ftsExtras, setFtsExtras] = useState<DecryptedMessage[]>([]);
|
||
useEffect(() => {
|
||
if (!id) {
|
||
setFtsExtras([]);
|
||
return;
|
||
}
|
||
const q = searchQuery.trim();
|
||
if (q.length < 2) {
|
||
setFtsExtras([]);
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
void searchCachedMessages(id, q, 200).then((rows) => {
|
||
if (cancelled) return;
|
||
setFtsExtras(rows);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [id, searchQuery]);
|
||
|
||
const searchMatches = useMemo(() => {
|
||
if (!searchActive) return [] as DecryptedMessage[];
|
||
const q = searchQuery.trim().toLowerCase();
|
||
const fromTs = searchDateFrom ? new Date(searchDateFrom).getTime() : null;
|
||
const toTs = searchDateTo ? new Date(searchDateTo).getTime() + 24 * 3600 * 1000 - 1 : null;
|
||
const seen = new Set<string>();
|
||
const pool: DecryptedMessage[] = [];
|
||
for (const m of messages) {
|
||
if (!seen.has(m.id)) {
|
||
seen.add(m.id);
|
||
pool.push(m);
|
||
}
|
||
}
|
||
for (const m of ftsExtras) {
|
||
if (!seen.has(m.id)) {
|
||
seen.add(m.id);
|
||
pool.push(m);
|
||
}
|
||
}
|
||
pool.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
||
return pool.filter((m) => {
|
||
if (searchSenderId && m.senderId !== searchSenderId) return false;
|
||
const created = new Date(m.createdAt).getTime();
|
||
if (fromTs !== null && created < fromTs) return false;
|
||
if (toTs !== null && created > toTs) return false;
|
||
if (!m.plaintext) return false;
|
||
const parsed = parseMessagePayload(m.plaintext);
|
||
if (parsed.kind !== 'text') return false;
|
||
if (searchAttachmentsOnly && parsed.attachments.length === 0) return false;
|
||
if (q && !parsed.text.toLowerCase().includes(q)) return false;
|
||
return true;
|
||
});
|
||
}, [
|
||
messages,
|
||
ftsExtras,
|
||
searchActive,
|
||
searchQuery,
|
||
searchSenderId,
|
||
searchAttachmentsOnly,
|
||
searchDateFrom,
|
||
searchDateTo,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (searchMatches.length === 0) {
|
||
setSearchIdx(0);
|
||
return;
|
||
}
|
||
setSearchIdx((cur) => Math.min(cur, searchMatches.length - 1));
|
||
}, [searchMatches.length]);
|
||
|
||
useEffect(() => {
|
||
if (!searchOpen || searchMatches.length === 0) return;
|
||
const target = searchMatches[searchIdx];
|
||
if (target) jumpToMessage(target.id);
|
||
}, [searchOpen, searchMatches, searchIdx, jumpToMessage]);
|
||
|
||
useEffect(() => {
|
||
if (!id) return;
|
||
setActiveConversation(id);
|
||
return () => {
|
||
setActiveConversation(null);
|
||
};
|
||
}, [id, setActiveConversation]);
|
||
|
||
useEffect(() => {
|
||
const onOpen = (e: Event) => {
|
||
const detail = (e as CustomEvent<{ id?: string }>).detail;
|
||
if (detail?.id) setOpenWhiteboardId(detail.id);
|
||
};
|
||
window.addEventListener('chatapp:open-whiteboard', onOpen);
|
||
return () => window.removeEventListener('chatapp:open-whiteboard', onOpen);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const onOpen = (e: Event) => {
|
||
const detail = (e as CustomEvent<{ id?: string }>).detail;
|
||
if (detail?.id) setOpenWatchSessionId(detail.id);
|
||
};
|
||
window.addEventListener('chatapp:open-watch-together', onOpen);
|
||
return () => window.removeEventListener('chatapp:open-watch-together', onOpen);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const onOpen = (e: Event) => {
|
||
const detail = (e as CustomEvent<{ id?: string }>).detail;
|
||
if (detail?.id) setOpenGameId(detail.id);
|
||
};
|
||
window.addEventListener('chatapp:open-game', onOpen);
|
||
return () => window.removeEventListener('chatapp:open-game', onOpen);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (id && messages.length > 0) markRead(id);
|
||
}, [id, messages.length, markRead]);
|
||
|
||
// Scroll-to-bottom is handled by Virtuoso's `followOutput` prop, which
|
||
// fires whenever the rendered row count grows and auto-scrolls down only
|
||
// if the user was already at the bottom — exactly the Discord behavior
|
||
// we want for both outgoing sends and incoming realtime messages.
|
||
// The old useLayoutEffect that wrote `scrollTop = scrollHeight` is no
|
||
// longer needed: Virtuoso owns scroll positioning now.
|
||
|
||
// (savedPositionRef declared earlier — see TDZ note above the
|
||
// initialTopMostIndex useMemo.)
|
||
|
||
// Track whether the user is currently scrolled to the bottom. Virtuoso
|
||
// calls this whenever the bottom-state changes; we feed it into
|
||
// `stickToBottom` (used by the "jump to newest" pill and by the
|
||
// "new messages while away" counter logic). Also clears the unread-
|
||
// away counter when the user actually reaches the bottom.
|
||
const handleAtBottomStateChange = useCallback(
|
||
(atBottom: boolean) => {
|
||
setStickToBottom(atBottom);
|
||
if (atBottom) setNewMessagesWhileAway(0);
|
||
if (id) {
|
||
scrollPositions.set(id, {
|
||
topmostIndex: topmostIndexRef.current,
|
||
stickToBottom: atBottom,
|
||
});
|
||
}
|
||
},
|
||
[id],
|
||
);
|
||
|
||
// Persists the topmost-visible row index per conversation so re-entering
|
||
// the chat lands roughly where the user left off (see scrollPositions
|
||
// Map). Virtuoso fires `rangeChanged` whenever the visible range shifts;
|
||
// we only care about the start of the range here.
|
||
const handleRangeChanged = useCallback(
|
||
(range: { startIndex: number; endIndex: number }) => {
|
||
topmostIndexRef.current = range.startIndex;
|
||
if (id) {
|
||
const prev = scrollPositions.get(id);
|
||
scrollPositions.set(id, {
|
||
topmostIndex: range.startIndex,
|
||
stickToBottom: prev?.stickToBottom ?? true,
|
||
});
|
||
}
|
||
},
|
||
[id],
|
||
);
|
||
|
||
const jumpToBottom = useCallback(() => {
|
||
listRef.current?.scrollToBottom('smooth');
|
||
setStickToBottom(true);
|
||
setNewMessagesWhileAway(0);
|
||
}, []);
|
||
|
||
// Whenever an outgoing pending row appears, snap the viewport to the
|
||
// bottom so the user sees their freshly-sent message land. This replaces
|
||
// the old `setStickToBottom(true)` pattern that piggy-backed on a
|
||
// `useLayoutEffect` writing scrollTop — Virtuoso owns scroll positioning
|
||
// now, so we have to call it explicitly. Tracked via a ref so we only
|
||
// scroll when the count actually grew (not on every render where it
|
||
// happens to be > 0).
|
||
// Initialize from the current pending count rather than 0 so we don't
|
||
// fire scrollToIndex(LAST) on the very first render of a chat that
|
||
// already has outbox-queued items. Only growth of `pending.length`
|
||
// across renders should trigger the snap-to-bottom (i.e., the user
|
||
// just submitted something new).
|
||
const lastPendingCountRef = useRef(pending.length);
|
||
useEffect(() => {
|
||
if (pending.length > lastPendingCountRef.current) {
|
||
listRef.current?.scrollToBottom('auto');
|
||
}
|
||
lastPendingCountRef.current = pending.length;
|
||
}, [pending.length]);
|
||
|
||
// Snap the viewport back to the bottom after a send. The composer
|
||
// shrinks (cleared text, dismissed reply preview, dropped attachment
|
||
// thumbs) which lets the Virtuoso area grow vertically — leaving the
|
||
// just-sent bubble visibly above the new bottom for a frame.
|
||
// `requestAnimationFrame` defers the scroll until React has committed
|
||
// the composer-height change, so Virtuoso's ResizeObserver has
|
||
// already seen the new viewport and `index: 'LAST', align: 'end'`
|
||
// targets the correct bottom edge.
|
||
const snapToBottom = useCallback(() => {
|
||
window.requestAnimationFrame(() => {
|
||
listRef.current?.scrollToBottom('auto');
|
||
});
|
||
}, []);
|
||
|
||
async function handleSend(e?: React.FormEvent) {
|
||
e?.preventDefault();
|
||
if ((!text.trim() && attachments.length === 0) || sending) return;
|
||
setSending(true);
|
||
setSendError(null);
|
||
try {
|
||
await send(
|
||
text,
|
||
attachments.map((a) => a.file),
|
||
replyTo?.id ?? null,
|
||
{ viewOnceFlags: attachments.map((a) => a.viewOnce) },
|
||
);
|
||
setText('');
|
||
setAttachments([]);
|
||
setReplyTo(null);
|
||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||
setStickToBottom(true);
|
||
notifyStopTyping();
|
||
if (id) clearDraft(id);
|
||
snapToBottom();
|
||
} catch (err: unknown) {
|
||
const code = extractErrorCode(err);
|
||
setSendError(
|
||
code
|
||
? t('errors:' + code, { defaultValue: t('errors:generic') })
|
||
: err instanceof Error
|
||
? err.message
|
||
: t('errors:generic'),
|
||
);
|
||
} finally {
|
||
setSending(false);
|
||
}
|
||
}
|
||
|
||
const handlePollSubmit = useCallback(
|
||
async (question: string, options: string[]) => {
|
||
setPollSending(true);
|
||
setPollError(null);
|
||
try {
|
||
const payload = createPollPayload(question, options);
|
||
await send(payload, [], replyTo?.id ?? null);
|
||
setPollDialogOpen(false);
|
||
setReplyTo(null);
|
||
setStickToBottom(true);
|
||
notifyStopTyping();
|
||
snapToBottom();
|
||
} catch (err: unknown) {
|
||
setPollError(err instanceof Error ? err.message : 'Umfrage konnte nicht gesendet werden');
|
||
} finally {
|
||
setPollSending(false);
|
||
}
|
||
},
|
||
[send, replyTo?.id, notifyStopTyping, snapToBottom],
|
||
);
|
||
|
||
const handleCreateWhiteboard = useCallback(async () => {
|
||
if (!id || creatingWhiteboard) return;
|
||
setCreatingWhiteboard(true);
|
||
try {
|
||
const board = await createWhiteboard(supabase, id);
|
||
const payload = createWhiteboardPayload(board.id);
|
||
await send(payload, [], replyTo?.id ?? null);
|
||
setReplyTo(null);
|
||
setStickToBottom(true);
|
||
setOpenWhiteboardId(board.id);
|
||
snapToBottom();
|
||
} catch (err: unknown) {
|
||
setSendError(err instanceof Error ? err.message : 'Whiteboard konnte nicht angelegt werden');
|
||
} finally {
|
||
setCreatingWhiteboard(false);
|
||
}
|
||
}, [id, creatingWhiteboard, send, replyTo?.id, snapToBottom]);
|
||
|
||
const handleStartWatchTogether = useCallback(async () => {
|
||
if (!id) return;
|
||
const videoId = parseYouTubeUrl(watchUrl);
|
||
if (!videoId) {
|
||
setWatchError('Ungültige YouTube-URL.');
|
||
return;
|
||
}
|
||
setWatchCreating(true);
|
||
setWatchError(null);
|
||
try {
|
||
const ws = await createWatchSession(supabase, { conversationId: id, videoId });
|
||
const payload = createWatchTogetherPayload(ws.id);
|
||
await send(payload, [], replyTo?.id ?? null);
|
||
setReplyTo(null);
|
||
setStickToBottom(true);
|
||
setWatchDialogOpen(false);
|
||
setWatchUrl('');
|
||
setOpenWatchSessionId(ws.id);
|
||
snapToBottom();
|
||
} catch (err: unknown) {
|
||
setWatchError(err instanceof Error ? err.message : 'Konnte Watch-Together nicht starten');
|
||
} finally {
|
||
setWatchCreating(false);
|
||
}
|
||
}, [id, watchUrl, send, replyTo?.id, snapToBottom]);
|
||
|
||
const handleStartGame = useCallback(async (gameType: GameType) => {
|
||
if (!id) return;
|
||
if (!conversation || conversation.members.length !== 2) {
|
||
setGameError('Spiele aktuell nur in 1:1-Chats.');
|
||
return;
|
||
}
|
||
const opponent = conversation.members.find((m) => m.userId !== myId);
|
||
if (!opponent) {
|
||
setGameError('Kein Gegner gefunden.');
|
||
return;
|
||
}
|
||
setGameCreating(true);
|
||
setGameError(null);
|
||
try {
|
||
const game = await createGame(supabase, {
|
||
conversationId: id,
|
||
gameType,
|
||
opponentUserId: opponent.userId,
|
||
});
|
||
const payload = createGamePayload(game.id, gameType);
|
||
await send(payload, [], replyTo?.id ?? null);
|
||
setReplyTo(null);
|
||
setStickToBottom(true);
|
||
setGameDialogOpen(false);
|
||
setOpenGameId(game.id);
|
||
snapToBottom();
|
||
} catch (err: unknown) {
|
||
setGameError(err instanceof Error ? err.message : 'Konnte Spiel nicht starten');
|
||
} finally {
|
||
setGameCreating(false);
|
||
}
|
||
}, [id, conversation, myId, send, replyTo?.id, snapToBottom]);
|
||
|
||
async function ingestFiles(files: File[]) {
|
||
const compressed = await compressImages(files);
|
||
const next: PendingAttachment[] = [];
|
||
for (const f of compressed) {
|
||
if (f.size > 10 * 1024 * 1024) {
|
||
setSendError('Datei zu groß (max 10 MB)');
|
||
continue;
|
||
}
|
||
// New attachments default to viewOnce=false; user opts in per-thumb
|
||
// via the eye-toggle button on the preview (P7.T4).
|
||
next.push({ file: f, viewOnce: false });
|
||
}
|
||
setAttachments((prev) => [...prev, ...next].slice(0, 4));
|
||
}
|
||
|
||
function handleFilesChosen(list: FileList | null) {
|
||
if (!list) return;
|
||
void ingestFiles(Array.from(list));
|
||
}
|
||
|
||
const { state: callState } = useCall();
|
||
const callHereActive =
|
||
(callState.kind === 'connected' ||
|
||
callState.kind === 'connecting' ||
|
||
callState.kind === 'outgoing') &&
|
||
callState.conversationId === id;
|
||
const incomingHere = callState.kind === 'incoming' && callState.conversationId === id;
|
||
|
||
return (
|
||
<div
|
||
className="relative flex h-full flex-col"
|
||
onDragEnter={(e) => {
|
||
if (e.dataTransfer?.types.includes('Files')) {
|
||
e.preventDefault();
|
||
setIsDraggingFile(true);
|
||
}
|
||
}}
|
||
onDragOver={(e) => {
|
||
if (e.dataTransfer?.types.includes('Files')) {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = 'copy';
|
||
}
|
||
}}
|
||
onDragLeave={(e) => {
|
||
if (e.currentTarget === e.target) setIsDraggingFile(false);
|
||
}}
|
||
onDrop={(e) => {
|
||
if (!e.dataTransfer?.files?.length) return;
|
||
e.preventDefault();
|
||
setIsDraggingFile(false);
|
||
void ingestFiles(Array.from(e.dataTransfer.files));
|
||
}}
|
||
>
|
||
{!callHereActive && (
|
||
<ConversationHeader
|
||
conversation={conversation}
|
||
peerPresence={peerPresence}
|
||
onMediaClick={() => setMediaDrawerOpen((v) => !v)}
|
||
{...(conversation?.type === 'dm' && conversation.peer
|
||
? {
|
||
onProfileClick: (ev: React.MouseEvent) => {
|
||
ev.stopPropagation();
|
||
setProfilePopover({
|
||
userId: conversation.peer!.userId,
|
||
x: ev.clientX,
|
||
y: ev.clientY,
|
||
});
|
||
},
|
||
}
|
||
: {})}
|
||
onSearchClick={() => setSearchOpen((v) => !v)}
|
||
{...(isGroup ? { onInfoClick: () => setInfoPanelOpen(true) } : {})}
|
||
pinnedCount={pins.length}
|
||
onOpenPinned={() => setPinnedPanelOpen(true)}
|
||
/>
|
||
)}
|
||
|
||
{!callHereActive && searchOpen && (
|
||
<SearchBar
|
||
query={searchQuery}
|
||
onQueryChange={setSearchQuery}
|
||
matches={searchMatches.length}
|
||
activeIdx={searchIdx}
|
||
senderId={searchSenderId}
|
||
onSenderChange={setSearchSenderId}
|
||
attachmentsOnly={searchAttachmentsOnly}
|
||
onAttachmentsOnlyChange={setSearchAttachmentsOnly}
|
||
dateFrom={searchDateFrom}
|
||
onDateFromChange={setSearchDateFrom}
|
||
dateTo={searchDateTo}
|
||
onDateToChange={setSearchDateTo}
|
||
members={conversation?.members ?? []}
|
||
onPrev={() =>
|
||
setSearchIdx((cur) =>
|
||
searchMatches.length === 0
|
||
? 0
|
||
: (cur - 1 + searchMatches.length) % searchMatches.length,
|
||
)
|
||
}
|
||
onNext={() =>
|
||
setSearchIdx((cur) =>
|
||
searchMatches.length === 0 ? 0 : (cur + 1) % searchMatches.length,
|
||
)
|
||
}
|
||
onClose={() => {
|
||
setSearchOpen(false);
|
||
setSearchQuery('');
|
||
setSearchSenderId('');
|
||
setSearchAttachmentsOnly(false);
|
||
setSearchDateFrom('');
|
||
setSearchDateTo('');
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Layout row: chat column on the left grows to fill remaining width;
|
||
right-hand drawers (Media/Files, Group Info) render as inline
|
||
siblings so opening one narrows the chat instead of floating on
|
||
top of it (Discord parity). The chat-column wrapper holds the
|
||
`relative` anchor for the drag-and-drop overlay further below. */}
|
||
<div className="flex min-h-0 flex-1 flex-row">
|
||
<div className="relative flex min-w-0 flex-1 flex-col">
|
||
{/* Discord-style persistent voice-channel rail. Always visible in groups
|
||
so anyone can pop in without an invite-ring; hidden in 1:1s unless
|
||
someone is already waiting. Hides automatically once we're in. */}
|
||
{conversation && !incomingHere && <CallPreviewPanel conversation={conversation} />}
|
||
{incomingHere && conversation && <IncomingCallPanel conversation={conversation} />}
|
||
{conversation && <InCallPanel conversation={conversation} />}
|
||
|
||
<div className="discord-chat-surface flex min-h-0 flex-1 flex-col bg-surface-3">
|
||
{loading ? (
|
||
<div className="flex items-center gap-2 px-5 py-4 text-xs text-fg-muted">
|
||
<SpinnerIcon className="h-3.5 w-3.5 text-accent" />
|
||
</div>
|
||
) : error ? (
|
||
<div className="px-5 py-4">
|
||
<Banner>{error}</Banner>
|
||
</div>
|
||
) : messages.length === 0 ? (
|
||
<div className="px-5 py-4">
|
||
<EmptyState
|
||
icon={<SendIcon className="h-8 w-8" />}
|
||
title={t('app:chats.conv_empty_title', { defaultValue: 'Sag Hallo 👋' })}
|
||
description={t('app:chats.conv_empty_desc', {
|
||
defaultValue: 'Hier ist noch nichts. Schreibe die erste Nachricht.',
|
||
})}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<MessageList
|
||
ref={listRef}
|
||
rows={virtuosoRows}
|
||
// Deferred reveal: the list stays hidden until messages + reactions
|
||
// + the unread divider are loaded, then anchors and reveals — so the
|
||
// post-paint height cascade is never visible (no chat-switch flicker).
|
||
ready={listReady}
|
||
computeKey={(row) => row.key}
|
||
initialAnchor={initialAnchor}
|
||
// 250px at-bottom tolerance — a tall appended row (image, voice note,
|
||
// grouped attachments) shouldn't push the user out of the at-bottom zone.
|
||
atBottomThreshold={250}
|
||
onReachTop={handleStartReached}
|
||
onAtBottomChange={handleAtBottomStateChange}
|
||
onTopRowChange={(topIndex) =>
|
||
handleRangeChanged({ startIndex: topIndex, endIndex: topIndex })
|
||
}
|
||
renderRow={(_index, row) => {
|
||
if (row.kind === 'loader') {
|
||
return (
|
||
<div className="flex items-center justify-center py-2 text-xs text-fg-muted">
|
||
Lade ältere Nachrichten…
|
||
</div>
|
||
);
|
||
}
|
||
if (row.kind === 'pending') {
|
||
return (
|
||
<PendingBubble
|
||
item={row.item}
|
||
onRetry={() => retryPending(row.item.id)}
|
||
onCancel={() => cancelPending(row.item.id)}
|
||
/>
|
||
);
|
||
}
|
||
const m = row.message;
|
||
const idx = row.idx;
|
||
const prevRaw = messages[idx - 1];
|
||
const nextRaw = messages[idx + 1];
|
||
const prevIsCallEvent =
|
||
!!prevRaw && parseMessagePayload(prevRaw.plaintext).kind === 'call_event';
|
||
const nextIsCallEvent =
|
||
!!nextRaw && parseMessagePayload(nextRaw.plaintext).kind === 'call_event';
|
||
const grouped = !!prevRaw && prevRaw.senderId === m.senderId && !prevIsCallEvent;
|
||
const isLastOfRun = !nextRaw || nextRaw.senderId !== m.senderId || nextIsCallEvent;
|
||
const memberProfile =
|
||
conversation?.members.find((mm) => mm.userId === m.senderId)?.profile ?? null;
|
||
const senderProfile =
|
||
memberProfile ?? (m.senderId !== myId ? (conversation?.peer ?? null) : null);
|
||
return (
|
||
<div className="px-5">
|
||
{firstUnreadId === m.id && (
|
||
<div
|
||
aria-label="Neue Nachrichten"
|
||
className="my-2 flex items-center gap-3 px-2"
|
||
>
|
||
<span className="h-px flex-1 bg-rose-500/60" />
|
||
<span className="rounded-full bg-rose-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-rose-500">
|
||
Neue Nachrichten
|
||
</span>
|
||
<span className="h-px flex-1 bg-rose-500/60" />
|
||
</div>
|
||
)}
|
||
<MessageBubble
|
||
message={m}
|
||
mine={m.senderId === myId}
|
||
groupedWithPrev={grouped}
|
||
isLastOfRun={isLastOfRun}
|
||
senderDisplayName={senderProfile?.displayName}
|
||
senderAvatarUrl={senderProfile?.avatarUrl}
|
||
conversationId={id ?? ''}
|
||
reactions={reactionsByMessage.get(m.id) ?? EMPTY_REACTIONS}
|
||
onToggleReaction={toggleReaction}
|
||
onVotePoll={votePoll}
|
||
showSeen={m.id === lastSeenMessageId}
|
||
{...(m.senderId === myId
|
||
? {
|
||
deliveryState: computeDeliveryState({
|
||
messageId: m.id,
|
||
isGroup: !!isGroup,
|
||
recipientCount: groupRecipientCount,
|
||
peerReadSet,
|
||
peerDeliveredSet,
|
||
groupRead,
|
||
groupDelivered,
|
||
}),
|
||
}
|
||
: {})}
|
||
quoted={quotedByMessage.get(m.id) ?? null}
|
||
onJumpToMessage={jumpToMessage}
|
||
onReply={handleReply}
|
||
onForward={handleForward}
|
||
onAvatarClick={handleAvatarClick}
|
||
highlighted={highlightedId === m.id}
|
||
isPinned={pinnedIds.has(m.id)}
|
||
onTogglePin={handleTogglePin}
|
||
/>
|
||
</div>
|
||
);
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{firstUnreadId && !firstUnreadJumpDismissed && (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
jumpToMessage(firstUnreadId);
|
||
setFirstUnreadJumpDismissed(true);
|
||
}}
|
||
className="absolute left-1/2 top-[76px] z-30 inline-flex -translate-x-1/2 cursor-pointer items-center gap-2 rounded-full border border-rose-500/30 bg-rose-500 px-3 py-1.5 text-xs font-semibold text-white shadow-lg transition hover:bg-rose-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-300/60"
|
||
>
|
||
<ChevronDownIcon className="h-3.5 w-3.5" />
|
||
<span>Zu ungelesen</span>
|
||
</button>
|
||
)}
|
||
|
||
{(!stickToBottom || newMessagesWhileAway > 0) && (
|
||
<button
|
||
type="button"
|
||
onClick={jumpToBottom}
|
||
className="absolute bottom-[92px] left-1/2 z-30 inline-flex -translate-x-1/2 cursor-pointer items-center gap-2 rounded-full border border-line bg-surface-2 px-3 py-1.5 text-xs font-semibold text-fg shadow-lg transition hover:bg-surface-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:bg-[#2b2d31] dark:hover:bg-[#383a40]"
|
||
>
|
||
<ChevronDownIcon className="h-3.5 w-3.5 text-accent" />
|
||
<span>
|
||
{newMessagesWhileAway > 0
|
||
? newMessagesWhileAway + ' neue Nachrichten'
|
||
: 'Zum neuesten'}
|
||
</span>
|
||
</button>
|
||
)}
|
||
|
||
<TypingIndicator typingUserIds={typingUserIds} members={conversation?.members ?? []} />
|
||
|
||
{isDraggingFile && (
|
||
<div
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center rounded-lg border-2 border-dashed border-accent/60 bg-accent/10 backdrop-blur-sm"
|
||
>
|
||
<div className="rounded-xl border border-accent/40 bg-surface-3/90 px-4 py-3 text-sm font-semibold text-fg shadow-xl">
|
||
Datei hier ablegen zum Anhängen
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSend} className="discord-chat-surface bg-surface-3 px-5 pb-5 pt-2">
|
||
{sendError && (
|
||
<div className="mb-2">
|
||
<Banner>{sendError}</Banner>
|
||
</div>
|
||
)}
|
||
|
||
{replyTo && (
|
||
<div className="mb-2 flex items-stretch gap-2 rounded-lg border border-line bg-surface-2 p-2 text-sm dark:bg-[#2b2d31]">
|
||
<span aria-hidden="true" className="w-1 shrink-0 rounded-full bg-accent" />
|
||
<ReplyIcon className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate text-xs font-semibold text-fg">
|
||
{t('app:chats.replying_to', {
|
||
name: senderNameFor(replyTo.senderId),
|
||
defaultValue: 'Antwort an ' + senderNameFor(replyTo.senderId),
|
||
})}
|
||
</p>
|
||
<p className="truncate text-xs italic text-fg-muted">
|
||
{(() => {
|
||
if (!replyTo.plaintext) return '…';
|
||
const p = parseMessagePayload(replyTo.plaintext);
|
||
if (p.kind === 'poll') return 'Umfrage: ' + p.question;
|
||
if (p.kind !== 'text') return '';
|
||
if (!p.text && p.attachments.length > 0) return '📎';
|
||
return p.text;
|
||
})()}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => setReplyTo(null)}
|
||
aria-label={t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
|
||
className="shrink-0 cursor-pointer rounded-md p-1 text-fg-muted transition hover:bg-surface-3 hover:text-fg dark:hover:bg-[#383a40]"
|
||
>
|
||
<XIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{attachments.length > 0 && (
|
||
<div className="mb-2 flex flex-wrap gap-2">
|
||
{attachments.map((a, idx) => (
|
||
<AttachmentPreview
|
||
key={idx}
|
||
file={a.file}
|
||
viewOnce={a.viewOnce}
|
||
onRemove={() => setAttachments((prev) => prev.filter((_, i) => i !== idx))}
|
||
{...(a.file.type.startsWith('image/')
|
||
? {
|
||
onEdit: () => setAnnotatingIndex(idx),
|
||
onToggleViewOnce: () =>
|
||
setAttachments((prev) =>
|
||
prev.map((x, i) =>
|
||
i === idx ? { ...x, viewOnce: !x.viewOnce } : x,
|
||
),
|
||
),
|
||
}
|
||
: {})}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="discord-composer relative flex items-end gap-1 rounded-xl border border-transparent bg-surface-2 p-1.5 shadow-sm focus-within:border-accent/60 focus-within:ring-2 focus-within:ring-accent/20">
|
||
{isGroup && mentionState && conversation && (
|
||
<MentionAutocomplete
|
||
members={conversation.members}
|
||
query={mentionState.query}
|
||
excludeUserId={myId}
|
||
onSelect={(username) => {
|
||
const start = mentionState.start;
|
||
const before = text.slice(0, start);
|
||
const afterCaret = text.slice(start + 1 + mentionState.query.length);
|
||
const inserted = '@' + username + ' ';
|
||
const next = before + inserted + afterCaret;
|
||
setText(next);
|
||
setMentionState(null);
|
||
const caret = (before + inserted).length;
|
||
requestAnimationFrame(() => {
|
||
const el = composerRef.current;
|
||
if (!el) return;
|
||
el.focus();
|
||
el.setSelectionRange(caret, caret);
|
||
});
|
||
}}
|
||
onClose={() => setMentionState(null)}
|
||
/>
|
||
)}
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
multiple
|
||
className="hidden"
|
||
onChange={(e) => handleFilesChosen(e.target.files)}
|
||
/>
|
||
{/* [+] popover trigger — opens ComposerActionsMenu (file/poll/whiteboard/watch/game) */}
|
||
<button
|
||
ref={actionsMenuAnchorRef}
|
||
type="button"
|
||
onClick={() => setActionsMenuOpen((v) => !v)}
|
||
aria-label={t('app:composer.more_actions', { defaultValue: 'Mehr Aktionen' })}
|
||
title={t('app:composer.more_actions', { defaultValue: 'Mehr Aktionen' })}
|
||
aria-expanded={actionsMenuOpen}
|
||
className="inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-3 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 dark:hover:bg-[#313338]"
|
||
>
|
||
<PlusIcon className="h-4 w-4" />
|
||
</button>
|
||
<ComposerActionsMenu
|
||
anchorRef={actionsMenuAnchorRef}
|
||
open={actionsMenuOpen}
|
||
onClose={() => setActionsMenuOpen(false)}
|
||
onAttachFile={() => fileInputRef.current?.click()}
|
||
onCreatePoll={() => {
|
||
setPollError(null);
|
||
setPollDialogOpen(true);
|
||
}}
|
||
onCreateWhiteboard={() => void handleCreateWhiteboard()}
|
||
onStartWatchTogether={() => setWatchDialogOpen(true)}
|
||
onStartGame={() => setGameDialogOpen(true)}
|
||
canStartGame={conversation?.members?.length === 2}
|
||
/>
|
||
<div className="relative">
|
||
<button
|
||
type="button"
|
||
data-emoji-trigger
|
||
onClick={() => setEmojiOpen((v) => !v)}
|
||
aria-label="Emoji einfügen"
|
||
title="Emoji einfügen"
|
||
aria-expanded={emojiOpen}
|
||
className="inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-3 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 dark:hover:bg-[#313338]"
|
||
>
|
||
<SmileIcon className="h-4 w-4" />
|
||
</button>
|
||
<EmojiPicker
|
||
open={emojiOpen}
|
||
onPick={(emoji) => {
|
||
const el = composerRef.current;
|
||
const caret = el?.selectionStart ?? text.length;
|
||
const next = text.slice(0, caret) + emoji + text.slice(caret);
|
||
setText(next);
|
||
requestAnimationFrame(() => {
|
||
if (!el) return;
|
||
el.focus();
|
||
const pos = caret + emoji.length;
|
||
el.setSelectionRange(pos, pos);
|
||
});
|
||
}}
|
||
onClose={() => setEmojiOpen(false)}
|
||
/>
|
||
</div>
|
||
<div className="relative">
|
||
<button
|
||
type="button"
|
||
onClick={() => setGifPickerOpen((v) => !v)}
|
||
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
|
||
aria-label="GIF"
|
||
title="GIF einfügen"
|
||
>
|
||
<span className="text-xs font-bold">GIF</span>
|
||
</button>
|
||
<GifPicker
|
||
open={gifPickerOpen}
|
||
onClose={() => setGifPickerOpen(false)}
|
||
onPick={(gif) => void handleGifPick(gif)}
|
||
/>
|
||
</div>
|
||
<VoiceRecorder
|
||
disabled={sending}
|
||
onComplete={async (file) => {
|
||
try {
|
||
await send('', [file], replyTo?.id ?? null);
|
||
setReplyTo(null);
|
||
} catch (err: unknown) {
|
||
const msg = err instanceof Error ? err.message : 'send failed';
|
||
setSendError(msg);
|
||
}
|
||
}}
|
||
/>
|
||
<textarea
|
||
ref={composerRef}
|
||
value={text}
|
||
onChange={(e) => {
|
||
const next = e.target.value;
|
||
setText(next);
|
||
if (next.length > 0) notifyTyping();
|
||
const caret = e.target.selectionStart ?? next.length;
|
||
const before = next.slice(0, caret);
|
||
const atIdx = before.lastIndexOf('@');
|
||
if (atIdx >= 0 && (atIdx === 0 || /\s/.test(before[atIdx - 1] ?? ''))) {
|
||
const q = before.slice(atIdx + 1);
|
||
if (!/\s/.test(q)) {
|
||
setMentionState({ query: q, start: atIdx });
|
||
return;
|
||
}
|
||
}
|
||
setMentionState(null);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
void handleSend();
|
||
}
|
||
}}
|
||
onPaste={(e) => {
|
||
const items = e.clipboardData?.items;
|
||
if (!items) return;
|
||
const pics: File[] = [];
|
||
for (const it of Array.from(items)) {
|
||
if (it.kind === 'file') {
|
||
const f = it.getAsFile();
|
||
if (f && f.type.startsWith('image/')) pics.push(f);
|
||
}
|
||
}
|
||
if (pics.length > 0) {
|
||
e.preventDefault();
|
||
void ingestFiles(pics);
|
||
}
|
||
}}
|
||
rows={1}
|
||
placeholder="Nachricht schreiben…"
|
||
className="max-h-40 min-h-[40px] flex-1 resize-none rounded-lg bg-transparent px-2 py-2.5 text-sm text-fg placeholder-fg-muted outline-none"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={sending || (text.trim().length === 0 && attachments.length === 0)}
|
||
aria-busy={sending}
|
||
className="inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-accent text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-45"
|
||
>
|
||
{sending ? <SpinnerIcon className="h-4 w-4" /> : <ArrowRightIcon className="h-4 w-4" />}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{isGroup && conversation && (
|
||
<GroupInfoPanel
|
||
open={infoPanelOpen}
|
||
onClose={() => setInfoPanelOpen(false)}
|
||
conversation={conversation}
|
||
/>
|
||
)}
|
||
|
||
<MediaFilesDrawer
|
||
open={mediaDrawerOpen}
|
||
index={attachmentIndex}
|
||
senderNameFor={senderNameFor}
|
||
onJumpToMessage={(messageId) => {
|
||
setMediaDrawerOpen(false);
|
||
jumpToMessage(messageId);
|
||
}}
|
||
onClose={() => setMediaDrawerOpen(false)}
|
||
/>
|
||
</div>
|
||
|
||
<ForwardDialog
|
||
open={forwardTarget !== null}
|
||
message={forwardTarget}
|
||
currentConversationId={id ?? null}
|
||
onClose={() => setForwardTarget(null)}
|
||
/>
|
||
|
||
<PollComposerDialog
|
||
open={pollDialogOpen}
|
||
sending={pollSending}
|
||
error={pollError}
|
||
onClose={() => {
|
||
if (!pollSending) setPollDialogOpen(false);
|
||
}}
|
||
onSubmit={handlePollSubmit}
|
||
/>
|
||
|
||
{profilePopover && (
|
||
<UserProfilePopover
|
||
userId={profilePopover.userId}
|
||
profile={
|
||
conversation?.members.find((m) => m.userId === profilePopover.userId)?.profile ??
|
||
conversation?.peer ??
|
||
null
|
||
}
|
||
x={profilePopover.x}
|
||
y={profilePopover.y}
|
||
onClose={() => setProfilePopover(null)}
|
||
/>
|
||
)}
|
||
|
||
<PinnedMessagesPanel
|
||
open={pinnedPanelOpen}
|
||
pins={pins}
|
||
onClose={() => setPinnedPanelOpen(false)}
|
||
onJump={(messageId) => {
|
||
// Close the panel first so the underlying message-list viewport
|
||
// is fully visible before the smooth-scroll runs (otherwise the
|
||
// panel would briefly cover the highlighted target row).
|
||
setPinnedPanelOpen(false);
|
||
jumpToMessage(messageId);
|
||
}}
|
||
onUnpin={(messageId) => void handleTogglePin(messageId)}
|
||
/>
|
||
|
||
{annotatingIndex !== null && attachments[annotatingIndex] && (
|
||
<Suspense fallback={null}>
|
||
<ImageAnnotator
|
||
file={attachments[annotatingIndex]!.file}
|
||
onCancel={() => setAnnotatingIndex(null)}
|
||
onSave={(next) => {
|
||
// Preserve the per-attachment viewOnce flag across annotation —
|
||
// the user's burn-after-viewing intent shouldn't reset just
|
||
// because they redrew the image.
|
||
setAttachments((prev) =>
|
||
prev.map((a, i) =>
|
||
i === annotatingIndex ? { file: next, viewOnce: a.viewOnce } : a,
|
||
),
|
||
);
|
||
setAnnotatingIndex(null);
|
||
}}
|
||
/>
|
||
</Suspense>
|
||
)}
|
||
|
||
{openWhiteboardId && (
|
||
<Suspense fallback={null}>
|
||
<WhiteboardModal
|
||
whiteboardId={openWhiteboardId}
|
||
onClose={() => setOpenWhiteboardId(null)}
|
||
/>
|
||
</Suspense>
|
||
)}
|
||
|
||
{openWatchSessionId && (
|
||
<Suspense fallback={null}>
|
||
<WatchTogetherModal
|
||
sessionId={openWatchSessionId}
|
||
onClose={() => setOpenWatchSessionId(null)}
|
||
/>
|
||
</Suspense>
|
||
)}
|
||
|
||
{openGameId && (
|
||
<Suspense fallback={null}>
|
||
<GameModal
|
||
gameId={openGameId}
|
||
onClose={() => setOpenGameId(null)}
|
||
/>
|
||
</Suspense>
|
||
)}
|
||
|
||
{gameDialogOpen && (
|
||
<div
|
||
role="dialog"
|
||
aria-modal="true"
|
||
className="fixed inset-0 z-[70] flex items-center justify-center bg-ink-950/90 p-6"
|
||
onClick={(e) => {
|
||
if (e.target === e.currentTarget) setGameDialogOpen(false);
|
||
}}
|
||
>
|
||
<div className="w-full max-w-sm rounded-2xl border border-line bg-surface-2 p-5 shadow-xl">
|
||
<h2 className="mb-3 font-display text-lg font-semibold text-fg">
|
||
{t('app:game.pick_title', { defaultValue: 'Spiel auswählen' })}
|
||
</h2>
|
||
{gameError && (
|
||
<p className="mb-2 text-xs text-rose-400">{gameError}</p>
|
||
)}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => void handleStartGame('ttt')}
|
||
disabled={gameCreating}
|
||
className="flex flex-col items-center gap-2 rounded-xl border border-line bg-surface-3 p-4 text-fg transition hover:border-accent/40 hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
|
||
>
|
||
<span className="text-3xl">×○</span>
|
||
<span className="text-xs font-semibold">Tic-Tac-Toe</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => void handleStartGame('c4')}
|
||
disabled={gameCreating}
|
||
className="flex flex-col items-center gap-2 rounded-xl border border-line bg-surface-3 p-4 text-fg transition hover:border-accent/40 hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
|
||
>
|
||
<span className="text-3xl">🔴🟡</span>
|
||
<span className="text-xs font-semibold">Vier-Gewinnt</span>
|
||
</button>
|
||
</div>
|
||
<div className="mt-4 flex justify-end">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setGameDialogOpen(false); setGameError(null); }}
|
||
className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg-muted transition hover:bg-surface"
|
||
>
|
||
{t('app:game.cancel', { defaultValue: 'Abbrechen' })}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{watchDialogOpen && (
|
||
<div
|
||
role="dialog"
|
||
aria-modal="true"
|
||
className="fixed inset-0 z-[70] flex items-center justify-center bg-ink-950/90 p-6"
|
||
onClick={(e) => {
|
||
if (e.target === e.currentTarget) setWatchDialogOpen(false);
|
||
}}
|
||
>
|
||
<div className="w-full max-w-md rounded-2xl border border-line bg-surface-2 p-5 shadow-xl">
|
||
<h2 className="mb-3 font-display text-lg font-semibold text-fg">
|
||
{t('app:watch.dialog_title', { defaultValue: 'Watch Together starten' })}
|
||
</h2>
|
||
<input
|
||
type="url"
|
||
placeholder="https://youtu.be/..."
|
||
value={watchUrl}
|
||
onChange={(e) => { setWatchUrl(e.target.value); setWatchError(null); }}
|
||
className="mb-2 w-full rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||
/>
|
||
{watchError && (
|
||
<p className="mb-2 text-xs text-rose-400">{watchError}</p>
|
||
)}
|
||
<div className="mt-3 flex items-center justify-end gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setWatchDialogOpen(false); setWatchUrl(''); setWatchError(null); }}
|
||
className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg-muted transition hover:bg-surface"
|
||
>
|
||
{t('app:watch.cancel', { defaultValue: 'Abbrechen' })}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => void handleStartWatchTogether()}
|
||
disabled={watchCreating || !watchUrl.trim()}
|
||
className="cursor-pointer rounded-md bg-accent px-4 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||
>
|
||
{watchCreating
|
||
? t('app:watch.starting', { defaultValue: 'Startet…' })
|
||
: t('app:watch.start', { defaultValue: 'Starten' })}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface SearchBarProps {
|
||
query: string;
|
||
onQueryChange: (q: string) => void;
|
||
matches: number;
|
||
activeIdx: number;
|
||
senderId: string;
|
||
onSenderChange: (id: string) => void;
|
||
attachmentsOnly: boolean;
|
||
onAttachmentsOnlyChange: (v: boolean) => void;
|
||
dateFrom: string;
|
||
onDateFromChange: (v: string) => void;
|
||
dateTo: string;
|
||
onDateToChange: (v: string) => void;
|
||
members: { userId: string; profile: { displayName?: string | null } | null }[];
|
||
onPrev: () => void;
|
||
onNext: () => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
function SearchBar({
|
||
query,
|
||
onQueryChange,
|
||
matches,
|
||
activeIdx,
|
||
senderId,
|
||
onSenderChange,
|
||
attachmentsOnly,
|
||
onAttachmentsOnlyChange,
|
||
dateFrom,
|
||
onDateFromChange,
|
||
dateTo,
|
||
onDateToChange,
|
||
members,
|
||
onPrev,
|
||
onNext,
|
||
onClose,
|
||
}: SearchBarProps) {
|
||
const { t } = useTranslation(['app']);
|
||
return (
|
||
<div className="discord-chat-panel flex flex-col gap-2 border-b border-line bg-surface-2 px-4 py-2">
|
||
<div className="flex items-center gap-2">
|
||
<SearchIcon className="h-4 w-4 shrink-0 text-fg-muted" />
|
||
<input
|
||
type="search"
|
||
autoFocus
|
||
value={query}
|
||
onChange={(e) => onQueryChange(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Escape') onClose();
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
if (e.shiftKey) onPrev();
|
||
else onNext();
|
||
}
|
||
}}
|
||
placeholder={t('app:chats.search_in_conv', { defaultValue: 'In Unterhaltung suchen…' })}
|
||
className="min-w-0 flex-1 bg-transparent text-sm text-fg placeholder-fg-muted outline-none"
|
||
/>
|
||
<span className="shrink-0 text-xs tabular-nums text-fg-muted">
|
||
{matches === 0
|
||
? query.trim().length > 0
|
||
? t('app:chats.search_none', { defaultValue: 'Keine Treffer' })
|
||
: ''
|
||
: activeIdx + 1 + ' / ' + matches}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={onPrev}
|
||
disabled={matches === 0}
|
||
aria-label="Previous"
|
||
className="cursor-pointer rounded-md p-1 text-fg-muted transition hover:bg-surface-3 hover:text-fg disabled:cursor-not-allowed disabled:opacity-40 dark:hover:bg-[#383a40]"
|
||
>
|
||
<ChevronUpIcon className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={onNext}
|
||
disabled={matches === 0}
|
||
aria-label="Next"
|
||
className="cursor-pointer rounded-md p-1 text-fg-muted transition hover:bg-surface-3 hover:text-fg disabled:cursor-not-allowed disabled:opacity-40 dark:hover:bg-[#383a40]"
|
||
>
|
||
<ChevronDownIcon className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
aria-label="Close"
|
||
className="cursor-pointer rounded-md p-1 text-fg-muted transition hover:bg-surface-3 hover:text-fg dark:hover:bg-[#383a40]"
|
||
>
|
||
<XIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2 text-xs text-fg-muted">
|
||
<select
|
||
value={senderId}
|
||
onChange={(e) => onSenderChange(e.target.value)}
|
||
className="cursor-pointer rounded-md border border-line bg-surface-3 px-2 py-1 text-fg outline-none focus:border-accent dark:bg-[#383a40]"
|
||
>
|
||
<option value="">Alle Sender</option>
|
||
{members.map((m) => (
|
||
<option key={m.userId} value={m.userId}>
|
||
{m.profile?.displayName ?? m.userId.slice(0, 6)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<label className="flex cursor-pointer items-center gap-1 rounded-md border border-line bg-surface-3 px-2 py-1 text-fg dark:bg-[#383a40]">
|
||
<input
|
||
type="checkbox"
|
||
checked={attachmentsOnly}
|
||
onChange={(e) => onAttachmentsOnlyChange(e.target.checked)}
|
||
className="accent-accent"
|
||
/>
|
||
<span>Nur Anhänge</span>
|
||
</label>
|
||
<label className="flex items-center gap-1">
|
||
<span>Von</span>
|
||
<input
|
||
type="date"
|
||
value={dateFrom}
|
||
onChange={(e) => onDateFromChange(e.target.value)}
|
||
className="rounded-md border border-line bg-surface-3 px-2 py-1 text-fg outline-none focus:border-accent dark:bg-[#383a40]"
|
||
/>
|
||
</label>
|
||
<label className="flex items-center gap-1">
|
||
<span>Bis</span>
|
||
<input
|
||
type="date"
|
||
value={dateTo}
|
||
onChange={(e) => onDateToChange(e.target.value)}
|
||
className="rounded-md border border-line bg-surface-3 px-2 py-1 text-fg outline-none focus:border-accent dark:bg-[#383a40]"
|
||
/>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function computeDeliveryState(args: {
|
||
messageId: string;
|
||
isGroup: boolean;
|
||
recipientCount: number;
|
||
peerReadSet: Set<string>;
|
||
peerDeliveredSet: Set<string>;
|
||
groupRead: Map<string, Set<string>>;
|
||
groupDelivered: Map<string, Set<string>>;
|
||
}): 'sent' | 'delivered' | 'read' {
|
||
if (!args.isGroup) {
|
||
if (args.peerReadSet.has(args.messageId)) return 'read';
|
||
if (args.peerDeliveredSet.has(args.messageId)) return 'delivered';
|
||
return 'sent';
|
||
}
|
||
if (args.recipientCount === 0) return 'sent';
|
||
const reads = args.groupRead.get(args.messageId);
|
||
if (reads && reads.size >= args.recipientCount) return 'read';
|
||
const delivered = args.groupDelivered.get(args.messageId);
|
||
if (delivered && delivered.size >= args.recipientCount) return 'delivered';
|
||
return 'sent';
|
||
}
|
||
|
||
function PendingBubble({
|
||
item,
|
||
onRetry,
|
||
onCancel,
|
||
}: {
|
||
item: OutboxItem;
|
||
onRetry: () => void;
|
||
onCancel: () => void;
|
||
}) {
|
||
const failed = item.attempts >= 8;
|
||
return (
|
||
<div className="flex justify-end py-0.5">
|
||
<div
|
||
className={
|
||
'max-w-[72%] rounded-[18px] px-3.5 py-2 text-sm ' +
|
||
(failed
|
||
? 'border border-rose-500/40 bg-rose-500/10 text-rose-700 dark:text-rose-100'
|
||
: 'border border-dashed border-accent/50 bg-accent/10 text-fg opacity-80')
|
||
}
|
||
>
|
||
<p className="whitespace-pre-wrap break-words">{item.text}</p>
|
||
<div className="mt-1 flex items-center justify-end gap-2 text-[10px] uppercase tracking-wider text-fg-muted">
|
||
{failed ? (
|
||
<>
|
||
<span>{item.lastError ?? 'Senden fehlgeschlagen'}</span>
|
||
<button
|
||
type="button"
|
||
onClick={onRetry}
|
||
className="cursor-pointer rounded px-1.5 py-0.5 font-semibold text-accent hover:underline"
|
||
>
|
||
Erneut
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={onCancel}
|
||
className="cursor-pointer rounded px-1.5 py-0.5 font-semibold text-rose-600 hover:underline dark:text-rose-300"
|
||
>
|
||
Verwerfen
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<SpinnerIcon className="h-3 w-3 animate-spin" />
|
||
<span>{item.attempts === 0 ? 'Senden…' : 'Wiederhole (' + item.attempts + ')'}</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Banner({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div
|
||
role="alert"
|
||
className="flex items-start gap-3 rounded-lg border border-rose-500/30 bg-rose-500/10 p-3 text-sm text-rose-700 dark:text-rose-100"
|
||
>
|
||
<AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-500 dark:text-rose-400" />
|
||
<p className="min-w-0 flex-1 break-words">{children}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AttachmentPreview({
|
||
file,
|
||
viewOnce,
|
||
onRemove,
|
||
onEdit,
|
||
onToggleViewOnce,
|
||
}: {
|
||
file: File;
|
||
viewOnce: boolean;
|
||
onRemove: () => void;
|
||
onEdit?: () => void;
|
||
onToggleViewOnce?: () => void;
|
||
}) {
|
||
const { t } = useTranslation(['app']);
|
||
const isImage = file.type.startsWith('image/');
|
||
const [url, setUrl] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
if (!isImage) return;
|
||
const u = URL.createObjectURL(file);
|
||
setUrl(u);
|
||
return () => URL.revokeObjectURL(u);
|
||
}, [file, isImage]);
|
||
return (
|
||
<div className="group relative overflow-hidden rounded-lg border border-line bg-surface-2 dark:bg-[#2b2d31]">
|
||
{isImage && url ? (
|
||
<img src={url} alt={file.name} className="block h-20 w-20 object-cover" />
|
||
) : (
|
||
<div className="flex h-20 w-32 flex-col justify-center gap-0.5 px-2 text-[10px]">
|
||
<span className="truncate font-semibold text-fg" title={file.name}>
|
||
{file.name || 'Datei'}
|
||
</span>
|
||
<span className="text-fg-muted">{file.type || 'unbekannt'}</span>
|
||
<span className="text-fg-muted">{(file.size / 1024).toFixed(0)} KB</span>
|
||
</div>
|
||
)}
|
||
{isImage && onEdit && (
|
||
<button
|
||
type="button"
|
||
onClick={onEdit}
|
||
aria-label="Bearbeiten"
|
||
title="Bearbeiten"
|
||
className="absolute bottom-1 left-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white opacity-0 transition group-hover:opacity-100 hover:bg-accent/80"
|
||
>
|
||
<PencilIcon className="h-3 w-3" />
|
||
</button>
|
||
)}
|
||
{isImage && onToggleViewOnce && (
|
||
<button
|
||
type="button"
|
||
onClick={onToggleViewOnce}
|
||
aria-label={
|
||
viewOnce
|
||
? t('app:composer.view_once_off', { defaultValue: 'Einmal-Ansicht deaktivieren' })
|
||
: t('app:composer.view_once_on', { defaultValue: 'Einmal-Ansicht aktivieren' })
|
||
}
|
||
title={
|
||
viewOnce
|
||
? t('app:composer.view_once_on_hint', {
|
||
defaultValue: 'Empfänger sieht das Bild nur einmal',
|
||
})
|
||
: t('app:composer.view_once_off_hint', { defaultValue: 'Einmal-Ansicht ein/aus' })
|
||
}
|
||
className={
|
||
'absolute bottom-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full transition ' +
|
||
(viewOnce
|
||
? 'bg-accent text-accent-fg opacity-100'
|
||
: 'bg-black/70 text-white opacity-0 hover:bg-accent/80 group-hover:opacity-100')
|
||
}
|
||
>
|
||
{viewOnce ? <EyeIcon className="h-3 w-3" /> : <EyeOffIcon className="h-3 w-3" />}
|
||
</button>
|
||
)}
|
||
{/* When viewOnce is on, overlay a persistent "1×" badge so the user
|
||
has visual confirmation independent of the small toggle button. */}
|
||
{isImage && viewOnce && (
|
||
<div
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute bottom-1 right-7 rounded-md bg-accent/90 px-1 py-0.5 text-[9px] font-bold text-accent-fg"
|
||
>
|
||
1×
|
||
</div>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={onRemove}
|
||
aria-label="Entfernen"
|
||
className="absolute right-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white transition hover:bg-rose-500/80"
|
||
>
|
||
<XIcon className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|