fix(core): keep the delete button from being blocked (#6836)

close #6718

packages/frontend/core/src/components/workspace/index.css.ts

@@ -93,6 +93,11 @@ export const toolStyle = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '12px',
+  selectors: {
+    '&.trash': {
+      bottom: '78px',
+    },
+  },
   '@media': {
     'screen and (max-width: 960px)': {
       right: 'calc((100vw - 640px) * 3 / 19 + 14px)',

packages/frontend/core/src/components/workspace/index.tsx

@@ -1,3 +1,9 @@
+import {
+  DocsService,
+  GlobalContextService,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
 import { clsx } from 'clsx';
 import { useAtomValue } from 'jotai';
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
@@ -63,7 +69,21 @@ export const MainContainer = forwardRef<
 MainContainer.displayName = 'MainContainer';
 
 export const ToolContainer = (props: PropsWithChildren): ReactElement => {
-  return <div className={toolStyle}>{props.children}</div>;
+  const docId = useLiveData(
+    useService(GlobalContextService).globalContext.docId.$
+  );
+  const docRecordList = useService(DocsService).list;
+  const doc = useLiveData(docId ? docRecordList.doc$(docId) : undefined);
+  const inTrash = useLiveData(doc?.meta$)?.trash;
+  return (
+    <div
+      className={clsx(toolStyle, {
+        trash: inTrash,
+      })}
+    >
+      {props.children}
+    </div>
+  );
 };
 
 export const WorkspaceFallback = (): ReactElement => {