kompress_eshop/design-parity.md

Design parity — Kompress mockup vs current storefront

Tracks the gap between the imported Claude Design mockup (Kompress-eshop.html, project eshop on claude.ai/design) and the live storefront. The home page body (featured grid + right rail) and the medical‑blue accent are done; this file lists everything else from the mockup that is still missing or only half‑wired, so it can be picked up incrementally.

Constraints for all items: htmx + Alpine + PenguinUI + Tailwind tokens only. Express colors with the existing design tokens (bg-primary, bg-surface-alt, border-outline, dark:* …) — never inline hex — so light and dark both work. PenguinUI is copy‑paste: lift markup out of penguinui-components/<name>/… (read‑only, never {% include %}'d) and adapt at the use‑site.

Legend: 🟢 backend already exists, only UI missing · 🟡 partial · 🔴 net‑new.

---

A. Global chrome (assets/views/base.html)

These affect every page, so they live in base.html, not the home template.

✅ Implemented (pass 2) — A1–A6 are now built in base.html, with i18n keys added to assets/i18n/{sk,en}/main.ftl (top-contact, search-button, welcome, brand-subtitle, footer-*, hotline, …). Verified: /, /shop, /login, /register, /cart, /search?q= all 200, no render errors. The Kontakt / Mapa stránky top-bar links and the footer info links point to # until real pages exist.

A1. Top utility bar — ✅ done

Mockup: thin white bar above the header, right‑aligned links Kontakt · Mapa stránky.

• New <div> strip at the very top of base.html, border-b border-outline bg-surface text-xs text-on-surface/70.
• Links to a future /kontakt and /sitemap (or existing pages).
• Low effort, no backend.

A2. In‑header search bar — ✅ done

Mockup: full‑width search input with a magnifier icon + blue Hľadať submit button, centered in the header.

• Backend already exists: GET /search (src/controllers/shop.rs:353, run_search at :90, fragment assets/views/shop/_search.html). Just needs a header form: <form action="/search" method="get"> with name="q", optionally hx-get="/search" hx-trigger="keyup changed delay:300ms" for live results.
• Copy markup from penguinui-components/navbar/with-search.html and/or penguinui-components/text-input/search-input.html.
• Medium effort — mostly wiring the existing endpoint into the header layout.

A3. Logo lockup with subtitle — ✅ done

Mockup: rounded blue tile with a "+" cross glyph + KOMPRESS + uppercase subtitle zdravotnícke potreby.

• Current logo is a plain text wordmark in base.html. Add the icon tile (bg-primary text-on-primary, rounded-radius) and the muted subtitle line.
• Cross SVG is in the mockup (two rounded <rect>s). Low effort.

A4. Account button (two‑line) — ✅ done

Mockup: person icon + stacked Vitajte / Prihláste sa (or the customer name when logged in).

• Logged‑in/out state already available via logged_in_customer / customer_name and the existing partials/profile_menu.html.
• Restyle the login link / profile menu trigger into the two‑line button. Low effort.

A5. Cart button with text label — ✅ done

Mockup: cart icon + red count badge + stacked Košík / N produktov label.

• The icon + cookie‑driven badge already exist in base.html (cartCount() JS). Add the text label beside it; pluralize "produkt/produkty/produktov" (mirror the mockup's plural() helper, or add an i18n key).
• Low effort.

A6. Footer — ✅ done

Mockup: 4‑column footer (brand blurb · Informácie · Účet · Kontakt) + copyright bar.

• No footer exists anywhere (grep "<footer" → none). Add once to base.html after <main>.
• Static links; reuse the same i18n keys as the nav. Low effort, high visual payoff.

---

B. Listing layout (shop/category.html, shop/_product_grid.html)

The mockup's body is really a category/listing layout. The home page borrows its look; the real listing pages should adopt the rest.

✅ Implemented (pass 3) — reusable ui::crumb / ui::crumb_current chevron breadcrumb macros (assets/views/macros/ui.html), wired into home/index.html (Domov), shop/index.html (Domov › Obchod) and restyled on shop/category.html (Domov › Obchod › … › category). Added the sidebar Informácie card to shop/_sidebar.html. While verifying, confirmed B3 sort, B4 view toggle and C1 collapsible tree were already built — only styling polish remains. Verified: /, /shop, /partials/categories, /search?q= all 200, no errors.

B1. Breadcrumbs — ✅ done

Mockup: Domov › Zdravotnícke › {kategória} with chevron separators.

• Already implemented on category pages: breadcrumbs loop in assets/views/shop/category.html:12. Just needs the mockup's chevron styling and to be surfaced on more pages (e.g. product detail, optionally a "Domov" crumb on home).
• Copy from penguinui-components/breadcrumbs/breadcrumb-with-chevron.html.
• Low effort (restyle existing).

B2. Category banner card — 🔴

Mockup: white card with a 148px image placeholder + category description paragraph + Viac › link, shown above the product list.

• Per‑category copy/image. Needs a description (and optional banner image) field on the category model, or static copy keyed by slug for now.
• Render as the app card idiom (border border-outline bg-surface-alt dark:…).
• Medium effort (model field) or low (static placeholder first).

B3. Sort control ("Zoradiť podľa") — ✅ already in toolbar

Mockup: styled <select> — Predvolené / Cena ↑ / Cena ↓ / Názov A–Z / Najpredávanejšie.

• Backend already exists: sort query param (src/controllers/shop.rs:41,81, 179‑181). Needs the styled select wired to it (hx-get on change, preserving the query + filters via the existing build_query helper at shop.rs:63).
• Copy from penguinui-components/select/default-select.html.
• Low effort.

B4. View grid/list toggle — 🟢 (done elsewhere)

• Already implemented in assets/views/shop/_product_grid.html (Alpine view state, persisted to localStorage). The mockup's toggle is the same idea; just align the icon/segmented‑button styling with the mockup. Cosmetic only.

B5. "Porovnať" (compare) — 🔴

Mockup: a Porovnať button in the listing toolbar.

• No compare feature exists. Net‑new: select‑to‑compare state (Alpine + a cookie or server list) and a compare view. Largest item here — defer unless wanted.

B6. List‑view product card — ✅ done

Mockup list rows are richer (left thumbnail, description, stock pill, price block, add/options/out‑of‑stock button on the right).

• shop/_card.html already has a view === 'list' horizontal layout. Close already; optionally add the stock pill (Skladom / Vypredané) and discount badge to match.
• Low effort.

---

C. Left sidebar (assets/views/partials/categories.html via /partials/categories)

Mockup left column = two white cards: a collapsible Kategórie tree and an Informácie links card. base.html already renders #category-sidebar from /partials/categories, so this is a restyle of that partial.

C1. Collapsible category tree — ✅ already implemented

Mockup: top‑level groups with +/− chevrons; expanded group shows leaf links, active leaf highlighted (bg-primary/10 text-primary font-bold).

• Style the existing categories partial as a white card with Alpine‑toggled sub‑lists (x-data="{ open: … }"). Active state via aria-current + the existing markActiveNav() pattern.
• Medium effort.

C2. "Informácie" links card — ✅ done

Mockup: second sidebar card with Obchodné podmienky / O našej spoločnosti / Naše obchody / Doprava a platba.

• Static links card; same markup as the contact/stores cards already added to the home right rail. Low effort.

---

D. Right rail — mostly done

Implemented on the home page: Najpredávanejšie (from featured products), Naše obchody placeholder, Kontaktujte nás blue card.

Remaining 🟡:

• D1. Bestsellers from real sales data — currently reuses the featured query; wire to actual order/sales counts when available.
• D2. "Naše obchody" real photo + page — replace the placeholder block and link to a real stores page.
• D3. Contact hotline — phone number is hardcoded; move to config/i18n.

---

Suggested order (quick wins first)

1. Footer (A6) + top utility bar (A1) — pure markup, big visual lift.
2. Header search (A2) + cart label (A5) + logo lockup (A3) — wire existing data.
3. Sort select (B3) + breadcrumb restyle (B1) — backends already exist.
4. Sidebar restyle (C1, C2).
5. Category banner (B2), richer list card (B6).
6. Compare (B5) — only if the feature is actually wanted.

Reference

• Mockup source extracted to (scratch, regenerate via DesignSync if needed): DesignSync get_file on project 015b8bf5-fd27-4a7e-82d9-d1864a59578c, file Kompress-eshop.html → __bundler/template script holds the real markup.
• PenguinUI workflow: see penguinui-workflow memory + hardcoded-inventory.md.