@appsupportkit/support-sdk 0.1.0

package/lib/typescript/types.d.ts

@@ -0,0 +1,61 @@
+export type QueryType = 'feedback' | 'feature_request' | 'bug_report';
+export type QueryStatus = 'open' | 'resolved';
+export type MessageSender = 'user' | 'admin';
+export type ThemeName = 'dark' | 'light';
+export interface SupportUser {
+    /** Display name shown to the support team. */
+    name: string;
+    /** Whether the user is on a paid plan. */
+    isPaid: boolean;
+    /** RevenueCat app user id — identifies the user's threads. */
+    revenuecatId: string;
+    /** Host app version, e.g. "2.4.1". */
+    appVersion: string;
+}
+export interface SupportButtonProps {
+    /** App name as registered in the admin dashboard. Required. */
+    appName: string;
+    /** Per-app API key (sk_support_…). Required. Keep it in secret config. */
+    apiKey: string;
+    /** The current end user. Required. */
+    user: SupportUser;
+    /**
+     * Base URL of the Supabase project hosting the support backend,
+     * e.g. "https://abcd1234.supabase.co". Required — the SDK talks to its
+     * Edge Functions.
+     */
+    supabaseUrl: string;
+    /** Visual theme. Matches the admin dashboard tokens. Default "dark". */
+    theme?: ThemeName;
+}
+export interface ThreadMessage {
+    id: string;
+    sender: MessageSender;
+    body: string;
+    created_at: string;
+    admin_name: string | null;
+}
+export interface Thread {
+    id: string;
+    type: QueryType;
+    status: QueryStatus;
+    created_at: string;
+    resolved_at: string | null;
+    resolved_by_name: string | null;
+    app_version: string;
+    unread_count: number;
+    last_message: {
+        body: string;
+        sender: MessageSender;
+        created_at: string;
+    } | null;
+    messages: ThreadMessage[];
+}
+export interface ThreadsResponse {
+    threads: Thread[];
+    total_unread: number;
+}
+export declare const QUERY_TYPE_LABEL: Record<QueryType, string>;
+export declare const USER_MESSAGE_MIN = 10;
+export declare const USER_MESSAGE_MAX = 300;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,iBAAiB,GAAG,YAAY,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,WAAW,CAAC;IAClB;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,aAAa,CAAC;QACtB,UAAU,EAAE,MAAM,CAAC;KACpB,GAAG,IAAI,CAAC;IACT,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,gBAAgB,MAAM,CAAC"}

package/lib/typescript/utils.d.ts

@@ -0,0 +1,11 @@
+/** "2h ago" relative time — mirrors the web dashboard's formatting. */
+export declare function relativeTime(iso: string): string;
+export declare function formatDate(iso: string): string;
+/** Dev-mode prop validation with actionable messages. */
+export declare function validateProps(props: {
+    appName?: unknown;
+    apiKey?: unknown;
+    supabaseUrl?: unknown;
+    user?: unknown;
+}): string | null;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAehD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,MAAM,GAAG,IAAI,CA8BhB"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@appsupportkit/support-sdk",
+  "version": "0.1.0",
+  "description": "In-app customer support for React Native: feedback, feature requests, and bug reports with two-way threads.",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "react-native": "./src/index.tsx",
+  "source": "./src/index.tsx",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "keywords": [
+    "react-native",
+    "support",
+    "feedback",
+    "in-app"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@appsupportkit/design-tokens": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.35.2",
+    "react-native-safe-area-context": "^5.4.0",
+    "typescript": "^5.7.2"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src"
+  }
+}

package/src/api.ts

@@ -0,0 +1,125 @@
+// Thin client for the Supabase Edge Functions. Every call authenticates with
+// the per-app x-api-key header; no Supabase JS client is needed on-device.
+import type { QueryType, ThreadsResponse } from './types';
+
+export interface ApiConfig {
+  supabaseUrl: string;
+  apiKey: string;
+  appName: string;
+}
+
+export class SupportApiError extends Error {
+  status: number | null;
+  /** True for network-level failures (likely offline). */
+  offline: boolean;
+
+  constructor(message: string, status: number | null, offline = false) {
+    super(message);
+    this.name = 'SupportApiError';
+    this.status = status;
+    this.offline = offline;
+  }
+}
+
+async function request<T>(
+  config: ApiConfig,
+  path: string,
+  init: RequestInit,
+): Promise<T> {
+  const url = `${config.supabaseUrl.replace(/\/$/, '')}/functions/v1/${path}`;
+  let response: Response;
+  try {
+    response = await fetch(url, {
+      ...init,
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': config.apiKey,
+        ...init.headers,
+      },
+    });
+  } catch {
+    throw new SupportApiError('Network request failed', null, true);
+  }
+
+  let payload: unknown = null;
+  try {
+    payload = await response.json();
+  } catch {
+    // Non-JSON error body — fall through with status only.
+  }
+
+  if (!response.ok) {
+    const message =
+      payload !== null &&
+      typeof payload === 'object' &&
+      'error' in payload &&
+      typeof (payload as { error: unknown }).error === 'string'
+        ? (payload as { error: string }).error
+        : `Request failed (${response.status})`;
+    throw new SupportApiError(message, response.status);
+  }
+
+  return payload as T;
+}
+
+export function getThreads(
+  config: ApiConfig,
+  revenuecatId: string,
+): Promise<ThreadsResponse> {
+  const params = new URLSearchParams({ revenuecat_id: revenuecatId });
+  return request<ThreadsResponse>(config, `get-threads?${params.toString()}`, {
+    method: 'GET',
+  });
+}
+
+export function submitQuery(
+  config: ApiConfig,
+  input: {
+    queryType: QueryType;
+    message: string;
+    userName: string;
+    isPaid: boolean;
+    revenuecatId: string;
+    appVersion: string;
+  },
+): Promise<{ query_id: string }> {
+  return request(config, 'submit-query', {
+    method: 'POST',
+    body: JSON.stringify({
+      app_name: config.appName,
+      query_type: input.queryType,
+      message: input.message,
+      user_name: input.userName,
+      is_paid: input.isPaid,
+      revenuecat_id: input.revenuecatId,
+      app_version: input.appVersion,
+    }),
+  });
+}
+
+export function postMessage(
+  config: ApiConfig,
+  input: { queryId: string; revenuecatId: string; message: string },
+): Promise<{ message_id: string }> {
+  return request(config, 'post-message', {
+    method: 'POST',
+    body: JSON.stringify({
+      query_id: input.queryId,
+      revenuecat_id: input.revenuecatId,
+      message: input.message,
+    }),
+  });
+}
+
+export function markRead(
+  config: ApiConfig,
+  input: { queryId: string; revenuecatId: string },
+): Promise<{ ok: boolean }> {
+  return request(config, 'mark-read', {
+    method: 'POST',
+    body: JSON.stringify({
+      query_id: input.queryId,
+      revenuecat_id: input.revenuecatId,
+    }),
+  });
+}

package/src/components/BottomSheet.tsx

@@ -0,0 +1,173 @@
+// Bottom sheet built on the built-in Modal + Animated APIs.
+//
+// Why no sheet library: the SDK needs exactly one detent, a drag handle, a
+// backdrop fade, and a 180ms ease-out slide — all achievable with core APIs.
+// Skipping reanimated/gesture-handler keeps the package free of native
+// dependencies and install friction for consumers.
+import { useCallback, useEffect, useRef, type ReactNode } from 'react';
+import {
+  Animated,
+  Easing,
+  Modal,
+  PanResponder,
+  Pressable,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import type { SupportTheme } from '../theme';
+
+const SLIDE_MS = 180; // motion.slow — ease-out, no springs, no bounce.
+
+export function BottomSheet({
+  visible,
+  onClose,
+  theme,
+  children,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  theme: SupportTheme;
+  children: ReactNode;
+}) {
+  const { height: windowHeight } = useWindowDimensions();
+  const sheetHeight = Math.min(windowHeight * 0.82, 640);
+
+  const translateY = useRef(new Animated.Value(sheetHeight)).current;
+  const backdrop = useRef(new Animated.Value(0)).current;
+
+  const animateIn = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: SLIDE_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdrop, {
+        toValue: 1,
+        duration: SLIDE_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [translateY, backdrop]);
+
+  const animateOut = useCallback(
+    (done: () => void) => {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: sheetHeight,
+          duration: SLIDE_MS,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdrop, {
+          toValue: 0,
+          duration: SLIDE_MS,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }),
+      ]).start(({ finished }) => {
+        if (finished) done();
+      });
+    },
+    [translateY, backdrop, sheetHeight],
+  );
+
+  useEffect(() => {
+    if (visible) animateIn();
+  }, [visible, animateIn]);
+
+  const requestClose = useCallback(() => {
+    animateOut(onClose);
+  }, [animateOut, onClose]);
+
+  // Drag handle: follow the finger downward; past 25% (or a flick), dismiss.
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dy) > 4,
+      onPanResponderMove: (_e, g) => {
+        if (g.dy > 0) translateY.setValue(g.dy);
+      },
+      onPanResponderRelease: (_e, g) => {
+        if (g.dy > sheetHeight * 0.25 || g.vy > 1.2) {
+          requestClose();
+        } else {
+          Animated.timing(translateY, {
+            toValue: 0,
+            duration: SLIDE_MS,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      onRequestClose={requestClose}
+      statusBarTranslucent
+    >
+      <SafeAreaProvider>
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
+          <Animated.View
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              opacity: backdrop,
+            }}
+          >
+            <Pressable
+              style={{ flex: 1 }}
+              onPress={requestClose}
+              accessibilityLabel="Close support"
+            />
+          </Animated.View>
+
+          <Animated.View
+            style={{
+              height: sheetHeight,
+              backgroundColor: theme.colors.overlay,
+              borderTopLeftRadius: theme.radii.sheet,
+              borderTopRightRadius: theme.radii.sheet,
+              borderWidth: 1,
+              borderBottomWidth: 0,
+              borderColor: theme.colors.border,
+              transform: [{ translateY }],
+            }}
+          >
+            {/* Drag handle */}
+            <View
+              {...panResponder.panHandlers}
+              style={{ alignItems: 'center', paddingVertical: 10 }}
+            >
+              <View
+                style={{
+                  width: 32,
+                  height: 4,
+                  borderRadius: 2,
+                  backgroundColor: theme.colors.borderStrong,
+                }}
+              />
+            </View>
+            <SafeAreaView edges={['bottom']} style={{ flex: 1 }}>
+              {children}
+            </SafeAreaView>
+          </Animated.View>
+        </View>
+      </SafeAreaProvider>
+    </Modal>
+  );
+}

package/src/components/SupportButton.tsx

@@ -0,0 +1,265 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getThreads, markRead, postMessage, submitQuery, SupportApiError, type ApiConfig } from '../api';
+import { resolveTheme } from '../theme';
+import type { QueryType, SupportButtonProps, Thread } from '../types';
+import { validateProps } from '../utils';
+import { BottomSheet } from './BottomSheet';
+import { BubbleMark } from './icons';
+import { ComposeScreen } from './screens/ComposeScreen';
+import { HomeScreen } from './screens/HomeScreen';
+import { ThreadScreen } from './screens/ThreadScreen';
+
+type Screen =
+  | { name: 'home' }
+  | { name: 'compose'; type: QueryType }
+  | { name: 'thread'; threadId: string };
+
+/**
+ * The single entry point of the SDK: a button with an unread badge that
+ * opens the support bottom sheet. Polls get-threads on mount and whenever
+ * the sheet opens (no websockets in v1).
+ */
+export function SupportButton(props: SupportButtonProps) {
+  const validationError = validateProps(props);
+  const theme = resolveTheme(props.theme);
+
+  const config: ApiConfig = useMemo(
+    () => ({
+      supabaseUrl: props.supabaseUrl,
+      apiKey: props.apiKey,
+      appName: props.appName,
+    }),
+    [props.supabaseUrl, props.apiKey, props.appName],
+  );
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [screen, setScreen] = useState<Screen>({ name: 'home' });
+  const [threads, setThreads] = useState<Thread[] | null>(null);
+  const [totalUnread, setTotalUnread] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const refresh = useCallback(async () => {
+    if (validationError) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getThreads(config, props.user.revenuecatId);
+      if (!mounted.current) return;
+      setThreads(data.threads);
+      setTotalUnread(data.total_unread);
+    } catch (e) {
+      if (!mounted.current) return;
+      setError(
+        e instanceof SupportApiError && e.offline
+          ? "You're offline — check your connection"
+          : "Couldn't load threads",
+      );
+    } finally {
+      if (mounted.current) setLoading(false);
+    }
+  }, [config, props.user.revenuecatId, validationError]);
+
+  // Poll on mount…
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  // …and on sheet open.
+  function openSheet() {
+    setScreen({ name: 'home' });
+    setSheetOpen(true);
+    void refresh();
+  }
+
+  function closeSheet() {
+    setSheetOpen(false);
+    setScreen({ name: 'home' });
+  }
+
+  if (validationError) {
+    // Dev-mode: loud and actionable. Production: render nothing rather than
+    // a broken button.
+    if (__DEV__) {
+      console.error(validationError);
+      return (
+        <View
+          style={{
+            padding: 8,
+            borderWidth: 1,
+            borderColor: theme.colors.statusDanger,
+            borderRadius: theme.radii.control,
+          }}
+        >
+          <Text style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+            {validationError}
+          </Text>
+        </View>
+      );
+    }
+    return null;
+  }
+
+  function openThread(thread: Thread) {
+    setScreen({ name: 'thread', threadId: thread.id });
+    if (thread.unread_count > 0) {
+      // Optimistically clear the badge; persist via mark-read.
+      setThreads(
+        (prev) =>
+          prev?.map((t) =>
+            t.id === thread.id ? { ...t, unread_count: 0 } : t,
+          ) ?? null,
+      );
+      setTotalUnread((n) => Math.max(0, n - thread.unread_count));
+      void markRead(config, {
+        queryId: thread.id,
+        revenuecatId: props.user.revenuecatId,
+      }).catch(() => {
+        // Non-fatal: the next get-threads reconciles the badge.
+      });
+    }
+  }
+
+  async function handleSubmit(type: QueryType, message: string) {
+    try {
+      await submitQuery(config, {
+        queryType: type,
+        message,
+        userName: props.user.name,
+        isPaid: props.user.isPaid,
+        revenuecatId: props.user.revenuecatId,
+        appVersion: props.user.appVersion,
+      });
+      void refresh();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async function handleSend(threadId: string, message: string) {
+    try {
+      await postMessage(config, {
+        queryId: threadId,
+        revenuecatId: props.user.revenuecatId,
+        message,
+      });
+      await refresh();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  const activeThread =
+    screen.name === 'thread'
+      ? (threads ?? []).find((t) => t.id === screen.threadId) ?? null
+      : null;
+
+  return (
+    <>
+      <Pressable
+        onPress={openSheet}
+        accessibilityRole="button"
+        accessibilityLabel={
+          totalUnread > 0
+            ? `Support, ${totalUnread} unread ${totalUnread === 1 ? 'reply' : 'replies'}`
+            : 'Support'
+        }
+        style={({ pressed }) => ({
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: pressed
+            ? theme.colors.surfaceHover
+            : theme.colors.surface,
+          alignItems: 'center',
+          justifyContent: 'center',
+        })}
+      >
+        <BubbleMark color={theme.colors.textPrimary} size={18} />
+        {totalUnread > 0 && (
+          <View
+            style={{
+              position: 'absolute',
+              top: -3,
+              right: -3,
+              minWidth: 16,
+              height: 16,
+              borderRadius: 8,
+              paddingHorizontal: 4,
+              backgroundColor: theme.colors.accent,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 10,
+                fontWeight: '600',
+                color: theme.colors.accentForeground,
+                fontVariant: ['tabular-nums'],
+              }}
+            >
+              {totalUnread > 9 ? '9+' : totalUnread}
+            </Text>
+          </View>
+        )}
+      </Pressable>
+
+      <BottomSheet visible={sheetOpen} onClose={closeSheet} theme={theme}>
+        {screen.name === 'home' && (
+          <HomeScreen
+            theme={theme}
+            threads={threads}
+            loading={loading}
+            error={error}
+            onRetry={() => void refresh()}
+            onCompose={(type) => setScreen({ name: 'compose', type })}
+            onOpenThread={openThread}
+            onClose={closeSheet}
+          />
+        )}
+        {screen.name === 'compose' && (
+          <ComposeScreen
+            theme={theme}
+            type={screen.type}
+            onBack={() => setScreen({ name: 'home' })}
+            onSubmit={(message) => handleSubmit(screen.type, message)}
+          />
+        )}
+        {screen.name === 'thread' &&
+          (activeThread ? (
+            <ThreadScreen
+              theme={theme}
+              thread={activeThread}
+              onBack={() => setScreen({ name: 'home' })}
+              onSend={(message) => handleSend(activeThread.id, message)}
+            />
+          ) : (
+            <HomeScreen
+              theme={theme}
+              threads={threads}
+              loading={loading}
+              error={error}
+              onRetry={() => void refresh()}
+              onCompose={(type) => setScreen({ name: 'compose', type })}
+              onOpenThread={openThread}
+              onClose={closeSheet}
+            />
+          ))}
+      </BottomSheet>
+    </>
+  );
+}