From 399ad1822d6f24cca44186feab0d8decf7f6edec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 27 Jan 2026 11:20:57 +0700
Subject: [PATCH] Humanize place type properly, refactor for other tags

---
 app/components/place-details.gjs  | 12 ++++++------
 app/components/places-sidebar.gjs |  5 +++--
 app/helpers/capitalize.js         |  8 --------
 app/helpers/humanize-osm-tag.js   |  6 ++++++
 app/styles/app.css                |  2 --
 app/utils/format-text.js          |  9 +++++++++
 6 files changed, 24 insertions(+), 18 deletions(-)
 delete mode 100644 app/helpers/capitalize.js
 create mode 100644 app/helpers/humanize-osm-tag.js
 create mode 100644 app/utils/format-text.js

diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 48f1320..1b7f279 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
-import capitalize from '../helpers/capitalize';
+import { humanizeOsmTag } from '../utils/format-text';
 import Icon from '../components/icon';
 
 import { tracked } from '@glimmer/tracking';
@@ -76,14 +76,15 @@ export default class PlaceDetails extends Component {
   }
 
   get type() {
-    return (
+    const rawType =
       this.tags.amenity ||
       this.tags.shop ||
       this.tags.tourism ||
       this.tags.leisure ||
       this.tags.historic ||
-      'Point of Interest'
-    );
+      'Point of Interest';
+
+    return humanizeOsmTag(rawType);
   }
 
   get address() {
@@ -133,8 +134,7 @@ export default class PlaceDetails extends Component {
     if (!this.tags.cuisine) return null;
     return this.tags.cuisine
       .split(';')
-      .map((c) => capitalize.compute([c]))
-      .map((c) => c.replace('_', ' '))
+      .map((c) => humanizeOsmTag(c))
       .join(', ');
   }
 
diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs
index 8a942d5..2be58bb 100644
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -6,6 +6,7 @@ import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
 import Icon from './icon';
+import humanizeOsmTag from '../helpers/humanize-osm-tag';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -173,13 +174,13 @@ export default class PlacesSidebar extends Component {
                         place.osmTags.name:en
                         "Unnamed Place"
                       }}</div>
-                    <div class="place-type">{{or
+                    <div class="place-type">{{humanizeOsmTag (or
                         place.osmTags.amenity
                         place.osmTags.shop
                         place.osmTags.tourism
                         place.osmTags.leisure
                         place.osmTags.historic
-                      }}</div>
+                      )}}</div>
                   </button>
                 </li>
               {{/each}}
diff --git a/app/helpers/capitalize.js b/app/helpers/capitalize.js
deleted file mode 100644
index a1e1d8f..0000000
--- a/app/helpers/capitalize.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-export function capitalize([str]) {
-  if (typeof str !== 'string') return '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-export default helper(capitalize);
diff --git a/app/helpers/humanize-osm-tag.js b/app/helpers/humanize-osm-tag.js
new file mode 100644
index 0000000..3ac124d
--- /dev/null
+++ b/app/helpers/humanize-osm-tag.js
@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { humanizeOsmTag as format } from '../utils/format-text';
+
+export default helper(function humanizeOsmTag([text]) {
+  return format(text);
+});
diff --git a/app/styles/app.css b/app/styles/app.css
index b34b6c2..32e0353 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -402,7 +402,6 @@ body {
 .place-type {
   color: #666;
   font-size: 0.85rem;
-  text-transform: capitalize;
 }
 
 .back-btn {
@@ -436,7 +435,6 @@ body {
 .place-details .place-type {
   color: #666;
   font-size: 0.9rem;
-  text-transform: capitalize;
   margin: 0 0 1rem;
 }
 
diff --git a/app/utils/format-text.js b/app/utils/format-text.js
new file mode 100644
index 0000000..7b8dc3f
--- /dev/null
+++ b/app/utils/format-text.js
@@ -0,0 +1,9 @@
+export function humanizeOsmTag(text) {
+  if (typeof text !== 'string' || !text) return '';
+  // Replace underscores and dashes with spaces
+  const spaced = text.replace(/[_-]/g, ' ');
+  // Capitalize first letter of each word (Title Case)
+  return spaced.replace(/\w\S*/g, (w) =>
+    w.replace(/^\w/, (c) => c.toUpperCase())
+  );
+}