react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/Inspector/FeedbackModal.js

@@ -1,515 +1,198 @@
-import React, { useState, useEffect } from 'react';
-import { Alert, Dimensions, PixelRatio, Platform, Linking, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { LIB_VERSION } from '../../constants/version';
-import { getAppName, getBundleIdentifier, getAppVersionAndBuild, copyToClipboard, showToast, } from '../../helpers';
-import { trackTelemetryEvent } from '../../helpers/telemetry';
-import { HeadphonesIcon, SendIcon, StarIcon, CopyIcon, InfoCircleIcon, CheckIcon, } from '../NetworkIcons';
-const DEVELOPER_EMAIL = 'vengatmacuser@gmail.com';
-const CATEGORIES = [
-    { key: 'feedback', label: 'Feedback', icon: '💬' },
-    { key: 'bug', label: 'Bug Report', icon: '🐛' },
-    { key: 'feature', label: 'Feature Request', icon: '✨' },
-    { key: 'performance', label: 'Performance', icon: '⚡' },
-    { key: 'help', label: 'Support / Help', icon: '❓' },
-];
-const RATING_LABELS = ['', 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent!'];
-export const FeedbackModal = ({ onClose }) => {
-    const [category, setCategory] = useState('feedback');
-    const [rating, setRating] = useState(5);
-    const [subject, setSubject] = useState('');
-    const [message, setMessage] = useState('');
-    const [showDiagnostics, setShowDiagnostics] = useState(false);
-    const [isSending, setIsSending] = useState(false);
-    const [copiedDraft, setCopiedDraft] = useState(false);
-    useEffect(() => {
-        trackTelemetryEvent('feedback_modal_opened', { category });
-    }, []);
-    const appName = getAppName() || 'React Native App';
-    const bundleId = getBundleIdentifier() || 'unknown';
-    const appVersion = getAppVersionAndBuild() || '1.0.0';
-    const { width, height } = Dimensions.get('window');
-    const getDiagnosticsText = () => {
-        return [
-            `• Package: react-native-inapp-inspector@${LIB_VERSION}`,
-            `• Platform: ${Platform.OS.toUpperCase()} (${Platform.Version})`,
-            `• App: ${appName} (${bundleId}) v${appVersion}`,
-            `• Screen: ${Math.round(width)} x ${Math.round(height)} (Scale ${PixelRatio.get()})`,
-            `• Timestamp: ${new Date().toISOString()}`,
-        ].join('\n');
-    };
-    const buildEmailDraft = () => {
-        const activeCat = CATEGORIES.find(c => c.key === category)?.label || category;
-        const emailSubject = `[In-App Inspector] [${activeCat}] ${subject.trim() || 'User Feedback'}`;
-        const bodyLines = [
-            `Category: ${activeCat}`,
-            `Rating: ${rating} / 5 (${RATING_LABELS[rating] || ''})`,
-            ...(subject.trim() ? [`Subject: ${subject.trim()}`] : []),
-            '',
-            'Feedback / Message:',
-            message.trim() || '(No message provided)',
-            '',
-            '----------------------------------------',
-            'System & Diagnostic Info:',
-            getDiagnosticsText(),
-            '----------------------------------------',
-        ];
-        return {
-            activeCat,
-            subject: emailSubject,
-            body: bodyLines.join('\n'),
-        };
-    };
-    const handleCopyDraft = () => {
-        const draft = buildEmailDraft();
-        const fullText = `To: ${DEVELOPER_EMAIL}\nSubject: ${draft.subject}\n\n${draft.body}`;
-        copyToClipboard(fullText, 'Email Draft & Diagnostics');
-        setCopiedDraft(true);
-        setTimeout(() => setCopiedDraft(false), 2000);
-        showToast('Feedback draft copied to clipboard');
-    };
-    const handleSendEmail = async () => {
-        if (isSending)
-            return;
-        setIsSending(true);
-        try {
-            const draft = buildEmailDraft();
-            const mailtoUrl = `mailto:${DEVELOPER_EMAIL}?subject=${encodeURIComponent(draft.subject)}&body=${encodeURIComponent(draft.body)}`;
-            trackTelemetryEvent('feedback_submitted', {
-                category,
-                rating,
-                has_subject: Boolean(subject.trim()),
-                has_message: Boolean(message.trim()),
-            });
-            let opened = false;
-            try {
-                const canOpen = await Linking.canOpenURL(mailtoUrl);
-                if (canOpen) {
-                    await Linking.openURL(mailtoUrl);
-                    opened = true;
-                }
-                else {
-                    await Linking.openURL(mailtoUrl);
-                    opened = true;
-                }
-            }
-            catch (err) {
-                opened = false;
-            }
-            if (opened) {
-                showToast('Opening mail client...');
-                onClose();
-            }
-            else {
-                const fullDraft = `To: ${DEVELOPER_EMAIL}\nSubject: ${draft.subject}\n\n${draft.body}`;
-                copyToClipboard(fullDraft, 'Feedback Draft');
-                Alert.alert('Email Client Not Available', `Your feedback and diagnostics have been copied to the clipboard!\n\nYou can paste and send directly to:\n${DEVELOPER_EMAIL}`, [
-                    {
-                        text: 'Copy Email Address',
-                        onPress: () => {
-                            copyToClipboard(DEVELOPER_EMAIL, 'Email Address');
-                            showToast('Email address copied!');
-                        },
-                    },
-                    {
-                        text: 'Done',
-                        style: 'default',
-                        onPress: onClose,
-                    },
-                ]);
-            }
-        }
-        catch (err) {
-            console.warn('[FeedbackModal] Error sending email:', err);
-        }
-        finally {
-            setIsSending(false);
-        }
-    };
-    return (<View style={styles.container}>
-      
-      <View style={styles.bannerBar}>
-        <View style={styles.bannerIconBox}>
-          <HeadphonesIcon size={18} color={AppColors.purple}/>
-        </View>
-        <View style={{ flex: 1 }}>
-          <Text style={styles.bannerTitle}>Share your feedback or report an issue</Text>
-          <Text style={styles.bannerSub}>
-            Direct communication with the maintainers. Diagnostic info is auto-attached.
-          </Text>
-        </View>
-      </View>
+import{useState as x,useEffect as Ae,useMemo as M}from"react";import{Alert as Me,Dimensions as je,PixelRatio as We,Platform as V,Linking as ne,Modal as Ge,ScrollView as Ce,StyleSheet as ke,Text as C,TextInput as Se,TouchableOpacity as O,View as S}from"react-native";import Ne,{Path as Ue}from"react-native-svg";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import R from"../TouchableScale";import{LIB_VERSION as qe}from"../../constants/version";import{getAppName as _e,getBundleIdentifier as Ke,getAppVersionAndBuild as Qe,copyToClipboard as K,showToast as j}from"../../helpers";import{trackTelemetryEvent as Q}from"../../helpers/telemetry";import{triggerNativeHaptic as B}from"../../native/NativeInspector";import{SendIcon as Ye,CopyIcon as Je,InfoCircleIcon as Xe,CheckIcon as Te,SearchIcon as Ze,ChevronDownIcon as Co,CloseWhite as So}from"../NetworkIcons";const H="vengatmacuser@gmail.com",To="https://github.com/vengatmacuser/react-native-inapp-inspector",W=[{id:"apis",name:"Network (APIs)",category:"Core Inspector",icon:"\u{1F310}",description:"HTTP/HTTPS requests, WebSocket, status codes & latency",color:"#6366F1",quickChips:["cURL / HAR Export","Requests failing / missing","GraphQL query filter","Response format issue","SSL pinning / certs","Slow API response alerts"]},{id:"logs",name:"Console Logs",category:"Core Inspector",icon:"\u{1F4DD}",description:"console.log, warn, error, trace & regex search",color:"#8B5CF6",quickChips:["Log regex search / filter","Stack trace symbolication","Error group collapse","Custom tag / color highlight","High log spam performance"]},{id:"redux",name:"Redux Inspector",category:"State Management",icon:"\u269B\uFE0F",description:"Redux store slices, action dispatch history & state diff",color:"#7C3AED",quickChips:["Action time-travel / replay","State slice search & diff","Auto action logger","Persistence / rehydration","Large state tree lag"]},{id:"analytics",name:"Analytics Logger",category:"Telemetry",icon:"\u{1F4CA}",description:"Firebase analytics & custom telemetry event tracking",color:"#F59E0B",quickChips:["Firebase auto-interceptor","Custom event param view","Event export to CSV / JSON","Filter by event name"]},{id:"crash",name:"Crash Protection",category:"Diagnostics",icon:"\u{1F4A5}",description:"Unhandled exceptions, fatal crash captures & stack trace",color:"#EF4444",quickChips:["Auto screenshot on crash","Native crash reporting","Symbolicated stack trace","Error boundary recovery"]},{id:"performance",name:"Performance Tracker",category:"Diagnostics",icon:"\u26A1",description:"FPS monitor, memory footprint, CPU & render timing",color:"#10B981",quickChips:["FPS drop alerts","Memory leak detection","Slow component render timings","Screen transition metrics"]},{id:"bundle",name:"Bundle Analyzer",category:"Optimization",icon:"\u{1F4E6}",description:"Hermes JS bundle visualizer & package asset weight",color:"#3B82F6",quickChips:["Package tree visualizer","Duplicate dependency warning","Asset size breakdown","Sourcemap integration"]},{id:"storage",name:"Storage Explorer",category:"Storage",icon:"\u{1F4BE}",description:"AsyncStorage, MMKV & local key-value store viewer",color:"#06B6D4",quickChips:["AsyncStorage live edit","MMKV encrypted keys","Clear storage cache","Key search & filter"]},{id:"capture",name:"Screen Capture",category:"Media",icon:"\u{1F4F8}",description:"High-res screenshots, video & animated GIF recording",color:"#EC4899",quickChips:["GIF conversion resolution","Audio recording option","Auto-hide inspector in shots","Instant media preview"]},{id:"launcher",name:"FAB Launcher & UI",category:"Interface",icon:"\u{1F680}",description:"Floating trigger, gestures, dark mode & modal themes",color:"#D946EF",quickChips:["Draggable FAB positioning","Custom dark / light theme","Font scaling & line heights","Custom app header logo"]},{id:"general",name:"Entire Inspector / General",category:"General",icon:"\u2728",description:"General feedback, documentation, new ideas & support",color:"#64748B",quickChips:["Love this tool! \u{1F680}","Super easy integration \u{1F6E0}\uFE0F","Documentation clarification \u{1F4D6}","Feature roadmap suggestion \u{1F5FA}\uFE0F"]}],Y=[{key:"feedback",label:"Feedback",icon:"\u{1F4AC}",color:"#8B5CF6",bgColor:"#8B5CF618"},{key:"bug",label:"Bug Report",icon:"\u{1F41B}",color:"#EF4444",bgColor:"#EF444418"},{key:"feature",label:"Feature Request",icon:"\u2728",color:"#F59E0B",bgColor:"#F59E0B18"},{key:"performance",label:"Performance",icon:"\u26A1",color:"#10B981",bgColor:"#10B98118"},{key:"help",label:"Support / Help",icon:"\u2753",color:"#3B82F6",bgColor:"#3B82F618"}],J=[{value:1,emoji:"\u{1F621}",label:"Frustrated",color:"#EF4444"},{value:2,emoji:"\u{1F610}",label:"Okay",color:"#F59E0B"},{value:3,emoji:"\u{1F642}",label:"Good",color:"#10B981"},{value:4,emoji:"\u{1F929}",label:"Great",color:"#8B5CF6"},{value:5,emoji:"\u{1F680}",label:"Loving it!",color:"#EC4899"}],Bo=({size:P=14,color:I=o.white})=><Ne width={P}height={P}viewBox="0 0 24 24"fill={I}>
+    <Ue d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+  </Ne>;export const FeedbackModal=({onClose:P})=>{const[I,xe]=x("apis"),[we,E]=x(!1),[L,G]=x(""),[D,Be]=x("feedback"),[F,N]=x([]),[$,Ie]=x(5),[A,Re]=x(""),[U,Fe]=x(!1),[X,Z]=x(!1),[q,ee]=x(!1);Ae(()=>{Q("feedback_modal_opened",{category:D,module:I})},[]);const T=M(()=>W.find(t=>t.id===I)||W[0],[I]),oe=M(()=>{const t=L.trim().toLowerCase();return t?W.filter(r=>r.name.toLowerCase().includes(t)||r.category.toLowerCase().includes(t)||r.description.toLowerCase().includes(t)):W},[L]),te=M(()=>Y.find(t=>t.key===D)||Y[0],[D]),ve=M(()=>T.quickChips,[T]),re=_e()||"React Native App",ze=Ke()||"unknown",ie=Qe()?.formatted||"1.0.0",{width:De,height:Ve}=je.get("window"),ae=()=>[`\u2022 Module Context: ${T.name} (${T.category})`,`\u2022 Package: react-native-inapp-inspector@${qe}`,`\u2022 Platform: ${V.OS.toUpperCase()} (${V.Version})`,`\u2022 App: ${re} (${ze}) v${ie}`,`\u2022 Screen: ${Math.round(De)} x ${Math.round(Ve)} (Scale ${We.get()})`,`\u2022 Timestamp: ${new Date().toISOString()}`].join(`
+`),Pe=t=>{B("light"),N(r=>r.includes(t)?r.filter(w=>w!==t):[...r,t])},Ee=t=>{B("medium"),xe(t.id),E(!1),G(""),N([])},Le=t=>{B("medium"),Be(t)},_=()=>{const t=J.find(z=>z.value===$)||J[4],r=F.length>0?F.join(", "):"General thoughts",w=`[In-App Inspector] [${T.name}] [${te.label}] ${r.slice(0,50)}`,v=[`\u{1F4E6} Module: ${T.name} (${T.category})`,`\u{1F3AF} Type: ${te.label}`,`\u{1F31F} Mood / Experience: ${t.emoji} ${t.label} (${$}/5)`,...F.length>0?["","\u{1F4CC} Key Highlights / Items:",...F.map(z=>`  \u2022 ${z}`)]:[],...A.trim()?["","\u{1F4DD} Additional Notes:",A.trim()]:[],"","----------------------------------------","\u26A1 System & Diagnostic Info (Auto-attached):",ae(),"----------------------------------------"];return{subject:w,body:v.join(`
+`),activeMood:t}},$e=()=>{B("success");const{subject:t,body:r}=_(),w=`To: ${H}
+Subject: ${t}
 
-      <ScrollView style={styles.scrollContent} contentContainerStyle={styles.scrollInner} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
-        
-        <Text style={styles.sectionLabel}>WHAT CAN WE HELP WITH?</Text>
-        <View style={styles.categoryGrid}>
-          {CATEGORIES.map(cat => {
-            const isSelected = category === cat.key;
-            return (<TouchableOpacity key={cat.key} activeOpacity={0.7} onPress={() => setCategory(cat.key)} style={[
-                    styles.categoryChip,
-                    isSelected && styles.categoryChipSelected,
-                ]}>
-                <Text style={styles.categoryIcon}>{cat.icon}</Text>
-                <Text style={[
-                    styles.categoryText,
-                    isSelected && styles.categoryTextSelected,
-                ]}>
-                  {cat.label}
-                </Text>
-              </TouchableOpacity>);
-        })}
-        </View>
+${r}`;K(w,"Feedback Draft & Diagnostics"),ee(!0),setTimeout(()=>ee(!1),2e3),j("Feedback draft & diagnostics copied to clipboard")},Oe=async()=>{B("medium");try{const{subject:t,body:r}=_(),w=encodeURIComponent(t),v=encodeURIComponent(r),z=`${To}/issues/new?title=${w}&body=${v}`;await ne.openURL(z),Q("feedback_github_opened",{category:D,module:I,mood:$})}catch{j("Could not open GitHub browser")}},He=async()=>{if(!X){Z(!0),B("medium");try{const{subject:t,body:r}=_(),w=`mailto:${H}?subject=${encodeURIComponent(t)}&body=${encodeURIComponent(r)}`;Q("feedback_submitted",{category:D,module:I,mood:$,chips_count:F.length,has_custom_note:!!A.trim()});let v=!1;try{await ne.openURL(w),v=!0}catch{v=!1}if(v)j("Opening mail client..."),P();else{const z=`To: ${H}
+Subject: ${t}
+
+${r}`;K(z,"Feedback Draft"),Me.alert("Email Client Not Available",`Your feedback and diagnostics have been copied to clipboard!
 
+You can paste and send directly to:
+${H}`,[{text:"Copy Email Address",onPress:()=>{K(H,"Email Address"),j("Email address copied!")}},{text:"Done",style:"default",onPress:P}])}}catch(t){console.warn("[FeedbackModal] Error sending email:",t)}finally{Z(!1)}}};return<S style={e.container}>
+      <Ce style={e.scrollContent}contentContainerStyle={e.scrollInner}showsVerticalScrollIndicator={!1}keyboardShouldPersistTaps="handled">
         
-        <View style={styles.ratingCard}>
-          <View style={styles.ratingHeader}>
-            <Text style={styles.ratingTitle}>Rate your experience</Text>
-            {rating > 0 && (<Text style={styles.ratingBadge}>
-                {RATING_LABELS[rating]}
-              </Text>)}
-          </View>
-          <View style={styles.starsRow}>
-            {[1, 2, 3, 4, 5].map(star => {
-            const filled = star <= rating;
-            return (<TouchableOpacity key={star} activeOpacity={0.7} onPress={() => setRating(star)} style={styles.starTouch}>
-                  <StarIcon size={26} color={filled ? '#FFB800' : AppColors.grayTextWeak}/>
-                </TouchableOpacity>);
-        })}
-          </View>
-        </View>
+        <C style={e.sectionLabel}>1. TARGET MODULE</C>
+        
+        <R onPress={()=>{B("light"),E(!0)}}style={e.moduleTriggerCard}>
+          <S style={e.moduleTriggerLeft}>
+            <S style={[e.moduleIconBox,{backgroundColor:`${T.color}1C`}]}>
+              <C style={e.moduleIconText}>{T.icon}</C>
+            </S>
+            <S style={{flex:1,minWidth:0}}>
+              <S style={e.moduleNameRow}>
+                <C style={e.moduleNameText}>{T.name}</C>
+                <S style={[e.moduleCategoryBadge,{backgroundColor:`${T.color}18`}]}>
+                  <C style={[e.moduleCategoryBadgeText,{color:T.color}]}>
+                    {T.category}
+                  </C>
+                </S>
+              </S>
+              <C style={e.moduleDescText}numberOfLines={1}>
+                {T.description}
+              </C>
+            </S>
+          </S>
+          
+          <S style={e.changeBadge}>
+            <C style={e.changeBadgeText}>Change</C>
+            <Co size={11}color={o.purple}/>
+          </S>
+        </R>
 
         
-        <Text style={styles.sectionLabel}>SUBJECT (OPTIONAL)</Text>
-        <View style={styles.inputWrapper}>
-          <TextInput style={styles.textInput} placeholder="Brief summary..." placeholderTextColor={AppColors.grayTextWeak} value={subject} onChangeText={setSubject} maxLength={80}/>
-        </View>
+        <S style={e.sectionHeaderRow}>
+          <C style={e.sectionLabel}>
+            2. QUICK PRESETS FOR {T.name.toUpperCase()}
+          </C>
+          {F.length>0&&<O onPress={()=>N([])}>
+              <C style={e.clearChipsText}>Clear</C>
+            </O>}
+        </S>
+
+        <S style={e.chipsContainer}>
+          {ve.map(t=>{const r=F.includes(t);return<R key={t}onPress={()=>Pe(t)}style={[e.presetChip,r&&[e.presetChipSelected,{borderColor:T.color,backgroundColor:`${T.color}18`}]]}>
+                <C style={[e.presetChipCheck,r&&{color:T.color}]}>
+                  {r?"\u2713":"+"}
+                </C>
+                <C style={[e.presetChipText,r&&[e.presetChipTextSelected,{color:T.color}]]}>
+                  {t}
+                </C>
+              </R>})}
+        </S>
 
         
-        <Text style={styles.sectionLabel}>YOUR MESSAGE / DETAILS</Text>
-        <View style={[styles.inputWrapper, styles.textareaWrapper]}>
-          <TextInput style={[styles.textInput, styles.textarea]} placeholder="Describe your issue, feature request, or suggestion in detail..." placeholderTextColor={AppColors.grayTextWeak} value={message} onChangeText={setMessage} multiline numberOfLines={4} textAlignVertical="top"/>
-        </View>
+        <C style={e.sectionLabel}>3. SELECT TOPIC</C>
+        <S style={e.categoryGrid}>
+          {Y.map(t=>{const r=D===t.key;return<R key={t.key}onPress={()=>Le(t.key)}style={[e.categoryChip,r&&{backgroundColor:t.bgColor,borderColor:t.color}]}>
+                <C style={e.categoryIcon}>{t.icon}</C>
+                <C style={[e.categoryText,r&&{color:t.color,fontFamily:k.interBold}]}>
+                  {t.label}
+                </C>
+              </R>})}
+        </S>
 
         
-        <TouchableOpacity activeOpacity={0.8} onPress={() => setShowDiagnostics(!showDiagnostics)} style={styles.diagnosticsToggle}>
-          <View style={styles.diagnosticsHeader}>
-            <InfoCircleIcon size={14} color={AppColors.purple}/>
-            <Text style={styles.diagnosticsTitle}>
-              Diagnostics & System Details (Auto-attached)
-            </Text>
-          </View>
-          <Text style={styles.diagnosticsArrow}>
-            {showDiagnostics ? '▲' : '▼'}
-          </Text>
-        </TouchableOpacity>
+        <C style={e.sectionLabel}>4. HOW IS YOUR EXPERIENCE?</C>
+        <S style={e.moodCard}>
+          <S style={e.moodRow}>
+            {J.map(t=>{const r=$===t.value;return<R key={t.value}onPress={()=>{B("light"),Ie(t.value)}}style={[e.moodButton,r&&[e.moodButtonSelected,{borderColor:t.color,backgroundColor:`${t.color}15`}]]}>
+                  <C style={e.moodEmoji}>{t.emoji}</C>
+                  <C style={[e.moodLabel,r&&{color:t.color,fontFamily:k.interBold}]}>
+                    {t.label}
+                  </C>
+                </R>})}
+          </S>
+        </S>
 
-        {showDiagnostics && (<View style={styles.diagnosticsBox}>
-            <Text style={styles.diagnosticsText}>
-              {getDiagnosticsText()}
-            </Text>
-          </View>)}
+        
+        <C style={e.sectionLabel}>5. ADDITIONAL DETAILS (OPTIONAL)</C>
+        <S style={e.inputWrapper}>
+          <Se style={e.textInput}placeholder="Type any extra thoughts, steps to reproduce, or notes here..."placeholderTextColor={o.grayTextWeak}value={A}onChangeText={Re}multiline numberOfLines={3}textAlignVertical="top"/>
+        </S>
 
         
-        <View style={styles.recipientBadge}>
-          <Text style={styles.recipientText}>
-            📧 Emails to: <Text style={styles.recipientHighlight}>{DEVELOPER_EMAIL}</Text>
-          </Text>
-        </View>
-      </ScrollView>
+        <O activeOpacity={.8}onPress={()=>{B("light"),Fe(!U)}}style={e.diagnosticsPill}>
+          <S style={e.diagnosticsLeft}>
+            <Xe size={14}color={o.purple}/>
+            <C style={e.diagnosticsPillTitle}numberOfLines={1}>
+              {V.OS.toUpperCase()} {V.Version} • {re} v{ie} (Auto-attached)
+            </C>
+          </S>
+          <C style={e.diagnosticsArrow}>
+            {U?"\u25B2 Less":"\u25BC Details"}
+          </C>
+        </O>
+
+        {U&&<S style={e.diagnosticsBox}>
+            <C style={e.diagnosticsText}>{ae()}</C>
+          </S>}
+      </Ce>
+
+      
+      <S style={e.footer}>
+        <S style={e.footerLeft}>
+          <R onPress={$e}style={e.actionPillBtn}>
+            {q?<Te size={14}color={o.emerald500}/>:<Je size={14}color={o.grayTextStrong}/>}
+            <C style={[e.actionPillText,q&&{color:o.emerald500}]}>
+              {q?"Copied!":"Copy"}
+            </C>
+          </R>
+
+          <R onPress={Oe}style={[e.actionPillBtn,e.githubPillBtn]}>
+            <Bo size={13}color={o.primaryBlack}/>
+            <C style={e.actionPillText}>GitHub</C>
+          </R>
+        </S>
+
+        <R onPress={He}style={e.primarySubmitBtn}>
+          <Ye size={15}color={o.white}/>
+          <C style={e.primarySubmitBtnText}>
+            {X?"Sending...":"Send Feedback"}
+          </C>
+        </R>
+      </S>
 
       
-      <View style={styles.footer}>
-        <TouchableOpacity activeOpacity={0.7} onPress={handleCopyDraft} style={styles.copyDraftBtn}>
-          {copiedDraft ? (<CheckIcon size={14} color={AppColors.emerald500}/>) : (<CopyIcon size={14} color={AppColors.grayText}/>)}
-          <Text style={[
-            styles.copyDraftBtnText,
-            copiedDraft && { color: AppColors.emerald500 },
-        ]}>
-            {copiedDraft ? 'Copied!' : 'Copy Draft'}
-          </Text>
-        </TouchableOpacity>
+      <Ge visible={we}transparent={!0}animationType="fade"onRequestClose={()=>E(!1)}>
+        <S style={e.modalOverlay}>
+          <O style={e.modalBackdrop}activeOpacity={1}onPress={()=>E(!1)}/>
+          <S style={e.pickerModalContainer}>
+            
+            <S style={e.pickerHeader}>
+              <S style={{flex:1}}>
+                <C style={e.pickerHeaderTitle}>Select Target Module</C>
+                <C style={e.pickerHeaderSub}>
+                  Choose which inspector feature you want to report on
+                </C>
+              </S>
+              <O onPress={()=>E(!1)}hitSlop={12}style={e.pickerCloseBtn}>
+                <So size={12}/>
+              </O>
+            </S>
 
-        <View style={styles.footerRight}>
-          <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={styles.cancelBtn}>
-            <Text style={styles.cancelBtnText}>Cancel</Text>
-          </TouchableOpacity>
+            
+            <S style={e.pickerSearchWrapper}>
+              <Ze size={14}color={o.purple}/>
+              <Se style={e.pickerSearchInput}placeholder="Search all 11 modules..."placeholderTextColor={o.grayTextWeak}value={L}onChangeText={G}autoFocus={!1}/>
+              {L.length>0&&<O onPress={()=>G("")}hitSlop={10}>
+                  <C style={e.pickerClearSearchText}>✕</C>
+                </O>}
+            </S>
 
-          <TouchableOpacity activeOpacity={0.8} onPress={handleSendEmail} style={styles.submitBtn}>
-            <SendIcon size={16} color={AppColors.white}/>
-            <Text style={styles.submitBtnText}>
-              {isSending ? 'Sending...' : 'Send via Email'}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>);
-};
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.primaryLight,
-    },
-    bannerBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-        backgroundColor: `${AppColors.purple}12`,
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: `${AppColors.purple}20`,
-    },
-    bannerIconBox: {
-        width: 32,
-        height: 32,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.purple}20`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    bannerTitle: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 12.5,
-        color: AppColors.purple,
-    },
-    bannerSub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-        marginTop: 1,
-    },
-    scrollContent: {
-        flex: 1,
-    },
-    scrollInner: {
-        paddingHorizontal: 16,
-        paddingTop: 12,
-        paddingBottom: 20,
-    },
-    sectionLabel: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-        letterSpacing: 0.8,
-        marginBottom: 8,
-        marginTop: 10,
-    },
-    categoryGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 8,
-        paddingBottom: 4,
-    },
-    categoryChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingVertical: 7,
-        paddingHorizontal: 12,
-        borderRadius: 8,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    categoryChipSelected: {
-        backgroundColor: `${AppColors.purple}15`,
-        borderColor: AppColors.purple,
-    },
-    categoryIcon: {
-        fontSize: 13,
-    },
-    categoryText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.grayText,
-    },
-    categoryTextSelected: {
-        color: AppColors.purple,
-        fontFamily: AppFonts.interSemiBold,
-    },
-    ratingCard: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 12,
-        padding: 12,
-        marginTop: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    ratingHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 8,
-    },
-    ratingTitle: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    ratingBadge: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 11,
-        color: '#D97706',
-        backgroundColor: '#FEF3C7',
-        paddingHorizontal: 8,
-        paddingVertical: 2,
-        borderRadius: 6,
-    },
-    starsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        paddingVertical: 4,
-    },
-    starTouch: {
-        padding: 2,
-    },
-    inputWrapper: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    textareaWrapper: {
-        minHeight: 88,
-        paddingVertical: 10,
-    },
-    textInput: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        padding: 0,
-    },
-    textarea: {
-        height: 72,
-    },
-    diagnosticsToggle: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: `${AppColors.purple}10`,
-        borderRadius: 8,
-        paddingHorizontal: 12,
-        paddingVertical: 9,
-        marginTop: 14,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}25`,
-    },
-    diagnosticsHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        flex: 1,
-    },
-    diagnosticsTitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.purple,
-    },
-    diagnosticsArrow: {
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    diagnosticsBox: {
-        backgroundColor: '#1E1B2E',
-        borderRadius: 8,
-        padding: 10,
-        marginTop: 6,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    diagnosticsText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: '#E2DFEB',
-        lineHeight: 17,
-    },
-    recipientBadge: {
-        marginTop: 12,
-        paddingVertical: 6,
-        paddingHorizontal: 10,
-        borderRadius: 6,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        alignSelf: 'flex-start',
-    },
-    recipientText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    recipientHighlight: {
-        fontFamily: AppFonts.interSemiBold,
-        color: AppColors.purple,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingTop: 10,
-        paddingBottom: 14,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-        backgroundColor: AppColors.primaryLight,
-    },
-    copyDraftBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-        borderRadius: 8,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    copyDraftBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayText,
-    },
-    footerRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    cancelBtn: {
-        paddingVertical: 8,
-        paddingHorizontal: 14,
-        borderRadius: 8,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    cancelBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12.5,
-        color: AppColors.grayText,
-    },
-    submitBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        backgroundColor: AppColors.purple,
-        paddingVertical: 8,
-        paddingHorizontal: 15,
-        borderRadius: 8,
-        shadowColor: AppColors.purple,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.35,
-        shadowRadius: 6,
-        elevation: 4,
-    },
-    submitBtnText: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 12.5,
-        color: AppColors.white,
-    },
-});
-export default FeedbackModal;
+            
+            <Ce style={e.pickerListScroll}contentContainerStyle={{paddingBottom:20}}showsVerticalScrollIndicator={!1}keyboardShouldPersistTaps="handled">
+              {oe.length===0?<S style={e.emptySearchWrap}>
+                  <C style={e.emptySearchText}>
+                    No modules match "{L}"
+                  </C>
+                </S>:oe.map(t=>{const r=t.id===I;return<R key={t.id}onPress={()=>Ee(t)}style={[e.pickerItemCard,r&&[e.pickerItemCardSelected,{borderColor:t.color,backgroundColor:`${t.color}0E`}]]}>
+                      <S style={[e.pickerItemIconBox,{backgroundColor:`${t.color}1C`}]}>
+                        <C style={e.moduleIconText}>{t.icon}</C>
+                      </S>
+                      <S style={{flex:1,minWidth:0}}>
+                        <S style={e.pickerItemTitleRow}>
+                          <C style={[e.pickerItemTitle,r&&{color:t.color,fontFamily:k.interBold}]}>
+                            {t.name}
+                          </C>
+                          <S style={[e.moduleCategoryBadge,{backgroundColor:`${t.color}18`}]}>
+                            <C style={[e.moduleCategoryBadgeText,{color:t.color}]}>
+                              {t.category}
+                            </C>
+                          </S>
+                        </S>
+                        <C style={e.pickerItemDesc}numberOfLines={2}>
+                          {t.description}
+                        </C>
+                      </S>
+                      {r&&<S style={[e.pickerItemCheck,{backgroundColor:`${t.color}25`}]}>
+                          <Te size={12}color={t.color}/>
+                        </S>}
+                    </R>})}
+            </Ce>
+          </S>
+        </S>
+      </Ge>
+    </S>};const e=ke.create({container:{flex:1,backgroundColor:o.primaryLight},bannerBar:{flexDirection:"row",alignItems:"center",gap:12,backgroundColor:`${o.purple}10`,paddingHorizontal:16,paddingVertical:12,borderBottomWidth:1,borderBottomColor:`${o.purple}20`},bannerIconBox:{width:36,height:36,borderRadius:10,backgroundColor:`${o.purple}20`,alignItems:"center",justifyContent:"center"},bannerTitleRow:{flexDirection:"row",alignItems:"center",gap:8},bannerTitle:{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:o.purple},livePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${o.liveGreen}20`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:10,borderWidth:1,borderColor:`${o.liveGreen}40`},liveDot:{width:5,height:5,borderRadius:2.5,backgroundColor:o.liveGreen},liveText:{fontFamily:k.interBold,fontSize:8.5,color:o.liveGreen},bannerSub:{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:o.grayText,marginTop:2},scrollContent:{flex:1},scrollInner:{paddingHorizontal:16,paddingTop:14,paddingBottom:24},sectionLabel:{fontFamily:k.interBold,fontSize:10.5,color:o.grayTextStrong,letterSpacing:.6,marginBottom:8},sectionHeaderRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:14,marginBottom:8},clearChipsText:{fontFamily:k.interSemiBold,fontSize:11,color:o.purple},moduleTriggerCard:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:o.grayBackground,borderRadius:12,borderWidth:1.5,borderColor:o.dividerColor,paddingHorizontal:12,paddingVertical:10,marginBottom:8,shadowColor:o.black,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:3,elevation:1},moduleTriggerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,marginRight:8},moduleIconBox:{width:38,height:38,borderRadius:10,alignItems:"center",justifyContent:"center"},moduleIconText:{fontSize:18},moduleNameRow:{flexDirection:"row",alignItems:"center",gap:6},moduleNameText:{fontFamily:k.interBold,fontSize:13,color:o.primaryBlack},moduleCategoryBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:6},moduleCategoryBadgeText:{fontFamily:k.interSemiBold,fontSize:9,letterSpacing:.2},moduleDescText:{fontFamily:k.interRegular,fontSize:10.5,color:o.grayTextWeak,marginTop:2},changeBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${o.purple}14`,paddingHorizontal:8,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:`${o.purple}30`},changeBadgeText:{fontFamily:k.interSemiBold,fontSize:10.5,color:o.purple},chipsContainer:{flexDirection:"row",flexWrap:"wrap",gap:7,marginBottom:14},presetChip:{flexDirection:"row",alignItems:"center",gap:5,paddingVertical:6.5,paddingHorizontal:11,borderRadius:8,backgroundColor:o.grayBackground,borderWidth:1.2,borderColor:o.dividerColor},presetChipSelected:{shadowColor:o.black,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2,elevation:1},presetChipCheck:{fontFamily:k.interBold,fontSize:11,color:o.grayTextWeak},presetChipText:{fontFamily:k.interMedium,fontSize:11.5,lineHeight:15,color:o.primaryBlack},presetChipTextSelected:{fontFamily:k.interSemiBold},categoryGrid:{flexDirection:"row",flexWrap:"wrap",gap:8,marginBottom:14},categoryChip:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:7,paddingHorizontal:12,borderRadius:10,backgroundColor:o.grayBackground,borderWidth:1.5,borderColor:o.dividerColor},categoryIcon:{fontSize:13},categoryText:{fontFamily:k.interMedium,fontSize:12,lineHeight:16,color:o.grayText},moodCard:{backgroundColor:o.grayBackground,borderRadius:12,padding:8,marginBottom:14,borderWidth:1,borderColor:o.dividerColor},moodRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:4},moodButton:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:2,borderRadius:8,borderWidth:1.5,borderColor:"transparent"},moodButtonSelected:{shadowColor:o.black,shadowOffset:{width:0,height:1},shadowOpacity:.06,shadowRadius:2,elevation:1},moodEmoji:{fontSize:22,marginBottom:4},moodLabel:{fontFamily:k.interMedium,fontSize:9.5,color:o.grayText,textAlign:"center"},inputWrapper:{backgroundColor:o.grayBackground,borderRadius:10,borderWidth:1,borderColor:o.dividerColor,paddingHorizontal:12,paddingVertical:8,minHeight:70,marginBottom:12},textInput:{fontFamily:k.interRegular,fontSize:12.5,lineHeight:18,color:o.primaryBlack,padding:0,minHeight:54},diagnosticsPill:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:`${o.purple}0C`,borderRadius:8,paddingHorizontal:12,paddingVertical:8,borderWidth:1,borderColor:`${o.purple}20`},diagnosticsLeft:{flexDirection:"row",alignItems:"center",gap:7,flex:1,marginRight:6},diagnosticsPillTitle:{fontFamily:k.interMedium,fontSize:11,color:o.purple,flexShrink:1},diagnosticsArrow:{fontFamily:k.interSemiBold,fontSize:10.5,color:o.purple},diagnosticsBox:{backgroundColor:"#1E1B2E",borderRadius:8,padding:10,marginTop:6,borderWidth:1,borderColor:o.dividerColor},diagnosticsText:{fontFamily:k.interRegular,fontSize:11,color:"#E2DFEB",lineHeight:17},footer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:10,paddingBottom:V.OS==="ios"?34:14,borderTopWidth:1,borderTopColor:o.dividerColor,backgroundColor:o.primaryLight,gap:10},footerLeft:{flexDirection:"row",alignItems:"center",gap:8},actionPillBtn:{flexDirection:"row",alignItems:"center",gap:5,paddingVertical:8,paddingHorizontal:11,borderRadius:8,backgroundColor:o.grayBackground,borderWidth:1,borderColor:o.dividerColor},githubPillBtn:{backgroundColor:`${o.black}08`},actionPillText:{fontFamily:k.interSemiBold,fontSize:11.5,color:o.grayTextStrong},primarySubmitBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:o.purple,paddingVertical:9,paddingHorizontal:14,borderRadius:8,shadowColor:o.purple,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:6,elevation:4},primarySubmitBtnText:{fontFamily:k.interBold,fontSize:12.5,color:o.white},modalOverlay:{flex:1,justifyContent:"flex-end",backgroundColor:"rgba(0, 0, 0, 0.55)"},modalBackdrop:{...ke.absoluteFillObject},pickerModalContainer:{backgroundColor:o.primaryLight,borderTopLeftRadius:20,borderTopRightRadius:20,maxHeight:"82%",paddingHorizontal:16,paddingTop:16,paddingBottom:V.OS==="ios"?34:16,shadowColor:o.black,shadowOffset:{width:0,height:-4},shadowOpacity:.15,shadowRadius:10,elevation:20},pickerHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:12},pickerHeaderTitle:{fontFamily:k.interBold,fontSize:15,color:o.primaryBlack},pickerHeaderSub:{fontFamily:k.interRegular,fontSize:11,color:o.grayText,marginTop:1},pickerCloseBtn:{width:28,height:28,borderRadius:14,backgroundColor:`${o.black}15`,alignItems:"center",justifyContent:"center"},pickerSearchWrapper:{flexDirection:"row",alignItems:"center",backgroundColor:o.grayBackground,borderRadius:10,borderWidth:1,borderColor:o.dividerColor,paddingHorizontal:10,paddingVertical:8,gap:8,marginBottom:12},pickerSearchInput:{flex:1,fontFamily:k.interRegular,fontSize:13,color:o.primaryBlack,padding:0},pickerClearSearchText:{fontFamily:k.interBold,fontSize:12,color:o.grayTextWeak,paddingHorizontal:4},pickerListScroll:{maxHeight:380},emptySearchWrap:{paddingVertical:24,alignItems:"center",justifyContent:"center"},emptySearchText:{fontFamily:k.interMedium,fontSize:12,color:o.grayTextWeak},pickerItemCard:{flexDirection:"row",alignItems:"center",gap:12,padding:10,borderRadius:10,backgroundColor:o.grayBackground,borderWidth:1.5,borderColor:o.dividerColor,marginBottom:8},pickerItemCardSelected:{shadowColor:o.black,shadowOffset:{width:0,height:2},shadowOpacity:.05,shadowRadius:3,elevation:2},pickerItemIconBox:{width:36,height:36,borderRadius:9,alignItems:"center",justifyContent:"center"},pickerItemTitleRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:2},pickerItemTitle:{fontFamily:k.interSemiBold,fontSize:12.5,color:o.primaryBlack},pickerItemDesc:{fontFamily:k.interRegular,fontSize:10.5,lineHeight:14,color:o.grayTextWeak},pickerItemCheck:{width:22,height:22,borderRadius:11,alignItems:"center",justifyContent:"center"}});export default FeedbackModal;