From c07158935df877f148ea2f835b34e89d43e4041b Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Fri, 28 Jun 2024 11:53:37 +0800
Subject: [PATCH] fix: some style

---
 .../components/_shared/view-icon/ViewIcon.tsx | 44 +++++++++++++++++++
 .../src/components/_shared/view-icon/index.ts |  1 +
 .../components/leaf/mention/MentionPage.tsx   | 24 ++--------
 .../publish/header/BreadcrumbItem.tsx         | 30 ++-----------
 .../publish/header/PublishViewHeader.tsx      |  5 ++-
 .../publish/outline/OutlineDrawer.tsx         |  4 +-
 .../publish/outline/OutlineItem.tsx           | 10 +++--
 .../publish/outline/OutlinePopover.tsx        | 21 ++++-----
 .../publish/outline/SearchInput.tsx           |  1 -
 .../src/components/view-meta/ViewCover.tsx    |  2 +-
 10 files changed, 74 insertions(+), 68 deletions(-)
 create mode 100644 frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx
 create mode 100644 frontend/appflowy_web_app/src/components/_shared/view-icon/index.ts

diff --git a/frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx b/frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx
new file mode 100644
index 0000000000..4a802a174d
--- /dev/null
+++ b/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;
diff --git a/frontend/appflowy_web_app/src/components/_shared/view-icon/index.ts b/frontend/appflowy_web_app/src/components/_shared/view-icon/index.ts
new file mode 100644
index 0000000000..1db8ea5807
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/_shared/view-icon/index.ts
@@ -0,0 +1 @@
+export * from './ViewIcon';
diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx
index de3d0b4f10..340af53dc1 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx
+++ b/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>
         </>
diff --git a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx
index 9c88c5b121..9e0e87f82c 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx
+++ b/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'}
       >
diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
index dab2192b83..40933eda75 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
+++ b/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 && (
diff --git a/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx b/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx
index 4f9f645d99..9c8fb6e4b3 100644
--- a/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx
+++ b/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');
             }}
diff --git a/frontend/appflowy_web_app/src/components/publish/outline/OutlineItem.tsx b/frontend/appflowy_web_app/src/components/publish/outline/OutlineItem.tsx
index caf71bfb75..7b9f1d7950 100644
--- a/frontend/appflowy_web_app/src/components/publish/outline/OutlineItem.tsx
+++ b/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={'flex-1 truncate'}>{item.name}</div>
+            <div className={'icon'}>{icon?.value || <ViewIcon layout={layout} size={'small'} />}</div>
+            <div className={'flex-1 truncate'}>{name}</div>
           </div>
         </div>
       </div>
diff --git a/frontend/appflowy_web_app/src/components/publish/outline/OutlinePopover.tsx b/frontend/appflowy_web_app/src/components/publish/outline/OutlinePopover.tsx
index a64f2084ba..0c9cf0197c 100644
--- a/frontend/appflowy_web_app/src/components/publish/outline/OutlinePopover.tsx
+++ b/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 className={'text-text-caption'}>{t('publish.createdWith')}</div>
-            <div
-              className={'flex cursor-pointer items-center justify-center text-text-title'}
-              onClick={() => {
-                window.open('https://appflowy.io', '_blank');
-              }}
-            >
-              <Logo className={'h-4 w-4'} />
-              <AppflowyLogo className={'w-20'} />
-            </div>
+          <div
+            onClick={() => {
+              window.open('https://appflowy.io', '_blank');
+            }}
+            className={'flex w-full cursor-pointer items-center justify-center text-sm text-text-title opacity-50'}
+          >
+            <Logo className={'h-4 w-4'} />
+            <AppflowyLogo className={'w-20'} />
           </div>
         </div>
       </div>
diff --git a/frontend/appflowy_web_app/src/components/publish/outline/SearchInput.tsx b/frontend/appflowy_web_app/src/components/publish/outline/SearchInput.tsx
index 5f83b758d6..f3dbadc906 100644
--- a/frontend/appflowy_web_app/src/components/publish/outline/SearchInput.tsx
+++ b/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'>
diff --git a/frontend/appflowy_web_app/src/components/view-meta/ViewCover.tsx b/frontend/appflowy_web_app/src/components/view-meta/ViewCover.tsx
index 9221c8c3b6..df7c495bb3 100644
--- a/frontend/appflowy_web_app/src/components/view-meta/ViewCover.tsx
+++ b/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>