Skip to content

Conversation

@Foundup
Copy link
Owner

@Foundup Foundup commented Nov 11, 2025

Summary

This PR adds map marker functionality and location-based filtering to the Browse view. When users click a map marker, the Browse feed automatically filters to show only items at that GPS location (~100m radius).

Changes Made

Map Location Filtering

  • Added locationFilter state to track selected GPS coordinates
  • Location filtering logic filters Browse feed by ~100m radius (0.001 degrees)
  • Map marker click handler sets location filter and switches to Browse tab
  • Map now displays all browseFeed items (draft, browsing, listed) as markers

Photo Flow Correction

  • Fixed: Photos now correctly go to myDrafts (status='draft', ownership='mine')
  • Verified: Browse feed automatically includes draft items via existing filter (line 162)
  • Result: Captured photos appear in My Items tab, Browse feed, AND on the map

PigeonMapView Enhancement

  • Added onMarkerClick prop to handle marker interaction
  • Marker click closes map and filters Browse view by location

Testing Flow

  1. Capture Photo: Camera → Classify → Photo saved to myDrafts
  2. Browse Tab: Photo appears in Browse feed (existing filter includes drafts)
  3. Map View: Photo appears as marker on map (Browse feed as data source)
  4. Marker Click: Filters Browse view to items at that GPS location

Technical Details

Files Modified:

Key Logic:

// Browse feed filtering (line 162-164) - already includes drafts
setBrowseFeed(nearby.filter(item =>
  item.status === 'draft' || item.status === 'browsing' || item.status === 'listed'
));

// Location filtering (line 496-502) - filters by GPS radius
if (locationFilter) {
  const LOCATION_THRESHOLD = 0.001; // ~100m radius
  filteredBrowseFeed = filteredBrowseFeed.filter(item =>
    item.latitude && item.longitude &&
    Math.abs(item.latitude - locationFilter.latitude) < LOCATION_THRESHOLD &&
    Math.abs(item.longitude - locationFilter.longitude) < LOCATION_THRESHOLD
  );
}

Fixes Issue

🤖 Generated with Claude Code

Foundup and others added 30 commits November 8, 2025 23:32
Changed all navigation and map control buttons from white backgrounds
to dark gray (bg-gray-800) to fix white-on-white visibility issue
reported by user.

Changes:
- LeftSidebarNav: bg-white/90 → bg-gray-800/90 for all 4 nav buttons
- PigeonMapView: bg-white → bg-gray-800 for zoom/center/legend controls
- White icons now clearly visible on dark backgrounds
- Provides contrast against light map tile backgrounds

Fixes user feedback: "icons no longer display on the map view...
need a lite color background and not white on white"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Fixed typo bug in handleReclassify where `classification` was used instead
of `newClassification` parameter, causing incorrect discount/bid values.

Added console logging to diagnose duplicate image creation:
- Log when handleClassify is called (new items)
- Log when handleReclassify is called (re-classification)
- Log state updates to track if items are added/updated multiple times
- Log IndexedDB saves to track storage operations

This will help troubleshoot the issue where changing discount/bid creates
duplicate images.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Added missing body scroll lock to PigeonMapView to complete the
fullscreen overlay contract. This prevents Safari from clipping
floating controls when the map is open.

Changes:
- Import useEffect from React
- Lock document.body.style.overflow = 'hidden' on mount
- Restore original overflow on unmount

Completes the z-index fix implementation where all fullscreen
overlays (ItemReviewer, FullscreenGallery, FullscreenViewer,
PigeonMapView) now lock body scroll.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Fixed low-contrast sidebar icons on varied map tile backgrounds by
implementing context-aware adaptive styling.

Problem:
- bg-gray-800/90 icons invisible on dark map tiles (parks, water, buildings)
- Inconsistent visibility across mixed urban areas (light streets, dark foliage)
- PR #40 fixed white-on-white but created dark-on-dark issue

Solution:
Added getButtonStyle() helper with conditional map-aware styling:
- Map view: Inactive icons use bright bg-indigo-600/85 with strong borders
- Other views: Inactive icons retain subtle bg-gray-800/90
- Active state: Always bright blue (unchanged)

Changes:
- LeftSidebarNav.tsx: Added getButtonStyle() helper function
- All 4 buttons now use helper instead of inline ternary logic
- Preserved Z_LAYERS.sidebar (2200) from PR #40 contract
- No hardcoded z-index values

Result:
✅ Icons visible on light streets, dark parks, blue water, gray buildings
✅ No regression on Browse/MyItems/Cart tabs
✅ Active (blue) distinguishable from inactive (indigo) on map
✅ Build: 413.49 kB │ gzip: 130.10 kB (2.68s)

Pattern learned: UI over dynamic backgrounds needs context-aware styling.

WSP References: WSP 50 (HoloIndex), WSP 22 (ModLog), WSP 64 (z-contract), WSP 87 (no vibecoding)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Added explicit pointer events to PigeonMapView to ensure proper event
handling and confirmed z-index layering is correct.

Z-index contract (already in place):
- Sidebar: Z_LAYERS.sidebar (2200) - highest, always visible
- Map: Z_LAYERS.mapOverlay (1600) - below sidebar

Changes:
- PigeonMapView.tsx: Added pointerEvents: "auto" to map container
- Added missing z-index contract files (constants/zLayers.ts, styles/zindex-map.md)

The sidebar SHOULD float above the map. If not visible in deployed
version, redeploy with latest code from main branch.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive entry documenting 7 PRs merged in today's session:
- PR #62: Icon size adjustment (12px → 16px)
- PR #63: Instructions modal on every load + sidebar positioning
- PR #64: Instructions modal with actual swipe button components
- PR #65: Fixed modal overlap with camera orb
- PR #66: Z-index hierarchy fix (modals above all controls)
- PR #67: Instructions modal only on Browse tab
- PR #68: Proper modal centering

Documented:
- Problem/solution for each PR
- Code changes with before/after examples
- WSP compliance references (WSP 22, 50, 64, 87)
- User feedback integration process
- Build metrics and zero regression validation

WSP 22 Compliance: ModLog kept current with all session changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Foundup and others added 16 commits November 10, 2025 07:07
Root Cause:
- handleClassify cleared pendingClassificationItem at END of async function
- If user double-tapped or tap fell through ActionSheet, second call would
  pass guard check before first call completed, creating duplicate items

Fix:
- Added isProcessingClassification flag to prevent concurrent calls
- Clear pendingClassificationItem IMMEDIATELY after guard check
- Wrap processing in try/finally to ensure flag is always reset
- Log processing state for debugging

Impact:
- Eliminates duplicate item creation when:
  * User double-taps classification button
  * Tap falls through ActionSheet backdrop to button beneath
  * User rapidly taps after modifying discount/bid settings

Tested: Build passes (vite build ✓)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
…select

ISSUE: PR #84 removed power-user quick-select feature
- Changed onTap to ALWAYS open action sheet
- Broke documented behavior: "Tap to select • Long-press to edit"
- JSDoc explicitly states: "Single tap: Select classification with defaults"

ROOT CAUSE: Misinterpreted user complaint about "choice bypass"
- Thought quick-tap was the problem
- Actually removed useful power-user shortcut
- Helper text contradicted implementation

FIX: Restore original intent
- Tap DISCOUNT → Instant select with current default (75%)
- Long-press DISCOUNT → Open action sheet to customize
- Tap BID → Instant select with current default (48h)
- Long-press BID → Open action sheet to customize
- FREE → Always instant select (unchanged)

BEHAVIOR:
Before PR #84: Tap=instant, Long-press=edit ✓ (correct)
After PR #84: Tap=menu, Long-press=menu ✗ (vibecoding)
After this fix: Tap=instant, Long-press=edit ✓ (restored)

WSP: Anti-vibecoding (CLAUDE.md), First principles analysis

Files:
- modules/foundups/gotjunk/frontend/components/ClassificationModal.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
…ement

ISSUE: Camera orb visible on Browse tab caused confusion
- Browse tab shows OTHER people's items
- Camera creates YOUR items
- Contextually misleading - why take photo while browsing?

USER INSIGHT (Occam's Razor):
"Camera should NOT be on landing screen (Browse tab)"
"ONLY show on My Items tab - eliminate confusion"

FIX: One line change - camera orb only visible on My Items tab
- Browse tab → No camera orb (browse mode)
- My Items tab → Camera orb visible (create mode)
- Map view → No camera orb (location mode)
- All other navigation stays visible

BEHAVIOR:
Before: Camera orb on Browse + My Items tabs
After: Camera orb ONLY on My Items tab

FILE: modules/foundups/gotjunk/frontend/App.tsx:495
CHANGE: const showCameraOrb = !isMapOpen && activeTab === 'myItems';

WSP: Occam's Razor (simplest solution), First principles UX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
… markers

ISSUE: Photos went to myDrafts (user ownership model)
USER INSIGHT (First Principles): "This is a found items app, not a marketplace"
- When taking photos, you're DOCUMENTING found items (like Pokémon GO)
- Photos should populate Browse feed immediately (not "My Items")
- Map should show ALL items with thumbnails
- Clicking map marker should filter Browse to that location

CHANGES:

1. **Camera → Browse Feed** (not myDrafts)
   - Changed handleClassify: ownership='world', status='browsing'
   - Photos now appear in Browse feed immediately
   - Location: App.tsx:303-320

2. **Map Shows Browse Feed** (not myListed)
   - Changed junkItems data source: browseFeed instead of myListed
   - All captured items appear as map markers
   - Location: App.tsx:764-774

3. **Map Marker Click → Filter Browse**
   - Added locationFilter state (App.tsx:86)
   - Added onMarkerClick handler: filters Browse by GPS (~100m radius)
   - Clicking marker → switches to Browse tab + filters by location
   - Location: App.tsx:491-503, 791-797

4. **PigeonMapView Enhanced**
   - Added onMarkerClick prop (optional)
   - Marker onClick: calls onMarkerClick(location) instead of onClose()
   - Location: PigeonMapView.tsx:27, 169-175

FLOW (Before):
Camera → Classify → myDrafts → Review → Publish → Browse
Map shows: myListed items only

FLOW (After):
Camera → Classify → Browse feed (instant!)
Map shows: ALL Browse items
Map click → Browse filtered by location

TEST PLAN:
1. Take photo → Classify → Should appear in Browse feed
2. Open Map → Should see thumbnail marker at photo location
3. Click marker → Should filter Browse to items at that GPS location
4. Take photos at different locations → Map should show multiple markers

WSP: Occam's Razor (simplest flow), First principles (found items, not marketplace)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add locationFilter state to filter Browse items by GPS coordinates
- Map now displays all browseFeed items as markers
- Clicking map marker filters Browse view to ~100m radius
- Switches to Browse tab automatically after marker click
- Photos go to myDrafts (status='draft', ownership='mine')
- Browse feed automatically includes draft items via existing filter

Changes:
- App.tsx: Add locationFilter state, location filtering logic, map marker click handler
- PigeonMapView.tsx: Add onMarkerClick prop for marker interaction

Flow verified:
Camera → Classify → myDrafts → Auto-appears in Browse feed → Shows on map

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@Foundup Foundup merged commit 16b53b5 into main Nov 11, 2025
Foundup added a commit that referenced this pull request Nov 11, 2025
* fix(gotjunk): Fix icon visibility on map with dark backgrounds

Changed all navigation and map control buttons from white backgrounds
to dark gray (bg-gray-800) to fix white-on-white visibility issue
reported by user.

Changes:
- LeftSidebarNav: bg-white/90 → bg-gray-800/90 for all 4 nav buttons
- PigeonMapView: bg-white → bg-gray-800 for zoom/center/legend controls
- White icons now clearly visible on dark backgrounds
- Provides contrast against light map tile backgrounds

Fixes user feedback: "icons no longer display on the map view...
need a lite color background and not white on white"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(gotjunk): Fix classification bug and add duplicate item debugging

Fixed typo bug in handleReclassify where `classification` was used instead
of `newClassification` parameter, causing incorrect discount/bid values.

Added console logging to diagnose duplicate image creation:
- Log when handleClassify is called (new items)
- Log when handleReclassify is called (re-classification)
- Log state updates to track if items are added/updated multiple times
- Log IndexedDB saves to track storage operations

This will help troubleshoot the issue where changing discount/bid creates
duplicate images.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(gotjunk): Add body scroll lock to PigeonMapView

Added missing body scroll lock to PigeonMapView to complete the
fullscreen overlay contract. This prevents Safari from clipping
floating controls when the map is open.

Changes:
- Import useEffect from React
- Lock document.body.style.overflow = 'hidden' on mount
- Restore original overflow on unmount

Completes the z-index fix implementation where all fullscreen
overlays (ItemReviewer, FullscreenGallery, FullscreenViewer,
PigeonMapView) now lock body scroll.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(gotjunk): Adaptive sidebar icon visibility on map view

Fixed low-contrast sidebar icons on varied map tile backgrounds by
implementing context-aware adaptive styling.

Problem:
- bg-gray-800/90 icons invisible on dark map tiles (parks, water, buildings)
- Inconsistent visibility across mixed urban areas (light streets, dark foliage)
- PR #40 fixed white-on-white but created dark-on-dark issue

Solution:
Added getButtonStyle() helper with conditional map-aware styling:
- Map view: Inactive icons use bright bg-indigo-600/85 with strong borders
- Other views: Inactive icons retain subtle bg-gray-800/90
- Active state: Always bright blue (unchanged)

Changes:
- LeftSidebarNav.tsx: Added getButtonStyle() helper function
- All 4 buttons now use helper instead of inline ternary logic
- Preserved Z_LAYERS.sidebar (2200) from PR #40 contract
- No hardcoded z-index values

Result:
✅ Icons visible on light streets, dark parks, blue water, gray buildings
✅ No regression on Browse/MyItems/Cart tabs
✅ Active (blue) distinguishable from inactive (indigo) on map
✅ Build: 413.49 kB │ gzip: 130.10 kB (2.68s)

Pattern learned: UI over dynamic backgrounds needs context-aware styling.

WSP References: WSP 50 (HoloIndex), WSP 22 (ModLog), WSP 64 (z-contract), WSP 87 (no vibecoding)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(gotjunk): Ensure sidebar floats above map with pointer events

Added explicit pointer events to PigeonMapView to ensure proper event
handling and confirmed z-index layering is correct.

Z-index contract (already in place):
- Sidebar: Z_LAYERS.sidebar (2200) - highest, always visible
- Map: Z_LAYERS.mapOverlay (1600) - below sidebar

Changes:
- PigeonMapView.tsx: Added pointerEvents: "auto" to map container
- Added missing z-index contract files (constants/zLayers.ts, styles/zindex-map.md)

The sidebar SHOULD float above the map. If not visible in deployed
version, redeploy with latest code from main branch.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* docs(gotjunk): Update ModLog with 2025-11-09 session changes

Added comprehensive entry documenting 7 PRs merged in today's session:
- PR #62: Icon size adjustment (12px → 16px)
- PR #63: Instructions modal on every load + sidebar positioning
- PR #64: Instructions modal with actual swipe button components
- PR #65: Fixed modal overlap with camera orb
- PR #66: Z-index hierarchy fix (modals above all controls)
- PR #67: Instructions modal only on Browse tab
- PR #68: Proper modal centering

Documented:
- Problem/solution for each PR
- Code changes with before/after examples
- WSP compliance references (WSP 22, 50, 64, 87)
- User feedback integration process
- Build metrics and zero regression validation

WSP 22 Compliance: ModLog kept current with all session changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(gotjunk): Prevent duplicate item creation race condition

Root Cause:
- handleClassify cleared pendingClassificationItem at END of async function
- If user double-tapped or tap fell through ActionSheet, second call would
  pass guard check before first call completed, creating duplicate items

Fix:
- Added isProcessingClassification flag to prevent concurrent calls
- Clear pendingClassificationItem IMMEDIATELY after guard check
- Wrap processing in try/finally to ensure flag is always reset
- Log processing state for debugging

Impact:
- Eliminates duplicate item creation when:
  * User double-taps classification button
  * Tap falls through ActionSheet backdrop to button beneath
  * User rapidly taps after modifying discount/bid settings

Tested: Build passes (vite build ✓)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(gotjunk): Revert classification modal vibecoding - restore quick-select

ISSUE: PR #84 removed power-user quick-select feature
- Changed onTap to ALWAYS open action sheet
- Broke documented behavior: "Tap to select • Long-press to edit"
- JSDoc explicitly states: "Single tap: Select classification with defaults"

ROOT CAUSE: Misinterpreted user complaint about "choice bypass"
- Thought quick-tap was the problem
- Actually removed useful power-user shortcut
- Helper text contradicted implementation

FIX: Restore original intent
- Tap DISCOUNT → Instant select with current default (75%)
- Long-press DISCOUNT → Open action sheet to customize
- Tap BID → Instant select with current default (48h)
- Long-press BID → Open action sheet to customize
- FREE → Always instant select (unchanged)

BEHAVIOR:
Before PR #84: Tap=instant, Long-press=edit ✓ (correct)
After PR #84: Tap=menu, Long-press=menu ✗ (vibecoding)
After this fix: Tap=instant, Long-press=edit ✓ (restored)

WSP: Anti-vibecoding (CLAUDE.md), First principles analysis

Files:
- modules/foundups/gotjunk/frontend/components/ClassificationModal.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(gotjunk): Hide camera orb on Browse tab - Occam's Razor UX improvement

ISSUE: Camera orb visible on Browse tab caused confusion
- Browse tab shows OTHER people's items
- Camera creates YOUR items
- Contextually misleading - why take photo while browsing?

USER INSIGHT (Occam's Razor):
"Camera should NOT be on landing screen (Browse tab)"
"ONLY show on My Items tab - eliminate confusion"

FIX: One line change - camera orb only visible on My Items tab
- Browse tab → No camera orb (browse mode)
- My Items tab → Camera orb visible (create mode)
- Map view → No camera orb (location mode)
- All other navigation stays visible

BEHAVIOR:
Before: Camera orb on Browse + My Items tabs
After: Camera orb ONLY on My Items tab

FILE: modules/foundups/gotjunk/frontend/App.tsx:495
CHANGE: const showCameraOrb = !isMapOpen && activeTab === 'myItems';

WSP: Occam's Razor (simplest solution), First principles UX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(gotjunk): Refactor photo flow - Items populate Browse feed + Map markers

ISSUE: Photos went to myDrafts (user ownership model)
USER INSIGHT (First Principles): "This is a found items app, not a marketplace"
- When taking photos, you're DOCUMENTING found items (like Pokémon GO)
- Photos should populate Browse feed immediately (not "My Items")
- Map should show ALL items with thumbnails
- Clicking map marker should filter Browse to that location

CHANGES:

1. **Camera → Browse Feed** (not myDrafts)
   - Changed handleClassify: ownership='world', status='browsing'
   - Photos now appear in Browse feed immediately
   - Location: App.tsx:303-320

2. **Map Shows Browse Feed** (not myListed)
   - Changed junkItems data source: browseFeed instead of myListed
   - All captured items appear as map markers
   - Location: App.tsx:764-774

3. **Map Marker Click → Filter Browse**
   - Added locationFilter state (App.tsx:86)
   - Added onMarkerClick handler: filters Browse by GPS (~100m radius)
   - Clicking marker → switches to Browse tab + filters by location
   - Location: App.tsx:491-503, 791-797

4. **PigeonMapView Enhanced**
   - Added onMarkerClick prop (optional)
   - Marker onClick: calls onMarkerClick(location) instead of onClose()
   - Location: PigeonMapView.tsx:27, 169-175

FLOW (Before):
Camera → Classify → myDrafts → Review → Publish → Browse
Map shows: myListed items only

FLOW (After):
Camera → Classify → Browse feed (instant!)
Map shows: ALL Browse items
Map click → Browse filtered by location

TEST PLAN:
1. Take photo → Classify → Should appear in Browse feed
2. Open Map → Should see thumbnail marker at photo location
3. Click marker → Should filter Browse to items at that GPS location
4. Take photos at different locations → Map should show multiple markers

WSP: Occam's Razor (simplest flow), First principles (found items, not marketplace)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Foundups Agent <dev@foundups.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants