Conversation
WalkthroughImplements city selection cleanup in CitySelector.vue, adds two user-page buttons with city store integration, tweaks UserPointsCard progress UI, and updates app initialization to conditionally disable vertical swipes via @telegram-apps/sdk-vue. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant App as App Init
participant SDK as Telegram SDK (vue)
User->>App: Launch app
App->>SDK: Initialize & setup close behavior
alt Vertical swipe disabling available
App->>SDK: disableVerticalSwipes()
note right of SDK: Vertical swipe-to-close disabled
else Not available
App-->>SDK: Skip disabling
end
App-->>User: App ready
sequenceDiagram
autonumber
actor User
participant CitySel as CitySelector.vue
participant Store as City Store
User->>CitySel: Select city (ID)
CitySel->>Store: Apply selection
CitySel->>CitySel: selectedCities = [] %% clear bound selection
CitySel-->>User: Close city drawer
User->>Store: Tap "Выбрать город" / city button
alt Clear selection
User->>Store: cityStore.selected = undefined
else Already selected
Store-->>User: Shows selected city name
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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: 0
🧹 Nitpick comments (5)
apps/storefront-telegram/app/components/UserPointsCard.vue (1)
67-69: Stabilize the ui object to avoid re-creation on each renderHoist the object to script scope (minor perf/readability).
- <UProgress - v-model="progress" - color="primary" - :ui="{ - base: 'bg-primary/10', - }" - /> + <UProgress + v-model="progress" + color="primary" + :ui="progressUi" + />Add in <script setup>:
const progressUi = { base: 'bg-primary/10' } as constapps/storefront-telegram/app/components/CitySelector.vue (3)
45-54: Avoid reopening the drawer after programmatic clearClearing selectedCities triggers the watcher again and flips isCitySelectOpened back to true in the same tick. It’s harmless (component unmounts due to v-if), but we can make it deterministic.
-watch(selectedCities, () => { - if (!selectedCities.value.length) { - isCitySelectOpened.value = true - return - } - - cityStore.selected = cityStore.cities.find((c) => c.id === selectedCities.value[0]) - selectedCities.value = [] - isCitySelectOpened.value = false -}) +watch(selectedCities, (next, prev) => { + if (next.length === 0) { + // Do not reopen right after programmatic clear + if (prev?.length > 0) return + isCitySelectOpened.value = true + return + } + cityStore.selected = cityStore.cities.find((c) => c.id === next[0]) + isCitySelectOpened.value = false + selectedCities.value = [] +}, { flush: 'post' })
40-43: Keep items reactive to store updatesIf city list changes later, items won’t update.
-const items = ref<CheckboxGroupItem[]>(cityStore.cities.map((c) => ({ label: c.name, value: c.id }))) +const items = computed<CheckboxGroupItem[]>(() => + cityStore.cities.map((c) => ({ label: c.name, value: c.id })), +)
42-52: Type safety for checkbox valuesEnsure id type matches CheckboxGroupItem.value (string | number). Currently selectedCities is string[] which may mismatch numeric ids.
Potential fix:
-const selectedCities = ref<string[]>([]) +type Value = CheckboxGroupItem['value'] +const selectedCities = ref<Value[]>([])apps/storefront-telegram/app/pages/user.vue (1)
28-40: Button behavior looks good; minor readability win for labelThe clear-to-open flow is fine (CitySelector mounts via v-if). Consider a computed for label.
- <UButton - color="neutral" - variant="ghost" - :label="cityStore.selected ? cityStore.selected.name : 'Выбрать город'" - icon="i-lucide-locate-fixed" - @click="cityStore.selected = undefined" - /> + <UButton + color="neutral" + variant="ghost" + :label="cityLabel" + icon="i-lucide-locate-fixed" + @click="cityStore.selected = undefined" + />Add in <script setup>:
const cityLabel = computed(() => cityStore.selected?.name ?? 'Выбрать город')
📜 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 (4)
apps/storefront-telegram/app/components/CitySelector.vue(1 hunks)apps/storefront-telegram/app/components/UserPointsCard.vue(1 hunks)apps/storefront-telegram/app/pages/user.vue(1 hunks)apps/storefront-telegram/app/utils/init.ts(2 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 (1)
apps/storefront-telegram/app/utils/init.ts (1)
6-6: Good call: disable vertical swipes guarded by isAvailableThis aligns with Telegram Mini App UX and won’t break older clients. Please sanity-check on Android/iOS real clients.
Manual check suggestions:
- Android: swipe-down should no longer minimize/close.
- iOS: confirm no regressions with back button and closingBehavior confirmation.
Also applies to: 89-93
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Style