diff --git a/js/desktop/src/features/particles/media-particle-view.tsx b/js/desktop/src/features/particles/media-particle-view.tsx index 3bd8ea8..2efad22 100644 --- a/js/desktop/src/features/particles/media-particle-view.tsx +++ b/js/desktop/src/features/particles/media-particle-view.tsx @@ -159,7 +159,7 @@ export const MediaParticleView = forwardRef {transcript && ( diff --git a/js/mobile/src/features/settings/AccountScreen.tsx b/js/mobile/src/features/settings/AccountScreen.tsx index 65f72d2..ee1a133 100644 --- a/js/mobile/src/features/settings/AccountScreen.tsx +++ b/js/mobile/src/features/settings/AccountScreen.tsx @@ -20,7 +20,6 @@ export function AccountScreen({ navigation }: RootStackScreenProps<"Account">) { - ); diff --git a/js/mobile/src/features/stream-view/StreamView.tsx b/js/mobile/src/features/stream-view/StreamView.tsx index 1a644dc..ce30573 100644 --- a/js/mobile/src/features/stream-view/StreamView.tsx +++ b/js/mobile/src/features/stream-view/StreamView.tsx @@ -16,6 +16,7 @@ import Animated, { withSpring, withTiming, } from "react-native-reanimated"; +import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg"; import { isParticleDeleted, type Particle } from "@/api/types"; import { parseParticlePath, @@ -60,6 +61,9 @@ const DISMISS_VELOCITY = 900; // Swipe-up reactions commit thresholds — flick up ~80px or with enough velocity. const REACTIONS_DISTANCE = 80; const REACTIONS_VELOCITY = 600; +// Approx height of the ComposeDock from the screen bottom (record button stack +// + pb-10). Status pills sit just above this so they aren't hidden behind it. +const COMPOSE_DOCK_HEIGHT = 152; interface StreamViewProps { streamParticle: Particle & { type: "stream" }; @@ -358,14 +362,29 @@ function StreamViewInner({ streamParticle, path, onExit }: StreamViewProps) { {/* Top chrome: segmented bar + metadata. Painted over the canvas so the canvas can be edge-to-edge but content gets a safe-area - gradient to read against. */} + gradient to read against. A real linear gradient (vs a flat + bg-black/40 block) avoids the hard "bar" edge under the chrome. */} + className="absolute inset-x-0 top-0" + style={{ height: insets.top + 120 }} + > + + + + + + + + + + {/* Bottom chrome: paused pill + exit countdown. Sit above the - home-indicator safe-area so they aren't visually clipped. */} + compose dock so the record button doesn't cover them. */} {paused ? (