April 13th, 2025
This week our team have been focused on strengthening both our core UI components and the welcome experience. While we continue refining how we communicate our vision externally, our energy remained focused on shipping improvements that enhance native experience. Each layout refinement and onboarding enhancement moves us closer to our north star: building the product we've always wanted to use ourselves.
The welcome section of our app has also received a fresh coat of polish this week.
We’ve added animations to our Welcome page. The subtle motion effects make the interface more engaging for new users. We also tested it in dark mode to ensure they maintain proper contrast and visibility across both light and dark themes.
We've also redesigned the New Conversation section to be fullscreen, with the input box positioned centrally. This layout helps users focus on the primary chat action and easily select different AI models to start with.
This week we tackled one of those seemingly simple but technically challenging layout issues -proper text truncation inside flex containers. In a typical flexbox layout, overflowing text can compromise design integrity by breaking out of its container. To address this, we implemented text truncation within a flex grow context. The title text now sits snugly alongside an icon, and when it reaches the container’s limit, it gracefully fades out with an ellipsis (…). This feature not only preserves visual harmony but also boosts readability across various layout sizes.
Building upon our horizontal layouts, we extended text truncation to flex column scenarios. Here, the challenge was to manage vertical space effectively without sacrificing the integrity of our design. By applying truncation techniques, we ensure that content in vertical stacks stays within its bounds even when there’s an overflow. This improvement guarantees that all texts maintain a consistent appearance inside a flex column layout - a crucial feature for native applications that mimic the fluidity of web layouts.
Customization is subtle but common in modern UI, so we took one step further by introducing custom ellipsis support. Instead of the traditional (…), developers can now specify their own characters or icons. This flexibility allows for branded truncation markers or context-specific indicators that blend seamlessly with the overall theme. Whether it's a subtle icon denoting continuation or a creative alternative that aligns with the product’s identity, this feature provides an extra layer of customization.
Working on native apps means reimplementing things we take for granted on the web. Simple features like flex box layouts, hover and active states, and even box shadow often require custom solutions. While the web gives us these for free, native development demands a more deliberate approach to achieve the same flexibility and responsiveness.
This week's work on text truncation is a perfect example - what seems like a basic feature actually requires careful implementation to work correctly across different containers and layout scenarios.
As we continue development, we're balancing our focus between core UI components and creating a polished first-run experience. Community feedback remains invaluable, and we're exploring ways to better showcase our products when seeking early testers.
Next week, we plan to further refine our flow with the New Conversation section and tackle additional challenges with our native text style components, all to ensure consistent behavior across platforms.