vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-26 16:19:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 18

tweak(ui): enlarge close hit targets

Browse source
This commit is contained in:
David Hill 2026-03-20 12:08:57 +00:00
parent b42628a744
commit 15abc9ea4d
2 changed files with 22 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/app/src/components/prompt-input/context-items.tsx
View file

@ -1,6 +1,6 @@
import { Component, For, Show, createMemo } from "solid-js"
import { FileIcon } from "@opencode-ai/ui/file-icon"
import { IconButton } from "@opencode-ai/ui/icon-button"
import { Icon } from "@opencode-ai/ui/icon"
import { Tooltip } from "@opencode-ai/ui/tooltip"
import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/util/path"
import type { ContextItem, ImageAttachmentPart } from "@/context/prompt"
@ -95,17 +95,23 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
<Show when={row.item.comment}>
{(comment) => <div class="text-12-regular text-text-strong ml-5 truncate">{comment()}</div>}
</Show>
<IconButton
<button
type="button"
icon="close-small"
variant="ghost"
class="absolute top-1 right-1 size-3.5 text-text-weak hover:text-text-strong opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
class="absolute top-0 right-0 size-6 opacity-0 pointer-events-none transition-opacity group/remove group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
onClick={(e) => {
e.stopPropagation()
props.remove(row.item)
}}
aria-label={props.t("prompt.context.removeFile")}
/>
>
<span class="absolute top-1 right-1 size-3.5 rounded-[var(--radius-sm)] flex items-center justify-center bg-transparent group-hover/remove:bg-surface-base-hover group-active/remove:bg-surface-base-active">
<Icon
name="close-small"
size="small"
class="text-text-weak group-hover/remove:text-text-strong"
/>
</span>
</button>
</div>
</Tooltip>
)

17
packages/app/src/components/prompt-input/image-attachments.tsx
View file

@ -1,6 +1,5 @@
import { Component, Show } from "solid-js"
import { Icon } from "@opencode-ai/ui/icon"
import { IconButton } from "@opencode-ai/ui/icon-button"
import { Tooltip } from "@opencode-ai/ui/tooltip"
import type { ImageAttachmentPart } from "@/context/prompt"
@ -22,7 +21,9 @@ const fallbackClass =
"size-12 rounded-[6px] bg-background-stronger flex items-center justify-center shadow-xs-border cursor-default"
const imageClass = "size-12 rounded-[6px] object-cover shadow-xs-border"
const removeClass =
"absolute top-1 right-1 size-3.5 text-text-weak hover:text-text-strong opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
"absolute top-0 right-0 size-6 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
const removeIconClass =
"absolute top-1 right-1 size-3.5 rounded-[var(--radius-sm)] flex items-center justify-center bg-transparent group-hover/remove:bg-surface-base-hover group-active/remove:bg-surface-base-active"
export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
return (
@ -60,14 +61,16 @@ export const PromptImageAttachment: Component<PromptImageAttachmentProps> = (pro
onClick={() => props.onOpen(props.attachment)}
/>
</Show>
<IconButton
<button
type="button"
icon="close-small"
variant="ghost"
class={removeClass}
class={`${removeClass} group/remove`}
onClick={() => props.onRemove(props.attachment.id)}
aria-label={props.removeLabel}
/>
>
<span class={removeIconClass}>
<Icon name="close-small" size="small" class="text-text-weak group-hover/remove:text-text-strong" />
</span>
</button>
</div>
</Tooltip>
)