Conversation
WalkthroughIntroduces gyroscope-driven UI behavior by starting the sensor during app init and subscribing in UserPointsCard to update transforms. Adjusts styles in multiple components, including button variants, category pill sizing, and a new CSS utility (.tg-text-inverted). Minor visual tweaks to the card’s elements and badges. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UA as User Agent (WebApp)
participant App as App Init
participant TG as Telegram SDK
participant Comp as UserPointsCard
UA->>App: load/init()
App->>TG: postEvent(start_gyroscope, {refresh_rate:50})
note right of TG: Gyroscope activated
UA->>Comp: mount()
Comp->>TG: on('gyroscope_changed', handler)
TG-->>Comp: gyroscope_changed {x,y,z} (stream)
Comp->>Comp: update refs x,y,z
Comp->>Comp: apply transforms (translate/rotate)
UA->>Comp: unmount()
Comp->>TG: off('gyroscope_changed', handler)
note over Comp,TG: Subscription cleaned up
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (7)
apps/storefront-telegram/app/components/catalog/CategoriesSliderMenu.vue (1)
9-13: Keep touch targets accessible after shrinking paddingThe reduced padding risks dropping below the recommended 44×44 px touch area. Consider enforcing a minimum height/width on the button for a11y.
Example tweak:
- <button class="px-2.5 py-1" @click="scrollToCategory(category.slug)"> + <button class="h-11 min-w-[44px] px-3 py-1" @click="scrollToCategory(category.slug)">apps/storefront-telegram/app/assets/css/styles.css (1)
70-72: Clarify “inverted” semantics and verify contrast across themes.tg-text-inverted maps text to --tg-theme-bg-color. Depending on the surrounding bg (e.g., section vs primary), this can reduce contrast (e.g., white on white in light themes). Consider more semantic tokens (e.g., tg-text-on-primary, tg-text-on-section) or ensure usage only where contrast is guaranteed.
Please verify in both light/dark Telegram themes that elements using tg-text-inverted meet acceptable contrast.
apps/storefront-telegram/app/components/UserPointsCard.vue (5)
2-3: Hide debug telemetry in productionRender the x/y/z readout only in dev, or remove it.
- {{ x }} / {{ y }} / {{ z }} + <div v-if="import.meta.env.DEV" class="text-xs opacity-60">{{ x }} / {{ y }} / {{ z }}</div>
5-11: Add will-change and clamp/smooth rotations to reduce jitterAt 50 Hz updates, transforms can look jittery. Add will-change for GPU hint and clamp rotation to a safe range.
- <div - class="absolute inset-0 bg-primary rounded-lg" + <div + class="absolute inset-0 bg-primary rounded-lg will-change-transform" :style="{ - transform: `rotateX(${x * 6}deg) rotateY(${y * 6}deg)`, + transform: `rotateX(${fx}deg) rotateY(${fy}deg)`, }" />Additions outside this hunk (script):
// simple clamp + low-pass const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v)) const fx = ref(0), fy = ref(0) let raf = 0 watchEffect(() => { cancelAnimationFrame(raf) raf = requestAnimationFrame(() => { // low-pass filter toward target with damping fx.value = clamp(fx.value + (x.value * 6 - fx.value) * 0.15, -20, 20) fy.value = clamp(fy.value + (y.value * 6 - fy.value) * 0.15, -20, 20) }) }) onUnmounted(() => cancelAnimationFrame(raf))
12-17: Mirror the perf tweaks on the foreground layerApply the same will-change + filtered rotations here for consistency.
- <div - class="z-10 w-full h-full p-4 flex flex-col justify-between tg-text-button" + <div + class="z-10 w-full h-full p-4 flex flex-col justify-between tg-text-button will-change-transform" :style="{ - transform: `rotateX(${x * 4}deg) rotateY(${y * 4}deg)`, + transform: `rotateX(${(fx/6)*4}deg) rotateY(${(fy/6)*4}deg)`, }"
40-47: Check text color choice relative to backgroundThe label uses tg-text-inverted while the container text is already tg-text-button (likely white). Make sure the intent is to override, not duplicate, and that contrast stays OK on all themes.
59-61: Remove unused parallax reftarget isn’t used anymore; drop the ref and the commented parallax. Also remove ref="target" from the template root div.
-const target = useTemplateRef<HTMLElement>('target') -// const parallax = reactive(useParallax(target)) +// removed unused parallax/target
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
apps/storefront-telegram/app/assets/css/styles.css(1 hunks)apps/storefront-telegram/app/components/UserPointsCard.vue(3 hunks)apps/storefront-telegram/app/components/catalog/CategoriesSliderMenu.vue(1 hunks)apps/storefront-telegram/app/pages/user.vue(1 hunks)apps/storefront-telegram/app/utils/init.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 (3)
apps/storefront-telegram/app/pages/user.vue (1)
16-27: LGTM on visual tweakBoth actions use the same “ghost” variant now; consistent and simpler.
apps/storefront-telegram/app/components/UserPointsCard.vue (2)
34-35: Verify non-standard utility classesopacity-35 and invert-100 aren’t default Tailwind utilities. If they rely on custom config, all good—otherwise they won’t render.
You can confirm via your tailwind.config.* utilities list. If not present, switch to supported values (e.g., opacity-30/40 and invert).
72-78: Start/stop gyroscope on mount/unmountConfine sensor usage to when UserPointsCard is present (and remove global start in init.ts).
onMounted(() => { - on('gyroscope_changed', listener) + postEvent('web_app_start_gyroscope', { refresh_rate: 50 }) + on('gyroscope_changed', listener) }) onUnmounted(() => { off('gyroscope_changed', listener) + postEvent('web_app_stop_gyroscope') })
| import type { EventListener } from '@telegram-apps/sdk-vue' | ||
| import { off, on } from '@telegram-apps/sdk-vue' | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Import postEvent to lifecycle-manage the gyroscope here
Bring postEvent into this component so it can start/stop the sensor with its own lifecycle.
-import { off, on } from '@telegram-apps/sdk-vue'
+import { off, on, postEvent } from '@telegram-apps/sdk-vue'📝 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.
| import type { EventListener } from '@telegram-apps/sdk-vue' | |
| import { off, on } from '@telegram-apps/sdk-vue' | |
| import type { EventListener } from '@telegram-apps/sdk-vue' | |
| import { off, on, postEvent } from '@telegram-apps/sdk-vue' |
🤖 Prompt for AI Agents
In apps/storefront-telegram/app/components/UserPointsCard.vue around lines 56 to
58, import postEvent from '@telegram-apps/sdk-vue' alongside EventListener and
on/off, and use it in this component's lifecycle to start and stop the
gyroscope: call postEvent('gyroscope', { action: 'start' }) when the component
mounts (or becomes active) and postEvent('gyroscope', { action: 'stop' }) when
it unmounts (or becomes inactive), ensuring the sensor is started/stopped by
this component's lifecycle.
| // Gyroscope | ||
| postEvent('web_app_start_gyroscope', { | ||
| refresh_rate: 50, | ||
| }) | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Start/stop gyroscope where it’s actually used; avoid app-wide always-on sensor
Starting the gyroscope at init keeps the sensor running for the entire session, even when no component needs it. This is a battery/CPU hit and complicates future conditional usage. Start it in the component that consumes it (UserPointsCard) on mount and stop it on unmount; remove the global start here.
Apply this diff to remove the global start:
- // Gyroscope
- postEvent('web_app_start_gyroscope', {
- refresh_rate: 50,
- })📝 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.
| // Gyroscope | |
| postEvent('web_app_start_gyroscope', { | |
| refresh_rate: 50, | |
| }) |
🤖 Prompt for AI Agents
In apps/storefront-telegram/app/utils/init.ts around lines 93–97, remove the
global postEvent call that starts the gyroscope so the sensor isn't kept running
app-wide; instead, start the gyroscope in the consuming component
(UserPointsCard) on mount by calling postEvent('web_app_start_gyroscope', {
refresh_rate: 50 }) and stop it on unmount by calling
postEvent('web_app_stop_gyroscope') (or equivalent), ensuring the start/stop
calls use the same payload/semantics and that the init.ts no longer contains the
global gyroscope start.
1 participant
Summary by CodeRabbit
New Features
Style