Now only using one status box

src/taskpane/components/MatchProperties.tsx

@@ -2,16 +2,12 @@ import * as React from "react";
 import { 
   Button, 
   makeStyles, 
-  Text, 
-  Spinner, 
   tokens
 } from "@fluentui/react-components";
 import { 
-  ColorRegular,
-  SquareRegular,
-  ShapeUnionRegular,
-  InfoRegular
+  ColorRegular
 } from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
 
 const useStyles = makeStyles({
   container: {
@@ -62,9 +58,11 @@ const useStyles = makeStyles({
 
 export const MatchProperties: React.FC = () => {
   const styles = useStyles();
-  const [statusMessage, setStatusMessage] = React.useState("");
-  const [statusType, setStatusType] = React.useState<"info" | "success" | "warning" | "error">("info");
-  const [isProcessing, setIsProcessing] = React.useState(false);
+  const { 
+    statusMessage, setStatusMessage,
+    statusType, setStatusType,
+    isProcessing, setIsProcessing
+  } = useStatusContext();
 
   const matchPropertiesToFirstSelected = async () => {
     setIsProcessing(true);
@@ -245,12 +243,7 @@ export const MatchProperties: React.FC = () => {
           setStatusType("error");
         }
         
-        // Auto-clear success message after 5 seconds
-        setTimeout(() => {
-          if (statusType === "success") {
-            setStatusMessage("");
-          }
-        }, 5000);
+        // Timeout is handled in App.tsx now
       });
     } catch (error) {
       setStatusMessage(`Error: ${error.message}`);
@@ -261,19 +254,6 @@ export const MatchProperties: React.FC = () => {
     }
   };
 
-  const getStatusIcon = () => {
-    switch (statusType) {
-      case "success":
-        return <ShapeUnionRegular className={styles.statusIcon} />;
-      case "warning":
-        return <SquareRegular className={styles.statusIcon} />;
-      case "error":
-        return <InfoRegular className={styles.statusIcon} />;
-      default:
-        return null;
-    }
-  };
-
   return (
     <div className={styles.container}>
       <div className={styles.buttonGroup}>
@@ -287,24 +267,6 @@ export const MatchProperties: React.FC = () => {
           Match Properties
         </Button>
       </div>
-      
-      {isProcessing && (
-        <div className={styles.statusContainer}>
-          <div className={styles.statusText}>
-            <Spinner size="tiny" style={{ marginRight: "8px" }} />
-            Applying properties...
-          </div>
-        </div>
-      )}
-      
-      {!isProcessing && statusMessage && (
-        <div className={`${styles.statusContainer} ${styles[`${statusType}Status`]}`}>
-          <div className={styles.statusText}>
-            {getStatusIcon()}
-            {statusMessage}
-          </div>
-        </div>
-      )}
     </div>
   );
 };