From 2b376bb244161d4aee161af0f7c386a2aa928f7b Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 21 May 2026 16:13:08 +0200
Subject: [PATCH] =?UTF-8?q?refactor(base):=20expose=20extractFileId,=20ded?=
 =?UTF-8?q?upe=20URL=E2=86=92file-id=20parsing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promote ImageUploadService.extractFileId from private to public so
edit-flow consumers don't re-implement the `/image/original/<id>`
parse. Used by market's CreateProductDialog and activities'
CreateEventDialog when re-populating <ImageUpload> from a stored URL.

Also clarify ImageUpload.removeImage: the `delete_token: ''` placeholder
on re-populated images intentionally skips the server-side DELETE.
We don't own the original upload's one-time token, and removing
client-side shouldn't reach back and wipe shared files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/CreateEventDialog.vue          | 31 +++++++++--------
 src/modules/base/components/ImageUpload.vue   |  6 +++-
 .../base/services/ImageUploadService.ts       |  7 ++--
 .../market/components/CreateProductDialog.vue | 33 ++++++-------------
 4 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/src/modules/activities/components/CreateEventDialog.vue b/src/modules/activities/components/CreateEventDialog.vue
index 34477a2..a32846a 100644
--- a/src/modules/activities/components/CreateEventDialog.vue
+++ b/src/modules/activities/components/CreateEventDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, nextTick, watch } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -171,7 +171,7 @@ const availableCurrencies = ref<string[]>(['sat'])
 const loadingCurrencies = ref(false)
 const selectedCategories = ref<string[]>([])
 
-function populateFromEvent(event: TicketedEvent) {
+async function populateFromEvent(event: TicketedEvent) {
   isPopulating.value = true
   const start = splitDateTime(event.event_start_date)
   const end = splitDateTime(event.event_end_date)
@@ -189,25 +189,24 @@ function populateFromEvent(event: TicketedEvent) {
   })
   selectedCategories.value = [...(event.categories ?? [])]
   if (event.banner) {
-    // Mirror the URL-to-alias bridge from market's CreateProductDialog
-    // so the <ImageUpload> renders the existing banner via its pict-rs
-    // file ID. delete_token is unknown for already-uploaded images, so
-    // removal just clears the slot client-side.
-    const url = event.banner
-    const alias = url.includes('/image/original/')
-      ? url.split('/image/original/')[1]
-      : url
+    // Re-render the stored banner via its pict-rs file ID. delete_token
+    // is intentionally empty: we don't own the original upload's token
+    // and removing the image on the client should NOT delete the
+    // server-side file (it may be the user changing their mind about
+    // re-using it, or the same image referenced elsewhere).
+    const alias = imageService.extractFileId(event.banner)
     bannerImages.value = [
       { alias, isPrimary: true, delete_token: '', details: {} as any },
     ]
   } else {
     bannerImages.value = []
   }
-  // Release the watcher guard on the next tick so vee-validate's batched
-  // updates settle before user input can drive the auto-mirror.
-  setTimeout(() => {
-    isPopulating.value = false
-  }, 0)
+  // Release the watcher guard after Vue's microtask queue drains so
+  // vee-validate's batched setValues lands before user input can drive
+  // the auto-mirror. nextTick is more reliable than setTimeout(0) here
+  // — it waits for the DOM tick *after* all current microtasks.
+  await nextTick()
+  isPopulating.value = false
 }
 
 watch(() => props.open, async (isOpen) => {
@@ -223,7 +222,7 @@ watch(() => props.open, async (isOpen) => {
       }
     }
     if (props.event) {
-      populateFromEvent(props.event)
+      await populateFromEvent(props.event)
     }
   } else {
     selectedCategories.value = []
diff --git a/src/modules/base/components/ImageUpload.vue b/src/modules/base/components/ImageUpload.vue
index 228e7ec..e64c825 100644
--- a/src/modules/base/components/ImageUpload.vue
+++ b/src/modules/base/components/ImageUpload.vue
@@ -449,7 +449,11 @@ const removeImage = async (imageToRemove: ImageWithMetadata) => {
   if (props.disabled) return
 
   try {
-    // Only try to delete from pict-rs if we have a delete token (newly uploaded images)
+    // Server-side delete only when we have a delete_token (newly
+    // uploaded this session). Pre-existing images re-populated from a
+    // stored URL ship `delete_token: ''` by convention — we don't own
+    // the original upload's one-time token, and removing on the client
+    // shouldn't reach back and wipe the server-side file.
     if (imageToRemove.delete_token) {
       await imageService.deleteImage(imageToRemove.delete_token, imageToRemove.alias)
     }
diff --git a/src/modules/base/services/ImageUploadService.ts b/src/modules/base/services/ImageUploadService.ts
index 2063ce3..69aadae 100644
--- a/src/modules/base/services/ImageUploadService.ts
+++ b/src/modules/base/services/ImageUploadService.ts
@@ -300,9 +300,12 @@ export class ImageUploadService extends BaseService {
   }
 
   /**
-   * Extract file ID from alias, handling both file IDs and full URLs
+   * Extract a pict-rs file ID from an alias, accepting both bare IDs
+   * and full `/image/original/<id>` URLs. Public so callers
+   * re-populating uploads from stored URLs (edit flows) don't have to
+   * re-implement the parse.
    */
-  private extractFileId(alias: string): string {
+  extractFileId(alias: string): string {
     if (!alias) {
       return ''
     }
diff --git a/src/modules/market/components/CreateProductDialog.vue b/src/modules/market/components/CreateProductDialog.vue
index dd5b505..23eb9ac 100644
--- a/src/modules/market/components/CreateProductDialog.vue
+++ b/src/modules/market/components/CreateProductDialog.vue
@@ -516,30 +516,17 @@ watch(() => props.isOpen, async (isOpen) => {
     // Reset form with appropriate initial values
     resetForm({ values: initialValues })
 
-    // Convert existing image URLs to the format expected by ImageUpload component
+    // Convert existing image URLs to the format expected by ImageUpload.
+    // delete_token is intentionally empty for pre-existing images: see
+    // ImageUploadService.deleteImage gate — removing on the client
+    // should not delete the server-side file.
     if (props.product?.images && props.product.images.length > 0) {
-      // For existing products, we need to convert URLs back to a format ImageUpload can display
-      uploadedImages.value = props.product.images.map((url, index) => {
-        let alias = url
-
-        // If it's a full pict-rs URL, extract just the file ID
-        if (url.includes('/image/original/')) {
-          const parts = url.split('/image/original/')
-          if (parts.length > 1 && parts[1]) {
-            alias = parts[1]
-          }
-        } else if (url.startsWith('http://') || url.startsWith('https://')) {
-          // Keep full URLs as-is
-          alias = url
-        }
-
-        return {
-          alias: alias,
-          delete_token: '',
-          isPrimary: index === 0,
-          details: {}
-        }
-      })
+      uploadedImages.value = props.product.images.map((url, index) => ({
+        alias: imageService.extractFileId(url),
+        delete_token: '',
+        isPrimary: index === 0,
+        details: {} as any,
+      }))
     } else {
       uploadedImages.value = []
     }