@buoy-gg/react-query 7.0.33 → 7.0.35

package/lib/commonjs/react-query/components/query-browser/QueryStatusCount.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
 var _useQueryStatusCounts = _interopRequireDefault(require("../../hooks/useQueryStatusCounts"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,122 +24,77 @@ const QueryStatusCount = ({
     paused,
     inactive
   } = (0, _useQueryStatusCounts.default)();
-
-  // Scroll state management like ChipTabs
-  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
-  const touchStartX = (0, _react.useRef)(0);
-  const touchStartY = (0, _react.useRef)(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = (0, _sharedUi.useChipTap)();
   const handleFilterClick = (filter, event) => {
-    if (event) {
-      // Calculate distance moved during touch (like ChipTabs)
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-
-      // If touch moved more than 5px in any direction, it's a swipe, not a tap
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return; // Don't trigger filter change
-      }
-    }
+    if (!isTap(event)) return;
     if (onFilterChange) {
       // Toggle filter: if already active, clear it; otherwise set it
       onFilterChange(activeFilter === filter ? null : filter);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.queryStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      "sentry-label": "ignore devtools query status count scroll",
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContent,
-      onScrollBeginDrag: () => setIsScrolling(true),
-      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
-      onMomentumScrollBegin: () => setIsScrolling(true),
-      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Fresh",
-        color: "green",
-        count: fresh,
-        isActive: activeFilter === "fresh",
-        onPress: event => handleFilterClick("fresh", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fresh",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Loading",
-        color: "blue",
-        count: fetching,
-        isActive: activeFilter === "fetching",
-        onPress: event => handleFilterClick("fetching", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fetching",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Paused",
-        color: "purple",
-        count: paused,
-        isActive: activeFilter === "paused",
-        onPress: event => handleFilterClick("paused", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-paused",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Stale",
-        color: "yellow",
-        count: stale,
-        isActive: activeFilter === "stale",
-        onPress: event => handleFilterClick("stale", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-stale",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Idle",
-        color: "gray",
-        count: inactive,
-        isActive: activeFilter === "inactive",
-        onPress: event => handleFilterClick("inactive", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-inactive",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools query status count scroll",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Fresh",
+      color: "green",
+      count: fresh,
+      isActive: activeFilter === "fresh",
+      onPress: event => handleFilterClick("fresh", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fresh",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Loading",
+      color: "blue",
+      count: fetching,
+      isActive: activeFilter === "fetching",
+      onPress: event => handleFilterClick("fetching", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fetching",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Paused",
+      color: "purple",
+      count: paused,
+      isActive: activeFilter === "paused",
+      onPress: event => handleFilterClick("paused", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-paused",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Stale",
+      color: "yellow",
+      count: stale,
+      isActive: activeFilter === "stale",
+      onPress: event => handleFilterClick("stale", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-stale",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Idle",
+      color: "gray",
+      count: inactive,
+      isActive: activeFilter === "inactive",
+      onPress: event => handleFilterClick("inactive", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-inactive",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    })]
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  queryStatusContainer: {
-    // Container for ScrollView - take full width
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    // ScrollView itself styles
-    flex: 1
-  },
-  scrollContent: {
-    // ScrollView content styles
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    // Spacing between chips
-    paddingHorizontal: 4,
-    // Small padding on ends
-    paddingVertical: 4,
-    flexGrow: 1 // Allow content to grow to fill available space
-  }
-});
 var _default = exports.default = QueryStatusCount;

package/lib/commonjs/react-query/components/query-browser/StorageStatusCount.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
 var _storageQueryUtils = require("../../utils/storageQueryUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,21 +23,13 @@ const StorageStatusCount = ({
   onStorageTypesChange,
   counts
 }) => {
-  // Scroll state management like QueryStatusCount
-  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
-  const touchStartX = (0, _react.useRef)(0);
-  const touchStartY = (0, _react.useRef)(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = (0, _sharedUi.useChipTap)();
   const handleStorageTypeToggle = (storageType, event) => {
-    if (event) {
-      // Calculate distance moved during touch (like QueryStatusCount)
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-
-      // If touch moved more than 5px in any direction, it's a swipe, not a tap
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return; // Don't trigger filter change
-      }
-    }
+    if (!isTap(event)) return;
     if (onStorageTypesChange) {
       const newStorageTypes = new Set(activeStorageTypes);
       if (newStorageTypes.has(storageType)) {
@@ -49,58 +40,22 @@ const StorageStatusCount = ({
       onStorageTypesChange(newStorageTypes);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.storageStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      "sentry-label": "ignore devtools storage status count scroll",
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContent,
-      onScrollBeginDrag: () => setIsScrolling(true),
-      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
-      onMomentumScrollBegin: () => setIsScrolling(true),
-      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
-      children: allStorageTypes.map(storageType => {
-        const count = counts?.[storageType] ?? 0;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-          label: (0, _storageQueryUtils.getStorageTypeLabel)(storageType),
-          color: (0, _storageQueryUtils.getStorageTypeColor)(storageType),
-          count: count // Show actual storage query counts
-          ,
-          isActive: activeStorageTypes.has(storageType),
-          onPress: event => handleStorageTypeToggle(storageType, event),
-          onTouchStart: handleTouchStart,
-          showLabel: true
-        }, storageType);
-      })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools storage status count scroll",
+    children: allStorageTypes.map(storageType => {
+      const count = counts?.[storageType] ?? 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: (0, _storageQueryUtils.getStorageTypeLabel)(storageType),
+        color: (0, _storageQueryUtils.getStorageTypeColor)(storageType),
+        count: count // Show actual storage query counts
+        ,
+        isActive: activeStorageTypes.has(storageType),
+        onPress: event => handleStorageTypeToggle(storageType, event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }, storageType);
     })
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  storageStatusContainer: {
-    // Container for ScrollView - take full width
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    // ScrollView itself styles
-    flex: 1
-  },
-  scrollContent: {
-    // ScrollView content styles
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    // Spacing between chips
-    paddingHorizontal: 4,
-    // Small padding on ends
-    paddingVertical: 4,
-    flexGrow: 1 // Allow content to grow to fill available space
-  }
-});
 var _default = exports.default = StorageStatusCount;

package/lib/commonjs/react-query/stores/reactQueryEventStore.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.subscribeToReactQueryEvents = exports.setQueryClient = exports.reactQueryEventStore = exports.isReactQueryConnected = exports.getReactQueryEvents = exports.disconnectQueryClient = exports.clearReactQueryEvents = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _storageQueryUtils = require("../utils/storageQueryUtils");
 /**
  * React Query Event Store
@@ -29,13 +30,15 @@ let eventIdCounter = 0;
 function generateEventId() {
   return `rq-${Date.now()}-${++eventIdCounter}`;
 }
-class ReactQueryEventStore {
-  events = [];
-  listeners = new Set();
+class ReactQueryEventStore extends _sharedUi.ChangeLog {
   queryClient = null;
   queryUnsubscribe = null;
   mutationUnsubscribe = null;
-  maxEvents = 200;
+  constructor() {
+    super({
+      max: 200
+    });
+  }
 
   // Track fetch start times for duration calculation
   fetchStartTimes = new Map();
@@ -246,43 +249,31 @@ class ReactQueryEventStore {
    * Add an event to the store
    */
   addEvent(event) {
-    this.events = [event, ...this.events].slice(0, this.maxEvents);
-    this.notifyListeners();
+    this.record(event);
   }
 
   /**
    * Get all events
    */
   getEvents() {
-    return this.events;
+    return this.items;
   }
 
   /**
    * Subscribe to event changes
    */
   subscribe(listener) {
-    this.listeners.add(listener);
+    const unsubscribe = super.subscribe(listener);
     // Immediately call with current events
-    listener(this.events);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Notify all listeners
-   */
-  notifyListeners() {
-    const events = this.events;
-    this.listeners.forEach(listener => listener(events));
+    listener(this.items);
+    return unsubscribe;
   }
 
   /**
    * Clear all events
    */
   clearEvents() {
-    this.events = [];
-    this.notifyListeners();
+    this.clear();
   }
 
   /**

package/lib/commonjs/react-query/sync/snapshotProvider.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createQuerySnapshotProvider = createQuerySnapshotProvider;
 exports.registerQuerySnapshotProvider = registerQuerySnapshotProvider;
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _dehydrate = require("./dehydrate");
 /**
  * Time Machine snapshot provider for React Query.
@@ -54,7 +53,6 @@ function queryLabel(queryKey, queryHash) {
     return queryHash;
   }
 }
-const ITEM_RENDER_BYTE_LIMIT = 256 * 1024;
 
 /**
  * A query `error` (and `fetchFailureReason`) usually holds the live
@@ -156,31 +154,15 @@ function createQuerySnapshotProvider(queryClient) {
     },
     async restore(data, options) {
       const snapshot = data;
-      const excludedSet = new Set(options?.excludeKeys ?? []);
-      const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
-      const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
-      let excludedHits = 0;
-      const result = {
-        ok: true,
-        applied: 0,
-        skipped: [],
-        warnings: []
-      };
+      const scope = (0, _sharedUi.createRestoreScope)(options);
+      const result = (0, _sharedUi.emptyRestoreResult)();
       if (!snapshot?.queries) {
-        return {
-          ok: false,
-          applied: 0,
-          skipped: [],
-          warnings: ["empty query snapshot"]
-        };
+        return (0, _sharedUi.failedRestore)("empty query snapshot");
       }
       const cache = queryClient.getQueryCache();
       const snapHashes = new Set(snapshot.queries.map(q => q.queryHash));
       for (const snap of snapshot.queries) {
-        if (!touch(snap.queryHash)) {
-          excludedHits += 1;
-          continue;
-        }
+        if (!scope.allows(snap.queryHash)) continue;
         // Snapshots taken before the raw-capture fix hold a wire placeholder
         // instead of the data. Writing that into the cache hands the app an
         // object with none of its fields — leave the live query alone and say
@@ -221,10 +203,7 @@ function createQuerySnapshotProvider(queryClient) {
       // Cache entries the snapshot doesn't know about get removed; a mounted
       // observer will rebuild + refetch its query on next interaction.
       for (const query of cache.getAll().slice()) {
-        if (!touch(query.queryHash)) {
-          excludedHits += 1;
-          continue;
-        }
+        if (!scope.allows(query.queryHash)) continue;
         if (!snapHashes.has(query.queryHash)) {
           try {
             cache.remove(query);
@@ -242,9 +221,8 @@ function createQuerySnapshotProvider(queryClient) {
         queryClient.getMutationCache().clear();
         result.warnings.push(`mutation cache cleared (${mutationCount} mutation(s))`);
       }
-      if (excludedHits > 0) {
-        result.warnings.push(`${excludedHits} quer(y/ies) excluded by you`);
-      }
+      const excludedWarning = scope.excludedWarning("quer(y/ies)");
+      if (excludedWarning) result.warnings.push(excludedWarning);
       return result;
     },
     /** Per-query restore preview. `base` omitted = compare against live cache. */
@@ -270,39 +248,16 @@ function createQuerySnapshotProvider(queryClient) {
           continue;
         }
         const baseQ = baseByHash.get(q.queryHash);
-        if (!baseQ) {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "added",
-            newValue: comparableQuery(q)
-          });
-          continue;
-        }
-        const oldVal = comparableQuery(baseQ);
-        const newVal = comparableQuery(q);
-        if ((0, _dataViewer.boundedDeepEqual)(oldVal, newVal)) {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "unchanged"
-          });
-        } else if ((0, _dataViewer.jsonLikelyLargerThan)(oldVal, ITEM_RENDER_BYTE_LIMIT) || (0, _dataViewer.jsonLikelyLargerThan)(newVal, ITEM_RENDER_BYTE_LIMIT)) {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "too-large",
-            reason: "query data too large to render a diff — restore still applies it"
-          });
-        } else {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "changed",
-            oldValue: oldVal,
-            newValue: newVal
-          });
-        }
+        items.push((0, _sharedUi.classifyPreviewItem)({
+          key: q.queryHash,
+          label,
+          oldValue: baseQ ? comparableQuery(baseQ) : undefined,
+          newValue: comparableQuery(q),
+          inOld: baseQ !== undefined,
+          inNew: true
+        }, {
+          tooLargeReason: "query data too large to render a diff — restore still applies it"
+        }));
       }
       for (const q of baseQueries) {
         if (!targetByHash.has(q.queryHash)) {

package/lib/module/react-query/components/DataEditorMode.js

@@ -2,7 +2,7 @@
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { useQueryClient } from "@tanstack/react-query";
-import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets, night, monoFont } from "@buoy-gg/shared-ui";
 import Explorer from "./query-browser/Explorer";
 import QueryDetails from "./query-browser/QueryDetails";
 import ActionButton from "./query-browser/ActionButton";
@@ -270,7 +270,7 @@ const styles = StyleSheet.create({
     borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   queryExplorerContent: {
     padding: 8
@@ -303,7 +303,7 @@ const styles = StyleSheet.create({
     borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   dataContent: {
     padding: 8

package/lib/module/react-query/components/FilterStatusBadge.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
+import { night, monoFont } from "@buoy-gg/shared-ui";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Compact badge showing filter status (e.g., "Showing 5 of 12")
@@ -46,6 +46,6 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 9,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/react-query/components/MutationEditorMode.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets, night, monoFont } from "@buoy-gg/shared-ui";
 import Explorer from "./query-browser/Explorer";
 import MutationDetails from "./query-browser/MutationDetails";
 import ActionButton from "./query-browser/ActionButton";
@@ -230,7 +230,7 @@ const styles = StyleSheet.create({
     borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   mutationExplorerContent: {
     padding: 8
@@ -262,7 +262,7 @@ const styles = StyleSheet.create({
     borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   dataContent: {
     padding: 8

package/lib/module/react-query/components/modals/MutationBrowserFooter.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
+import { ToolFooter, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import MutationStatusCount from "../query-browser/MutationStatusCount";
 import { useMemo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,13 +28,12 @@ export function MutationBrowserFooter({
   const paddingBottom = useMemo(() => {
     return !isFloatingMode ? insets.bottom : 0;
   }, [isFloatingMode, insets.bottom]);
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(ToolFooter, {
     // Force re-render with key change
-    style: [styles.filterFooter, {
-      paddingBottom
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: paddingBottom,
+    style: styles.filterFooter,
     children: /*#__PURE__*/_jsx(View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/_jsx(MutationStatusCount, {
@@ -47,19 +46,8 @@ export function MutationBrowserFooter({
 }
 const styles = StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    // Transparent so the night sheet's star field shows through.
-    // Night glass bar — matches the shared EventStepperFooter backing.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14
-  },
-  dockedFooter: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
+    paddingTop: 8,
+    paddingHorizontal: 0
   },
   filterContainer: {
     minHeight: 32,