Add activity list heading

src/client/components/msComponent/MSComponentDetailed.tsx

@@ -18,7 +18,7 @@ import {
     useSSEEvent,
     useSSEAnyEvent
 } from "@flamefrontend/sse-runtime-react";
-import { SourcePlayerJson } from "../../../core/Atomic.js";
+import { isComponentTypeSource, SourcePlayerJson } from "../../../core/Atomic.js";
 import { CountLiveIndicator, DateIndicator, DeadLetterIndicator, QueuedIndicator } from "./Stats.js";
 import { ListContainerFetchable, PlayListSkeleton } from "../playActivity/PlayList.js";
 import { useParams } from "react-router-dom";
@@ -92,6 +92,7 @@ export const ComponentDetailedDesktop = (props: {data?: ComponentCommonApiJson,
                 <Box marginEnd="auto"><MSComponentStats {...props}/></Box>
             </Flex>
             <PlayersContainer data={props.data} live={props.live}/>
+            <Heading size="3xl">{isComponentTypeSource(props.data.mode) ? 'Plays' : 'Scrobbles'}</Heading>
             <ListContainerFetchable render="virtDynamic" componentType={props.data.mode} componentId={props.data.id}/>
         </Flex>
     )

src/client/components/playActivity/VirtualListDynamic.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Span, Stack, Text, Box, Separator, HStack, Flex, IconButton, Container, SkeletonText, Collapsible, ScrollArea } from '@chakra-ui/react';
+import { Accordion, Span, Stack, Text, Box, Separator, HStack, Flex, IconButton, Container, SkeletonText, Collapsible, ScrollArea, SystemStyleObject } from '@chakra-ui/react';
 import React, { ComponentProps, Fragment, useMemo, useCallback } from "react"
 import { ActivityCollapsible } from '../ActivityDetail.js';
 import { type VirtualItem, useVirtualizer } from "@tanstack/react-virtual"
@@ -17,6 +17,23 @@ const containerStyle: React.ComponentProps<"div">['style'] = {
   position: "relative",
 }
 
+const scrollShadowCss: SystemStyleObject = {
+  "--scroll-shadow-size": "4rem",
+  maskImage: "linear-gradient(#000, #000)",
+  "&[data-overflow-y]": {
+    maskImage:
+      "linear-gradient(#000,#000,transparent 0,#000 var(--scroll-shadow-size),#000 calc(100% - var(--scroll-shadow-size)),transparent)",
+    "&[data-at-top]": {
+      maskImage:
+        "linear-gradient(180deg,#000 calc(100% - var(--scroll-shadow-size)),transparent)",
+    },
+    "&[data-at-bottom]": {
+      maskImage:
+        "linear-gradient(0deg,#000 calc(100% - var(--scroll-shadow-size)),transparent)",
+    },
+  },
+};
+
 export const VirtualizedListDynamic = (props: ActivityLogProps) => {
   const {
     data = [],
@@ -39,18 +56,27 @@ export const VirtualizedListDynamic = (props: ActivityLogProps) => {
     //debug: true
   });
 
-  return (<Box
+  // doesn't seem like i need this for height to work correctly?
+  //
+  // const contentProps = useMemo(
+  //   (): React.ComponentProps<"div"> => ({
+  //     style: {
+  //       height: `${virtualizer.getTotalSize()}px`,
+  //       width: "100%",
+  //       position: "relative",
+  //     },
+  //   }),
+  //   [virtualizer],
+  // )
+
+  return (
+    <ScrollArea.Root height="70vh" variant="always" w="full">
+  <ScrollArea.Viewport
     ref={parentRef}
-    w="full"
-    style={{
-      height: '50vh',
-      // width: 800,
-      overflowY: 'auto',
-      contain: 'strict',
-      overflowAnchor: 'none',
-    }}
+    css={scrollShadowCss}
   >
-    <Box ref={virtualizer.containerRef} style={containerStyle}>
+    <ScrollArea.Content>
+    <Box ref={virtualizer.containerRef} style={containerStyle} >
       {virtualizer.getVirtualItems().map((virtualItem) => {
         const item = items[virtualItem.index]
         return (
@@ -61,11 +87,13 @@ export const VirtualizedListDynamic = (props: ActivityLogProps) => {
             style={itemContainerStyle}>
               
               <ItemContainer query={props.query} live={live} sortBy={sortBy} componentId={props.componentId} componentType={props.componentType} activity={item} paddingY="2" data={item}/>
-              {/*isGroupInfo(item) ? <GroupHeader paddingY="2" data={item} /> : <ActivityCollapsible query={props.query} live={live} sortBy={sortBy} componentId={props.componentId} componentType={props.componentType} activity={item} />*/}
             </Box>)
       })}
     </Box>
-  </Box>);
+    </ScrollArea.Content>
+  </ScrollArea.Viewport>
+   <ScrollArea.Scrollbar bg="transparent" />
+  </ScrollArea.Root>);
 }
 
 const ItemContainer = (props: ComponentProps<typeof GroupHeader> & ComponentProps<typeof ActivityCollapsible>) => {