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/core/src/modules/cloud/views/public-user.tsx

@@ -1,8 +1,8 @@
-import { Avatar } from '@affine/component';
+import { Avatar, Tooltip } from '@affine/component';
 import { useCurrentServerService } from '@affine/core/components/providers/current-server-scope';
 import { useI18n } from '@affine/i18n';
 import { useLiveData } from '@toeverything/infra';
-import { useLayoutEffect, useMemo } from 'react';
+import { type ComponentType, useLayoutEffect, useMemo } from 'react';
 
 import { PublicUserService } from '../services/public-user';
 import * as styles from './public-user.css';
@@ -11,10 +11,12 @@ export const PublicUserLabel = ({
   id,
   size = 20,
   showName = true,
+  tooltip: NameTip,
 }: {
   id: string;
   size?: number;
   showName?: boolean;
+  tooltip?: ComponentType<{ userName: string }>;
 }) => {
   const serverService = useCurrentServerService();
   const publicUser = useMemo(() => {
@@ -50,15 +52,23 @@ export const PublicUserLabel = ({
   }
 
   return (
-    <span className={styles.publicUserLabel}>
-      <Avatar
-        url={user?.avatar}
-        name={user?.name ?? ''}
-        size={size}
-        className={styles.publicUserLabelAvatar}
-        data-show-name={showName}
-      />
-      {showName && user?.name}
-    </span>
+    <Tooltip
+      content={
+        NameTip ? (
+          <NameTip userName={user?.name || t['Unknown User']()} />
+        ) : null
+      }
+    >
+      <span className={styles.publicUserLabel}>
+        <Avatar
+          url={user?.avatar}
+          name={user?.name ?? ''}
+          size={size}
+          className={styles.publicUserLabelAvatar}
+          data-show-name={showName}
+        />
+        {showName && user?.name}
+      </span>
+    </Tooltip>
   );
 };