Mobile-optimized site with MobileLayout component and touch-friendly pages - #15
Draft
zowskyy wants to merge 7 commits into
Draft
Mobile-optimized site with MobileLayout component and touch-friendly pages#15zowskyy wants to merge 7 commits into
zowskyy wants to merge 7 commits into
Conversation
Document 9 bugs found through adversarial testing: - 3 CRITICAL: Proximity graph duplicates, AmbientStatus polling leak, ring edge loss - 2 MAJOR: Weak test assertions, missing error handling - 4 MINOR: API confusion, timing edge cases, silent failures, dead code Includes test cases demonstrating each bug for future regression testing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
…tatus polling CRITICAL Bug #1: Proximity Graph Returns Duplicate Handles - File: app/src/lib/proximityGraph.ts (line 127) - Issue: getWanderBatch returned duplicate handles when early proximity contacts had no published pages - Root cause: selectedUserIds was sliced positionally (proximityIds.slice(0, rows.length)) instead of using actual discovered user IDs - Fix: Changed to selectedUserIds = [...idToHandle.keys()] to match actual results, not positions - Impact: Eliminates data integrity issue where same person appeared twice in Wander recommendations CRITICAL Bug #2: AmbientStatusDisplay Polling Continues After Component Unmount - File: app/src/components/AmbientStatusDisplay.tsx (lines 18-54) - Issue: Polling didn't cancel in-flight fetch when component unmounted, causing memory leaks and React state update warnings - Root cause: AbortController existed but wasn't properly guarding state updates after abort - Fix: Complete rewrite of effect with proper cancelled flag guard and controller.abort() in cleanup - Impact: Eliminates memory leaks, React warnings, and wasted bandwidth after navigation Test Changes: - Added regression test "does not return duplicate handles when first proximity user is undiscoverable" to proximityGraph.test.ts to prevent future regressions of Bug #1 - Tests verify: no duplicates when early proximity user is undiscoverable, all results are unique strings All 235 unit tests continue passing after modifications. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
MAJOR Bug #4: Weak Test Assertions in proximityGraph.test.ts - Strengthened assertion 'falls back to random pages for null userId' Changed: expect(result.length).toBeGreaterThanOrEqual(0) → expect(result.length).toBeGreaterThan(0) Added: expect(result).toContain("wanderer") - Strengthened assertion 'returns only handles' Added: expect(result.length).toBeGreaterThan(0) before type check loop These were too weak to catch real bugs (empty array would pass) CRITICAL Bug #3 Verification: Ring Edge Provenance Loss - Added comprehensive regression test to webRings.test.ts - Test verifies weight-tracking system correctly preserves edges when users leave one of multiple shared rings - Scenario: user in 2 rings, leaves 1, edge persists with weight 1 - Result: Bug #3 is NOT actually a bug - weight system handles it correctly - But system is architecturally fragile, so regression test prevents future breakage Test Results: - All 251 tests passing (up from 235) - 19 test files, no failures - Regression tests protect against duplicate handle bug and edge loss scenario Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
… design MAJOR Bug #5: Missing Error Handling in signGuestbook/recordEdge - Issue: Guestbook entry was inserted before recordEdge() was called If recordEdge() threw, entry existed but edge was missing (inconsistent state) - Fix: Wrapped recordEdge call in try-catch block Entry is preserved, error is logged for monitoring Preferable to losing guestbook entries if graph system has temporary issue - Impact: Prevents database inconsistency while protecting data integrity MINOR Bug #6: blockCheckId Parameter Confusion - Issue: blockCheckId parameter defaulted to authorId, creating confusion Callers could forget to pass it and block checks would be silently skipped Pattern: signGuestbook(..., blockCheckId: string | null = authorId) - Fix: Made blockCheckId required (not defaulted) Pattern: signGuestbook(..., blockCheckId: string | null) - Impact: Forces callers to explicitly consider block checking Prevents accidental security bypasses from forgotten parameters - Updated: All callsites in guestbook.test.ts and bugs.test.ts to pass explicit blockCheckId - Note: Production callsite in actions.ts already passed blockCheckId correctly Test Results: - All 14 guestbook tests passing - Changes prevent future bugs from missing block checks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
…s timestamps MINOR Bug #7: Ambient Status ISO String Timestamp Comparison - Changed expiresAt from ISO string to Unix milliseconds - Numeric comparison is more explicit and robust than lexicographic string comparison - Eliminates millisecond-level edge cases from string ordering - Updated AmbientStatus interface to reflect numeric timestamp - Updated setAmbientStatus, getAmbientStatus, getAmbientStatuses functions - Updated test to use Unix milliseconds instead of ISO strings MINOR Bug #8: Silent JSON.parse Failures - Added console.warn logging when JSON.parse fails in: * app/src/app/[handle]/page.tsx (resolveTopEight function) * app/src/app/(platform)/vibe/page.tsx (2 locations) * app/src/lib/collections.ts (getCollectionMembers function) - Logs now surface corrupted document_json to monitoring/debugging - Prevents silent data loss and makes issues discoverable Test Results: - All 9 ambient status tests passing - Changes enable better visibility into data corruption Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
Bug #7 fix follow-up: Updated the race condition test in bugs.test.ts to use Unix milliseconds instead of ISO string for the expired timestamp, matching the updated getAmbientStatus function behavior. All 251 tests passing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
- Create MobileLayout component with header, bottom navigation, and content area - Add MobileLayout.module.css with touch-friendly styling (44px+ targets, sticky footer nav) - Implement mobile home page (/mobile) with authenticated/guest views - Implement mobile wander page (/mobile/wander) for discovering users - Implement mobile rings page (/mobile/rings) for web ring discovery - Implement mobile studio page (/mobile/studio) with link to full editor - Implement mobile settings page (/mobile/settings) with account options - All pages use icon-based navigation (emoji icons for visual clarity) - Support safe area insets for notched devices - Responsive design with tablet breakpoint at 768px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018V1rEEt5QTC2ww5ZikioWZ
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements a mobile-optimized user experience for iofus with touch-friendly navigation and responsive design.
Changes
app/src/components/MobileLayout.tsx): Reusable wrapper component with sticky header, configurable content area, and bottom navigation bar with 5 main sectionsapp/src/components/MobileLayout.module.css): Touch-optimized CSS with 44px+ minimum touch targets, safe area insets for notched devices, and tablet responsive breakpoint at 768px/mobile- Home with authenticated/guest views, quick access to main features/mobile/wander- Simplified page discovery with "Find someone" button/mobile/rings- Web ring browsing with member counts and create option/mobile/studio- Dashboard showing current page status with links to full editor/mobile/settings- Account options, help links, and logoutFeatures
Testing
To test the mobile experience:
/mobileon a mobile device or use browser dev tools with device emulationArchitecture
The mobile experience is a companion to the main desktop site, not a replacement. Users can:
/mobileentry point/@handle) on mobile with responsive stylingGenerated by Claude Code