feat: enhance DynamicVirtualList with header and className props

- Added `header` prop to display content above the list.
- Introduced `className` prop for additional styling on the container.
- Updated `Sessions` component to utilize `StyledVirtualList` with new props for improved layout and functionality.

src/renderer/src/components/VirtualList/dynamic.tsx

@@ -81,6 +81,16 @@ export interface DynamicVirtualListProps<T> extends InheritedVirtualizerOptions
    * Hide the scrollbar automatically when scrolling is stopped
    */
   autoHideScrollbar?: boolean
+
+  /**
+   * Header content to display above the list
+   */
+  header?: React.ReactNode
+
+  /**
+   * Additional CSS class name for the container
+   */
+  className?: string
 }
 
 function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
@@ -95,6 +105,8 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
     itemContainerStyle,
     scrollerStyle,
     autoHideScrollbar = false,
+    header,
+    className,
     ...restOptions
   } = props
 
@@ -189,7 +201,7 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
   return (
     <ScrollContainer
       ref={scrollerRef}
-      className="dynamic-virtual-list"
+      className={className ? `dynamic-virtual-list ${className}` : 'dynamic-virtual-list'}
       role="region"
       aria-label="Dynamic Virtual List"
       aria-hidden={!showScrollbar}
@@ -200,6 +212,7 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
         ...(horizontal ? { width: size ?? '100%' } : { height: size ?? '100%' }),
         ...scrollerStyle
       }}>
+      {header}
       <div
         style={{
           position: 'relative',

src/renderer/src/pages/home/Tabs/components/Sessions.tsx

@@ -1,4 +1,3 @@
-import Scrollbar from '@renderer/components/Scrollbar'
 import { DynamicVirtualList } from '@renderer/components/VirtualList'
 import { useCreateDefaultSession } from '@renderer/hooks/agents/useCreateDefaultSession'
 import { useSessions } from '@renderer/hooks/agents/useSessions'
@@ -99,19 +98,18 @@ const Sessions: React.FC<SessionsProps> = ({ agentId }) => {
   }
 
   return (
-    <Container className="sessions-tab">
+    <StyledVirtualList
+      className="sessions-tab"
+      list={sessions}
+      estimateSize={() => 9 * 4}
+      // FIXME: This component only supports CSSProperties
+      scrollerStyle={{ overflowX: 'hidden' }}
+      autoHideScrollbar
+      header={
         <AddButton onClick={createDefaultSession} disabled={creatingSession} className="-mt-[4px] mb-[6px]">
           {t('agent.session.add.title')}
         </AddButton>
-      {/* h-9 */}
+      }>
-      <DynamicVirtualList
-        list={sessions}
-        estimateSize={() => 9 * 4}
-        scrollerStyle={{
-          // FIXME: This component only supports CSSProperties
-          overflowX: 'hidden'
-        }}
-        autoHideScrollbar>
       {(session) => (
         <SessionItem
           key={session.id}
@@ -121,17 +119,15 @@ const Sessions: React.FC<SessionsProps> = ({ agentId }) => {
           onPress={() => setActiveSessionId(agentId, session.id)}
         />
       )}
-      </DynamicVirtualList>
+    </StyledVirtualList>
-    </Container>
   )
 }
 
-const Container = styled(Scrollbar)`
+const StyledVirtualList = styled(DynamicVirtualList)`
   display: flex;
   flex-direction: column;
   padding: 12px 10px;
-  overflow-x: hidden;
   height: 100%;
-`
+` as typeof DynamicVirtualList
 
 export default memo(Sessions)