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

This commit is contained in:
2026-02-08 10:25:06 +01:00
parent e7c73f85b9
commit af25be449d
11 changed files with 167 additions and 32 deletions

View File

@@ -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>
` : ''}
`
}