1.2.1

Improve place details with icons
Move all deps to devDependencies, install feather-icons
2026-01-21 16:10:58 +07:00 · 2026-01-21 16:10:22 +07:00 · 2026-01-21 15:00:31 +07:00
10 changed files with 171 additions and 61 deletions
--- a/app/components/icon.gjs
+++ b/app/components/icon.gjs
@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+import clock from 'feather-icons/dist/icons/clock.svg?raw';
+import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import home from 'feather-icons/dist/icons/home.svg?raw';
+import map from 'feather-icons/dist/icons/map.svg?raw';
+import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
+import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
+import phone from 'feather-icons/dist/icons/phone.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.svg?raw';
+
+const ICONS = {
+  clock,
+  globe,
+  home,
+  map,
+  mapPin,
+  navigation,
+  phone,
+  user,
+  settings
+};
+
+export default class IconComponent extends Component {
+  get svg() {
+    return ICONS[this.args.name];
+  }
+
+  get size() {
+    return this.args.size || 16;
+  }
+
+  get color() {
+    return this.args.color || '#888';
+  }
+
+  get style() {
+    return `width:${this.size}px;height:${this.size}px;color:${this.color}`;
+  }
+
+  get title() {
+    return this.args.title || '';
+  }
+
+  <template>
+    {{#if this.svg}}
+      <span class="icon" style={{this.style}} title={{this.title}}>
+        {{htmlSafe this.svg}}
+      </span>
+    {{/if}}
+  </template>
+}
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import capitalize from '../helpers/capitalize';
+import Icon from '../components/icon';

 export default class PlaceDetails extends Component {
  get place() {
@@ -129,55 +130,66 @@ export default class PlaceDetails extends Component {

      <div class="meta-info">
        {{#if this.cuisine}}
-          <p><strong>Cuisine:</strong> {{this.cuisine}}</p>
+          <p>
+            <strong>Cuisine:</strong>
+            {{this.cuisine}}
+          </p>
        {{/if}}

        {{#if this.openingHours}}
-          <p><strong>Open:</strong> {{this.openingHours}}</p>
+          <p class="content-with-icon">
+            <Icon @name="clock" @title="Opening hours" />
+            <span>{{this.openingHours}}</span>
+          </p>
        {{/if}}

        {{#if this.phone}}
-          <p><strong>Phone:</strong> <a href="tel:{{this.phone}}">{{this.phone}}</a></p>
+          <p class="content-with-icon">
+            <Icon @name="phone" @title="Phone" />
+            <span><a href="tel:{{this.phone}}">{{this.phone}}</a></span>
+          </p>
        {{/if}}

        {{#if this.website}}
-          <p>
-            <strong>Website:</strong>
-            <a href={{this.website}} target="_blank" rel="noopener noreferrer">
-              Visit Link
-            </a>
+          <p class="content-with-icon">
+            <Icon @name="globe" @title="Website" />
+            <span><a href={{this.website}} target="_blank" rel="noopener noreferrer">Website</a></span>
          </p>
        {{/if}}

        {{#if this.wikipedia}}
          <p>
            <strong>Wikipedia:</strong>
-            <a href="https://wikipedia.org/wiki/{{this.wikipedia}}" target="_blank" rel="noopener noreferrer">
-              Article
-            </a>
+            <a href="https://wikipedia.org/wiki/{{this.wikipedia}}" target="_blank" rel="noopener noreferrer">Article</a>
          </p>
        {{/if}}

        <hr class="meta-divider">

        {{#if this.address}}
-          <p><strong>Address:</strong> {{this.address}}</p>
+          <p class="content-with-icon">
+            <Icon @name="home" @title="Address" />
+            <span>{{this.address}}</span>
+          </p>
        {{/if}}

-
-        <p>
-          <strong>Geo:</strong>
-          <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
-            {{this.visibleGeoLink}}
-          </a>
+        <p class="content-with-icon">
+          <Icon @name="mapPin" @title="Geo link" />
+          <span>
+            <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
+              {{this.visibleGeoLink}}
+            </a>
+          </span>
        </p>

        {{#if this.osmUrl}}
-          <p>
-            <strong>OSM ID:</strong>
-            <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
-              {{this.place.osmId}}
-            </a>
+          <p class="content-with-icon">
+            <Icon @name="map" @title="OSM ID" />
+            <span>
+              <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
+                OpenStreetMap
+              </a>
+            </span>
          </p>
        {{/if}}
      </div>
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -223,3 +223,28 @@ body {
 .ol-touch .ol-control.ol-locate {
  top: 5.5em; /* Adjust for touch devices where controls might be larger */
 }
+
+span.icon {
+  display: inline-block;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.content-with-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "marco",
-  "version": "1.2.0",
+  "version": "1.2.1",
  "private": true,
  "description": "Small description for marco goes here",
  "repository": "",
@@ -46,6 +46,7 @@
    "@embroider/vite": "^1.5.0",
    "@eslint/js": "^9.39.2",
    "@glimmer/component": "^2.0.0",
+    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
    "@rollup/plugin-babel": "^6.1.0",
    "@warp-drive/core": "~5.8.0",
    "@warp-drive/ember": "~5.8.0",
@@ -62,6 +63,7 @@
    "ember-resolver": "^13.1.1",
    "ember-source": "~6.11.0-alpha.6",
    "ember-template-lint": "^7.9.3",
+    "ember-truth-helpers": "^5.0.0",
    "ember-welcome-page": "^8.0.4",
    "eslint": "^9.39.2",
    "eslint-config-prettier": "^10.1.8",
@@ -69,11 +71,17 @@
    "eslint-plugin-n": "^17.23.1",
    "eslint-plugin-qunit": "^8.2.5",
    "eslint-plugin-warp-drive": "^5.8.0",
+    "feather-icons": "^4.29.2",
    "globals": "^16.5.0",
+    "latlon-geohash": "^2.0.0",
+    "ol": "^10.7.0",
+    "ol-mapbox-style": "^13.2.0",
    "prettier": "^3.7.4",
    "prettier-plugin-ember-template-tag": "^2.1.2",
    "qunit": "^2.25.0",
    "qunit-dom": "^3.5.0",
+    "remotestorage-widget": "^1.8.0",
+    "remotestoragejs": "2.0.0-beta.8",
    "sinon": "^21.0.1",
    "stylelint": "^16.26.1",
    "stylelint-config-standard": "^38.0.0",
@@ -85,14 +93,5 @@
  },
  "ember": {
    "edition": "octane"
-  },
-  "dependencies": {
-    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
-    "ember-truth-helpers": "^5.0.0",
-    "latlon-geohash": "^2.0.0",
-    "ol": "^10.7.0",
-    "ol-mapbox-style": "^13.2.0",
-    "remotestorage-widget": "^1.8.0",
-    "remotestoragejs": "2.0.0-beta.8"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,28 +7,6 @@ settings:
 importers:

  .:
-    dependencies:
-      '@remotestorage/module-places':
-        specifier: link:vendor/remotestorage-module-places
-        version: link:vendor/remotestorage-module-places
-      ember-truth-helpers:
-        specifier: ^5.0.0
-        version: 5.0.0
-      latlon-geohash:
-        specifier: ^2.0.0
-        version: 2.0.0
-      ol:
-        specifier: ^10.7.0
-        version: 10.7.0
-      ol-mapbox-style:
-        specifier: ^13.2.0
-        version: 13.2.0(ol@10.7.0)
-      remotestorage-widget:
-        specifier: ^1.8.0
-        version: 1.8.0
-      remotestoragejs:
-        specifier: 2.0.0-beta.8
-        version: 2.0.0-beta.8
    devDependencies:
      '@babel/core':
        specifier: ^7.28.5
@@ -69,6 +47,9 @@ importers:
      '@glimmer/component':
        specifier: ^2.0.0
        version: 2.0.0
+      '@remotestorage/module-places':
+        specifier: link:vendor/remotestorage-module-places
+        version: link:vendor/remotestorage-module-places
      '@rollup/plugin-babel':
        specifier: ^6.1.0
        version: 6.1.0(@babel/core@7.28.6)(rollup@4.55.1)
@@ -117,6 +98,9 @@ importers:
      ember-template-lint:
        specifier: ^7.9.3
        version: 7.9.3
+      ember-truth-helpers:
+        specifier: ^5.0.0
+        version: 5.0.0
      ember-welcome-page:
        specifier: ^8.0.4
        version: 8.0.5(@babel/core@7.28.6)
@@ -138,9 +122,21 @@ importers:
      eslint-plugin-warp-drive:
        specifier: ^5.8.0
        version: 5.8.1(@babel/core@7.28.6)
+      feather-icons:
+        specifier: ^4.29.2
+        version: 4.29.2
      globals:
        specifier: ^16.5.0
        version: 16.5.0
+      latlon-geohash:
+        specifier: ^2.0.0
+        version: 2.0.0
+      ol:
+        specifier: ^10.7.0
+        version: 10.7.0
+      ol-mapbox-style:
+        specifier: ^13.2.0
+        version: 13.2.0(ol@10.7.0)
      prettier:
        specifier: ^3.7.4
        version: 3.7.4
@@ -153,6 +149,12 @@ importers:
      qunit-dom:
        specifier: ^3.5.0
        version: 3.5.0
+      remotestorage-widget:
+        specifier: ^1.8.0
+        version: 1.8.0
+      remotestoragejs:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8
      sinon:
        specifier: ^21.0.1
        version: 21.0.1
@@ -1794,6 +1796,9 @@ packages:
  charm@1.0.2:
    resolution: {integrity: sha512-wqW3VdPnlSWT4eRiYX+hcs+C6ViBPUWk1qTCd+37qw9kEm/a5n2qcyQDMBWvSYKN/ctqZzeXNQaeBjOetJJUkw==}

+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
  clean-up-path@1.0.0:
    resolution: {integrity: sha512-PHGlEF0Z6976qQyN6gM7kKH6EH0RdfZcc8V+QhFe36eRxV0SMH5OUBZG7Bxa9YcreNzyNbK63cGiZxdSZgosRw==}

@@ -2062,6 +2067,9 @@ packages:
    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

+  core-js@3.47.0:
+    resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
+
  core-util-is@1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}

@@ -2544,6 +2552,9 @@ packages:
      picomatch:
        optional: true

+  feather-icons@4.29.2:
+    resolution: {integrity: sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==}
+
  file-entry-cache@11.1.1:
    resolution: {integrity: sha512-TPVFSDE7q91Dlk1xpFLvFllf8r0HyOMOlnWy7Z2HBku5H3KhIeOGInexrIeg2D64DosVB/JXkrrk6N/7Wriq4A==}

@@ -6397,6 +6408,8 @@ snapshots:
    dependencies:
      inherits: 2.0.4

+  classnames@2.5.1: {}
+
  clean-up-path@1.0.0: {}

  cliui@8.0.1:
@@ -6497,6 +6510,8 @@ snapshots:

  core-js@2.6.12: {}

+  core-js@3.47.0: {}
+
  core-util-is@1.0.3: {}

  cors@2.8.5:
@@ -7206,6 +7221,11 @@ snapshots:
    optionalDependencies:
      picomatch: 4.0.3

+  feather-icons@4.29.2:
+    dependencies:
+      classnames: 2.5.1
+      core-js: 3.47.0
+
  file-entry-cache@11.1.1:
    dependencies:
      flat-cache: 6.1.19
--- a/release/assets/main-Bth7aKvu.css
+++ b/release/assets/main-Bth7aKvu.css
--- a/release/assets/main-D89DIKor.js
+++ b/release/assets/main-D89DIKor.js
--- a/release/assets/main-DySxVUEA.css
+++ b/release/assets/main-DySxVUEA.css
--- a/release/assets/modules-4-12-YGIPeKdq.js
+++ b/release/assets/modules-4-12-YGIPeKdq.js
--- a/release/index.html
+++ b/release/index.html
@@ -6,8 +6,8 @@
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
-  <script type="module" crossorigin src="/assets/main-DMYEQljq.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-DySxVUEA.css">
+  <script type="module" crossorigin src="/assets/main-D89DIKor.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-Bth7aKvu.css">
 </head>
  <body>
 </body>
Author	SHA1	Message	Date
Râu Cao	cf9139b9c1	1.2.1	2026-01-21 16:10:58 +07:00
Râu Cao	01c3b5a1ac	Improve place details with icons	2026-01-21 16:10:22 +07:00
Râu Cao	3fcaa0bfa2	Move all deps to devDependencies, install feather-icons	2026-01-21 15:00:31 +07:00