From 8e3187f38d8b5a8639a96505c15f304a8044c71f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 27 Jan 2026 13:37:59 +0700
Subject: [PATCH] Improve place-create button

---
 app/components/icon.gjs           |  2 ++
 app/components/places-sidebar.gjs |  4 ++--
 app/services/storage.js           |  4 +++-
 app/styles/app.css                | 25 +++----------------------
 4 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/app/components/icon.gjs b/app/components/icon.gjs
index 77757eb..8efb3df 100644
--- a/app/components/icon.gjs
+++ b/app/components/icon.gjs
@@ -15,6 +15,7 @@ import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
 import menu from 'feather-icons/dist/icons/menu.svg?raw';
 import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
+import plus from 'feather-icons/dist/icons/plus.svg?raw';
 import server from 'feather-icons/dist/icons/server.svg?raw';
 import settings from 'feather-icons/dist/icons/settings.svg?raw';
 import target from 'feather-icons/dist/icons/target.svg?raw';
@@ -37,6 +38,7 @@ const ICONS = {
   menu,
   navigation,
   phone,
+  plus,
   server,
   settings,
   target,
diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs
index 61271f3..8866d3f 100644
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -202,10 +202,10 @@ export default class PlacesSidebar extends Component {
 
           <button
             type="button"
-            class="create-place-btn"
+            class="btn btn-outline create-place"
             {{on "click" this.createNewPlace}}
           >
-            <Icon @name="plus" @size={{18}} />
+            <Icon @name="plus" @size={{18}} @color="#007bff" />
             Create new place
           </button>
         {{/if}}
diff --git a/app/services/storage.js b/app/services/storage.js
index 57326b5..248eb90 100644
--- a/app/services/storage.js
+++ b/app/services/storage.js
@@ -244,7 +244,9 @@ export default class StorageService extends Service {
 
     // Update both lists
     this.savedPlaces = this.savedPlaces.filter((p) => p.id !== place.id);
-    this.placesInView = this.placesInView.filter((p) => p.id !== place.id);
+    if (this.placesInView.length > 0) {
+      this.placesInView = this.placesInView.filter((p) => p.id !== place.id);
+    }
   }
 
   @action
diff --git a/app/styles/app.css b/app/styles/app.css
index 57b5ecb..41cca5a 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -688,41 +688,22 @@ span.icon {
   }
 }
 
-/* Helper Text */
 .helper-text {
   background: #eef4fc;
   color: #1a5c9b;
   padding: 0.75rem;
   border-radius: 4px;
   font-size: 0.9rem;
+  margin-top: 0;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-/* Create Place Button */
-.create-place-btn {
+button.create-place {
   width: 100%;
-  padding: 1rem;
-  margin-top: 1rem;
-  background: white;
-  border: 1px dashed #ccc;
-  border-radius: 8px;
-  color: #666;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  transition: all 0.2s;
-}
-
-.create-place-btn:hover {
-  background: #f8f9fa;
-  border-color: #999;
-  color: #333;
+  margin: 1.5rem auto;
 }
 
 @media (width <= 768px) {