feat: add owner badge with edit icon on listing cards for own listings

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)