feat: dual address auto-switch, custom icon, notifications, image support

Matthias Nott

2026-03-07 af1543135d42adc2e97dc5243aeef7418cd3b00d

 components/chat/CommandBar.tsx
..
..
@@ -1,14 +1,17 @@
1
1
 import React, { useState } from "react";
2
-import { Pressable, Text, View, useWindowDimensions } from "react-native";
2
+import { Pressable, Text, View } from "react-native";
3
3
 import * as Haptics from "expo-haptics";
4
+import { useTheme } from "../../contexts/ThemeContext";
4
5
 
5
6
 interface CommandBarProps {
6
-  onSessions: () => void;
7
7
   onScreenshot: () => void;
8
-  onHelp: () => void;
8
+  onNavigate: () => void;
9
+  onPhoto: () => void;
10
+  onClear: () => void;
9
11
 }
10
12
 
11
-export function CommandBar({ onSessions, onScreenshot, onHelp }: CommandBarProps) {
13
+export function CommandBar({ onScreenshot, onNavigate, onPhoto, onClear }: CommandBarProps) {
14
+  const { colors } = useTheme();
12
15
   return (
13
16
     <View
14
17
       style={{
..
..
@@ -18,26 +21,30 @@
18
21
         gap: 8,
19
22
       }}
20
23
     >
21
-      <CmdBtn icon="📋" label="Sessions" bg="#1A2744" border="#2E4A7A" onPress={onSessions} />
22
-      <CmdBtn icon="📸" label="Screen" bg="#1A3A2A" border="#2E6A4A" onPress={onScreenshot} />
23
-      <CmdBtn icon="❓" label="Help" bg="#3A1A2A" border="#6A2E4A" onPress={onHelp} />
24
+      <CmdBtn icon="📸" label="Screen" onPress={onScreenshot} colors={colors} />
25
+      <CmdBtn icon="🧭" label="Navigate" onPress={onNavigate} colors={colors} />
26
+      <CmdBtn icon="📎" label="Photo" onPress={onPhoto} colors={colors} />
27
+      <CmdBtn icon="🗑" label="Clear" onPress={onClear} colors={colors} />
24
28
     </View>
25
29
   );
26
30
 }
27
31
 
28
32
 interface TextModeCommandBarProps {
29
-  onSessions: () => void;
30
33
   onScreenshot: () => void;
31
34
   onNavigate: () => void;
35
+  onPhoto: () => void;
36
+  onHelp: () => void;
32
37
   onClear: () => void;
33
38
 }
34
39
 
35
40
 export function TextModeCommandBar({
36
-  onSessions,
37
41
   onScreenshot,
38
42
   onNavigate,
43
+  onPhoto,
44
+  onHelp,
39
45
   onClear,
40
46
 }: TextModeCommandBarProps) {
47
+  const { colors } = useTheme();
41
48
   return (
42
49
     <View
43
50
       style={{
..
..
@@ -47,10 +54,11 @@
47
54
         gap: 8,
48
55
       }}
49
56
     >
50
-      <CmdBtn icon="📋" label="Sessions" bg="#1A2744" border="#2E4A7A" onPress={onSessions} />
51
-      <CmdBtn icon="📸" label="Screen" bg="#1A3A2A" border="#2E6A4A" onPress={onScreenshot} />
52
-      <CmdBtn icon="🧭" label="Navigate" bg="#2A2A1A" border="#5A5A2E" onPress={onNavigate} />
53
-      <CmdBtn icon="🗑" label="Clear" bg="#3A1A1A" border="#6A2E2E" onPress={onClear} />
57
+      <CmdBtn icon="📸" label="Screen" onPress={onScreenshot} colors={colors} />
58
+      <CmdBtn icon="🧭" label="Navigate" onPress={onNavigate} colors={colors} />
59
+      <CmdBtn icon="📎" label="Photo" onPress={onPhoto} colors={colors} />
60
+      <CmdBtn icon="❓" label="Help" onPress={onHelp} colors={colors} />
61
+      <CmdBtn icon="🗑" label="Clear" onPress={onClear} colors={colors} />
54
62
     </View>
55
63
   );
56
64
 }
..
..
@@ -58,18 +66,15 @@
58
66
 function CmdBtn({
59
67
   icon,
60
68
   label,
61
-  bg,
62
-  border,
63
69
   onPress,
70
+  colors,
64
71
 }: {
65
72
   icon: string;
66
73
   label: string;
67
-  bg: string;
68
-  border: string;
69
74
   onPress: () => void;
75
+  colors: ReturnType<typeof useTheme>["colors"];
70
76
 }) {
71
77
   const [pressed, setPressed] = useState(false);
72
-  const { width } = useWindowDimensions();
73
78
 
74
79
   return (
75
80
     <View style={{ flex: 1 }}>
..
..
@@ -87,13 +92,13 @@
87
92
             borderRadius: 16,
88
93
             alignItems: "center",
89
94
             justifyContent: "center",
90
-            backgroundColor: pressed ? "#4A9EFF" : bg,
95
+            backgroundColor: pressed ? colors.accent : colors.bgTertiary,
91
96
             borderWidth: 1.5,
92
-            borderColor: pressed ? "#4A9EFF" : border,
97
+            borderColor: pressed ? colors.accent : colors.border,
93
98
           }}
94
99
         >
95
100
           <Text style={{ fontSize: 26, marginBottom: 2 }}>{icon}</Text>
96
-          <Text style={{ color: "#C8C8E0", fontSize: 13, fontWeight: "700" }}>
101
+          <Text style={{ color: colors.textSecondary, fontSize: 13, fontWeight: "700" }}>
97
102
             {label}
98
103
           </Text>
99
104
         </View>