@flamingo-stack/openframe-frontend-core 0.0.294 → 0.0.295

package/src/components/chat/chat-ticket-list.tsx

@@ -13,13 +13,6 @@ export interface ChatTicketListProps extends React.HTMLAttributes<HTMLDivElement
   skeletonCount?: number
 }
 
-function getMask(top: boolean, bottom: boolean) {
-  if (top && bottom) return 'linear-gradient(to bottom, transparent, black 64px, black calc(100% - 64px), transparent)'
-  if (top) return 'linear-gradient(to bottom, transparent, black 64px)'
-  if (bottom) return 'linear-gradient(to bottom, black calc(100% - 64px), transparent)'
-  return 'none'
-}
-
 const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
   ({ className, tickets, onTicketClick, isLoading = false, skeletonCount = 5, ...props }, ref) => {
     const scrollRef = React.useRef<HTMLDivElement>(null)
@@ -54,24 +47,17 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
 
     if (tickets.length === 0) return null
 
-    const mask = getMask(fadeTop, fadeBottom)
-
     return (
       <div ref={ref} className={cn("flex flex-col gap-2 min-h-0", className)} {...props}>
         <p className="text-h5 text-ods-text-secondary shrink-0">Your Chats:</p>
         <div
           className={cn(
-            "border-x border-ods-border flex-1 min-h-0 overflow-hidden",
+            "relative border-x border-ods-border flex-1 min-h-0 overflow-hidden",
             !fadeTop && "border-t rounded-t-md",
             !fadeBottom && "border-b rounded-b-md",
           )}
         >
-          <div
-            ref={scrollRef}
-            className="overflow-y-auto h-full"
-            onScroll={updateFade}
-            style={mask !== 'none' ? { maskImage: mask, WebkitMaskImage: mask } : undefined}
-          >
+          <div ref={scrollRef} className="overflow-y-auto h-full" onScroll={updateFade}>
             {tickets.map((ticket) => (
               <ChatTicketItem
                 key={ticket.id}
@@ -80,6 +66,29 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
               />
             ))}
           </div>
+
+          {/* Scroll-fade overlays — tinted with the page background so edge
+              tickets fade into the surface behind the list in BOTH themes. The
+              token flips with `data-theme` (light #fafafa, dark #161616),
+              unlike the previous alpha mask. Card-coloured fade (#ffffff) was
+              invisible in light theme against the items' own bg. Same token as
+              guide-welcome. */}
+          <div
+            aria-hidden
+            className={cn(
+              'pointer-events-none absolute inset-x-0 top-0 h-16 transition-opacity duration-150',
+              fadeTop ? 'opacity-100' : 'opacity-0',
+            )}
+            style={{ background: 'linear-gradient(0deg, transparent 0%, var(--color-bg) 100%)' }}
+          />
+          <div
+            aria-hidden
+            className={cn(
+              'pointer-events-none absolute inset-x-0 bottom-0 h-16 transition-opacity duration-150',
+              fadeBottom ? 'opacity-100' : 'opacity-0',
+            )}
+            style={{ background: 'linear-gradient(180deg, transparent 0%, var(--color-bg) 100%)' }}
+          />
         </div>
       </div>
     )