Humanize place type properly, refactor for other tags

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) => humanizeOsmTag(c))
-      .map((c) => c.replace('_', ' '))
       .join(', ');
   }
 

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}}

app/helpers/capitalize.js

@@ -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);

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);
+});

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;
 }
 

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())
+  );
+}