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

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

@ -8,7 +8,10 @@ export const CategoryButtonIcon = style({
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);
export const DmRowOuter = style({
@ -19,7 +22,7 @@ export const DmRowOuter = style({
export const DmRowInner = style({
minHeight: DmRowMinHeight,
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

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
// before measureElement self-corrects: invite cards are ~140px (header +
// 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) => {
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 === 'spam-toggle') return 32;
return 68;
return 80;
},
// Stable per-item identity so the measurement cache survives item-kind
// shifts at the same index. Without this TanStack falls back to index,