Added wrapper functions for draft, progress bar and change icon for remove confidential.

src/taskpane/components/AddDraft.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { 
+  Button
+} from "@fluentui/react-components";
+import { 
+  Edit24Regular
+} from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
+import { useCommonStyles } from "./commonStyles";
+
+export const AddDraft: React.FC = () => {
+  const styles = useCommonStyles();
+  const { 
+    statusMessage, setStatusMessage,
+    statusType, setStatusType,
+    isProcessing, setIsProcessing
+  } = useStatusContext();
+
+  const addDraftWatermark = async () => {
+    setIsProcessing(true);
+    try {
+      await PowerPoint.run(async (context) => {
+        const shapes = context.presentation.getSelectedShapes();
+        // Implementation will go here
+        setStatusMessage("Added draft watermark to slides.");
+        setStatusType("success");
+      });
+    } catch (error) {
+      setStatusMessage(`Error: ${error.message}`);
+      setStatusType("error");
+      console.error("Add draft watermark error:", error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.buttonGroup}>
+        <Button 
+          appearance="primary" 
+          className={styles.actionButton}
+          onClick={addDraftWatermark} 
+          icon={<Edit24Regular />}
+          disabled={isProcessing}
+        >
+          Add Draft
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AddDraft;

src/taskpane/components/AddProgressBar.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { 
+  Button
+} from "@fluentui/react-components";
+import { 
+  GaugeRegular
+} from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
+import { useCommonStyles } from "./commonStyles";
+
+export const AddProgressBar: React.FC = () => {
+  const styles = useCommonStyles();
+  const { 
+    statusMessage, setStatusMessage,
+    statusType, setStatusType,
+    isProcessing, setIsProcessing
+  } = useStatusContext();
+
+  const addProgressBar = async () => {
+    setIsProcessing(true);
+    try {
+      await PowerPoint.run(async (context) => {
+        const shapes = context.presentation.getSelectedShapes();
+        // Implementation will go here
+        setStatusMessage("Added progress bar to slides.");
+        setStatusType("success");
+      });
+    } catch (error) {
+      setStatusMessage(`Error: ${error.message}`);
+      setStatusType("error");
+      console.error("Add progress bar error:", error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.buttonGroup}>
+        <Button 
+          appearance="primary" 
+          className={styles.actionButton}
+          onClick={addProgressBar} 
+          icon={<GaugeRegular />}
+          disabled={isProcessing}
+        >
+          Add Progress Bar
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AddProgressBar;

src/taskpane/components/App.tsx

@@ -7,6 +7,10 @@ import SwapPositions from "./SwapPositions";
 import InsertTitles from "./InsertTitles";
 import AddConfidential from "./AddConfidential";
 import RemoveConfidential from "./RemoveConfidential";
+import AddDraft from "./AddDraft";
+import RemoveDraft from "./RemoveDraft";
+import AddProgressBar from "./AddProgressBar";
+import RemoveProgressBar from "./RemoveProgressBar";
 import { makeStyles, Text, Subtitle1, tokens, Theme, Spinner } from "@fluentui/react-components";
 import { ShapeUnionRegular, SquareRegular, InfoRegular } from "@fluentui/react-icons";
 
@@ -168,15 +172,22 @@ const App: React.FC<AppProps> = () => {
           <Subtitle1 block className={styles.sectionTitle}>
             Progress Bar
           </Subtitle1>
+          <AddProgressBar />
+          <div style={{ marginTop: "8px" }}></div>
+          <RemoveProgressBar />
         </div>
 
         <div className={styles.section}>
           <Subtitle1 block className={styles.sectionTitle}>
-            Confidential
+            Watermarks
           </Subtitle1>
           <AddConfidential />
           <div style={{ marginTop: "8px" }}></div>
           <RemoveConfidential />
+          <div style={{ marginTop: "8px" }}></div>
+          <AddDraft />
+          <div style={{ marginTop: "8px" }}></div>
+          <RemoveDraft />
         </div>
 
         <div className={styles.section}>

src/taskpane/components/RemoveConfidential.tsx

@@ -3,7 +3,7 @@ import {
   Button
 } from "@fluentui/react-components";
 import { 
-  ShieldDismissRegular
+  DismissRegular
 } from "@fluentui/react-icons";
 import { useStatusContext } from "./App";
 import { useCommonStyles } from "./commonStyles";
@@ -102,7 +102,7 @@ export const RemoveConfidential: React.FC = () => {
           appearance="primary" 
           className={styles.actionButton}
           onClick={removeConfidentialMarking} 
-          icon={<ShieldDismissRegular />}
+          icon={<DismissRegular />}
           disabled={isProcessing}
         >
           Remove Confidential

src/taskpane/components/RemoveDraft.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { 
+  Button
+} from "@fluentui/react-components";
+import { 
+  DismissRegular
+} from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
+import { useCommonStyles } from "./commonStyles";
+
+export const RemoveDraft: React.FC = () => {
+  const styles = useCommonStyles();
+  const { 
+    statusMessage, setStatusMessage,
+    statusType, setStatusType,
+    isProcessing, setIsProcessing
+  } = useStatusContext();
+
+  const removeDraftWatermark = async () => {
+    setIsProcessing(true);
+    try {
+      await PowerPoint.run(async (context) => {
+        const shapes = context.presentation.getSelectedShapes();
+        // Implementation will go here
+        setStatusMessage("Removed draft watermarks from slides.");
+        setStatusType("success");
+      });
+    } catch (error) {
+      setStatusMessage(`Error: ${error.message}`);
+      setStatusType("error");
+      console.error("Remove draft watermark error:", error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.buttonGroup}>
+        <Button 
+          appearance="primary" 
+          className={styles.actionButton}
+          onClick={removeDraftWatermark} 
+          icon={<DismissRegular />}
+          disabled={isProcessing}
+        >
+          Remove Draft
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default RemoveDraft;

src/taskpane/components/RemoveProgressBar.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { 
+  Button
+} from "@fluentui/react-components";
+import { 
+  DismissRegular
+} from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
+import { useCommonStyles } from "./commonStyles";
+
+export const RemoveProgressBar: React.FC = () => {
+  const styles = useCommonStyles();
+  const { 
+    statusMessage, setStatusMessage,
+    statusType, setStatusType,
+    isProcessing, setIsProcessing
+  } = useStatusContext();
+
+  const removeProgressBar = async () => {
+    setIsProcessing(true);
+    try {
+      await PowerPoint.run(async (context) => {
+        const shapes = context.presentation.getSelectedShapes();
+        // Implementation will go here
+        setStatusMessage("Removed progress bars from slides.");
+        setStatusType("success");
+      });
+    } catch (error) {
+      setStatusMessage(`Error: ${error.message}`);
+      setStatusType("error");
+      console.error("Remove progress bar error:", error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.buttonGroup}>
+        <Button 
+          appearance="primary" 
+          className={styles.actionButton}
+          onClick={removeProgressBar} 
+          icon={<DismissRegular />}
+          disabled={isProcessing}
+        >
+          Remove Progress Bar
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default RemoveProgressBar;