fix: some style

frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx

@@ -0,0 +1,44 @@
+import { ViewLayout } from '@/application/collab.type';
+import React, { useMemo } from 'react';
+import { ReactComponent as BoardSvg } from '@/assets/board.svg';
+import { ReactComponent as CalendarSvg } from '@/assets/calendar.svg';
+import { ReactComponent as DocumentSvg } from '@/assets/document.svg';
+import { ReactComponent as GridSvg } from '@/assets/grid.svg';
+
+export function ViewIcon({ layout, size }: { layout: ViewLayout; size: number | 'small' | 'medium' | 'large' }) {
+  const iconSize = useMemo(() => {
+    if (size === 'small') {
+      return 'h-4 w-4';
+    }
+
+    if (size === 'medium') {
+      return 'h-6 w-6';
+    }
+
+    if (size === 'large') {
+      return 'h-8 w-8';
+    }
+
+    return `h-${size} w-${size}`;
+  }, [size]);
+
+  if (layout === ViewLayout.Grid) {
+    return <GridSvg className={iconSize} />;
+  }
+
+  if (layout === ViewLayout.Board) {
+    return <BoardSvg className={iconSize} />;
+  }
+
+  if (layout === ViewLayout.Calendar) {
+    return <CalendarSvg className={iconSize} />;
+  }
+
+  if (layout === ViewLayout.Document) {
+    return <DocumentSvg className={iconSize} />;
+  }
+
+  return null;
+}
+
+export default ViewIcon;

frontend/appflowy_web_app/src/components/_shared/view-icon/index.ts

@@ -0,0 +1 @@
+export * from './ViewIcon';

frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx

@@ -1,9 +1,6 @@
-import { ReactComponent as DocumentSvg } from '$icons/16x/document.svg';
-import { ReactComponent as GridSvg } from '$icons/16x/grid.svg';
-import { ReactComponent as BoardSvg } from '$icons/16x/board.svg';
-import { ReactComponent as CalendarSvg } from '$icons/16x/date.svg';
 import { ViewLayout } from '@/application/collab.type';
 import { ViewMeta } from '@/application/db/tables/view_metas';
+import { ViewIcon } from '@/components/_shared/view-icon';
 import { useEditorContext } from '@/components/editor/EditorContext';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -33,21 +30,6 @@ function MentionPage({ pageId }: { pageId: string }) {
     return meta?.icon;
   }, [meta?.icon]);
 
-  const defaultIcon = useMemo(() => {
-    switch (meta?.layout) {
-      case ViewLayout.Document:
-        return <DocumentSvg />;
-      case ViewLayout.Grid:
-        return <GridSvg />;
-      case ViewLayout.Board:
-        return <BoardSvg />;
-      case ViewLayout.Calendar:
-        return <CalendarSvg />;
-      default:
-        return <DocumentSvg />;
-    }
-  }, [meta?.layout]);
-
   const { t } = useTranslation();
 
   return (
@@ -62,7 +44,9 @@ function MentionPage({ pageId }: { pageId: string }) {
         <span className={'mention-unpublished font-semibold text-text-caption'}>No Access</span>
       ) : (
         <>
-          <span className={'mention-icon icon'}>{icon?.value || defaultIcon}</span>
+          <span className={'mention-icon icon'}>
+            {icon?.value || <ViewIcon layout={meta?.layout || ViewLayout.Document} size={'small'} />}
+          </span>
 
           <span className={'mention-content'}>{meta?.name || t('menuAppHeader.defaultNewPageName')}</span>
         </>

frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx

@@ -1,42 +1,20 @@
-import { ReactComponent as BoardSvg } from '@/assets/board.svg';
-import { ReactComponent as CalendarSvg } from '@/assets/calendar.svg';
-import { ReactComponent as DocumentSvg } from '@/assets/document.svg';
-import { ReactComponent as GridSvg } from '@/assets/grid.svg';
 import { ViewLayout } from '@/application/collab.type';
 import { usePublishContext } from '@/application/publish';
 import { notify } from '@/components/_shared/notify';
+import { ViewIcon } from '@/components/_shared/view-icon';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const renderCrumbIcon = (icon: string) => {
-  if (Number(icon) === ViewLayout.Grid) {
-    return <GridSvg className={'h-4 w-4'} />;
-  }
-
-  if (Number(icon) === ViewLayout.Board) {
-    return <BoardSvg className={'h-4 w-4'} />;
-  }
-
-  if (Number(icon) === ViewLayout.Calendar) {
-    return <CalendarSvg className={'h-4 w-4'} />;
-  }
-
-  if (Number(icon) === ViewLayout.Document) {
-    return <DocumentSvg className={'h-4 w-4'} />;
-  }
-
-  return icon;
-};
-
 export interface Crumb {
   viewId: string;
   rowId?: string;
   name: string;
   icon: string;
+  layout: ViewLayout;
 }
 
 function BreadcrumbItem({ crumb, disableClick = false }: { crumb: Crumb; disableClick?: boolean }) {
-  const { viewId, icon, name } = crumb;
+  const { viewId, icon, name, layout } = crumb;
 
   const { t } = useTranslation();
   const onNavigateToView = usePublishContext()?.toView;
@@ -53,7 +31,7 @@ function BreadcrumbItem({ crumb, disableClick = false }: { crumb: Crumb; disable
         }
       }}
     >
-      <span className={'icon'}>{renderCrumbIcon(icon)}</span>
+      <span className={'icon'}>{icon || <ViewIcon layout={layout} size={'small'} />}</span>
       <span
         className={!disableClick ? 'max-w-[250px] truncate hover:text-text-title hover:underline' : 'flex-1 truncate'}
       >

frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx

@@ -36,7 +36,8 @@ export function PublishViewHeader({
       return {
         viewId: ancestor.view_id,
         name: ancestor.name,
-        icon: icon || String(viewMeta?.layout),
+        icon: icon,
+        layout: ancestor.layout,
       };
     });
   }, [viewMeta]);
@@ -64,7 +65,7 @@ export function PublishViewHeader({
         width: openDrawer ? `calc(100% - ${drawerWidth}px)` : '100%',
         transition: 'width 0.2s ease-in-out 0s',
       }}
-      className={'appflowy-top-bar flex h-[64px] px-5'}
+      className={'appflowy-top-bar flex h-[48px] px-5'}
     >
       <div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}>
         {!openDrawer && (

frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx

@@ -31,9 +31,9 @@ function OutlineDrawer({ open, width, onClose }: { open: boolean; width: number;
       autoFocus
     >
       <div className={'flex h-full flex-col'}>
-        <div className={'flex h-[64px] items-center justify-between p-4'}>
+        <div className={'flex h-[48px] items-center justify-between p-4'}>
           <div
-            className={'flex cursor-pointer items-center text-text-title'}
+            className={'flex cursor-pointer items-center gap-1 text-text-title'}
             onClick={() => {
               window.open('https://appflowy.io', '_blank');
             }}

frontend/appflowy_web_app/src/components/publish/outline/OutlineItem.tsx

@@ -1,7 +1,7 @@
 import { PublishViewInfo, ViewLayout } from '@/application/collab.type';
 import { PublishContext } from '@/application/publish';
 import { notify } from '@/components/_shared/notify';
-import { renderCrumbIcon } from '@/components/publish/header/BreadcrumbItem';
+import { ViewIcon } from '@/components/_shared/view-icon';
 import React, { useCallback, useContext } from 'react';
 import { ReactComponent as ChevronDownIcon } from '@/assets/chevron_down.svg';
 import { useTranslation } from 'react-i18next';
@@ -35,6 +35,8 @@ function OutlineItem({ view }: { view: PublishViewInfo }) {
 
   const navigateToView = useContext(PublishContext)?.toView;
   const renderItem = (item: PublishViewInfo) => {
+    const { icon, layout, name, view_id } = item;
+
     return (
       <div className={'flex h-fit w-full flex-col gap-2'}>
         <div
@@ -46,15 +48,15 @@ function OutlineItem({ view }: { view: PublishViewInfo }) {
           <div
             onClick={async () => {
               try {
-                await navigateToView?.(item.view_id);
+                await navigateToView?.(view_id);
               } catch (e) {
                 notify.error(t('publish.hasNotBeenPublished'));
               }
             }}
             className={'flex flex-1 cursor-pointer items-center gap-1 overflow-hidden'}
           >
-            <div className={'icon'}>{renderCrumbIcon(item.icon?.value || String(item.layout))}</div>
+            <div className={'icon'}>{icon?.value || <ViewIcon layout={layout} size={'small'} />}</div>
-            <div className={'flex-1 truncate'}>{item.name}</div>
+            <div className={'flex-1 truncate'}>{name}</div>
           </div>
         </div>
       </div>

frontend/appflowy_web_app/src/components/publish/outline/OutlinePopover.tsx

@@ -30,7 +30,7 @@ export function OutlinePopover({
       <div
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className={'flex h-fit max-h-[500px] w-[268px] flex-col overflow-y-auto p-2'}
+        className={'flex h-fit max-h-[500px] w-[268px] flex-col overflow-y-auto overflow-x-hidden p-2'}
       >
         <Outline viewMeta={viewMeta} />
         <div
@@ -44,17 +44,14 @@ export function OutlinePopover({
         >
           {Boolean(viewMeta?.child_views?.length) && <Divider className={'w-full'} />}
 
-          <div className={'flex w-full items-center justify-center gap-4 text-sm'}>
+          <div
-            <div className={'text-text-caption'}>{t('publish.createdWith')}</div>
+            onClick={() => {
-            <div
+              window.open('https://appflowy.io', '_blank');
-              className={'flex cursor-pointer items-center justify-center text-text-title'}
+            }}
-              onClick={() => {
+            className={'flex w-full cursor-pointer items-center justify-center text-sm text-text-title opacity-50'}
-                window.open('https://appflowy.io', '_blank');
+          >
-              }}
+            <Logo className={'h-4 w-4'} />
-            >
+            <AppflowyLogo className={'w-20'} />
-              <Logo className={'h-4 w-4'} />
-              <AppflowyLogo className={'w-20'} />
-            </div>
           </div>
         </div>
       </div>

frontend/appflowy_web_app/src/components/publish/outline/SearchInput.tsx

@@ -21,7 +21,6 @@ function SearchInput({ onSearch }: { onSearch: (value: string) => void }) {
 
   return (
     <OutlinedInput
-      autoFocus
       spellCheck={false}
       startAdornment={
         <InputAdornment className={'text-text-caption'} position='start'>

frontend/appflowy_web_app/src/components/view-meta/ViewCover.tsx

@@ -22,7 +22,7 @@ function ViewCover({ coverValue, coverType }: { coverValue?: string; coverType?:
   }
 
   return (
-    <div className={'relative flex h-[198px] w-full max-sm:h-[180px]'}>
+    <div className={'relative flex h-[208px] w-full max-sm:h-[180px]'}>
       {coverType === 'color' && renderCoverColor(coverValue)}
       {(coverType === 'custom' || coverType === 'built_in') && renderCoverImage(coverValue)}
     </div>