Files

T

asepharyana b3418ad799 feat: Implement video capture improvements and mobile navigation fixes

- Added eager selfbot voice connection establishment to ensure video capture works seamlessly during voice channel joins.
- Introduced a manual video watch command for selfbots to allow operators to initiate screen recording of other members' streams.
- Enhanced video recording functionality to split recordings into segments based on user activity, similar to voice recordings.
- Fixed mobile navigation issues by extending the navbar to include all items and ensuring responsive form controls.
- Standardized error handling across frontend components to improve user experience during failures.

2026-09-11 18:56:28 +07:00

3.1 KiB

Raw Blame History

GMW Frontend — Mobile Nav + Form Controls Responsive Pass

Problem

Two mobile UX defects reported by user:

Mobile navbar can't navigate between pages (tidak bisa pindah halaman).
- Root cause A (click-block): the floating chatbot FAB (chatbot.tsx line ~125: fixed right-4 bottom-5 z-50 size-11) overlaps the mobile bottom nav (MobileNav is fixed bottom-0 z-40). Because the FAB is z-50 and sits at bottom-5 on the right, it intercepts taps on the rightmost bottom-nav items (Voice/Media). Verified in Playwright: click on Media nav item is blocked by button[aria-label="Open neural HUD assistant"].
- Root cause B (missing destinations): mobileNavItems in src/lib/navigation.ts filters navItems to only ['/dashboard','/messages','/voice','/media'], so /recordings, /moderation, /analysis are unreachable from the mobile bottom bar.
- Chosen design (user directive): extend the mobile bottom bar to all 7 nav items, horizontally scrollable/flex-wrap so they fit on narrow screens, following the desktop sidebar's items (same set as navItems).
Form controls not responsive on mobile (perbagus textfield, dropdown, lainnya agar responsif di mobile).
- Select dropdown (primitives/select.tsx) is portalled w/ fixed positioning computed from trigger rect only (top/left/width). On a narrow viewport a dropdown anchored near the right edge overflows past the screen's right edge and can be clipped/clickable-outside the visible area. Clamp horizontally within viewport.
- Input/Textarea (primitives/input.tsx) use text-sm (14px) which on iOS triggers auto-zoom on focus (a known mobile annoyance) and can be small touch targets. Give inputs a comfortable mobile baseline.

Files touched

src/components/shell/mobile-nav.tsx — use navItems (all 7), make the bar scrollable on narrow widths (overflow-x-auto + snap), keep active indicator.
src/components/chatbot/chatbot.tsx — raise FAB above the mobile bottom nav on md:hidden (e.g. bottom-[calc(4.75rem+env(safe-area-inset-bottom))]), keep bottom-5 on md+ so it never overlaps the nav.
src/lib/navigation.ts — drop mobileNavItems special-case (or repoint to navItems); keep navItems as the single source.
src/components/primitives/select.tsx — clamp dropdown left so it stays within viewport; cap width on narrow screens; keep max-height.
src/components/primitives/input.tsx — mobile-friendly font size / touch height (16px inputs to avoid iOS zoom; keep desktop as-is via responsive classes).

Verification

pnpm format, pnpm lint (biome clean), pnpm build compiles.
Smoke on NON-PROD port (4024) — confirm free first via ss -ltnp.
Playwright mobile viewport (390px): ALL 7 nav items present in bottom bar; tapping each navigates (esp. Media rightmost item NOT blocked by FAB); FAB is raised above the nav and no longer intercepts taps.
Select dropdown on a 390px viewport stays fully on-screen (no right overflow).
Commit (no trailer), push, gh run watch, verify all 7 live routes 200.

3.1 KiB Raw Blame History

GMW Frontend — Mobile Nav + Form Controls Responsive Pass

Problem

Files touched

Verification

3.1 KiB

Raw Blame History