monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): add tooltip with path, 6px spacing before close icon, and reduce filename truncation to 14 chars

Browse Source
This commit is contained in:
David Hill
2026-01-24 04:40:46 +00:00
parent 75cccc305a
commit b280207481
1 changed files with 61 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
packages/app/src/components/prompt-input.tsx
View File

@@ -1679,52 +1679,70 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
<For each={prompt.context.items()}> <For each={prompt.context.items()}>
{(item) => { {(item) => {
return ( return (
<div <Tooltip
classList={{ value={
"group shrink-0 flex flex-col rounded-[6px] bg-background-stronger pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all shadow-xs-border hover:shadow-xs-border-hover": true, <span class="flex max-w-[300px]">
"cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID, <span
}} class="text-text-invert-base truncate min-w-0"
onClick={() => { style={{ direction: "rtl", "text-align": "left" }}
if (!item.commentID) return >
comments.setFocus({ file: item.path, id: item.commentID }) <bdi>{getDirectory(item.path)}</bdi>
view().reviewPanel.open() </span>
tabs().open("review") <span class="shrink-0">{getFilename(item.path)}</span>
}} </span>
}
placement="top"
openDelay={2000}
> >
<div class="flex items-center gap-1.5"> <div
<FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" /> classList={{
<div "group shrink-0 flex flex-col rounded-[6px] bg-background-stronger pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all shadow-xs-border hover:shadow-xs-border-hover": true,
class="flex-1 flex items-center text-11-regular min-w-0" "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID,
style={{ "font-weight": "var(--font-weight-medium)" }} }}
> onClick={() => {
<span class="text-text-strong whitespace-nowrap">{getFilenameTruncated(item.path, 18)}</span> if (!item.commentID) return
<Show when={item.selection}> comments.setFocus({ file: item.path, id: item.commentID })
{(sel) => ( view().reviewPanel.open()
<span class="text-text-weak whitespace-nowrap shrink-0"> tabs().open("review")
{sel().startLine === sel().endLine }}
? `:${sel().startLine}` >
: `:${sel().startLine}-${sel().endLine}`} <div class="flex items-center gap-1.5">
</span> <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
)} <div
</Show> class="flex items-center text-11-regular min-w-0"
style={{ "font-weight": "var(--font-weight-medium)" }}
>
<span class="text-text-strong whitespace-nowrap">{getFilenameTruncated(item.path, 14)}</span>
<Show when={item.selection}>
{(sel) => (
<span class="text-text-weak whitespace-nowrap shrink-0">
{sel().startLine === sel().endLine
? `:${sel().startLine}`
: `:${sel().startLine}-${sel().endLine}`}
</span>
)}
</Show>
</div>
<IconButton
type="button"
icon="close-small"
variant="ghost"
class="ml-auto h-5 w-5 opacity-0 group-hover:opacity-100 transition-all"
onClick={(e) => {
e.stopPropagation()
if (item.commentID) comments.remove(item.path, item.commentID)
prompt.context.remove(item.key)
}}
aria-label={language.t("prompt.context.removeFile")}
/>
</div> </div>
<IconButton <Show when={item.comment}>
type="button" {(comment) => (
icon="close-small" <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>
variant="ghost" )}
class="h-5 w-5 opacity-0 group-hover:opacity-100 transition-all" </Show>
onClick={(e) => {
e.stopPropagation()
if (item.commentID) comments.remove(item.path, item.commentID)
prompt.context.remove(item.key)
}}
aria-label={language.t("prompt.context.removeFile")}
/>
</div> </div>
<Show when={item.comment}> </Tooltip>
{(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
</Show>
</div>
) )
}} }}
</For> </For>