fix: stop leaking CSS rules from dynamic UI styles (#1084) (#1103)

* fix: stop leaking CSS rules from dynamic position styles

* Fix floating surfaces on web

* Stop diff controls growing Unistyles rules

* Use inline style escape hatch in diff pane

* Centralize dynamic style escape hatches

* Restore startup workspace navigation

* Upgrade Unistyles for web cleanup fix

* Update review style test for inline styles

* Use redirect for startup workspace restore

* Update startup redirect test

packages/app/src/components/ui/floating.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, useMemo, type ComponentProps, type ReactElement, type ReactNode } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  type ScrollViewProps,
+  type StyleProp,
+  type View,
+  type ViewStyle,
+} from "react-native";
+import Animated from "react-native-reanimated";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+
+export interface FloatingSurfaceProps extends Omit<ComponentProps<typeof Animated.View>, "style"> {
+  frameStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const FloatingSurface = forwardRef<View, FloatingSurfaceProps>(function FloatingSurface(
+  { frameStyle, style, ...props },
+  ref,
+): ReactElement {
+  const inlineFrameStyle = useMemo(() => {
+    const flattened = StyleSheet.flatten(frameStyle);
+    return flattened ? inlineUnistylesStyle(flattened) : undefined;
+  }, [frameStyle]);
+  const surfaceStyle = useMemo(() => [style, inlineFrameStyle], [inlineFrameStyle, style]);
+  return <Animated.View {...props} ref={ref} style={surfaceStyle} />;
+});
+
+export interface FloatingScrollViewProps {
+  bounces?: boolean;
+  children: ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  keyboardShouldPersistTaps?: ScrollViewProps["keyboardShouldPersistTaps"];
+  showsVerticalScrollIndicator?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function FloatingScrollView({
+  bounces,
+  children,
+  contentContainerStyle,
+  keyboardShouldPersistTaps,
+  showsVerticalScrollIndicator,
+  style,
+}: FloatingScrollViewProps): ReactElement {
+  const inlineStyle = useMemo(() => {
+    const flattened = StyleSheet.flatten(style);
+    return flattened ? inlineUnistylesStyle(flattened) : undefined;
+  }, [style]);
+
+  return (
+    <ScrollView
+      bounces={bounces}
+      contentContainerStyle={contentContainerStyle}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      style={inlineStyle}
+    >
+      {children}
+    </ScrollView>
+  );
+}