feat(ui): implement floating glassmorphic capsule navigation (Mobile & TV)

[keviiixaviiii]

feat(ui): implement floating glassmorphic capsule navigation (Mobile & TV)

📌 Summary

This pull request modernizes the ARVIO navigation interface by replacing the rigid, edge-pinned navigation bars with floating, frosted-glass capsules. It introduces responsive spring physics, dynamic sliding selection indicators, and interactive scaling animations across both touch and TV remote D-pad interfaces.

---

📱 Mobile & Tablet Changes

• Floating Glassmorphic Container: Replaced the solid, bottom-docked navigation bar with a floating, translucent capsule container featuring dual-border glow and drop shadows.
• Sliding Highlight Indicator: Added a fast-spring highlight pill that smoothly slides horizontally between active tabs.
• Interactive Micro-Animations:
  • Active/focused icons scale up smoothly (1.12x).
  • The entire floating bar responds to touch with a subtle spring bounce (1.05x).
• Edge-to-Edge Layout: Updated the root container in MainActivity from a vertical Column to a full-screen Box so content flows under the translucent bar.
• Content Padding Clearance: Increased bottom padding to 96.dp on scrollable catalogue views in HomeScreen to prevent the floating bar from blocking content.
• Landscape Support: Optimized item spacing, icon sizing, and touch target heights for landscape orientations.

---

📺 Android TV Changes

• Centered Floating Top Bar: Redesigned the top navigation header into a centered, floating translucent glass capsule.
• Unified Layout: Seamlessly integrated the profile avatar, navigation items, Settings, and clock into a single cohesive layout.
• Zero-Lag Focus Sliding: Replaced async layout measurements with deterministic position calculations using uniform chip widths (106.dp), enabling instant 60fps sliding indicator transitions.
• Dynamic Label Reveal: Navigation items stay compact with icon-only displays at rest and expand horizontally with spring physics to reveal text labels when focused or selected.
• Focus Elevation: The entire top bar scales up (1.05x) with intensified glow elevation whenever remote focus lands inside the navigation area.
• State Bugfixes: Resolved ghost selection highlights on the Home icon when navigating away into the catalogue content rows.

---

📂 Files Modified

• app/src/main/kotlin/com/arflix/tv/MainActivity.kt — Root layout updated to edge-to-edge Box overlay.
• app/src/main/kotlin/com/arflix/tv/ui/components/AppBottomBar.kt — Mobile floating glass container, sliding indicator, and spring scaling.
• app/src/main/kotlin/com/arflix/tv/ui/components/AppTopBar.kt — TV centered capsule, fixed-width position math, and dynamic label expansion.
• app/src/main/kotlin/com/arflix/tv/ui/screens/home/HomeScreen.kt — Bottom scroll padding adjustments for mobile.

---

🧪 Testing Performed

• Touch Navigation: Verified tap targets, active animations, and landscape scaling across multiple phone screen sizes.
• D-pad Navigation: Tested Android TV remote arrow navigation, focus highlights, sliding transitions, and Settings navigation.
• Layout & Overlays: Verified that video playback and modal screens properly hide and clear navigation layers.

Pixel_7_Arivio.mp4

TV_Arvio_NavBar.mp4