search

khoj-ai / khoj

Your AI second brain. Get answers to your questions, whether they be online or in your own notes. Use online AI models (e.g gpt4) or private, local LLMs (e.g llama3). Self-host locally or use our cloud instance. Access from Obsidian, Emacs, Desktop app, Web or Whatsapp.
https://khoj.dev
GNU Affero General Public License v3.0
12.63k stars 640 forks source link

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

Closed askadityapandey closed 3 months ago

askadityapandey commented 3 months ago

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!

Screenshot_2024-05-26_00-38-01

amaan-bhati commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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.