refactor: replace VirtuosoMasonry with VirtuosoGrid in DnD grid component and update item rendering logic; adjust lineClamp to 1 in various card components

Author: kastov

src/shared/ui/virtualized-dnd-grid/virtualized-dnd-grid.shared.tsx

@@ -13,10 +13,11 @@ import {
 } from '@dnd-kit/core'
 import { arrayMove, rectSortingStrategy, SortableContext } from '@dnd-kit/sortable'
 import { restrictToWindowEdges } from '@dnd-kit/modifiers'
-import { VirtuosoMasonry } from '@virtuoso.dev/masonry'
 import { ReactNode, useEffect, useState } from 'react'
+import { VirtuosoGrid } from 'react-virtuoso'
 import { Box } from '@mantine/core'
 
+import { VirtualizedGridComponents } from './virtualized-grid-components'
 import classes from './virtualized-dnd-grid.module.css'
 
 interface VirtualizedDndGridProps<T extends { uuid: string }> {
@@ -33,7 +34,6 @@ interface VirtualizedDndGridProps<T extends { uuid: string }> {
 export function VirtualizedDndGrid<T extends { uuid: string }>(props: VirtualizedDndGridProps<T>) {
     const {
         items: initialItems,
-        columnCount,
         renderItem,
         renderDragOverlay,
         onReorder,
@@ -91,27 +91,24 @@ export function VirtualizedDndGrid<T extends { uuid: string }>(props: Virtualize
 
     const draggedItem = activeId ? items.find((item) => item.uuid === activeId) : null
 
-    const ItemWrapper: React.FC<{
-        context?: unknown
-        data: T
-        index: number
-    }> = ({ data, index }) => {
-        if (!data) return null
+    const itemContent = (index: number) => {
+        const item = items[index]
+        if (!item) return null
 
         return (
-            <div className={classes.itemWrapper} style={{ padding: '5px', width: '100%' }}>
-                {renderItem(data, index)}
+            <div className={classes.itemWrapper} style={{ width: '100%' }}>
+                {renderItem(item, index)}
             </div>
         )
     }
 
     if (!enableDnd) {
         return (
             <Box style={style}>
-                <VirtuosoMasonry
-                    columnCount={columnCount}
-                    data={items}
-                    ItemContent={ItemWrapper}
+                <VirtuosoGrid
+                    components={VirtualizedGridComponents}
+                    itemContent={itemContent}
+                    totalCount={items.length}
                     useWindowScroll={useWindowScroll}
                 />
             </Box>
@@ -129,10 +126,14 @@ export function VirtualizedDndGrid<T extends { uuid: string }>(props: Virtualize
         >
             <SortableContext items={items.map((item) => item.uuid)} strategy={rectSortingStrategy}>
                 <Box style={style}>
-                    <VirtuosoMasonry
-                        columnCount={columnCount}
-                        data={items}
-                        ItemContent={ItemWrapper}
+                    <VirtuosoGrid
+                        components={VirtualizedGridComponents}
+                        itemContent={itemContent}
+                        overscan={{
+                            main: 4,
+                            reverse: 4
+                        }}
+                        totalCount={items.length}
                         useWindowScroll={useWindowScroll}
                     />
                 </Box>

src/shared/ui/virtualized-dnd-grid/virtualized-grid-components.tsx

@@ -0,0 +1,31 @@
+import { SimpleGrid } from '@mantine/core'
+import { forwardRef } from 'react'
+
+export const VirtualizedGridComponents = {
+    List: forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
+        ({ style, children, ...props }, ref) => (
+            <SimpleGrid
+                {...props}
+                cols={{
+                    base: 1,
+                    '800px': 2,
+                    '1000px': 3,
+                    '1200px': 4,
+                    '1800px': 5,
+                    '2400px': 6,
+                    '3000px': 7
+                }}
+                ref={ref}
+                style={{
+                    ...style
+                }}
+                type="container"
+            >
+                {children}
+            </SimpleGrid>
+        )
+    ),
+    Item: ({ children, ...props }: React.HTMLProps<HTMLDivElement>) => (
+        <div {...props}>{children}</div>
+    )
+}

src/widgets/dashboard/config-profiles/config-profile-card/config-profile-card.widget.tsx

@@ -182,7 +182,7 @@ export function ConfigProfileCardWidget(props: IProps) {
                                     className={classes.title}
                                     ff="monospace"
                                     fw={700}
-                                    lineClamp={2}
+                                    lineClamp={1}
                                     size="lg"
                                     title={configProfile.name}
                                 >

src/widgets/dashboard/external-squads/external-squad-card/external-squad-card.widget.tsx

@@ -104,7 +104,7 @@ export function ExternalSquadCardWidget(props: IProps) {
                                     className={classes.title}
                                     ff="monospace"
                                     fw={700}
-                                    lineClamp={2}
+                                    lineClamp={1}
                                     size="lg"
                                     title={externalSquad.name}
                                 >

src/widgets/dashboard/external-squads/external-squads-drawer/external-squads.drawer.widget.tsx

@@ -100,7 +100,7 @@ export const ExternalSquadsDrawer = memo(() => {
                                         className={classes.title}
                                         ff="monospace"
                                         fw={700}
-                                        lineClamp={2}
+                                        lineClamp={1}
                                         size="lg"
                                         title={externalSquad.name}
                                     >

src/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.widget.tsx

@@ -98,7 +98,7 @@ export function InternalSquadCardWidget(props: IProps) {
                                     className={classes.title}
                                     ff="monospace"
                                     fw={700}
-                                    lineClamp={2}
+                                    lineClamp={1}
                                     size="lg"
                                     title={internalSquad.name}
                                 >

src/widgets/dashboard/templates/template-card/templates-card.widget.tsx

@@ -81,7 +81,7 @@ export function TemplatesCardWidget(props: IProps) {
                                     className={classes.title}
                                     ff="monospace"
                                     fw={700}
-                                    lineClamp={2}
+                                    lineClamp={1}
                                     size="lg"
                                     title={template.name}
                                 >