react-native-inapp-inspector 2.3.14 → 2.3.16

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

@@ -0,0 +1,552 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const version_1 = require("../../constants/version");
+const helpers_1 = require("../../helpers");
+const telemetry_1 = require("../../helpers/telemetry");
+const NetworkIcons_1 = require("../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!'];
+const FeedbackModal = ({ onClose }) => {
+    const [category, setCategory] = (0, react_1.useState)('feedback');
+    const [rating, setRating] = (0, react_1.useState)(5);
+    const [subject, setSubject] = (0, react_1.useState)('');
+    const [message, setMessage] = (0, react_1.useState)('');
+    const [showDiagnostics, setShowDiagnostics] = (0, react_1.useState)(false);
+    const [isSending, setIsSending] = (0, react_1.useState)(false);
+    const [copiedDraft, setCopiedDraft] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        (0, telemetry_1.trackTelemetryEvent)('feedback_modal_opened', { category });
+    }, []);
+    const appName = (0, helpers_1.getAppName)() || 'React Native App';
+    const bundleId = (0, helpers_1.getBundleIdentifier)() || 'unknown';
+    const appVersion = (0, helpers_1.getAppVersionAndBuild)() || '1.0.0';
+    const { width, height } = react_native_1.Dimensions.get('window');
+    const getDiagnosticsText = () => {
+        return [
+            `• Package: react-native-inapp-inspector@${version_1.LIB_VERSION}`,
+            `• Platform: ${react_native_1.Platform.OS.toUpperCase()} (${react_native_1.Platform.Version})`,
+            `• App: ${appName} (${bundleId}) v${appVersion}`,
+            `• Screen: ${Math.round(width)} x ${Math.round(height)} (Scale ${react_native_1.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}`;
+        (0, helpers_1.copyToClipboard)(fullText, 'Email Draft & Diagnostics');
+        setCopiedDraft(true);
+        setTimeout(() => setCopiedDraft(false), 2000);
+        (0, helpers_1.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)}`;
+            (0, telemetry_1.trackTelemetryEvent)('feedback_submitted', {
+                category,
+                rating,
+                has_subject: Boolean(subject.trim()),
+                has_message: Boolean(message.trim()),
+            });
+            let opened = false;
+            try {
+                const canOpen = await react_native_1.Linking.canOpenURL(mailtoUrl);
+                if (canOpen) {
+                    await react_native_1.Linking.openURL(mailtoUrl);
+                    opened = true;
+                }
+                else {
+                    await react_native_1.Linking.openURL(mailtoUrl);
+                    opened = true;
+                }
+            }
+            catch (err) {
+                opened = false;
+            }
+            if (opened) {
+                (0, helpers_1.showToast)('Opening mail client...');
+                onClose();
+            }
+            else {
+                const fullDraft = `To: ${DEVELOPER_EMAIL}\nSubject: ${draft.subject}\n\n${draft.body}`;
+                (0, helpers_1.copyToClipboard)(fullDraft, 'Feedback Draft');
+                react_native_1.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: () => {
+                            (0, helpers_1.copyToClipboard)(DEVELOPER_EMAIL, 'Email Address');
+                            (0, helpers_1.showToast)('Email address copied!');
+                        },
+                    },
+                    {
+                        text: 'Done',
+                        style: 'default',
+                        onPress: onClose,
+                    },
+                ]);
+            }
+        }
+        catch (err) {
+            console.warn('[FeedbackModal] Error sending email:', err);
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    return (<react_native_1.View style={styles.container}>
+      
+      <react_native_1.View style={styles.bannerBar}>
+        <react_native_1.View style={styles.bannerIconBox}>
+          <NetworkIcons_1.HeadphonesIcon size={18} color={AppColors_1.AppColors.purple}/>
+        </react_native_1.View>
+        <react_native_1.View style={{ flex: 1 }}>
+          <react_native_1.Text style={styles.bannerTitle}>Share your feedback or report an issue</react_native_1.Text>
+          <react_native_1.Text style={styles.bannerSub}>
+            Direct communication with the maintainers. Diagnostic info is auto-attached.
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      <react_native_1.ScrollView style={styles.scrollContent} contentContainerStyle={styles.scrollInner} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
+        
+        <react_native_1.Text style={styles.sectionLabel}>WHAT CAN WE HELP WITH?</react_native_1.Text>
+        <react_native_1.View style={styles.categoryGrid}>
+          {CATEGORIES.map(cat => {
+            const isSelected = category === cat.key;
+            return (<react_native_1.TouchableOpacity key={cat.key} activeOpacity={0.7} onPress={() => setCategory(cat.key)} style={[
+                    styles.categoryChip,
+                    isSelected && styles.categoryChipSelected,
+                ]}>
+                <react_native_1.Text style={styles.categoryIcon}>{cat.icon}</react_native_1.Text>
+                <react_native_1.Text style={[
+                    styles.categoryText,
+                    isSelected && styles.categoryTextSelected,
+                ]}>
+                  {cat.label}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>);
+        })}
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.ratingCard}>
+          <react_native_1.View style={styles.ratingHeader}>
+            <react_native_1.Text style={styles.ratingTitle}>Rate your experience</react_native_1.Text>
+            {rating > 0 && (<react_native_1.Text style={styles.ratingBadge}>
+                {RATING_LABELS[rating]}
+              </react_native_1.Text>)}
+          </react_native_1.View>
+          <react_native_1.View style={styles.starsRow}>
+            {[1, 2, 3, 4, 5].map(star => {
+            const filled = star <= rating;
+            return (<react_native_1.TouchableOpacity key={star} activeOpacity={0.7} onPress={() => setRating(star)} style={styles.starTouch}>
+                  <NetworkIcons_1.StarIcon size={26} color={filled ? '#FFB800' : AppColors_1.AppColors.grayTextWeak}/>
+                </react_native_1.TouchableOpacity>);
+        })}
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.Text style={styles.sectionLabel}>SUBJECT (OPTIONAL)</react_native_1.Text>
+        <react_native_1.View style={styles.inputWrapper}>
+          <react_native_1.TextInput style={styles.textInput} placeholder="Brief summary..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={subject} onChangeText={setSubject} maxLength={80}/>
+        </react_native_1.View>
+
+        
+        <react_native_1.Text style={styles.sectionLabel}>YOUR MESSAGE / DETAILS</react_native_1.Text>
+        <react_native_1.View style={[styles.inputWrapper, styles.textareaWrapper]}>
+          <react_native_1.TextInput style={[styles.textInput, styles.textarea]} placeholder="Describe your issue, feature request, or suggestion in detail..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={message} onChangeText={setMessage} multiline numberOfLines={4} textAlignVertical="top"/>
+        </react_native_1.View>
+
+        
+        <react_native_1.TouchableOpacity activeOpacity={0.8} onPress={() => setShowDiagnostics(!showDiagnostics)} style={styles.diagnosticsToggle}>
+          <react_native_1.View style={styles.diagnosticsHeader}>
+            <NetworkIcons_1.InfoCircleIcon size={14} color={AppColors_1.AppColors.purple}/>
+            <react_native_1.Text style={styles.diagnosticsTitle}>
+              Diagnostics & System Details (Auto-attached)
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.Text style={styles.diagnosticsArrow}>
+            {showDiagnostics ? '▲' : '▼'}
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+
+        {showDiagnostics && (<react_native_1.View style={styles.diagnosticsBox}>
+            <react_native_1.Text style={styles.diagnosticsText}>
+              {getDiagnosticsText()}
+            </react_native_1.Text>
+          </react_native_1.View>)}
+
+        
+        <react_native_1.View style={styles.recipientBadge}>
+          <react_native_1.Text style={styles.recipientText}>
+            📧 Emails to: <react_native_1.Text style={styles.recipientHighlight}>{DEVELOPER_EMAIL}</react_native_1.Text>
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.ScrollView>
+
+      
+      <react_native_1.View style={styles.footer}>
+        <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={handleCopyDraft} style={styles.copyDraftBtn}>
+          {copiedDraft ? (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.emerald500}/>) : (<NetworkIcons_1.CopyIcon size={14} color={AppColors_1.AppColors.grayText}/>)}
+          <react_native_1.Text style={[
+            styles.copyDraftBtnText,
+            copiedDraft && { color: AppColors_1.AppColors.emerald500 },
+        ]}>
+            {copiedDraft ? 'Copied!' : 'Copy Draft'}
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+
+        <react_native_1.View style={styles.footerRight}>
+          <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={onClose} style={styles.cancelBtn}>
+            <react_native_1.Text style={styles.cancelBtnText}>Cancel</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+
+          <react_native_1.TouchableOpacity activeOpacity={0.8} onPress={handleSendEmail} style={styles.submitBtn}>
+            <NetworkIcons_1.SendIcon size={16} color={AppColors_1.AppColors.white}/>
+            <react_native_1.Text style={styles.submitBtnText}>
+              {isSending ? 'Sending...' : 'Send via Email'}
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.FeedbackModal = FeedbackModal;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+    },
+    bannerBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        backgroundColor: `${AppColors_1.AppColors.purple}12`,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: `${AppColors_1.AppColors.purple}20`,
+    },
+    bannerIconBox: {
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        backgroundColor: `${AppColors_1.AppColors.purple}20`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    bannerTitle: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    bannerSub: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayText,
+        marginTop: 1,
+    },
+    scrollContent: {
+        flex: 1,
+    },
+    scrollInner: {
+        paddingHorizontal: 16,
+        paddingTop: 12,
+        paddingBottom: 20,
+    },
+    sectionLabel: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 10.5,
+        color: AppColors_1.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_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    categoryChipSelected: {
+        backgroundColor: `${AppColors_1.AppColors.purple}15`,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    categoryIcon: {
+        fontSize: 13,
+    },
+    categoryText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayText,
+    },
+    categoryTextSelected: {
+        color: AppColors_1.AppColors.purple,
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+    },
+    ratingCard: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 12,
+        padding: 12,
+        marginTop: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    ratingHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    ratingTitle: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    ratingBadge: {
+        fontFamily: AppFonts_1.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_1.AppColors.grayBackground,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    textareaWrapper: {
+        minHeight: 88,
+        paddingVertical: 10,
+    },
+    textInput: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+        padding: 0,
+    },
+    textarea: {
+        height: 72,
+    },
+    diagnosticsToggle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: `${AppColors_1.AppColors.purple}10`,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 9,
+        marginTop: 14,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}25`,
+    },
+    diagnosticsHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flex: 1,
+    },
+    diagnosticsTitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    diagnosticsArrow: {
+        fontSize: 10,
+        color: AppColors_1.AppColors.purple,
+    },
+    diagnosticsBox: {
+        backgroundColor: '#1E1B2E',
+        borderRadius: 8,
+        padding: 10,
+        marginTop: 6,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    diagnosticsText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: '#E2DFEB',
+        lineHeight: 17,
+    },
+    recipientBadge: {
+        marginTop: 12,
+        paddingVertical: 6,
+        paddingHorizontal: 10,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        alignSelf: 'flex-start',
+    },
+    recipientText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+    },
+    recipientHighlight: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        color: AppColors_1.AppColors.purple,
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 14,
+        paddingTop: 10,
+        paddingBottom: 14,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+    },
+    copyDraftBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    copyDraftBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayText,
+    },
+    footerRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    cancelBtn: {
+        paddingVertical: 8,
+        paddingHorizontal: 14,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    cancelBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.grayText,
+    },
+    submitBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        backgroundColor: AppColors_1.AppColors.purple,
+        paddingVertical: 8,
+        paddingHorizontal: 15,
+        borderRadius: 8,
+        shadowColor: AppColors_1.AppColors.purple,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.35,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    submitBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.white,
+    },
+});
+exports.default = exports.FeedbackModal;

package/dist/commonjs/components/Inspector/InspectorHeader.js

@@ -52,7 +52,7 @@ const NativeInspector_1 = require("../../native/NativeInspector");
 const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
     const isNarrow = windowWidth < 360;
     const isCompact = windowWidth < 400;
@@ -113,7 +113,7 @@ const InspectorHeader = react_1.default.memo(() => {
             (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
-    const isAnySelected = isDetailView || isSettingsView;
+    const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
     const settingsModuleTitle = (0, react_1.useMemo)(() => {
         switch (settingsPage) {
             case 'apis':
@@ -159,6 +159,10 @@ const InspectorHeader = react_1.default.memo(() => {
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
+            if (isFeedbackOpen) {
+                setIsFeedbackOpen(false);
+                return;
+            }
             if (isSettingsView) {
                 if (settingsPage === 'main') {
                     setSettingsPage(null);
@@ -199,7 +203,41 @@ const InspectorHeader = react_1.default.memo(() => {
               <NetworkIcons_1.WhiteBackNavigation />
             </TouchableScale_1.default>
 
-            {isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+            {isFeedbackOpen ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: isNarrow ? 14 : 16,
+                color: AppColors_1.AppColors.white,
+                letterSpacing: -0.2,
+            }} numberOfLines={1}>
+                    Support & Feedback
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                paddingHorizontal: isNarrow ? 4 : 6,
+                paddingVertical: 1.5,
+                borderRadius: 10,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}20`,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: isNarrow ? 8 : 9,
+                color: AppColors_1.AppColors.white,
+            }}>
+                      v{constants_2.LIB_VERSION}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: isNarrow ? 9.5 : 10.5,
+                color: `${AppColors_1.AppColors.white}CC`,
+            }} numberOfLines={1}>
+                  Direct line to maintainers & developers
+                </react_native_1.Text>
+              </react_native_1.View>) : isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
@@ -791,7 +829,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
-            {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+            {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                 styles_1.default.closeButtonSquare,
                 {
                     width: buttonSize,
@@ -802,7 +840,21 @@ const InspectorHeader = react_1.default.memo(() => {
                 <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale_1.default>)}
 
-            <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={[
+            {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="About and System Specifications" onPress={() => {
+                setSettingsActiveSubTab('about');
+                setSettingsPage('main');
+            }} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
+                <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
+              </TouchableScale_1.default>)}
+
+            <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
             styles_1.default.closeButtonSquare,
             {
                 width: buttonSize,
@@ -811,7 +863,7 @@ const InspectorHeader = react_1.default.memo(() => {
             },
         ]}>
               <NetworkIcons_1.CloseWhite size={isNarrow ? 12 : 14}/>
-            </TouchableScale_1.default>
+            </react_native_1.TouchableOpacity>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.View>