improve listing and search on home

js/components/pages/page-listing.js

@@ -30,6 +30,9 @@ class PageListing extends HTMLElement {
             this.listing = await directus.getListing(this.listingId)
             this.loadFavoriteState()
             
+            // Increment view counter (async, don't wait)
+            directus.incrementListingViews(this.listingId)
+            
             // Load other listings from same seller
             if (this.listing?.user_created) {
                 await this.loadSellerListings()
@@ -159,6 +162,7 @@ class PageListing extends HTMLElement {
                             <div class="listing-meta">
                                 ${this.listing.condition ? `<span class="meta-item">${this.getConditionLabel(this.listing.condition)}</span>` : ''}
                                 ${this.listing.shipping ? `<span class="meta-item">📦 ${t('listing.shippingAvailable')}</span>` : ''}
+                                <span class="meta-item views-item"><span class="views-icon">👁</span> ${this.formatViews(this.listing.views || 0)}</span>
                                 <span class="meta-item meta-date">${t('listing.postedOn')} ${createdDate}</span>
                             </div>
                         </header>
@@ -442,6 +446,13 @@ class PageListing extends HTMLElement {
         return labels[condition] || condition
     }
 
+    formatViews(count) {
+        if (count === 1) {
+            return `1 ${t('listing.viewSingular')}`
+        }
+        return `${count} ${t('listing.viewPlural')}`
+    }
+
     formatDescription(text) {
         if (!text) return ''
         return text
@@ -604,6 +615,10 @@ style.textContent = /* css */`
     page-listing .meta-date {
         margin-left: auto;
     }
+
+    page-listing .views-icon {
+        filter: grayscale(1);
+    }
     
     page-listing .listing-description,
     page-listing .listing-location-section {