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

Author: arvsrn

packages/session-ui/src/v2/components/prompt-input/attachments.css

@@ -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);
+  }
+}

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

@@ -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>
   )