chore: allow deleting toolbar + add icon for toolbar creation (#33544)

Fixes: #33395 

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9127232599>
> Commit: 70759b80893d1c014ca305020f1a9e429267de2c
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9127232599&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>

app/client/src/components/propertyControls/DraggableListCard.tsx

@@ -204,7 +204,7 @@ export function DraggableListCard(props: RenderComponentProps) {
             startIcon="settings-2-line"
           />
         )}
-        {showDelete && !isSeparator && (
+        {showDelete && (
           <Button
             className="t--delete-column-btn"
             isIconButton

app/client/src/components/propertyControls/ToolbarButtonListControl.tsx

@@ -0,0 +1,40 @@
+import { generateReactKey } from "utils/generators";
+
+import {
+  createMessage,
+  BUTTON_WIDGET_DEFAULT_LABEL,
+} from "@appsmith/constants/messages";
+import ButtonListControl from "./ButtonListControl";
+
+class ToolbarButtonListControl extends ButtonListControl {
+  addOption = ({ isSeparator }: { isSeparator?: boolean }) => {
+    let groupButtons = this.props.propertyValue;
+    const groupButtonsArray = this.getMenuItems();
+    const newGroupButtonId = generateReactKey({ prefix: "groupButton" });
+
+    groupButtons = {
+      ...groupButtons,
+      [newGroupButtonId]: {
+        id: newGroupButtonId,
+        index: groupButtonsArray.length,
+        label: isSeparator
+          ? "Separator"
+          : createMessage(BUTTON_WIDGET_DEFAULT_LABEL),
+        widgetId: generateReactKey(),
+        isDisabled: false,
+        itemType: isSeparator ? "SEPARATOR" : "BUTTON",
+        isVisible: true,
+        buttonVariant: "filled",
+        iconName: "thumb-up",
+      },
+    };
+
+    this.updateProperty(this.props.propertyName, groupButtons);
+  };
+
+  static getControlType() {
+    return "TOOLBAR_BUTTONS";
+  }
+}
+
+export default ToolbarButtonListControl;

app/client/src/components/propertyControls/index.ts

@@ -75,6 +75,7 @@ import {
 import type { IconSelectControlV2Props } from "./IconSelectControlV2";
 import IconSelectControlV2 from "./IconSelectControlV2";
 import PrimaryColumnsControlWDS from "./PrimaryColumnsControlWDS";
+import ToolbarButtonListControl from "./ToolbarButtonListControl";
 
 export const PropertyControls = {
   InputTextControl,
@@ -126,6 +127,7 @@ export const PropertyControls = {
   SectionSplitterControl,
   IconSelectControlV2,
   PrimaryColumnsControlWDS,
+  ToolbarButtonListControl,
 };
 
 export type PropertyControlPropsType =

app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/contentConfig.ts

@@ -11,7 +11,7 @@ export const propertyPaneContentConfig = [
       {
         helpText: "Group Buttons",
         propertyName: "buttonsList",
-        controlType: "GROUP_BUTTONS",
+        controlType: "TOOLBAR_BUTTONS",
         label: "Buttons",
         allowSeparators: true,
         dependencies: ["childStylesheet", "orientation"],