feat: Implement Media Matching Workflow

- Added matching wizard to MediaManager.html for linking Drive files to orphaned Shopify media on load.
- Updated MediaService.ts to extract filenames from Shopify URLs for better matching.
- Added linkDriveFileToShopifyMedia method to MediaService and exposed it via mediaHandlers and global.ts.
- Improved UX in MediaManager with image transition clearing and button state feedback.

src/services/MediaService.ts

@@ -153,12 +153,26 @@ export class MediaService {
                 contentUrl = m.image.url
             }
 
+            // Extract filename from URL (Shopify URLs usually contain the filename)
+            let filename = "Orphaned Media";
+            try {
+                if (contentUrl) {
+                     // Clean query params and get last segment
+                     const cleanUrl = contentUrl.split('?')[0];
+                     const parts = cleanUrl.split('/');
+                     const candidate = parts.pop();
+                     if (candidate) filename = candidate;
+                }
+            } catch (e) {
+                console.warn("Failed to extract filename from URL", e);
+            }
+
+
             unifiedState.push({
                 id: m.id, // Use Shopify ID keys for orphans
                 driveId: null,
                 shopifyId: m.id,
-                filename: "Orphaned Media", // Shopify doesn't always expose filename cleanly in same way
-                // Try to get filename if possible or fallback
+                filename: filename,
                 source: 'shopify_only',
                 thumbnail: m.preview?.image?.originalSrc || "",
                 status: 'active',
@@ -172,6 +186,13 @@ export class MediaService {
     return unifiedState
   }
 
+  linkDriveFileToShopifyMedia(sku: string, driveId: string, shopifyId: string) {
+       console.log(`MediaService: Linking Drive File ${driveId} to Shopify Media ${shopifyId}`);
+       // Verify ownership? Maybe later. For now, trust the ID.
+       this.driveService.updateFileProperties(driveId, { shopify_media_id: shopifyId });
+       return { success: true };
+  }
+
   processMediaChanges(sku: string, finalState: any[], shopifyProductId: string): string[] {
     const logs: string[] = []
     logs.push(`Starting processing for SKU ${sku}`)