heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(direct): enlarge DM list avatars to size 500 with 80px row height and matched virtualizer estimate for a denser two-line layout

Browse source
This commit is contained in:
heaven 2026-05-14 01:05:32 +03:00
parent c3a384b651
commit 2d74848509
3 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/features/room-nav/DmStreamRow.tsx
View file

@ -356,7 +356,7 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
gap="300" gap="300"
className={css.DmRowInner} className={css.DmRowInner}
> >
<Avatar size="300" radii="400"> <Avatar size="500" radii="500">
<RoomAvatar <RoomAvatar
roomId={room.roomId} roomId={room.roomId}
src={ src={
@ -373,7 +373,7 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
} }
alt={roomName} alt={roomName}
renderFallback={() => ( renderFallback={() => (
<Text as="span" size="H6"> <Text as="span" size="H4">
{nameInitials(roomName)} {nameInitials(roomName)}
</Text> </Text>
)} )}

7
src/app/features/room-nav/styles.css.ts
View file

@ -8,7 +8,10 @@ export const CategoryButtonIcon = style({
opacity: config.opacity.P400, opacity: config.opacity.P400,
}); });
const DmRowMinHeight = toRem(68); // Avatar `size="500"` (~58px) sits with symmetric 10px breathing room
// top/bottom — minimum row height has to clear avatar + padding so the
// circle never clips against the row's selected/hover background.
const DmRowMinHeight = toRem(80);
const DmRowTitleBlockHeight = toRem(40); const DmRowTitleBlockHeight = toRem(40);
export const DmRowOuter = style({ export const DmRowOuter = style({
@ -19,7 +22,7 @@ export const DmRowOuter = style({
export const DmRowInner = style({ export const DmRowInner = style({
minHeight: DmRowMinHeight, minHeight: DmRowMinHeight,
boxSizing: 'border-box', boxSizing: 'border-box',
padding: `${toRem(8)} 0`, padding: `${toRem(10)} 0`,
}); });
// Locks the title block to its natural 2-line height so the name does // Locks the title block to its natural 2-line height so the name does

7
src/app/pages/client/direct/Direct.tsx
View file

@ -173,13 +173,14 @@ export function Direct() {
// Per-kind estimates so the initial scroll height is close to actual // Per-kind estimates so the initial scroll height is close to actual
// before measureElement self-corrects: invite cards are ~140px (header + // before measureElement self-corrects: invite cards are ~140px (header +
// sub-line + buttons + optional topic), spam toggle is ~32px, DM rows // sub-line + buttons + optional topic), spam toggle is ~32px, DM rows
// ~68px. Keeps first paint stable when the panel opens with invites. // ~80px (avatar 58px + 2-line title block + padding). Keeps first paint
// stable when the panel opens with invites.
estimateSize: (index) => { estimateSize: (index) => {
const item = items[index]; const item = items[index];
if (!item) return 68; if (!item) return 80;
if (item.kind === 'invite' || item.kind === 'spam-invite') return 140; if (item.kind === 'invite' || item.kind === 'spam-invite') return 140;
if (item.kind === 'spam-toggle') return 32; if (item.kind === 'spam-toggle') return 32;
return 68; return 80;
}, },
// Stable per-item identity so the measurement cache survives item-kind // Stable per-item identity so the measurement cache survives item-kind
// shifts at the same index. Without this TanStack falls back to index, // shifts at the same index. Without this TanStack falls back to index,