From 73ad5b4eb16ace3c60a046511c04b5e1b25764f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Fri, 24 Apr 2026 12:24:19 +0100
Subject: [PATCH] Disable closing modal during photo upload

---
 app/components/modal.gjs              |  6 ++++--
 app/components/place-details.gjs      | 13 ++++++++++++-
 app/components/place-photo-upload.gjs | 10 ++++++++++
 app/styles/app.css                    |  6 ++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/app/components/modal.gjs b/app/components/modal.gjs
index e9751e3..8ae2fd7 100644
--- a/app/components/modal.gjs
+++ b/app/components/modal.gjs
@@ -11,6 +11,7 @@ export default class Modal extends Component {
 
   @action
   close() {
+    if (this.args.disableClose) return;
     if (this.args.onClose) {
       this.args.onClose();
     }
@@ -31,10 +32,11 @@ export default class Modal extends Component {
       >
         <button
           type="button"
-          class="close-modal-btn btn-text"
+          class="close-modal-btn btn-text {{if @disableClose 'disabled'}}"
+          disabled={{@disableClose}}
           {{on "click" this.close}}
         >
-          <Icon @name="x" @size={{24}} />
+          <Icon @name="x" @size={{24}} @color="currentColor" />
         </button>
         {{yield}}
       </div>
diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 1ea5dee..8ead664 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -27,6 +27,12 @@ export default class PlaceDetails extends Component {
   @tracked isPhotoUploadModalOpen = false;
   @tracked isNostrConnectModalOpen = false;
   @tracked newlyUploadedPhotoId = null;
+  @tracked isPhotoUploadActive = false;
+
+  @action
+  handleUploadStateChange(isActive) {
+    this.isPhotoUploadActive = isActive;
+  }
 
   @action
   openPhotoUploadModal(e) {
@@ -42,6 +48,7 @@ export default class PlaceDetails extends Component {
 
   @action
   closePhotoUploadModal(eventId) {
+    if (this.isPhotoUploadActive) return;
     this.isPhotoUploadModalOpen = false;
     if (typeof eventId === 'string') {
       this.newlyUploadedPhotoId = eventId;
@@ -585,10 +592,14 @@ export default class PlaceDetails extends Component {
     </div>
 
     {{#if this.isPhotoUploadModalOpen}}
-      <Modal @onClose={{this.closePhotoUploadModal}}>
+      <Modal
+        @onClose={{this.closePhotoUploadModal}}
+        @disableClose={{this.isPhotoUploadActive}}
+      >
         <PlacePhotoUpload
           @place={{this.saveablePlace}}
           @onClose={{this.closePhotoUploadModal}}
+          @onUploadStateChange={{this.handleUploadStateChange}}
         />
       </Modal>
     {{/if}}
diff --git a/app/components/place-photo-upload.gjs b/app/components/place-photo-upload.gjs
index cda50bb..d51623a 100644
--- a/app/components/place-photo-upload.gjs
+++ b/app/components/place-photo-upload.gjs
@@ -77,6 +77,9 @@ export default class PlacePhotoUpload extends Component {
     }
     this.file = file;
     this.uploadedPhoto = null;
+    if (this.args.onUploadStateChange) {
+      this.args.onUploadStateChange(true);
+    }
   }
 
   @action
@@ -91,6 +94,9 @@ export default class PlacePhotoUpload extends Component {
     }
     this.file = null;
     this.uploadedPhoto = null;
+    if (this.args.onUploadStateChange) {
+      this.args.onUploadStateChange(false);
+    }
   }
 
   deletePhotoTask = task(async (photoData) => {
@@ -191,6 +197,10 @@ export default class PlacePhotoUpload extends Component {
       this.file = null;
       this.uploadedPhoto = null;
 
+      if (this.args.onUploadStateChange) {
+        this.args.onUploadStateChange(false);
+      }
+
       if (this.args.onClose) {
         this.args.onClose(event.id);
       }
diff --git a/app/styles/app.css b/app/styles/app.css
index 64fa21d..1230059 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1815,6 +1815,12 @@ button.create-place {
   top: 1rem;
   right: 1rem;
   cursor: pointer;
+  color: #898989;
+}
+
+.close-modal-btn.disabled {
+  color: #ccc;
+  cursor: not-allowed;
 }
 
 .place-photo-upload h2 {