From 4c540bc7134c438d7205976455971a9ef20797bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 21 Apr 2026 09:28:34 +0400
Subject: [PATCH] Rename component, clean up CSS

---
 ...ce-photo-item.gjs => place-photo-upload-item.gjs} | 10 +++++-----
 app/components/place-photo-upload.gjs                |  4 ++--
 app/styles/app.css                                   | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)
 rename app/components/{place-photo-item.gjs => place-photo-upload-item.gjs} (93%)

diff --git a/app/components/place-photo-item.gjs b/app/components/place-photo-upload-item.gjs
similarity index 93%
rename from app/components/place-photo-item.gjs
rename to app/components/place-photo-upload-item.gjs
index ddc2bc0..b47cecc 100644
--- a/app/components/place-photo-item.gjs
+++ b/app/components/place-photo-upload-item.gjs
@@ -13,7 +13,7 @@ const IMAGE_QUALITY = 0.94;
 const MAX_THUMBNAIL_DIMENSION = 350;
 const THUMBNAIL_QUALITY = 0.9;
 
-export default class PlacePhotoItem extends Component {
+export default class PlacePhotoUploadItem extends Component {
   @service blossom;
   @service imageProcessor;
   @service toast;
@@ -106,14 +106,14 @@ export default class PlacePhotoItem extends Component {
 
   <template>
     <div
-      class="photo-item
+      class="photo-upload-item
         {{if this.uploadTask.isRunning 'is-uploading'}}
         {{if this.error 'has-error'}}"
     >
-      <img src={{this.thumbnailUrl}} alt="thumbnail" class="photo-item-img" />
+      <img src={{this.thumbnailUrl}} alt="thumbnail" />
 
       {{#if this.uploadTask.isRunning}}
-        <div class="photo-item-overlay">
+        <div class="overlay">
           <Icon
             @name="loading-ring"
             @size={{24}}
@@ -126,7 +126,7 @@ export default class PlacePhotoItem extends Component {
       {{#if this.error}}
         <button
           type="button"
-          class="photo-item-overlay error-overlay"
+          class="overlay error-overlay"
           title={{this.error}}
           {{on "click" this.showErrorToast}}
         >
diff --git a/app/components/place-photo-upload.gjs b/app/components/place-photo-upload.gjs
index 8a45c7e..46f2e80 100644
--- a/app/components/place-photo-upload.gjs
+++ b/app/components/place-photo-upload.gjs
@@ -6,7 +6,7 @@ import { on } from '@ember/modifier';
 import { EventFactory } from 'applesauce-core';
 import { task } from 'ember-concurrency';
 import Geohash from 'latlon-geohash';
-import PlacePhotoItem from './place-photo-item';
+import PlacePhotoUploadItem from './place-photo-upload-item';
 import Icon from '#components/icon';
 import { or, not } from 'ember-truth-helpers';
 
@@ -232,7 +232,7 @@ export default class PlacePhotoUpload extends Component {
       {{#if this.files.length}}
         <div class="photo-grid">
           {{#each this.files as |file|}}
-            <PlacePhotoItem
+            <PlacePhotoUploadItem
               @file={{file}}
               @onSuccess={{this.handleUploadSuccess}}
               @onRemove={{this.removeFile}}
diff --git a/app/styles/app.css b/app/styles/app.css
index f1b341c..888c790 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -250,7 +250,7 @@ body {
   margin-bottom: 20px;
 }
 
-.photo-item {
+.photo-upload-item {
   position: relative;
   aspect-ratio: 1 / 1;
   border-radius: 6px;
@@ -258,14 +258,14 @@ body {
   background: #1e262e;
 }
 
-.photo-item-img {
+.photo-upload-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
-.photo-item-overlay {
+.photo-upload-item .overlay {
   position: absolute;
   inset: 0;
   background: rgb(0 0 0 / 60%);
@@ -274,7 +274,7 @@ body {
   justify-content: center;
 }
 
-.error-overlay {
+.photo-upload-item .error-overlay {
   background: rgb(224 108 117 / 80%);
   cursor: pointer;
   border: none;
@@ -283,7 +283,7 @@ body {
   width: 100%;
 }
 
-.btn-remove-photo {
+.photo-upload-item .btn-remove-photo {
   position: absolute;
   top: 4px;
   right: 4px;
@@ -300,7 +300,7 @@ body {
   padding: 0;
 }
 
-.btn-remove-photo:hover {
+.photo-upload-item .btn-remove-photo:hover {
   background: var(--marker-color-primary);
 }