Skip to content

Conversation

@amrmelsayed
Copy link
Collaborator

@amrmelsayed amrmelsayed commented Mar 5, 2025

This PR focuses on migrating most of the styling logic from stylesheets to NativeWind along with a series of user improvement updates and bug fixes.

NativeWind migration
NativeWind significantly reduces the amount of code required for designing and styling user experiences which is an essential foundational task as we are aiming to support desktop web, mobile web, Android and iOS apps using the same codebase so reducing this logic to the bare mimimum will help us move faster.

This PR reduces the amount of styling logic by anywhere from 50% to 90%, here is a before and after sample:

Before:

image

After

image

NativeWind migration covers the bulk of this PR, additionally, I have made a series of user experience improvements:

Improve input validation handling experience
One of the usability issues with both the login and register pages is that they trigger data validation errors as soon as the user touches the input or starts typing, here is a sample:

image

This commit delay the Formik the validation process until the user clicks on the submit button.

Improve the drawer user experience
The current drawer experience has a number of issues:

  1. It relies heavily on hover, mouse enter and mouse leave events which don't have an equivalent on mobile.
  2. When editing a message title, there are no call to actions (save / cancel), the user has to click enter or hit escape.

This commit updates the user experience to be mobile compatible, this is a starting point, happy to tweak it as you see fit.

image

Chat page

Updated the rendering of the thinking section

image

Improved the rendering experience to reduce the flickering issues, also resolved the automated scrolling issues which were reported in issue #16.

One thing to note is that the web version doesn't currently have a sticky header or footer (when the user scrolls, they will disappear). I have already resolved this issue in the app version, and I will address the web version soon, here is an Android scrolling sample:

Screen_Recording_20250305_183141_Ansari.Chat.mp4

Copy link
Collaborator

@waleedkadous waleedkadous left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What a great PR. Love the thinking treatment. Love the removal of lots of duplicative CSS.

@waleedkadous waleedkadous merged commit 3c50ab8 into ansari-project:develop Mar 5, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants