Prototype 2 new design directions: Aurora and Mono#74
Prototype 2 new design directions: Aurora and Mono#74devin-ai-integration[bot] wants to merge 2 commits into
Conversation
- Aurora: Glassmorphic dark UI with gradient backgrounds, translucent panels, ambient glow accents, horizontal model chip selector, floating input bar - Mono: Ultra-minimal editorial light UI with bold typography, content-first hierarchy, inline model picker, conversation sidebar, generous whitespace - New 'Lab' tab in navigation to preview both directions side-by-side - Added aurora and mono themes to the theme system for app-wide use - Mock data demonstrates chat flow patterns in each direction Co-Authored-By: Nader Dabit <dabit3@gmail.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| <TouchableOpacity | ||
| style={styles.sidebarOverlay} | ||
| activeOpacity={1} | ||
| onPress={() => setShowSidebar(false)} | ||
| > | ||
| <View style={styles.sidebar}> | ||
| <View style={styles.sidebarHeader}> | ||
| <Text style={styles.sidebarTitle}>Conversations</Text> | ||
| <TouchableOpacity onPress={() => setShowSidebar(false)}> | ||
| <Ionicons name="close" size={20} color={MONO_THEME.text} /> | ||
| </TouchableOpacity> | ||
| </View> | ||
| <TouchableOpacity style={styles.newChatButton}> | ||
| <Ionicons name="add" size={18} color={MONO_THEME.text} /> | ||
| <Text style={styles.newChatText}>New conversation</Text> | ||
| </TouchableOpacity> | ||
| {MOCK_CONVERSATIONS.map((conv) => ( | ||
| <TouchableOpacity key={conv.id} style={styles.conversationItem}> | ||
| <Text style={styles.conversationTitle}>{conv.title}</Text> | ||
| <Text style={styles.conversationPreview}>{conv.preview}</Text> | ||
| <Text style={styles.conversationTime}>{conv.time}</Text> | ||
| </TouchableOpacity> | ||
| ))} | ||
| </View> | ||
| </TouchableOpacity> |
There was a problem hiding this comment.
🟡 Sidebar closes when tapping on its own background area instead of only when tapping the dimmed overlay outside it
The sidebar panel is placed as a child of the dismissal overlay (<View style={styles.sidebar}> inside <TouchableOpacity style={styles.sidebarOverlay}> at app/src/screens/prototypes/MonoChat.tsx:64-88), so tapping non-interactive areas within the sidebar (padding, gaps between items) bubbles up and triggers the overlay's close handler.
Impact: Users accidentally close the sidebar when tapping empty space inside it, making it frustrating to use.
Touch event propagation from sidebar to overlay
The sidebar overlay is a TouchableOpacity at line 64 with onPress={() => setShowSidebar(false)}. The sidebar View at line 69 is a direct child of this TouchableOpacity. In React Native, touches on a plain View propagate to the nearest parent responder. While the inner TouchableOpacity elements (close button at line 72, new chat button at line 76, conversation items at line 81) intercept their own touches, any tap on the sidebar's background — the paddingTop: 60 area (app/src/screens/prototypes/MonoChat.tsx:274), the paddingHorizontal: 20 gutters (app/src/screens/prototypes/MonoChat.tsx:275), or gaps between conversation items — will propagate to the overlay and close the sidebar.
The fix is to wrap the sidebar View in a TouchableWithoutFeedback (or Pressable) with an empty onPress handler to absorb touches, or restructure so the overlay and sidebar are siblings rather than parent-child.
Prompt for agents
In MonoChat.tsx, the sidebar View (line 69) is a direct child of the overlay TouchableOpacity (line 64). This means tapping on non-interactive areas within the sidebar (padding, background between items) propagates the touch to the overlay and closes the sidebar.
To fix this, you need to prevent touch propagation from the sidebar to the overlay. Options:
1. Wrap the sidebar View in a TouchableWithoutFeedback (from react-native) with an empty onPress handler, so touches on the sidebar are absorbed and don't reach the overlay.
2. Restructure the layout so the overlay background and sidebar are siblings rather than parent-child. For example, use a container View with absoluteFillObject, place a TouchableOpacity for the overlay background, and place the sidebar View as a sibling.
The relevant code is in the MonoChat component around lines 63-88.
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Fixed — wrapped the sidebar View in TouchableWithoutFeedback with an empty onPress handler to absorb touches and prevent propagation to the overlay.
| <KeyboardAvoidingView | ||
| behavior="padding" | ||
| style={styles.keyboardAvoid} | ||
| keyboardVerticalOffset={100} |
There was a problem hiding this comment.
🚩 KeyboardAvoidingView behavior hardcoded to 'padding' without platform check
Both AuroraChat.tsx:61-63 and MonoChat.tsx:91-94 use <KeyboardAvoidingView behavior="padding"> without checking Platform.OS. On Android, behavior="padding" can produce unexpected layout shifts; the React Native docs recommend behavior={Platform.OS === 'ios' ? 'padding' : 'height'}. Since these are design prototypes and may only be tested on iOS, this may be intentional, but it could cause layout issues on Android devices.
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Intentional for the prototype — matches the existing chat.tsx pattern. Would use Platform.OS check if promoting to production.
| <Tab.Screen | ||
| name="Lab" | ||
| component={DesignLab} | ||
| options={{ | ||
| headerShown: false, | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FeatherIcon | ||
| name="layers" | ||
| color={color} | ||
| size={size} | ||
| /> | ||
| ), | ||
| }} | ||
| /> |
There was a problem hiding this comment.
🚩 Lab tab disables header, shifting safe area responsibility to child components
The new Lab tab at app/src/main.tsx:60-73 sets headerShown: false, unlike the Chat, Images, and Settings tabs which all render <Header />. This means the DesignLab component and its children (AuroraChat, MonoChat) must handle safe area insets themselves. They do this via hardcoded paddingTop: 60 values (e.g., app/src/screens/prototypes/AuroraChat.tsx:219, app/src/screens/prototypes/MonoChat.tsx:337, app/src/screens/prototypes/DesignLab.tsx:113). This works on most modern iPhones but may not be correct for devices with different status bar heights (e.g., iPads, older iPhones, or Android devices with varying notch sizes). Using useSafeAreaInsets() would be more robust.
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Acknowledged — hardcoded paddingTop is intentional for quick prototyping. Would switch to useSafeAreaInsets() if either direction is chosen for production.
Wrap sidebar View in TouchableWithoutFeedback to prevent taps on non-interactive areas from propagating to the overlay and closing it. Co-Authored-By: Nader Dabit <dabit3@gmail.com>
1 participant
Summary
Two new design direction prototypes accessible via a new Lab tab in the bottom navigation.
Direction 1: Aurora (Dark Glassmorphic)
rgbabackgrounds + subtle borders)#0f0c29base,#7c3aedprimary,#06b6d4secondary accentDirection 2: Mono (Light Editorial Minimal)
#fafafabase,#0a0a0asingle accentIntegration
DesignLabscreen with card-based picker to preview each directionauroraandmonoadded to the theme system for app-wide useheaderShown: falsefor full-bleed prototype renderingLink to Devin session: https://app.devin.ai/sessions/225f7daf906c4b84b85bf68476781cb0
Requested by: @dabit3
Devin Review