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
··· 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
··· 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
··· 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
+5 -5
src/components/BottomNavigation.tsx
··· 129 129 justifyContent: 'space-between', 130 130 alignItems: 'center', 131 131 paddingHorizontal: 16, 132 - paddingVertical: 4, 132 + paddingVertical: 2, 133 133 maxWidth: 400, 134 134 alignSelf: 'center', 135 135 width: '100%', 136 136 }, 137 137 viewSwitcherButton: { 138 - paddingVertical: 6, 139 - paddingHorizontal: 16, 140 - borderRadius: 8, 138 + paddingVertical: 4, 139 + paddingHorizontal: 14, 140 + borderRadius: 6, 141 141 flex: 1, 142 142 alignItems: 'center', 143 143 justifyContent: 'center', 144 144 }, 145 145 viewSwitcherText: { 146 - fontSize: 14, 146 + fontSize: 13, 147 147 fontFamily: 'Lexend_500Medium', 148 148 }, 149 149 });