← anomalyco/opencode

#18529 · @Geequlim · opened Mar 21, 2026 at 2:43 PM UTC · last updated Mar 21, 2026 at 2:44 PM UTC

fix(app): open inline comments directly on touch devices

appfix
70
+8−21 files

Score breakdown

Impact

8.0

Clarity

8.0

Urgency

7.0

Ease Of Review

9.0

Guidelines

9.0

Readiness

9.0

Size

10.0

Trust

5.0

Traction

2.0

Summary

This PR fixes a bug where inline comments were inaccessible on touch devices due to reliance on hover interactions. It modifies the app to allow direct opening of comment drafts upon line selection on touch devices. Desktop behavior remains unchanged.

Open in GitHub

Description

Issue for this PR

Closes #17598

Type of change

  • [x] Bug fix

What does this PR do?

Inline comments were only discoverable through the hover affordance in the file view, which does not work well on touch devices like iPad.

This change keeps the desktop hover flow unchanged and makes touch devices open the inline comment draft directly after a line selection.

How did you verify your code works?

  1. Ran bun typecheck in app
  2. Verified desktop behavior is unchanged: inline comment entry still appears on hover
  3. Verified on touch devices that selecting a line opens the inline comment draft directly
  4. Confirmed existing inline comment interactions still work after opening the draft

Screenshots / recordings

Before

https://github.com/user-attachments/assets/6b6171ca-b34f-446f-9dd6-de440e738b25

After

https://github.com/user-attachments/assets/9cfc7e18-908f-4683-b819-b0eabcb2d212

Checklist

  • [x] I have tested my changes locally
  • [x] I have not included unrelated changes in this PR

Linked Issues

#17598 Review Comment and File Explorer does not work on mobile for OpenCode Web UI

View issue

Comments

No comments.

Changed Files

packages/app/src/pages/session/file-tabs.tsx

+8−2
@@ -1,6 +1,7 @@
import { createEffect, createMemo, Match, on, onCleanup, Switch } from "solid-js"
import { createStore } from "solid-js/store"
import { Dynamic } from "solid-js/web"
import { createMediaQuery } from "@solid-primitives/media"
import type { FileSearchHandle } from "@opencode-ai/ui/file"
import { useFileComponent } from "@opencode-ai/ui/context/file"
import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
@@ -56,6 +57,7 @@ export function FileTabContent(props: { tab: string }) {
const file = useFile()
const comments = useComments()
const language = useLanguage()
const touch = createMediaQuery("(hover: none), (pointer: coarse)")
const prompt = usePrompt()
const fileComponent = useFileComponent()
const { sessionKey, tabs, view } = useSessionLayout()
@@ -398,20 +400,24 @@ export function FileTabContent(props: { tab: string }) {
cacheKey: cacheKey(),
}}
enableLineSelection
enableHoverUtility
enableHoverUtility={!touch()}
selectedLines={activeSelection()}
commentedLines={commentedLines()}
onRendered={() => {
queueRes