Further improve PWA

[krschacht]

• In PWA mode, when opened the composer input is not auto focused. It would be slightly better if it was (it works on desktop) but this may not be allowed on mobile. But then you manually focus the input and the keyboard slides up. However, it slides the WHOLE page rather than just the composer. It’s not immediately obvious this is a problem but then as the reply comes in, you stay focused in the input (which is correct) but you can’t read the reply. The fix is for this to behave like iMessage where the keyboard opening slides the composer up but keeps the top of the page still visible.

• Hover states don't work properly on mobile so we should eliminate those. Specifically, when you tap on the conversation title in the left nav it does not activate that conversation, instead it activates the hover state of that conversation. You have to tap a second time to actually select that conversation. As a first step, we can disable all hover states on mobile. This used to be difficult but it looks like Tailwind now supports this easily (How do I disable hover styles on mobile? tailwindlabs/tailwindcss#1739 (comment)). Separately we can figure ou thow to

• Install instructions: On a mobile phone, when you first navigate to the app in a browser we just render the app normally in this mobile browser. However, it's not a good experience. I think we should detect you're viewing the app in a mobile browser, intercept and redirect you to installation instructions. I'd probably create home_controller and '/install' can be the first route on it. Ideally the instructions should detect if you're on iOS or Android and customize the instructions it presents. (I think speakeasy.app might be an example of this)

• The conversations and assistants in the left nav are a little bit small to tap with your finger. Comparing it to ChatGPT mobile, I think we should both increase the font size and add some padding above and below. Likewise with your name/profile bar in the bottom left. Comparison:
  *

• Login & signup pages are too tall so they can be scrolled. Repro: add the app to phone home screen, open the app and make sure you're logged out, try scrolling up & down on the login page. We must have some big whitespace beneath the form.

• If you long tap on a conversation (or assistant) in the nav bar it does not have useful behavior. Can we disable long-tap for mobile web? Not sure if PWA supports that somehow, maybe in PWA config or as a modifier on each link or a tailwind thing?

• All the tappable elements in the top bar while viewing a conversation, those feel a bit too small as well.

• When you tap in the text input to send a message, the full app slides up to make room for the keyboard. Ideally only the composer should slide up and you should still see the messages & app header on screen.

• On iPad PWA, the whole page can scroll up and down a bit rather than being fixed (or rather, just having the conversation scroll). This is most evident on a brand new conversation. Try scrolling the main area. But even on a long conversation if you put your finger near the composer area then you can scroll the full page up and down separately from just scrolling the conversation messages.

• In dark mode the iOS menu bar is white. Maybe we can’t fix this and have to pick a single color, but it might be a simple setting to make the menu/status bar transparent?

• In PWA mode you can still two-finger zoom in on the whole app. We should disable this.

• The logo needs a little more whitespace around it, it's a bit too close to the edge. Here you can see it as compared with a few other logos
  *

• Our logo is stretched on the iPad splash screen (it looks fine on mobile) — this is a known iOS bug: Stretched images on iOS 13 with iPAD pro landscape elegantapp/pwa-asset-generator#93
  *

• We should disable all hover tooltips on mobile. With the touch screen, the tooltip doesn't appear until you tap and then it's left sitting on screen. So, for example, when you send a chat message you still see "send message" tooltip above the submit button after you've tapped it. Tooltips aren't appropriate on mobile.

• When you open the nav bar on mobile there is a weird black line at the top, we should hide this:

• We need to make room at the bottom of the page for the iOS grab handle. The tricky thing is, some iOS devices need that extra space and others don't. React Native (and I believe Swift) solve this by the concept of safe area (react native can wrap the view in SafeAreaProvider and it just does the right thing). Does an equivalent exist in PWA apps?

• When you try to scroll outside of the scroll box (because you reach the top and the bottom) it moves the header and footer. Here I'm pulling down. There is some fix for this with CSS but I forget what it is

[krschacht]

@jasonpaulso I had accidentally marked this PWA issue as complete but there are still some improvements. I just cleaned this up to it's up to date. If you feel so inclined :) the top two items on this list would be particularly impactful. Some of the others might be easy too.

[jasonpaulso]

Absolutely @krschacht I can work on the remaining items

[jasonpaulso]

@krschacht just letting you know that I'm still working on this. I think I've sorted a few points and a few others I'm noodling on.

[krschacht]

Thanks @jasonpaulso , you're awesome. And in case you didn't notice yet, a couple days ago, I slipped a new one to the very top of the list. As I've been using the mobile experience more, this might be the single biggest usability issue.