FIX: uploader lightbox preview for new images (#31762)

It is an old bug that preview is not working for newly uploaded images.
To fix it, we need to initialize lightbox when image is rendered and not
when component.

We have Qunit test when image is already available
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/uppy-image-uploader-test.gjs#L28

System test was added to ensure lightbox is working right after image is
uploaded.

<img width="1236" alt="Screenshot 2025-03-12 at 10 23 18 am"
src="https://github.com/user-attachments/assets/3984306b-f351-4b35-936c-eb7f0e57ea9d"
/>

After fix


https://github.com/user-attachments/assets/1091cd55-b24b-4640-8e8f-a60c3426ff65

app/assets/javascripts/discourse/app/components/uppy-image-uploader.gjs

@@ -48,7 +48,12 @@ export default class UppyImageUploader extends Component {
     },
   });
 
-  applyLightbox = modifier((element) => lightbox(element, this.siteSettings));
+  applyLightbox = modifier(() =>
+    lightbox(
+      document.querySelector(`#${this.args.id}.image-uploader`),
+      this.siteSettings
+    )
+  );
 
   willDestroy() {
     super.willDestroy(...arguments);
@@ -140,7 +145,6 @@ export default class UppyImageUploader extends Component {
 
   <template>
     <div
-      {{this.applyLightbox}}
       id={{@id}}
       class="image-uploader {{if @imageUrl 'has-image' 'no-image'}}"
       ...attributes
@@ -158,6 +162,7 @@ export default class UppyImageUploader extends Component {
 
         {{#if @imageUrl}}
           <a
+            {{this.applyLightbox}}
             href={{this.imageCdnUrl}}
             title={{this.imageFilename}}
             rel="nofollow ugc noopener"

spec/system/admin_about_config_area_spec.rb

@@ -88,6 +88,9 @@ describe "Admin About Config Area Page", type: :system do
       config_area.general_settings_section.banner_image_uploader.select_image(image_file.path)
       expect(config_area.general_settings_section.banner_image_uploader).to have_uploaded_image
 
+      config_area.general_settings_section.banner_image_uploader.toggle_lightbox_preview
+      expect(config_area.general_settings_section.banner_image_uploader).to have_lighbox_preview
+
       config_area.general_settings_section.submit
 
       expect(config_area.general_settings_section).to have_saved_successfully

spec/system/page_objects/components/uppy_image_uploader.rb

@@ -33,6 +33,14 @@ module PageObjects
         delete_button = @element.find(".btn-danger")
         delete_button.send_keys(:enter)
       end
+
+      def toggle_lightbox_preview
+        @element.find(".image-uploader-lightbox-btn").click
+      end
+
+      def has_lighbox_preview?
+        has_css?(".mfp-container")
+      end
     end
   end
 end