sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak(ui): align attachment and chip close buttons

input-cleanup
David Hill 2026-03-20 11:46:12 +00:00
parent 6f5d9d427e
commit 20b6eee370
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/app/src/components/prompt-input/context-items.tsx
View File

@ -76,7 +76,7 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
>
<div
classList={{
"group flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
"group relative flex flex-col rounded-[6px] pl-2 pr-7 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
"hover:bg-surface-interactive-weak": !!row.item.commentID && !selected,
"bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover": selected,
"bg-background-stronger": !selected,
@ -97,21 +97,21 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
)}
</Show>
</div>
<IconButton
type="button"
icon="close-small"
variant="ghost"
class="ml-auto 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"
onClick={(e) => {
e.stopPropagation()
props.remove(row.item)
}}
aria-label={props.t("prompt.context.removeFile")}
/>
</div>
<Show when={row.item.comment}>
{(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
{(comment) => <div class="text-12-regular text-text-strong ml-5 truncate">{comment()}</div>}
</Show>
<IconButton
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"
onClick={(e) => {
e.stopPropagation()
props.remove(row.item)
}}
aria-label={props.t("prompt.context.removeFile")}
/>
</div>
</Tooltip>
)

13
packages/app/src/components/prompt-input/image-attachments.tsx
View File

@ -1,5 +1,6 @@
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"
@ -21,7 +22,7 @@ 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.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
"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"
export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
return (
@ -59,14 +60,14 @@ export const PromptImageAttachment: Component<PromptImageAttachmentProps> = (pro
onClick={() => props.onOpen(props.attachment)}
/>
</Show>
<button
<IconButton
type="button"
onClick={() => props.onRemove(props.attachment.id)}
icon="close-small"
variant="ghost"
class={removeClass}
onClick={() => props.onRemove(props.attachment.id)}
aria-label={props.removeLabel}
>
<Icon name="close" class="size-3 text-text-weak" />
</button>
/>
</div>
</Tooltip>
)