Re-organisation of Draft and Confidential code

src/taskpane/components/DraftButtons.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { 
+  Button,
+  makeStyles
+} from "@fluentui/react-components";
+import { 
+  Edit24Regular,
+  DismissRegular
+} from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
+import { useCommonStyles } from "./commonStyles";
+
+const useStyles = makeStyles({
+  buttonGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "8px",
+    width: "100%"
+  },
+  draftButton: {
+    width: "100%",
+    minWidth: 0,
+    padding: "8px 4px",
+    "& span": {
+      justifyContent: "center"
+    }
+  }
+});
+
+export const DraftButtons: React.FC = () => {
+  const styles = useStyles();
+  const commonStyles = 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);
+    }
+  };
+
+  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={commonStyles.container}>
+      <div className={styles.buttonGrid}>
+        <Button 
+          appearance="primary" 
+          className={styles.draftButton}
+          onClick={addDraftWatermark} 
+          icon={<Edit24Regular />}
+          disabled={isProcessing}
+          title="Add Draft"
+        >
+          Add Draft
+        </Button>
+        <Button 
+          appearance="primary" 
+          className={styles.draftButton}
+          onClick={removeDraftWatermark} 
+          icon={<DismissRegular />}
+          disabled={isProcessing}
+          title="Remove Draft"
+        >
+          Remove Draft
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DraftButtons;