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

Matthias Nott

2026-03-07 af1543135d42adc2e97dc5243aeef7418cd3b00d

 app/navigate.tsx
..
..
@@ -9,21 +9,29 @@
9
9
   label: string;
10
10
   key: string;
11
11
   icon?: string;
12
-  wide?: boolean;
12
+  flex?: number;
13
13
 }
14
14
 
15
-const NAV_BUTTONS: NavButton[][] = [
15
+const NAV_ROWS: NavButton[][] = [
16
+  // Row 1: Vi motion
16
17
   [
17
-    { label: "Esc", key: "escape" },
18
-    { label: "Tab", key: "tab" },
19
-    { label: "Enter", key: "enter" },
20
-    { label: "Ctrl-C", key: "ctrl-c" },
18
+    { label: "0", key: "0" },
19
+    { label: "k", key: "k", icon: "↑" },
20
+    { label: "G", key: "G" },
21
+    { label: "dd", key: "dd" },
21
22
   ],
23
+  // Row 2: Arrow keys
22
24
   [
23
-    { label: "", key: "left", icon: "←" },
24
-    { label: "", key: "up", icon: "↑" },
25
-    { label: "", key: "down", icon: "↓" },
26
-    { label: "", key: "right", icon: "→" },
25
+    { label: "h", key: "h", icon: "←" },
26
+    { label: "j", key: "j", icon: "↓" },
27
+    { label: "l", key: "l", icon: "→" },
28
+    { label: "Esc", key: "escape" },
29
+  ],
30
+  // Row 3: Action keys
31
+  [
32
+    { label: "Tab", key: "tab" },
33
+    { label: "Enter", key: "enter", flex: 2 },
34
+    { label: "^C", key: "ctrl-c" },
27
35
   ],
28
36
 ];
29
37
 
..
..
@@ -119,18 +127,17 @@
119
127
       {/* Navigation buttons */}
120
128
       <View
121
129
         style={{
122
-          paddingHorizontal: 12,
123
-          paddingBottom: 8,
124
-          gap: 8,
130
+          paddingHorizontal: 16,
131
+          paddingBottom: 12,
132
+          gap: 10,
125
133
         }}
126
134
       >
127
-        {NAV_BUTTONS.map((row, rowIdx) => (
135
+        {NAV_ROWS.map((row, rowIdx) => (
128
136
           <View
129
137
             key={rowIdx}
130
138
             style={{
131
139
               flexDirection: "row",
132
-              gap: 8,
133
-              justifyContent: "center",
140
+              gap: 10,
134
141
             }}
135
142
           >
136
143
             {row.map((btn) => (
..
..
@@ -138,25 +145,30 @@
138
145
                 key={btn.key}
139
146
                 onPress={() => handleNavPress(btn.key)}
140
147
                 style={({ pressed }) => ({
141
-                  flex: btn.wide ? 2 : 1,
142
-                  height: 52,
148
+                  flex: btn.flex ?? 1,
149
+                  height: 56,
143
150
                   borderRadius: 14,
144
151
                   alignItems: "center",
145
152
                   justifyContent: "center",
146
153
                   backgroundColor: pressed ? "#4A9EFF" : "#1E1E2E",
147
-                  borderWidth: 1,
154
+                  borderWidth: 1.5,
148
155
                   borderColor: pressed ? "#4A9EFF" : "#2E2E45",
149
156
                 })}
150
157
               >
151
-                <Text
152
-                  style={{
153
-                    color: "#E8E8F0",
154
-                    fontSize: btn.icon ? 22 : 15,
155
-                    fontWeight: "700",
156
-                  }}
157
-                >
158
-                  {btn.icon ?? btn.label}
159
-                </Text>
158
+                {btn.icon ? (
159
+                  <View style={{ alignItems: "center" }}>
160
+                    <Text style={{ color: "#E8E8F0", fontSize: 20, fontWeight: "700" }}>
161
+                      {btn.icon}
162
+                    </Text>
163
+                    <Text style={{ color: "#5A5A78", fontSize: 10, marginTop: 1 }}>
164
+                      {btn.label}
165
+                    </Text>
166
+                  </View>
167
+                ) : (
168
+                  <Text style={{ color: "#E8E8F0", fontSize: 16, fontWeight: "700" }}>
169
+                    {btn.label}
170
+                  </Text>
171
+                )}
160
172
               </Pressable>
161
173
             ))}
162
174
           </View>