fix(core): sidebar renaming menu pos (#7798)

packages/frontend/component/src/components/rename-modal/index.tsx

@@ -1,4 +1,4 @@
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactElement } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import Input from '../../ui/input';
@@ -8,12 +8,16 @@ export const RenameModal = ({
   onRename,
   currentName,
   open,
+  width = 220,
+  children,
   onOpenChange,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onRename: (newName: string) => void;
   currentName: string;
+  width?: string | number;
+  children?: ReactElement;
 }) => {
   const [value, setValue] = useState(currentName);
 
@@ -56,11 +60,11 @@ export const RenameModal = ({
           onEnter={handleRename}
           onKeyDown={onKeyDown}
           data-testid="rename-modal-input"
-          style={{ width: 220, height: 34, borderRadius: 4 }}
+          style={{ width, height: 34, borderRadius: 4 }}
         />
       }
     >
-      <div></div>
+      {children ?? <div />}
     </Menu>
   );
 };

packages/frontend/core/src/modules/explorer/views/tree/node.css.ts

@@ -36,6 +36,14 @@ export const itemRoot = style({
     },
   },
 });
+export const itemRenameAnchor = style({
+  pointerEvents: 'none',
+  position: 'absolute',
+  left: 0,
+  top: -10,
+  width: 10,
+  height: 10,
+});
 export const itemContent = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -140,7 +148,6 @@ export const contentContainer = style({
 
 export const draggingContainer = style({
   background: cssVar('--affine-background-primary-color'),
-  boxShadow: cssVar('--affine-toolbar-shadow'),
   width: '200px',
   borderRadius: '6px',
 });

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -11,6 +11,7 @@ import {
   useDropTarget,
 } from '@affine/component';
 import { RenameModal } from '@affine/component/rename-modal';
+import { appSidebarWidthAtom } from '@affine/core/components/app-sidebar/index.jotai';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
@@ -23,6 +24,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import type { To } from 'history';
+import { useAtomValue } from 'jotai';
 import {
   Fragment,
   type RefAttributes,
@@ -111,6 +113,7 @@ export const ExplorerTreeNode = ({
   // If no onClick or to is provided, clicking on the node will toggle the collapse state
   const clickForCollapse = !onClick && !to && !disabled;
   const [childCount, setChildCount] = useState(0);
+  const sidebarWidth = useAtomValue(appSidebarWidthAtom);
   const [renaming, setRenaming] = useState(defaultRenaming);
   const [lastInGroup, setLastInGroup] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
@@ -319,11 +322,14 @@ export const ExplorerTreeNode = ({
       )}
       {renameable && renaming && (
         <RenameModal
-          open={renaming}
+          open
+          width={sidebarWidth - 32}
           onOpenChange={setRenaming}
           onRename={handleRename}
           currentName={name ?? ''}
-        />
+        >
+          <div className={styles.itemRenameAnchor} />
+        </RenameModal>
       )}
 
       <div className={styles.itemContent}>{name}</div>