fix(android): sync mobile style group nav with desktop sidebar (#862)

[HKLHaoBin]

User description

Summary

• Bottom nav third item becomes 风格 (style group), opening a sheet like 更多
• Sheet entries: 润色模式 (style) and 风格市场 (marketplace)
• Extract subItemLabelKey to navLabels.ts for shared desktop/mobile labels

Closes #862

Test plan

• Mobile width <720px: bottom bar shows 概览 / 历史 / 风格 / 更多
• Tap 风格 → sheet with 润色模式 and 风格市场
• Navigate to each page; top bar title matches selection
• Style tab highlights when on style or marketplace

Made with Cursor

---

PR Type

Bug fix, Enhancement

---

Description

• Add MobileStyleSheet bottom sheet for style group navigation

• Extract subItemLabelKey into shared navLabels module

• Update bottom nav to open style sheet instead of direct style tab

• Remove style tab from fixed bottom tabs list

---

Diagram Walkthrough

flowchart LR
  bottomNav["Mobile Bottom Nav"] --> styleBtn["Style Button"]
  styleBtn --> styleSheet["MobileStyleSheet"]
  styleSheet --> polishMode["Polich Mode (style)"]
  styleSheet --> marketplace["Marketplace"]

Loading

File Walkthrough

	Relevant files
Enhancement	FloatingShell.tsx Integrate MobileStyleSheet and restyle bottom nav                openless-all/app/src/components/FloatingShell.tsx Import MobileStyleSheet and subItemLabelKey Add styleOpen state and style tab IDs list Replace fixed style tab with a style button that opens the sheet Update mobile bottom nav props and rendering +42/-9    MobileStyleSheet.tsx Add MobileStyleSheet component for style group                      openless-all/app/src/components/MobileStyleSheet.tsx Create new bottom sheet component for style group Display polish mode and marketplace as selectable items Animate backdrop and sheet with CSS +115/-0
Refactoring	navLabels.ts Extract subItemLabelKey to shared navLabels module              openless-all/app/src/lib/navLabels.ts Extract subItemLabelKey function to shared module Map 'style' to 'nav.polishMode', others to 'nav.' +7/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 862 - PR Code Verified Compliant requirements: Mobile can enter Marketplace page Navigation labels consistent with desktop (nav.polishMode and nav.marketplace) Bottom bar shows 概览 / 历史 / 风格 / 更多 Tapping 风格 opens sheet with 润色模式 and 风格市场 Top bar title matches selection (subItemLabelKey used) Style tab highlights when on style or marketplace (styleTabActive logic) Requires further human verification: Layout overflow under various Android screen widths should be verified visually (no CSS changes that could cause overflow beyond the safe-area adjustments already present)

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected