feat: redesign UI with new design system and security improvements

- Add inline SVG icon system with optional react-native-svg dependency
- Update color palette with dark theme as default and light mode toggle
- Redesign NetworkLoggerOverlay with new header, search, and filter UI
- Redesign NetworkLogItem with alternating rows and collapsible sections
- Update FloatingButton and NonFloatingButton with new badge design
- Update ExportModal to match new design system
- Mask sensitive data in cURL commands and header displays
- Remove API filter from filter bar

Author: cmcWebCode40

src/CopyItem.tsx

@@ -1,21 +1,26 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import {
   Alert,
+  StyleSheet,
+  Text,
   TouchableOpacity,
+  View,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
-import Icon from './Icon';
+import { SvgIcon } from './SvgIcon';
+import { colors } from './constants/colors';
 
 let Clipboard: any = null;
 try {
   Clipboard = require('@react-native-clipboard/clipboard').default;
-} catch (error) {
+} catch {
   Clipboard = null;
 }
 
 interface CopyItemProps {
   textToCopy: string;
+  size?: number;
   checkDuration?: number;
   style?: StyleProp<ViewStyle>;
   useCopyToClipboard?: boolean;
@@ -25,15 +30,16 @@ export const CopyItem: React.FC<CopyItemProps> = ({
   textToCopy,
   checkDuration = 2000,
   style,
+  size = 16,
   useCopyToClipboard,
 }) => {
   const [copied, setCopied] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (useCopyToClipboard && !Clipboard) {
-      throw new Error(
-        'Copy to clipboard functionality is required (useCopyToClipboard=true) but @react-native-clipboard/clipboard module is not installed. Please install it with: npm install @react-native-clipboard/clipboard'
+      console.warn(
+        '[NetworkLogger] Copy to clipboard enabled but @react-native-clipboard/clipboard is not installed. Install it with: npm install @react-native-clipboard/clipboard'
       );
     }
   }, [useCopyToClipboard]);
@@ -57,23 +63,49 @@ export const CopyItem: React.FC<CopyItemProps> = ({
   }, [textToCopy, checkDuration, useCopyToClipboard]);
 
   if (!useCopyToClipboard) {
-    return null;
+    return (
+      <View style={[style, styles.disabledContainer]}>
+        <Text style={styles.disabledText}>Copy not enabled</Text>
+      </View>
+    );
   }
 
   if (!Clipboard) {
-    return null;
+    return (
+      <View style={[style, styles.disabledContainer]}>
+        <Text style={styles.disabledText}>Clipboard unavailable</Text>
+      </View>
+    );
   }
 
   return (
     <TouchableOpacity
-      style={style}
+      style={[styles.button, style]}
       onPress={handleCopy}
-      activeOpacity={0.5}
+      activeOpacity={0.7}
       accessibilityRole="button"
       accessibilityLabel={copied ? 'Copied to clipboard' : 'Copy to clipboard'}
       disabled={!useCopyToClipboard}
     >
-      {copied ? <Icon type="done" /> : <Icon type="copy" />}
+      {copied ? (
+        <SvgIcon name="check" size={size} color={colors.success} />
+      ) : (
+        <SvgIcon name="copy" size={size} color="#94A3B8" />
+      )}
     </TouchableOpacity>
   );
 };
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 4,
+  },
+  disabledContainer: {
+    opacity: 0.6,
+  },
+  disabledText: {
+    fontSize: 10,
+    color: '#64748B',
+    fontStyle: 'italic',
+  },
+});

src/FloatingButton.tsx

@@ -6,9 +6,10 @@ import {
   Dimensions,
 } from 'react-native';
 import React, { useEffect } from 'react';
-import Icon from './Icon';
+import { SvgIcon } from './SvgIcon';
 import NonFloatingButton from './NonFloatingButton';
-import { colors } from './constants/colors';
+import { colors, getThemeColors, type ThemeMode } from './constants/colors';
+
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
 let Animated: any = null;
@@ -45,7 +46,6 @@ try {
 }
 
 const BUTTON_SIZE = 58;
-const CLOSE_BUTTON_SIZE = 58;
 const PADDING = 20;
 
 interface FloatingButtonProps {
@@ -55,6 +55,7 @@ interface FloatingButtonProps {
   errorCount?: number;
   draggable?: boolean;
   enableDeviceShake?: boolean;
+  theme?: ThemeMode;
 }
 
 const AnimatedFloatingButton: React.FC<FloatingButtonProps> = ({
@@ -63,7 +64,9 @@ const AnimatedFloatingButton: React.FC<FloatingButtonProps> = ({
   logsLength,
   errorCount = 0,
   enableDeviceShake,
+  theme = 'dark',
 }) => {
+  const themeColors = getThemeColors(theme);
   const positionX = useSharedValue(screenWidth - BUTTON_SIZE - PADDING);
   const positionY = useSharedValue(screenHeight - 150);
   const startPositionX = useSharedValue(0);
@@ -76,7 +79,7 @@ const AnimatedFloatingButton: React.FC<FloatingButtonProps> = ({
       startPositionX.value = positionX.value;
       startPositionY.value = positionY.value;
     })
-    .onUpdate((event: { translationX: any; translationY: any }) => {
+    .onUpdate((event: { translationX: number; translationY: number }) => {
       const newX = startPositionX.value + event.translationX;
       const newY = startPositionY.value + event.translationY;
 
@@ -121,7 +124,7 @@ const AnimatedFloatingButton: React.FC<FloatingButtonProps> = ({
       {enableDeviceShake && (
         <Animated.View style={[styles.floatingCloseIcon, animatedCloseStyle]}>
           <TouchableOpacity onPress={hideIcon} style={styles.closeButton}>
-            <Icon type="close" />
+            <SvgIcon name="x" size={16} color={themeColors.textMuted} />
           </TouchableOpacity>
         </Animated.View>
       )}
@@ -130,16 +133,52 @@ const AnimatedFloatingButton: React.FC<FloatingButtonProps> = ({
           <TouchableOpacity
             onPress={openModal}
             activeOpacity={0.9}
-            style={styles.buttonTouchable}
+            style={[
+              styles.buttonTouchable,
+              {
+                backgroundColor: themeColors.surfaceContainer,
+                borderColor: themeColors.border,
+              },
+            ]}
           >
-            <Text style={styles.floatingButtonText}>📊 {logsLength}</Text>
-            {errorCount > 0 && (
+            <SvgIcon name="barChart" size={16} color={themeColors.text} />
+            <Text
+              style={[styles.floatingButtonText, { color: themeColors.text }]}
+            >
+              {logsLength}
+            </Text>
+            {errorCount > 0 ? (
               <View style={styles.errorBadge}>
                 <Text style={styles.errorBadgeText}>
                   {errorCount > 99 ? '99+' : errorCount}
                 </Text>
               </View>
+            ) : (
+              <View style={styles.successBadge}>
+                <SvgIcon name="check" size={10} color="#0F172A" />
+              </View>
             )}
+            {/* Drag handle */}
+            <View style={styles.dragHandle}>
+              <View
+                style={[
+                  styles.dragDot,
+                  { backgroundColor: themeColors.textMuted },
+                ]}
+              />
+              <View
+                style={[
+                  styles.dragDot,
+                  { backgroundColor: themeColors.textMuted },
+                ]}
+              />
+              <View
+                style={[
+                  styles.dragDot,
+                  { backgroundColor: themeColors.textMuted },
+                ]}
+              />
+            </View>
           </TouchableOpacity>
         </Animated.View>
       </GestureDetector>
@@ -166,15 +205,6 @@ const FloatingButton: React.FC<FloatingButtonProps> = (props) => {
 };
 
 const styles = StyleSheet.create({
-  gestureRoot: {
-    flex: 1,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    position: 'absolute',
-    pointerEvents: 'box-none',
-  },
   container: {
     flex: 1,
     top: 0,
@@ -188,61 +218,71 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 1000,
   },
-  staticPosition: {
-    left: screenWidth - BUTTON_SIZE - PADDING,
-    top: screenHeight - 150,
-  },
   buttonTouchable: {
-    backgroundColor: '#007AFF',
-    padding: 16,
-    borderRadius: 25,
-    elevation: 5,
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    justifyContent: 'center',
+    flexDirection: 'row',
     alignItems: 'center',
+    gap: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
   },
   floatingCloseIcon: {
     position: 'absolute',
     zIndex: 1001,
   },
-  staticClosePosition: {
-    left: screenWidth - BUTTON_SIZE - PADDING + 4,
-    top: screenHeight - 150 - 50,
-  },
   closeButton: {
-    padding: 16,
-    borderRadius: 70,
-    width: CLOSE_BUTTON_SIZE,
-    height: CLOSE_BUTTON_SIZE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    fontWeight: '900',
+    padding: 8,
   },
   floatingButtonText: {
-    color: 'white',
-    fontSize: 14,
-    fontWeight: 'bold',
+    fontSize: 13,
+    fontWeight: '600',
   },
   errorBadge: {
     position: 'absolute',
-    top: -4,
-    right: -4,
+    top: -6,
+    right: -6,
     backgroundColor: colors.error,
-    borderRadius: 10,
-    minWidth: 20,
-    height: 20,
+    minWidth: 18,
+    height: 18,
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 4,
+    borderRadius: 9,
     borderWidth: 2,
-    borderColor: '#fff',
+    borderColor: '#10131a',
   },
   errorBadgeText: {
     color: '#fff',
-    fontSize: 10,
-    fontWeight: 'bold',
+    fontSize: 9,
+    fontWeight: '700',
+  },
+  successBadge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    backgroundColor: colors.success,
+    width: 18,
+    height: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 9,
+    borderWidth: 2,
+    borderColor: '#10131a',
+  },
+  dragHandle: {
+    marginLeft: 4,
+    opacity: 0.3,
+    gap: 2,
+  },
+  dragDot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
   },
 });