fix: tauri folder bugs (#4589)

2024-08-30 18:12:39 +00:00 · 2024-02-08 14:22:44 +08:00 · 2024-02-08 14:22:44 +08:00 · 60fc5bb2c8
commit 60fc5bb2c8
parent 9d71464f1a
63 changed files with 1050 additions and 671 deletions
--- a/frontend/appflowy_tauri/src-tauri/tauri.conf.json
+++ b/frontend/appflowy_tauri/src-tauri/tauri.conf.json
@ -19,7 +19,10 @@
      },
      "fs": {
        "all": true,
-        "scope": ["$APPLOCALDATA/**", "$APPLOCALDATA/images/*"],
+        "scope": [
+          "$APPLOCALDATA/**",
+          "$APPLOCALDATA/images/*"
+        ],
        "readFile": true,
        "writeFile": true,
        "readDir": true,
--- a/frontend/appflowy_tauri/src/appflowy_app/AppMain.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/AppMain.hooks.ts
@ -1,64 +1,59 @@
 import { useAppDispatch, useAppSelector } from '$app/stores/store';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { currentUserActions } from '$app_reducers/current-user/slice';
 import { Theme as ThemeType, ThemeMode } from '$app/stores/reducers/current-user/slice';
 import { createTheme } from '@mui/material/styles';
 import { getDesignTokens } from '$app/utils/mui';
 import { useTranslation } from 'react-i18next';
-import { ThemeModePB } from '@/services/backend';
 import { UserService } from '$app/application/user/user.service';

 export function useUserSetting() {
  const dispatch = useAppDispatch();
  const { i18n } = useTranslation();
-
-  const handleSystemThemeChange = useCallback(() => {
-    const mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.Dark : ThemeMode.Light;
-
-    dispatch(currentUserActions.setUserSetting({ themeMode: mode }));
-  }, [dispatch]);
-
-  const loadUserSetting = useCallback(async () => {
-    const settings = await UserService.getAppearanceSetting();
-
-    if (!settings) return;
-    dispatch(currentUserActions.setUserSetting(settings));
-
-    if (settings.themeMode === ThemeModePB.System) {
-      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-      handleSystemThemeChange();
-
-      mediaQuery.addEventListener('change', handleSystemThemeChange);
-    }
-
-    await i18n.changeLanguage(settings.language);
-  }, [dispatch, handleSystemThemeChange, i18n]);
-
-  useEffect(() => {
-    void loadUserSetting();
-  }, [loadUserSetting]);
-
-  const { themeMode = ThemeMode.Light, theme: themeType = ThemeType.Default } = useAppSelector((state) => {
+  const {
+    themeMode = ThemeMode.System,
+    isDark = false,
+    theme: themeType = ThemeType.Default,
+  } = useAppSelector((state) => {
    return state.currentUser.userSetting || {};
  });

  useEffect(() => {
-    const html = document.documentElement;
+    void (async () => {
+      const settings = await UserService.getAppearanceSetting();

-    html?.setAttribute('data-dark-mode', String(themeMode === ThemeMode.Dark));
-    html?.setAttribute('data-theme', themeType);
-  }, [themeType, themeMode]);
+      if (!settings) return;
+      dispatch(currentUserActions.setUserSetting(settings));
+      await i18n.changeLanguage(settings.language);
+    })();
+  }, [dispatch, i18n]);

  useEffect(() => {
-    return () => {
-      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const html = document.documentElement;

+    html?.setAttribute('data-dark-mode', String(isDark));
+  }, [isDark]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleSystemThemeChange = () => {
+      if (themeMode !== ThemeMode.System) return;
+      dispatch(
+        currentUserActions.setUserSetting({
+          isDark: mediaQuery.matches,
+        })
+      );
+    };
+
+    mediaQuery.addEventListener('change', handleSystemThemeChange);
+
+    return () => {
      mediaQuery.removeEventListener('change', handleSystemThemeChange);
    };
-  }, [dispatch, handleSystemThemeChange]);
+  }, [dispatch, themeMode]);

-  const muiTheme = useMemo(() => createTheme(getDesignTokens(themeMode)), [themeMode]);
+  const muiTheme = useMemo(() => createTheme(getDesignTokens(isDark)), [isDark]);

  return {
    muiTheme,
--- a/frontend/appflowy_tauri/src/appflowy_app/application/document/document.types.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/application/document/document.types.ts
@ -138,6 +138,7 @@ export interface MentionPage {
  id: string;
  name: string;
  layout: ViewLayoutPB;
+  parentId: string;
  icon?: {
    ty: ViewIconTypePB;
    value: string;
--- a/frontend/appflowy_tauri/src/appflowy_app/application/folder/page.service.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/application/folder/page.service.ts
@ -49,8 +49,7 @@ export const createOrphanPage = async (
  return Promise.reject(result.val);
 };

-export const duplicatePage = async (id: string) => {
-  const page = await getPage(id);
+export const duplicatePage = async (page: Page) => {
  const payload = ViewPB.fromObject(page);

  const result = await FolderEventDuplicateView(payload);
--- a/frontend/appflowy_tauri/src/appflowy_app/assets/details.svg
+++ b/frontend/appflowy_tauri/src/appflowy_app/assets/details.svg
@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 8C5 8.55228 4.55228 9 4 9C3.44772 9 3 8.55228 3 8C3 7.44772 3.44772 7 4 7C4.55228 7 5 7.44772 5 8Z" fill="#78797D"/>
-<path d="M9 8C9 8.55228 8.55229 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7C8.55229 7 9 7.44772 9 8Z" fill="#78797D"/>
-<path d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z" fill="#78797D"/>
+<path d="M5 8C5 8.55228 4.55228 9 4 9C3.44772 9 3 8.55228 3 8C3 7.44772 3.44772 7 4 7C4.55228 7 5 7.44772 5 8Z" fill="currentColor"/>
+<path d="M9 8C9 8.55228 8.55229 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7C8.55229 7 9 7.44772 9 8Z" fill="currentColor"/>
+<path d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z" fill="currentColor"/>
 </svg>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/button_menu/ButtonMenu.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/button_menu/ButtonMenu.tsx
@ -1,69 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { List, MenuItem, Popover, Portal, Theme } from '@mui/material';
-import { PopoverOrigin } from '@mui/material/Popover/Popover';
-import { SxProps } from '@mui/system';
-
-interface ButtonPopoverListProps {
-  isVisible: boolean;
-  children: React.ReactNode;
-  popoverOptions: {
-    key: React.Key;
-    icon: React.ReactNode;
-    label: React.ReactNode | string;
-    onClick: () => void;
-  }[];
-  popoverOrigin: {
-    anchorOrigin: PopoverOrigin;
-    transformOrigin: PopoverOrigin;
-  };
-  onClose?: () => void;
-  sx?: SxProps<Theme>;
-}
-
-function ButtonPopoverList({ popoverOrigin, isVisible, children, popoverOptions, onClose, sx }: ButtonPopoverListProps) {
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement>();
-  const open = Boolean(anchorEl);
-  const visible = isVisible || open;
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = useCallback(() => {
-    setAnchorEl(undefined);
-  }, []);
-
-  return (
-    <>
-      {visible && <div onClick={handleClick}>{children}</div>}
-      <Portal>
-        <Popover
-          open={open}
-          {...popoverOrigin}
-          anchorEl={anchorEl}
-          onClose={() => {
-            handleClose();
-            onClose?.();
-          }}
-        >
-          <List sx={{ ...sx }}>
-            {popoverOptions.map((option) => (
-              <MenuItem
-                key={option.key}
-                onClick={() => {
-                  option.onClick();
-                  handleClose();
-                }}
-                className={'flex items-center gap-1 rounded-none px-2 text-xs font-medium'}
-              >
-                <span className={'text-base'}>{option.icon}</span>
-                <span>{option.label}</span>
-              </MenuItem>
-            ))}
-          </List>
-        </Popover>
-      </Portal>
-    </>
-  );
-}
-
-export default ButtonPopoverList;
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/delete_confirm_dialog/DeleteConfirmDialog.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/delete_confirm_dialog/DeleteConfirmDialog.tsx
@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import { Button, DialogActions, Divider } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import { useTranslation } from 'react-i18next';
+import { Log } from '$app/utils/log';

 interface Props {
  open: boolean;
@ -15,9 +16,36 @@ interface Props {
 function DeleteConfirmDialog({ open, title, subtitle, onOk, onClose }: Props) {
  const { t } = useTranslation();

+  const onDone = useCallback(async () => {
+    try {
+      await onOk();
+      onClose();
+    } catch (e) {
+      Log.error(e);
+    }
+  }, [onClose, onOk]);
+
  return (
-    <Dialog keepMounted={false} onMouseDown={(e) => e.stopPropagation()} open={open} onClose={onClose}>
-      <DialogContent className={'flex w-[540px] flex-col items-center justify-center'}>
+    <Dialog
+      keepMounted={false}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          onClose();
+        }
+
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+          void onDone();
+        }
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+      open={open}
+      onClose={onClose}
+    >
+      <DialogContent className={'flex w-[340px] flex-col items-center justify-center gap-4'}>
        <div className={'text-md font-medium'}>{title}</div>
        {subtitle && <div className={'m-1 text-sm text-text-caption'}>{subtitle}</div>}
      </DialogContent>
@ -26,15 +54,7 @@ function DeleteConfirmDialog({ open, title, subtitle, onOk, onClose }: Props) {
        <Button variant={'outlined'} onClick={onClose}>
          {t('button.cancel')}
        </Button>
-        <Button
-          variant={'contained'}
-          onClick={async () => {
-            try {
-              await onOk();
-              onClose();
-            } catch (e) {}
-          }}
-        >
+        <Button variant={'contained'} onClick={onDone}>
          {t('button.delete')}
        </Button>
      </DialogActions>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/confirm_dialog/RenameDialog.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/confirm_dialog/RenameDialog.tsx
@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import Dialog from '@mui/material/Dialog';
 import { useTranslation } from 'react-i18next';
 import TextField from '@mui/material/TextField';
-import { Button, DialogActions } from '@mui/material';
+import { Button, DialogActions, Divider } from '@mui/material';

 function RenameDialog({
  defaultValue,
@ -25,20 +25,31 @@ function RenameDialog({
    setValue(defaultValue);
    setError(false);
  }, [defaultValue]);
+
+  const onDone = useCallback(async () => {
+    try {
+      await onOk(value);
+      onClose();
+    } catch (e) {
+      setError(true);
+    }
+  }, [onClose, onOk, value]);
+
  return (
    <Dialog keepMounted={false} onMouseDown={(e) => e.stopPropagation()} open={open} onClose={onClose}>
-      <DialogTitle>{t('menuAppHeader.renameDialog')}</DialogTitle>
-      <DialogContent className={'flex w-[540px]'}>
+      <DialogTitle className={'pb-2'}>{t('menuAppHeader.renameDialog')}</DialogTitle>
+      <DialogContent className={'flex'}>
        <TextField
          error={error}
          autoFocus
          spellCheck={false}
          value={value}
+          placeholder={t('dialogCreatePageNameHint')}
          onKeyDown={(e) => {
            e.stopPropagation();
            if (e.key === 'Enter') {
              e.preventDefault();
-              void onOk(value);
+              void onDone();
            }

            if (e.key === 'Escape') {
@ -54,18 +65,12 @@ function RenameDialog({
          variant='standard'
        />
      </DialogContent>
-
-      <DialogActions>
-        <Button onClick={onClose}>{t('button.cancel')}</Button>
-        <Button
-          onClick={async () => {
-            try {
-              await onOk(value);
-            } catch (e) {
-              setError(true);
-            }
-          }}
-        >
+      <Divider className={'mb-1'} />
+      <DialogActions className={'mb-1 px-4'}>
+        <Button variant={'outlined'} onClick={onClose}>
+          {t('button.cancel')}
+        </Button>
+        <Button variant={'contained'} onClick={onDone}>
          {t('button.ok')}
        </Button>
      </DialogActions>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/drag_block/drag.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/drag_block/drag.hooks.ts
@ -24,8 +24,12 @@ export function useDrag(props: Props) {
    setIsDraggingOver(false);
    setIsDragging(false);
    setDropPosition(undefined);
+    const currentTarget = e.currentTarget;
+
+    if (currentTarget.parentElement?.closest(`[data-drop-enabled="false"]`)) return;
+    if (currentTarget.closest(`[data-dragging="true"]`)) return;
    const dragId = e.dataTransfer.getData('dragId');
-    const targetRect = e.currentTarget.getBoundingClientRect();
+    const targetRect = currentTarget.getBoundingClientRect();
    const { clientY } = e;

    const position = calcPosition(targetRect, clientY);
@ -37,8 +41,12 @@ export function useDrag(props: Props) {
    e.stopPropagation();
    e.preventDefault();
    if (isDragging) return;
+    const currentTarget = e.currentTarget;
+
+    if (currentTarget.parentElement?.closest(`[data-drop-enabled="false"]`)) return;
+    if (currentTarget.closest(`[data-dragging="true"]`)) return;
    setIsDraggingOver(true);
-    const targetRect = e.currentTarget.getBoundingClientRect();
+    const targetRect = currentTarget.getBoundingClientRect();
    const { clientY } = e;
    const position = calcPosition(targetRect, clientY);

--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/keyboard_navigation/KeyboardNavigation.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/keyboard_navigation/KeyboardNavigation.tsx
@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MenuItem, Typography } from '@mui/material';
 import { scrollIntoView } from '$app/components/_shared/keyboard_navigation/utils';
-import { ReactEditor, useSlateStatic } from 'slate-react';
 import { useTranslation } from 'react-i18next';

 /**
@ -35,7 +34,7 @@ export interface KeyboardNavigationOption<T = string> {
 *  - onBlur: called when the keyboard navigation is blurred
 */
 export interface KeyboardNavigationProps<T> {
-  scrollRef: React.RefObject<HTMLDivElement>;
+  scrollRef?: React.RefObject<HTMLDivElement>;
  focusRef?: React.RefObject<HTMLElement>;
  options: KeyboardNavigationOption<T>[];
  onSelected?: (optionKey: T) => void;
@ -68,7 +67,6 @@ function KeyboardNavigation<T>({
  onFocus,
 }: KeyboardNavigationProps<T>) {
  const { t } = useTranslation();
-  const editor = useSlateStatic();
  const ref = useRef<HTMLDivElement>(null);
  const mouseY = useRef<number | null>(null);
  const defaultKeyRef = useRef<T | undefined>(defaultFocusedKey);
@ -108,7 +106,7 @@ function KeyboardNavigation<T>({
    if (focusedKey === undefined) return;
    onSelected?.(focusedKey);

-    const scrollElement = scrollRef.current;
+    const scrollElement = scrollRef?.current;

    if (!scrollElement) return;

@ -262,15 +260,15 @@ function KeyboardNavigation<T>({
      let element: HTMLElement | null | undefined = focusRef?.current;

      if (!element) {
-        element = ReactEditor.toDOMNode(editor, editor);
+        element = document.activeElement as HTMLElement;
      }

-      element.addEventListener('keydown', onKeyDown);
+      element?.addEventListener('keydown', onKeyDown);
      return () => {
        element?.removeEventListener('keydown', onKeyDown);
      };
    }
-  }, [disableFocus, editor, onKeyDown, focusRef]);
+  }, [disableFocus, onKeyDown, focusRef]);

  return (
    <div
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.tsx
@ -13,6 +13,8 @@ import { useTranslation } from 'react-i18next';
 import { ErrorCode, FolderNotification } from '@/services/backend';
 import ExpandRecordModal from '$app/components/database/components/edit_record/ExpandRecordModal';
 import { subscribeNotifications } from '$app/application/notification';
+import { Page } from '$app_reducers/pages/slice';
+import { getPage } from '$app/application/folder/page.service';

 interface Props {
  selectedViewId?: string;
@ -22,11 +24,12 @@ interface Props {
 export const Database = forwardRef<HTMLDivElement, Props>(({ selectedViewId, setSelectedViewId }, ref) => {
  const innerRef = useRef<HTMLDivElement>();
  const databaseRef = (ref ?? innerRef) as React.MutableRefObject<HTMLDivElement>;
-
  const viewId = useViewId();
+
+  const [page, setPage] = useState<Page | null>(null);
  const { t } = useTranslation();
  const [notFound, setNotFound] = useState(false);
-  const [childViewIds, setChildViewIds] = useState<string[]>([]);
+  const [childViews, setChildViews] = useState<Page[]>([]);
  const [editRecordRowId, setEditRecordRowId] = useState<string | null>(null);
  const [openCollections, setOpenCollections] = useState<string[]>([]);

@ -34,7 +37,7 @@ export const Database = forwardRef<HTMLDivElement, Props>(({ selectedViewId, set
    await databaseViewService
      .getDatabaseViews(viewId)
      .then((value) => {
-        setChildViewIds(value.map((view) => view.id));
+        setChildViews(value);
      })
      .catch((err) => {
        if (err.code === ErrorCode.RecordNotFound) {
@ -43,10 +46,39 @@ export const Database = forwardRef<HTMLDivElement, Props>(({ selectedViewId, set
      });
  }, []);

+  const handleGetPage = useCallback(async () => {
+    try {
+      const page = await getPage(viewId);
+
+      setPage(page);
+    } catch (e) {
+      setNotFound(true);
+    }
+  }, [viewId]);
+
  useEffect(() => {
+    void handleGetPage();
    void handleResetDatabaseViews(viewId);
    const unsubscribePromise = subscribeNotifications(
      {
+        [FolderNotification.DidUpdateView]: (changeset) => {
+          setChildViews((prev) => {
+            const index = prev.findIndex((view) => view.id === changeset.id);
+
+            if (index === -1) {
+              return prev;
+            }
+
+            const newViews = [...prev];
+
+            newViews[index] = {
+              ...newViews[index],
+              name: changeset.name,
+            };
+
+            return newViews;
+          });
+        },
        [FolderNotification.DidUpdateChildViews]: (changeset) => {
          if (changeset.create_child_views.length === 0 && changeset.delete_child_views.length === 0) {
            return;
@ -61,11 +93,35 @@ export const Database = forwardRef<HTMLDivElement, Props>(({ selectedViewId, set
    );

    return () => void unsubscribePromise.then((unsubscribe) => unsubscribe());
-  }, [handleResetDatabaseViews, viewId]);
+  }, [handleGetPage, handleResetDatabaseViews, viewId]);
+
+  useEffect(() => {
+    const parentId = page?.parentId;
+
+    if (!parentId) return;
+
+    const unsubscribePromise = subscribeNotifications(
+      {
+        [FolderNotification.DidUpdateChildViews]: (changeset) => {
+          if (changeset.delete_child_views.includes(viewId)) {
+            setNotFound(true);
+          }
+        },
+      },
+      {
+        id: parentId,
+      }
+    );
+
+    return () => void unsubscribePromise.then((unsubscribe) => unsubscribe());
+  }, [page, viewId]);

  const value = useMemo(() => {
-    return Math.max(0, childViewIds.indexOf(selectedViewId ?? viewId));
-  }, [childViewIds, selectedViewId, viewId]);
+    return Math.max(
+      0,
+      childViews.findIndex((view) => view.id === (selectedViewId ?? viewId))
+    );
+  }, [childViews, selectedViewId, viewId]);

  const onToggleCollection = useCallback(
    (id: string, forceOpen?: boolean) => {
@ -110,7 +166,7 @@ export const Database = forwardRef<HTMLDivElement, Props>(({ selectedViewId, set
        pageId={viewId}
        setSelectedViewId={setSelectedViewId}
        selectedViewId={selectedViewId}
-        childViewIds={childViewIds}
+        childViews={childViews}
      />
      <SwipeableViews
        slideStyle={{
@ -120,19 +176,19 @@ export const Database = forwardRef<HTMLDivElement, Props>(({ selectedViewId, set
        axis={'x'}
        index={value}
      >
-        {childViewIds.map((id, index) => (
-          <TabPanel className={'flex h-full w-full flex-col'} key={id} index={index} value={value}>
-            <DatabaseLoader viewId={id}>
-              {selectedViewId === id && (
+        {childViews.map((view, index) => (
+          <TabPanel className={'flex h-full w-full flex-col'} key={view.id} index={index} value={value}>
+            <DatabaseLoader viewId={view.id}>
+              {selectedViewId === view.id && (
                <>
                  <Portal container={databaseRef.current}>
                    <div className={'absolute right-16 top-0 py-1'}>
                      <DatabaseSettings
-                        onToggleCollection={(forceOpen?: boolean) => onToggleCollection(id, forceOpen)}
+                        onToggleCollection={(forceOpen?: boolean) => onToggleCollection(view.id, forceOpen)}
                      />
                    </div>
                  </Portal>
-                  <DatabaseCollection open={openCollections.includes(id)} />
+                  <DatabaseCollection open={openCollections.includes(view.id)} />
                  {editRecordRowId && (
                    <ExpandRecordModal
                      rowId={editRecordRowId}
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/property/PropertyActions.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/property/PropertyActions.tsx
@ -10,7 +10,7 @@ import { useViewId } from '$app/hooks';
 import { fieldService } from '$app/application/database';
 import { OrderObjectPositionTypePB, FieldVisibility } from '@/services/backend';
 import { MenuItem } from '@mui/material';
-import DeleteConfirmDialog from '$app/components/_shared/delete_confirm_dialog/DeleteConfirmDialog';
+import DeleteConfirmDialog from '$app/components/_shared/confirm_dialog/DeleteConfirmDialog';
 import { useTranslation } from 'react-i18next';

 export enum FieldAction {
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/DatabaseTabBar.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/DatabaseTabBar.tsx
@ -1,6 +1,5 @@
-import { FC, FunctionComponent, SVGProps, useEffect, useState } from 'react';
+import { FC, FunctionComponent, SVGProps, useEffect, useMemo, useState } from 'react';
 import { ViewTabs, ViewTab } from './ViewTabs';
-import { useAppSelector } from '$app/stores/store';
 import { useTranslation } from 'react-i18next';
 import AddViewBtn from '$app/components/database/components/tab_bar/AddViewBtn';
 import { ViewLayoutPB } from '@/services/backend';
@ -11,7 +10,7 @@ import ViewActions from '$app/components/database/components/tab_bar/ViewActions
 import { Page } from '$app_reducers/pages/slice';

 export interface DatabaseTabBarProps {
-  childViewIds: string[];
+  childViews: Page[];
  selectedViewId?: string;
  setSelectedViewId?: (viewId: string) => void;
  pageId: string;
@ -26,26 +25,21 @@ const DatabaseIcons: {
  [ViewLayoutPB.Calendar]: GridSvg,
 };

-export const DatabaseTabBar: FC<DatabaseTabBarProps> = ({ pageId, childViewIds, selectedViewId, setSelectedViewId }) => {
+export const DatabaseTabBar: FC<DatabaseTabBarProps> = ({ pageId, childViews, selectedViewId, setSelectedViewId }) => {
  const { t } = useTranslation();
  const [contextMenuAnchorEl, setContextMenuAnchorEl] = useState<HTMLElement | null>(null);
  const [contextMenuView, setContextMenuView] = useState<Page | null>(null);
  const open = Boolean(contextMenuAnchorEl);
-  const views = useAppSelector((state) => {
-    const map = state.pages.pageMap;
-
-    return childViewIds.map((id) => map[id]).filter(Boolean);
-  });

  const handleChange = (_: React.SyntheticEvent, newValue: string) => {
    setSelectedViewId?.(newValue);
  };

  useEffect(() => {
-    if (selectedViewId === undefined && views.length > 0) {
-      setSelectedViewId?.(views[0].id);
+    if (selectedViewId === undefined && childViews.length > 0) {
+      setSelectedViewId?.(childViews[0].id);
    }
-  }, [selectedViewId, setSelectedViewId, views]);
+  }, [selectedViewId, setSelectedViewId, childViews]);

  const openMenu = (view: Page) => {
    return (e: React.MouseEvent<HTMLElement>) => {
@ -56,16 +50,19 @@ export const DatabaseTabBar: FC<DatabaseTabBarProps> = ({ pageId, childViewIds,
    };
  };

+  const isSelected = useMemo(() => childViews.some((view) => view.id === selectedViewId), [childViews, selectedViewId]);
+
+  if (childViews.length === 0) return null;
  return (
    <div className='-mb-px flex items-center px-16'>
      <div className='flex flex-1 items-center border-b border-line-divider'>
-        <ViewTabs value={selectedViewId} onChange={handleChange}>
-          {views.map((view) => {
+        <ViewTabs value={isSelected ? selectedViewId : childViews[0].id} onChange={handleChange}>
+          {childViews.map((view) => {
            const Icon = DatabaseIcons[view.layout];

            return (
              <ViewTab
-                onContextMenu={openMenu(view)}
+                onContextMenuCapture={openMenu(view)}
                onDoubleClick={openMenu(view)}
                key={view.id}
                icon={<Icon />}
@ -81,6 +78,7 @@ export const DatabaseTabBar: FC<DatabaseTabBarProps> = ({ pageId, childViewIds,
      </div>
      {open && contextMenuView && (
        <ViewActions
+          pageId={pageId}
          view={contextMenuView}
          keepMounted={false}
          open={open}
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/ViewActions.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/ViewActions.tsx
@ -4,7 +4,7 @@ import { ReactComponent as DeleteSvg } from '$app/assets/delete.svg';
 import { ReactComponent as EditSvg } from '$app/assets/edit.svg';
 import { deleteView } from '$app/application/database/database_view/database_view_service';
 import { MenuItem, MenuProps, Menu } from '@mui/material';
-import RenameDialog from '$app/components/layout/nested_page/RenameDialog';
+import RenameDialog from '$app/components/_shared/confirm_dialog/RenameDialog';
 import { Page } from '$app_reducers/pages/slice';
 import { useAppDispatch } from '$app/stores/store';
 import { updatePageName } from '$app_reducers/pages/async_actions';
@ -14,7 +14,7 @@ enum ViewAction {
  Delete,
 }

-function ViewActions({ view, ...props }: { view: Page } & MenuProps) {
+function ViewActions({ view, pageId, ...props }: { pageId: string; view: Page } & MenuProps) {
  const { t } = useTranslation();
  const viewId = view.id;
  const dispatch = useAppDispatch();
@ -31,6 +31,7 @@ function ViewActions({ view, ...props }: { view: Page } & MenuProps) {

    {
      id: ViewAction.Delete,
+      disabled: viewId === pageId,
      label: t('button.delete'),
      icon: <DeleteSvg />,
      action: async () => {
@ -48,31 +49,33 @@ function ViewActions({ view, ...props }: { view: Page } & MenuProps) {
    <>
      <Menu keepMounted={false} disableRestoreFocus={true} {...props}>
        {options.map((option) => (
-          <MenuItem key={option.id} onClick={option.action}>
+          <MenuItem disabled={option.disabled} key={option.id} onClick={option.action}>
            <div className={'mr-1.5'}>{option.icon}</div>
            {option.label}
          </MenuItem>
        ))}
      </Menu>
-      <RenameDialog
-        open={openRenameDialog}
-        onClose={() => setOpenRenameDialog(false)}
-        onOk={async (val) => {
-          try {
-            await dispatch(
-              updatePageName({
-                id: viewId,
-                name: val,
-              })
-            );
-            setOpenRenameDialog(false);
-            props.onClose?.({}, 'backdropClick');
-          } catch (e) {
-            // toast.error(t('error.renameView'));
-          }
-        }}
-        defaultValue={view.name}
-      />
+      {openRenameDialog && (
+        <RenameDialog
+          open={openRenameDialog}
+          onClose={() => setOpenRenameDialog(false)}
+          onOk={async (val) => {
+            try {
+              await dispatch(
+                updatePageName({
+                  id: viewId,
+                  name: val,
+                })
+              );
+              setOpenRenameDialog(false);
+              props.onClose?.({}, 'backdropClick');
+            } catch (e) {
+              // toast.error(t('error.renameView'));
+            }
+          }}
+          defaultValue={view.name}
+        />
+      )}
    </>
  );
 }
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/document_header/DocumentHeader.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/document_header/DocumentHeader.tsx
@ -19,7 +19,7 @@ export function DocumentHeader({ page }: DocumentHeaderProps) {

  if (!page) return null;
  return (
-    <div className={'document-header px-16 pt-4'}>
+    <div className={'document-header select-none px-16 pt-4'}>
      <ViewTitle showTitle={false} onUpdateIcon={onUpdateIcon} view={page} />
    </div>
  );
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/database/DatabaseList.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/database/DatabaseList.hooks.ts
@ -1,24 +1,13 @@
 import { useAppSelector } from '$app/stores/store';
-import { useEffect, useState } from 'react';
-import { Page } from '$app_reducers/pages/slice';
 import { ViewLayoutPB } from '@/services/backend';

 export function useLoadDatabaseList({ searchText, layout }: { searchText: string; layout: ViewLayoutPB }) {
-  const [list, setList] = useState<Page[]>([]);
-  const pages = useAppSelector((state) => state.pages.pageMap);
-
-  useEffect(() => {
-    const list = Object.values(pages)
-      .map((page) => {
-        return page;
-      })
-      .filter((page) => {
-        if (page.layout !== layout) return false;
-        return page.name.toLowerCase().includes(searchText.toLowerCase());
-      });
-
-    setList(list);
-  }, [layout, pages, searchText]);
+  const list = useAppSelector((state) => {
+    return Object.values(state.pages.pageMap).filter((page) => {
+      if (page.layout !== layout) return false;
+      return page.name.toLowerCase().includes(searchText.toLowerCase());
+    });
+  });

  return {
    list,
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/text/Text.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/text/Text.tsx
@ -21,7 +21,7 @@ export const Text = memo(
        {renderIcon()}
        <Placeholder isEmpty={isEmpty} node={node} />

-        <span className={'min-w-[4px]'}>{children}</span>
+        <span className={'text-content min-w-[4px]'}>{children}</span>
      </span>
    );
  })
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/inline_nodes/inline_formula/InlineFormula.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/inline_nodes/inline_formula/InlineFormula.tsx
@ -59,7 +59,7 @@ export const InlineFormula = memo(
          contentEditable={false}
          onDoubleClick={handleClick}
          onClick={handleClick}
-          className={`${attributes.className ?? ''} formula-inline relative rounded px-1 py-0.5 ${
+          className={`${attributes.className ?? ''} formula-inline relative cursor-pointer rounded px-1 py-0.5 ${
            selected ? 'selected' : ''
          }`}
        >
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/inline_nodes/mention/MentionLeaf.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/inline_nodes/mention/MentionLeaf.tsx
@ -6,17 +6,29 @@ import { useNavigate } from 'react-router-dom';
 import { pageTypeMap } from '$app_reducers/pages/slice';
 import { getPage } from '$app/application/folder/page.service';
 import { useSelected } from 'slate-react';
+import { ReactComponent as EyeClose } from '$app/assets/eye_close.svg';
+import { notify } from '$app/components/editor/components/tools/notify';
+import { subscribeNotifications } from '$app/application/notification';
+import { FolderNotification } from '@/services/backend';

 export function MentionLeaf({ children, mention }: { mention: Mention; children: React.ReactNode }) {
  const { t } = useTranslation();
  const [page, setPage] = useState<MentionPage | null>(null);
+  const [error, setError] = useState<boolean>(false);
  const navigate = useNavigate();
  const selected = useSelected();
  const loadPage = useCallback(async () => {
+    setError(true);
    if (!mention.page) return;
-    const page = await getPage(mention.page);
+    try {
+      const page = await getPage(mention.page);

-    setPage(page);
+      setPage(page);
+      setError(false);
+    } catch {
+      setPage(null);
+      setError(true);
+    }
  }, [mention.page]);

  useEffect(() => {
@ -24,26 +36,87 @@ export function MentionLeaf({ children, mention }: { mention: Mention; children:
  }, [loadPage]);

  const openPage = useCallback(() => {
-    if (!page) return;
+    if (!page) {
+      notify.error(t('document.mention.deletedContent'));
+      return;
+    }
+
    const pageType = pageTypeMap[page.layout];

    navigate(`/page/${pageType}/${page.id}`);
-  }, [navigate, page]);
+  }, [navigate, page, t]);
+
+  useEffect(() => {
+    if (!page) return;
+    const unsubscribePromise = subscribeNotifications(
+      {
+        [FolderNotification.DidUpdateView]: (changeset) => {
+          setPage((prev) => {
+            if (!prev) {
+              return prev;
+            }
+
+            return {
+              ...prev,
+              name: changeset.name,
+            };
+          });
+        },
+      },
+      {
+        id: page.id,
+      }
+    );
+
+    return () => void unsubscribePromise.then((unsubscribe) => unsubscribe());
+  }, [page]);
+
+  useEffect(() => {
+    const parentId = page?.parentId;
+
+    if (!parentId) return;
+
+    const unsubscribePromise = subscribeNotifications(
+      {
+        [FolderNotification.DidUpdateChildViews]: (changeset) => {
+          if (changeset.delete_child_views.includes(page.id)) {
+            setPage(null);
+            setError(true);
+          }
+        },
+      },
+      {
+        id: parentId,
+      }
+    );
+
+    return () => void unsubscribePromise.then((unsubscribe) => unsubscribe());
+  }, [page]);

  return (
    <span className={'relative'}>
-      {page && (
-        <span
-          className={'relative mx-1 inline-flex cursor-pointer items-center hover:rounded hover:bg-content-blue-100'}
-          onClick={openPage}
-          style={{
-            backgroundColor: selected ? 'var(--content-blue-100)' : undefined,
-          }}
-        >
-          <span className={'text-sx absolute left-0.5'}>{page.icon?.value || <DocumentSvg />}</span>
-          <span className={'ml-6 mr-0.5 underline'}>{page.name || t('document.title.placeholder')}</span>
-        </span>
-      )}
+      <span
+        className={'relative mx-1 inline-flex cursor-pointer items-center hover:rounded hover:bg-content-blue-100'}
+        onClick={openPage}
+        style={{
+          backgroundColor: selected ? 'var(--content-blue-100)' : undefined,
+        }}
+      >
+        {page && (
+          <>
+            <span className={'text-sx absolute left-0.5'}>{page.icon?.value || <DocumentSvg />}</span>
+            <span className={'ml-6 mr-0.5 underline'}>{page.name || t('document.title.placeholder')}</span>
+          </>
+        )}
+        {error && (
+          <>
+            <span className={'text-sx absolute left-0.5'}>
+              <EyeClose />
+            </span>
+            <span className={'ml-6 mr-0.5 text-text-caption underline'}>{t('document.mention.deleted')}</span>
+          </>
+        )}
+      </span>

      <span className={'invisible'}>{children}</span>
    </span>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/block_actions/BlockActionsToolbar.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/block_actions/BlockActionsToolbar.tsx
@ -22,9 +22,12 @@ const Toolbar = () => {
  const handleOpen = useCallback(() => {
    if (!node || !node.blockId) return;
    setOpenContextMenu(true);
+    const path = ReactEditor.findPath(editor, node);
+
+    editor.select(path);
    selectedBlockContext.clear();
    selectedBlockContext.add(node.blockId);
-  }, [node, selectedBlockContext]);
+  }, [editor, node, selectedBlockContext]);

  const handleClose = useCallback(() => {
    setOpenContextMenu(false);
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/block_actions/BlockOperationMenu.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/block_actions/BlockOperationMenu.tsx
@ -12,7 +12,8 @@ import KeyboardNavigation, {
  KeyboardNavigationOption,
 } from '$app/components/_shared/keyboard_navigation/KeyboardNavigation';
 import { Color } from '$app/components/editor/components/tools/block_actions/color';
-import { getModifier } from '$app/components/editor/plugins/shortcuts';
+import { getModifier } from '$app/utils/get_modifier';
+
 import isHotkey from 'is-hotkey';
 import { EditorNodeType } from '$app/application/document/document.types';
 import { EditorSelectedBlockContext } from '$app/components/editor/stores/selected';
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/editor.scss
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/editor.scss
@ -25,10 +25,8 @@
 .block-element.block-align-center {
  > div > .text-element {
    justify-content: center;
-
  }

-
 }


@ -52,12 +50,35 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) {
  ::selection {
    @apply bg-content-blue-100;
  }
+  .text-content {
+    &::selection {
+      @apply bg-transparent;
+    }
+    span {
+      &::selection {
+        @apply bg-content-blue-100;
+      }
+    }
+  }
 }

+
+
 [data-dark-mode="true"] [role="textbox"]{
  ::selection {
    background-color: #1e79a2;
  }
+
+  .text-content {
+    &::selection {
+      @apply bg-transparent;
+    }
+    span {
+      &::selection {
+        background-color: #1e79a2;
+      }
+    }
+  }
 }


--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/hotkey.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/hotkey.ts
@ -1,17 +1,5 @@
 import { EditorMarkFormat } from '$app/application/document/document.types';
-
-export const isMac = () => {
-  return navigator.userAgent.includes('Mac OS X');
-};
-
-const MODIFIERS = {
-  control: 'Ctrl',
-  meta: '⌘',
-};
-
-export const getModifier = () => {
-  return isMac() ? MODIFIERS.meta : MODIFIERS.control;
-};
+import { getModifier } from '$app/utils/get_modifier';

 /**
 * Hotkeys shortcuts
--- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts
@ -47,6 +47,7 @@ export function useShortcuts(editor: ReactEditor) {

      if (format) {
        e.preventDefault();
+        if (CustomEditor.selectionIncludeRoot(editor)) return;
        return CustomEditor.toggleMark(editor, {
          key: format,
          value: true,
@ -66,7 +67,7 @@ export function useShortcuts(editor: ReactEditor) {
          if (isHotkey(item.hotkey, e)) {
            e.stopPropagation();
            e.preventDefault();
-
+            if (CustomEditor.selectionIncludeRoot(editor)) return;
            if (item.markKey === EditorMarkFormat.Align) {
              CustomEditor.toggleAlign(editor, item.markValue as string);
              return;
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/FooterPanel.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/FooterPanel.tsx
@ -1,12 +1,12 @@
 export const FooterPanel = () => {
  return (
-    <div className={'flex items-center justify-between px-2 py-2'}>
+    <div className={'flex h-[48px] items-center justify-between px-2 py-2'}>
      <div className={'text-xs text-text-caption'}>
        &copy; 2024 AppFlowy. <a href={'https://github.com/AppFlowy-IO/AppFlowy'}>GitHub</a>
      </div>
-      <div>
-        <button className={'h-8 w-8 rounded bg-content-blue-50 text-text-title hover:bg-content-blue-100'}>?</button>
-      </div>
+      {/*<div>*/}
+      {/*  <button className={'h-8 w-8 rounded bg-content-blue-50 text-text-title hover:bg-content-blue-100'}>?</button>*/}
+      {/*</div>*/}
    </div>
  );
 };
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx
@ -2,7 +2,7 @@ import React, { ReactNode, useEffect } from 'react';
 import SideBar from '$app/components/layout/side_bar/SideBar';
 import TopBar from '$app/components/layout/top_bar/TopBar';
 import { useAppSelector } from '$app/stores/store';
-import { FooterPanel } from '$app/components/layout/FooterPanel';
+import './layout.scss';

 function Layout({ children }: { children: ReactNode }) {
  const { isCollapsed, width } = useAppSelector((state) => state.sidebar);
@ -38,8 +38,6 @@ function Layout({ children }: { children: ReactNode }) {
          >
            {children}
          </div>
-
-          <FooterPanel />
        </div>
      </div>
    </>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/bread_crumb/BreadCrumb.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/bread_crumb/BreadCrumb.tsx
@ -6,10 +6,11 @@ import Typography from '@mui/material/Typography';
 import { Page, pageTypeMap } from '$app_reducers/pages/slice';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { getPageIcon } from '$app/hooks/page.hooks';

 function Breadcrumb() {
  const { t } = useTranslation();
-  const { pagePath, currentPage } = useLoadExpandedPages();
+  const { isTrash, pagePath, currentPage } = useLoadExpandedPages();
  const navigate = useNavigate();

  const parentPages = useMemo(() => pagePath.slice(1, -1).filter(Boolean) as Page[], [pagePath]);
@ -22,21 +23,35 @@ function Breadcrumb() {
    [navigate]
  );

+  if (!currentPage) {
+    if (isTrash) {
+      return <Typography color='text.primary'>{t('trash.text')}</Typography>;
+    }
+
+    return null;
+  }
+
  return (
    <Breadcrumbs aria-label='breadcrumb'>
      {parentPages?.map((page: Page) => (
        <Link
          key={page.id}
+          className={'flex cursor-pointer gap-1'}
          underline='hover'
          color='inherit'
          onClick={() => {
            navigateToPage(page);
          }}
        >
+          <div>{getPageIcon(page)}</div>
+
          {page.name || t('document.title.placeholder')}
        </Link>
      ))}
-      <Typography color='text.primary'>{currentPage?.name || t('menuAppHeader.defaultNewPageName')}</Typography>
+      <Typography className={'flex select-auto gap-1'} color='text.primary'>
+        <div>{getPageIcon(currentPage)}</div>
+        {currentPage?.name || t('menuAppHeader.defaultNewPageName')}
+      </Typography>
    </Breadcrumbs>
  );
 }
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/bread_crumb/Breadcrumb.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/bread_crumb/Breadcrumb.hooks.ts
@ -2,11 +2,9 @@ import { useAppSelector } from '$app/stores/store';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { Page } from '$app_reducers/pages/slice';
-import { useTranslation } from 'react-i18next';
 import { getPage } from '$app/application/folder/page.service';

 export function useLoadExpandedPages() {
-  const { t } = useTranslation();
  const params = useParams();
  const location = useLocation();
  const isTrash = useMemo(() => location.pathname.includes('trash'), [location.pathname]);
@ -70,18 +68,9 @@ export function useLoadExpandedPages() {
    });
  }, [pageMap]);

-  useEffect(() => {
-    if (isTrash) {
-      setPagePath([
-        {
-          name: t('trash.text'),
-        },
-      ]);
-    }
-  }, [isTrash, t]);
-
  return {
    pagePath,
    currentPage,
+    isTrash,
  };
 }
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx
@ -1,22 +1,51 @@
-import React from 'react';
-import { IconButton } from '@mui/material';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { IconButton, Tooltip } from '@mui/material';

 import { useAppDispatch, useAppSelector } from '$app/stores/store';
 import { sidebarActions } from '$app_reducers/sidebar/slice';
-import { ReactComponent as LeftSvg } from '$app/assets/left.svg';
-import { ReactComponent as RightSvg } from '$app/assets/right.svg';
+import { ReactComponent as ShowMenuIcon } from '$app/assets/show-menu.svg';
+import { useTranslation } from 'react-i18next';
+import { getModifier } from '$app/utils/get_modifier';
+import isHotkey from 'is-hotkey';

 function CollapseMenuButton() {
  const isCollapsed = useAppSelector((state) => state.sidebar.isCollapsed);
  const dispatch = useAppDispatch();
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
    dispatch(sidebarActions.toggleCollapse());
-  };
+  }, [dispatch]);
+
+  const { t } = useTranslation();
+
+  const title = useMemo(() => {
+    return (
+      <div className={'flex flex-col gap-1 text-xs'}>
+        <div>{isCollapsed ? t('sideBar.openSidebar') : t('sideBar.closeSidebar')}</div>
+        <div>{`${getModifier()} + \\`}</div>
+      </div>
+    );
+  }, [isCollapsed, t]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isHotkey('mod+\\', e)) {
+        e.preventDefault();
+        handleClick();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClick]);

  return (
-    <IconButton size={'small'} className={'font-bold'} onClick={handleClick}>
-      {isCollapsed ? <RightSvg /> : <LeftSvg />}
-    </IconButton>
+    <Tooltip title={title}>
+      <IconButton size={'small'} className={'font-bold text-text-title'} onClick={handleClick}>
+        {isCollapsed ? <ShowMenuIcon /> : <ShowMenuIcon className={'rotate-180 transform'} />}
+      </IconButton>
+    </Tooltip>
  );
 }

--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss
@ -0,0 +1,12 @@
+.workspaces {
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+}
+
+.MuiPopover-root, .MuiPaper-root {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/AddButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/AddButton.tsx
@ -1,63 +1,64 @@
-import React, { useMemo } from 'react';
-import ButtonPopoverList from '$app/components/_shared/button_menu/ButtonMenu';
-import { IconButton } from '@mui/material';
+import React, { useCallback, useMemo } from 'react';
 import { ReactComponent as AddSvg } from '$app/assets/add.svg';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as DocumentSvg } from '$app/assets/document.svg';
 import { ReactComponent as GridSvg } from '$app/assets/grid.svg';
 import { ViewLayoutPB } from '@/services/backend';
+import OperationMenu from '$app/components/layout/nested_page/OperationMenu';

-function AddButton({ isVisible, onAddPage }: { isVisible: boolean; onAddPage: (layout: ViewLayoutPB) => void }) {
+function AddButton({
+  isHovering,
+  setHovering,
+  onAddPage,
+}: {
+  isHovering: boolean;
+  setHovering: (hovering: boolean) => void;
+  onAddPage: (layout: ViewLayoutPB) => void;
+}) {
  const { t } = useTranslation();
+
+  const onConfirm = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'document':
+          onAddPage(ViewLayoutPB.Document);
+          break;
+        case 'grid':
+          onAddPage(ViewLayoutPB.Grid);
+          break;
+        default:
+          break;
+      }
+    },
+    [onAddPage]
+  );
+
  const options = useMemo(
    () => [
      {
-        key: 'add-document',
-        label: t('document.menuName'),
-        icon: (
-          <div className={'h-5 w-5'}>
-            <DocumentSvg />
-          </div>
-        ),
-        onClick: () => {
-          onAddPage(ViewLayoutPB.Document);
-        },
+        key: 'document',
+        title: t('document.menuName'),
+        icon: <DocumentSvg className={'h-4 w-4'} />,
      },
      {
-        key: 'add-grid',
-        label: t('grid.menuName'),
-        icon: (
-          <div className={'h-5 w-5'}>
-            <GridSvg />
-          </div>
-        ),
-        onClick: () => {
-          onAddPage(ViewLayoutPB.Grid);
-        },
+        key: 'grid',
+        title: t('grid.menuName'),
+        icon: <GridSvg className={'h-4 w-4'} />,
      },
    ],
-    [onAddPage, t]
+    [t]
  );

  return (
-    <ButtonPopoverList
-      popoverOrigin={{
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left',
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'left',
-        },
-      }}
-      popoverOptions={options}
-      isVisible={isVisible}
+    <OperationMenu
+      tooltip={t('menuAppHeader.addPageTooltip')}
+      isHovering={isHovering}
+      onConfirm={onConfirm}
+      setHovering={setHovering}
+      options={options}
    >
-      <IconButton size={'small'}>
-        <AddSvg />
-      </IconButton>
-    </ButtonPopoverList>
+      <AddSvg />
+    </OperationMenu>
  );
 }

--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/DeleteDialog.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/DeleteDialog.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ViewLayoutPB } from '@/services/backend';
-import DeleteConfirmDialog from '$app/components/_shared/delete_confirm_dialog/DeleteConfirmDialog';
+import DeleteConfirmDialog from '$app/components/_shared/confirm_dialog/DeleteConfirmDialog';

 function DeleteDialog({
  layout,
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/MoreButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/MoreButton.tsx
@ -1,25 +1,28 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IconButton } from '@mui/material';
-import ButtonPopoverList from '$app/components/_shared/button_menu/ButtonMenu';

 import { ReactComponent as DetailsSvg } from '$app/assets/details.svg';
 import { ReactComponent as EditSvg } from '$app/assets/edit.svg';
 import { ReactComponent as CopySvg } from '$app/assets/copy.svg';
 import { ReactComponent as TrashSvg } from '$app/assets/delete.svg';

-import RenameDialog from './RenameDialog';
+import RenameDialog from '../../_shared/confirm_dialog/RenameDialog';
 import { Page } from '$app_reducers/pages/slice';
 import DeleteDialog from '$app/components/layout/nested_page/DeleteDialog';
+import OperationMenu from '$app/components/layout/nested_page/OperationMenu';
+import { getModifier } from '$app/utils/get_modifier';
+import isHotkey from 'is-hotkey';

 function MoreButton({
-  isVisible,
  onDelete,
  onDuplicate,
  onRename,
  page,
+  isHovering,
+  setHovering,
 }: {
-  isVisible: boolean;
+  isHovering: boolean;
+  setHovering: (hovering: boolean) => void;
  onDelete: () => Promise<void>;
  onDuplicate: () => Promise<void>;
  onRename: (newName: string) => Promise<void>;
@ -29,84 +32,97 @@ function MoreButton({
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  const { t } = useTranslation();
+
+  const onConfirm = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'rename':
+          setRenameDialogOpen(true);
+          break;
+        case 'delete':
+          setDeleteDialogOpen(true);
+          break;
+        case 'duplicate':
+          void onDuplicate();
+
+          break;
+        default:
+          break;
+      }
+    },
+    [onDuplicate]
+  );
+
  const options = useMemo(
    () => [
      {
-        label: t('disclosureAction.rename'),
+        title: t('button.rename'),
+        icon: <EditSvg className={'h-4 w-4'} />,
        key: 'rename',
-        icon: (
-          <div className={'h-5 w-5'}>
-            <EditSvg />
-          </div>
-        ),
-        onClick: () => {
-          setRenameDialogOpen(true);
-        },
      },
      {
-        label: t('button.delete'),
        key: 'delete',
-        onClick: () => {
-          setDeleteDialogOpen(true);
-        },
-        icon: (
-          <div className={'h-5 w-5'}>
-            <TrashSvg />
-          </div>
-        ),
+        title: t('button.delete'),
+        icon: <TrashSvg className={'h-4 w-4'} />,
+        caption: 'Del',
      },
      {
        key: 'duplicate',
-        label: t('button.duplicate'),
-        onClick: onDuplicate,
-        icon: (
-          <div className={'h-5 w-5'}>
-            <CopySvg />
-          </div>
-        ),
+        title: t('button.duplicate'),
+        icon: <CopySvg className={'h-4 w-4'} />,
+        caption: `${getModifier()}+D`,
      },
    ],
-    [onDuplicate, t]
+    [t]
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (isHotkey('del', e) || isHotkey('backspace', e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        onConfirm('delete');
+        return;
+      }
+
+      if (isHotkey('mod+d', e)) {
+        e.stopPropagation();
+        onConfirm('duplicate');
+        return;
+      }
+    },
+    [onConfirm]
  );

  return (
    <>
-      <ButtonPopoverList
-        isVisible={isVisible}
-        popoverOptions={options}
-        popoverOrigin={{
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
-        }}
+      <OperationMenu
+        tooltip={t('menuAppHeader.moreButtonToolTip')}
+        isHovering={isHovering}
+        setHovering={setHovering}
+        onConfirm={onConfirm}
+        options={options}
+        onKeyDown={onKeyDown}
      >
-        <IconButton size={'small'}>
-          <DetailsSvg />
-        </IconButton>
-      </ButtonPopoverList>
-      <RenameDialog
-        defaultValue={page.name}
-        open={renameDialogOpen}
-        onClose={() => setRenameDialogOpen(false)}
-        onOk={async (newName: string) => {
-          await onRename(newName);
-          setRenameDialogOpen(false);
-        }}
-      />
+        <DetailsSvg />
+      </OperationMenu>
+
      <DeleteDialog
        layout={page.layout}
        open={deleteDialogOpen}
-        onClose={() => setDeleteDialogOpen(false)}
-        onOk={async () => {
-          await onDelete();
+        onClose={() => {
          setDeleteDialogOpen(false);
        }}
+        onOk={onDelete}
      />
+      {renameDialogOpen && (
+        <RenameDialog
+          defaultValue={page.name}
+          open={renameDialogOpen}
+          onClose={() => setRenameDialogOpen(false)}
+          onOk={onRename}
+        />
+      )}
    </>
  );
 }
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts
@ -1,12 +1,11 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { Page, pagesActions, pageTypeMap } from '$app_reducers/pages/slice';
+import { useCallback, useEffect } from 'react';
+import { pagesActions, pageTypeMap, parserViewPBToPage } from '$app_reducers/pages/slice';
 import { useAppDispatch, useAppSelector } from '$app/stores/store';
 import { FolderNotification, ViewLayoutPB } from '@/services/backend';
 import { useNavigate, useParams } from 'react-router-dom';
 import { updatePageName } from '$app_reducers/pages/async_actions';
 import { createPage, deletePage, duplicatePage, getChildPages } from '$app/application/folder/page.service';
 import { subscribeNotifications } from '$app/application/notification';
-import debounce from 'lodash-es/debounce';

 export function useLoadChildPages(pageId: string) {
  const dispatch = useAppDispatch();
@ -20,14 +19,6 @@ export function useLoadChildPages(pageId: string) {
    }
  }, [dispatch, pageId, collapsed]);

-  const onPageChanged = useMemo(() => {
-    return debounce((page: Page) => {
-      console.log('DidUpdateView');
-
-      dispatch(pagesActions.onPageChanged(page));
-    }, 200);
-  }, [dispatch]);
-
  const loadPageChildren = useCallback(
    async (pageId: string) => {
      const childPages = await getChildPages(pageId);
@ -49,9 +40,19 @@ export function useLoadChildPages(pageId: string) {
  useEffect(() => {
    const unsubscribePromise = subscribeNotifications(
      {
-        [FolderNotification.DidUpdateView]: (_payload) => {
-          // const page = parserViewPBToPage(payload);
-          // onPageChanged(page);
+        [FolderNotification.DidUpdateView]: async (payload) => {
+          const childViews = payload.child_views;
+
+          if (childViews.length === 0) {
+            return;
+          }
+
+          dispatch(
+            pagesActions.addChildPages({
+              id: pageId,
+              childPages: childViews.map(parserViewPBToPage),
+            })
+          );
        },
        [FolderNotification.DidUpdateChildViews]: async (payload) => {
          if (payload.delete_child_views.length === 0 && payload.create_child_views.length === 0) {
@ -67,7 +68,7 @@ export function useLoadChildPages(pageId: string) {
    );

    return () => void unsubscribePromise.then((unsubscribe) => unsubscribe());
-  }, [pageId, onPageChanged, loadPageChildren]);
+  }, [pageId, loadPageChildren, dispatch]);

  return {
    toggleCollapsed,
@ -79,13 +80,16 @@ export function useLoadChildPages(pageId: string) {
 export function usePageActions(pageId: string) {
  const page = useAppSelector((state) => state.pages.pageMap[pageId]);
  const dispatch = useAppDispatch();
+  const params = useParams();
+  const currentPageId = params.id;
  const navigate = useNavigate();

  const onPageClick = useCallback(() => {
+    if (!page) return;
    const pageType = pageTypeMap[page.layout];

    navigate(`/page/${pageType}/${pageId}`);
-  }, [navigate, page.layout, pageId]);
+  }, [navigate, page, pageId]);

  const onAddPage = useCallback(
    async (layout: ViewLayoutPB) => {
@ -95,6 +99,18 @@ export function usePageActions(pageId: string) {
        parent_view_id: pageId,
      });

+      dispatch(
+        pagesActions.addPage({
+          page: {
+            id: newViewId,
+            parentId: pageId,
+            layout,
+            name: '',
+          },
+          isLast: true,
+        })
+      );
+
      dispatch(pagesActions.expandPage(pageId));
      const pageType = pageTypeMap[layout];

@ -104,12 +120,17 @@ export function usePageActions(pageId: string) {
  );

  const onDeletePage = useCallback(async () => {
+    if (currentPageId === pageId) {
+      navigate(`/`);
+    }
+
    await deletePage(pageId);
-  }, [pageId]);
+    dispatch(pagesActions.deletePages([pageId]));
+  }, [dispatch, currentPageId, navigate, pageId]);

  const onDuplicatePage = useCallback(async () => {
-    await duplicatePage(pageId);
-  }, [pageId]);
+    await duplicatePage(page);
+  }, [page]);

  const onRenamePage = useCallback(
    async (name: string) => {
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.tsx
@ -4,28 +4,44 @@ import { TransitionGroup } from 'react-transition-group';
 import NestedPageTitle from '$app/components/layout/nested_page/NestedPageTitle';
 import { useLoadChildPages, usePageActions } from '$app/components/layout/nested_page/NestedPage.hooks';
 import { useDrag } from 'src/appflowy_app/components/_shared/drag_block';
-import { useAppDispatch } from '$app/stores/store';
+import { useAppDispatch, useAppSelector } from '$app/stores/store';
 import { movePageThunk } from '$app_reducers/pages/async_actions';
+import { ViewLayoutPB } from '@/services/backend';

 function NestedPage({ pageId }: { pageId: string }) {
  const { toggleCollapsed, collapsed, childPages } = useLoadChildPages(pageId);
  const { onAddPage, onPageClick, onDeletePage, onDuplicatePage, onRenamePage } = usePageActions(pageId);
  const dispatch = useAppDispatch();
+  const page = useAppSelector((state) => state.pages.pageMap[pageId]);
+  const disableChildren = useAppSelector((state) => {
+    if (!page) return true;
+    const layout = state.pages.pageMap[page.parentId]?.layout;
+
+    return !(layout === undefined || layout === ViewLayoutPB.Document);
+  });
  const children = useMemo(() => {
+    if (disableChildren) {
+      return [];
+    }
+
    return collapsed ? [] : childPages;
-  }, [collapsed, childPages]);
+  }, [collapsed, childPages, disableChildren]);

  const onDragFinished = useCallback(
    (result: { dragId: string; position: 'before' | 'after' | 'inside' }) => {
+      const { dragId, position } = result;
+
+      if (dragId === pageId) return;
+      if (position === 'inside' && page?.layout !== ViewLayoutPB.Document) return;
      void dispatch(
        movePageThunk({
-          sourceId: result.dragId,
+          sourceId: dragId,
          targetId: pageId,
-          insertType: result.position,
+          insertType: position,
        })
      );
    },
-    [dispatch, pageId]
+    [dispatch, page?.layout, pageId]
  );

  const { onDrop, dropPosition, onDragOver, onDragLeave, onDragStart, onDragEnd, isDraggingOver, isDragging } = useDrag({
@ -34,20 +50,20 @@ function NestedPage({ pageId }: { pageId: string }) {
  });

  const className = useMemo(() => {
-    const defaultClassName = 'relative flex-1 flex flex-col w-full';
+    const defaultClassName = 'relative flex-1 select-none flex flex-col w-full';

    if (isDragging) {
      return `${defaultClassName} opacity-40`;
    }

-    if (isDraggingOver && dropPosition === 'inside') {
+    if (isDraggingOver && dropPosition === 'inside' && page?.layout === ViewLayoutPB.Document) {
      if (dropPosition === 'inside') {
        return `${defaultClassName} bg-content-blue-100`;
      }
    } else {
      return defaultClassName;
    }
-  }, [dropPosition, isDragging, isDraggingOver]);
+  }, [dropPosition, isDragging, isDraggingOver, page?.layout]);

  return (
    <div
@ -58,15 +74,17 @@ function NestedPage({ pageId }: { pageId: string }) {
      onDragEnd={onDragEnd}
      onDrop={onDrop}
      draggable={true}
+      data-drop-enabled={page?.layout === ViewLayoutPB.Document}
+      data-dragging={isDragging}
      data-page-id={pageId}
    >
      <div
        style={{
-          height: dropPosition === 'before' || dropPosition === 'after' ? '4px' : '0px',
-          top: dropPosition === 'before' ? '-4px' : 'auto',
-          bottom: dropPosition === 'after' ? '-4px' : 'auto',
+          height: dropPosition === 'before' || dropPosition === 'after' ? '2px' : '0px',
+          top: dropPosition === 'before' ? '-2px' : 'auto',
+          bottom: dropPosition === 'after' ? '-2px' : 'auto',
        }}
-        className={'pointer-events-none absolute left-0 z-10 w-full bg-content-blue-100'}
+        className={'pointer-events-none absolute left-0 z-10 w-full bg-content-blue-300'}
      />
      <NestedPageTitle
        onClick={() => {
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPageTitle.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPageTitle.tsx
@ -1,11 +1,14 @@
-import React, { useState } from 'react';
-import { ArrowRightSvg } from '$app/components/_shared/svg/ArrowRightSvg';
+import React, { useMemo, useState } from 'react';
 import { useAppSelector } from '$app/stores/store';
 import AddButton from './AddButton';
 import MoreButton from './MoreButton';
 import { ViewLayoutPB } from '@/services/backend';
 import { useSelectedPage } from '$app/components/layout/nested_page/NestedPage.hooks';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as MoreIcon } from '$app/assets/more.svg';
+import { IconButton } from '@mui/material';
+import { Page } from '$app_reducers/pages/slice';
+import { getPageIcon } from '$app/hooks/page.hooks';

 function NestedPageTitle({
  pageId,
@ -28,51 +31,68 @@ function NestedPageTitle({
 }) {
  const { t } = useTranslation();
  const page = useAppSelector((state) => {
-    return state.pages.pageMap[pageId];
+    return state.pages.pageMap[pageId] as Page | undefined;
  });
+  const disableChildren = useAppSelector((state) => {
+    if (!page) return true;
+    const layout = state.pages.pageMap[page.parentId]?.layout;
+
+    return !(layout === undefined || layout === ViewLayoutPB.Document);
+  });
+
  const [isHovering, setIsHovering] = useState(false);
  const isSelected = useSelectedPage(pageId);

+  const pageIcon = useMemo(() => (page ? getPageIcon(page) : null), [page]);
+
  return (
    <div
-      className={`m-1 cursor-pointer rounded-lg bg-opacity-40 px-2 py-1  ${isHovering ? 'bg-fill-list-hover' : ''} ${
-        isSelected ? 'bg-fill-list-hover' : ''
+      className={`my-0.5 cursor-pointer rounded-lg bg-opacity-40 p-0.5  ${isHovering ? 'bg-fill-list-hover' : ''} ${
+        isSelected ? 'bg-fill-list-active' : ''
      }`}
      onClick={onClick}
-      onMouseEnter={() => setIsHovering(true)}
+      onMouseMove={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      <div className={'flex h-6 w-[100%] items-center justify-between'}>
-        <div className={'flex flex-1 items-center justify-start overflow-hidden'}>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleCollapsed();
-            }}
-            style={{
-              transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)',
-            }}
-            className={'flex h-[100%] w-8 items-center justify-center p-2'}
-          >
-            <div className={'h-5 w-5'}>
-              <ArrowRightSvg />
-            </div>
-          </button>
-          {page.icon ? <div className={'mr-1 h-5 w-5'}>{page.icon.value}</div> : null}
+        <div className={'flex flex-1 items-center justify-start gap-1 overflow-hidden'}>
+          {disableChildren ? (
+            <div className={'mx-2 h-1 w-1 rounded-full bg-text-title'} />
+          ) : (
+            <IconButton
+              size={'small'}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCollapsed();
+              }}
+              style={{
+                transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)',
+              }}
+            >
+              <MoreIcon className={'h-4 w-4 text-text-title'} />
+            </IconButton>
+          )}
+
+          {pageIcon}

          <div className={'flex-1 overflow-hidden text-ellipsis whitespace-nowrap'}>
-            {page.name || t('menuAppHeader.defaultNewPageName')}
+            {page?.name || t('menuAppHeader.defaultNewPageName')}
          </div>
        </div>
-        <div onClick={(e) => e.stopPropagation()} className={'min:w-14 flex items-center justify-end'}>
-          <AddButton isVisible={isHovering} onAddPage={onAddPage} />
-          <MoreButton
-            page={page}
-            isVisible={isHovering}
-            onDelete={onDelete}
-            onDuplicate={onDuplicate}
-            onRename={onRename}
-          />
+        <div onClick={(e) => e.stopPropagation()} className={'min:w-14 flex items-center justify-end px-2'}>
+          {page?.layout === ViewLayoutPB.Document && (
+            <AddButton setHovering={setIsHovering} isHovering={isHovering} onAddPage={onAddPage} />
+          )}
+          {page && (
+            <MoreButton
+              setHovering={setIsHovering}
+              isHovering={isHovering}
+              page={page}
+              onDelete={onDelete}
+              onDuplicate={onDuplicate}
+              onRename={onRename}
+            />
+          )}
        </div>
      </div>
    </div>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/OperationMenu.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/OperationMenu.tsx
@ -0,0 +1,103 @@
+import React, { ReactNode, useCallback, useMemo, useState } from 'react';
+import { IconButton } from '@mui/material';
+import Popover from '@mui/material/Popover';
+import KeyboardNavigation from '$app/components/_shared/keyboard_navigation/KeyboardNavigation';
+import Tooltip from '@mui/material/Tooltip';
+
+function OperationMenu({
+  options,
+  onConfirm,
+  isHovering,
+  setHovering,
+  children,
+  tooltip,
+  onKeyDown,
+}: {
+  isHovering: boolean;
+  setHovering: (hovering: boolean) => void;
+  options: {
+    key: string;
+    title: string;
+    icon: React.ReactNode;
+    caption?: string;
+  }[];
+  children: React.ReactNode;
+  onConfirm: (key: string) => void;
+  tooltip: string;
+  onKeyDown?: (e: KeyboardEvent) => void;
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const renderItem = useCallback((title: string, icon: ReactNode, caption?: string) => {
+    return (
+      <div className={'flex w-full items-center justify-between gap-2 px-1 font-medium'}>
+        {icon}
+        <div className={'flex-1'}>{title}</div>
+        <div className={'text-right text-text-caption'}>{caption || ''}</div>
+      </div>
+    );
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+    setHovering(false);
+  }, [setHovering]);
+
+  const optionList = useMemo(() => {
+    return options.map((option) => {
+      return {
+        key: option.key,
+        content: renderItem(option.title, option.icon, option.caption),
+      };
+    });
+  }, [options, renderItem]);
+
+  const open = Boolean(anchorEl);
+
+  const handleConfirm = useCallback(
+    (key: string) => {
+      onConfirm(key);
+      handleClose();
+    },
+    [handleClose, onConfirm]
+  );
+
+  return (
+    <>
+      <Tooltip disableInteractive={true} title={tooltip}>
+        <IconButton
+          size={'small'}
+          onClick={(e) => {
+            setAnchorEl(e.currentTarget);
+          }}
+          className={`${!isHovering ? 'invisible' : ''} text-icon-primary`}
+        >
+          {children}
+        </IconButton>
+      </Tooltip>
+
+      <Popover
+        onClose={handleClose}
+        open={open}
+        anchorEl={anchorEl}
+        disableRestoreFocus={true}
+        keepMounted={false}
+        PaperProps={{
+          className: 'py-2',
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <KeyboardNavigation
+          onKeyDown={onKeyDown}
+          onEscape={handleClose}
+          options={optionList}
+          onConfirm={handleConfirm}
+        />
+      </Popover>
+    </>
+  );
+}
+
+export default OperationMenu;
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/side_bar/Resizer.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/side_bar/Resizer.tsx
@ -10,6 +10,7 @@ function Resizer() {
  const startX = useRef(0);
  const onResize = useCallback(
    (e: MouseEvent) => {
+      e.preventDefault();
      const diff = e.clientX - startX.current;
      const newWidth = width + diff;

--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/side_bar/SideBar.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/side_bar/SideBar.tsx
@ -1,6 +1,5 @@
 import React from 'react';
 import { useAppSelector } from '$app/stores/store';
-import { ThemeMode } from '$app/stores/reducers/current-user/slice';
 import { AppflowyLogoDark } from '$app/components/_shared/svg/AppflowyLogoDark';
 import { AppflowyLogoLight } from '$app/components/_shared/svg/AppflowyLogoLight';
 import CollapseMenuButton from '$app/components/layout/collapse_menu_button/CollapseMenuButton';
@ -10,19 +9,19 @@ import WorkspaceManager from '$app/components/layout/workspace_manager/Workspace

 function SideBar() {
  const { isCollapsed, width, isResizing } = useAppSelector((state) => state.sidebar);
-  const isDark = useAppSelector((state) => state.currentUser?.userSetting?.themeMode === ThemeMode.Dark);
+  const isDark = useAppSelector((state) => state.currentUser?.userSetting?.isDark);

  return (
    <>
      <div
        style={{
          width: isCollapsed ? 0 : width,
-          transition: isResizing ? 'none' : 'width 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+          transition: isResizing ? 'none' : 'width 250ms cubic-bezier(0.4, 0, 0.2, 1)',
        }}
        className={'relative h-screen overflow-hidden'}
      >
        <div className={'flex h-[100vh] flex-col overflow-hidden border-r border-line-divider bg-bg-base'}>
-          <div className={'flex h-[64px] justify-between px-6 py-5'}>
+          <div className={'flex h-[64px] justify-between px-4 py-5'}>
            {isDark ? <AppflowyLogoDark /> : <AppflowyLogoLight />}
            <CollapseMenuButton />
          </div>
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/side_bar/UserInfo.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/side_bar/UserInfo.tsx
@ -1,37 +1,46 @@
 import React, { useState } from 'react';
 import { useAppSelector } from '$app/stores/store';
-import { Avatar } from '@mui/material';
+import { Avatar, IconButton } from '@mui/material';
 import PersonOutline from '@mui/icons-material/PersonOutline';
-import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import UserSetting from '../user_setting/UserSetting';
+import { ReactComponent as SettingIcon } from '$app/assets/settings.svg';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from 'react-i18next';

 function UserInfo() {
  const currentUser = useAppSelector((state) => state.currentUser);
  const [showUserSetting, setShowUserSetting] = useState(false);

+  const { t } = useTranslation();
+
  return (
    <>
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-          setShowUserSetting(!showUserSetting);
-        }}
-        className={'flex cursor-pointer items-center px-6 text-text-title'}
-      >
-        <Avatar
-          sx={{
-            width: 23,
-            height: 23,
-          }}
-          className={'text-text-title'}
-          variant={'rounded'}
-        >
-          <PersonOutline />
-        </Avatar>
-        <span className={'ml-2 text-sm'}>{currentUser.displayName}</span>
-        <button className={'ml-2 rounded hover:bg-fill-list-hover'}>
-          <ArrowDropDown />
-        </button>
+      <div className={'flex w-full cursor-pointer select-none items-center justify-between px-4 text-text-title'}>
+        <div className={'flex w-full flex-1 items-center gap-1'}>
+          <Avatar
+            sx={{
+              width: 26,
+              height: 26,
+              backgroundColor: 'var(--fill-list-active)',
+            }}
+            className={'text-xs font-bold text-text-title'}
+            variant={'circular'}
+          >
+            {currentUser.displayName ? currentUser.displayName[0] : <PersonOutline />}
+          </Avatar>
+          <span className={'ml-2 flex-1 text-xs'}>{currentUser.displayName}</span>
+        </div>
+
+        <Tooltip disableInteractive={true} title={t('settings.menu.open')}>
+          <IconButton
+            size={'small'}
+            onClick={() => {
+              setShowUserSetting(!showUserSetting);
+            }}
+          >
+            <SettingIcon className={'text-text-title'} />
+          </IconButton>
+        </Tooltip>
      </div>

      <UserSetting open={showUserSetting} onClose={() => setShowUserSetting(false)} />
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/TopBar.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/TopBar.tsx
@ -2,8 +2,6 @@ import React from 'react';
 import CollapseMenuButton from '$app/components/layout/collapse_menu_button/CollapseMenuButton';
 import { useAppSelector } from '$app/stores/store';
 import Breadcrumb from '$app/components/layout/bread_crumb/BreadCrumb';
-import ShareButton from '$app/components/layout/share/Share';
-import MoreButton from '$app/components/layout/top_bar/MoreButton';

 function TopBar() {
  const sidebarIsCollapsed = useAppSelector((state) => state.sidebar.isCollapsed);
@ -19,13 +17,6 @@ function TopBar() {
        <div className={'flex-1'}>
          <Breadcrumb />
        </div>
-        <div className={'flex items-center justify-end'}>
-          <div className={'mr-2'}>
-            <ShareButton />
-          </div>
-
-          <MoreButton />
-        </div>
      </div>
    </div>
  );
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/AppearanceSetting.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/AppearanceSetting.tsx
@ -1,12 +1,11 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Select from '@mui/material/Select';
 import { Theme, ThemeMode, UserSetting } from '$app/stores/reducers/current-user/slice';
 import MenuItem from '@mui/material/MenuItem';
 import { useTranslation } from 'react-i18next';

 function AppearanceSetting({
-  theme = Theme.Default,
-  themeMode = ThemeMode.Light,
+  themeMode = ThemeMode.System,
  onChange,
 }: {
  theme?: Theme;
@ -15,13 +14,6 @@ function AppearanceSetting({
 }) {
  const { t } = useTranslation();

-  useEffect(() => {
-    const html = document.documentElement;
-
-    html?.setAttribute('data-dark-mode', String(themeMode === ThemeMode.Dark));
-    html?.setAttribute('data-theme', theme);
-  }, [theme, themeMode]);
-
  const themeModeOptions = useMemo(
    () => [
      {
@ -32,6 +24,10 @@ function AppearanceSetting({
        value: ThemeMode.Dark,
        content: t('settings.appearance.themeMode.dark'),
      },
+      {
+        value: ThemeMode.System,
+        content: t('settings.appearance.themeMode.system'),
+      },
    ],
    [t]
  );
@ -63,7 +59,7 @@ function AppearanceSetting({
                }}
              >
                {options.map((option) => (
-                  <MenuItem key={option.value} value={option.value}>
+                  <MenuItem key={option.value} className={'my-1 rounded-none px-2 py-1 text-xs'} value={option.value}>
                    {option.content}
                  </MenuItem>
                ))}
@ -86,6 +82,9 @@ function AppearanceSetting({
          onChange: (newValue) => {
            onChange({
              themeMode: newValue as ThemeMode,
+              isDark:
+                newValue === ThemeMode.Dark ||
+                (newValue === ThemeMode.System && window.matchMedia('(prefers-color-scheme: dark)').matches),
            });
          },
        },
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/LanguageSetting.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/LanguageSetting.tsx
@ -61,7 +61,7 @@ function LanguageSetting({
            }}
          >
            {languages.map((option) => (
-              <MenuItem key={option.key} value={option.key}>
+              <MenuItem key={option.key} className={'my-1 w-full rounded-none px-2 py-1 text-xs'} value={option.key}>
                {option.title}
              </MenuItem>
            ))}
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/Menu.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/Menu.tsx
@ -27,7 +27,7 @@ function UserSettingMenu({ selected, onSelect }: { onSelect: (selected: MenuItem
  }, [t]);

  return (
-    <div className={'h-[300px] w-[200px] border-r border-solid border-r-line-border pr-4 text-sm'}>
+    <div className={'h-[300px] w-[200px] border-r border-solid border-r-line-border pr-4 text-xs'}>
      {options.map((option) => {
        return (
          <div
@ -35,7 +35,7 @@ function UserSettingMenu({ selected, onSelect }: { onSelect: (selected: MenuItem
            onClick={() => {
              onSelect(option.value);
            }}
-            className={`my-1 flex h-10 w-full cursor-pointer items-center justify-start rounded-md px-4 py-2 text-text-title ${
+            className={`my-1 flex w-full cursor-pointer items-center justify-start rounded-md p-2 text-xs text-text-title ${
              selected === option.value ? 'bg-fill-list-hover' : 'hover:text-content-blue-300'
            }`}
          >
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/UserSetting.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/user_setting/UserSetting.tsx
@ -5,10 +5,9 @@ import DialogTitle from '@mui/material/DialogTitle';
 import Slide, { SlideProps } from '@mui/material/Slide';
 import UserSettingMenu, { MenuItem } from './Menu';
 import UserSettingPanel from './SettingPanel';
-import { Theme, UserSetting } from '$app/stores/reducers/current-user/slice';
+import { UserSetting } from '$app/stores/reducers/current-user/slice';
 import { useAppDispatch, useAppSelector } from '$app/stores/store';
 import { currentUserActions } from '$app_reducers/current-user/slice';
-import { ThemeModePB } from '@/services/backend';
 import { useTranslation } from 'react-i18next';
 import { UserService } from '$app/application/user/user.service';

@ -29,8 +28,8 @@ function UserSettings({ open, onClose }: { open: boolean; onClose: () => void })
      const language = newSetting.language || 'en';

      void UserService.setAppearanceSetting({
-        theme: newSetting.theme || Theme.Default,
-        theme_mode: newSetting.themeMode || ThemeModePB.Light,
+        theme: newSetting.theme,
+        theme_mode: newSetting.themeMode,
        locale: {
          language_code: language.split('-')[0],
          country_code: language.split('-')[1],
@ -48,7 +47,7 @@ function UserSettings({ open, onClose }: { open: boolean; onClose: () => void })
      keepMounted={false}
      onClose={onClose}
    >
-      <DialogTitle>{t('settings.title')}</DialogTitle>
+      <DialogTitle className={'text-sm'}>{t('settings.title')}</DialogTitle>
      <DialogContent className={'flex w-[540px]'}>
        <UserSettingMenu
          onSelect={(selected) => {
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/MoreButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/MoreButton.tsx
@ -1,64 +0,0 @@
-import React, { useMemo } from 'react';
-import { WorkspaceItem } from '$app_reducers/workspace/slice';
-import { IconButton } from '@mui/material';
-import MoreIcon from '@mui/icons-material/MoreHoriz';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { useTranslation } from 'react-i18next';
-import { DeleteOutline } from '@mui/icons-material';
-import ButtonPopoverList from '$app/components/_shared/button_menu/ButtonMenu';
-
-function MoreButton({
-  workspace,
-  isHovered,
-  onDelete,
-}: {
-  isHovered: boolean;
-  workspace: WorkspaceItem;
-  onDelete: (id: string) => void;
-}) {
-  const { t } = useTranslation();
-
-  const options = useMemo(() => {
-    return [
-      {
-        key: 'settings',
-        icon: <SettingsIcon />,
-        label: t('settings.title'),
-        onClick: () => {
-          //
-        },
-      },
-      {
-        key: 'delete',
-        icon: <DeleteOutline />,
-        label: t('button.delete'),
-        onClick: () => onDelete(workspace.id),
-      },
-    ];
-  }, [onDelete, t, workspace.id]);
-
-  return (
-    <>
-      <ButtonPopoverList
-        isVisible={isHovered}
-        popoverOrigin={{
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
-        }}
-        popoverOptions={options}
-      >
-        <IconButton>
-          <MoreIcon />
-        </IconButton>
-      </ButtonPopoverList>
-    </>
-  );
-}
-
-export default MoreButton;
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/NestedPages.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/NestedPages.tsx
@ -8,7 +8,7 @@ function WorkspaceNestedPages({ workspaceId }: { workspaceId: string }) {
  });

  return (
-    <div className={'h-full'}>
+    <div className={'h-full w-full overflow-x-hidden p-4 text-xs'}>
      {pageIds?.map((pageId) => (
        <NestedPage key={pageId} pageId={pageId} />
      ))}
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/NewPageButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/NewPageButton.tsx
@ -1,35 +1,29 @@
 import React from 'react';
-import AddSvg from '$app/components/_shared/svg/AddSvg';
 import { useTranslation } from 'react-i18next';
-import { ViewLayoutPB } from '@/services/backend';
-import { useNavigate } from 'react-router-dom';
-import { createCurrentWorkspaceChildView } from '$app/application/folder/workspace.service';
+import { useWorkspaceActions } from '$app/components/layout/workspace_manager/Workspace.hooks';
+import Button from '@mui/material/Button';
+import { ReactComponent as AddSvg } from '$app/assets/add.svg';

 function NewPageButton({ workspaceId }: { workspaceId: string }) {
  const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { newPage } = useWorkspaceActions(workspaceId);

  return (
-    <div className={'flex h-[60px] w-full items-center border-t border-line-divider px-6 py-5'}>
-      <button
-        onClick={async () => {
-          const { id } = await createCurrentWorkspaceChildView({
-            name: '',
-            layout: ViewLayoutPB.Document,
-            parent_view_id: workspaceId,
-          });
-
-          navigate(`/page/document/${id}`);
-        }}
-        className={'flex items-center hover:text-fill-default'}
-      >
-        <div className={'mr-2 rounded-full bg-fill-default'}>
-          <div className={'h-[24px] w-[24px] text-content-on-fill'}>
-            <AddSvg />
+    <div className={'flex h-[60px] w-full items-center border-t border-line-divider px-5 py-5'}>
+      <Button
+        color={'inherit'}
+        onClick={newPage}
+        startIcon={
+          <div className={'rounded-full bg-fill-default'}>
+            <div className={'flex h-[18px] w-[18px] items-center justify-center px-0 text-lg text-content-on-fill'}>
+              <AddSvg />
+            </div>
          </div>
-        </div>
+        }
+        className={'flex w-full items-center justify-start text-xs hover:bg-transparent hover:text-fill-default'}
+      >
        {t('newPageText')}
-      </button>
+      </Button>
    </div>
  );
 }
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/TrashButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/TrashButton.tsx
@ -30,14 +30,14 @@ function TrashButton() {
      onDragLeave={onDragLeave}
      data-page-id={'trash'}
      onClick={navigateToTrash}
-      className={`mx-1 my-3 flex h-[32px] w-[100%] items-center rounded-lg p-2 hover:bg-fill-list-hover ${
+      className={`my-3 flex h-[32px] w-[100%] cursor-pointer items-center gap-2 rounded-lg p-3.5 text-xs font-medium hover:bg-fill-list-hover ${
        selected ? 'bg-fill-list-active' : ''
      } ${isDraggingOver ? 'bg-fill-list-hover' : ''}`}
    >
-      <div className='h-6 w-6'>
+      <div className='h-5 w-5'>
        <TrashSvg />
      </div>
-      <span className={'ml-2'}>{t('trash.text')}</span>
+      <span>{t('trash.text')}</span>
    </div>
  );
 }
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/Workspace.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/Workspace.hooks.ts
@ -3,8 +3,10 @@ import { useAppDispatch, useAppSelector } from '$app/stores/store';
 import { workspaceActions, WorkspaceItem } from '$app_reducers/workspace/slice';
 import { Page, pagesActions, parserViewPBToPage } from '$app_reducers/pages/slice';
 import { subscribeNotifications } from '$app/application/notification';
-import { FolderNotification } from '@/services/backend';
+import { FolderNotification, ViewLayoutPB } from '@/services/backend';
 import * as workspaceService from '$app/application/folder/workspace.service';
+import { createCurrentWorkspaceChildView } from '$app/application/folder/workspace.service';
+import { useNavigate } from 'react-router-dom';

 export function useLoadWorkspaces() {
  const dispatch = useAppDispatch();
@ -95,3 +97,21 @@ export function useLoadWorkspace(workspace: WorkspaceItem) {
    deleteWorkspace,
  };
 }
+
+export function useWorkspaceActions(workspaceId: string) {
+  const navigate = useNavigate();
+
+  const newPage = useCallback(async () => {
+    const { id } = await createCurrentWorkspaceChildView({
+      name: '',
+      layout: ViewLayoutPB.Document,
+      parent_view_id: workspaceId,
+    });
+
+    navigate(`/page/document/${id}`);
+  }, [navigate, workspaceId]);
+
+  return {
+    newPage,
+  };
+}
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/Workspace.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/Workspace.tsx
@ -1,20 +1,65 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { WorkspaceItem } from '$app_reducers/workspace/slice';
 import NestedViews from '$app/components/layout/workspace_manager/NestedPages';
-import { useLoadWorkspace } from '$app/components/layout/workspace_manager/Workspace.hooks';
+import { useLoadWorkspace, useWorkspaceActions } from '$app/components/layout/workspace_manager/Workspace.hooks';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as AddIcon } from '$app/assets/add.svg';
+import { IconButton } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';

 function Workspace({ workspace, opened }: { workspace: WorkspaceItem; opened: boolean }) {
  useLoadWorkspace(workspace);
+  const { t } = useTranslation();
+  const { newPage } = useWorkspaceActions(workspace.id);
+  const [showPages, setShowPages] = useState(true);
+  const [showAdd, setShowAdd] = useState(false);
+
  return (
    <>
      <div
+        className={'w-full'}
        style={{
          height: opened ? '100%' : 0,
          overflow: 'hidden',
          transition: 'height 0.2s ease-in-out',
        }}
      >
-        <NestedViews workspaceId={workspace.id} />
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowPages(!showPages);
+          }}
+          onMouseEnter={() => {
+            setShowAdd(true);
+          }}
+          onMouseLeave={() => {
+            setShowAdd(false);
+          }}
+          className={'mt-2 flex h-[22px] w-full  cursor-pointer select-none items-center justify-between px-4'}
+        >
+          <Tooltip disableInteractive={true} placement={'top-start'} title={t('sideBar.clickToHidePersonal')}>
+            <Typography className={'rounded px-2 py-1 text-xs font-medium hover:bg-fill-list-active'}>
+              {t('sideBar.personal')}
+            </Typography>
+          </Tooltip>
+          {showAdd && (
+            <Tooltip disableInteractive={true} title={t('sideBar.addAPage')}>
+              <IconButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void newPage();
+                }}
+                size={'small'}
+              >
+                <AddIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+        </div>
+
+        {showPages && <NestedViews workspaceId={workspace.id} />}
      </div>
    </>
  );
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/WorkspaceManager.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/WorkspaceManager.tsx
@ -8,18 +8,17 @@ function WorkspaceManager() {
  const { workspaces, currentWorkspace } = useLoadWorkspaces();

  return (
-    <div className={'flex h-full flex-col justify-between'}>
-      <div className={'flex w-full flex-1 flex-col overflow-y-auto overflow-x-hidden'}>
+    <div className={'workspaces flex h-full select-none flex-col justify-between'}>
+      <div className={'mt-4 flex  w-full flex-1 select-none flex-col overflow-y-auto overflow-x-hidden'}>
        <div className={'flex-1'}>
          {workspaces.map((workspace) => (
            <Workspace opened={currentWorkspace?.id === workspace.id} key={workspace.id} workspace={workspace} />
          ))}
        </div>
-        <div className={'flex w-[100%] items-center px-2'}>
-          <TrashButton />
-        </div>
      </div>
-
+      <div className={'flex w-[100%] items-center px-2'}>
+        <TrashButton />
+      </div>
      {currentWorkspace && <NewPageButton workspaceId={currentWorkspace.id} />}
    </div>
  );
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/WorkspaceTitle.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/workspace_manager/WorkspaceTitle.tsx
@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-import MoreButton from '$app/components/layout/workspace_manager/MoreButton';
-import MenuItem from '@mui/material/MenuItem';
-import { WorkspaceItem } from '$app_reducers/workspace/slice';
-
-function WorkspaceTitle({
-  workspace,
-  openWorkspace,
-  onDelete,
-}: {
-  openWorkspace: () => void;
-  onDelete: (id: string) => void;
-  workspace: WorkspaceItem;
-}) {
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <MenuItem
-      onClick={() => openWorkspace()}
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
-      className={'hover:bg-fill-list-active'}
-    >
-      <div className={'flex w-[100%] items-center justify-between'}>
-        <div className={'flex-1 font-bold text-text-caption'}>{workspace.name}</div>
-        <div className='flex h-[23px] w-auto items-center justify-end'>
-          <MoreButton workspace={workspace} isHovered={isHovered} onDelete={onDelete} />
-        </div>
-      </div>
-    </MenuItem>
-  );
-}
-
-export default WorkspaceTitle;
--- a/frontend/appflowy_tauri/src/appflowy_app/components/trash/Trash.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/trash/Trash.tsx
@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import { DeleteOutline, RestoreOutlined } from '@mui/icons-material';
 import { useLoadTrash, useTrashActions } from '$app/components/trash/Trash.hooks';
-import { Divider, List } from '@mui/material';
+import { List } from '@mui/material';
 import TrashItem from '$app/components/trash/TrashItem';
-import DeleteConfirmDialog from '$app/components/_shared/delete_confirm_dialog/DeleteConfirmDialog';
+import DeleteConfirmDialog from '$app/components/_shared/confirm_dialog/DeleteConfirmDialog';

 function Trash() {
  const { t } = useTranslation();
@ -26,7 +26,7 @@ function Trash() {
  return (
    <div className={'flex flex-col'}>
      <div className={'flex items-center justify-between'}>
-        <div className={'text-2xl font-bold'}>{t('trash.text')}</div>
+        <div className={'px-2 text-lg font-bold'}>{t('trash.text')}</div>
        <div className={'flex items-center justify-end'}>
          <Button color={'inherit'} onClick={() => onClickRestoreAll()}>
            <RestoreOutlined />
@ -38,13 +38,12 @@ function Trash() {
          </Button>
        </div>
      </div>
-      <div className={'flex justify-around p-6 px-2 text-text-caption'}>
+      <div className={'flex justify-around gap-2 p-6 px-2 text-xs text-text-caption'}>
        <div className={'w-[40%]'}>{t('trash.pageHeader.fileName')}</div>
        <div className={'flex-1'}>{t('trash.pageHeader.lastModified')}</div>
        <div className={'flex-1'}>{t('trash.pageHeader.created')}</div>
        <div className={'w-[64px]'}></div>
      </div>
-      <Divider />
      <List>
        {trash.map((item) => (
          <TrashItem
--- a/frontend/appflowy_tauri/src/appflowy_app/components/trash/TrashItem.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/trash/TrashItem.tsx
@ -34,23 +34,23 @@ function TrashItem({
        paddingInline: 0,
      }}
    >
-      <div className={'flex w-[100%] items-center justify-around rounded-lg px-2 py-3 hover:bg-fill-list-hover'}>
-        <div className={'w-[40%] text-left'}>{item.name}</div>
+      <div className={'flex w-[100%] items-center justify-around gap-2 rounded-lg p-2 text-xs hover:bg-fill-list-hover'}>
+        <div className={'w-[40%] whitespace-break-spaces text-left'}>{item.name || t('document.title.placeholder')}</div>
        <div className={'flex-1'}>{dayjs.unix(item.modifiedTime).format('MM/DD/YYYY hh:mm A')}</div>
        <div className={'flex-1'}>{dayjs.unix(item.createTime).format('MM/DD/YYYY hh:mm A')}</div>
        <div
          style={{
            visibility: hoverId === item.id ? 'visible' : 'hidden',
          }}
-          className={'w-[64px]'}
+          className={'whitespace-nowrap'}
        >
          <Tooltip placement={'top-start'} title={t('button.putback')}>
-            <IconButton onClick={(_) => onPutback(item.id)} className={'mr-2'}>
+            <IconButton size={'small'} onClick={(_) => onPutback(item.id)} className={'mr-2'}>
              <RestoreOutlined />
            </IconButton>
          </Tooltip>
          <Tooltip placement={'top-start'} title={t('button.delete')}>
-            <IconButton color={'error'} onClick={(_) => onDelete([item.id])}>
+            <IconButton size={'small'} color={'error'} onClick={(_) => onDelete([item.id])}>
              <DeleteOutline />
            </IconButton>
          </Tooltip>
--- a/frontend/appflowy_tauri/src/appflowy_app/hooks/page.hooks.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/hooks/page.hooks.tsx
@ -0,0 +1,26 @@
+import { ViewLayoutPB } from '@/services/backend';
+import React from 'react';
+import { Page } from '$app_reducers/pages/slice';
+import { ReactComponent as DocumentIcon } from '$app/assets/document.svg';
+import { ReactComponent as GridIcon } from '$app/assets/grid.svg';
+import { ReactComponent as BoardIcon } from '$app/assets/board.svg';
+import { ReactComponent as CalendarIcon } from '$app/assets/date.svg';
+
+export function getPageIcon(page: Page) {
+  if (page.icon) {
+    return page.icon.value;
+  }
+
+  switch (page.layout) {
+    case ViewLayoutPB.Document:
+      return <DocumentIcon className={'h-4 w-4'} />;
+    case ViewLayoutPB.Grid:
+      return <GridIcon className={'h-4 w-4'} />;
+    case ViewLayoutPB.Board:
+      return <BoardIcon className={'h-4 w-4'} />;
+    case ViewLayoutPB.Calendar:
+      return <CalendarIcon className={'h-4 w-4'} />;
+    default:
+      return null;
+  }
+}
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/current-user/slice.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/current-user/slice.ts
@ -8,6 +8,7 @@ export interface UserSetting {
  theme?: Theme;
  themeMode?: ThemeMode;
  language?: string;
+  isDark?: boolean;
 }

 export enum Theme {
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/pages/async_actions.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/pages/async_actions.ts
@ -14,7 +14,7 @@ export const movePageThunk = createAsyncThunk(
    thunkAPI
  ) => {
    const { sourceId, targetId, insertType } = payload;
-    const { getState } = thunkAPI;
+    const { getState, dispatch } = thunkAPI;
    const { pageMap, relationMap } = (getState() as RootState).pages;
    const sourcePage = pageMap[sourceId];
    const targetPage = pageMap[targetId];
@ -51,6 +51,8 @@ export const movePageThunk = createAsyncThunk(
      }
    }

+    dispatch(pagesActions.movePage({ id: sourceId, newParentId: parentId, prevId }));
+
    await movePage({
      view_id: sourceId,
      new_parent_id: parentId,
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/pages/slice.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/pages/slice.ts
@ -89,10 +89,85 @@ export const pagesSlice = createSlice({
      }
    },

-    removeChildPages(state, action: PayloadAction<string>) {
-      const parentId = action.payload;
+    addPage(
+      state,
+      action: PayloadAction<{
+        page: Page;
+        isLast?: boolean;
+        prevId?: string;
+      }>
+    ) {
+      const { page, prevId, isLast } = action.payload;

-      delete state.relationMap[parentId];
+      state.pageMap[page.id] = page;
+      state.relationMap[page.id] = [];
+
+      const parentId = page.parentId;
+
+      if (isLast) {
+        state.relationMap[parentId]?.push(page.id);
+      } else {
+        const index = prevId ? state.relationMap[parentId]?.indexOf(prevId) ?? -1 : -1;
+
+        state.relationMap[parentId]?.splice(index + 1, 0, page.id);
+      }
+    },
+
+    deletePages(state, action: PayloadAction<string[]>) {
+      const ids = action.payload;
+
+      ids.forEach((id) => {
+        const parentId = state.pageMap[id].parentId;
+        const parentChildren = state.relationMap[parentId];
+
+        state.relationMap[parentId] = parentChildren && parentChildren.filter((childId) => childId !== id);
+        delete state.relationMap[id];
+        delete state.expandedIdMap[id];
+        delete state.pageMap[id];
+      });
+    },
+
+    duplicatePage(
+      state,
+      action: PayloadAction<{
+        id: string;
+        newId: string;
+      }>
+    ) {
+      const { id, newId } = action.payload;
+      const page = state.pageMap[id];
+      const newPage = { ...page, id: newId };
+
+      state.pageMap[newPage.id] = newPage;
+
+      const index = state.relationMap[page.parentId]?.indexOf(id);
+
+      state.relationMap[page.parentId]?.splice(index ?? 0, 0, newId);
+    },
+
+    movePage(
+      state,
+      action: PayloadAction<{
+        id: string;
+        newParentId: string;
+        prevId?: string;
+      }>
+    ) {
+      const { id, newParentId, prevId } = action.payload;
+      const parentId = state.pageMap[id].parentId;
+      const parentChildren = state.relationMap[parentId];
+
+      const index = parentChildren?.indexOf(id) ?? -1;
+
+      if (index > -1) {
+        state.relationMap[parentId]?.splice(index, 1);
+      }
+
+      state.pageMap[id].parentId = newParentId;
+      const newParentChildren = state.relationMap[newParentId] || [];
+      const prevIndex = prevId ? newParentChildren.indexOf(prevId) : -1;
+
+      state.relationMap[newParentId]?.splice(prevIndex + 1, 0, id);
    },

    expandPage(state, action: PayloadAction<string>) {
--- a/frontend/appflowy_tauri/src/appflowy_app/utils/get_modifier.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/utils/get_modifier.ts
@ -0,0 +1,12 @@
+export const isMac = () => {
+  return navigator.userAgent.includes('Mac OS X');
+};
+
+const MODIFIERS = {
+  control: 'Ctrl',
+  meta: '⌘',
+};
+
+export const getModifier = () => {
+  return isMac() ? MODIFIERS.meta : MODIFIERS.control;
+};
--- a/frontend/appflowy_tauri/src/appflowy_app/utils/mui.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/utils/mui.ts
@ -1,11 +1,8 @@
-import { ThemeMode } from '$app/stores/reducers/current-user/slice';
 import { ThemeOptions } from '@mui/material';

 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-export const getDesignTokens = (mode: ThemeMode): ThemeOptions => {
-  const isDark = mode === ThemeMode.Dark;
-
+export const getDesignTokens = (isDark: boolean): ThemeOptions => {
  return {
    typography: {
      fontFamily: ['Poppins'].join(','),
--- a/frontend/appflowy_tauri/src/styles/template.css
+++ b/frontend/appflowy_tauri/src/styles/template.css
@ -24,10 +24,6 @@ body {
    width: 8px;
 }

-.MuiPopover-root::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-}


 :root[data-dark-mode=true] body {
--- a/frontend/resources/translations/en.json
+++ b/frontend/resources/translations/en.json
@ -879,7 +879,9 @@
      "page": {
        "label": "Link to page",
        "tooltip": "Click to open page"
-      }
+      },
+      "deleted": "Deleted",
+      "deletedContent": "This content does not exist or has been deleted"
    },
    "toolbar": {
      "resetToDefaultFont": "Reset to default"