[IDEA] Let's make the UI more cooler!

[askadityapandey]

I've been to the Khoj's (https://app.khoj.dev/agents) page
and I kinda find, we can improve. I am loving you guys' IDEA and I think I can contribute to the UI and other features , so I wanna start from the UI. Would love to hear a response from you!

[amaan-bhati]

I think this page definitely deserves a better UI.
The scrolling inside of the div (that too with overflow not hidden) is not the best way to display content in my opinion.

1. In place of the normal divs, we can go with the 2024 trend of bento grid cards for each div. Using bento grids will give it a more fancy and relevant look for an ai tool website page providing decent amount of information.
2. To display the content of each card we can use modals, a modal would let a user click on a button which would open up a dialogue box/modal with all the important information.
3. We need to hide the scrollbar when reading the content, the scroll bar visibility reciprocates a very bad impression of the ui to a user.

LMK if I can help in any way to improve the UI too.

[sabaimran]

Thanks a ton for this discussion guys, this feedback is invaluable. The scrollbars seem to actually be a windows issue, but we should 100% fix that.

@amaan-bhati , would you have a UI reference for what you mean by bento cards?

[amaan-bhati]

Hello @sabaimran
Thanks for considering my input, glad my idea was appreciated here.
You can check the following websites for the UI reference :

https://necatikcl.dev
https://10xdesigners.co
https://wope.com
https://liam.is

The small cards that you see when you scroll through the above websites are examples of bento grids, bento grids can be of various sizes depending upon the content to be displayed and can be customised accordingly using own innovation.

You can also check js mastery's youtube video about the same:
https://www.youtube.com/watch?v=FTH6Dn3AyIQ&ab_channel=JavaScriptMastery

You can also check the shorter version of my portfolio website that i built using nextjs following the bento design trend at https://contact.amaanbhati.tech

Hope that helps, do let me know if you need more information or any further help.

[sabaimran]

I suppose one big difference here is that we should truncate the text rather than letting it overflow, and we can also choose a more aesthetic layout overall for the cards. Thanks for the reference, @amaan-bhati ! I'll see how I can incorporate some of this styling into our design.

[sabaimran]

Let me know if you have thoughts on this, just pushed some changes based on what I saw in those samples: https://app.khoj.dev/agents

[amaan-bhati]

Yes, overflow doesn't suit with small cards at all. React modal or even the truncated that you suggested are probably the best suited way for this page.
I just saw the new UI it is too good, much more minimalistic, straightforward and user-friendly🔥