feat(mobile): all docs page ui impl (#7976)

packages/frontend/mobile/src/components/app-tabs/index.tsx

@@ -4,6 +4,7 @@ import {
 } from '@affine/core/modules/workbench';
 import { AllDocsIcon, SearchIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
+import type { Location } from 'react-router-dom';
 
 import { HomeIcon } from './home-icon';
 import * as styles from './styles.css';
@@ -12,6 +13,7 @@ interface Route {
   to: string;
   Icon: React.FC;
   LinkComponent?: React.FC;
+  isActive?: (location: Location) => boolean;
 }
 
 const routes: Route[] = [
@@ -22,6 +24,10 @@ const routes: Route[] = [
   {
     to: '/all',
     Icon: AllDocsIcon,
+    isActive: location =>
+      location.pathname === '/all' ||
+      location.pathname.startsWith('/collection') ||
+      location.pathname.startsWith('/tag'),
   },
   {
     to: '/search',
@@ -37,9 +43,13 @@ export const AppTabs = () => {
     <ul className={styles.appTabs} id="app-tabs">
       {routes.map(route => {
         const Link = route.LinkComponent || WorkbenchLink;
+
+        const isActive = route.isActive
+          ? route.isActive(location)
+          : location.pathname === route.to;
         return (
           <Link
-            data-active={location.pathname === route.to}
+            data-active={isActive}
             to={route.to}
             key={route.to}
             className={styles.tabItem}

packages/frontend/mobile/src/components/app-tabs/styles.css.ts

@@ -18,6 +18,7 @@ export const appTabs = style({
 
   position: 'fixed',
   bottom: 0,
+  zIndex: 1,
 });
 export const tabItem = style({
   display: 'flex',

packages/frontend/mobile/src/components/doc-card/index.tsx

@@ -16,10 +16,11 @@ import { DocCardTags } from './tag';
 
 export interface DocCardProps extends Omit<WorkbenchLinkProps, 'to'> {
   meta: DocMeta;
+  showTags?: boolean;
 }
 
 export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
-  function DocCard({ meta, className, ...attrs }, ref) {
+  function DocCard({ showTags = true, meta, className, ...attrs }, ref) {
     const favAdapter = useService(CompatibleFavoriteItemsAdapter);
     const workspace = useService(WorkspaceService).workspace;
 
@@ -54,7 +55,7 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
             emptyFallback={<div className={styles.contentEmpty}>Empty</div>}
           />
         </main>
-        <DocCardTags docId={meta.id} rows={2} />
+        {showTags ? <DocCardTags docId={meta.id} rows={2} /> : null}
       </WorkbenchLink>
     );
   }

packages/frontend/mobile/src/components/doc-card/tag.tsx

@@ -122,7 +122,7 @@ const DocCardTagsRenderer = ({ tags, rows }: { tags: Tag[]; rows: number }) => {
       {tags.map(tag => (
         <DocCardTag key={tag.id} tag={tag} />
       ))}
-      {/* TODO: more icon */}
+      {/* TODO(@CatsJuice): more icon */}
       {/* <MoreHorizontalIcon /> */}
     </ul>
   );

packages/frontend/mobile/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './app-tabs';
+export * from './doc-card';
 export * from './page-header';
 export * from './search-button';
 export * from './workspace-selector';

packages/frontend/mobile/src/components/page-header/styles.css.ts

@@ -1,13 +1,19 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
   width: '100%',
   minHeight: 44,
   padding: '0 6px',
+  paddingTop: 16,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  position: 'relative',
+
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
+  backgroundColor: cssVarV2('layer/background/secondary'),
 });
 export const content = style({
   selectors: {
@@ -15,6 +21,11 @@ export const content = style({
       position: 'absolute',
       left: '50%',
       transform: 'translateX(-50%)',
+      width: 'fit-content',
+      maxWidth: 'calc(100% - 12px - 88px - 16px)',
+      display: 'flex',
+      justifyContent: 'center',
+      pointerEvents: 'none',
     },
     '&:not(.center)': {
       width: 0,