vkusvill 0.0.0-dev.0 → 0.0.0-dev.1

package/src/views/recipes.js

@@ -2,7 +2,7 @@
 // and a recipe page with the steps and an ingredient checklist that goes into the cart with one key.
 
 import { T, mix } from "../ui/theme.js";
-import { TextInput, ListView, Menu } from "../ui/widgets.js";
+import { TextInput, ListView, Menu, ChipBar } from "../ui/widgets.js";
 import { image } from "../image.js";
 import * as api from "../api.js";
 import { normalize, qtyStep, plural, decode } from "../product.js";
@@ -36,6 +36,7 @@ class RecipesView {
     this.input = new TextInput({ placeholder: "блюдо или продукт: сырники, тыква, курица…" });
     this.input.onChange = (v) => { clearTimeout(this.timer); this.timer = setTimeout(() => this.setQuery(v), 350); };
     this.list = new ListView();
+    this.bar = new ChipBar();
     this.q = "";
     this.f = loadRecipeFilters();
     this.filterDefs = [];
@@ -49,6 +50,22 @@ class RecipesView {
 
   saveFilters() { store.setPref("recipes", this.f); }
 
+  focusTop() { this.focus = "search"; }
+
+  chips() {
+    const act = this.activeFilters();
+    return [
+      { label: act.length ? "фильтры ▾" : "фильтры: аллергены, время, сложность…", prefix: "f ", run: () => this.filterMenu() },
+      ...act.map((a) => ({
+        label: `${a.label} ×`, fg: T.bg, bg: a.key === "allergens" ? T.orange : T.lime, bold: true,
+        run: () => {
+          if (a.key === "allergens") this.f.allergens = this.f.allergens.filter((i) => i !== a.id); else this.f[a.key] = 0;
+          this.saveFilters(); this.reset(); this.loadMore();
+        },
+      })),
+    ];
+  }
+
   tick() {
     if (this.hasMore && !this.loading && !this.error && this.page && this.list.sel >= this.items.length - 4) this.loadMore();
   }
@@ -122,13 +139,20 @@ class RecipesView {
   key(k) {
     if (this.focus === "search") {
       if (k.type === "paste") return this.input.key(k);
-      if (["down", "tab", "escape"].includes(k.name)) { this.focus = "list"; return true; }
+      if (k.name === "down" || k.name === "tab") { this.focus = "chips"; return true; }
+      if (k.name === "escape") { this.focus = "list"; return true; }
       if (k.name === "enter") { clearTimeout(this.timer); this.setQuery(this.input.value); this.focus = "list"; return true; }
       return this.input.key(k);
     }
     if (k.type !== "key") return false;
+    // Zones top to bottom: search → filter chips → list
+    if (this.focus === "chips") {
+      if (k.name === "up") { this.focus = "search"; return true; }
+      if (k.name === "down" || k.name === "escape") { this.focus = "list"; return true; }
+      if (this.bar.key(k, this.chips())) return true;
+    }
     const h = k.hot ?? k.name;
-    if (k.name === "up" && this.list.sel === 0) { this.focus = "search"; return true; }
+    if (k.name === "up" && this.list.sel === 0) { this.focus = "chips"; return true; }
     if (this.list.key(k, this.items.length)) return true;
     if (h === "/" || k.ch === ".") { this.focus = "search"; return true; }
     if (h === "f") { this.filterMenu(); return true; }
@@ -139,38 +163,21 @@ class RecipesView {
   }
 
   hints() {
-    if (this.focus === "search") return [["⏎", "искать"], ["↓", "к списку"]];
+    if (this.focus === "search") return [["⏎", "искать"], ["↓", "к фильтрам"]];
+    if (this.focus === "chips") return [["← →", "выбор"], ["⏎", "открыть или снять"], ["↑", "к поиску"], ["↓", "к списку"]];
     return [["↑↓", "выбор"], ["⏎", "рецепт"], ["/", "поиск"], ["f", "фильтры"], ["o", "на сайте"], ["esc", "сбросить"]];
   }
 
   draw(g, r) {
     const app = this.app;
     g.fill(r.x, r.y, r.w, r.h, T.bg);
-    const focused = this.focus === "search";
-    g.box(r.x, r.y, r.w, 3, { fg: focused ? T.lineHi : T.line, bg: T.panel, title: "Рецепты ВкусВилла", titleFg: focused ? T.lime : T.dim, right: `${this.total ?? "…"} ${plural(this.total ?? 0, "рецепт", "рецепта", "рецептов")}` });
+    const focused = this.focus === "search" && !app.headerFocus;
+    g.box(r.x, r.y, r.w, 3, { fg: focused ? T.lineHi : T.line, bg: T.panel, title: "Поиск рецептов", titleFg: focused ? T.lime : T.dim, right: `${this.total ?? "…"} ${plural(this.total ?? 0, "рецепт", "рецепта", "рецептов")}` });
     g.text(r.x + 2, r.y + 1, "⌕", { fg: T.lime, bold: true, bg: T.panel });
     this.input.draw(g, r.x + 4, r.y + 1, r.w - 8, { focused, bg: T.panel, blink: app.frame % 10 < 7 || !focused });
     app.hit(r.x, r.y, r.w, 3, { click: () => { this.focus = "search"; } });
-    // Active filters
-    let x = r.x + 1;
-    const fy = r.y + 3;
-    x = g.text(x, fy, "f ", { fg: T.dim });
-    const act = this.activeFilters();
-    if (!act.length) {
-      const label = "фильтры: аллергены, время, сложность…";
-      g.pill(x, fy, label, { fg: T.sub, bg: T.raise });
-      app.hit(x, fy, strWidth(label) + 2, 1, { click: () => this.filterMenu() });
-    }
-    for (const a of act) {
-      const w = strWidth(a.label) + 4;
-      if (x + w > r.x + r.w - 2) break;
-      g.pill(x, fy, a.label + " ×", { fg: T.bg, bg: a.key === "allergens" ? T.orange : T.lime, bold: true });
-      app.hit(x, fy, w, 1, { click: () => {
-        if (a.key === "allergens") this.f.allergens = this.f.allergens.filter((i) => i !== a.id); else this.f[a.key] = 0;
-        this.saveFilters(); this.reset(); this.loadMore();
-      } });
-      x += w + 1;
-    }
+    // The filters button and the active filters (Enter on one removes it)
+    this.bar.draw(g, app, r.x + 1, r.y + 3, r.x + r.w - 2, this.chips(), { focused: this.focus === "chips" && !app.headerFocus });
     const top = r.y + 4;
     const H = r.h - 4;
     const paneW = r.w >= 96 ? Math.max(40, Math.min(60, Math.floor(r.w * 0.42))) : 0;
@@ -180,14 +187,31 @@ class RecipesView {
       g.textC(r.x, lw, top + Math.floor(H / 2) - 1, this.loading ? "Листаю кулинарную книгу…" : this.error ? `⚠ ${this.error}` : "Ничего не нашлось", { fg: this.error ? T.red : T.dim, bg: T.panel });
       if (this.loading) loader(g, r.x + Math.floor(lw / 2) - 6, top + Math.floor(H / 2) + 1, app.frame);
     } else {
+      // Wide enough: one line per recipe with the details in aligned columns on the right;
+      // otherwise the details go on a second line
+      const COLS = [["time", 14], ["level", 11], ["portions", 11], ["kcal", 17]];
+      const metaW = COLS.reduce((s, [, w]) => s + w, 0);
+      const oneLine = lw - 6 - metaW >= 28;
+      const rowH = oneLine ? 1 : 2;
       this.list.draw(g, app, r.x, top, lw - 1, H, this.items, (it, i, y, sel) => {
         const bg = sel ? (this.focus === "list" ? T.selHi : T.sel) : T.panel;
-        g.fill(r.x, y, lw - 1, 2, bg);
-        if (sel) { g.text(r.x, y, "▌", { fg: T.lime, bg }); g.text(r.x, y + 1, "▌", { fg: T.lime, bg }); }
+        g.fill(r.x, y, lw - 1, rowH, bg);
+        for (let j = 0; j < rowH; j++) if (sel) g.text(r.x, y + j, "▌", { fg: T.lime, bg });
+        const meta = {
+          time: it.cooking_time?.name && `◷ ${it.cooking_time.name}`,
+          level: it.complexity?.name && `◆ ${it.complexity.name.toLowerCase()}`,
+          portions: it.portions && `${it.portions} ${plural(it.portions, "порция", "порции", "порций")}`,
+          kcal: it.nutritional?.calories && `${Math.round(it.nutritional.calories)} ккал/100 г`,
+        };
+        if (oneLine) {
+          g.textW(r.x + 2, y, decode(it.name), lw - 6 - metaW, { fg: sel ? T.white : T.text, bold: sel, bg });
+          let cx = r.x + lw - 2 - metaW;
+          for (const [key, w] of COLS) { if (meta[key]) g.textW(cx, y, meta[key], w - 1, { fg: T.dim, bg }); cx += w; }
+          return;
+        }
         g.textW(r.x + 2, y, decode(it.name), lw - 6, { fg: sel ? T.white : T.text, bold: sel, bg });
-        const meta = [it.cooking_time?.name && `◷ ${it.cooking_time.name}`, it.complexity?.name && `◆ ${it.complexity.name.toLowerCase()}`, it.portions && `${it.portions} ${plural(it.portions, "порция", "порции", "порций")}`, it.nutritional?.calories && `${Math.round(it.nutritional.calories)} ккал/100 г`].filter(Boolean).join("   ");
-        g.textW(r.x + 2, y + 1, meta, lw - 6, { fg: T.dim, bg });
-      }, { rowH: 2, onPick: (it) => this.open(it) });
+        g.textW(r.x + 2, y + 1, Object.values(meta).filter(Boolean).join("   "), lw - 6, { fg: T.dim, bg });
+      }, { rowH, onPick: (it) => this.open(it) });
     }
     if (paneW) this.drawPane(g, { x: r.x + lw + 1, y: top, w: paneW - 1, h: H }, this.items[this.list.sel]);
   }
@@ -269,8 +293,18 @@ class RecipeView {
     if (k.type !== "key") return false;
     const h = k.hot ?? k.name;
     if (this.narrow && this.showSteps && k.name === "escape") { this.showSteps = false; return true; }
-    if (this.narrow && this.showSteps && (k.name === "up" || k.name === "down")) { this.scroll = Math.max(0, this.scroll + (k.name === "up" ? -1 : 1)); return true; }
-    if (this.list.key(k, this.ings.length)) return true;
+    if (this.narrow && this.showSteps && (k.name === "up" || k.name === "down")) {
+      if (k.name === "up" && this.scroll <= 0) return false;
+      this.scroll = Math.max(0, this.scroll + (k.name === "up" ? -1 : 1));
+      return true;
+    }
+    // The "+ в корзину" button sits above the ingredients: ↑ from the first one reaches it
+    if (this.focus === "button") {
+      if (k.name === "down" || k.name === "escape") { this.focus = "list"; return true; }
+      if (k.name === "enter" || k.name === "space") { this.addChecked(); return true; }
+      if (k.name === "up") return false;
+    } else if (k.name === "up" && this.list.sel <= 0) { this.focus = "button"; return true; }
+    if (this.focus !== "button" && this.list.key(k, this.ings.length)) return true;
     const ing = this.ings[this.list.sel];
     if (k.name === "space" || h === "x") { if (ing) ing.checked = !ing.checked; return true; }
     if (h === "a") { const all = this.ings.every((i) => i.checked); this.ings.forEach((i) => { i.checked = !all && !!i.ids?.length; }); return true; }
@@ -283,7 +317,10 @@ class RecipeView {
     return false;
   }
 
-  hints() { return [["esc", "назад"], ["␣", "отметить"], ["a", "все"], ["+", "в корзину"], ["⏎", "товар"], [this.narrow ? "s" : "PgDn", "шаги"], ["o", "на сайте"]]; }
+  hints() {
+    if (this.focus === "button") return [["⏎", "положить отмеченное в корзину"], ["↓", "к ингредиентам"], ["esc", "к ингредиентам"]];
+    return [["← esc", "назад"], ["␣", "отметить"], ["a", "все"], ["+", "в корзину"], ["⏎", "товар"], [this.narrow ? "s" : "PgDn", "шаги"], ["o", "на сайте"]];
+  }
 
   draw(g, r) {
     const app = this.app;
@@ -313,7 +350,9 @@ class RecipeView {
     const checked = this.ings.filter((i) => i.checked).length;
     g.text(x, y, `ИНГРЕДИЕНТЫ`, { fg: T.dim, bold: true, bg: T.panel });
     const btn = this.adding ? ` кладу ${this.adding.done}/${this.adding.total}… ` : ` + в корзину: ${checked} `;
-    g.textR(x + w, y, btn, { fg: T.bg, bg: this.adding ? T.yellow : T.lime, bold: true });
+    const onBtn = this.focus === "button" && !app.headerFocus;
+    g.textR(x + w, y, btn, { fg: T.bg, bg: this.adding ? T.yellow : T.lime, bold: true, underline: onBtn });
+    if (onBtn) g.textR(x + w - strWidth(btn) - 1, y, "▸", { fg: T.lime, bg: T.panel });
     app.hit(x + w - strWidth(btn), y, strWidth(btn), 1, { click: () => this.addChecked() });
     y += 1;
     this.list.draw(g, app, r.x, y, lw - 1, r.y + r.h - y, this.ings, (ing, i, ry, sel) => {

package/src/views/shops.js

@@ -2,7 +2,7 @@
 // and a Braille-dot map of all loaded shops with crosshairs on the selected one; z zooms in.
 
 import { T, mix } from "../ui/theme.js";
-import { ListView, Menu, TextInput } from "../ui/widgets.js";
+import { ListView, Menu, TextInput, ChipBar } from "../ui/widgets.js";
 import { Braille } from "../ui/draw.js";
 import * as api from "../api.js";
 import { plural } from "../product.js";
@@ -75,6 +75,7 @@ class ShopsView {
   constructor(app) {
     this.app = app;
     this.list = new ListView();
+    this.bar = new ChipBar();
     // Place filters survive restarts; Moscow region is the default
     const saved = store.pref("shops", null);
     const isId = (v) => Number.isInteger(v) && v >= 0;
@@ -103,6 +104,18 @@ class ShopsView {
     return [...v].sort((a, b) => isCourier(a) - isCourier(b));
   }
 
+  focusTop() { this.focus = "search"; }
+
+  // Place filters as keyboard-walkable pills, and "all on the map" while pages remain
+  chips() {
+    const out = [["region", "r"], ["city", "g"], ["subway", "m"], ["feature", "f"]].map(([kind, key]) => {
+      const val = this.f[kind] ? this.names[kind] : kind === "region" && this.regionHint ? this.regionHint : "любой";
+      return { label: `${key} ${FILTER_NAMES[kind]}: ${val} ▾`, run: () => this.pick(kind), ...(this.f[kind] ? { fg: T.bg, bg: T.lime, bold: true } : {}) };
+    });
+    if (this.hasMore && this.items.length) out.push({ label: "L все на карту", run: () => this.loadAll() });
+    return out;
+  }
+
   tick() {
     if (this.hasMore && !this.loading && !this.error && this.page && this.list.sel >= this.visible.length - 5) this.loadMore();
   }
@@ -223,11 +236,19 @@ class ShopsView {
   key(k) {
     if (this.focus === "search") {
       if (k.type === "paste") return this.search.key(k);
-      if (["down", "enter", "tab", "escape"].includes(k.name)) { this.focus = "list"; if (k.name === "escape") this.search.set(""); return true; }
+      if (k.name === "down" || k.name === "tab") { this.focus = "chips"; return true; }
+      if (k.name === "enter" || k.name === "escape") { this.focus = "list"; if (k.name === "escape") this.search.set(""); return true; }
       return this.search.key(k);
     }
     if (k.type !== "key") return false;
+    // Zones top to bottom: address search → place filters → list
+    if (this.focus === "chips") {
+      if (k.name === "up") { this.focus = "search"; return true; }
+      if (k.name === "down" || k.name === "escape") { this.focus = "list"; return true; }
+      if (this.bar.key(k, this.chips())) return true;
+    }
     const vis = this.visible;
+    if (k.name === "up" && this.list.sel <= 0) { this.focus = "chips"; return true; }
     if (this.list.key(k, vis.length)) return true;
     const h = k.hot ?? k.name;
     const s = vis[this.list.sel];
@@ -247,48 +268,39 @@ class ShopsView {
   }
 
   hints() {
-    if (this.focus === "search") return [["⏎ ↓", "к списку"], ["esc", "сбросить поиск"]];
+    if (this.focus === "search") return [["↓", "к фильтрам"], ["⏎", "к списку"], ["esc", "сбросить поиск"]];
+    if (this.focus === "chips") return [["← →", "выбор"], ["⏎", "выбрать"], ["↑", "к поиску"], ["↓", "к списку"]];
     return [["↑↓", "магазин"], ["/", "поиск"], ...(this.app.g.w < 100 ? [["v", "карта"]] : []), ["z", "приблизить"], ["r g m f", "регион·город·метро·особ."], ["L", "все на карту"], ["p", "Я.Карты"], ["o", "на сайте"], ["y", "адрес"]];
   }
 
   draw(g, r) {
     const app = this.app;
     g.fill(r.x, r.y, r.w, r.h, T.bg);
-    // Filters
-    let x = r.x + 1;
-    for (const [kind, key] of [["region", "r"], ["city", "g"], ["subway", "m"], ["feature", "f"]]) {
-      const val = this.f[kind] ? this.names[kind] : kind === "region" && this.regionHint ? this.regionHint : "любой";
-      const label = `${key} ${FILTER_NAMES[kind]}: ${val} ▾`;
-      const w = strWidth(label) + 2;
-      if (x + w > r.x + r.w - 30) break;
-      g.pill(x, r.y, label, { fg: this.f[kind] ? T.bg : T.sub, bg: this.f[kind] ? T.lime : T.raise, bold: !!this.f[kind] });
-      app.hit(x, r.y, w, 1, { click: () => this.pick(kind) });
-      x += w + 1;
-    }
-    // Loading progress
+    const vis = this.visible;
+    // Search box, like the catalog and recipes: a framed field with the "open now" count in its corner
+    const searching = this.focus === "search" && !app.headerFocus;
+    const open = vis.filter((s) => shopState(s)?.open).length;
+    const shops = vis.filter((s) => !isCourier(s)).length;
+    g.box(r.x, r.y, r.w, 3, {
+      fg: searching ? T.lineHi : T.line, bg: T.panel, title: "Поиск магазина", titleFg: searching ? T.lime : T.dim,
+      right: vis.length ? `● ${open} из ${shops} открыто` : "", rightFg: open ? T.lime : T.dim,
+    });
+    g.text(r.x + 2, r.y + 1, "⌕", { fg: T.lime, bold: true, bg: T.panel });
+    this.search.draw(g, r.x + 4, r.y + 1, r.w - 8, { focused: searching, bg: T.panel, blink: app.frame % 10 < 7 || !searching });
+    app.hit(r.x, r.y, r.w, 3, { click: () => { this.focus = "search"; } });
+    // Place filters and the loading progress under the box
+    const fy = r.y + 3;
+    this.bar.draw(g, app, r.x + 1, fy, r.x + r.w - 30, this.chips(), { focused: this.focus === "chips" && !app.headerFocus });
     const progress = this.pages ? this.page / this.pages : 0;
     const pw = 16;
     const px = r.x + r.w - pw - 12;
-    g.gradBar(px, r.y, pw, progress, [T.greenD, T.lime]);
-    g.text(px + pw + 1, r.y, `${this.items.length}/${this.total ?? "…"}`, { fg: T.dim });
-    app.hit(px, r.y, pw + 10, 1, { click: () => this.loadAll() });
+    g.gradBar(px, fy, pw, progress, [T.greenD, T.lime]);
+    g.text(px + pw + 1, fy, `${this.items.length}/${this.total ?? "…"}`, { fg: T.dim });
+    app.hit(px, fy, pw + 10, 1, { click: () => this.loadAll() });
 
-    const top = r.y + 2, H = r.h - 2;
+    const top = r.y + 5, H = r.h - 5;
     if (r.w < 100 && this.mapOnly) return this.drawMap(g, { x: r.x, y: top, w: r.w, h: H });
     const lw = r.w >= 100 ? Math.max(44, Math.floor(r.w * 0.42)) : r.w;
-    const vis = this.visible;
-    // Search line and the "open now" summary
-    const sy = r.y + 1;
-    const searching = this.focus === "search";
-    g.fill(r.x, sy, lw, 1, searching ? T.raise : T.bg);
-    g.text(r.x + 1, sy, "⌕", { fg: searching || this.search.value ? T.lime : T.dim, bg: searching ? T.raise : T.bg });
-    this.search.draw(g, r.x + 3, sy, lw - 24, { focused: searching, bg: searching ? T.raise : T.bg, blink: app.frame % 10 < 7 });
-    app.hit(r.x, sy, lw - 20, 1, { click: () => { this.focus = "search"; } });
-    if (vis.length) {
-      const open = vis.filter((s) => shopState(s)?.open).length;
-      const shops = vis.filter((s) => !isCourier(s)).length;
-      g.textR(r.x + lw - 1, sy, `● ${open} из ${shops} открыто`, { fg: open ? T.lime : T.red, bg: searching ? T.raise : T.bg });
-    }
     g.fill(r.x, top, lw, H, T.panel);
     if (!vis.length) {
       const msg = this.loading ? "Ищу магазины…" : this.error ? `⚠ ${this.error}` : this.items.length ? `По «${this.search.value}» ничего` : "Магазинов не нашлось";
@@ -298,20 +310,35 @@ class ShopsView {
       else if (this.search.value && this.hasMore && !this.loading) g.textC(r.x, lw, top + Math.floor(H / 2) + 1, "L — загрузить все магазины и искать по ним", { fg: T.dim, bg: T.panel });
       if (this.loading) loader(g, r.x + Math.floor(lw / 2) - 6, top + Math.floor(H / 2) + 1, app.frame);
     } else {
+      // Wide enough (no map beside the list): one line per shop, place and hours in columns
+      const PLACE = 20, HOURS = 28, RATING = 7;
+      const oneLine = lw - 6 - PLACE - HOURS - RATING >= 26;
+      const rowH = oneLine ? 1 : 2;
       this.list.draw(g, app, r.x, top, lw - 1, H, vis, (s, i, y, sel) => {
-        const bg = sel ? T.selHi : T.panel;
-        g.fill(r.x, y, lw - 1, 2, bg);
-        if (sel) { g.text(r.x, y, "▌", { fg: T.lime, bg }); g.text(r.x, y + 1, "▌", { fg: T.lime, bg }); }
+        const bg = sel ? (this.focus === "list" && !app.headerFocus ? T.selHi : T.sel) : T.panel;
+        g.fill(r.x, y, lw - 1, rowH, bg);
+        for (let j = 0; j < rowH; j++) if (sel) g.text(r.x, y + j, "▌", { fg: T.lime, bg });
         const st = shopState(s);
         const courier = st?.courier;
         g.text(r.x + 2, y, courier ? "◌" : st ? (st.open ? "●" : "○") : "·", { fg: courier ? T.mute : st?.open ? T.lime : T.red, bg });
         let ax = r.x + 4;
         if (courier) ax = g.text(ax, y, "склад ", { fg: T.violet, bg });
+        const place = s.subway?.name ? `Ⓜ ${s.subway.name}` : s.city?.name ?? "";
+        const hours = courier ? "только для курьеров" : st?.text ?? s.schedule ?? "";
+        const hoursFg = courier ? T.mute : st && !st.open ? mix(T.red, T.dim, 0.5) : T.dim;
+        const rating = s.rating && !courier ? `★ ${String(s.rating).replace(".", ",")}` : "";
+        if (oneLine) {
+          const rx = r.x + lw - 2 - PLACE - HOURS - RATING;
+          g.textW(ax, y, cleanAddress(s), rx - ax - 1, { fg: courier ? T.dim : sel ? T.white : T.text, bold: sel && !courier, bg });
+          g.textW(rx, y, place, PLACE - 1, { fg: T.dim, bg });
+          g.textW(rx + PLACE, y, hours, HOURS - 1, { fg: hoursFg, bg });
+          if (rating) g.textR(r.x + lw - 2, y, rating, { fg: T.yellow, bg });
+          return;
+        }
         g.textW(ax, y, cleanAddress(s), r.x + lw - 10 - ax, { fg: courier ? T.dim : sel ? T.white : T.text, bold: sel && !courier, bg });
-        if (s.rating && !courier) g.textR(r.x + lw - 2, y, `★ ${String(s.rating).replace(".", ",")}`, { fg: T.yellow, bg });
-        const sub = [s.subway?.name ? `Ⓜ ${s.subway.name}` : s.city?.name, courier ? "только для курьеров" : st?.text ?? s.schedule].filter(Boolean).join(" · ");
-        g.textW(r.x + 4, y + 1, sub, lw - 6, { fg: courier ? T.mute : st && !st.open ? mix(T.red, T.dim, 0.5) : T.dim, bg });
-      }, { rowH: 2, onPick: () => { this.zoom = !this.zoom; } });
+        if (rating) g.textR(r.x + lw - 2, y, rating, { fg: T.yellow, bg });
+        g.textW(r.x + 4, y + 1, [place, hours].filter(Boolean).join(" · "), lw - 6, { fg: hoursFg, bg });
+      }, { rowH, onPick: () => { this.zoom = !this.zoom; } });
     }
     if (lw < r.w) this.drawMap(g, { x: r.x + lw + 1, y: top, w: r.w - lw - 1, h: H });
   }