Initial version of Progress Bar.

src/taskpane/components/AddProgressBar.tsx

@@ -20,8 +20,90 @@ export const AddProgressBar: React.FC = () => {
     setIsProcessing(true);
     try {
       await PowerPoint.run(async (context) => {
-        const shapes = context.presentation.getSelectedShapes();
-        // Implementation will go here
+        // Get all slides
+        const presentation = context.presentation;
+        const slides = presentation.slides;
+        slides.load("items");
+        
+        // Need to load the first slide to get access to dimensions
+        await context.sync();
+        
+        if (slides.items.length === 0) {
+          throw new Error("No slides in the presentation");
+        }
+        
+        // Get dimensions from first slide
+        const firstSlide = slides.items[0];
+        
+        // We'll create our own width and height based on standard values
+        // since direct access to slide dimensions is tricky in Office.js
+        const slideWidth = 960; // Standard PowerPoint slide width in points
+        const slideHeight = 540; // Standard PowerPoint slide height in points
+        
+        // Define progress bar properties
+        const progressBarHeight = 1; // Height in points
+        const segmentGap = 0; // Gap between segments
+        const startY = slideHeight - 28; // 28 points from bottom
+        
+        // Load slides first to get count
+        await context.sync();
+        
+        const slideCount = slides.items.length;
+        const segmentWidth = slideWidth / slideCount;
+        
+        // Process each slide
+        for (let i = 0; i < slideCount; i++) {
+          const slide = slides.items[i];
+          
+          // Load slide properties to check layout
+          slide.load("layout");
+          await context.sync();
+          
+          const layoutName = slide.layout.name;
+          
+          // Check if this is a layout we want to add the progress bar to
+          // Note: Office.js might not have exact same layout names as VBA,
+          // so we're checking for common layouts
+          if (layoutName.includes("Title") || 
+              layoutName.includes("Content") || 
+              layoutName.includes("Two Content") || 
+              layoutName.includes("Blank")) {
+            
+            // Add progress bar segments to this slide
+            for (let j = 0; j < slideCount; j++) {
+              // Create line for this segment
+              const startX = j * segmentWidth;
+              const endX = (j + 1) * segmentWidth - segmentGap;
+              
+              // Create a rectangle with minimal height to simulate a line
+              // since proper line creation is challenging with the Office JS API
+              const line = slide.shapes.addGeometricShape("Rectangle");
+              
+              // Set the rectangle's position to look like a line
+              line.left = startX;
+              line.top = startY;
+              line.width = endX - startX;
+              line.height = progressBarHeight; // Very small height
+              
+              // Set fill color based on progress instead of line color
+              // We're using a rectangle, so fill is more appropriate than line
+              if (j < i) {
+                // Blue for progressed segments (RGB 32, 81, 112)
+                line.fill.setSolidColor("#205170");
+              } else {
+                // Grey for segments not yet progressed (RGB 242, 242, 242)
+                line.fill.setSolidColor("#F2F2F2");
+              }
+              
+              // Remove the border/outline entirely
+              line.lineFormat.visible = false;
+              
+              // Since tags API might not be fully supported, use shape name as identifier
+              line.name = "progress_bar_" + j;
+            }
+          }
+        }
+        
         setStatusMessage("Added progress bar to slides.");
         setStatusType("success");
       });

src/taskpane/components/RemoveProgressBar.tsx

@@ -20,9 +20,51 @@ export const RemoveProgressBar: React.FC = () => {
     setIsProcessing(true);
     try {
       await PowerPoint.run(async (context) => {
-        const shapes = context.presentation.getSelectedShapes();
-        // Implementation will go here
-        setStatusMessage("Removed progress bars from slides.");
+        // Get all slides
+        const presentation = context.presentation;
+        const slides = presentation.slides;
+        slides.load("items");
+        await context.sync();
+        
+        let removedCount = 0;
+        
+        // Process each slide
+        for (let i = 0; i < slides.items.length; i++) {
+          const slide = slides.items[i];
+          
+          // Load all shapes in this slide
+          const shapes = slide.shapes;
+          shapes.load("items");
+          await context.sync();
+          
+          // Find shapes with our tag
+          const progressBarShapes = [];
+          for (let j = 0; j < shapes.items.length; j++) {
+            const shape = shapes.items[j];
+            // Check if this shape name indicates it's a progress bar
+            shape.load("name");
+            await context.sync();
+            
+            // Look for shapes with names starting with "progress_bar_"
+            if (shape.name && shape.name.startsWith("progress_bar_")) {
+              progressBarShapes.push(shape);
+            }
+          }
+          
+          // Delete all progress bar shapes
+          for (const shape of progressBarShapes) {
+            shape.delete();
+            removedCount++;
+          }
+        }
+        
+        await context.sync();
+        
+        if (removedCount > 0) {
+          setStatusMessage(`Removed ${removedCount} progress bar elements from slides.`);
+        } else {
+          setStatusMessage("No progress bar elements found to remove.");
+        }
         setStatusType("success");
       });
     } catch (error) {