Add a scroll-responsive liquid-glass navbar
- 主要语言
- TypeScript
- 星标
- 5
- 派生
- 28
- 平均合并
- 9 小时 50 分钟
- 30 天内合并 PR
- 123
描述
## Problem
The floating navbar keeps its full visual weight while users scroll through Wallet content. It occupies more screen space than necessary during content exploration, and its material and transition behavior are not fully consistent across the React, iOS, and Android implementations.
## Goal
Make the navbar feel lighter and more responsive without hiding navigation. It should condense while scrolling down, return to its full form while scrolling up, and use a platform-appropriate liquid-glass treatment with consistent motion.
**Priority:** P2
**Target date:** Sunday, August 30, 2026
**Dependency:** https://github.com/0xMiden/wallet/issues/802
## Interaction behavior
- The default **expanded** state shows all four primary icons and labels.
- Sustained downward scrolling transitions to a **condensed** icon-only state:
- labels fade out;
- outer padding and visual chrome reduce;
- any route-owned secondary quick-action row collapses;
- every destination remains visible and tappable.
- Upward scrolling, returning near the top, or selecting a destination restores the expanded state.
- Use directional hysteresis so touch jitter, scroll settling, and overscroll bounce do not repeatedly toggle the navbar.
- Condensing must not move content or change scroll position; the navbar remains an overlay.
- Keep tap targets at least 44 pt on iOS/web and 48 dp on Android.
- Apply scroll behavior to Wallet-owned scrolling surfaces only. Do not inject tracking into third-party dApp WebViews.
- Drawers, onboarding, lock screens, and the existing primary-action navbar mode retain authoritative control.
## Important constraint
The native navbar already uses **compact mode** for the layout pairing navigation with a primary CTA such as “Continue.” Call this scroll state **condensed** and keep the state machines separate so scrolling cannot interfere with transaction actions.
## Visual direction
- Treat liquid glass as a material system: translucent tint, subtle edge refraction, restrained inner highlight, soft background-aware shadow, and readable contrast.
- **iOS:** Preserve the existing native `UIGlassEffect` on iOS 26+ and `systemUltraThinMaterial` fallback on earlier versions. Refine its geometry and transitions instead of replacing it.
- **Android:** Keep a platform-appropriate translucent Material surface. The current child-view architecture cannot produce reliable backdrop blur; do not blur the navbar's own content or add a costly fake blur.
- **React:** Use the existing Tailwind v4 and Framer Motion stack, centralized `src/lib/animation` tokens, and reduced-motion-aware helpers.
- Support light/dark themes, reduced motion, transparency/contrast accessibility settings where available, and an opaque high-contrast fallback.
## Repository integration
Keep all three rendering paths aligned:
- React: `src/app/layouts/PageLayout/Footer.tsx` inside `TabLayout`.
- iOS: `MidenNavbarOverlayWindow` in the local `packages/dapp-browser` Capacitor plugin.
- Android: `NavbarView` and `NavbarStateHolder` in the same plugin.
Extend the existing native plugin contract with an `expanded`/`condensed` presentation state without rebuilding the overlay. Scroll-direction detection should live in one reusable Wallet hook/controller bound to actual page scroll containers; the app does not use one global `window` scroller.
Animate transform and opacity on the React path. Reuse the existing UIKit and Android spring primitives on native paths without tearing down the navbar or losing indicator state.
## Acceptance criteria
- [ ] Sustained downward scrolling condenses the navbar on Home, Activity, Browser launcher, and Settings; upward scrolling expands it.
- [ ] Small oscillations and iOS overscroll bounce do not cause visible flicker.
- [ ] All four destinations remain available with accessible tap targets in the condensed state.
- [ ] A visible secondary row collapses and returns only when the current route still owns it.
- [ ] Active-tab indicator transitions remain correct in both states.
- [ ] Primary-action, drawer morph, onboarding/lock hiding, safe-area, and dApp overlay behavior remain unchanged.
- [ ] React, native iOS, and native Android use the same presentation-state contract with platform-appropriate rendering.
- [ ] Reduced-motion mode removes spring/bouncy movement while preserving an understandable state change.
- [ ] Contrast remains readable over light and dark content, with an opaque fallback when required.
- [ ] Tests cover scroll hysteresis, state restoration, provider/plugin bridging, and navigation regressions.
- [ ] Expanded and condensed states are visually verified on the iPhone 17 simulator and an Android emulator in light and dark themes.
## Out of scope
- Changing navbar destinations or adding multi-account navigation.
- Per-icon macOS Dock magnification or pointer-magnetic effects.
- Tracking scroll inside third-party dApp WebViews.
- Replacing the native overlay architecture.
- Adding animation or glass-effect dependencies.
贡献指南
调研方向
The work spans three codebases: React (`src/app/layouts/PageLayout/Footer.tsx`), iOS (`packages/dapp-browser` Capacitor plugin's `MidenNavbarOverlayWindow`), and Android (`NavbarView` and `NavbarStateHolder`). Start by understanding the existing navbar contract and scroll detection. Implement a reusable Wallet hook/controller for scroll-direction detection, then extend the plugin to support `expanded`/`condensed` states. Verify behavior on Home, Activity, Browser launcher, and Settings screens, ensuring tap targets and animations work correctly across platforms.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, ios, react, tailwindcss, typescript
- 领域
- frontend, mobile
- Issue 类型
- 功能
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 活跃
- 描述清晰度
- 描述清楚
- 新手友好度
- 45/100