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/i18n/src/i18n.gen.ts

@@ -2189,6 +2189,10 @@ export function useAFFiNEI18N(): {
       * `Grouping`
       */
     ["com.affine.explorer.display-menu.grouping"](): string;
+    /**
+      * `Remove group`
+      */
+    ["com.affine.explorer.display-menu.grouping.remove"](): string;
     /**
       * `Ordering`
       */
@@ -3141,6 +3145,18 @@ export function useAFFiNEI18N(): {
       * `Mark this doc as a template, which can be used to create new docs.`
       */
     ["com.affine.page-properties.property.template.tooltips"](): string;
+    /**
+      * `Created by {{userName}}`
+      */
+    ["com.affine.page-properties.property.createdBy.tip"](options: {
+        readonly userName: string;
+    }): string;
+    /**
+      * `Last edited by {{userName}}`
+      */
+    ["com.affine.page-properties.property.updatedBy.tip"](options: {
+        readonly userName: string;
+    }): string;
     /**
       * `Properties`
       */

packages/frontend/i18n/src/resources/en.json

@@ -546,6 +546,7 @@
   "com.affine.filterList.button.add": "Add filter",
   "com.affine.explorer.display-menu.button": "Display",
   "com.affine.explorer.display-menu.grouping": "Grouping",
+  "com.affine.explorer.display-menu.grouping.remove": "Remove group",
   "com.affine.explorer.display-menu.ordering": "Ordering",
   "com.affine.header.mode-switch.page": "View in Page mode",
   "com.affine.header.mode-switch.edgeless": "View in Edgeless Canvas",
@@ -780,6 +781,8 @@
   "com.affine.page-properties.property.edgelessTheme.tooltips": "Select the doc theme from Light, Dark, or System. Useful for precise control over content viewing style.",
   "com.affine.page-properties.property.pageWidth.tooltips": "Control the width of this page to fit content display needs.",
   "com.affine.page-properties.property.template.tooltips": "Mark this doc as a template, which can be used to create new docs.",
+  "com.affine.page-properties.property.createdBy.tip": "Created by {{userName}}",
+  "com.affine.page-properties.property.updatedBy.tip": "Last edited by {{userName}}",
   "com.affine.propertySidebar.property-list.section": "Properties",
   "com.affine.propertySidebar.add-more.section": "Add more properties",
   "com.affine.page-properties.settings.title": "customize properties",