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

fix(app): improve comment popup styling and add new comment icon

Browse Source
This commit is contained in:
David Hill
2026-01-23 19:47:44 +00:00
parent b978ca11da
commit ae84e9909a
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/app/src/pages/session.tsx
View File

@@ -2047,21 +2047,22 @@ export default function Page() {
<div class="absolute right-6 z-30" style={{ top: `${draftTop() ?? 0}px` }}>
<button
type="button"
class="size-5 rounded-md flex items-center justify-center bg-surface-warning-base border border-border-warning-base text-icon-warning-active shadow-xs hover:bg-surface-warning-weak hover:border-border-warning-hover focus:outline-none focus-visible:shadow-xs-border-focus"
class="size-5 rounded-md flex items-center justify-center shadow-xs focus:outline-none focus-visible:shadow-xs-border-focus"
style={{
background: "var(--icon-interactive-base)",
color: "var(--white)",
}}
onClick={() => textarea?.focus()}
>
<Icon name="speech-bubble" size="small" />
<Icon name="comment" size="small" style={{ color: "var(--white)" }} />
</button>
<div class="absolute top-0 right-[calc(100%+12px)] z-40 min-w-[200px] max-w-[320px] rounded-md bg-surface-raised-stronger-non-alpha border border-border-base shadow-md p-3">
<div class="absolute top-[calc(100%+4px)] right-[-8px] z-40 w-[380px] rounded-[14px] bg-surface-raised-stronger-non-alpha border border-border-base shadow-lg-border-base p-2">
<div class="flex flex-col gap-2">
<div class="text-12-medium text-text-strong">
Commenting on {getFilename(path() ?? "")}:{commentLabel(range())}
</div>
<textarea
ref={textarea}
class="w-[320px] max-w-[calc(100vw-48px)] resize-vertical p-2 rounded-sm bg-surface-base border border-border-base text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-focus"
class="w-full resize-vertical p-2 rounded-[6px] bg-surface-base border border-border-base text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-select"
rows={3}
placeholder="Add a comment"
placeholder="Add comment"
value={draft()}
onInput={(e) => setDraft(e.currentTarget.value)}
onKeyDown={(e) => {
@@ -2076,7 +2077,11 @@ export default function Page() {
setCommenting(null)
}}
/>
<div class="flex justify-end gap-2">
<div class="flex items-center gap-2">
<div class="text-12-medium text-text-weak ml-2">
Commenting on {commentLabel(range())}
</div>
<div class="flex-1" />
<Button size="small" variant="ghost" onClick={() => setCommenting(null)}>
Cancel
</Button>