Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New UI Layout #201

Closed
3 of 5 tasks
enricoros opened this issue Nov 16, 2023 · 2 comments
Closed
3 of 5 tasks

New UI Layout #201

enricoros opened this issue Nov 16, 2023 · 2 comments
Labels
feature-cool Distinctive features New UX
Milestone
1.10.0

Comments

@enricoros
Copy link
Owner

enricoros commented Nov 16, 2023 •
edited
Loading

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:

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 enricoros changed the title New UI New UI Layout Nov 16, 2023
@enricoros enricoros mentioned this issue Nov 16, 2023
Open
@enricoros
Copy link
Owner Author

Inspirations list:

@enricoros
Copy link
Owner Author

Image

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

@enricoros enricoros mentioned this issue Nov 18, 2023
Closed
@enricoros enricoros self-assigned this Nov 19, 2023
@enricoros enricoros added this to the 1.6.0 milestone Nov 20, 2023
@enricoros enricoros modified the milestones: 1.6.0, 1.7.0 Nov 28, 2023
This was referenced Dec 12, 2023
Open
Closed
@enricoros enricoros mentioned this issue Dec 23, 2023
Closed
enricoros added a commit that referenced this issue Dec 28, 2023
@enricoros
New UI - Part 1 - Details inside:
d775d47 
 - Optima Layout: new Context based pluggable layout system
   - Now children have context functions, for better behaviors
   - Removed `store-applayout`
   - using withLayout on top-level Pages
 - ScrollToBottom: grounds-up subsystem for smooth scrolling with snap-to-bottom
 - Panes subsystem: use react-resizeable-panels together with our Panes subsystem
   - New: Split window chats, Drag to close windows, Button to split
   - using: https://github.com/bvaughn/react-resizable-panels
 - Cosmetic: Colors: update Light and Dark themes
 - Bootstrap Logic provider: will enable Mobile use cases
 - Removed NoSSR (the backend provided natually acts as the same)
 - Next load progress: loading indicator for slower pages (>300ms)
 - withLayout() system

Additional benefits include: no-pluggable-flashing, pane-ready,
fixed X-scrolling on Firefox, and more.

Closes #308, #304, #255, #59.
Progress on #305, #201, #296, #233, #208, #203.
@enricoros enricoros added the feature-cool Distinctive features label Jan 1, 2024
enricoros added a commit that referenced this issue Jan 1, 2024
@enricoros
Merge New UI - details inside:
18e6e23 
 - OptimaLayout: new responsive UI framework, with nav and drawer for desktop and mobile
 - Nav: new top-level navigation framework (will replace 'routes' going forward)
 - The new (App) Panel is more stable for UI operations (vs. the former Popup)
 - Improved looks on desktop, and uses Drawer on mobile
 - Missing bottom-Nav on mobile, to replace the PageMenu nav
 - Closes #298, #201.

Landing as-is on `main`, will fix smaller bits later.
@enricoros enricoros added this to the 1.10.0 milestone Jan 6, 2024
@enricoros enricoros removed their assignment Jan 6, 2024
@enricoros enricoros mentioned this issue Jan 6, 2024
Closed
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature-cool Distinctive features New UX
Projects
big-AGI build-in-public roadmap
Status: To Promote
Milestone
1.10.0
Development

No branches or pull requests
1 participant
@enricoros