feat(core): card view drag handle for doc explorer (#12431)

close AF-2624, AF-2628, AF-2581

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a draggable handle to document cards in the explorer, visible on hover in card view.
  - Added an option to remove grouping in the display menu.
  - Added contextual tooltips for user avatars indicating creation or last update.
  - Enabled optional tooltips on public user labels.
  - Extended dropdown buttons to accept custom styling classes.
  - Added a new masonry story showcasing item heights determined by ratios.

- **Style**
  - Enhanced drag handle appearance and visibility for card view items.
  - Replaced static shadows with theme-aware, smoothly transitioning shadows on card items.
  - Adjusted spacing between items in the document explorer for improved layout, with increased horizontal and (in card view) vertical gaps.
  - Reduced top padding in workspace page styles.
  - Added new button background style for secondary buttons.

- **Bug Fixes**
  - Removed duplicate internal property declarations to eliminate redundancy.

- **Refactor**
  - Simplified layout props by removing fixed height parameters in multiple components.
  - Updated masonry layout logic to support ratio-based item sizing alongside fixed heights.
  - Removed randomized skeleton loading placeholders, replacing them with fixed or no placeholders.
  - Refined masonry component typings and scrollbar placement for improved styling and layout.
  - Improved selection logic to activate selection mode when selecting all documents.

- **Localization**
  - Added new translation keys for grouping removal and user attribution tooltips.
  - Updated English locale with new strings for "Remove group" and user-created/updated tooltips.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/ui/masonry/utils.ts

@@ -82,6 +82,7 @@ export const calcLayout = (
 
   groups.forEach((group, index) => {
     const heightStack = Array.from({ length: columns }, () => 0);
+    const ratioStack = Array.from({ length: columns }, () => 0);
     if (index !== 0) {
       finalHeight += groupsGap;
     }
@@ -101,24 +102,52 @@ export const calcLayout = (
       return;
     }
 
-    finalHeight += groupHeaderLayout.h + groupHeaderGapWithItems;
+    finalHeight +=
+      groupHeaderLayout.h +
+      // if group header is empty, don't add gap
+      (groupHeaderLayout.h > 0 ? groupHeaderGapWithItems : 0);
     // calculate group items
     group.items.forEach(item => {
       const itemId = group.id ? `${group.id}:${item.id}` : item.id;
-      const minHeight = Math.min(...heightStack);
-      const minHeightIndex = heightStack.indexOf(minHeight);
-      const hasGap = heightStack[minHeightIndex] ? gapY : 0;
-      const x = minHeightIndex * (width + gapX) + paddingX;
-      const y = finalHeight + minHeight + hasGap;
+      const ratioMode = 'ratio' in item;
+      const height = ratioMode ? item.ratio * width : item.height;
 
-      heightStack[minHeightIndex] += item.height + hasGap;
-      layout.set(itemId, {
-        type: 'item',
-        x,
-        y,
-        w: width,
-        h: item.height,
-      });
+      if (ratioMode) {
+        const minRatio = Math.min(...ratioStack);
+        const minRatioIndex = ratioStack.indexOf(minRatio);
+        const minHeight = heightStack[minRatioIndex];
+        const hasGap = heightStack[minRatioIndex] ? gapY : 0;
+        const x = minRatioIndex * (width + gapX) + paddingX;
+        const y = finalHeight + minHeight + hasGap;
+
+        ratioStack[minRatioIndex] += item.ratio * 10000;
+        heightStack[minRatioIndex] += height + hasGap;
+        layout.set(itemId, {
+          type: 'item',
+          x,
+          y,
+          w: width,
+          h: height,
+        });
+      } else {
+        const minHeight = Math.min(...heightStack);
+        const minHeightIndex = heightStack.indexOf(minHeight);
+        const hasGap = heightStack[minHeightIndex] ? gapY : 0;
+        const x = minHeightIndex * (width + gapX) + paddingX;
+        const y = finalHeight + minHeight + hasGap;
+
+        const ratio = height / width;
+        heightStack[minHeightIndex] += height + hasGap;
+        ratioStack[minHeightIndex] += ratio * 10000;
+
+        layout.set(itemId, {
+          type: 'item',
+          x,
+          y,
+          w: width,
+          h: height,
+        });
+      }
     });
 
     const groupHeight = Math.max(...heightStack) + paddingY;