@@ -766,6 +810,7 @@
this.items = [];
this.initialState = [];
this.selectedIds = new Set();
+ this.tentativeLinks = [];
}
MediaState.prototype.setSku = function (info) {
@@ -780,6 +825,7 @@
this.items = items || [];
this.initialState = JSON.parse(JSON.stringify(this.items));
this.selectedIds.clear();
+ this.tentativeLinks = [];
ui.render(this.items);
this.checkDirty();
};
@@ -798,27 +844,28 @@
var isDrive = (item.source === 'drive_only');
var isShopify = (item.source === 'shopify_only');
- if (isDrive) {
- // Clear other Drive selections
- var _this = this;
- this.items.forEach(function (i) {
- if (i.source === 'drive_only' && _this.selectedIds.has(i.id) && i.id !== id) {
- _this.selectedIds.delete(i.id);
- affectedIds.push(i.id);
+ if (isDrive) {
+ // Clear other Drive selections
+ var _this = this;
+ this.items.forEach(function (i) {
+ // Simplified clearing logic
+ if (i.source === 'drive_only' && _this.selectedIds.has(i.id) && i.id !== id) {
+ _this.selectedIds.delete(i.id);
+ affectedIds.push(i.id);
+ }
+ });
+ } else if (isShopify) {
+ // Clear other Shopify selections
+ var _this = this;
+ this.items.forEach(function (i) {
+ if (i.source === 'shopify_only' && _this.selectedIds.has(i.id) && i.id !== id) {
+ _this.selectedIds.delete(i.id);
+ affectedIds.push(i.id);
+ }
+ });
}
- });
- } else if (isShopify) {
- // Clear other Shopify selections
- var _this = this;
- this.items.forEach(function (i) {
- if (i.source === 'shopify_only' && _this.selectedIds.has(i.id) && i.id !== id) {
- _this.selectedIds.delete(i.id);
- affectedIds.push(i.id);
- }
- });
+ this.selectedIds.add(id);
}
- this.selectedIds.add(id);
- }
// Targeted updates
affectedIds.forEach(function (aid) { ui.updateCardState(aid); });
@@ -859,6 +906,14 @@
// Handled by Sortable
};
+ MediaState.prototype.unlinkMedia = function (driveId, shopifyId) {
+ this.tentativeLinks = this.tentativeLinks.filter(function (l) {
+ return !(l.driveId === driveId && l.shopifyId === shopifyId);
+ });
+ ui.render(this.items);
+ this.checkDirty();
+ };
+
MediaState.prototype.checkDirty = function () {
var plan = this.calculateDiff();
var isDirty = plan.hasChanges;
@@ -872,16 +927,43 @@
var actions = [];
+ // Collect IDs involved in tentative links to exclude them from individual actions
+ var linkedIds = new Set();
+ this.tentativeLinks.forEach(function (l) {
+ linkedIds.add(l.driveId);
+ linkedIds.add(l.shopifyId);
+ });
+
this.items.forEach(function (i) {
if (i._deleted) actions.push({ type: 'delete', name: i.filename || 'Item' });
});
this.items.forEach(function (i) {
if (i._deleted) return;
+ // Skip items that are pending link (they will be handled by 'link' action)
+ if (linkedIds.has(i.id)) return;
+
if (!initialIds.has(i.id)) {
actions.push({ type: 'upload', name: i.filename || 'New Item' });
} else if (i.status === 'drive_only') {
actions.push({ type: 'sync_upload', name: i.filename || 'Item' });
+ } else if (i.status === 'shopify_only') {
+ actions.push({ type: 'adopt', name: i.filename || 'Item' });
+ }
+ });
+
+ // Tentative Links
+ var _this = this;
+ this.tentativeLinks.forEach(function (link) {
+ var dItem = _this.items.find(function (i) { return i.id === link.driveId; });
+ var sItem = _this.items.find(function (i) { return i.id === link.shopifyId; });
+ if (dItem && sItem) {
+ actions.push({
+ type: 'link',
+ name: 'Link Sync: ' + (dItem.filename || 'Item'),
+ driveId: link.driveId,
+ shopifyId: link.shopifyId
+ });
}
});
@@ -1086,7 +1168,40 @@
return;
}
- items.forEach(function (item, index) {
+ // Pre-process items for Tentative Links (Visual Merge)
+ var displayItems = [];
+ var handledIds = new Set();
+
+ items.forEach(function (item) {
+ if (handledIds.has(item.id)) return;
+
+ // Check if part of tentative link
+ var link = state.tentativeLinks.find(function (l) { return l.driveId === item.id || l.shopifyId === item.id; });
+
+ if (link) {
+ var dItem = items.find(function (i) { return i.id === link.driveId; });
+ var sItem = items.find(function (i) { return i.id === link.shopifyId; });
+
+ if (dItem && sItem) {
+ // Create merged display item
+ displayItems.push({
+ type: 'combined',
+ id: 'link-' + link.driveId + '-' + link.shopifyId,
+ drive: dItem,
+ shopify: sItem,
+ _deleted: false // Combined item is alive unless constituent parts deleted? (Shouldn't be deleted if linked)
+ });
+ handledIds.add(dItem.id);
+ handledIds.add(sItem.id);
+ return;
+ }
+ }
+
+ displayItems.push(item);
+ handledIds.add(item.id);
+ });
+
+ displayItems.forEach(function (item, index) {
var el = _this.createCard(item, index);
_this.grid.appendChild(el);
});
@@ -1098,11 +1213,50 @@
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
onEnd: function () {
+ // Reordering Logic needs update for combined items?
+ // If we drag a combined item, what happens?
+ // The sortable list contains IDs.
+ // If we drag 'link-d1-s1', we can't easily map back to single item reorder.
+ // Ideally, we treat it as reordering the associated Drive file (and sync Shopify).
+ // But 'state.items' expects flat list.
+ // Complexity: Reordering combined items.
+ // Logic: Update state.items order based on displayItems order.
+
var newOrderIds = Array.from(_this.grid.children).map(function (el) { return el.dataset.id; });
- var newItems = newOrderIds.map(function (id) {
- return state.items.find(function (i) { return i.id === id; });
- }).filter(Boolean);
- state.items = newItems;
+
+ var newItems = [];
+ newOrderIds.forEach(function (id) {
+ if (id.startsWith('link-')) {
+ // Find the combined item in displayItems (or reconstruct)
+ var parts = id.replace('link-', '').split('-');
+ // DriveID is parts[0] ? No, id might contain hyphens?
+ // Use lookup map or careful logic.
+ // Actually, we tracked it in displayItems.
+ var dItem = state.items.find(i => i.id === parts[0]); // dangerous if ID has hyphen
+ // Better: find in cached displayItems?
+ // Let's rely on finding in state.items by matching tentativeLinks.
+ var link = state.tentativeLinks.find(l => 'link-' + l.driveId + '-' + l.shopifyId === id);
+ if (link) {
+ var d = state.items.find(i => i.id === link.driveId);
+ var s = state.items.find(i => i.id === link.shopifyId);
+ if (d) newItems.push(d);
+ if (s) newItems.push(s);
+ }
+ } else {
+ var item = state.items.find(i => i.id === id);
+ if (item) newItems.push(item);
+ }
+ });
+
+ // Append any items that were not in grid (e.g. filtered out? No, all active shown)
+ // What about handledIds?
+ // Simplest: just map the specific moved items.
+ // Reordering combined items is tricky.
+ // Let's assume for now user drags combined item, we place both d&s in that slot in correct relative order?
+ // Or just place Drive item there, and Shopify item follows?
+ // For simplicity: We reconstruct state.items based on new grid order.
+ state.items = newItems.concat(state.items.filter(i => !newItems.includes(i))); // Append missing?
+
state.checkDirty();
}
});
@@ -1182,6 +1336,32 @@
};
UI.prototype.createCard = function (item, index) {
+ // Combined Card (Tentative Link)
+ if (item.type === 'combined') {
+ var div = document.createElement('div');
+ div.className = 'media-item combined-item';
+ div.dataset.id = item.id;
+
+ var parts = '
';
+
+ // Drive Part
+ parts += '
';
+ parts += '
';
+ parts += '
';
+
+ // Shopify Part
+ parts += '
';
+ parts += '
';
+ parts += '
';
+
+ parts += '
'; // end combined-images
+
+ parts += '
';
+
+ div.innerHTML = parts;
+ return div;
+ }
+
var div = document.createElement('div');
var isSelected = state.selectedIds.has(item.id);
div.className = 'media-item ' + (item._deleted ? 'deleted-item' : '') + (isSelected ? ' selected' : '');
@@ -1279,7 +1459,7 @@
if (isVideo) {
console.log("Falling back to generic video icon...");
// Base64 Video Icon (Blue) to avoid network issues
- this.src = "data:image/png;base64,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";
+ this.src = "data:image/png;base64,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";
// Ensure visibility if processing
if (item.isProcessing) {
this.style.opacity = "0.5";
@@ -1305,6 +1485,7 @@
var isSelected = state.selectedIds.has(item.id);
// 1. Update Container Class
+ // Combined Items don't use this update path (they are re-rendered if unlinked)
el.className = 'media-item ' + (item._deleted ? 'deleted-item' : '') + (isSelected ? ' selected' : '');
if (item.isProcessing) el.className += ' processing-card';
@@ -1437,12 +1618,16 @@
if (a.type === 'upload') icon = '📤';
if (a.type === 'sync_upload') icon = '☁️';
if (a.type === 'reorder') icon = '🔢';
+ if (a.type === 'link') icon = '🔗';
+ if (a.type === 'adopt') icon = '📥';
var label = "";
if (a.type === 'delete') label = 'Delete
' + a.name + '';
if (a.type === 'upload') label = 'Upload New
' + a.name + '';
if (a.type === 'sync_upload') label = 'Sync Drive File
' + a.name + '';
if (a.type === 'reorder') label = 'Update Order';
+ if (a.type === 'link') label = '
' + a.name + '';
+ if (a.type === 'adopt') label = 'Adopt
' + a.name + ' from Shopify';
return '
' + (i + 1) + '. ' + icon + ' ' + label + '
';
}).join('');
@@ -1583,21 +1768,41 @@
return;
}
- // Prepare a single match for the modal
- this.matches = [{
- drive: driveItem,
- shopify: shopifyItem
- }];
- this.currentMatchIndex = 0;
-
- // Custom text for manual link
- document.getElementById('match-modal-title').innerText = "Confirm Manual Link";
- document.getElementById('match-modal-text').innerText = "Are you sure you want to link these two items?";
-
- this.startMatching();
+ // Queue Link
+ state.tentativeLinks.push({ driveId: driveItem.id, shopifyId: shopifyItem.id });
+ state.selectedIds.clear();
+ ui.render(state.items);
+ state.checkDirty();
},
saveChanges() {
+ // Intercept for Tentative Links (Batch Manual Linking)
+ if (state.tentativeLinks.length > 0) {
+ var manualMatches = [];
+ state.tentativeLinks.forEach(function (l) {
+ var d = state.items.find(function (i) { return i.id === l.driveId; });
+ var s = state.items.find(function (i) { return i.id === l.shopifyId; });
+ if (d && s) {
+ manualMatches.push({ drive: d, shopify: s });
+ }
+ });
+
+ if (manualMatches.length > 0) {
+ this.matches = manualMatches;
+ this.currentMatchIndex = 0;
+ this.postMatchAction = 'save';
+
+ ui.logStatus('info', 'Processing ' + manualMatches.length + ' pending links before saving...', 'info');
+
+ // Update Modal Text
+ document.getElementById('match-modal-title').innerText = "Confirm Manual Links";
+ document.getElementById('match-modal-text').innerText = "Please confirm the links you selected.";
+
+ this.startMatching();
+ return;
+ }
+ }
+
ui.toggleSave(false);
ui.saveBtn.innerText = "Saving...";
ui.setSavingState(true);
@@ -2026,6 +2231,39 @@
google.script.run
.withSuccessHandler(function () {
ui.logStatus('link', 'Linked ' + match.drive.filename, 'success');
+
+ // Update Local State to prevent save conflicts
+ var d = state.items.find(function (i) { return i.id === match.drive.id; });
+ var s = state.items.find(function (i) { return i.id === match.shopify.id; });
+
+ if (d && s) {
+ var dIdx = state.items.indexOf(d);
+ var sIdx = state.items.indexOf(s);
+
+ if (dIdx !== -1 && sIdx !== -1) {
+ var targetIdx = Math.min(dIdx, sIdx);
+
+ // Update d
+ d.source = 'synced';
+ d.shopifyId = s.id;
+ d.status = 'synced';
+
+ // Remove both from current positions
+ // We filter by reference to handle duplicate ID edge cases safely, though ID should be unique
+ // But 'indexOf' found specific objects.
+ // Easiest is to splice high then low to avoid index shift?
+ // Or just filter out s then move d?
+ // Logic:
+ // 1. Remove s.
+ // 2. If s was before d, d's index decreased.
+ // 3. Move d to targetIdx.
+
+ // Simpler: Filter both out, then insert d at targetIdx.
+ state.items = state.items.filter(function (i) { return i !== d && i !== s; });
+ state.items.splice(targetIdx, 0, d);
+ }
+ }
+
_this.pendingLinks--;
_this.checkMatchingDone();
})
@@ -2078,6 +2316,18 @@
// All Done
document.getElementById('matching-modal').style.display = 'none';
+
+ // Clear tentative links as they are now processed (linked or skipped)
+ state.tentativeLinks = [];
+
+ // Check Post-Match Action
+ if (this.postMatchAction === 'save') {
+ this.postMatchAction = null;
+ ui.logStatus('info', 'Matching complete. Proceeding to save...', 'info');
+ this.saveChanges();
+ return;
+ }
+
ui.logStatus('info', 'Matching complete. Finalizing gallery...', 'info');
// Show main UI immediately if not already showing
diff --git a/src/MediaStateLogic.test.ts b/src/MediaStateLogic.test.ts
new file mode 100644
index 0000000..4e00a9e
--- /dev/null
+++ b/src/MediaStateLogic.test.ts
@@ -0,0 +1,289 @@
+
+describe("MediaState Logic (Frontend Simulation)", () => {
+ // Mock UI
+ const ui = {
+ render: jest.fn(),
+ updateCardState: jest.fn(),
+ updateLinkButtonState: jest.fn(),
+ toggleSave: jest.fn()
+ };
+ (global as any).ui = ui;
+
+ class MediaState {
+ sku: string | null = null;
+ items: any[] = [];
+ initialState: any[] = [];
+ selectedIds: Set
= new Set();
+ tentativeLinks: { driveId: string, shopifyId: string }[] = [];
+
+ constructor() {
+ // Properties are initialized at declaration
+ }
+
+ setItems(items: any[]) {
+ this.items = items || [];
+ this.initialState = JSON.parse(JSON.stringify(this.items));
+ this.selectedIds.clear();
+ this.tentativeLinks = [];
+ ui.render(this.items);
+ this.checkDirty();
+ }
+
+ toggleSelection(id: string) {
+ const item = this.items.find((i: any) => i.id === id);
+ if (!item) return;
+
+ const isSelected = this.selectedIds.has(id);
+
+ if (isSelected) {
+ this.selectedIds.delete(id);
+ } else {
+ const isDrive = (item.source === 'drive_only');
+ const isShopify = (item.source === 'shopify_only');
+
+ // Clear other same-type selections
+ const toRemove: string[] = [];
+ this.selectedIds.forEach(sid => {
+ const sItem = this.items.find((i: any) => i.id === sid);
+ if (sItem && sItem.source === item.source) {
+ toRemove.push(sid);
+ }
+ });
+ toRemove.forEach(r => this.selectedIds.delete(r));
+
+ this.selectedIds.add(id);
+ }
+ ui.updateLinkButtonState();
+ }
+
+ linkSelected() {
+ const selected = this.items.filter((i: any) => this.selectedIds.has(i.id));
+ const drive = selected.find((i: any) => i.source === 'drive_only');
+ const shopify = selected.find((i: any) => i.source === 'shopify_only');
+
+ if (drive && shopify) {
+ this.tentativeLinks.push({ driveId: drive.id, shopifyId: shopify.id });
+ this.selectedIds.clear();
+ ui.render(this.items);
+ this.checkDirty();
+ }
+ }
+
+ unlink(driveId: string, shopifyId: string) {
+ this.tentativeLinks = this.tentativeLinks.filter(l => !(l.driveId === driveId && l.shopifyId === shopifyId));
+ ui.render(this.items);
+ this.checkDirty();
+ }
+
+ deleteItem(id: string) {
+ const item = this.items.find((i:any) => i.id === id);
+ if (item) {
+ item._deleted = !item._deleted;
+ }
+ this.checkDirty();
+ }
+
+ calculateDiff(): { hasChanges: boolean, actions: any[] } {
+ const actions: any[] = [];
+
+ // Collect IDs involved in tentative links
+ const linkedIds = new Set();
+ this.tentativeLinks.forEach(l => {
+ linkedIds.add(l.driveId);
+ linkedIds.add(l.shopifyId);
+ });
+
+ // Pending Links
+ this.tentativeLinks.forEach(link => {
+ const dItem = this.items.find((i: any) => i.id === link.driveId);
+ const sItem = this.items.find((i: any) => i.id === link.shopifyId);
+ if (dItem && sItem) {
+ actions.push({ type: 'link', name: `${dItem.filename} ↔ ${sItem.filename}`, driveId: link.driveId, shopifyId: link.shopifyId });
+ }
+ });
+
+ // Individual Actions
+ // Note: Same logic as MediaManager.html
+ const initialIds = new Set(this.initialState.map((i:any) => i.id));
+
+ this.items.forEach((i:any) => {
+ if (i._deleted) {
+ actions.push({ type: 'delete', name: i.filename });
+ return;
+ }
+
+ // Exclude tentative link items from generic actions
+ if (linkedIds.has(i.id)) return;
+
+ if (!initialIds.has(i.id)) {
+ actions.push({ type: 'upload', name: i.filename });
+ } else if (i.source === 'drive_only') {
+ actions.push({ type: 'sync_upload', name: i.filename });
+ } else if (i.source === 'shopify_only') {
+ actions.push({ type: 'adopt', name: i.filename });
+ }
+ });
+
+ return {
+ hasChanges: actions.length > 0,
+ actions: actions
+ };
+ }
+
+ checkDirty() {
+ const plan = this.calculateDiff();
+ ui.toggleSave(plan.hasChanges);
+ return plan;
+ }
+ }
+
+ let state: MediaState;
+ beforeEach(() => {
+ state = new MediaState();
+ jest.clearAllMocks();
+ });
+
+ test("should queue links instead of executing immediately", () => {
+ const items = [
+ { id: "d1", source: "drive_only", filename: "img1.jpg" },
+ { id: "s1", source: "shopify_only", filename: "img1.jpg" }
+ ];
+ state.setItems(items);
+
+ state.selectedIds.add("d1");
+ state.selectedIds.add("s1");
+
+ state.linkSelected();
+
+ expect(state.tentativeLinks).toHaveLength(1);
+ expect(state.tentativeLinks[0]).toEqual({ driveId: "d1", shopifyId: "s1" });
+ expect(state.selectedIds.size).toBe(0);
+ expect(ui.toggleSave).toHaveBeenCalledWith(true);
+ });
+
+ test("should un-queue links", () => {
+ const items = [
+ { id: "d1", source: "drive_only", filename: "img1.jpg" },
+ { id: "s1", source: "shopify_only", filename: "img1.jpg" }
+ ];
+ state.setItems(items);
+ state.tentativeLinks.push({ driveId: "d1", shopifyId: "s1" });
+
+ state.unlink("d1", "s1");
+
+ expect(state.tentativeLinks).toHaveLength(0);
+ });
+
+ test("calculateDiff should include link actions", () => {
+ const items = [
+ { id: "d1", source: "drive_only", filename: "drive.jpg" },
+ { id: "s1", source: "shopify_only", filename: "shop.jpg" }
+ ];
+ state.setItems(items);
+ state.tentativeLinks.push({ driveId: "d1", shopifyId: "s1" });
+
+ const diff = state.calculateDiff();
+ expect(diff.actions).toContainEqual(expect.objectContaining({
+ type: "link",
+ name: "drive.jpg ↔ shop.jpg"
+ }));
+ });
+
+ test("calculateDiff should EXCLUDE individual actions for tentatively linked items", () => {
+ const items = [
+ { id: "d1", source: "drive_only", filename: "drive.jpg", status: "drive_only" },
+ { id: "s1", source: "shopify_only", filename: "shop.jpg", status: "shopify_only" }
+ ];
+ state.setItems(items);
+ state.tentativeLinks.push({ driveId: "d1", shopifyId: "s1" });
+
+ const diff = state.calculateDiff();
+
+ // Should have 1 action: 'link'.
+ // Should NOT have 'sync_upload' or 'adopt'.
+ const types = diff.actions.map(a => a.type);
+ expect(types).toContain("link");
+ expect(types).not.toContain("sync_upload");
+ expect(types).not.toContain("adopt");
+ expect(diff.actions.length).toBe(1);
+ });
+
+ test("confirmLink should preserve visual order (Drive item moves to first occurrence)", () => {
+ const s = { id: "s1", source: "shopify_only", filename: "s.jpg" };
+ const mid = { id: "m1", source: "drive_only", filename: "m.jpg" };
+ const d = { id: "d1", source: "drive_only", filename: "d.jpg" };
+ state.setItems([s, mid, d]);
+
+ // Simulation of confirmLink in MediaManager
+ const simulateConfirmLink = (driveId: string, shopifyId: string) => {
+ const drive = state.items.find((i: any) => i.id === driveId);
+ const shopify = state.items.find((i: any) => i.id === shopifyId);
+ if (drive && shopify) {
+ const dIdx = state.items.indexOf(drive);
+ const sIdx = state.items.indexOf(shopify);
+
+ if (dIdx !== -1 && sIdx !== -1) {
+ const targetIdx = Math.min(dIdx, sIdx);
+
+ // Remove both items
+ state.items = state.items.filter(i => i !== drive && i !== shopify);
+
+ // Update Drive item (survivor)
+ drive.source = 'synced';
+ drive.shopifyId = shopify.id;
+ drive.status = 'synced';
+
+ // Insert synced item at target position (earliest)
+ state.items.splice(targetIdx, 0, drive);
+ }
+ }
+ };
+
+ simulateConfirmLink("d1", "s1");
+
+ const ids = state.items.map((i: any) => i.id);
+ // Expect: [d1 (synced), m1]
+ expect(ids).toEqual(["d1", "m1"]);
+ expect(state.items[0].source).toBe("synced");
+ });
+
+ test("INVARIANT: No combination of non-upload actions should increase item count", () => {
+ const initialItems = [
+ { id: "d1", source: "drive_only", filename: "d1.jpg" },
+ { id: "s1", source: "shopify_only", filename: "s1.jpg" },
+ { id: "m1", source: "synced", filename: "m1.jpg" },
+ { id: "d2", source: "drive_only", filename: "d2.jpg" },
+ { id: "s2", source: "shopify_only", filename: "s2.jpg" }
+ ];
+
+ state.setItems(JSON.parse(JSON.stringify(initialItems)));
+ const startCount = state.items.length; // 5
+
+ // 1. Link d1-s1
+ state.selectedIds.add("d1");
+ state.selectedIds.add("s1");
+ state.linkSelected();
+
+ // Simulate Confirm (Merge)
+ // Since test env doesn't run confirmLink automatically, we manually mutate to match logic
+ const d1 = state.items.find((i:any) => i.id === "d1");
+ const s1 = state.items.find((i:any) => i.id === "s1");
+ if (d1 && s1) {
+ const idxes = [state.items.indexOf(d1), state.items.indexOf(s1)].sort();
+ state.items = state.items.filter(i => i !== d1 && i !== s1);
+ d1.source = 'synced';
+ state.items.splice(idxes[0], 0, d1);
+ }
+
+ // Count should decrease by 1 (merge)
+ expect(state.items.length).toBeLessThan(startCount);
+
+ // 2. Delete m1
+ state.deleteItem("m1");
+
+ const activeCount = state.items.filter((i:any) => !i._deleted).length;
+ expect(activeCount).toBeLessThan(startCount);
+
+ expect(activeCount).toBeLessThanOrEqual(startCount);
+ });
+});
diff --git a/src/services/MediaService.ts b/src/services/MediaService.ts
index 470c2f1..2829a4a 100644
--- a/src/services/MediaService.ts
+++ b/src/services/MediaService.ts
@@ -556,8 +556,15 @@ export class MediaService {
try {
const file = driveSvc.getFileById(item.driveId)
- // A. Update Gallery Order
- driveSvc.updateFileProperties(item.driveId, { gallery_order: index.toString() })
+ // A. Update Gallery Order & Link Persistence
+ // We use a single call to update both gallery_order and shopify_media_id (if synced)
+ const updates: any = { gallery_order: index.toString() };
+
+ if (item.shopifyId) {
+ updates['shopify_media_id'] = item.shopifyId;
+ }
+
+ driveSvc.updateFileProperties(item.driveId, updates)
// B. Conditional Renaming
const currentName = file.getName()