react-native-debug-toolkit 0.6.3 → 2.0.0

package/src/components/TrackLogTab.tsx

@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet, Animated, ScrollView } from 'react-native';
+import { Colors } from '../utils/constants';
+import { safeStringify } from '../utils/safeStringify';
+import { CollapsibleSection } from './shared/CollapsibleSection';
+import { JsonView } from './shared/JsonView';
+import { CopyButton } from './shared/CopyButton';
+import { useSlideDetailAnimation } from '../hooks/useSlideDetailAnimation';
+import type { DebugFeatureRenderProps, TrackLogEntry } from '../types';
+
+export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry>> = React.memo(({
+  data,
+}) => {
+  const [selected, setSelected] = useState<TrackLogEntry | null>(null);
+  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
+
+  const renderItem = ({ item }: { item: TrackLogEntry }) => (
+    <TouchableOpacity style={s.card} onPress={() => setSelected(item)} activeOpacity={0.6}>
+      <View style={s.cardRow}>
+        <View style={s.eventIcon}>
+          <Text style={s.eventIconText}>●</Text>
+        </View>
+        <View style={s.cardContent}>
+          <View style={s.cardHeader}>
+            <Text style={s.eventName}>{item.eventName}</Text>
+            <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+          </View>
+          <View style={s.previewRow}>
+            {Object.entries(item)
+              .filter(([k]) => k !== 'id' && k !== 'eventName' && k !== 'timestamp')
+              .slice(0, 2)
+              .map(([key, value]) => (
+                <View key={key} style={s.previewChip}>
+                  <Text style={s.previewText} numberOfLines={1}>
+                    <Text style={s.previewKey}>{key}</Text> {String(value ?? '').slice(0, 25)}
+                  </Text>
+                </View>
+              ))}
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+
+  const extraProps = selected
+    ? Object.entries(selected).filter(
+        ([k, v]) => k !== 'id' && k !== 'eventName' && k !== 'timestamp' && v !== undefined && v !== null,
+      )
+    : [];
+
+  return (
+    <View style={s.container}>
+      {/* List */}
+      <Animated.View style={[s.listWrap, selected ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] } : null]}>
+        {data.length === 0 ? (
+          <View style={s.emptyContainer}>
+            <Text style={s.emptyIcon}>~</Text>
+            <Text style={s.empty}>No track events</Text>
+          </View>
+        ) : (
+          <FlatList
+            data={[...data].reverse()}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={s.listContent}
+            initialNumToRender={20}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            removeClippedSubviews={true}
+          />
+        )}
+      </Animated.View>
+
+      {/* Detail (push navigation) */}
+      {selected && (
+        <Animated.View style={[s.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}>
+          <View style={s.detailWrap}>
+            <View style={s.detailHeader}>
+              <TouchableOpacity onPress={() => setSelected(null)} style={s.backBtn} activeOpacity={0.6}>
+                <Text style={s.backIcon}>‹</Text>
+                <Text style={s.backText}>Back</Text>
+              </TouchableOpacity>
+              <View style={s.eventBadge}>
+                <Text style={s.eventBadgeText}>{selected.eventName}</Text>
+              </View>
+            </View>
+            <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+              {/* Properties */}
+              <CollapsibleSection title="Properties" initiallyExpanded>
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={safeStringify(Object.fromEntries(extraProps), 2)} label="Track Properties" />
+                  <View style={s.propsGrid}>
+                    {extraProps.map(([key, value]) => (
+                      <View key={key} style={s.propRow}>
+                        <Text style={s.propKey}>{key}</Text>
+                        <Text style={s.propValue} selectable>
+                          {typeof value === 'object' ? safeStringify(value) : String(value ?? '')}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                </View>
+              </CollapsibleSection>
+
+              {/* Full JSON */}
+              <CollapsibleSection title="Full Event Data">
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={safeStringify(selected, 2)} label="Track Event" />
+                  <JsonView data={selected} maxHeight={300} />
+                </View>
+              </CollapsibleSection>
+
+              {/* Timing */}
+              <View style={s.timingCard}>
+                <Text style={s.timingLabel}>Time</Text>
+                <Text style={s.timingValue}>
+                  {new Date(selected.timestamp).toLocaleString()}
+                </Text>
+              </View>
+            </ScrollView>
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+});
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.background },
+  listWrap: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  listContent: { padding: 12 },
+
+  // Empty
+  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
+  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
+
+  // Card
+  card: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'flex-start' },
+  eventIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: 'rgba(175,82,222,0.1)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+    marginTop: 1,
+  },
+  eventIconText: { color: Colors.purple, fontSize: 10 },
+  cardContent: { flex: 1 },
+  cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 },
+  eventName: { fontSize: 15, fontWeight: '600', color: Colors.text },
+  time: { fontSize: 12, color: Colors.textSecondary },
+  previewRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 4 },
+  previewChip: {
+    backgroundColor: Colors.background,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  previewText: { fontSize: 12, color: Colors.textSecondary, lineHeight: 16 },
+  previewKey: { fontWeight: '600', color: Colors.text },
+
+  // Detail (push navigation)
+  detailOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: Colors.background,
+  },
+  detailWrap: { flex: 1, backgroundColor: Colors.background },
+  detailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    gap: 8,
+  },
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  backIcon: {
+    fontSize: 24,
+    fontWeight: '300',
+    color: Colors.primary,
+    marginTop: -2,
+    marginRight: 2,
+  },
+  backText: {
+    fontSize: 16,
+    color: Colors.primary,
+    fontWeight: '500',
+  },
+  eventBadge: {
+    backgroundColor: Colors.purple,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 8,
+  },
+  eventBadgeText: { color: '#FFF', fontSize: 14, fontWeight: '700' },
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+  sectionWithCopy: { gap: 8 },
+
+  // Properties
+  propsGrid: { gap: 12 },
+  propRow: {},
+  propKey: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 3 },
+  propValue: { fontSize: 14, color: Colors.text, lineHeight: 20 },
+
+  // Timing
+  timingCard: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  timingLabel: { fontSize: 13, color: Colors.textSecondary, fontWeight: '500' },
+  timingValue: { fontSize: 13, color: Colors.text },
+});

package/src/components/ZustandLogTab.tsx

@@ -0,0 +1,305 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet, Animated, ScrollView } from 'react-native';
+import { Colors } from '../utils/constants';
+import { safeStringify } from '../utils/safeStringify';
+import { CollapsibleSection } from './shared/CollapsibleSection';
+import { JsonView } from './shared/JsonView';
+import { CopyButton } from './shared/CopyButton';
+import { useSlideDetailAnimation } from '../hooks/useSlideDetailAnimation';
+import type { DebugFeatureRenderProps, ZustandLogEntry } from '../types';
+
+const getActionColor = (action: string): string => {
+  if (action.includes('add') || action.includes('create')) return '#34C759';
+  if (action.includes('remove') || action.includes('delete')) return '#FF3B30';
+  if (action.includes('update') || action.includes('set')) return '#007AFF';
+  return '#AF52DE';
+};
+
+const getActionBgColor = (action: string): string => {
+  if (action.includes('add') || action.includes('create')) return 'rgba(52,199,89,0.1)';
+  if (action.includes('remove') || action.includes('delete')) return 'rgba(255,59,48,0.1)';
+  if (action.includes('update') || action.includes('set')) return 'rgba(0,122,255,0.1)';
+  return 'rgba(175,82,222,0.1)';
+};
+
+export const ZustandLogTab: React.FC<DebugFeatureRenderProps<ZustandLogEntry>> = React.memo(({
+  data,
+}) => {
+  const [selected, setSelected] = useState<ZustandLogEntry | null>(null);
+  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
+
+  const renderItem = ({ item }: { item: ZustandLogEntry }) => (
+    <TouchableOpacity style={s.card} onPress={() => setSelected(item)} activeOpacity={0.6}>
+      <View style={s.cardRow}>
+        <View style={[s.actionIcon, { backgroundColor: getActionBgColor(item.action) }]}>
+          <View style={[s.actionDot, { backgroundColor: getActionColor(item.action) }]} />
+        </View>
+        <View style={s.cardContent}>
+          <View style={s.cardMeta}>
+            <Text style={s.action}>{item.action}</Text>
+            {item.storeName && (
+              <View style={s.storeBadge}>
+                <Text style={s.storeBadgeText}>{item.storeName}</Text>
+              </View>
+            )}
+          </View>
+          <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+        </View>
+        {item.actionCompleteTime != null && (
+          <View style={s.durationBadge}>
+            <Text style={s.durationText}>{item.actionCompleteTime}ms</Text>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+
+  const findChanges = (prev: unknown, next: unknown): string[] => {
+    if (typeof prev !== 'object' || typeof next !== 'object' || !prev || !next) return [];
+    const allKeys = new Set([...Object.keys(prev as object), ...Object.keys(next as object)]);
+    const changed: string[] = [];
+    allKeys.forEach((key) => {
+      const pv = (prev as Record<string, unknown>)[key];
+      const nv = (next as Record<string, unknown>)[key];
+      if (safeStringify(pv) !== safeStringify(nv)) changed.push(key);
+    });
+    return changed;
+  };
+
+  return (
+    <View style={s.container}>
+      {/* List */}
+      <Animated.View style={[s.listWrap, selected ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] } : null]}>
+        {data.length === 0 ? (
+          <View style={s.emptyContainer}>
+            <Text style={s.emptyIcon}>~</Text>
+            <Text style={s.empty}>No Zustand state changes</Text>
+          </View>
+        ) : (
+          <FlatList
+            data={[...data].reverse()}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={s.listContent}
+            initialNumToRender={20}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            removeClippedSubviews={true}
+          />
+        )}
+      </Animated.View>
+
+      {/* Detail (push navigation) */}
+      {selected && (
+        <Animated.View style={[s.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}>
+          <View style={s.detailWrap}>
+            <View style={s.detailHeader}>
+              <TouchableOpacity onPress={() => setSelected(null)} style={s.backBtn} activeOpacity={0.6}>
+                <Text style={s.backIcon}>‹</Text>
+                <Text style={s.backText}>Back</Text>
+              </TouchableOpacity>
+              <View style={s.detailHeaderCenter}>
+                <Text style={[s.detailAction, { color: getActionColor(selected.action) }]}>
+                  {selected.action}
+                </Text>
+                {selected.storeName && (
+                  <View style={s.storeBadge}>
+                    <Text style={s.storeBadgeText}>{selected.storeName}</Text>
+                  </View>
+                )}
+              </View>
+            </View>
+            <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+              {/* Meta */}
+              <View style={s.metaCard}>
+                <View style={s.metaItem}>
+                  <Text style={s.metaLabel}>Time</Text>
+                  <Text style={s.metaValue}>
+                    {new Date(selected.timestamp).toLocaleString()}
+                  </Text>
+                </View>
+                {selected.actionCompleteTime != null && (
+                  <View style={s.metaDivider} />
+                )}
+                {selected.actionCompleteTime != null && (
+                  <View style={s.metaItem}>
+                    <Text style={s.metaLabel}>Duration</Text>
+                    <Text style={s.metaValue}>{selected.actionCompleteTime}ms</Text>
+                  </View>
+                )}
+              </View>
+
+              {/* Changed keys */}
+              {(() => {
+                const changes = findChanges(selected.prevState, selected.nextState);
+                if (changes.length === 0) return null;
+                return (
+                  <View style={s.changesCard}>
+                    <Text style={s.changesTitle}>Changed Keys</Text>
+                    <View style={s.changesTags}>
+                      {changes.map((key) => (
+                        <View key={key} style={s.changeTag}>
+                          <Text style={s.changeTagText}>{key}</Text>
+                        </View>
+                      ))}
+                    </View>
+                  </View>
+                );
+              })()}
+
+              {/* Previous State */}
+              <CollapsibleSection title="Previous State">
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={safeStringify(selected.prevState, 2)} label="Previous State" />
+                  <JsonView data={selected.prevState} maxHeight={250} />
+                </View>
+              </CollapsibleSection>
+
+              {/* Next State */}
+              <CollapsibleSection title="Next State" initiallyExpanded>
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={safeStringify(selected.nextState, 2)} label="Next State" />
+                  <JsonView data={selected.nextState} maxHeight={250} />
+                </View>
+              </CollapsibleSection>
+            </ScrollView>
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+});
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.background },
+  listWrap: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  listContent: { padding: 12 },
+
+  // Empty
+  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
+  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
+
+  // Card
+  card: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'center' },
+  actionIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  actionDot: { width: 8, height: 8, borderRadius: 4 },
+  cardContent: { flex: 1 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 3 },
+  action: { fontSize: 15, fontWeight: '600', color: Colors.text },
+  storeBadge: {
+    backgroundColor: 'rgba(0,122,255,0.08)',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  storeBadgeText: { fontSize: 11, color: Colors.primary, fontWeight: '600' },
+  time: { fontSize: 12, color: Colors.textSecondary },
+  durationBadge: {
+    backgroundColor: Colors.background,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
+
+  // Detail (push navigation)
+  detailOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: Colors.background,
+  },
+  detailWrap: { flex: 1, backgroundColor: Colors.background },
+  detailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+  },
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 8,
+    marginRight: 8,
+  },
+  backIcon: {
+    fontSize: 24,
+    fontWeight: '300',
+    color: Colors.primary,
+    marginTop: -2,
+    marginRight: 2,
+  },
+  backText: {
+    fontSize: 16,
+    color: Colors.primary,
+    fontWeight: '500',
+  },
+  detailHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flex: 1,
+  },
+  detailAction: { fontSize: 17, fontWeight: '700' },
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+  sectionWithCopy: { gap: 8 },
+
+  // Meta
+  metaCard: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  metaItem: { flex: 1 },
+  metaDivider: { width: 1, height: 28, backgroundColor: Colors.border, marginHorizontal: 12 },
+  metaLabel: { fontSize: 11, color: Colors.textSecondary, fontWeight: '600', textTransform: 'uppercase', marginBottom: 2 },
+  metaValue: { fontSize: 14, color: Colors.text, fontWeight: '500' },
+
+  // Changes
+  changesCard: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+  },
+  changesTitle: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 10 },
+  changesTags: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  changeTag: {
+    backgroundColor: 'rgba(0,122,255,0.08)',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  changeTagText: { fontSize: 12, color: Colors.primary, fontWeight: '600' },
+});

package/src/components/shared/CollapsibleSection.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Pressable, StyleSheet, Animated } from 'react-native';
+import { Colors } from '../../utils/constants';
+
+interface Props {
+  title: string;
+  initiallyExpanded?: boolean;
+  children: React.ReactNode;
+}
+
+export const CollapsibleSection: React.FC<Props> = ({
+  title,
+  initiallyExpanded = false,
+  children,
+}) => {
+  const [expanded, setExpanded] = useState(initiallyExpanded);
+  const [rotationAnim] = useState(() => new Animated.Value(initiallyExpanded ? 1 : 0));
+
+  useEffect(() => {
+    Animated.timing(rotationAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [expanded, rotationAnim]);
+
+  const chevronRotation = rotationAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg'],
+  });
+
+  return (
+    <View style={styles.section}>
+      <Pressable
+        style={styles.header}
+        onPress={() => setExpanded(!expanded)}
+      >
+        <Text style={styles.title}>{title}</Text>
+        <Animated.Text style={[styles.chevron, { transform: [{ rotate: chevronRotation }] }]}>
+          ›
+        </Animated.Text>
+      </Pressable>
+      {expanded && <View style={styles.body}>{children}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 13,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  chevron: {
+    fontSize: 20,
+    fontWeight: '500',
+    color: Colors.textLight,
+    width: 20,
+    textAlign: 'center',
+  },
+  body: {
+    paddingHorizontal: 16,
+    paddingBottom: 14,
+  },
+});

package/src/components/shared/CopyButton.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { Colors } from '../../utils/constants';
+import { copyToComputer } from '../../utils/copyToComputer';
+
+interface CopyButtonProps {
+  /** Content to copy */
+  text: string;
+  /** Label for console.log identification */
+  label?: string;
+  /** Compact mode for inline use */
+  compact?: boolean;
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({ text, label, compact }) => {
+  const [feedback, setFeedback] = useState<'copied' | 'logged' | null>(null);
+
+  const handleCopy = useCallback(() => {
+    try {
+      const result = copyToComputer(text, { label });
+      setFeedback(result.method === 'clipboard' ? 'copied' : 'logged');
+    } catch {
+      setFeedback('logged');
+    }
+    setTimeout(() => setFeedback(null), 2000);
+  }, [text, label]);
+
+  if (!text) return null;
+
+  const feedbackLabel =
+    feedback === 'copied' ? 'Copied' :
+    feedback === 'logged' ? 'Logged' :
+    null;
+
+  return (
+    <TouchableOpacity
+      style={[s.copyBtn, compact && s.copyBtnCompact]}
+      onPress={handleCopy}
+      activeOpacity={0.7}
+    >
+      <Text style={[s.copyBtnText, compact && s.copyBtnTextCompact]}>
+        {feedbackLabel ?? 'Copy'}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const s = StyleSheet.create({
+  copyBtn: {
+    backgroundColor: Colors.background,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 8,
+    alignSelf: 'flex-end',
+  },
+  copyBtnCompact: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  copyBtnText: {
+    fontSize: 12,
+    color: Colors.textSecondary,
+    fontWeight: '500',
+  },
+  copyBtnTextCompact: {
+    fontSize: 11,
+  },
+});