fix(feed): visible post divider + reliable FAB positioning

- Post divider was on each PostCard's outer Pressable as borderBottom
  (#222), which was barely visible on OLED black and disappeared
  entirely in pressed state (the pressed bg ate the line). Moved the
  seam to a dedicated PostSeparator component (1px, #2a2a2a) wired as
  FlatList's ItemSeparatorComponent on both /feed (timeline / for-you
  / trending) and /feed/tag/[tag]. Also bumped inter-card vertical
  padding (14-16 top / 16-20 bottom) so cards have real breathing room
  even before the divider.
- FAB position was flaky: with <Stack> at the (app) level the overlay
  could end up positioned against the Stack's card view instead of the
  tab container, which made the button drift around and stick against
  unexpected edges. Wrapped it in an absoluteFill container with
  pointerEvents="box-none" — the wrapper owns positioning against the
  tab screen, the button inside just declares right: 14 / bottom: N.
  Bumped bottom offset to `max(insets.bottom, 8) + 70` so the FAB
  always clears the 5-icon NavBar with ~14px visual gap on every
  device. Shadow switched from blue-cast to standard dark for better
  depth perception on dark backgrounds.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
vsecoder
2026-04-18 20:23:52 +03:00
parent 51bc0a1850
commit a248c540d5
3 changed files with 55 additions and 27 deletions

View File

@@ -174,11 +174,9 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
style={({ pressed }) => ({
flexDirection: 'row',
paddingHorizontal: 16,
paddingTop: compact ? 12 : 16,
paddingBottom: compact ? 14 : 18,
paddingTop: compact ? 14 : 18,
paddingBottom: compact ? 16 : 20,
backgroundColor: pressed ? '#080808' : 'transparent',
borderBottomWidth: 1,
borderBottomColor: '#222222',
})}
>
{/* Avatar column */}
@@ -321,6 +319,20 @@ const _imgKeep = Image;
export const PostCard = React.memo(PostCardInner);
/**
* PostSeparator — visible divider line between post cards. Exported so
* every feed surface (timeline, author, hashtag, post detail) can pass
* it as ItemSeparatorComponent and get identical spacing / colour.
*
* The line colour (#2a2a2a) is the minimum grey that reads on OLED
* black under mobile-bright-mode gamma — go darker and the seam vanishes.
* Height 1 is one logical px (hairline on retina). No horizontal inset:
* Twitter runs the seam edge-to-edge and it looks cleaner than a gap.
*/
export function PostSeparator() {
return <View style={{ height: 1, backgroundColor: '#2a2a2a' }} />;
}
// ── Inline helpers ──────────────────────────────────────────────────────
/** ActionButton — small icon + optional label. */