From 990f3afa88ac72dceaa039fb7b8a89bd10922680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Fri, 13 Mar 2026 13:51:29 +0400
Subject: [PATCH] Fix lint errors

---
 app/components/map.gjs                 |  4 ++--
 app/components/place-details.gjs       |  1 -
 app/components/place-lists-manager.gjs | 17 +++++++++++------
 app/styles/app.css                     |  4 ++--
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/components/map.gjs b/app/components/map.gjs
index 14537d5..a922c1f 100644
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -60,7 +60,7 @@ export default class MapComponent extends Component {
 
     // Create a vector source and layer for bookmarks
     this.bookmarkSource = new VectorSource();
-    
+
     const bookmarkStyleFunction = (feature) => {
       const originalPlace = feature.get('originalPlace');
       let color = '#ffcc33'; // Default Yellow
@@ -71,7 +71,7 @@ export default class MapComponent extends Component {
         originalPlace._listIds.length > 0
       ) {
         // Find the first list color
-        // We need access to storage.lists. 
+        // We need access to storage.lists.
         // Since this is inside setupMap, 'this' refers to the component instance.
         const firstListId = originalPlace._listIds[0];
         const list = this.storage.lists.find((l) => l.id === firstListId);
diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index bc405ef..f2dc19c 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import { humanizeOsmTag } from '../utils/format-text';
diff --git a/app/components/place-lists-manager.gjs b/app/components/place-lists-manager.gjs
index a41e7a8..7d40a88 100644
--- a/app/components/place-lists-manager.gjs
+++ b/app/components/place-lists-manager.gjs
@@ -3,7 +3,7 @@ import { service } from '@ember/service';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
-import Icon from './icon';
+import { htmlSafe } from '@ember/template';
 import onClickOutside from '../modifiers/on-click-outside';
 
 export default class PlaceListsManager extends Component {
@@ -17,6 +17,10 @@ export default class PlaceListsManager extends Component {
     return this.args.place._listIds || [];
   }
 
+  styleFor(color) {
+    return htmlSafe(`background-color: ${color}`);
+  }
+
   @action
   isInList(list) {
     if (!this.placeListIds) return false;
@@ -59,10 +63,7 @@ export default class PlaceListsManager extends Component {
   }
 
   <template>
-    <div
-      class="place-lists-manager"
-      {{onClickOutside @onClose}}
-    >
+    <div class="place-lists-manager" {{onClickOutside @onClose}}>
       <div class="list-item master-toggle">
         <label>
           <input
@@ -86,7 +87,11 @@ export default class PlaceListsManager extends Component {
                 {{on "change" (fn this.toggleList list)}}
                 disabled={{unless this.isSaved true}}
               />
-              <span class="list-color" style="background-color: {{list.color}}"></span>
+              {{! template-lint-disable no-inline-styles }}
+              <span
+                class="list-color"
+                style={{this.styleFor list.color}}
+              ></span>
               <span class="list-name">{{list.title}}</span>
             </label>
           </div>
diff --git a/app/styles/app.css b/app/styles/app.css
index c13f2db..28f5924 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1021,7 +1021,7 @@ button.create-place {
   color: #333;
 }
 
-.place-lists-manager input[type="checkbox"] {
+.place-lists-manager input[type='checkbox'] {
   accent-color: #007bff;
   width: 16px;
   height: 16px;
@@ -1033,7 +1033,7 @@ button.create-place {
   height: 12px;
   border-radius: 50%;
   flex-shrink: 0;
-  border: 1px solid rgba(0,0,0,0.1);
+  border: 1px solid rgb(0 0 0 / 10%);
 }
 
 .place-lists-manager .divider {