Merge branch 'feat/workspace' into feat/dev

# Conflicts:
#	packages/app/src/components/header/page-header.tsx
#	packages/app/src/components/workspace-slider-bar/index.tsx

packages/app/src/providers/confirm-provider.tsx

@@ -3,12 +3,12 @@ import type { PropsWithChildren } from 'react';
 import { Confirm, ConfirmProps } from '@/ui/confirm';
 
 type ConfirmContextValue = {
-  confirm: (props: ConfirmProps) => void;
+  confirm: (props: ConfirmProps) => Promise<boolean>;
 };
 type ConfirmContextProps = PropsWithChildren<{}>;
 
 export const ConfirmContext = createContext<ConfirmContextValue>({
-  confirm: () => {},
+  confirm: () => Promise.resolve(false),
 });
 
 export const useConfirm = () => useContext(ConfirmContext);
@@ -22,21 +22,33 @@ export const ConfirmProvider = ({
   return (
     <ConfirmContext.Provider
       value={{
-        confirm: (props: ConfirmProps) => {
-          const confirmId = String(Date.now());
-          setConfirmRecord(oldConfirmRecord => {
-            return {
-              ...oldConfirmRecord,
-              [confirmId]: (
-                <Confirm
-                  {...props}
-                  onClose={() => {
-                    delete confirmRecord[confirmId];
-                    setConfirmRecord({ ...confirmRecord });
-                  }}
-                />
-              ),
+        confirm: ({ onClose, onCancel, onConfirm, ...props }: ConfirmProps) => {
+          return new Promise((resolve, reject) => {
+            const confirmId = String(Date.now());
+            const closeHandler = () => {
+              delete confirmRecord[confirmId];
+              setConfirmRecord({ ...confirmRecord });
             };
+            setConfirmRecord(oldConfirmRecord => {
+              return {
+                ...oldConfirmRecord,
+                [confirmId]: (
+                  <Confirm
+                    {...props}
+                    onCancel={() => {
+                      closeHandler();
+                      onCancel?.();
+                      resolve(false);
+                    }}
+                    onConfirm={() => {
+                      closeHandler();
+                      onConfirm?.();
+                      resolve(true);
+                    }}
+                  />
+                ),
+              };
+            });
           });
         },
       }}

packages/app/src/providers/editor-provider/editor-provider.tsx

@@ -39,6 +39,7 @@ type EditorHandlers = {
   favoritePage: (pageId: string) => void;
   unFavoritePage: (pageId: string) => void;
   toggleFavoritePage: (pageId: string) => void;
+  permanentlyDeletePage: (pageId: string) => void;
 };
 
 type EditorContextProps = PropsWithChildren<{}>;
@@ -59,6 +60,7 @@ export const EditorContext = createContext<EditorContextValue>({
   favoritePage: () => {},
   unFavoritePage: () => {},
   toggleFavoritePage: () => {},
+  permanentlyDeletePage: () => {},
 });
 
 export const useEditor = () => useContext(EditorContext);
@@ -108,19 +110,23 @@ export const EditorProvider = ({
       });
     },
     deletePage: pageId => {
-      workspace?.setPage(pageId, { trash: true });
+      workspace?.setPageMeta(pageId, { trash: true });
     },
     recyclePage: pageId => {
-      workspace?.setPage(pageId, { trash: false });
+      workspace?.setPageMeta(pageId, { trash: false });
     },
     toggleDeletePage: pageId => {
       const pageMeta = workspace?.meta.pages.find(p => p.id === pageId);
       if (pageMeta) {
-        workspace?.setPage(pageId, { trash: !pageMeta.trash });
+        workspace?.setPageMeta(pageId, { trash: !pageMeta.trash });
       }
     },
     favoritePage: pageId => {
-      workspace?.setPage(pageId, { favorite: true });
+      workspace?.setPageMeta(pageId, { favorite: true });
+    },
+    permanentlyDeletePage: pageId => {
+      // TODO:  workspace.meta.removePage or workspace.removePage?
+      workspace?.meta.removePage(pageId);
     },
     unFavoritePage: pageId => {
       workspace?.setPageMeta(pageId, { favorite: true });

packages/app/src/providers/themeProvider.tsx

@@ -1,9 +1,13 @@
+import { createContext, useContext, useEffect, useState } from 'react';
 import {
   ThemeProvider as EmotionThemeProvider,
   Global,
   css,
 } from '@emotion/react';
-import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  ThemeProvider as MuiThemeProvider,
+  createTheme as MuiCreateTheme,
+} from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 import {
   Theme,
@@ -26,6 +30,7 @@ export const ThemeContext = createContext<ThemeProviderValue>({
 });
 
 export const useTheme = () => useContext(ThemeContext);
+const muiTheme = MuiCreateTheme();
 
 export const ThemeProvider = ({
   defaultTheme = 'light',
@@ -87,16 +92,21 @@ export const ThemeProvider = ({
   // }, [mode]);
 
   return (
-    <ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>
-      <Global
-        styles={css`
-          :root {
-            ${globalThemeVariables(mode, themeStyle) as {}}
-          }
-        `}
-      />
-      <EmotionThemeProvider theme={themeStyle}>{children}</EmotionThemeProvider>
-    </ThemeContext.Provider>
+    // Use MuiThemeProvider is just because some Transitions in Mui components need it
+    <MuiThemeProvider theme={muiTheme}>
+      <ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>
+        <Global
+          styles={css`
+            :root {
+              ${globalThemeVariables(mode, themeStyle) as {}}
+            }
+          `}
+        />
+        <EmotionThemeProvider theme={themeStyle}>
+          {children}
+        </EmotionThemeProvider>
+      </ThemeContext.Provider>
+    </MuiThemeProvider>
   );
 };