improve markup

css/base.css

@@ -7,6 +7,7 @@
 html {
     font-size: 16px;
     scroll-behavior: smooth;
+    scrollbar-gutter: stable;
 }
 
 body {

js/components/app-footer.js

@@ -8,7 +8,7 @@ class AppFooter extends HTMLElement {
     render() {
         const year = new Date().getFullYear();
         
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <div class="footer-inner container">
                 <p class="footer-copyright">
                     &copy; ${year} dgray. <span data-i18n="footer.rights">${t('footer.rights')}</span>

js/components/app-header.js

@@ -70,7 +70,7 @@ class AppHeader extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <div class="header-inner container">
                 <a href="#/" class="logo">dgray</a>
                 

js/components/app-shell.js

@@ -25,7 +25,7 @@ class AppShell extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <app-header></app-header>
             <main class="container" id="router-outlet"></main>
             <app-footer></app-footer>

js/components/listing-card.js

@@ -58,7 +58,7 @@ class ListingCard extends HTMLElement {
         const priceDisplay = price ? formatPrice(parseFloat(price), currency) : '–';
         const favoriteLabel = this.isFavorite ? t('home.removeFavorite') : t('home.addFavorite');
         
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <a href="#/listing/${escapeHTML(id)}" class="listing-link">
                 <div class="listing-image" ${image ? `style="background-image: url('${escapeHTML(image)}')"` : ''}></div>
                 <div class="listing-info">
@@ -112,7 +112,7 @@ class ListingCard extends HTMLElement {
 customElements.define('listing-card', ListingCard);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     listing-card {
         display: block;
         position: relative;

js/components/pages/page-create.js

@@ -23,7 +23,7 @@ class PageCreate extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <div class="create-page">
                 <h1 data-i18n="create.title">${t('create.title')}</h1>
                 
@@ -164,7 +164,7 @@ class PageCreate extends HTMLElement {
 customElements.define('page-create', PageCreate);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     page-create .create-page {
         max-width: 600px;
         margin: 0 auto;

js/components/pages/page-home.js

@@ -13,17 +13,11 @@ class PageHome extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <section class="search-section">
                 <search-box></search-box>
             </section>
             
-            <section class="categories-desktop">
-                <div class="category-badges">
-                    ${this.renderCategoryBadges()}
-                </div>
-            </section>
-            
             <section class="recent-listings">
                 <h2>${t('home.recentListings')}</h2>
                 <div class="listings-grid">
@@ -33,13 +27,6 @@ class PageHome extends HTMLElement {
         `;
     }
 
-    renderCategoryBadges() {
-        const topCategories = ['electronics', 'vehicles', 'furniture', 'clothing', 'sports'];
-        return topCategories.map(cat => `
-            <a href="#/search?category=${cat}" class="badge">${t(`categories.${cat}`)}</a>
-        `).join('');
-    }
-
     renderPlaceholderListings() {
         const placeholders = Array(10).fill(null);
         return placeholders.map((_, i) => /* html */`
@@ -55,49 +42,12 @@ class PageHome extends HTMLElement {
 customElements.define('page-home', PageHome);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     /* Search Section */
     page-home .search-section {
         padding: var(--space-xl) 0;
     }
     
-    /* Category Badges (Desktop only) */
-    page-home .categories-desktop {
-        display: none;
-        margin-bottom: var(--space-xl);
-    }
-    
-    @media (min-width: 768px) {
-        page-home .categories-desktop {
-            display: block;
-        }
-    }
-    
-    page-home .category-badges {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--space-sm);
-        justify-content: center;
-    }
-    
-    page-home .badge {
-        display: inline-block;
-        padding: var(--space-xs) var(--space-md);
-        background: var(--color-bg-secondary);
-        border: 1px solid var(--color-border);
-        border-radius: var(--radius-full);
-        color: var(--color-text);
-        text-decoration: none;
-        font-size: var(--font-size-sm);
-        transition: all var(--transition-fast);
-    }
-    
-    page-home .badge:hover {
-        background: var(--color-primary);
-        color: var(--color-bg);
-        border-color: var(--color-primary);
-    }
-    
     /* Listings */
     page-home section {
         margin-bottom: var(--space-xl);

js/components/pages/page-listing.js

@@ -42,7 +42,7 @@ class PageListing extends HTMLElement {
 
     render() {
         if (this.loading) {
-            this.innerHTML = /* html */ `
+            this.innerHTML = /* html */`
                 <div class="loading">
                     <div class="spinner"></div>
                 </div>
@@ -51,7 +51,7 @@ class PageListing extends HTMLElement {
         }
 
         if (!this.listing) {
-            this.innerHTML = /* html */ `
+            this.innerHTML = /* html */`
                 <div class="empty-state">
                     <div class="empty-state-icon">😕</div>
                     <p data-i18n="listing.notFound">${t('listing.notFound')}</p>
@@ -61,7 +61,7 @@ class PageListing extends HTMLElement {
             return;
         }
 
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <article class="listing-detail">
                 <div class="listing-gallery">
                     <div class="listing-image-main"></div>
@@ -111,7 +111,7 @@ class PageListing extends HTMLElement {
 customElements.define('page-listing', PageListing);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     page-listing .listing-detail {
         display: grid;
         grid-template-columns: 1fr 400px;

js/components/pages/page-not-found.js

@@ -11,7 +11,7 @@ class PageNotFound extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <div class="not-found">
                 <div class="not-found-icon">404</div>
                 <h1 data-i18n="notFound.title">${t('notFound.title')}</h1>
@@ -27,7 +27,7 @@ class PageNotFound extends HTMLElement {
 customElements.define('page-not-found', PageNotFound);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     page-not-found .not-found {
         text-align: center;
         padding: var(--space-3xl) 0;

js/components/pages/page-search.js

@@ -76,10 +76,10 @@ class PageSearch extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <div class="search-page">
                 <section class="search-header">
-                    <search-box compact no-navigate></search-box>
+                    <search-box no-navigate></search-box>
                 </section>
                 
                 <section class="search-results" id="results">
@@ -120,7 +120,7 @@ class PageSearch extends HTMLElement {
 
     renderResults() {
         if (this.loading) {
-            return /* html */ `
+            return /* html */`
                 <div class="loading">
                     <div class="spinner"></div>
                     <p>${t('search.loading')}</p>
@@ -129,7 +129,7 @@ class PageSearch extends HTMLElement {
         }
 
         if (!this.hasFilters() && this.results.length === 0) {
-            return /* html */ `
+            return /* html */`
                 <div class="empty-state">
                     <div class="empty-state-icon">🔍</div>
                     <p>${t('search.enterQuery')}</p>
@@ -138,7 +138,7 @@ class PageSearch extends HTMLElement {
         }
 
         if (this.results.length === 0) {
-            return /* html */ `
+            return /* html */`
                 <div class="empty-state">
                     <div class="empty-state-icon">😕</div>
                     <p>${t('search.noResults')}</p>
@@ -146,10 +146,10 @@ class PageSearch extends HTMLElement {
             `;
         }
 
-        return /* html */ `
+        return /* html */`
             <p class="results-count">${t('search.resultsCount', { count: this.results.length })}</p>
             <div class="listings-grid">
-                ${this.results.map(item => /* html */ `
+                ${this.results.map(item => /* html */`
                     <listing-card 
                         listing-id="${item.id}"
                         title="${this.escapeHtml(item.title)}"
@@ -171,7 +171,7 @@ class PageSearch extends HTMLElement {
 customElements.define('page-search', PageSearch);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     page-search .search-page {
         padding: var(--space-lg) 0;
     }

js/components/search-box.js

@@ -128,7 +128,7 @@ class SearchBox extends HTMLElement {
     render() {
         const compact = this.isCompact;
         
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <form class="search-box ${compact ? 'search-box--compact' : ''}" id="search-form">
                 <div class="search-row search-row-query">
                     <div class="search-field search-field-query">
@@ -159,7 +159,7 @@ class SearchBox extends HTMLElement {
         // Track which category accordion is expanded
         this._expandedCategory = this._expandedCategory || '';
         
-        return /* html */ `
+        return /* html */`
             <!-- Accordion Category Dropdown -->
             <div class="search-row search-row-filters">
                 <div class="category-dropdown">
@@ -547,7 +547,7 @@ class SearchBox extends HTMLElement {
 customElements.define('search-box', SearchBox);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     search-box {
         display: block;
     }