New UI Layout

[enricoros]

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: ✅
• New UI: Responsive foundation for Desktop/Mobile #298
• New UI Foundations (Structure) #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]

Inspirations list:

• https://dribbble.com/shots/22881262-Ecommerce-Analytics-Dashboard

[enricoros]

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