feat: soft-delete listings with visual dimming, auto-remove hint, and 30-day expiry

2026-02-08 10:25:06 +01:00
parent e7c73f85b9
commit af25be449d
11 changed files with 167 additions and 32 deletions
--- a/js/components/listing-card.js
+++ b/js/components/listing-card.js
@@ -105,7 +105,11 @@ class ListingCard extends HTMLElement {
            </svg>
        `
        
-        const ownerBadge = this.isOwner ? /* html */`
+        const paymentStatus = this.getAttribute('payment-status')
+        const status = this.getAttribute('status')
+        const isDeleted = status === 'deleted'
+
+        const ownerBadge = (this.isOwner && !isDeleted) ? /* 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>
@@ -113,12 +117,11 @@ class ListingCard extends HTMLElement {
                </svg>
            </a>
        ` : ''
-        
-        const paymentStatus = this.getAttribute('payment-status')
-        const status = this.getAttribute('status')

        let paymentBadge = ''
-        if (status === 'archived') {
+        if (status === 'deleted') {
+            paymentBadge = /* html */`<span class="payment-badge payment-expired">${t('myListings.status.deleted')}</span>`
+        } else if (status === 'archived') {
            paymentBadge = /* html */`<span class="payment-badge payment-expired">${t('myListings.status.expired')}</span>`
        } else if (paymentStatus === 'processing' || paymentStatus === 'pending') {
            paymentBadge = /* html */`<span class="payment-badge payment-processing"><span class="pulse-dot"></span>${t('myListings.status.processing')}</span>`
@@ -130,9 +133,12 @@ class ListingCard extends HTMLElement {
            paymentBadge = /* html */`<span class="payment-badge payment-published">${t('myListings.status.published')}</span>`
        }

+        const linkTag = isDeleted ? 'div' : 'a'
+        const linkAttr = isDeleted ? '' : `href="#/listing/${escapeHTML(id)}"`
+
        this.innerHTML = /* html */`
            ${ownerBadge}
-            <a href="#/listing/${escapeHTML(id)}" class="listing-link">
+            <${linkTag} ${linkAttr} class="listing-link">
                <div class="listing-image">
                    ${image 
                        ? `<img src="${escapeHTML(image)}" alt="${escapeHTML(title)}" loading="lazy">`
@@ -147,7 +153,8 @@ class ListingCard extends HTMLElement {
                    </div>
                    <p class="listing-location">${escapeHTML(location)}</p>
                </div>
-            </a>
+            </${linkTag}>
+            ${!isDeleted ? /* html */`
            <button 
                class="favorite-btn ${this.isFavorite ? 'active' : ''}" 
                aria-label="${favoriteLabel}"
@@ -157,6 +164,7 @@ class ListingCard extends HTMLElement {
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
            </button>
+            ` : ''}
        `
    }

--- a/js/components/pages/page-listing.js
+++ b/js/components/pages/page-listing.js
@@ -199,6 +199,17 @@ class PageListing extends HTMLElement {
            return
        }

+        if (this.listing.status === 'deleted' && !this.isOwner) {
+            this.innerHTML = /* html */`
+                <div class="empty-state">
+                    <div class="empty-state-icon">🗑️</div>
+                    <p>${t('messages.listingRemoved')}</p>
+                    <a href="#/" class="btn btn-primary">${t('listing.backHome')}</a>
+                </div>
+            `
+            return
+        }
+
        const images = (this.listing.images || []).slice(0, 5)
        const hasImages = images.length > 0
        const firstImage = hasImages ? this.getImageUrl(images[0]) : null
--- a/js/components/pages/page-messages.js
+++ b/js/components/pages/page-messages.js
@@ -57,6 +57,7 @@ class PageMessages extends HTMLElement {
                    'date_updated',
                    'listing_id.id',
                    'listing_id.title',
+                    'listing_id.status',
                    'listing_id.images.directus_files_id.id',
                    'status'
                ],
@@ -155,7 +156,7 @@ class PageMessages extends HTMLElement {
            const listing = conv.listing_id
            const imageId = listing?.images?.[0]?.directus_files_id?.id
            const imageUrl = imageId ? directus.getThumbnailUrl(imageId, 80) : ''
-            const title = listing?.title || t('messages.unknownListing')
+            const title = listing?.status === 'deleted' ? t('messages.listingRemoved') : (listing?.title || t('messages.unknownListing'))
            const dateStr = this.formatDate(conv.date_updated || conv.date_created)

            return /* html */`
--- a/js/components/pages/page-my-listings.js
+++ b/js/components/pages/page-my-listings.js
@@ -113,7 +113,7 @@ class PageMyListings extends HTMLElement {
            const response = await directus.getListings({
                fields: [
                    'id', 'status', 'title', 'slug', 'price', 'currency',
-                    'condition', 'payment_status', 'paid_at', 'expires_at', 'date_created', 'user_created',
+                    'condition', 'payment_status', 'paid_at', 'expires_at', 'date_created', 'date_updated', 'user_created',
                    'images.directus_files_id.id',
                    'location.id', 'location.name'
                ],
@@ -123,7 +123,12 @@ class PageMyListings extends HTMLElement {
                sort: ['-date_created'],
                limit: 50
            })
-            this.listings = response.items || []
+            const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000
+            this.listings = (response.items || []).filter(l => {
+                if (l.status !== 'deleted') return true
+                const updated = new Date(l.date_updated || l.date_created).getTime()
+                return updated > thirtyDaysAgo
+            })
            this.loading = false
            this.updateContent()
            this.startPolling()
@@ -229,8 +234,21 @@ class PageMyListings extends HTMLElement {
                `
            }

+            let deleteBtn = ''
+            if (listing.status === 'deleted') {
+                deleteBtn = /* html */`
+                    <p class="deleted-hint">${t('myListings.deletedHint')}</p>
+                `
+            } else if (listing.status !== 'archived') {
+                deleteBtn = /* html */`
+                    <button class="btn-delete-listing" data-id="${listing.id}">
+                        ${t('myListings.delete')}
+                    </button>
+                `
+            }
+
            return /* html */`
-                <div class="listing-wrapper">
+                <div class="listing-wrapper${listing.status === 'deleted' ? ' is-deleted' : ''}">
                    ${statusBadge}
                    <listing-card 
                        listing-id="${listing.id}"
@@ -244,6 +262,7 @@ class PageMyListings extends HTMLElement {
                        status="${listing.status || ''}"
                    ></listing-card>
                    ${toggleBtn}
+                    ${deleteBtn}
                </div>
            `
        }).join('')
@@ -262,6 +281,14 @@ class PageMyListings extends HTMLElement {
                this.toggleListingStatus(id, newStatus)
            })
        })
+        this.querySelectorAll('.btn-delete-listing').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                const id = btn.dataset.id
+                this.deleteListing(id)
+            })
+        })
    }

    async toggleListingStatus(id, newStatus) {
@@ -276,6 +303,20 @@ class PageMyListings extends HTMLElement {
            console.error('Failed to toggle listing status:', err)
        }
    }
+
+    async deleteListing(id) {
+        if (!confirm(t('myListings.deleteConfirm'))) return
+        try {
+            await directus.updateListing(id, { status: 'deleted' })
+            const listing = this.listings.find(l => l.id === id)
+            if (listing) {
+                listing.status = 'deleted'
+                this.updateContent()
+            }
+        } catch (err) {
+            console.error('Failed to delete listing:', err)
+        }
+    }
 }

 customElements.define('page-my-listings', PageMyListings)
@@ -304,6 +345,19 @@ style.textContent = /* css */`
        min-width: 0;
    }

+    page-my-listings .listing-wrapper.is-deleted {
+        opacity: 0.5;
+        filter: grayscale(1);
+        pointer-events: none;
+    }
+
+    page-my-listings .deleted-hint {
+        margin: var(--space-xs) 0 0;
+        font-size: var(--font-size-xs);
+        color: var(--color-text-muted);
+        text-align: center;
+    }
+
    page-my-listings .status-badge {
        position: absolute;
        top: var(--space-sm);
@@ -326,6 +380,25 @@ style.textContent = /* css */`
        text-decoration: line-through;
    }

+    page-my-listings .btn-delete-listing {
+        display: block;
+        width: 100%;
+        padding: var(--space-xs) var(--space-sm);
+        margin-top: var(--space-xs);
+        background: none;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-sm);
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
+        cursor: pointer;
+        transition: all var(--transition-fast);
+    }
+
+    page-my-listings .btn-delete-listing:hover {
+        border-color: var(--color-error, #b43c3c);
+        color: var(--color-error, #b43c3c);
+    }
+
    page-my-listings .btn-toggle-status {
        display: block;
        width: 100%;