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.

### B1. Breadcrumbs — 🟢
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") — 🟢
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 — 🟡
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 — 🟡
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 — 🔴
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`.