feat(mobile): new docs list for mobile (#12329)

close AF-2514

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

- **New Features**
  - Enhanced document explorer on mobile with live updates, responsive masonry layout, and improved empty state handling for all documents, collections, and tags.
  - Added customization for card height and masonry item width in document explorer views.
  - Extended layout components to support additional flexbox styling options for improved layout flexibility.

- **Bug Fixes**
  - Improved flexibility in layout components by supporting additional flexbox styling options.

- **Refactor**
  - Replaced older static document list and menu components with a unified, context-driven explorer for a more dynamic and interactive experience.
  - Removed obsolete CSS and component files related to the previous document list and menu implementations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/components/explorer/docs-view/docs-list.tsx

@@ -69,15 +69,15 @@ const GroupHeader = memo(function GroupHeader({
   return header;
 });
 
-const calcCardHeightById = (id: string) => {
+const calcCardHeightById = (id: string, base = 250, scale = 10) => {
   if (!id) {
-    return 250;
+    return base;
   }
   const max = 5;
   const min = 1;
   const code = id.charCodeAt(0);
   const value = Math.floor((code % (max - min)) + min);
-  return 250 + value * 10;
+  return base + value * scale;
 };
 
 export const DocListItemComponent = memo(function DocListItemComponent({
@@ -93,9 +93,15 @@ export const DocListItemComponent = memo(function DocListItemComponent({
 export const DocsExplorer = ({
   className,
   disableMultiDelete,
+  masonryItemWidthMin,
+  heightBase,
+  heightScale,
 }: {
   className?: string;
   disableMultiDelete?: boolean;
+  masonryItemWidthMin?: number;
+  heightBase?: number;
+  heightScale?: number;
 }) => {
   const t = useI18n();
   const contextValue = useContext(DocExplorerContext);
@@ -126,7 +132,7 @@ export const DocsExplorer = ({
                 ? 42
                 : view === 'grid'
                   ? 280
-                  : calcCardHeightById(docId),
+                  : calcCardHeightById(docId, heightBase, heightScale),
             'data-view': view,
             className: styles.docItem,
           };
@@ -134,7 +140,7 @@ export const DocsExplorer = ({
       } satisfies MasonryGroup;
     });
     return items;
-  }, [groupBy, groups, view]);
+  }, [groupBy, groups, heightBase, heightScale, view]);
 
   const handleCloseFloatingToolbar = useCallback(() => {
     contextValue.selectMode$?.next(false);
@@ -206,7 +212,7 @@ export const DocsExplorer = ({
         groupsGap={12}
         groupHeaderGapWithItems={12}
         columns={view === 'list' ? 1 : undefined}
-        itemWidthMin={220}
+        itemWidthMin={masonryItemWidthMin ?? 220}
         preloadHeight={100}
         itemWidth={'stretch'}
         virtualScroll