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

feat(horseshoe): bump top profile and bottom call horseshoe radius to 32px with 12px void gap

Browse source
This commit is contained in:
v.lagerev 2026-05-11 00:54:58 +03:00
parent 7c37a2d9d0
commit 2a11f93964
3 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/features/room/RoomViewProfilePanel.css.ts
View file

@ -3,8 +3,8 @@ import { color, toRem } from 'folds';
// Shared with the call-horseshoe surface so both ends of the chat
// (top profile rail, bottom call rail) read with identical geometry.
export const HORSESHOE_RADIUS_PX = 24;
export const HORSESHOE_GAP_PX = 8;
export const HORSESHOE_RADIUS_PX = 32;
export const HORSESHOE_GAP_PX = 12;
// Outer container — establishes the positioning context for the
// absolutely-positioned panel and the under-panel chat column.

13
src/app/features/room/RoomViewProfilePanel.tsx
View file

@ -4,7 +4,7 @@
// Mobile (≤ 750): the top «horseshoe» rail. The chat header collapses
// to height 0 while the rail is open so the visible gap between the
// rail's rounded bottom and the chat's rounded top is exactly the
// shared `HORSESHOE_GAP` (8px), matching the bottom call horseshoe.
// shared `HORSESHOE_GAP_PX`, matching the bottom call horseshoe.
//
// Tablet + Desktop (> 750): no top horseshoe. The wrapper is a thin
// passthrough; the profile renders as a right-side pane via
@ -54,7 +54,7 @@ type DragState = {
// the chat header (1:1 DM only); slides up to close on drag-up
// anywhere on the panel. While the rail is open the chat header
// collapses to height 0 so there's no transparent ~50px void below
// the rail — the perceived gap matches the call horseshoe's 8px gap.
// the rail — the perceived gap matches the call horseshoe's gap.
function MobileProfileHorseshoe({ header, children }: RoomViewProfilePanelProps) {
const { t } = useTranslation();
const profileState = useAtomValue(userRoomProfileAtom);
@ -231,8 +231,9 @@ function MobileProfileHorseshoe({ header, children }: RoomViewProfilePanelProps)
backgroundColor: expandedPx > 0 ? '#090909' : undefined,
};
// The «two horseshoes» visual (8px gap + 24px bottom/top radii)
// is gated by an emerge curve that stays at 0 for most of the
// The «two horseshoes» visual (HORSESHOE_GAP_PX gap +
// HORSESHOE_RADIUS_PX bottom/top radii) is gated by an emerge
// curve that stays at 0 for most of the
// open progress and only ramps to 1 in the last 15%. Two reasons:
//
// 1) Drag-down to open — the chat header is still visible under
@ -370,8 +371,8 @@ function MobileProfileHorseshoe({ header, children }: RoomViewProfilePanelProps)
style={{
// Collapse the chat header to 0 height while the rail is
// open so the only visible chrome between the rail's
// rounded bottom and the chat's rounded top is the 8px
// gap. CSS-grid's `1fr → 0fr` is animatable, unlike
// rounded bottom and the chat's rounded top is the
// HORSESHOE_GAP_PX gap. CSS-grid's `1fr → 0fr` is animatable, unlike
// `height: auto`, and avoids needing to measure the
// header's intrinsic height in JS.
gridTemplateRows: `${1 - expandedFraction}fr`,

4
src/app/pages/HorseshoeContainer.css.ts
View file

@ -6,8 +6,8 @@ import { toRem } from 'folds';
// call rail is mounted, so the rest of the app keeps its normal page
// background.
const SURFACE_GAP_COLOR = '#090909';
const HORSESHOE_RADIUS = toRem(24);
const HORSESHOE_GAP = toRem(8);
const HORSESHOE_RADIUS = toRem(32);
const HORSESHOE_GAP = toRem(12);
// Outer flex column hosting app shell + bottom call rail.
// `min-height: 0` is required for nested scroll containers inside