vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-31 16:03:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat(app): fix composer attachment fades (#38547)

Browse source
This commit is contained in:
Aarav Sareen 2026-07-30 14:37:35 +05:30 • committed by GitHub
parent 3dbce3dade
commit c5cf416633
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 55 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

44
packages/session-ui/src/v2/components/prompt-input/attachments.css Normal file
View file

@ -0,0 +1,44 @@
@keyframes prompt-input-v2-attachments-fade-left {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes prompt-input-v2-attachments-fade-right {
from {
visibility: visible;
}
to {
visibility: hidden;
}
}
[data-component="prompt-input-v2-attachments"] {
timeline-scope: --prompt-input-v2-attachments-scroll;
[data-slot^="prompt-attachments-fade-"] {
visibility: hidden;
}
}
@supports (animation-timeline: --prompt-input-v2-attachments-scroll) and
(timeline-scope: --prompt-input-v2-attachments-scroll) {
[data-component="prompt-input-v2-attachments"] [data-slot="prompt-attachments-scroll"] {
scroll-timeline: --prompt-input-v2-attachments-scroll x;
}
[data-component="prompt-input-v2-attachments"] [data-slot="prompt-attachments-fade-left"] {
animation: prompt-input-v2-attachments-fade-left linear both;
animation-timeline: --prompt-input-v2-attachments-scroll;
animation-range: 0 0.1px;
}
[data-component="prompt-input-v2-attachments"] [data-slot="prompt-attachments-fade-right"] {
animation: prompt-input-v2-attachments-fade-right linear both;
animation-timeline: --prompt-input-v2-attachments-scroll;
animation-range: calc(100% - 1.1px) calc(100% - 1px);
}
}

15
packages/session-ui/src/v2/components/prompt-input/index.tsx
View file

@ -21,6 +21,7 @@ import type {
PromptInputV2Suggestion,
} from "./types"
import type { PromptInputV2Interaction, PromptInputV2SelectControl } from "./interaction"
import "./attachments.css"
export type {
PromptInputV2Attachment,
@ -107,7 +108,7 @@ export function PromptInputV2(props: PromptInputV2Props) {
<form
data-component="prompt-input-v2"
data-dock-border-underlay={props.borderUnderlay ? "v2" : undefined}
class="group/prompt-input relative min-h-[96px] w-full rounded-xl bg-v2-background-bg-base"
class="group/prompt-input relative min-h-[96px] w-full overflow-clip rounded-xl bg-v2-background-bg-base"
classList={{
"shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
"border border-v2-icon-icon-info border-dashed": state.drag === "active",
@ -378,7 +379,7 @@ export function PromptInputV2Attachments(props: {
}) {
return (
<Show when={props.attachments.length > 0 || (props.comments?.length ?? 0) > 0}>
<div data-slot="prompt-attachments" class="relative">
<div data-component="prompt-input-v2-attachments" data-slot="prompt-attachments" class="relative">
<div
data-slot="prompt-attachments-scroll"
class="flex flex-nowrap gap-2 overflow-x-auto no-scrollbar px-2 pt-2 pb-1"
@ -444,8 +445,14 @@ export function PromptInputV2Attachments(props: {
)}
</For>
</div>
<div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-base),transparent)]" />
<div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-base),transparent)]" />
<div
data-slot="prompt-attachments-fade-left"
class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-base),transparent)]"
/>
<div
data-slot="prompt-attachments-fade-right"
class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-base),transparent)]"
/>
</div>
</Show>
)