Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 1x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 1x 1x 1x 16x 2x 2x 1x 31x 31x 30x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 21x 21x 21x 21x | import type { CatalogEntry, SizeVariant } from "../types";
import { MESSAGES } from "../locales/en";
import { formatAbbreviatedCount } from "../utils";
import { renderFitChip } from "./fit-chip";
const MAX_DESCRIPTION_CHARS = 200;
export function renderModelDetail(entry: CatalogEntry, container: HTMLElement): void {
container.empty();
container.createEl("h3", { cls: "lilbee-detail-name", text: entry.display_name });
renderFitChip(container, entry.fit);
renderVariants(container, entry.size_variants ?? null);
renderDescription(container, entry.description);
renderInstallStatus(container, entry);
renderDownloads(container, entry.downloads);
}
function renderVariants(container: HTMLElement, variants: SizeVariant[] | null): void {
if (!variants || variants.length === 0) return;
const section = container.createDiv({ cls: "lilbee-detail-section" });
section.createEl("span", { cls: "lilbee-detail-section-label", text: MESSAGES.LABEL_DETAIL_VARIANTS });
const strip = section.createDiv({ cls: "lilbee-detail-variants" });
for (const variant of variants) {
strip.createEl("span", { cls: "lilbee-detail-variant", text: variant.size_label });
}
}
function renderDescription(container: HTMLElement, description: string): void {
if (!description) return;
const trimmed =
description.length > MAX_DESCRIPTION_CHARS ? `${description.slice(0, MAX_DESCRIPTION_CHARS)}…` : description;
const section = container.createDiv({ cls: "lilbee-detail-section" });
section.createEl("span", { cls: "lilbee-detail-section-label", text: MESSAGES.LABEL_DETAIL_DESCRIPTION });
section.createEl("p", { cls: "lilbee-detail-description", text: trimmed });
}
function renderInstallStatus(container: HTMLElement, entry: CatalogEntry): void {
const section = container.createDiv({ cls: "lilbee-detail-section" });
section.createEl("span", { cls: "lilbee-detail-section-label", text: MESSAGES.LABEL_DETAIL_INSTALL_STATUS });
const statusText = entry.installed ? MESSAGES.LABEL_INSTALLED : MESSAGES.LABEL_NOT_INSTALLED.trim();
section.createEl("span", { cls: "lilbee-detail-install-status", text: statusText });
}
function renderDownloads(container: HTMLElement, downloads: number): void {
if (downloads <= 0) return;
const section = container.createDiv({ cls: "lilbee-detail-section" });
section.createEl("span", { cls: "lilbee-detail-section-label", text: MESSAGES.LABEL_DETAIL_DOWNLOADS });
section.createEl("span", { cls: "lilbee-detail-downloads-value", text: formatAbbreviatedCount(downloads) });
}
|