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/button/dropdown-button.tsx

@@ -1,4 +1,5 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
+import clsx from 'clsx';
 import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
 import { forwardRef } from 'react';
 
@@ -12,28 +13,33 @@ type DropdownButtonProps = {
 export const DropdownButton = forwardRef<
   HTMLButtonElement,
   DropdownButtonProps
->(({ onClickDropDown, children, size = 'default', ...props }, ref) => {
-  const handleClickDropDown: MouseEventHandler<HTMLElement> = e => {
-    e.stopPropagation();
-    onClickDropDown?.(e);
-  };
-  return (
-    <button
-      ref={ref}
-      data-size={size}
-      className={styles.dropdownBtn}
-      {...props}
-    >
-      <span>{children}</span>
-      <span className={styles.divider} />
-      <span className={styles.dropdownWrapper} onClick={handleClickDropDown}>
-        <ArrowDownSmallIcon
-          className={styles.dropdownIcon}
-          width={16}
-          height={16}
-        />
-      </span>
-    </button>
-  );
-});
+>(
+  (
+    { onClickDropDown, children, size = 'default', className, ...props },
+    ref
+  ) => {
+    const handleClickDropDown: MouseEventHandler<HTMLElement> = e => {
+      e.stopPropagation();
+      onClickDropDown?.(e);
+    };
+    return (
+      <button
+        ref={ref}
+        data-size={size}
+        className={clsx(styles.dropdownBtn, className)}
+        {...props}
+      >
+        <span>{children}</span>
+        <span className={styles.divider} />
+        <span className={styles.dropdownWrapper} onClick={handleClickDropDown}>
+          <ArrowDownSmallIcon
+            className={styles.dropdownIcon}
+            width={16}
+            height={16}
+          />
+        </span>
+      </button>
+    );
+  }
+);
 DropdownButton.displayName = 'DropdownButton';