feat: soft-delete listings with visual dimming, auto-remove hint, and 30-day expiry
This commit is contained in:
@@ -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>
|
||||
` : ''}
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user