cameron.stream
A React Native app for the ultimate thinking partner.
Move navigation tabs into sidebar menu and make header more compact
UI Changes:
- Moved You/Chat/Knowledge from bottom navigation row into sidebar menu
- Header now only shows "co" logo (no separate tab row)
- Made header more compact with reduced padding and smaller fonts
- Sidebar menu order: You, Chat, Knowledge, Settings, Light Mode, Open in Browser, Refresh Co, Logout
- Active view now highlighted in sidebar
Space savings:
- Removed entire bottom navigation row
- Reduced header padding from 12px to 6px top/bottom
- Smaller "co" logo: 36pt -> 28pt
- Cleaner, more minimal header design
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+79
-36
+8
-19
App.new.tsx
+8
-19
App.new.tsx
···
43
43
import LogoLoader from './src/components/LogoLoader';
44
44
import CoLoginScreen from './CoLoginScreen';
45
45
import AppHeader from './src/components/AppHeader';
46
-
import BottomNavigation, { ViewType } from './src/components/BottomNavigation';
47
-
import AppSidebar from './src/components/AppSidebar';
46
+
import AppSidebar, { ViewType } from './src/components/AppSidebar';
48
47
import YouView from './src/views/YouView';
49
48
import { ChatScreen } from './src/screens/ChatScreen';
50
49
import KnowledgeView from './src/views/KnowledgeView';
···
332
331
animationValue={sidebarAnimRef}
333
332
developerMode={developerMode}
334
333
agentId={coAgent.id}
334
+
currentView={currentView}
335
335
onClose={() => setSidebarVisible(false)}
336
-
onMemoryPress={() => {
336
+
onYouPress={() => {
337
+
setCurrentView('you');
338
+
loadMemoryBlocks();
339
+
}}
340
+
onChatPress={() => setCurrentView('chat')}
341
+
onKnowledgePress={() => {
337
342
setCurrentView('knowledge');
338
343
loadMemoryBlocks();
339
344
}}
···
353
358
onMenuPress={() => setSidebarVisible(!sidebarVisible)}
354
359
developerMode={developerMode}
355
360
onDeveloperModeToggle={() => setDeveloperMode(!developerMode)}
356
-
/>
357
-
358
-
{/* Bottom Navigation */}
359
-
<BottomNavigation
360
-
theme={theme}
361
-
currentView={currentView}
362
-
hasMessages={hasMessages}
363
-
onYouPress={() => {
364
-
setCurrentView('you');
365
-
loadMemoryBlocks();
366
-
}}
367
-
onChatPress={() => setCurrentView('chat')}
368
-
onKnowledgePress={() => {
369
-
setCurrentView('knowledge');
370
-
loadMemoryBlocks();
371
-
}}
372
361
/>
373
362
374
363
{/* View Content */}
+6
-6
src/components/AppHeader.tsx
+6
-6
src/components/AppHeader.tsx
···
62
62
style={[
63
63
styles.header,
64
64
{
65
-
paddingTop: insets.top + 12,
65
+
paddingTop: insets.top + 6,
66
66
backgroundColor: theme.colors.background.secondary,
67
67
borderBottomColor: theme.colors.border.primary,
68
68
},
···
75
75
<TouchableOpacity onPress={onMenuPress} style={styles.menuButton}>
76
76
<Ionicons
77
77
name="menu"
78
-
size={24}
78
+
size={22}
79
79
color={colorScheme === 'dark' ? '#FFFFFF' : theme.colors.text.primary}
80
80
/>
81
81
</TouchableOpacity>
···
102
102
flexDirection: 'row',
103
103
alignItems: 'center',
104
104
paddingHorizontal: 16,
105
-
paddingBottom: 12,
105
+
paddingBottom: 6,
106
106
borderBottomWidth: 1,
107
107
},
108
108
menuButton: {
109
-
padding: 8,
109
+
padding: 6,
110
110
},
111
111
headerCenter: {
112
112
flex: 1,
113
113
alignItems: 'center',
114
114
},
115
115
headerTitle: {
116
-
fontSize: 36,
116
+
fontSize: 28,
117
117
fontFamily: 'Lexend_700Bold',
118
118
},
119
119
headerSpacer: {
120
-
width: 40, // Balance the menu button width
120
+
width: 34, // Balance the menu button width
121
121
},
122
122
});
123
123
+60
-6
src/components/AppSidebar.tsx
+60
-6
src/components/AppSidebar.tsx
···
28
28
import { useSafeAreaInsets } from 'react-native-safe-area-context';
29
29
import type { Theme } from '../theme';
30
30
31
+
export type ViewType = 'you' | 'chat' | 'knowledge' | 'settings';
32
+
31
33
interface AppSidebarProps {
32
34
theme: Theme;
33
35
colorScheme: 'light' | 'dark';
···
35
37
animationValue: Animated.Value; // 0 = hidden, 1 = visible
36
38
developerMode: boolean;
37
39
agentId?: string;
40
+
currentView: ViewType;
38
41
onClose: () => void;
39
-
onMemoryPress: () => void;
42
+
onYouPress: () => void;
43
+
onChatPress: () => void;
44
+
onKnowledgePress: () => void;
40
45
onSettingsPress: () => void;
41
46
onThemeToggle: () => void;
42
47
onRefreshAgent: () => Promise<void>;
···
50
55
animationValue,
51
56
developerMode,
52
57
agentId,
58
+
currentView,
53
59
onClose,
54
-
onMemoryPress,
60
+
onYouPress,
61
+
onChatPress,
62
+
onKnowledgePress,
55
63
onSettingsPress,
56
64
onThemeToggle,
57
65
onRefreshAgent,
···
122
130
contentContainerStyle={{ flexGrow: 1 }}
123
131
ListHeaderComponent={
124
132
<View style={styles.menuItems}>
125
-
{/* Memory */}
133
+
{/* You */}
126
134
<TouchableOpacity
127
135
style={[
128
136
styles.menuItem,
129
137
{ borderBottomColor: theme.colors.border.primary },
138
+
currentView === 'you' && { backgroundColor: theme.colors.background.tertiary },
130
139
]}
131
140
onPress={() => {
132
141
onClose();
133
-
onMemoryPress();
142
+
onYouPress();
143
+
}}
144
+
>
145
+
<Ionicons
146
+
name="person-outline"
147
+
size={24}
148
+
color={theme.colors.text.primary}
149
+
/>
150
+
<Text style={[styles.menuItemText, { color: theme.colors.text.primary }]}>
151
+
You
152
+
</Text>
153
+
</TouchableOpacity>
154
+
155
+
{/* Chat */}
156
+
<TouchableOpacity
157
+
style={[
158
+
styles.menuItem,
159
+
{ borderBottomColor: theme.colors.border.primary },
160
+
currentView === 'chat' && { backgroundColor: theme.colors.background.tertiary },
161
+
]}
162
+
onPress={() => {
163
+
onClose();
164
+
onChatPress();
165
+
}}
166
+
>
167
+
<Ionicons
168
+
name="chatbubble-outline"
169
+
size={24}
170
+
color={theme.colors.text.primary}
171
+
/>
172
+
<Text style={[styles.menuItemText, { color: theme.colors.text.primary }]}>
173
+
Chat
174
+
</Text>
175
+
</TouchableOpacity>
176
+
177
+
{/* Knowledge */}
178
+
<TouchableOpacity
179
+
style={[
180
+
styles.menuItem,
181
+
{ borderBottomColor: theme.colors.border.primary },
182
+
currentView === 'knowledge' && { backgroundColor: theme.colors.background.tertiary },
183
+
]}
184
+
onPress={() => {
185
+
onClose();
186
+
onKnowledgePress();
134
187
}}
135
188
>
136
189
<Ionicons
···
139
192
color={theme.colors.text.primary}
140
193
/>
141
194
<Text style={[styles.menuItemText, { color: theme.colors.text.primary }]}>
142
-
Memory
195
+
Knowledge
143
196
</Text>
144
197
</TouchableOpacity>
145
198
···
148
201
style={[
149
202
styles.menuItem,
150
203
{ borderBottomColor: theme.colors.border.primary },
204
+
currentView === 'settings' && { backgroundColor: theme.colors.background.tertiary },
151
205
]}
152
206
onPress={() => {
153
207
onClose();
···
178
232
color={theme.colors.text.primary}
179
233
/>
180
234
<Text style={[styles.menuItemText, { color: theme.colors.text.primary }]}>
181
-
{colorScheme === 'dark' ? 'Light Mode' : 'Dark Mode'}
235
+
Light Mode
182
236
</Text>
183
237
</TouchableOpacity>
184
238