Merge branch 'feat/filesystem_and_search' of github.com:toeverything/AFFiNE into feat/filesystem_and_search

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -16,7 +16,9 @@ import {
 } from './icons';
 import { Tooltip } from '@/ui/tooltip';
 import Slide from '@mui/material/Slide';
-import { useEditor } from '@/providers/editor-provider';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+import { useAppState } from '@/providers/app-state-provider';
+import useHistoryUpdated from '@/hooks/use-history-update';
 
 const toolbarList1 = [
   {
@@ -95,7 +97,8 @@ const toolbarList2 = [
 const UndoRedo = () => {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  const { onHistoryUpdated, page } = useEditor();
+  const { currentPage } = useAppState();
+  const onHistoryUpdated = useHistoryUpdated();
 
   useEffect(() => {
     onHistoryUpdated(page => {
@@ -110,7 +113,7 @@ const UndoRedo = () => {
         <StyledToolbarItem
           disable={!canUndo}
           onClick={() => {
-            page?.undo();
+            currentPage?.undo();
           }}
         >
           <UndoIcon />
@@ -120,7 +123,7 @@ const UndoRedo = () => {
         <StyledToolbarItem
           disable={!canRedo}
           onClick={() => {
-            page?.redo();
+            currentPage?.redo();
           }}
         >
           <RedoIcon />
@@ -131,7 +134,7 @@ const UndoRedo = () => {
 };
 
 export const EdgelessToolbar = () => {
-  const { mode } = useEditor();
+  const { mode } = useCurrentPageMeta() || {};
 
   return (
     <Slide

packages/app/src/components/editor-mode-switch/index.tsx

@@ -13,8 +13,8 @@ import type {
 } from './type';
 import { useTheme } from '@/providers/themeProvider';
 import { EdgelessIcon, PaperIcon } from './icons';
-import { useEditor } from '@/providers/editor-provider';
-import { useAppState } from '@/providers/app-state-provider/context';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+import { usePageHelper } from '@/hooks/use-page-helper';
 
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
@@ -67,9 +67,8 @@ export const EditorModeSwitch = ({
   style = {},
 }: AnimateRadioProps) => {
   const { mode: themeMode } = useTheme();
-  const { getPageMeta, currentPage } = useAppState();
-  const { mode, setMode } = useEditor();
-  const pageMeta = currentPage?.pageId ? getPageMeta(currentPage.pageId) : null;
+  const { changePageMode } = usePageHelper();
+  const { trash, mode = 'page', id = '' } = useCurrentPageMeta() || {};
 
   const modifyRadioItemStatus = (): RadioItemStatus => {
     return {
@@ -103,7 +102,7 @@ export const EditorModeSwitch = ({
       data-testid="editor-mode-switcher"
       shrink={!isHover}
       style={style}
-      disabled={!!pageMeta?.trash}
+      disabled={!!trash}
     >
       <AnimateRadioItem
         isLeft={true}
@@ -112,7 +111,7 @@ export const EditorModeSwitch = ({
         active={mode === 'page'}
         status={radioItemStatus.left}
         onClick={() => {
-          setMode('page');
+          changePageMode(id, 'page');
         }}
         onMouseEnter={() => {
           setRadioItemStatus({
@@ -132,7 +131,7 @@ export const EditorModeSwitch = ({
         active={mode === 'edgeless'}
         status={radioItemStatus.right}
         onClick={() => {
-          setMode('edgeless');
+          changePageMode(id, 'edgeless');
         }}
         onMouseEnter={() => {
           setRadioItemStatus({

packages/app/src/components/header/editor-header.tsx

@@ -6,18 +6,19 @@ import {
   StyledTitleWrapper,
 } from './styles';
 import { Content } from '@/ui/layout';
-import { useEditor } from '@/providers/editor-provider';
 import { useAppState } from '@/providers/app-state-provider/context';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import QuickSearchButton from './quick-search-button';
 import Header from './header';
+import usePropsUpdated from '@/hooks/use-props-updated';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 
 export const EditorHeader = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
-  const { getPageMeta, currentPage, editor } = useAppState();
-
-  const { onPropsUpdated } = useEditor();
+  const { editor } = useAppState();
+  const pageMeta = useCurrentPageMeta();
+  const onPropsUpdated = usePropsUpdated();
 
   useEffect(() => {
     onPropsUpdated(editor => {
@@ -32,8 +33,6 @@ export const EditorHeader = () => {
     }, 300);
   }, [editor]);
 
-  const pageMeta = currentPage?.pageId ? getPageMeta(currentPage.pageId) : null;
-
   return (
     <Header>
       {title && (

packages/app/src/components/header/header.tsx

@@ -17,7 +17,6 @@ import {
   FavouritedIcon,
   TrashIcon,
 } from '@blocksuite/icons';
-import { useEditor } from '@/providers/editor-provider';
 import { useAppState } from '@/providers/app-state-provider/context';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
 import { IconButton, Button } from '@/ui/button';
@@ -31,18 +30,16 @@ import { toast } from '@/components/toast';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
 const PopoverContent = () => {
-  const { getPageMeta, editor, currentPage } = useAppState();
+  const { editor } = useAppState();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
-  const { mode, setMode } = useEditor();
+  const { changePageMode } = usePageHelper();
   const { confirm } = useConfirm();
-
-  const { id, favorite, title } = (currentPage?.id
-    ? getPageMeta(currentPage.id)
-    : null) ?? {
-    id: '',
-    favorite: false,
-    title: '',
-  };
+  const {
+    mode = 'page',
+    id = '',
+    favorite = false,
+    title = '',
+  } = useCurrentPageMeta() || {};
 
   return (
     <>
@@ -58,7 +55,7 @@ const PopoverContent = () => {
       <MenuItem
         icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
         onClick={() => {
-          setMode(mode === 'page' ? 'edgeless' : 'page');
+          changePageMode(id);
         }}
       >
         Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
@@ -128,11 +125,12 @@ const BrowserWarning = ({
 };
 
 const HeaderRight = () => {
-  const { pageList, permanentlyDeletePage } = useEditor();
-  const { currentWorkspaceId, toggleDeletePage } = useAppState();
+  const { permanentlyDeletePage } = usePageHelper();
+  const { currentWorkspaceId } = useAppState();
+  const { toggleDeletePage } = usePageHelper();
   const { confirm } = useConfirm();
   const router = useRouter();
-  const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
+  const currentPageMeta = useCurrentPageMeta();
   const isTrash = !!currentPageMeta?.trash;
 
   if (isTrash) {
@@ -188,8 +186,6 @@ const HeaderRight = () => {
 
 export const Header = ({ children }: PropsWithChildren<{}>) => {
   const [showWarning, setShowWarning] = useState(shouldShowWarning());
-  const currentPageMeta = useCurrentPageMeta();
-  console.log('currentPageMeta', currentPageMeta);
   return (
     <StyledHeaderContainer hasWarning={showWarning}>
       <BrowserWarning

packages/app/src/components/help-island/index.tsx

@@ -8,12 +8,11 @@ import {
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '@/ui/tooltip';
-import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
 import { useTheme } from '@/providers/themeProvider';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 
 export type IslandItemNames = 'contact' | 'shortcuts';
-// export type IslandShowMap = Record<IslandItemNames, boolean>;
 
 export const HelpIsland = ({
   showList = ['contact', 'shortcuts'],
@@ -22,7 +21,7 @@ export const HelpIsland = ({
 }) => {
   const [showContent, setShowContent] = useState(false);
   const { mode } = useTheme();
-  const { mode: editorMode } = useEditor();
+  const { mode: editorMode } = useCurrentPageMeta() || {};
   const { triggerShortcutsModal, triggerContactModal } = useModal();
   const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
 

packages/app/src/components/page-list/date-cell.tsx

@@ -1,6 +1,6 @@
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import dayjs from 'dayjs';
-import { PageMeta } from '@/providers/editor-provider';
+import { PageMeta } from '@/providers/app-state-provider';
 import { TableCell } from '@/ui/table';
 import React from 'react';
 

packages/app/src/components/page-list/index.tsx

@@ -1,4 +1,4 @@
-import { PageMeta, useEditor } from '@/providers/editor-provider';
+import { PageMeta } from '@/providers/app-state-provider';
 import {
   FavouritedIcon,
   FavouritesIcon,

packages/app/src/components/page-list/operation-cell.tsx

@@ -1,7 +1,5 @@
-import { PageMeta, useEditor } from '@/providers/editor-provider';
 import { useConfirm } from '@/providers/confirm-provider';
-import { useAppState } from '@/providers/app-state-provider/context';
-import { useGoToPage } from '@/providers/app-state-provider/hooks';
+import { useAppState, PageMeta } from '@/providers/app-state-provider';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Wrapper } from '@/ui/layout';
 import { IconButton } from '@/ui/button';
@@ -19,7 +17,7 @@ import { usePageHelper } from '@/hooks/use-page-helper';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
-  const goToPage = useGoToPage();
+  const { openPage } = usePageHelper();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
   const { confirm } = useConfirm();
 
@@ -36,7 +34,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
       </MenuItem>
       <MenuItem
         onClick={() => {
-          goToPage(id);
+          openPage(id);
         }}
         icon={<OpenInNewIcon />}
       >
@@ -73,9 +71,9 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
 
 export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id } = pageMeta;
-  const goToPage = useGoToPage();
-  const { getPageMeta, toggleDeletePage } = useAppState();
-  const { permanentlyDeletePage } = useEditor();
+  const { openPage } = usePageHelper();
+  const { getPageMeta } = useAppState();
+  const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
   const { confirm } = useConfirm();
 
   return (
@@ -86,7 +84,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         onClick={() => {
           toggleDeletePage(id);
           toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
-          goToPage(id);
+          openPage(id);
         }}
       >
         <RestoreIcon />

packages/app/src/components/quick-search/footer.tsx

@@ -4,12 +4,12 @@ import { StyledModalFooterContent } from './style';
 import { useModal } from '@/providers/global-modal-provider';
 import { useAppState } from '@/providers/app-state-provider/context';
 import { Command } from 'cmdk';
-import { useGoToPage } from '@/providers/app-state-provider/hooks';
+import { usePageHelper } from '@/hooks/use-page-helper';
 
 export const Footer = (props: { query: string }) => {
   const { createPage } = useAppState();
   const { triggerQuickSearchModal } = useModal();
-  const goToPage = useGoToPage();
+  const { openPage } = usePageHelper();
   const query = props.query;
 
   return (
@@ -18,7 +18,7 @@ export const Footer = (props: { query: string }) => {
       onSelect={async () => {
         const pageId = await createPage?.current?.();
         if (pageId) {
-          goToPage(pageId);
+          openPage(pageId);
         }
 
         triggerQuickSearchModal();

packages/app/src/components/quick-search/results.tsx

@@ -6,11 +6,9 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider/context';
 import { useRouter } from 'next/router';
 import { config } from './config';
-import { useGoToPage } from '@/providers/app-state-provider/hooks';
 import { usePageList } from '@/providers/app-state-provider/usePageList';
 import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
-import NextImage from 'next/image';
-import noResultSVG from './noResult.svg';
+import { NoResultSVG } from './noResultSVG';
 import { usePageHelper } from '@/hooks/use-page-helper';
 export const Results = (props: {
   query: string;
@@ -25,7 +23,7 @@ export const Results = (props: {
   const { triggerQuickSearchModal } = useModal();
   const workspace = useLoadWorkspace();
   const pageList = usePageList(workspace);
-  const goToPage = useGoToPage();
+  const { openPage } = usePageHelper();
   const router = useRouter();
   const { currentWorkspaceId } = useAppState();
   const { search } = usePageHelper();
@@ -56,7 +54,7 @@ export const Results = (props: {
                 <Command.Item
                   key={result.id}
                   onSelect={() => {
-                    goToPage(result.id);
+                    openPage(result.id);
                     triggerQuickSearchModal();
                   }}
                   value={result.id}
@@ -76,12 +74,7 @@ export const Results = (props: {
         ) : (
           <StyledNotFound>
             <span>Find 0 result</span>
-            <NextImage
-              alt="no result"
-              src={noResultSVG}
-              width={150}
-              height={150}
-            ></NextImage>
+            <NoResultSVG />
           </StyledNotFound>
         )
       ) : (

packages/app/src/components/workspace-setting/workspace-setting.tsx

@@ -39,6 +39,8 @@ import { useEffect, useState } from 'react';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { InviteMembers } from '../invite-members/index';
+import { Workspace, WorkspaceType } from '@pathfinder/data-services';
+
 enum ActiveTab {
   'general' = 'general',
   'members' = 'members',
@@ -53,6 +55,7 @@ type SettingTabProps = {
 type WorkspaceSettingProps = {
   isShow: boolean;
   onClose?: () => void;
+  workspace?: Workspace;
 };
 
 const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
@@ -98,6 +101,7 @@ const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
 export const WorkspaceSetting = ({
   isShow,
   onClose,
+  workspace,
 }: WorkspaceSettingProps) => {
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
   const handleTabChange = (tab: ActiveTab) => {
@@ -106,6 +110,7 @@ export const WorkspaceSetting = ({
   const handleClickClose = () => {
     onClose && onClose();
   };
+  const isPrivate = workspace?.type === WorkspaceType.Private;
   useEffect(() => {
     // reset tab when modal is closed
     if (!isShow) {
@@ -126,7 +131,9 @@ export const WorkspaceSetting = ({
           />
         </StyledSettingSidebar>
         <StyledSettingContent>
-          {activeTab === ActiveTab.general && <GeneralPage />}
+          {activeTab === ActiveTab.general && (
+            <GeneralPage workspace={workspace} />
+          )}
           {activeTab === ActiveTab.members && <MembersPage />}
           {activeTab === ActiveTab.publish && <PublishPage />}
         </StyledSettingContent>
@@ -135,14 +142,14 @@ export const WorkspaceSetting = ({
   );
 };
 
-const GeneralPage = () => {
+const GeneralPage = ({ workspace }: { workspace?: Workspace }) => {
   return (
     <div>
       <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
       <StyledSettingAvatarContent>
         <StyledSettingAvatar alt="workspace avatar">W</StyledSettingAvatar>
-        <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
-        <Button shape="round">remove</Button>
+        {/* <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
+        <Button shape="round">remove</Button> */}
       </StyledSettingAvatarContent>
       <StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
       <StyledSettingInputContainer>

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -12,6 +12,7 @@ import {
 } from './WorkspaceItem';
 import { WorkspaceSetting } from '@/components/workspace-setting';
 import { useState } from 'react';
+import { WorkspaceType } from '@pathfinder/data-services';
 
 export const SelectorPopperContent = () => {
   const { user, workspacesMeta } = useAppState();
@@ -56,6 +57,13 @@ export const SelectorPopperContent = () => {
       <WorkspaceSetting
         isShow={Boolean(settingWorkspaceId)}
         onClose={handleCloseWorkSpace}
+        workspace={
+          settingWorkspaceId
+            ? workspacesMeta.find(
+                workspace => workspace.id === settingWorkspaceId
+              )
+            : undefined
+        }
       />
       <StyledDivider />
       <ListItem

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -23,17 +23,19 @@ import {
 } from '@blocksuite/icons';
 import Link from 'next/link';
 import { Tooltip } from '@/ui/tooltip';
-import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
-import { useGoToPage } from '@/providers/app-state-provider/hooks';
 import { useAppState } from '@/providers/app-state-provider/context';
 
 import { IconButton } from '@/ui/button';
 import { WorkspaceSelector } from './WorkspaceSelector';
 import useLocalStorage from '@/hooks/use-local-storage';
 import { useTranslation } from '@/libs/i18n';
+import usePageMetaList from '@/hooks/use-page-meta-list';
+import { usePageHelper } from '@/hooks/use-page-helper';
+
 const FavoriteList = ({ showList }: { showList: boolean }) => {
-  const { pageList, openPage } = useEditor();
+  const { openPage } = usePageHelper();
+  const pageList = usePageMetaList();
   const router = useRouter();
 
   const favoriteList = pageList.filter(p => p.favorite && !p.trash);
@@ -66,7 +68,7 @@ export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
   const { createPage, currentWorkspaceId } = useAppState();
-  const goToPage = useGoToPage();
+  const { openPage } = usePageHelper();
   const router = useRouter();
 
   const [showTip, setShowTip] = useState(false);
@@ -142,9 +144,8 @@ export const WorkSpaceSliderBar = () => {
         <StyledNewPageButton
           onClick={async () => {
             const pageId = await createPage?.current?.();
-            console.log('pageID', pageId);
             if (pageId) {
-              goToPage(pageId);
+              openPage(pageId);
             }
           }}
         >