feat: apply new deisgn on project tree to solve Critical create actions inaccessible issue on Project Tree

[liweitian]

Description

apply new design on project tree without the addTrigger and addDialog icons
https://www.figma.com/file/deFhMPBnRWxTYiYDYqYxrc/Composer-Vivek?node-id=10809%3A0

and

solve a bug on resizing the project window.
It does not re-render when resizing because the "leftSplitWidth" is not passed into the an useCallback function as a dependency. So some very long name dialog is still hidden after expanding the window.

Task Item

Closes #5681

Screenshots

[coveralls]

Coverage increased (+0.05%) to 55.098% when pulling 6d71ca5 on bug5681-2 into 8cde5d7 on main.

[hatpick]

As for the two svg Icons you are creating, I highly recommend looking into this:

import { createSvgIcon } from '@fluentui/react-icons';

from fabric.

Considering you have the svg code for the icons you can do this:

const myIconSvg = ` the svg code `; // svg code for the icon in string format
const MyIcon = createSvgIcon({ svg: () => myIconSvg, displayName: 'MyIcon' }); // Icon component showing the svg icon

now you can use MyIcon like <MyIcon style={ any style of type React.CSSProperties} />

[liweitian]

As for the two svg Icons you are creating, I highly recommend looking into this:

import { createSvgIcon } from '@fluentui/react-icons';

from fabric.

Considering you have the svg code for the icons you can do this:

const myIconSvg = ` the svg code `; // svg code for the icon in string format
const MyIcon = createSvgIcon({ svg: () => myIconSvg, displayName: 'MyIcon' }); // Icon component showing the svg icon

now you can use MyIcon like <MyIcon style={ any style of type React.CSSProperties} />

all comments handled