enricoros/big-AGI

New UI Layout

enricoros opened this issue · 2 comments

enricoros commented

New UI layout to support the addition of more functionality on both Desktop and Mobile.

We need to make space for new applications: Voice calling, Persona builder #198 , Facton #202 , etc. At the same time, we need to make the best use of space on large screens, as the app runs well from 5-inch phones to 50-inch screens.

Requirements:

  • - Mobile/Desktop reactive hooks: ✅
  • #298
  • #299
  • New UI: Mobile layout
  • - Index -> landing page, /chat as URL state

Desktop looks:

  • collapsible left-side two-level navigation pane
  • when collapsed looks like today's big-agi, but the navigation bar may extend full length
  • pressing the expander icon will reveal the two levels menu
  • two-levels: can be hierarchical (vertical), or side by side
    • level 1: Apps
      • level 2: App data (conversations list, or conversation tree)
  • the Apps level shall have the current application highlighted
  • still, for other use cases (e.g. sharing) the current AppLayout may be preserved and only used in that case
  • if possible, pluggable mechanics need to be reused as-is

Mobile looks:

  • when in Chat, there shall be no bottom bar. Somehow we can make it happen later
    • maybe the bottom bar should only be on the Main Page?
  • when the menu is expanded, it shall use a Drawer (maybe apps are there?), which corresponds to the "Level 2" of the desktop Apps, an additional surface
  • a back arrow or something like that to go back to the landing page where the App selector is presented
enricoros commented

Image

This image is generated with Big-AGI -> Visualize just by feeding in the text above :D