From aa2883cb0c65f8d8ec581e238a9edb1b3e27474d Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Mon, 24 Nov 2025 21:59:12 +0200
Subject: [PATCH] fix: ensure leaflet loads, add amenity badges, propagate
 version

---
 app/listings/[slug]/page.tsx | 47 +++++++++++++++++++++++++-----------
 app/listings/page.tsx        |  1 +
 deploy/deploy.sh             |  3 ++-
 k8s/app.yaml                 |  3 +++
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/app/listings/[slug]/page.tsx b/app/listings/[slug]/page.tsx
index 1ba9142..437282d 100644
--- a/app/listings/[slug]/page.tsx
+++ b/app/listings/[slug]/page.tsx
@@ -9,6 +9,16 @@ type ListingPageProps = {
   params: { slug: string };
 };
 
+const amenityIcons: Record<string, string> = {
+  sauna: '🧖',
+  fireplace: '🔥',
+  wifi: '📶',
+  pets: '🐾',
+  lake: '🌊',
+  ac: '❄️',
+  ev: '⚡',
+};
+
 export async function generateMetadata({ params }: ListingPageProps): Promise<Metadata> {
   const translation = await getListingBySlug({ slug: params.slug, locale: DEFAULT_LOCALE });
 
@@ -52,20 +62,29 @@ export default async function ListingPage({ params }: ListingPageProps) {
           <strong>{t('listingCapacity')}:</strong> {t('capacityGuests', { count: listing.maxGuests })} - {t('capacityBedrooms', { count: listing.bedrooms })} -{' '}
           {t('capacityBeds', { count: listing.beds })} - {t('capacityBathrooms', { count: listing.bathrooms })}
         </div>
-        <div style={{ marginTop: 8 }}>
-          <strong>{t('listingAmenities')}:</strong>{' '}
-          {[
-            listing.hasSauna && t('amenitySauna'),
-            listing.hasFireplace && t('amenityFireplace'),
-            listing.hasWifi && t('amenityWifi'),
-            listing.petsAllowed && t('amenityPets'),
-            listing.byTheLake && t('amenityLake'),
-            listing.hasAirConditioning && t('amenityAirConditioning'),
-            listing.evCharging === 'FREE' && t('amenityEvFree'),
-            listing.evCharging === 'PAID' && t('amenityEvPaid'),
-          ]
-            .filter(Boolean)
-            .join(', ') || '-'}
+        <div style={{ marginTop: 12 }}>
+          <strong>{t('listingAmenities')}:</strong>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 6 }}>
+            {listing.hasSauna ? <span className="badge">{amenityIcons.sauna} {t('amenitySauna')}</span> : null}
+            {listing.hasFireplace ? <span className="badge">{amenityIcons.fireplace} {t('amenityFireplace')}</span> : null}
+            {listing.hasWifi ? <span className="badge">{amenityIcons.wifi} {t('amenityWifi')}</span> : null}
+            {listing.petsAllowed ? <span className="badge">{amenityIcons.pets} {t('amenityPets')}</span> : null}
+            {listing.byTheLake ? <span className="badge">{amenityIcons.lake} {t('amenityLake')}</span> : null}
+            {listing.hasAirConditioning ? <span className="badge">{amenityIcons.ac} {t('amenityAirConditioning')}</span> : null}
+            {listing.evCharging === 'FREE' ? <span className="badge">{amenityIcons.ev} {t('amenityEvFree')}</span> : null}
+            {listing.evCharging === 'PAID' ? <span className="badge">{amenityIcons.ev} {t('amenityEvPaid')}</span> : null}
+            {!(
+              listing.hasSauna ||
+              listing.hasFireplace ||
+              listing.hasWifi ||
+              listing.petsAllowed ||
+              listing.byTheLake ||
+              listing.hasAirConditioning ||
+              listing.evCharging !== 'NONE'
+            )
+              ? <span className="badge">-</span>
+              : null}
+          </div>
         </div>
         <div style={{ marginTop: 8 }}>
           <strong>{t('listingContact')}:</strong> {listing.contactName} - {listing.contactEmail}
diff --git a/app/listings/page.tsx b/app/listings/page.tsx
index c556ed2..a1742bf 100644
--- a/app/listings/page.tsx
+++ b/app/listings/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import 'leaflet/dist/leaflet.css';
 import Link from 'next/link';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '../components/I18nProvider';
diff --git a/deploy/deploy.sh b/deploy/deploy.sh
index d5de4cc..bc39ffb 100755
--- a/deploy/deploy.sh
+++ b/deploy/deploy.sh
@@ -19,8 +19,9 @@ fi
 
 IMAGE=$(cat deploy/.last-image)
 K8S_IMAGE="$IMAGE"
+APP_VERSION="${APP_VERSION:-$(echo \"$IMAGE\" | awk -F: '{print $NF}')}"
 
-export K8S_NAMESPACE APP_HOST NEXT_PUBLIC_SITE_URL NEXT_PUBLIC_API_BASE APP_ENV CLUSTER_ISSUER INGRESS_CLASS K8S_IMAGE
+export K8S_NAMESPACE APP_HOST NEXT_PUBLIC_SITE_URL NEXT_PUBLIC_API_BASE APP_ENV CLUSTER_ISSUER INGRESS_CLASS K8S_IMAGE APP_VERSION
 
 TMP_MANIFEST=$(mktemp)
 envsubst < k8s/app.yaml > "$TMP_MANIFEST"
diff --git a/k8s/app.yaml b/k8s/app.yaml
index b1cec7f..dbc1eab 100644
--- a/k8s/app.yaml
+++ b/k8s/app.yaml
@@ -33,6 +33,9 @@ spec:
           ports:
             - containerPort: 3000
               name: http
+          envFrom:
+            - configMapRef:
+                name: lomavuokraus-web-config
           envFrom:
             - secretRef:
                 name: lomavuokraus-web-secrets