Use window scroll for grouped virtuosos

src/modules/core/AppRoute.constants.ts

@@ -181,3 +181,5 @@ type ExtractStringPaths<T> = T extends { path: infer P }
     : ExtractChildRouteStringPaths<T>;
 
 export type StaticAppRoute = ExtractStringPaths<(typeof AppRoutes)[keyof typeof AppRoutes]>;
+
+export const GROUPED_VIRTUOSO_Z_INDEX = 2;

src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx

@@ -6,10 +6,19 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { GroupedVirtuoso } from 'react-virtuoso';
-import { ComponentProps } from 'react';
+import { ContextProp, GroupedVirtuoso, TopItemListProps } from 'react-virtuoso';
+import { ComponentProps, useMemo } from 'react';
+import Box from '@mui/material/Box';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
+const StickyVirtuosoHeaderWithOffset =
+    (topOffset: number) =>
+    ({ children, ...args }: TopItemListProps & ContextProp<unknown>) => (
+        <Box {...args} style={{ ...args.style, top: topOffset }}>
+            {children}
+        </Box>
+    );
+
 export const StyledGroupedVirtuoso = ({
     heightToSubtract = 0,
     style,
@@ -17,9 +26,19 @@ export const StyledGroupedVirtuoso = ({
 }: ComponentProps<typeof GroupedVirtuoso> & { heightToSubtract?: number }) => {
     const { appBarHeight, bottomBarHeight } = useNavBarContext();
 
+    const TopItemList = useMemo(
+        () => StickyVirtuosoHeaderWithOffset(appBarHeight + heightToSubtract),
+        [appBarHeight, heightToSubtract],
+    );
+
     return (
         <GroupedVirtuoso
+            useWindowScroll
             {...props}
+            components={{
+                TopItemList,
+                ...props.components,
+            }}
             style={{
                 ...style,
                 height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px - ${!bottomBarHeight ? 'env(safe-area-inset-bottom)' : '0px'})`,