fix(core): multi sub menu layer handling (#8916)

fix AF-1800, AF-1801

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/7523df2b-2326-4878-b37a-d16e4275858d.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/7523df2b-2326-4878-b37a-d16e4275858d.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/7523df2b-2326-4878-b37a-d16e4275858d.mp4">20241126-0806-30.0904958.mp4</video>

packages/frontend/core/src/components/doc-properties/table.tsx

@@ -250,7 +250,7 @@ const DocWorkspacePropertiesTableBody = forwardRef<
     const workbenchService = useService(WorkbenchService);
     const viewService = useServiceOptional(ViewService);
     const properties = useLiveData(docsService.propertyList.sortedProperties$);
-    const [propertyCollapsed, setPropertyCollapsed] = useState(true);
+    const [addMoreCollapsed, setAddMoreCollapsed] = useState(true);
 
     const [newPropertyId, setNewPropertyId] = useState<string | null>(null);
 
@@ -262,6 +262,10 @@ const DocWorkspacePropertiesTableBody = forwardRef<
       [onPropertyAdded]
     );
 
+    const handleCollapseChange = useCallback(() => {
+      setNewPropertyId(null);
+    }, []);
+
     return (
       <PropertyCollapsibleSection
         ref={ref}
@@ -269,12 +273,13 @@ const DocWorkspacePropertiesTableBody = forwardRef<
         style={style}
         title={t.t('com.affine.workspace.properties')}
         defaultCollapsed={!defaultOpen}
+        onCollapseChange={handleCollapseChange}
         {...props}
       >
         <PropertyCollapsibleContent
           collapsible
-          collapsed={propertyCollapsed}
-          onCollapseChange={setPropertyCollapsed}
+          collapsed={addMoreCollapsed}
+          onCollapseChange={setAddMoreCollapsed}
           className={styles.tableBodySortable}
           collapseButtonText={({ hide, isCollapsed }) =>
             isCollapsed