byGalax
4db65993d5
Visual:
- Light/dark theme via ThemeContext + CSS vars
- New design tokens (surface/fg/accent/line/etc.) across all pages
- Reusable Avatar component (img + letter fallback) wired into UserBar,
ConversationHeader, ChatsPage, FriendsPage, GroupInfoPanel, IncomingCallPanel
Calls:
- Split call UI: IncomingCallPanel, InCallPanel, CallControls,
CallParticipantTile, ScreenShareViewer
- Active speaker hook (useActiveSpeakers)
- Fix: ActiveCallBanner stayed hidden after hangup while peers in room.
- useCallPresence: bind presence callbacks only when we own subscribe
(Supabase forbids .on() after .subscribe() on shared dedup'd channels)
- useCallPresence: never removeChannel — channel is shared with CallContext
so tearing it down on ConversationHeader unmount killed live tracking
- ActiveCallBanner: lastCallConversationId fallback so banner shows
instantly after hangup, auto-dismiss when room confirmed empty
- Drop unused useAnyActiveCall
Bump tauri version 0.5.0 -> 0.6.0
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import type { ConversationMember } from '@chat-app/shared/chat';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface Props {
|
|
typingUserIds: string[];
|
|
members: ConversationMember[];
|
|
}
|
|
|
|
export function TypingIndicator({ typingUserIds, members }: Props) {
|
|
const { t } = useTranslation(['app']);
|
|
if (typingUserIds.length === 0) return null;
|
|
|
|
const names = typingUserIds
|
|
.map((id) => members.find((m) => m.userId === id)?.profile?.displayName)
|
|
.filter((n): n is string => typeof n === 'string' && n.length > 0);
|
|
|
|
const text =
|
|
names.length === 1
|
|
? t('app:chats.typing_one', { name: names[0] })
|
|
: t('app:chats.typing_many', { count: typingUserIds.length });
|
|
|
|
return (
|
|
<div className="bg-surface-3 px-6 pb-1 pt-0 text-xs text-fg-muted">
|
|
<span className="inline-flex items-center gap-2">
|
|
<TypingDots />
|
|
<span>{text}</span>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TypingDots() {
|
|
return (
|
|
<span aria-hidden="true" className="inline-flex items-center gap-0.5">
|
|
<span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite]" />
|
|
<span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.15s]" />
|
|
<span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.3s]" />
|
|
</span>
|
|
);
|
|
}
|