feat(mobile): mobile index page UI (#7959)

packages/frontend/core/src/modules/explorer/entities/explore-section.ts

@@ -5,6 +5,7 @@ import { map } from 'rxjs';
 import type { CollapsibleSectionName } from '../types';
 
 const DEFAULT_COLLAPSABLE_STATE: Record<CollapsibleSectionName, boolean> = {
+  recent: true,
   favorites: false,
   organize: false,
   collections: true,

packages/frontend/core/src/modules/explorer/index.ts

@@ -8,6 +8,7 @@ import { ExplorerSection } from './entities/explore-section';
 import { ExplorerService } from './services/explorer';
 export { ExplorerService } from './services/explorer';
 export type { CollapsibleSectionName } from './types';
+export { CollapsibleSection } from './views/layouts/collapsible-section';
 export { ExplorerMobileContext } from './views/mobile.context';
 export { ExplorerCollections } from './views/sections/collections';
 export { ExplorerFavorites } from './views/sections/favorites';

packages/frontend/core/src/modules/explorer/services/explorer.ts

@@ -4,6 +4,7 @@ import { ExplorerSection } from '../entities/explore-section';
 import type { CollapsibleSectionName } from '../types';
 
 const allSectionName: Array<CollapsibleSectionName> = [
+  'recent', // mobile only
   'favorites',
   'organize',
   'collections',

packages/frontend/core/src/modules/explorer/types.ts

@@ -1,4 +1,5 @@
 export type CollapsibleSectionName =
+  | 'recent'
   | 'collections'
   | 'favorites'
   | 'tags'

packages/frontend/core/src/modules/explorer/views/tree/node.css.ts

@@ -77,7 +77,7 @@ export const postfix = style({
 });
 export const iconContainer = style({
   display: 'flex',
-  alignContent: 'center',
+  justifyContent: 'center',
   alignItems: 'center',
   width: 20,
   height: 20,

packages/frontend/core/src/modules/workbench/index.ts

@@ -1,9 +1,11 @@
 export { Workbench } from './entities/workbench';
 export { ViewScope } from './scopes/view';
 export { WorkbenchService } from './services/workbench';
+export { useBindWorkbenchToBrowserRouter } from './view/browser-adapter';
 export { useIsActiveView } from './view/use-is-active-view';
 export { ViewBody, ViewHeader, ViewSidebarTab } from './view/view-islands';
 export { ViewIcon, ViewTitle } from './view/view-meta';
+export type { WorkbenchLinkProps } from './view/workbench-link';
 export { WorkbenchLink } from './view/workbench-link';
 export { WorkbenchRoot } from './view/workbench-root';
 

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -10,56 +10,57 @@ import { forwardRef, type MouseEvent } from 'react';
 
 import { WorkbenchService } from '../services/workbench';
 
-export const WorkbenchLink = forwardRef<
-  HTMLAnchorElement,
-  React.PropsWithChildren<
-    {
-      to: To;
-      onClick?: (e: MouseEvent) => void;
-    } & React.HTMLProps<HTMLAnchorElement>
-  >
->(function WorkbenchLink({ to, onClick, ...other }, ref) {
-  const { featureFlagService, workbenchService } = useServices({
-    FeatureFlagService,
-    WorkbenchService,
-  });
-  const enableMultiView = useLiveData(
-    featureFlagService.flags.enable_multi_view.$
-  );
-  const workbench = workbenchService.workbench;
-  const basename = useLiveData(workbench.basename$);
-  const link =
-    basename +
-    (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
-  const handleClick = useCatchEventCallback(
-    async (event: React.MouseEvent<HTMLAnchorElement>) => {
-      onClick?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      const at = (() => {
-        if (isNewTabTrigger(event)) {
-          return event.altKey && enableMultiView && environment.isDesktop
-            ? 'tail'
-            : 'new-tab';
-        }
-        return 'active';
-      })();
-      workbench.open(to, { at });
-      event.preventDefault();
-    },
-    [enableMultiView, onClick, to, workbench]
-  );
+export type WorkbenchLinkProps = React.PropsWithChildren<
+  {
+    to: To;
+    onClick?: (e: MouseEvent) => void;
+  } & React.HTMLProps<HTMLAnchorElement>
+>;
 
-  // eslint suspicious runtime error
-  // eslint-disable-next-line react/no-danger-with-children
-  return (
-    <a
-      {...other}
-      ref={ref}
-      href={link}
-      onClick={handleClick}
-      onAuxClick={handleClick}
-    />
-  );
-});
+export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
+  function WorkbenchLink({ to, onClick, ...other }, ref) {
+    const { featureFlagService, workbenchService } = useServices({
+      FeatureFlagService,
+      WorkbenchService,
+    });
+    const enableMultiView = useLiveData(
+      featureFlagService.flags.enable_multi_view.$
+    );
+    const workbench = workbenchService.workbench;
+    const basename = useLiveData(workbench.basename$);
+    const link =
+      basename +
+      (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
+    const handleClick = useCatchEventCallback(
+      async (event: React.MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        const at = (() => {
+          if (isNewTabTrigger(event)) {
+            return event.altKey && enableMultiView && environment.isDesktop
+              ? 'tail'
+              : 'new-tab';
+          }
+          return 'active';
+        })();
+        workbench.open(to, { at });
+        event.preventDefault();
+      },
+      [enableMultiView, onClick, to, workbench]
+    );
+
+    // eslint suspicious runtime error
+    // eslint-disable-next-line react/no-danger-with-children
+    return (
+      <a
+        {...other}
+        ref={ref}
+        href={link}
+        onClick={handleClick}
+        onAuxClick={handleClick}
+      />
+    );
+  }
+);