From 670128cbdaf9cc2eb928561a716a13b8b6ed2b1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 22 Apr 2026 10:38:06 +0400
Subject: [PATCH] Immediately render newly uploaded photo and scroll to it

---
 app/components/place-details.gjs         | 12 ++++++++++--
 app/components/place-photo-upload.gjs    |  2 +-
 app/components/place-photos-carousel.gjs | 25 +++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 360b63d..6983f74 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -26,6 +26,7 @@ export default class PlaceDetails extends Component {
   @tracked showLists = false;
   @tracked isPhotoUploadModalOpen = false;
   @tracked isNostrConnectModalOpen = false;
+  @tracked newlyUploadedPhotoId = null;
 
   @action
   openPhotoUploadModal(e) {
@@ -40,8 +41,11 @@ export default class PlaceDetails extends Component {
   }
 
   @action
-  closePhotoUploadModal() {
+  closePhotoUploadModal(eventId) {
     this.isPhotoUploadModalOpen = false;
+    if (typeof eventId === 'string') {
+      this.newlyUploadedPhotoId = eventId;
+    }
   }
 
   @action
@@ -352,7 +356,11 @@ export default class PlaceDetails extends Component {
           @onCancel={{this.cancelEditing}}
         />
       {{else}}
-        <PlacePhotosCarousel @photos={{this.photos}} @name={{this.name}} />
+        <PlacePhotosCarousel
+          @photos={{this.photos}}
+          @name={{this.name}}
+          @scrollToEventId={{this.newlyUploadedPhotoId}}
+        />
         <h3>{{this.name}}</h3>
         <p class="place-type">
           {{this.type}}
diff --git a/app/components/place-photo-upload.gjs b/app/components/place-photo-upload.gjs
index 1e1858b..cda50bb 100644
--- a/app/components/place-photo-upload.gjs
+++ b/app/components/place-photo-upload.gjs
@@ -192,7 +192,7 @@ export default class PlacePhotoUpload extends Component {
       this.uploadedPhoto = null;
 
       if (this.args.onClose) {
-        this.args.onClose();
+        this.args.onClose(event.id);
       }
     } catch (e) {
       this.error = 'Failed to publish: ' + e.message;
diff --git a/app/components/place-photos-carousel.gjs b/app/components/place-photos-carousel.gjs
index 0599739..73cf244 100644
--- a/app/components/place-photos-carousel.gjs
+++ b/app/components/place-photos-carousel.gjs
@@ -29,6 +29,24 @@ export default class PlacePhotosCarousel extends Component {
     return !this.canScrollRight;
   }
 
+  scrollToNewPhoto = modifier((element, [eventId]) => {
+    if (eventId && eventId !== this.lastEventId) {
+      this.lastEventId = eventId;
+      // Allow DOM to update first since the photo was *just* added to the store
+      setTimeout(() => {
+        const targetSlide = element.querySelector(
+          `[data-event-id="${eventId}"]`
+        );
+        if (targetSlide) {
+          element.scrollTo({
+            left: targetSlide.offsetLeft,
+            behavior: 'smooth',
+          });
+        }
+      }, 100);
+    }
+  });
+
   setupCarousel = modifier((element) => {
     this.carouselElement = element;
 
@@ -84,11 +102,16 @@ export default class PlacePhotosCarousel extends Component {
         <div
           class="place-photos-carousel-track"
           {{this.setupCarousel}}
+          {{this.scrollToNewPhoto @scrollToEventId}}
           {{on "scroll" this.updateScrollState}}
         >
           {{#each this.photos as |photo|}}
             {{! template-lint-disable no-inline-styles }}
-            <div class="carousel-slide" style={{photo.style}}>
+            <div
+              class="carousel-slide"
+              style={{photo.style}}
+              data-event-id={{photo.eventId}}
+            >
               {{#if photo.blurhash}}
                 <Blurhash
                   @hash={{photo.blurhash}}