feat: Mobile UI for web#835
Open
Pecacheu wants to merge 44 commits into
Open
Conversation
This was referenced Mar 1, 2026
This was referenced Mar 1, 2026
Trifall
added a commit
to Trifall/stoat-for-web
that referenced
this pull request
Mar 2, 2026
feat: Mobile UI for web (upstream PR stoatchat#835)
Pecacheu
force-pushed
the
phoneui
branch
2 times, most recently
from
362f12b to
c428355
Compare
This was referenced Mar 3, 2026
Contributor
Author
|
Okay I'm going to attempt to fix the DCO check and i18n again while pushing some commits. If I don't come back, play Porter Robinson at my funeral. |
Pecacheu
force-pushed
the
phoneui
branch
2 times, most recently
from
0dacbb5 to
b730faf
Compare
This was referenced Mar 13, 2026
This was referenced Mar 14, 2026
Signed-off-by: Pecacheu <[email protected]>
- Found a better spot to put the media query so that it's all in one place for easier maintence - Hide breadcrums at top in "My Account" panel to fix visual bug where there's still a gap there despite no title - Center ESC button text properly Signed-off-by: Pecacheu <[email protected]>
- I swear this is the last time lol. Now using classes for everything instead of just some of it, will also help with changes for phone view - Change threshold for tablet view to 900px Signed-off-by: Pecacheu <[email protected]>
- Phone UI triggers at < 600px width - Animated, swipable drawer slider, inspired by Discord app - Viewport interactive-widget specifier to force keyboard to resize content window instead of awkwardly panning it Signed-off-by: Pecacheu <[email protected]>
- Inertia-based snapping for SlideDrawer! We mustelids are experts in speed so this was inevitable - Fix bug that could cause a SlideDrawer race condition if openning and closing settings menu super fast - Add appDrawer to app state to update things when the state of the UI changes between mobile/non-mobile - Don't trigger floating tooltops when input is touched, otherwise they get stuck in a showing state on touchscreens - Reset layout to member sidebar being hidden when mobile view is shown (otherwise how to close it seems to cause some confusion among those who helped test so far) - Replace primary sidebar collapse button with a "back" button for mobie view Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
…al velocity at end - Fix message context menu appearing in editor - Enable PWA for dev build for testing Signed-off-by: Pecacheu <[email protected]>
…ehavior - On mobile, skip UserCard preview (which doesn't look right on small displays) when tapping user icon and go straight to full UserProfile modal Signed-off-by: Pecacheu <[email protected]>
…for ID Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
- Fix stoatchat#883 text overflow out of dialog modals - Remove old "error" type modal - Fix invite embed going past edge of screen on mobile Signed-off-by: Pecacheu <[email protected]>
…spellcheck suggestions - Remove debug print from SlideDrawer Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
- Replace depricated meta 'apple-mobile-web-app-capable' with 'mobile-web-app-capable' Signed-off-by: Pecacheu <[email protected]>
…ipated - Also streamlined the Media Picker menu in the process, should now be much more efficent by generating a lot less stray DOM elements, and using only one Media Picker instance per message - Only show member sidebar when in server or group DM, because it's blank in normal DMs which causes confusion Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
7 tasks
- Fix missing reactPicker in AppearanceMenu Signed-off-by: Pecacheu <[email protected]>
- Don't autofocus search input in GIF/emoji picker on mobile because it causes unwanted touch keyboard deployment - Shrink GIF/emoji picker when screen is too small (dynamically reduces row count for emoji picker or GIF size for GIF picker) - Prevent GIF/emoji picker from overflowing screen width/height (approach for this is a bit messy, could be improved) - Fix different sized margin on left vs right side of message box (if you had OCD you'd understand) - Fix overflow hidden clipping emoji autocorrect dropdown when editing a message - Fix message box buttons/send button not firing when touch keyboard is open on Chrome (testing needed on Firefox/Safari mobile) - Fix vite config not allowing rotate to landscape Signed-off-by: Pecacheu <[email protected]>
- Fix 'scrollTo undefined' error in Message - Fix 'computations will never be disposed' warning in Container - Add excluded generated dirs from eslint config to vscode config Signed-off-by: Pecacheu <[email protected]>
…patible Signed-off-by: Pecacheu <[email protected]>
Addresses stoatchat#1005 Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
… mobile Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
…r PRs Signed-off-by: Pecacheu <[email protected]>
- Start SlideState enum at 1 so that ! can be used to check for undefined Signed-off-by: Pecacheu <[email protected]>
Signed-off-by: Pecacheu <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why this is important
One of the most consistent reasons I hear stopping/making folks hesitate from joining Stoat is the borked mobile app situation. A lot of people in my generation spend much of our time on our phones, plus when it comes to keeping in touch at work, it's all you have access to.
Unfortunately, the current state of affairs is that the Android beta app is missing a ton of features and doesn't work right, and the iOS one isn't currently available. The best thing we've been telling these people is "use the web app in your browser instead," but the trouble is, well you get an experience like this (these are screenshots from real users in the Stoat server who are asking for this, as well as one of my friends testing this fork.)
Responsive mobile UI layout
Phone Example (S25 Ultra)
The most important UI change is the slide gesture to open and close panels instead of showing them side-by-side. I've done some work to refine this to make it feel as natural as possible, eg. taking into account inertia of the finger to "snap" the panel open and shut.
Swipe.mp4
I've un-rounded the corners to increase usable space under a certain display size (opinions welcome on this). I also added code to make the panel slide over automatically when tapping a DM/channel. Lastly, the "channel collapse" button is replaced with a "back" button that returns to the channels view.
Tablet Example (iPad Mini)
When the screen is big enough, however, the UI dynamically changes back to the traditional layout. However, the "server members" panel on the right is collapsed by default in this case, as we found it was creating some confusion among testers. One user also suggests allowing a swipe gesture to open that on tablets, but open to thoughts on that.
Other enhancements for touch users
Ctrl + Entersends on mobile instead ofEnter, enabling newlines on touch-keyboard without sending.Linked Issues
Fixes #850
Fixes #883
Fixes #887
Fixes #924
Fixes #998 (Probably)
Fixes #1005
Fixes #1023
Fixes #1033
Built on top of refactor #1102
Test live at https://forestfire.net:420
Btw, quick thanks to everyone who's helped test this so far on lots of different devices and helped fix lots of bugs!