From 71d59f274c16f0116d7b8457afe6a37b35071101 Mon Sep 17 00:00:00 2001
From: Alexander Schmidt <alexander@schmidt.eco>
Date: Wed, 4 Feb 2026 15:04:28 +0100
Subject: [PATCH] feat: add owner badge with edit icon on listing cards for own
 listings

---
 js/components/listing-card.js           | 55 ++++++++++++++++++++++++-
 js/components/pages/page-favorites.js   |  1 +
 js/components/pages/page-home.js        |  1 +
 js/components/pages/page-listing.js     |  1 +
 js/components/pages/page-my-listings.js |  1 +
 js/services/directus.js                 |  1 +
 service-worker.js                       |  2 +-
 7 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/js/components/listing-card.js b/js/components/listing-card.js
index 5270167..d967c14 100644
--- a/js/components/listing-card.js
+++ b/js/components/listing-card.js
@@ -1,27 +1,45 @@
 import { t, i18n } from '../i18n.js'
 import { escapeHTML } from '../utils/helpers.js'
 import { getXmrRates, formatPrice as formatCurrencyPrice } from '../services/currency.js'
+import { auth } from '../services/auth.js'
 
 let cachedRates = null
 
 class ListingCard extends HTMLElement {
     static get observedAttributes() {
-        return ['listing-id', 'title', 'price', 'currency', 'location', 'image']
+        return ['listing-id', 'title', 'price', 'currency', 'location', 'image', 'owner-id']
     }
 
     constructor() {
         super()
         this.isFavorite = false
         this.rates = null
+        this.isOwner = false
     }
 
     async connectedCallback() {
         this.loadFavoriteState()
         await this.loadRates()
+        await this.checkOwnership()
         this.render()
         this.setupEventListeners()
     }
 
+    async checkOwnership() {
+        const ownerId = this.getAttribute('owner-id')
+        if (!ownerId || !auth.isLoggedIn()) {
+            this.isOwner = false
+            return
+        }
+        
+        try {
+            const user = await auth.getUser()
+            this.isOwner = user?.id === ownerId
+        } catch {
+            this.isOwner = false
+        }
+    }
+
     async loadRates() {
         if (!cachedRates) {
             cachedRates = await getXmrRates()
@@ -91,7 +109,17 @@ class ListingCard extends HTMLElement {
             </svg>
         `
         
+        const ownerBadge = this.isOwner ? /* html */`
+            <a href="#/edit/${escapeHTML(id)}" class="owner-badge" title="${t('listing.edit')}">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                </svg>
+            </a>
+        ` : ''
+        
         this.innerHTML = /* html */`
+            ${ownerBadge}
             <a href="#/listing/${escapeHTML(id)}" class="listing-link">
                 <div class="listing-image">
                     ${image 
@@ -266,5 +294,30 @@ style.textContent = /* css */`
     listing-card .favorite-btn:hover .heart-icon {
         color: var(--color-accent);
     }
+    
+    listing-card .owner-badge {
+        position: absolute;
+        top: var(--space-sm);
+        left: var(--space-sm);
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--color-bg);
+        border: none;
+        border-radius: var(--radius-sm);
+        box-shadow: var(--shadow-sm);
+        z-index: 2;
+        color: var(--color-text-muted);
+        transition: all var(--transition-fast);
+        text-decoration: none;
+    }
+    
+    listing-card .owner-badge:hover {
+        background: var(--color-primary);
+        color: white;
+        transform: scale(1.1);
+    }
 `
 document.head.appendChild(style)
diff --git a/js/components/pages/page-favorites.js b/js/components/pages/page-favorites.js
index 48340c6..8c52224 100644
--- a/js/components/pages/page-favorites.js
+++ b/js/components/pages/page-favorites.js
@@ -126,6 +126,7 @@ class PageFavorites extends HTMLElement {
                     currency="${listing.currency || 'EUR'}"
                     location="${this.escapeHtml(locationName)}"
                     image="${imageUrl}"
+                    owner-id="${listing.user_created || ''}"
                 ></listing-card>
             `
         }).join('')
diff --git a/js/components/pages/page-home.js b/js/components/pages/page-home.js
index 89f5028..04f0620 100644
--- a/js/components/pages/page-home.js
+++ b/js/components/pages/page-home.js
@@ -456,6 +456,7 @@ class PageHome extends HTMLElement {
                     currency="${listing.currency || 'EUR'}"
                     location="${this.escapeHtml(locationName)}"
                     image="${imageUrl}"
+                    owner-id="${listing.user_created || ''}"
                 ></listing-card>
             `
         }).join('')
diff --git a/js/components/pages/page-listing.js b/js/components/pages/page-listing.js
index d113e1e..4ea58d8 100644
--- a/js/components/pages/page-listing.js
+++ b/js/components/pages/page-listing.js
@@ -345,6 +345,7 @@ class PageListing extends HTMLElement {
                 currency="${listing.currency || 'EUR'}"
                 location="${this.escapeHtml(locationName)}"
                 image="${imageUrl}"
+                owner-id="${listing.user_created || ''}"
             ></listing-card>
         `
     }
diff --git a/js/components/pages/page-my-listings.js b/js/components/pages/page-my-listings.js
index 088b63b..97ec774 100644
--- a/js/components/pages/page-my-listings.js
+++ b/js/components/pages/page-my-listings.js
@@ -149,6 +149,7 @@ class PageMyListings extends HTMLElement {
                         currency="${listing.currency || 'EUR'}"
                         location="${this.escapeHtml(locationName)}"
                         image="${imageUrl}"
+                        owner-id="${listing.user_created || ''}"
                     ></listing-card>
                 </div>
             `
diff --git a/js/services/directus.js b/js/services/directus.js
index 4f838a0..3e36e3b 100644
--- a/js/services/directus.js
+++ b/js/services/directus.js
@@ -261,6 +261,7 @@ class DirectusService {
                 'currency',
                 'condition',
                 'date_created',
+                'user_created',
                 'images.directus_files_id.id',
                 'category.id',
                 'category.name',
diff --git a/service-worker.js b/service-worker.js
index 8252fa1..7f37169 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'dgray-v29';
+const CACHE_NAME = 'dgray-v32';
 const STATIC_ASSETS = [
     '/',
     '/index.html',