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/masonry.tsx

@@ -286,7 +286,6 @@ export const Masonry = ({
         })}
         <div data-masonry-placeholder style={{ height }} />
       </Scrollable.Viewport>
-      <Scrollable.Scrollbar />
       {stickyGroup ? (
         <div
           className={clsx(styles.stickyGroupHeader, stickyGroup.className)}
@@ -310,16 +309,16 @@ export const Masonry = ({
           )}
         </div>
       ) : null}
+      <Scrollable.Scrollbar className={styles.scrollbar} />
     </Scrollable.Root>
   );
 };
 
-interface MasonryItemProps
-  extends MasonryItem,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'height'> {
-  locateMode?: 'transform' | 'leftTop' | 'transform3d';
-  xywh?: MasonryItemXYWH;
-}
+type MasonryItemProps = MasonryItem &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'height'> & {
+    locateMode?: 'transform' | 'leftTop' | 'transform3d';
+    xywh?: MasonryItemXYWH;
+  };
 
 const MasonryGroupHeader = memo(function MasonryGroupHeader({
   id,
@@ -330,7 +329,6 @@ const MasonryGroupHeader = memo(function MasonryGroupHeader({
   groupId,
   itemCount,
   collapsed,
-  height,
   paddingX,
   ...props
 }: Omit<MasonryItemProps, 'Component'> & {
@@ -356,7 +354,6 @@ const MasonryGroupHeader = memo(function MasonryGroupHeader({
   return (
     <MasonryItem
       id={id}
-      height={height}
       style={{
         padding: `0 ${paddingX}px`,
         height: '100%',
@@ -404,7 +401,7 @@ const MasonryItem = memo(function MasonryItem({
   className,
   style: styleProp,
   ...props
-}: MasonryItemProps) {
+}: Omit<MasonryItemProps, 'height' | 'ratio'>) {
   const style = useMemo(() => {
     if (!xywh) return { display: 'none' };