feat(app): Mobile Touch Optimization

[noahbentusi]

Summary

This PR optimizes the OpenCode App for mobile/touch devices while preserving the existing desktop experience. It addresses 5 key pain points for mobile users:

1. Toolbar Overflow - Hidden toolbar buttons are now accessible via an overflow menu on narrow screens
2. Mobile Panel Fullscreen - Side panels (file tree, review) display fullscreen on mobile instead of split view
3. Selection Comment - Touch and mouse users can select code and add comments via a floating "+" button
4. Long-Press File Menu - Touch users can long-press files to add them to the conversation context
5. Markdown Render Toggle - Markdown files can switch between rendered and source views

Changes

Feature	Description
Toolbar Overflow Menu	Adds "⋯" menu when width < 768px, containing: Search, Review, File Tree, Open App
Back to Chat Button	Adds navigation button on mobile toolbar (first position) to return to chat view
Mobile Panel Fullscreen	File tree and review panels become fullscreen overlays on mobile
File View in Panel	Opening files from mobile file tree shows content in fullscreen panel
Selection Toolbar	Floating "+" button appears near selected text for adding comments
Long-Press Context Menu	Long-press/right-click on file items shows "Add to conversation" option
Markdown Toggle	Toggle button to switch between rendered and source views for .md files

Files Changed

Path	Change
packages/app/src/components/session/toolbar-overflow-menu.tsx	New overflow menu component
packages/app/src/components/session/session-header.tsx	Mobile toolbar integration
packages/app/src/pages/session/mobile-fullscreen-panel.tsx	New fullscreen panel for mobile
packages/app/src/pages/session/file-tabs.tsx	Markdown toggle + selection toolbar
packages/app/src/components/file-tree.tsx	Context menu for file items
packages/app/src/hooks/use-long-press.ts	New hook for long-press detection
packages/app/src/context/layout.tsx	Mobile panel state management
packages/ui/src/components/selection-toolbar.tsx	Selection toolbar component
packages/app/src/i18n/en.ts	English translations
packages/app/src/i18n/zh.ts	Chinese translations

Testing

All features tested on mobile viewport (720×1920):

• ✅ Overflow menu shows hidden toolbar options
• ✅ Back to chat button returns to chat view
• ✅ File tree panel opens fullscreen
• ✅ Clicking file shows content in panel
• ✅ Selecting code shows "+" button
• ✅ Clicking "+" opens comment dialog
• ✅ Long-press/right-click on file shows context menu
• ✅ Desktop mode (>768px) unaffected

Screenshots

Mobile toolbar with overflow menu and back button visible. File tree in fullscreen mode with file content displayed.

Commits

dd33d456e docs: add mobile touch optimization design spec
d6cc8e394 feat(app): add toolbar overflow menu for mobile responsiveness
4443fca5b feat(app): add mobile fullscreen panel layout for review and file tree
33a425b65 fix(app): address code quality issues in mobile fullscreen panel
c57dbfb03 fix(app): keep mobile panel open when opening files from file tree
10f0bd5dd feat(ui): add touch selection toolbar for comments on mobile
2356ebe3a fix(ui): fix touch selection toolbar to use line selection
700184ab6 feat(app): add long-press context menu to file tree
e280e5e9b feat(app): add markdown render/source toggle
998a79414 fix(app): fix tabs context error in markdown toggle
b8a18c27d feat(app): add 'Back to chat' button to overflow menu
425ffb323 fix(file-tree): use ContextMenu instead of DropdownMenu
9ebdf5635 fix(app): move 'Back to chat' button from overflow menu to toolbar
ab87b60c3 fix(app): move 'Back to chat' button to first position in toolbar
fba58b528 refactor(ui): simplify selection comment to work for both mouse and touch

[github-actions]

This PR doesn't fully meet our contributing guidelines and PR template.

What needs to be fixed:

• PR description is missing required template sections. Please use the PR template.

Please edit this PR description to address the above within 2 hours, or it will be automatically closed.

If you believe this was flagged incorrectly, please let a maintainer know.

[github-actions]

The following comment was made by an LLM, it may be inaccurate:

Based on my comprehensive search, I found potential related PRs (not counting PR #18766 itself):

Potentially Related PRs:

1. fix(app): open inline comments directly on touch devices (PR fix(app): open inline comments directly on touch devices #18529)

   • Related to touch device interactions and comment functionality, which overlaps with the selection comment feature in PR feat(app): Mobile Touch Optimization #18766

2. feat(app): add preview and source view options for markdown files in file tabs (PR feat(app): add preview and source view options for markdown files in file tabs #13704)

   • Related to the markdown toggle feature (render vs. source view) mentioned in PR feat(app): Mobile Touch Optimization #18766

3. fix(app): comprehensive mobile UX improvements (PR fix(app): comprehensive mobile UX improvements #7989)

   • Addresses mobile UX improvements, which is related to the overall mobile touch optimization theme

However, none of these appear to be direct duplicates. PR #18766 seems to be a comprehensive mobile optimization effort that may complement or supersede some previous efforts, but the search results indicate this is a distinct PR addressing multiple unified mobile/touch improvements.