From ffcb8219b026585cb98065f9fcb6a922e1fbfc0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 11 Mar 2026 15:22:34 +0400
Subject: [PATCH] Add email links

---
 app/components/icon.gjs          |  2 ++
 app/components/place-details.gjs | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/app/components/icon.gjs b/app/components/icon.gjs
index d043420..6b5c90f 100644
--- a/app/components/icon.gjs
+++ b/app/components/icon.gjs
@@ -12,6 +12,7 @@ import home from 'feather-icons/dist/icons/home.svg?raw';
 import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
 import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
 import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
+import mail from 'feather-icons/dist/icons/mail.svg?raw';
 import map from 'feather-icons/dist/icons/map.svg?raw';
 import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
 import menu from 'feather-icons/dist/icons/menu.svg?raw';
@@ -39,6 +40,7 @@ const ICONS = {
   instagram,
   'log-in': logIn,
   'log-out': logOut,
+  mail,
   map,
   'map-pin': mapPin,
   menu,
diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs
index 9685066..db23a2f 100644
--- a/app/components/place-details.gjs
+++ b/app/components/place-details.gjs
@@ -111,6 +111,12 @@ export default class PlaceDetails extends Component {
       );
     }
 
+    if (type === 'email') {
+      return htmlSafe(
+        parts.map((p) => `<a href="mailto:${p}">${p}</a>`).join('<br>')
+      );
+    }
+
     if (type === 'url') {
       return htmlSafe(
         parts
@@ -132,6 +138,11 @@ export default class PlaceDetails extends Component {
     return this.formatMultiLine(val, 'phone');
   }
 
+  get email() {
+    const val = this.tags.email || this.tags['contact:email'];
+    return this.formatMultiLine(val, 'email');
+  }
+
   get website() {
     const val =
       this.place.url || this.tags.website || this.tags['contact:website'];
@@ -301,6 +312,15 @@ export default class PlaceDetails extends Component {
           </p>
         {{/if}}
 
+        {{#if this.email}}
+          <p class="content-with-icon">
+            <Icon @name="mail" @title="Email" />
+            <span>
+              {{this.email}}
+            </span>
+          </p>
+        {{/if}}
+
         {{#if this.facebook}}
           <p class="content-with-icon">
             <Icon @name="facebook" @title="Facebook" />