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,39 +98,36 @@ const Sessions: React.FC<SessionsProps> = ({ agentId }) => {
   }
 
   return (
-    <Container className="sessions-tab">
-      <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}
-            session={session}
-            agentId={agentId}
-            onDelete={() => handleDeleteSession(session.id)}
-            onPress={() => setActiveSessionId(agentId, session.id)}
-          />
-        )}
-      </DynamicVirtualList>
-    </Container>
+    <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>
+      }>
+      {(session) => (
+        <SessionItem
+          key={session.id}
+          session={session}
+          agentId={agentId}
+          onDelete={() => handleDeleteSession(session.id)}
+          onPress={() => setActiveSessionId(agentId, session.id)}
+        />
+      )}
+    </StyledVirtualList>
   )
 }
 
-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)