From 845be96b71a203bc61441042d056061cba539d55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 24 Feb 2026 16:03:12 +0400
Subject: [PATCH] Fix linting errors, improve lint scripts

---
 .stylelintrc.mjs                              |  4 ++
 README.md                                     |  1 -
 app/components/map.gjs                        |  6 +--
 app/components/place-details.gjs              | 13 ++++--
 app/components/place-edit-form.gjs            |  1 +
 app/components/places-sidebar.gjs             |  3 +-
 app/components/search-box.gjs                 |  6 ++-
 app/components/settings-pane.gjs              |  1 -
 app/styles/app.css                            | 44 ++++++++-----------
 package.json                                  |  3 +-
 tests/acceptance/navigation-test.js           |  2 +-
 .../components/search-box-test.gjs            | 12 +++--
 tests/unit/routes/place-test.js               |  2 +-
 13 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs
index 61a6b81..7e1b19b 100644
--- a/.stylelintrc.mjs
+++ b/.stylelintrc.mjs
@@ -1,3 +1,7 @@
 export default {
   extends: ['stylelint-config-standard'],
+  rules: {
+    'no-descending-specificity': null,
+    'property-no-vendor-prefix': null,
+  },
 };
diff --git a/README.md b/README.md
index 606280c..f301909 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
 <br>
 
 <div align="center">
diff --git a/app/components/map.gjs b/app/components/map.gjs
index 458771a..d431bdd 100644
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -508,18 +508,18 @@ export default class MapComponent extends Component {
       // Top padding: 15% of the VISIBLE height (size[1] * 0.5)
       const visibleHeight = size[1] * 0.5;
       const topPadding = visibleHeight * 0.15;
-      const bottomPadding = (size[1] * 0.5) + (visibleHeight * 0.15); // Sheet + padding
+      const bottomPadding = size[1] * 0.5 + visibleHeight * 0.15; // Sheet + padding
 
       padding[0] = topPadding;
       padding[2] = bottomPadding;
     }
     // Desktop: Sidebar covers left side (approx 400px)
     else if (this.args.isSidebarOpen) {
-      const sidebarWidth = 400; 
+      const sidebarWidth = 400;
       const visibleWidth = size[0] - sidebarWidth;
 
       // Left padding: Sidebar + 15% of visible width
-      padding[3] = sidebarWidth + (visibleWidth * 0.15);
+      padding[3] = sidebarWidth + visibleWidth * 0.15;
       // Right padding: 15% of visible width
       padding[1] = visibleWidth * 0.15;
     }
diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 727fcd7..2e92ae0 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -98,7 +98,10 @@ export default class PlaceDetails extends Component {
 
   formatMultiLine(val, type) {
     if (!val) return null;
-    const parts = val.split(';').map((s) => s.trim()).filter(Boolean);
+    const parts = val
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean);
     if (parts.length === 0) return null;
 
     if (type === 'phone') {
@@ -129,7 +132,8 @@ export default class PlaceDetails extends Component {
   }
 
   get website() {
-    const val = this.place.url || this.tags.website || this.tags['contact:website'];
+    const val =
+      this.place.url || this.tags.website || this.tags['contact:website'];
     return this.formatMultiLine(val, 'url');
   }
 
@@ -158,7 +162,10 @@ export default class PlaceDetails extends Component {
   get wikipedia() {
     const val = this.tags.wikipedia;
     if (!val) return null;
-    return val.split(';').map((s) => s.trim()).filter(Boolean)[0];
+    return val
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)[0];
   }
 
   get geoLink() {
diff --git a/app/components/place-edit-form.gjs b/app/components/place-edit-form.gjs
index 7dc68c6..5cdec69 100644
--- a/app/components/place-edit-form.gjs
+++ b/app/components/place-edit-form.gjs
@@ -45,6 +45,7 @@ export default class PlaceEditForm extends Component {
     <form class="edit-form" {{on "submit" this.handleSubmit}}>
       <div class="form-group">
         <label for="edit-title">Title</label>
+        {{! template-lint-disable no-autofocus-attribute }}
         <input
           id="edit-title"
           type="text"
diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs
index 49a96cb..fc74f6b 100644
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -161,7 +161,8 @@ export default class PlacesSidebar extends Component {
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
           {{#if this.isNearbySearch}}
-            <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
+            <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
+              Nearby</h2>
           {{else}}
             <h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
           {{/if}}
diff --git a/app/components/search-box.gjs b/app/components/search-box.gjs
index cf9fb90..6713997 100644
--- a/app/components/search-box.gjs
+++ b/app/components/search-box.gjs
@@ -181,9 +181,11 @@ export default class SearchBoxComponent extends Component {
                   <div class="result-info">
                     <span class="result-title">{{result.title}}</span>
                     {{#if (eq result.source "osm")}}
-                      <span class="result-desc">{{humanizeOsmTag result.type}}</span>
+                      <span class="result-desc">{{humanizeOsmTag
+                          result.type
+                        }}</span>
                     {{else}}
-                       {{#if result.description}}
+                      {{#if result.description}}
                         <span class="result-desc">{{result.description}}</span>
                       {{/if}}
                     {{/if}}
diff --git a/app/components/settings-pane.gjs b/app/components/settings-pane.gjs
index 316edbc..e5801d7 100644
--- a/app/components/settings-pane.gjs
+++ b/app/components/settings-pane.gjs
@@ -4,7 +4,6 @@ import { service } from '@ember/service';
 import { action } from '@ember/object';
 import Icon from '#components/icon';
 import eq from 'ember-truth-helpers/helpers/eq';
-import not from 'ember-truth-helpers/helpers/not';
 
 export default class SettingsPane extends Component {
   @service settings;
diff --git a/app/styles/app.css b/app/styles/app.css
index 9c248a3..18b46b9 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -374,10 +374,7 @@ body {
 .places-list {
   list-style: none;
   padding: 0;
-  margin: -1rem -1rem 0 -1rem;
-}
-
-.places-list li {
+  margin: -1rem -1rem 0;
 }
 
 .place-item {
@@ -511,6 +508,7 @@ body {
   border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
   background: rgb(255 204 51 / 20%);
   position: absolute;
+
   /* Use translate3d for GPU acceleration on iOS */
   transform: translate3d(-50%, -50%, 0);
   pointer-events: none;
@@ -548,6 +546,7 @@ body {
 .ol-control.ol-attribution {
   bottom: 1rem;
 }
+
 .ol-touch .ol-control.ol-attribution {
   bottom: 0.5rem;
 }
@@ -555,6 +554,7 @@ body {
 .ol-control.ol-zoom {
   bottom: 3rem;
 }
+
 .ol-touch .ol-control.ol-zoom {
   bottom: 3.5rem;
 }
@@ -562,6 +562,7 @@ body {
 .ol-control.ol-locate {
   bottom: 6.5rem;
 }
+
 .ol-touch .ol-control.ol-locate {
   bottom: 8.5rem;
 }
@@ -569,6 +570,7 @@ body {
 .ol-control.ol-rotate {
   bottom: 9rem;
 }
+
 .ol-touch .ol-control.ol-rotate {
   bottom: 11.5rem;
 }
@@ -695,6 +697,7 @@ span.icon {
 /* Map Crosshair for "Create Place" mode */
 .map-crosshair {
   position: absolute;
+
   /* Default Center */
   top: 50%;
   left: 50%;
@@ -715,8 +718,11 @@ span.icon {
 }
 
 /* Sidebar is open (Desktop: Left 300px) */
+
 /* We want to center in the remaining space (width - 300px) */
+
 /* Center X = 300 + (width - 300) / 2 = 300 + width/2 - 150 = width/2 + 150 */
+
 /* So shift left by 150px from center */
 .map-container.sidebar-open .map-crosshair {
   left: calc(50% + 150px);
@@ -724,6 +730,7 @@ span.icon {
 
 @media (width <= 768px) {
   /* Sidebar/Bottom Sheet is open (Mobile: Bottom 50%) */
+
   /* Center Y = (height/2) / 2 = height/4 = 25% */
   .map-container.sidebar-open .map-crosshair {
     left: 50%; /* Reset desktop shift */
@@ -788,14 +795,14 @@ button.create-place {
   align-items: center;
   background: white;
   border-radius: 24px; /* Pill shape */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
   padding: 0 0.5rem;
   height: 48px; /* Slightly taller for touch targets */
   transition: box-shadow 0.2s;
 }
 
 .search-form:focus-within {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
 }
 
 /* Integrated Menu Button */
@@ -813,7 +820,7 @@ button.create-place {
 }
 
 .menu-btn-integrated:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgb(0 0 0 / 5%);
 }
 
 /* Fallback Search Icon (Left) */
@@ -837,6 +844,7 @@ button.create-place {
   outline: none;
   width: 100%;
   padding: 0 4px;
+
   /* Remove native search cancel button in WebKit */
   -webkit-appearance: none;
 }
@@ -858,25 +866,11 @@ button.create-place {
   color: #5f6368;
   border-radius: 50%;
   margin-left: 4px;
-  border-left: 1px solid #ddd; /* Separator like Google Maps */
-  padding-left: 12px;
-  border-radius: 0; /* Reset for separator look */
-}
-
-.search-submit-btn:hover {
-  /* No background on hover if we use separator style, or maybe just change icon color */
-  color: #1a73e8; /* Blue on hover */
-}
-
-/* If we want the separator style, we need to adjust border-radius carefully or use a pseudo element */
-/* Let's stick to a simple button for now, maybe without the separator if it looks cleaner */
-.search-submit-btn {
-  border-left: none; /* Remove separator for cleaner look */
   padding-left: 8px;
-  border-radius: 50%;
 }
+
 .search-submit-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgb(0 0 0 / 5%);
   color: #333;
 }
 
@@ -894,7 +888,7 @@ button.create-place {
 }
 
 .search-clear-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgb(0 0 0 / 5%);
   color: #333;
 }
 
@@ -907,7 +901,7 @@ button.create-place {
   margin-top: 8px;
   background: white;
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   overflow: hidden;
   max-height: 400px;
   overflow-y: auto;
diff --git a/package.json b/package.json
index 6cc2285..96af2f8 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,10 @@
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\"",
-    "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
+    "lint:css:fix": "stylelint \"**/*.css\" --fix",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm format",
     "lint:format": "prettier . --cache --check",
+    "lint:format:fix": "prettier . --cache --write",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
diff --git a/tests/acceptance/navigation-test.js b/tests/acceptance/navigation-test.js
index 00e5d1d..f89eb9f 100644
--- a/tests/acceptance/navigation-test.js
+++ b/tests/acceptance/navigation-test.js
@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL, click, settled } from '@ember/test-helpers';
+import { visit, currentURL, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'marco/tests/helpers';
 import Service from '@ember/service';
 import sinon from 'sinon';
diff --git a/tests/integration/components/search-box-test.gjs b/tests/integration/components/search-box-test.gjs
index cf30a27..5631ca4 100644
--- a/tests/integration/components/search-box-test.gjs
+++ b/tests/integration/components/search-box-test.gjs
@@ -37,7 +37,9 @@ module('Integration | Component | search-box', function (hooks) {
     this.owner.register('service:router', MockRouterService);
 
     this.noop = () => {};
-    await render(<template><SearchBox @onToggleMenu={{this.noop}} /></template>);
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
 
     assert.dom('.search-input').exists();
     assert.dom('.search-results-popover').doesNotExist();
@@ -86,7 +88,9 @@ module('Integration | Component | search-box', function (hooks) {
     this.owner.register('service:router', MockRouterService);
 
     this.noop = () => {};
-    await render(<template><SearchBox @onToggleMenu={{this.noop}} /></template>);
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
 
     await fillIn('.search-input', 'berlin');
     await click('.search-input'); // Focus
@@ -118,7 +122,9 @@ module('Integration | Component | search-box', function (hooks) {
     this.owner.register('service:photon', MockPhotonService);
 
     this.noop = () => {};
-    await render(<template><SearchBox @onToggleMenu={{this.noop}} /></template>);
+    await render(
+      <template><SearchBox @onToggleMenu={{this.noop}} /></template>
+    );
 
     await fillIn('.search-input', 'cafe');
 
diff --git a/tests/unit/routes/place-test.js b/tests/unit/routes/place-test.js
index 550c8fc..38ffbf1 100644
--- a/tests/unit/routes/place-test.js
+++ b/tests/unit/routes/place-test.js
@@ -32,7 +32,7 @@ module('Unit | Route | place', function (hooks) {
     }
 
     class MapUiStub extends Service {
-      selectPlace(place) {
+      selectPlace() {
         selectPlaceCalled = true;
       }
       stopSearch() {}