feat: our fonts#147
Conversation
WalkthroughTypography and font configuration updates across the Telegram storefront: enabling fonts in Nuxt UI, adding header/body slots to the Drawer config, applying header font family globally, and adjusting component heading weights. One Drawer consumer switches from content slot to body slot with a title. Minor markup/class tweaks in select components. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant CategoriesButton as CategoriesButton.vue
participant UDrawer as UDrawer (UI)
Note over UDrawer: Updated slots: header, body, content
User->>CategoriesButton: Tap "Categories"
CategoriesButton->>UDrawer: v-model:open = true<br/>title="Категории"
UDrawer-->>CategoriesButton: Render #header (title)
UDrawer-->>CategoriesButton: Render #body (category list)
Note right of UDrawer: content has hide-scroll
User-->>UDrawer: Interact / Close
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (10)
apps/storefront-telegram/app/components/client/BonusProgramRegistration.vue (1)
29-31: Consider using UDrawer header slot/title for consistencyYou can move this h2 into UDrawer’s header slot (or use its title prop) to keep headers consistent across drawers.
Example:
<UDrawer v-model:open="isDrawerOpened" title="Регистрация в программе лояльности"> <template #body> ... </template> </UDrawer>apps/storefront-telegram/app/components/catalog/ProductCard.vue (1)
13-15: Product name won’t pick up header fontIt’s a
, so your new h1–h6 font-family rule won’t apply. Add
font-headersor switch to a semantic heading.Option A:
- <p class="text-sm/4 font-bold"> + <p class="text-sm/4 font-headers font-bold">Option B:
<h3 class="text-sm/4 font-headers font-bold">...</h3>apps/storefront-telegram/app/components/client/PointsCard.vue (2)
65-65: Prefer Drawer title/header slot over inline h2To align with the new Drawer slot API and ensure consistent typography, move this heading into the Drawer title prop and body slot (as done in CategoriesButton.vue). This also centralizes header styling via app.config.ts.
Example (outside the changed lines, for clarity):
<UDrawer v-model:open="isDrawerOpened" should-scale-background :set-background-color-on-scale="false" title="У вас есть {{ clientStore.points }} «Лавчиков»"> <template #body> <!-- move the rest of the content here; drop the inline h2 --> </template> </UDrawer>
105-115: Add rel to external links opened in new tabFor target="_blank", add rel="noopener noreferrer" to prevent reverse tabnabbing and improve privacy.
Outside-range example:
<ULink to="https://sushi-love.ru" target="_blank" rel="noopener noreferrer">apps/storefront-telegram/nuxt.config.ts (1)
42-63: Trim requested font weights to reduce payloadUnless 800/900/italic-heavy weights are used, narrow the set to what the UI actually uses (e.g., 400/500/600/700). This meaningfully reduces CSS/font bytes on Telegram webviews.
fonts: { defaults: { - weights: [400, 500, 600, 700, 800, 900], - styles: ['normal', 'italic'], + weights: [400, 500, 600, 700], + styles: ['normal'],apps/storefront-telegram/app/components/catalog/CategoriesButton.vue (2)
25-25: Avoid negative margin inside Drawer bodyThe -ml-2 can cause misalignment with the new header padding. Consider removing it and adjusting button padding via the component’s ui config instead.
- <div class="-ml-2 flex flex-col gap-0"> + <div class="flex flex-col gap-0">
27-40: Improve list item accessibility with aria-currentExpose the active category to assistive tech and enable styles driven by state.
<UButton v-for="category in menuStore.menu?.categories" :key="category.id" variant="ghost" color="neutral" size="xl" class="px-2 py-1.5 font-medium motion-preset-slide-left" :class="[ visibleCategory === category.slug ? 'font-semibold text-primary' : '', ]" :label="category.name" + :aria-current="visibleCategory === category.slug ? 'true' : undefined" @click="handleScroll(category.slug)" />Additionally, the icon-only launcher button lacks a text label (outside this hunk). Add an accessible name:
<UButton v-if="isCategoriesButtonShown" aria-label="Открыть категории" />apps/storefront-telegram/app/app.config.ts (3)
30-30: Avoid duplicate font-weight declarations on buttonsfont-semibold is also applied in variants.size.xl.base; keep it in one place to prevent class bloat and easier overrides.
- base: 'font-semibold font-headers', + base: 'font-headers',
61-63: Header/body/content slot updates look good; confirm scroll behaviorAdding hide-scroll to both body and content may hide scrollbars on long content (e.g., PointsCard drawer), which can harm discoverability. Consider moving overflow handling to content only, and let body inherit, or make body overflow-y-auto while retaining hide-scroll on content.
Option A (keep scrollbars hidden only on content):
- body: 'mb-12 hide-scroll', + body: 'mb-12',Option B (ensure body scrolls while hiding bars):
- body: 'mb-12 hide-scroll', + body: 'mb-12 overflow-y-auto hide-scroll',Please verify on small screens that drawers with long text still scroll.
53-57: Consider aligning modal titles with header fontFor typographic consistency, modal.slots.title could also include font-headers (not part of this hunk).
Outside-range example:
modal: { slots: { title: 'font-semibold font-headers', } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/storefront-telegram/app/app.config.ts(2 hunks)apps/storefront-telegram/app/assets/css/styles.css(1 hunks)apps/storefront-telegram/app/components/CitySelector.vue(1 hunks)apps/storefront-telegram/app/components/catalog/AverageProgressButton.vue(1 hunks)apps/storefront-telegram/app/components/catalog/CategoriesButton.vue(1 hunks)apps/storefront-telegram/app/components/catalog/CategoryBlock.vue(1 hunks)apps/storefront-telegram/app/components/catalog/ClosedNowHeader.vue(1 hunks)apps/storefront-telegram/app/components/catalog/ProductCard.vue(2 hunks)apps/storefront-telegram/app/components/client/BonusProgramRegistration.vue(1 hunks)apps/storefront-telegram/app/components/client/PointsCard.vue(3 hunks)apps/storefront-telegram/app/pages/menu.vue(1 hunks)apps/storefront-telegram/nuxt.config.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (12)
apps/storefront-telegram/app/components/catalog/AverageProgressButton.vue (1)
56-56: Typography tweak LGTMHeading weight change to bold reads well and matches the new headers system.
apps/storefront-telegram/app/components/catalog/CategoryBlock.vue (1)
6-8: LGTM — aligns with new header weightsBold section title matches the global headings update.
apps/storefront-telegram/app/pages/menu.vue (1)
13-14: Includefont-headersin the UButton overrideapps/storefront-telegram/app/pages/menu.vue L13-14:
- base: 'px-0 pt-0 text-2xl/6 font-bold', + base: 'px-0 pt-0 text-2xl/6 font-headers font-bold',I didn’t detect any other
UButtonui.baseoverrides missingfont-headers; please verify manually.apps/storefront-telegram/app/components/catalog/ProductCard.vue (1)
38-39: Currency sign size changeDropping
text-lgtightens price alignment; looks fine with current button typography.apps/storefront-telegram/app/components/catalog/ClosedNowHeader.vue (1)
11-13: LGTM — stronger emphasisBold header suits the banner context.
apps/storefront-telegram/app/components/CitySelector.vue (1)
11-13: LGTM — consistent with heading systemBold city selector title aligns with global typography.
apps/storefront-telegram/app/assets/css/styles.css (2)
132-134: Global heading font — good callApplying
--font-headersto h1–h6 centralizes the change and reduces per-component churn.
132-134: Add fallback to avoid invalid font-family
In apps/storefront-telegram/app/assets/css/styles.css, update the headers’ font-family to include a cascade fallback:h1, h2, h3, h4, h5, h6 { - font-family: var(--font-headers); + font-family: var( + --font-headers, + var(--font-sans, ui-sans-serif, system-ui, sans-serif) + ); }apps/storefront-telegram/app/components/client/PointsCard.vue (1)
44-47: LGTM on semantic shift to paragraphSwitching the cashback label wrapper from div to p improves semantics without behavior change.
apps/storefront-telegram/nuxt.config.ts (1)
37-37: Fonts configuration OK: No top-level@nuxt/fontsmodule found in any Nuxt config orpackage.json, soui.fonts: truewon’t duplicate font loading.apps/storefront-telegram/app/components/catalog/CategoriesButton.vue (1)
23-25: Nice migration to Drawer title/body APIUsing title="Категории" and #body aligns with app.config.ts drawer slots and keeps header typography consistent.
apps/storefront-telegram/app/app.config.ts (1)
61-61: Consistent header typographytext-xl/6 font-bold font-headers on drawer headers matches the new font strategy and looks consistent.
| <h3 class="text-4xl/8 font-bold"> | ||
| {{ clientStore.points }} | ||
| </p> | ||
| <UIcon name="fluent:heart-circle-24-filled" class="size-7" /> | ||
| </h3> | ||
| <UIcon name="fluent:heart-circle-24-filled" class="size-6" /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessible label and hide decorative icon for screen readers
The numeric points as a bare heading aren’t announced with context, and the heart icon is decorative. Add an SR-only label and mark the icon as aria-hidden.
Apply:
- <h3 class="text-4xl/8 font-bold">
- {{ clientStore.points }}
- </h3>
- <UIcon name="fluent:heart-circle-24-filled" class="size-6" />
+ <h3 class="text-4xl/8 font-bold">
+ <span class="sr-only">Лавчики:</span>
+ {{ clientStore.points }}
+ </h3>
+ <UIcon name="fluent:heart-circle-24-filled" class="size-6" aria-hidden="true" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h3 class="text-4xl/8 font-bold"> | |
| {{ clientStore.points }} | |
| </p> | |
| <UIcon name="fluent:heart-circle-24-filled" class="size-7" /> | |
| </h3> | |
| <UIcon name="fluent:heart-circle-24-filled" class="size-6" /> | |
| <h3 class="text-4xl/8 font-bold"> | |
| <span class="sr-only">Лавчики:</span> | |
| {{ clientStore.points }} | |
| </h3> | |
| <UIcon name="fluent:heart-circle-24-filled" class="size-6" aria-hidden="true" /> |
🤖 Prompt for AI Agents
In apps/storefront-telegram/app/components/client/PointsCard.vue around lines
24-27, the points heading is a bare number and the heart icon is decorative; add
an accessible label for screen readers and mark the icon hidden. Insert a
visually-hidden/SR-only label (e.g., a span with your project's sr-only class)
before or inside the <h3> to provide context like "Points" so the heading reads
for ATs, and add aria-hidden="true" to the UIcon element to hide the decorative
icon from screen readers.
1 participant
Summary by CodeRabbit