jared
c54cb126ff
Fix settings modal regression: Modal500 was wrapped in useModalStyle(560), forcing maxWidth 560px and squishing the two-pane Settings layout (folds size="500" is ~50rem). Restore desktop width to the folds recipe while keeping mobile fullscreen. N-series fixes: - N13 ScheduledMessagesTray header: <Box as="button"> -> folds <Button> - N28 composer char counter: drop undefined --tc-surface-low + opacity, use priority="300" and config.space token - N31 collapsible "Read more" toggle: padded <Button> -> flush inline-button pattern matching (edited) link - N41 UserPrivateNotes "Saving..." now shows a folds <Spinner> - N43 Night Light slider: add accentColor; label opacity -> priority - N44 mention-highlight Reset: bare <button> -> folds <Button> (drops undefined --border-interactive-normal); Boot button kept (TDS-only) - N45 SelectTheme trigger variant -> Secondary to match SettingsSelect - N49 RoomInsights StatTile emoji -> folds <Icon> (Photo/VideoCamera/ Headphone/File) - N54/N57 PiP overlay badges + fullscreen button: token discipline (config.radii/space, folds Text); dark scrim kept for video legibility - N60 knock badge: match Pinned Messages pattern (no wrapper div, toRem insets, no hardcoded size overrides) - N62 unverified-device banner: 3px left-accent -> standard border via color.Warning.ContainerLine; drop opacity hacks - N65 Edit History: real "Load more" pagination (accumulate next_batch, de-dupe by id, re-sort by ts) replacing passive text - N66 search date fields: raw <input type="date"> -> folds <Input> - N67 SeasonalEffect z-index 9999 -> 9997 (below Night Light + modals) - N73 Pending Requests header uses css.MembersGroupLabel - N74 remove raw em-sized emoji <span> in RoomNavItem name - N85/N86 RemindMeDialog: <Box role="dialog"> -> folds <Dialog>; preset MenuItems -> Buttons (fixes invalid menuitem-in-dialog ARIA) Document deliberate WON'T FIX rationale for N9, N51, N61, N71, N75, N77. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
459 lines
19 KiB
TypeScript
459 lines
19 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Avatar, Box, Icon, IconButton, Icons, IconSrc, Scroll, Text, color, config } from 'folds';
|
|
import { EventType } from 'matrix-js-sdk';
|
|
import { Page, PageContent, PageHeader } from '../../components/page';
|
|
import { SequenceCard } from '../../components/sequence-card';
|
|
import { useRoom } from '../../hooks/useRoom';
|
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
|
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
|
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
|
|
import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
|
|
import { UserAvatar } from '../../components/user-avatar';
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
function formatDate(ts: number): string {
|
|
return new Date(ts).toLocaleDateString(undefined, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
// ── Section header ────────────────────────────────────────────────────────────
|
|
|
|
function SectionHeader({ label }: { label: string }) {
|
|
return (
|
|
<Text size="L400" priority="300">
|
|
{label}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
// ── Stat tile ─────────────────────────────────────────────────────────────────
|
|
|
|
function StatTile({ icon, count, label }: { icon: IconSrc; count: number; label: string }) {
|
|
return (
|
|
<Box
|
|
direction="Column"
|
|
alignItems="Center"
|
|
gap="100"
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 64,
|
|
padding: `${config.space.S300} ${config.space.S200}`,
|
|
borderRadius: config.radii.R300,
|
|
border: `1px solid ${color.Surface.ContainerLine}`,
|
|
background: color.Surface.Container,
|
|
}}
|
|
>
|
|
<Icon src={icon} size="300" />
|
|
<Text size="H4" style={{ fontWeight: 700 }}>
|
|
{count}
|
|
</Text>
|
|
<Text size="T200" priority="300" align="Center">
|
|
{label}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// ── Main component ────────────────────────────────────────────────────────────
|
|
|
|
type RoomInsightsProps = {
|
|
requestClose: () => void;
|
|
};
|
|
|
|
export function RoomInsights({ requestClose }: RoomInsightsProps) {
|
|
const mx = useMatrixClient();
|
|
const room = useRoom();
|
|
const useAuthentication = useMediaAuthentication();
|
|
|
|
const stats = useMemo(() => {
|
|
const events = room.getLiveTimeline().getEvents();
|
|
|
|
// ── A. Message count by member ──────────────────────────────────────────
|
|
const msgCounts = new Map<string, number>();
|
|
for (const ev of events) {
|
|
if (ev.getType() === EventType.RoomMessage && !ev.isDecryptionFailure()) {
|
|
const sender = ev.getSender();
|
|
if (sender) msgCounts.set(sender, (msgCounts.get(sender) ?? 0) + 1);
|
|
}
|
|
}
|
|
const top5 = [...msgCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5);
|
|
|
|
// ── B. Top 5 reactions ──────────────────────────────────────────────────
|
|
const reactionCounts = new Map<string, number>();
|
|
for (const ev of events) {
|
|
if (ev.getType() === EventType.Reaction) {
|
|
const key = ev.getContent()['m.relates_to']?.key as string | undefined;
|
|
if (key) reactionCounts.set(key, (reactionCounts.get(key) ?? 0) + 1);
|
|
}
|
|
}
|
|
const top5Reactions = [...reactionCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5);
|
|
|
|
// ── C. Media breakdown ──────────────────────────────────────────────────
|
|
const mediaCounts = { image: 0, video: 0, audio: 0, file: 0 };
|
|
for (const ev of events) {
|
|
if (ev.getType() !== EventType.RoomMessage) continue;
|
|
const msgtype = ev.getContent().msgtype as string | undefined;
|
|
if (msgtype === 'm.image') mediaCounts.image++;
|
|
else if (msgtype === 'm.video') mediaCounts.video++;
|
|
else if (msgtype === 'm.audio') mediaCounts.audio++;
|
|
else if (msgtype === 'm.file') mediaCounts.file++;
|
|
}
|
|
|
|
// ── D. Activity heatmap — messages per hour ─────────────────────────────
|
|
const hourBuckets = new Array<number>(24).fill(0);
|
|
for (const ev of events) {
|
|
if (ev.getType() === EventType.RoomMessage) {
|
|
hourBuckets[new Date(ev.getTs()).getHours()]++;
|
|
}
|
|
}
|
|
|
|
// ── E. Summary stats ────────────────────────────────────────────────────
|
|
const totalMessages = [...msgCounts.values()].reduce((a, b) => a + b, 0);
|
|
const uniqueParticipants = msgCounts.size;
|
|
|
|
const msgEvents = events.filter((ev) => ev.getType() === EventType.RoomMessage);
|
|
const allTs = msgEvents.map((ev) => ev.getTs());
|
|
const oldestTs = allTs.length > 0 ? Math.min(...allTs) : null;
|
|
const newestTs = allTs.length > 0 ? Math.max(...allTs) : null;
|
|
|
|
return {
|
|
top5,
|
|
top5Reactions,
|
|
mediaCounts,
|
|
hourBuckets,
|
|
totalMessages,
|
|
uniqueParticipants,
|
|
oldestTs,
|
|
newestTs,
|
|
totalCached: events.length,
|
|
};
|
|
}, [room]);
|
|
|
|
const maxHour = Math.max(...stats.hourBuckets, 1);
|
|
const maxMsgCount = stats.top5.length > 0 ? (stats.top5[0]?.[1] ?? 1) : 1;
|
|
|
|
return (
|
|
<Page>
|
|
<PageHeader outlined={false}>
|
|
<Box grow="Yes" gap="200">
|
|
<Box grow="Yes" alignItems="Center" gap="200">
|
|
<Icon src={Icons.Info} size="200" />
|
|
<Text as="h2" size="H3" truncate>
|
|
Insights
|
|
</Text>
|
|
</Box>
|
|
<Box shrink="No">
|
|
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
</PageHeader>
|
|
|
|
<Box grow="Yes">
|
|
<Scroll hideTrack visibility="Hover">
|
|
<PageContent>
|
|
<Box direction="Column" gap="500">
|
|
{/* ── Disclaimer banner ── */}
|
|
<SequenceCard variant="SurfaceVariant" gap="200" alignItems="Center">
|
|
<Icon src={Icons.Warning} size="200" style={{ color: color.Warning.Main }} />
|
|
<Box direction="Column" gap="100">
|
|
<Text size="T300">
|
|
<strong>
|
|
Based on {stats.totalMessages} locally cached message
|
|
{stats.totalMessages !== 1 ? 's' : ''}
|
|
</strong>
|
|
</Text>
|
|
{stats.oldestTs !== null && stats.newestTs !== null && (
|
|
<Text size="T200" priority="300">
|
|
from {formatDate(stats.oldestTs)} to {formatDate(stats.newestTs)}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</SequenceCard>
|
|
|
|
{/* ── Summary row ── */}
|
|
<Box direction="Column" gap="200">
|
|
<SectionHeader label="Summary" />
|
|
<Box gap="200" wrap="Wrap">
|
|
<Box
|
|
direction="Column"
|
|
alignItems="Center"
|
|
gap="100"
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 80,
|
|
padding: `${config.space.S300} ${config.space.S200}`,
|
|
borderRadius: config.radii.R300,
|
|
border: `1px solid ${color.Surface.ContainerLine}`,
|
|
background: color.Surface.Container,
|
|
}}
|
|
>
|
|
<Text
|
|
size="H5"
|
|
style={{
|
|
fontWeight: 700,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
maxWidth: '100%',
|
|
}}
|
|
>
|
|
{stats.totalMessages.toLocaleString()}
|
|
</Text>
|
|
<Text size="T200" priority="300" align="Center">
|
|
Messages
|
|
</Text>
|
|
</Box>
|
|
<Box
|
|
direction="Column"
|
|
alignItems="Center"
|
|
gap="100"
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 80,
|
|
padding: `${config.space.S300} ${config.space.S200}`,
|
|
borderRadius: config.radii.R300,
|
|
border: `1px solid ${color.Surface.ContainerLine}`,
|
|
background: color.Surface.Container,
|
|
}}
|
|
>
|
|
<Text
|
|
size="H5"
|
|
style={{
|
|
fontWeight: 700,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
maxWidth: '100%',
|
|
}}
|
|
>
|
|
{stats.uniqueParticipants.toLocaleString()}
|
|
</Text>
|
|
<Text size="T200" priority="300" align="Center">
|
|
Participants
|
|
</Text>
|
|
</Box>
|
|
<Box
|
|
direction="Column"
|
|
alignItems="Center"
|
|
gap="100"
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 80,
|
|
padding: `${config.space.S300} ${config.space.S200}`,
|
|
borderRadius: config.radii.R300,
|
|
border: `1px solid ${color.Surface.ContainerLine}`,
|
|
background: color.Surface.Container,
|
|
}}
|
|
>
|
|
<Text
|
|
size="H5"
|
|
style={{
|
|
fontWeight: 700,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
maxWidth: '100%',
|
|
}}
|
|
>
|
|
{stats.totalCached.toLocaleString()}
|
|
</Text>
|
|
<Text size="T200" priority="300" align="Center">
|
|
Cached events
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* ── Media shared ── */}
|
|
<Box direction="Column" gap="200">
|
|
<SectionHeader label="Media Shared" />
|
|
<Box gap="200" wrap="Wrap">
|
|
<StatTile icon={Icons.Photo} count={stats.mediaCounts.image} label="Images" />
|
|
<StatTile
|
|
icon={Icons.VideoCamera}
|
|
count={stats.mediaCounts.video}
|
|
label="Videos"
|
|
/>
|
|
<StatTile icon={Icons.Headphone} count={stats.mediaCounts.audio} label="Audio" />
|
|
<StatTile icon={Icons.File} count={stats.mediaCounts.file} label="Files" />
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* ── Most active members ── */}
|
|
{stats.top5.length > 0 && (
|
|
<Box direction="Column" gap="200">
|
|
<SectionHeader label="Most Active Members" />
|
|
<Box direction="Column" gap="200">
|
|
{stats.top5.map(([userId, count], index) => {
|
|
const displayName =
|
|
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
|
|
const avatarMxc = getMemberAvatarMxc(room, userId);
|
|
const avatarUrl = avatarMxc
|
|
? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ??
|
|
undefined)
|
|
: undefined;
|
|
const barWidth = `${Math.max(4, (count / maxMsgCount) * 100)}%`;
|
|
|
|
return (
|
|
<Box key={userId} alignItems="Center" gap="200">
|
|
{/* Rank */}
|
|
<Text
|
|
size="T300"
|
|
priority="300"
|
|
style={{ width: 16, flexShrink: 0, textAlign: 'center' }}
|
|
>
|
|
{index + 1}
|
|
</Text>
|
|
|
|
{/* Avatar */}
|
|
<Box shrink="No">
|
|
<Avatar size="200" radii="300">
|
|
<UserAvatar
|
|
userId={userId}
|
|
src={avatarUrl}
|
|
alt={displayName}
|
|
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
|
|
/>
|
|
</Avatar>
|
|
</Box>
|
|
|
|
{/* Name + bar */}
|
|
<Box
|
|
grow="Yes"
|
|
direction="Column"
|
|
gap="100"
|
|
style={{ overflow: 'hidden' }}
|
|
>
|
|
<Text size="T300" truncate style={{ lineHeight: 1 }}>
|
|
{displayName}
|
|
</Text>
|
|
<Box alignItems="Center" gap="200">
|
|
<div
|
|
style={{
|
|
height: 6,
|
|
width: barWidth,
|
|
background: color.Primary.Main,
|
|
borderRadius: config.radii.R300,
|
|
transition: 'width 0.3s ease',
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
<Text size="T200" priority="300" style={{ flexShrink: 0 }}>
|
|
{count}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* ── Top reactions ── */}
|
|
{stats.top5Reactions.length > 0 && (
|
|
<Box direction="Column" gap="200">
|
|
<SectionHeader label="Top Reactions" />
|
|
<Box gap="200" wrap="Wrap">
|
|
{stats.top5Reactions.map(([emoji, count]) => (
|
|
<Box
|
|
key={emoji}
|
|
alignItems="Center"
|
|
gap="100"
|
|
style={{
|
|
padding: `${config.space.S100} ${config.space.S200}`,
|
|
borderRadius: config.radii.R300,
|
|
border: `1px solid ${color.Surface.ContainerLine}`,
|
|
background: color.Surface.Container,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Text size="H5">{emoji}</Text>
|
|
<Text size="T300" priority="300">
|
|
{count}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* ── Activity by hour ── */}
|
|
<Box direction="Column" gap="200">
|
|
<SectionHeader label="Activity by Hour" />
|
|
<Box
|
|
direction="Column"
|
|
gap="100"
|
|
style={{
|
|
padding: config.space.S300,
|
|
borderRadius: config.radii.R300,
|
|
border: `1px solid ${color.Surface.ContainerLine}`,
|
|
background: color.Surface.Container,
|
|
}}
|
|
>
|
|
{/* Bars */}
|
|
<Box
|
|
alignItems="End"
|
|
style={{
|
|
height: 60,
|
|
gap: 2,
|
|
}}
|
|
>
|
|
{stats.hourBuckets.map((count, h) => (
|
|
<Box
|
|
key={h}
|
|
direction="Column"
|
|
alignItems="Center"
|
|
style={{ flex: 1, height: '100%', justifyContent: 'flex-end' }}
|
|
>
|
|
<div
|
|
title={`${h}:00 — ${count} message${count !== 1 ? 's' : ''}`}
|
|
style={{
|
|
width: '100%',
|
|
height: `${Math.max(2, (count / maxHour) * 48)}px`,
|
|
background:
|
|
count > 0 && count === maxHour
|
|
? color.Primary.Main
|
|
: color.SurfaceVariant.Container,
|
|
borderRadius: `${config.radii.R300} ${config.radii.R300} 0 0`,
|
|
transition: 'height 0.2s ease',
|
|
}}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Hour labels: show 0, 6, 12, 18 */}
|
|
<Box style={{ gap: 0 }}>
|
|
{stats.hourBuckets.map((_, h) => (
|
|
<Box key={h} justifyContent="Center" style={{ flex: 1 }}>
|
|
{h % 6 === 0 ? (
|
|
<Text size="T200" priority="300" align="Center">
|
|
{h}
|
|
</Text>
|
|
) : null}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
<Text size="T200" priority="300">
|
|
Hour of day (local time, 0 = midnight)
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Bottom padding */}
|
|
<Box style={{ height: config.space.S200 }} />
|
|
</Box>
|
|
</PageContent>
|
|
</Scroll>
|
|
</Box>
|
|
</Page>
|
|
);
|
|
}
|