planning: Jan Mobile UI

[dan-homebrew]

Goal

• Jan is responsive for Mobile
• Do we need to change UI framework?
  • We currently use Joi

[urmauur]

@dan-homebrew @imtuyethan @0xSage here my suggestion

For the mobile base layout, the design prioritizes clean and accessible navigation:

• The Ribbon Panel will serve as the primary navigation, fixed at the bottom for easy reach.
• The Left Panel will overlay the left side of the screen, and the Right Panel will overlay the right side. A center overlay will display upon activation from an icon located at the top of the navbar.

This layout aims to maintain a streamlined user experience, with the Ribbon Panel consistently accessible at the bottom. To optimize performance, conditional stylesheets will be used instead of conditional rendering to adapt the layout on mobile devices.

[imtuyethan]

Thanks @urmauur. Here are 2 design options for mobile:

Design

Option 1

Figma link: https://www.figma.com/design/HI8LuAGRsYQ2FdTRtg3aHH/Jan-Mobile?node-id=0-1

• Keep threads as base / fundamental screen
• Bundle Hub & Settings as overlay functions

Option 2

Figma link: https://www.figma.com/design/HI8LuAGRsYQ2FdTRtg3aHH/Jan-Mobile?node-id=26-1549

Based on @urmauur's suggestion & inspired by Obsidian

• Keep Ribbon as bottom main navigation
• However, we’ll need to adapt some elements for mobile to ensure a user-friendly experience. Unlike on desktop, where the right panel can remain open alongside the chat, mobile screens are too limited to support this without compromising usability.
• For example, the model selector on mobile should ideally be placed at the top of the chat screen. This allows users to easily switch models without needing to toggle the right panel open and closed repeatedly. It also helps reduce clutter in the bottom navigation and keeps the input box focused on messaging, rather than adding additional controls.

Set up models to use on mobile

It's clear that users can't run large models on mobile. Here are some options for them: 1. Use models via nearby servers:

• Via IP address: If users choose to connect to a server on the same network, the server could generate a QR code with connection details (e.g., IP address, port). Users can simply scan the code with Jan on their mobile device to initiate the connection or enter the IP address manually.
• Via Bluetooth device pairing: For users without Wi-Fi access, we can implement Bluetooth-based pairing, making it straightforward to connect devices without entering complex information.
  2. Recommend tiny on-device models to download
  3. Connect cloud services

[urmauur]

Since we allow the community to inject icons from extensions, let’s say I install 10 extensions, and all of them create new icons on the ribbon. How would this menu look?

If we go with this approach, we need to handle this case.