From 55620b3ec4b0afaabecc3b10ba8ae1fa94d0b62f Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Sat, 8 Nov 2025 23:32:20 +0900
Subject: [PATCH 01/11] fix(gotjunk): Fix icon visibility on map with dark
 backgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../gotjunk/frontend/components/LeftSidebarNav.tsx     |  8 ++++----
 .../gotjunk/frontend/components/PigeonMapView.tsx      | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx b/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx
index 1c2dc86aa..1561b7131 100644
--- a/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx
+++ b/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx
@@ -79,7 +79,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
           activeTab === 'browse'
             ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-white/90 hover:bg-white border-2 border-gray-300 shadow-2xl'
+            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
         }`}
       >
         <GridIcon className="w-8 h-8 text-white" />
@@ -94,7 +94,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
           activeTab === 'map'
             ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-white/90 hover:bg-white border-2 border-gray-300 shadow-2xl'
+            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
         }`}
       >
         <MapIcon className="w-8 h-8 text-white" />
@@ -109,7 +109,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
           activeTab === 'myitems'
             ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-white/90 hover:bg-white border-2 border-gray-300 shadow-2xl'
+            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
         }`}
       >
         <HomeIcon className="w-8 h-8 text-white" />
@@ -124,7 +124,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
           activeTab === 'cart'
             ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-white/90 hover:bg-white border-2 border-gray-300 shadow-2xl'
+            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
         }`}
       >
         <CartIcon className="w-8 h-8 text-white" />
diff --git a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
index 42f2c3c6e..526c83115 100644
--- a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
+++ b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
@@ -92,14 +92,14 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
       <div className="absolute top-24 right-4 z-40 flex flex-col gap-2">
         <button
           onClick={() => setZoom(Math.min(zoom + 1, 18))}
-          className="bg-white hover:bg-gray-50 text-black text-2xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-300 font-bold"
+          className="bg-gray-800 hover:bg-gray-700 text-white text-2xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-600 font-bold"
           title="Zoom In"
         >
           +
         </button>
         <button
           onClick={() => setZoom(Math.max(zoom - 1, 1))}
-          className="bg-white hover:bg-gray-50 text-black text-2xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-300 font-bold"
+          className="bg-gray-800 hover:bg-gray-700 text-white text-2xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-600 font-bold"
           title="Zoom Out"
         >
           −
@@ -110,7 +110,7 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
               // Center map on user location
               window.location.reload(); // Simple way to recenter
             }}
-            className="bg-white hover:bg-gray-50 text-black text-xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-300"
+            className="bg-gray-800 hover:bg-gray-700 text-white text-xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-600"
             title="Center on Me"
           >
             📍
@@ -119,7 +119,7 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
         {isGlobalView && (
           <button
             onClick={() => setZoom(2)} // Reset to global view
-            className="bg-white hover:bg-gray-50 text-black text-xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-300"
+            className="bg-gray-800 hover:bg-gray-700 text-white text-xl w-10 h-10 rounded-lg shadow-2xl border-2 border-gray-600"
             title="Reset Global View"
           >
             🌍
@@ -240,7 +240,7 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
         {/* Legend Toggle Button */}
         <button
           onClick={() => setLegendExpanded(!legendExpanded)}
-          className="bg-white hover:bg-gray-50 backdrop-blur rounded-full w-12 h-12 shadow-2xl border-2 border-gray-300 flex items-center justify-center transition-all"
+          className="bg-gray-800 hover:bg-gray-700 backdrop-blur rounded-full w-12 h-12 shadow-2xl border-2 border-gray-600 flex items-center justify-center transition-all"
           title="Toggle Legend"
         >
           <span className="text-2xl">{legendExpanded ? '✕' : 'ℹ️'}</span>

From 9ab125453e42581575fd11230f11a8ebbe3b4b75 Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Sat, 8 Nov 2025 23:40:39 +0900
Subject: [PATCH 02/11] fix(gotjunk): Fix classification bug and add duplicate
 item debugging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 modules/foundups/gotjunk/frontend/App.tsx | 37 +++++++++++++++++++----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/App.tsx b/modules/foundups/gotjunk/frontend/App.tsx
index 7f3128ac5..5cd31371b 100644
--- a/modules/foundups/gotjunk/frontend/App.tsx
+++ b/modules/foundups/gotjunk/frontend/App.tsx
@@ -236,7 +236,12 @@ const App: React.FC = () => {
   };
 
   const handleClassify = async (classification: ItemClassification, discountPercent?: number, bidDurationHours?: number) => {
-    if (!pendingClassificationItem) return;
+    console.log('[GotJunk] handleClassify called:', { classification, discountPercent, bidDurationHours, hasPending: !!pendingClassificationItem });
+
+    if (!pendingClassificationItem) {
+      console.warn('[GotJunk] handleClassify called but no pendingClassificationItem!');
+      return;
+    }
 
     const { blob, url, location } = pendingClassificationItem;
 
@@ -273,11 +278,17 @@ const App: React.FC = () => {
       ...location,
     };
 
+    console.log('[GotJunk] Saving new item:', { id: newItem.id, classification, price });
     await storage.saveItem(newItem);
-    setMyDrafts(current => [newItem, ...current]);
+
+    setMyDrafts(current => {
+      console.log('[GotJunk] Adding to myDrafts, current count:', current.length);
+      return [newItem, ...current];
+    });
 
     // Clear pending item
     setPendingClassificationItem(null);
+    console.log('[GotJunk] Cleared pendingClassificationItem');
 
     // Liberty Alert: If keyword detected during video recording, create alert
     if (libertyEnabled && keywordDetected && blob.type.startsWith('video/')) {
@@ -359,6 +370,8 @@ const App: React.FC = () => {
   
   // Re-classify existing item
   const handleReclassify = async (item: CapturedItem, newClassification: ItemClassification, discountPercent?: number, bidDurationHours?: number) => {
+    console.log('[GotJunk] handleReclassify called:', { itemId: item.id, newClassification, discountPercent, bidDurationHours });
+
     const defaultPrice = 100; // Will be from Google Vision API
 
     // Use provided values or defaults
@@ -379,19 +392,31 @@ const App: React.FC = () => {
       ...item,
       classification: newClassification,
       price,
-      discountPercent: classification === 'discount' ? finalDiscountPercent : undefined,
-      bidDurationHours: classification === 'bid' ? finalBidDurationHours : undefined,
+      discountPercent: newClassification === 'discount' ? finalDiscountPercent : undefined,
+      bidDurationHours: newClassification === 'bid' ? finalBidDurationHours : undefined,
     };
 
+    console.log('[GotJunk] Updating item in state:', { id: updatedItem.id, status: item.status });
+
     // Update in state
     if (item.status === 'draft') {
-      setMyDrafts(prev => prev.map(i => i.id === item.id ? updatedItem : i));
+      setMyDrafts(prev => {
+        const updated = prev.map(i => i.id === item.id ? updatedItem : i);
+        console.log('[GotJunk] myDrafts updated, count:', updated.length);
+        return updated;
+      });
     } else {
-      setMyListed(prev => prev.map(i => i.id === item.id ? updatedItem : i));
+      setMyListed(prev => {
+        const updated = prev.map(i => i.id === item.id ? updatedItem : i);
+        console.log('[GotJunk] myListed updated, count:', updated.length);
+        return updated;
+      });
     }
 
     // Update in IndexedDB
+    console.log('[GotJunk] Saving to IndexedDB...');
     await storage.saveItem(updatedItem);
+    console.log('[GotJunk] Saved to IndexedDB successfully');
 
     setReclassifyingItem(null);
   };

From 3a7d635bcc76e3894a5f3501c9a8abb48d860288 Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Sat, 8 Nov 2025 23:47:13 +0900
Subject: [PATCH 03/11] fix(gotjunk): Add body scroll lock to PigeonMapView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../frontend/components/PigeonMapView.tsx     | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
index 526c83115..acce6bbf7 100644
--- a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
+++ b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Map, Marker, Overlay } from 'pigeon-maps';
+import { Z_LAYERS } from '../constants/zLayers';
 
 interface JunkItem {
   id: string;
@@ -47,6 +48,16 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
   const [selectedAlert, setSelectedAlert] = useState<LibertyAlert | null>(null);
   const [legendExpanded, setLegendExpanded] = useState(false); // Collapsible legend
 
+  // Lock body scroll when map is open (prevent Safari from clipping floating controls)
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+
   console.log('[DAEmon Beat] pigeon_map_mounted', {
     junkItems: junkItems.length,
     libertyAlerts: libertyAlerts.length,
@@ -69,7 +80,15 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
   };
 
   return (
-    <div className="fixed top-0 left-0 right-0 bottom-32 bg-black z-30" style={{ touchAction: "pan-x pan-y pinch-zoom", userSelect: "none", WebkitUserSelect: "none" }}>
+    <div
+      className="fixed top-0 left-0 right-0 bottom-32 bg-black"
+      style={{
+        zIndex: Z_LAYERS.mapOverlay,
+        touchAction: "pan-x pan-y pinch-zoom",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+      }}
+    >
       {/* Header */}
       <div className="absolute top-0 left-0 right-0 z-40 bg-gradient-to-b from-black/80 to-transparent p-4">
         <div className="flex items-center justify-between">

From 488727d1af5ea9f417b6d52da64bbdfb57100a33 Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Sat, 8 Nov 2025 23:53:46 +0900
Subject: [PATCH 04/11] feat(gotjunk): Adaptive sidebar icon visibility on map
 view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 modules/foundups/gotjunk/ModLog.md            | 46 ++++++++++++++++++
 .../frontend/components/LeftSidebarNav.tsx    | 47 ++++++++++---------
 2 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/modules/foundups/gotjunk/ModLog.md b/modules/foundups/gotjunk/ModLog.md
index 6b9b2fdca..f9748e701 100644
--- a/modules/foundups/gotjunk/ModLog.md
+++ b/modules/foundups/gotjunk/ModLog.md
@@ -1,5 +1,51 @@
 # GotJUNK? FoundUp - Module Change Log
 
+## Adaptive Icon Visibility on Map View (2025-11-08)
+
+**Problem**: Sidebar navigation icons (grid, map, home, cart) had low contrast against varied map tile backgrounds:
+- White streets → dark `bg-gray-800/90` icons hard to see ❌
+- Dark parks/water → dark icons invisible ❌
+- Mixed urban areas → inconsistent visibility ❌
+
+**Solution**: Context-aware adaptive styling via `getButtonStyle()` helper function:
+- **Map view**: Inactive icons use bright `bg-indigo-600/85` with strong borders/shadows ✅
+- **Other views**: Inactive icons use subtle `bg-gray-800/90` for consistency ✅
+- **Active state**: Always bright blue `bg-blue-500/70` (unchanged) ✅
+
+**Changes**:
+- `frontend/components/LeftSidebarNav.tsx`:
+  - Added `getButtonStyle()` helper with map-aware conditional logic
+  - All 4 buttons now use helper instead of inline ternary expressions
+  - Preserved `Z_LAYERS.sidebar` (2200) from PR #40 z-index contract
+  - No hardcoded z-index values - maintained centralized layering
+
+**Technical Details**:
+```typescript
+// When activeTab === 'map', inactive icons get high-contrast backgrounds
+const getButtonStyle = (isActive: boolean) => {
+  if (isActive) return 'bg-blue-500/70 ring-2 ring-blue-400...'; // Always visible
+  return isMapView
+    ? 'bg-indigo-600/85 hover:bg-indigo-500/90 border-2 border-indigo-400...' // Bright on map
+    : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600...';      // Subtle elsewhere
+};
+```
+
+**Result**:
+- All icons visible and clickable across light streets, dark parks, blue water, gray buildings
+- No regression on Browse/MyItems/Cart tabs (retain subtle gray backgrounds)
+- Active icon (blue) distinguishable from inactive icons (indigo) on map
+- Build successful: 413.49 kB │ gzip: 130.10 kB (2.68s)
+
+**WSP References**:
+- WSP 50: Searched HoloIndex for existing patterns before implementing
+- WSP 22: ModLog documentation (this entry)
+- WSP 64: Preserved z-index contract from PR #40 (no hardcoded values)
+- WSP 87: Researched existing design system before adding new styles
+
+**Pattern Learned**: UI components over dynamic backgrounds (maps, video, camera) need **context-aware styling** - high contrast for visual overlays, subtle for static content.
+
+---
+
 ## Liberty Alert Integration (2025-11-03)
 
 **Changes**:
diff --git a/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx b/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx
index 1561b7131..e0ab3817c 100644
--- a/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx
+++ b/modules/foundups/gotjunk/frontend/components/LeftSidebarNav.tsx
@@ -9,6 +9,7 @@ import { GridIcon } from './icons/GridIcon';
 import { MapIcon } from './icons/MapIcon';
 import { HomeIcon } from './icons/HomeIcon';
 import { CartIcon } from './icons/CartIcon';
+import { Z_LAYERS } from '../constants/zLayers';
 
 interface LeftSidebarNavProps {
   activeTab: 'browse' | 'map' | 'myitems' | 'cart';
@@ -49,12 +50,30 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
     onGalleryClick();
   };
 
+  // Adaptive icon styling for map view visibility
+  // Map tiles vary (white streets, dark parks, blue water) - inactive icons need high contrast
+  const isMapView = activeTab === 'map';
+  const getButtonStyle = (isActive: boolean) => {
+    if (isActive) {
+      // Active state: bright blue with ring (always visible)
+      return 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300';
+    }
+    // Inactive state: high-contrast for map view, subtle for other views
+    return isMapView
+      ? 'bg-indigo-600/85 hover:bg-indigo-500/90 border-2 border-indigo-400 shadow-2xl shadow-indigo-900/60'
+      : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl';
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0, x: -50 }}
       animate={{ opacity: 1, x: 0 }}
-      className="fixed left-6 z-60 flex flex-col items-center space-y-6"
-      style={{ top: 'calc(50% - 150px)', transform: 'translateY(-50%)' }}
+      className="fixed left-4 sm:left-6 flex flex-col items-center space-y-6 pointer-events-auto"
+      style={{
+        top: 'calc(50% - 150px)',
+        transform: 'translateY(-50%)',
+        zIndex: Z_LAYERS.sidebar,
+      }}
     >
       {/* Liberty Alert - Top of sidebar */}
       {libertyEnabled && (
@@ -76,11 +95,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         aria-label="Browse (Tab 1)"
         whileHover={{ scale: 1.1 }}
         whileTap={{ scale: 0.95 }}
-        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
-          activeTab === 'browse'
-            ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
-        }`}
+        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${getButtonStyle(activeTab === 'browse')}`}
       >
         <GridIcon className="w-8 h-8 text-white" />
       </motion.button>
@@ -91,11 +106,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         aria-label="Map (Tab 2)"
         whileHover={{ scale: 1.1 }}
         whileTap={{ scale: 0.95 }}
-        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
-          activeTab === 'map'
-            ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
-        }`}
+        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${getButtonStyle(activeTab === 'map')}`}
       >
         <MapIcon className="w-8 h-8 text-white" />
       </motion.button>
@@ -106,11 +117,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         aria-label="My Items (Tab 3)"
         whileHover={{ scale: 1.1 }}
         whileTap={{ scale: 0.95 }}
-        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
-          activeTab === 'myitems'
-            ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
-        }`}
+        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${getButtonStyle(activeTab === 'myitems')}`}
       >
         <HomeIcon className="w-8 h-8 text-white" />
       </motion.button>
@@ -121,11 +128,7 @@ export const LeftSidebarNav: React.FC<LeftSidebarNavProps> = ({
         aria-label="Cart (Tab 4)"
         whileHover={{ scale: 1.1 }}
         whileTap={{ scale: 0.95 }}
-        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${
-          activeTab === 'cart'
-            ? 'bg-blue-500/70 ring-2 ring-blue-400 shadow-blue-500/50 border-2 border-blue-300'
-            : 'bg-gray-800/90 hover:bg-gray-700/90 border-2 border-gray-600 shadow-2xl'
-        }`}
+        className={`p-4 rounded-2xl backdrop-blur-md shadow-xl transition-all ${getButtonStyle(activeTab === 'cart')}`}
       >
         <CartIcon className="w-8 h-8 text-white" />
       </motion.button>

From 60bdd411a3da122c949afa79b461efa35a508d4f Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Sun, 9 Nov 2025 01:51:45 +0900
Subject: [PATCH 05/11] fix(gotjunk): Ensure sidebar floats above map with
 pointer events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../frontend/components/PigeonMapView.tsx     |  1 +
 .../gotjunk/frontend/constants/zLayers.ts     | 14 ++++++++++++++
 .../gotjunk/frontend/styles/zindex-map.md     | 19 +++++++++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 modules/foundups/gotjunk/frontend/constants/zLayers.ts
 create mode 100644 modules/foundups/gotjunk/frontend/styles/zindex-map.md

diff --git a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
index acce6bbf7..a709172b4 100644
--- a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
+++ b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
@@ -87,6 +87,7 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
         touchAction: "pan-x pan-y pinch-zoom",
         userSelect: "none",
         WebkitUserSelect: "none",
+        pointerEvents: "auto",
       }}
     >
       {/* Header */}
diff --git a/modules/foundups/gotjunk/frontend/constants/zLayers.ts b/modules/foundups/gotjunk/frontend/constants/zLayers.ts
new file mode 100644
index 000000000..14d38d095
--- /dev/null
+++ b/modules/foundups/gotjunk/frontend/constants/zLayers.ts
@@ -0,0 +1,14 @@
+/**
+ * Shared z-index contract for the GotJunk? HOLO UI.
+ * Keep floating controls above popups/modals to satisfy WSP layering rules.
+ */
+export const Z_LAYERS = {
+  popup: 1200,
+  fullscreen: 1400,
+  gallery: 1500,
+  mapOverlay: 1600,
+  floatingControls: 2100,
+  sidebar: 2200,
+} as const;
+
+export type ZLayerKey = keyof typeof Z_LAYERS;
diff --git a/modules/foundups/gotjunk/frontend/styles/zindex-map.md b/modules/foundups/gotjunk/frontend/styles/zindex-map.md
new file mode 100644
index 000000000..e1d17102d
--- /dev/null
+++ b/modules/foundups/gotjunk/frontend/styles/zindex-map.md
@@ -0,0 +1,19 @@
+# HOLO UI Z-Index Contract
+
+_WSP Layering Reference – updated 2025-11-08_
+
+| Layer | Value | Components | Notes |
+|-------|-------|------------|-------|
+| Sidebar Controls | 2200 | `LeftSidebarNav` | Always visible; sits above every popup/overlay. |
+| Floating Controls | 2100 | `BottomNavBar`, camera orb | Includes search bar + capture button. |
+| Map Overlay | 1600 | `PigeonMapView` | Full-screen map with zoom controls. |
+| Gallery / Fullscreen Review | 1500 | `FullscreenGallery`, `FullscreenViewer`, `ItemReviewer` | Locks background scroll and dims content. |
+| Popup Layer | 1200 | Classification/options modals, other dialogs | Standard modal layer. |
+| Content Grid | 500 | Base app surfaces (`App.tsx`) | Anything without an explicit `z-index`. |
+
+Implementation notes:
+
+- The canonical values live in `constants/zLayers.ts`. Always use those exports instead of hard-coding numbers so react + docs stay in sync.
+- Floating controls rely on `position: fixed` plus safe-area offsets (see `BottomNavBar` + `LeftSidebarNav`). Keep them outside popup containers in `App.tsx`.
+- Fullscreen experiences (`ItemReviewer`, gallery, map) now lock `document.body.style.overflow` so mobile browsers do not clip floating controls when the page scrolls.
+- Verification: open an item fullscreen, expand the map, and toggle classification modals—sidebar/cart icons and the capture orb must remain visible and clickable on iPhone 11/13/15/16 orientations.

From bfe7dfdb102e7a0c3955038bb7dbbc5ff1ba529e Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Mon, 10 Nov 2025 00:00:12 +0900
Subject: [PATCH 06/11] docs(gotjunk): Update ModLog with 2025-11-09 session
 changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 modules/foundups/gotjunk/ModLog.md | 100 +++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/modules/foundups/gotjunk/ModLog.md b/modules/foundups/gotjunk/ModLog.md
index f9748e701..e41545142 100644
--- a/modules/foundups/gotjunk/ModLog.md
+++ b/modules/foundups/gotjunk/ModLog.md
@@ -1,5 +1,105 @@
 # GotJUNK? FoundUp - Module Change Log
 
+## Modal & Icon UI Refinements (2025-11-09)
+
+**Session Summary**: Fixed critical UX issues with modal layering, instructions popup, and icon sizing based on user feedback.
+
+### PR #62: Sidebar Icon Size Adjustment
+**Problem**: 12px icons were too small for thumb accessibility on mobile.
+**Fix**: Increased icon size from 12px → 16px in `LeftSidebarNav.tsx`
+- GridIcon, MapIcon, HomeIcon, CartIcon all updated
+- Maintains 54px button size with 19px padding per side
+- User confirmed improved visibility and accessibility
+
+### PR #63: Instructions Modal & Sidebar Position
+**Changes**:
+1. **Instructions modal now shows on every page load** (removed localStorage persistence)
+   - Before: Showed once, then never again
+   - After: Shows on every refresh for consistent onboarding
+   - Changed `useState(() => { ...localStorage... })` → `useState(true)`
+
+2. **Sidebar moved up 10px** for better thumb reach
+   - Changed `--sb-bottom-safe` from 120px → 130px in `index.css`
+   - Applies to all 4 navigation icons
+
+### PR #64: Instructions Modal Visual Improvements
+**Problem**: Modal used emoji arrows instead of actual UI components.
+**Fix**: Complete redesign with actual swipe button components
+- Imports `LeftArrowIcon` and `RightArrowIcon` from button components
+- Recreates exact button styling: `bg-red-600/50` and `bg-green-500/50`
+- Compact 80% width layout (max-width 340px)
+- Added `pointer-events-none` to prevent interaction in tutorial
+
+### PR #65: Instructions Modal Overlap Fix
+**Problem**: Modal used `32px` instead of Tailwind `bottom-32` (8rem = 128px).
+**Fix**: Corrected bottom calculation
+- Changed `calc(32px + ...)` → `calc(8rem + ...)`
+- Fixed 96px positioning error that caused overlap with camera orb
+
+### PR #66: Z-Index Hierarchy Fix ⭐
+**Problem**: ClassificationModal (`z-[200]`) appeared **behind** camera orb (2120) and sidebar (2200).
+**Root Cause**: All modals had hardcoded low z-index values (200-300 range).
+
+**Fix**: Added centralized z-index constants in `zLayers.ts`
+```typescript
+export const Z_LAYERS = {
+  popup: 1200,
+  fullscreen: 1400,
+  gallery: 1500,
+  mapOverlay: 1600,
+  floatingControls: 2100,
+  sidebar: 2200,
+  modal: 2300,        // NEW - ClassificationModal, OptionsModal
+  actionSheet: 2400,  // NEW - Discount/Bid sheets
+} as const;
+```
+
+**Files Updated**:
+- `ClassificationModal.tsx`: z-[200] → `Z_LAYERS.modal` (2300)
+- `OptionsModal.tsx`: z-[300] → `Z_LAYERS.modal` (2300)
+- `ActionSheetDiscount.tsx`: z-[250/251] → `Z_LAYERS.actionSheet` (2400)
+- `ActionSheetBid.tsx`: z-[250/251] → `Z_LAYERS.actionSheet` (2400)
+
+**Result**: Classification modal now correctly appears above all controls.
+
+### PR #67: Instructions Modal - Browse Tab Only
+**Problem**: Modal appeared on ALL tabs (Browse, Map, My Items, Cart).
+**Fix**: Added tab condition to only show on landing page
+- Changed `isOpen={showInstructions}` → `isOpen={showInstructions && activeTab === 'browse'}`
+- Prevents confusion when user navigates to other tabs on first load
+
+### PR #68: Instructions Modal Centering
+**Problem**: Complex bottom calculation pushed modal half off-screen.
+**Fix**: Proper CSS centering
+```tsx
+// Before - Off-screen
+bottom: 'calc(8rem + clamp(128px, 16vh, 192px) + 40px)'
+
+// After - Centered
+className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+style={{ maxHeight: '80vh' }}
+```
+
+**WSP Compliance**:
+- **WSP 50**: Pre-action verification (read icon components before editing)
+- **WSP 22**: ModLog documentation (this entry)
+- **WSP 64**: Z-index contract established (no hardcoded values)
+- **WSP 87**: NO vibecoding - followed existing patterns
+
+**Metrics**:
+- 7 PRs merged in single session
+- Build time: ~2.7s average
+- Bundle size stable: ~417 kB (130 kB gzipped)
+- Zero regressions introduced
+
+**User Feedback Integration**:
+- Icon size: User tested and confirmed 16px optimal
+- Modal positioning: User-reported overlap issues resolved
+- Z-index: User screenshot showed modal behind controls - fixed
+- Tab targeting: User clarified landing page behavior - implemented
+
+---
+
 ## Adaptive Icon Visibility on Map View (2025-11-08)
 
 **Problem**: Sidebar navigation icons (grid, map, home, cart) had low contrast against varied map tile backgrounds:

From 23d6562251e6b4ec6a8b4bfb9f529c1f6d63f98d Mon Sep 17 00:00:00 2001
From: Foundups <info@foundups.com>
Date: Mon, 10 Nov 2025 07:07:48 +0900
Subject: [PATCH 07/11] fix(gotjunk): Prevent duplicate item creation race
 condition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 modules/foundups/gotjunk/frontend/App.tsx | 123 ++++++++++++----------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/App.tsx b/modules/foundups/gotjunk/frontend/App.tsx
index 6616c4fa8..69a175c00 100644
--- a/modules/foundups/gotjunk/frontend/App.tsx
+++ b/modules/foundups/gotjunk/frontend/App.tsx
@@ -94,6 +94,7 @@ const App: React.FC = () => {
 
   // === CLASSIFICATION STATE ===
   const [pendingClassificationItem, setPendingClassificationItem] = useState<{blob: Blob, url: string, location?: {latitude: number, longitude: number}} | null>(null);
+  const [isProcessingClassification, setIsProcessingClassification] = useState(false);
 
   // === FULLSCREEN REVIEW STATE (My Items tab) ===
   const [reviewingItem, setReviewingItem] = useState<CapturedItem | null>(null);
@@ -259,73 +260,83 @@ const App: React.FC = () => {
   };
 
   const handleClassify = async (classification: ItemClassification, discountPercent?: number, bidDurationHours?: number) => {
-    console.log('[GotJunk] handleClassify called:', { classification, discountPercent, bidDurationHours, hasPending: !!pendingClassificationItem });
+    console.log('[GotJunk] handleClassify called:', { classification, discountPercent, bidDurationHours, hasPending: !!pendingClassificationItem, isProcessing: isProcessingClassification });
 
-    if (!pendingClassificationItem) {
-      console.warn('[GotJunk] handleClassify called but no pendingClassificationItem!');
+    // Prevent duplicate calls (race condition guard)
+    if (!pendingClassificationItem || isProcessingClassification) {
+      console.warn('[GotJunk] handleClassify called but no pendingClassificationItem or already processing!');
       return;
     }
 
+    // Immediately capture the item data and clear pending state to prevent race conditions
     const { blob, url, location } = pendingClassificationItem;
+    setPendingClassificationItem(null);
+    setIsProcessingClassification(true);
 
-    // Calculate price based on classification
-    // TODO: Get originalPrice from Google Vision API
-    const defaultPrice = 100; // Placeholder until Vision API integration
-    let price = 0;
-
-    // Use provided values or defaults
-    const finalDiscountPercent = discountPercent || 75;
-    const finalBidDurationHours = bidDurationHours || 48;
+    console.log('[GotJunk] Classification processing started, pending item cleared');
 
-    if (classification === 'free') {
-      price = 0;
-    } else if (classification === 'discount') {
-      // Use the selected discount percentage
-      price = defaultPrice * (1 - finalDiscountPercent / 100);
-    } else if (classification === 'bid') {
-      price = defaultPrice * 0.5; // Starting bid at 50% OFF
-    }
+    try {
+      // Calculate price based on classification
+      // TODO: Get originalPrice from Google Vision API
+      const defaultPrice = 100; // Placeholder until Vision API integration
+      let price = 0;
+
+      // Use provided values or defaults
+      const finalDiscountPercent = discountPercent || 75;
+      const finalBidDurationHours = bidDurationHours || 48;
+
+      if (classification === 'free') {
+        price = 0;
+      } else if (classification === 'discount') {
+        // Use the selected discount percentage
+        price = defaultPrice * (1 - finalDiscountPercent / 100);
+      } else if (classification === 'bid') {
+        price = defaultPrice * 0.5; // Starting bid at 50% OFF
+      }
 
-    const newItem: CapturedItem = {
-      id: `item-${Date.now()}`,
-      blob,
-      url,
-      status: 'draft',
-      ownership: 'mine',
-      classification,
-      price,
-      originalPrice: defaultPrice,
-      discountPercent: classification === 'discount' ? finalDiscountPercent : undefined,
-      bidDurationHours: classification === 'bid' ? finalBidDurationHours : undefined,
-      createdAt: Date.now(),
-      ...location,
-    };
+      const newItem: CapturedItem = {
+        id: `item-${Date.now()}`,
+        blob,
+        url,
+        status: 'draft',
+        ownership: 'mine',
+        classification,
+        price,
+        originalPrice: defaultPrice,
+        discountPercent: classification === 'discount' ? finalDiscountPercent : undefined,
+        bidDurationHours: classification === 'bid' ? finalBidDurationHours : undefined,
+        createdAt: Date.now(),
+        ...location,
+      };
 
-    console.log('[GotJunk] Saving new item:', { id: newItem.id, classification, price });
-    await storage.saveItem(newItem);
+      console.log('[GotJunk] Saving new item:', { id: newItem.id, classification, price });
+      await storage.saveItem(newItem);
 
-    setMyDrafts(current => {
-      console.log('[GotJunk] Adding to myDrafts, current count:', current.length);
-      return [newItem, ...current];
-    });
+      setMyDrafts(current => {
+        console.log('[GotJunk] Adding to myDrafts, current count:', current.length);
+        return [newItem, ...current];
+      });
 
-    // Clear pending item
-    setPendingClassificationItem(null);
-    console.log('[GotJunk] Cleared pendingClassificationItem');
-
-    // Liberty Alert: If keyword detected during video recording, create alert
-    if (libertyEnabled && keywordDetected && blob.type.startsWith('video/')) {
-      console.log('🧊 Liberty Alert - Creating ice cube marker for video');
-      const alert: LibertyAlert = {
-        id: `alert-${Date.now()}`,
-        location: location || { latitude: 0, longitude: 0 },
-        message: 'Liberty Alert - Keyword detected',
-        video_url: newItem.url,
-        timestamp: Date.now(),
-      };
-      setLibertyAlerts(prev => [alert, ...prev]);
-      console.log('🧊 Ice cube marker created on map!');
-      setKeywordDetected(false);
+      console.log('[GotJunk] Item successfully created and added to drafts');
+
+      // Liberty Alert: If keyword detected during video recording, create alert
+      if (libertyEnabled && keywordDetected && blob.type.startsWith('video/')) {
+        console.log('🧊 Liberty Alert - Creating ice cube marker for video');
+        const alert: LibertyAlert = {
+          id: `alert-${Date.now()}`,
+          location: location || { latitude: 0, longitude: 0 },
+          message: 'Liberty Alert - Keyword detected',
+          video_url: newItem.url,
+          timestamp: Date.now(),
+        };
+        setLibertyAlerts(prev => [alert, ...prev]);
+        console.log('🧊 Ice cube marker created on map!');
+        setKeywordDetected(false);
+      }
+    } finally {
+      // Always reset processing flag, even if there's an error
+      setIsProcessingClassification(false);
+      console.log('[GotJunk] Classification processing complete, flag reset');
     }
   };
   

From 2a02521f3b8f12d0e704778dd7a248aea18c7de3 Mon Sep 17 00:00:00 2001
From: Foundups Agent <dev@foundups.com>
Date: Tue, 11 Nov 2025 21:22:49 +0900
Subject: [PATCH 08/11] fix(gotjunk): Revert classification modal vibecoding -
 restore quick-select
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../gotjunk/frontend/components/ClassificationModal.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/components/ClassificationModal.tsx b/modules/foundups/gotjunk/frontend/components/ClassificationModal.tsx
index bda7971a5..800ed2768 100644
--- a/modules/foundups/gotjunk/frontend/components/ClassificationModal.tsx
+++ b/modules/foundups/gotjunk/frontend/components/ClassificationModal.tsx
@@ -49,7 +49,8 @@ export const ClassificationModal: React.FC<ClassificationModalProps> = ({
       setDiscountSheetOpen(true);
     },
     onTap: () => {
-      setDiscountSheetOpen(true); // Always show sheet - prevents accidental quick-tap bypass
+      // Quick-select with current default (power user feature)
+      onClassify('discount', discountPercent, undefined);
     },
     threshold: 450,
   });
@@ -60,7 +61,8 @@ export const ClassificationModal: React.FC<ClassificationModalProps> = ({
       setBidSheetOpen(true);
     },
     onTap: () => {
-      setBidSheetOpen(true); // Always show sheet - prevents accidental quick-tap bypass
+      // Quick-select with current default (power user feature)
+      onClassify('bid', undefined, bidDurationHours);
     },
     threshold: 450,
   });

From 107db26262bc4d27a3b6e5514b56472aab58e651 Mon Sep 17 00:00:00 2001
From: Foundups Agent <dev@foundups.com>
Date: Tue, 11 Nov 2025 21:37:07 +0900
Subject: [PATCH 09/11] fix(gotjunk): Hide camera orb on Browse tab - Occam's
 Razor UX improvement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 modules/foundups/gotjunk/frontend/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/foundups/gotjunk/frontend/App.tsx b/modules/foundups/gotjunk/frontend/App.tsx
index acf2ab87e..c07db0159 100644
--- a/modules/foundups/gotjunk/frontend/App.tsx
+++ b/modules/foundups/gotjunk/frontend/App.tsx
@@ -492,7 +492,7 @@ const App: React.FC = () => {
     : browseFeed.filter(item => item.classification === classificationFilter);
 
   const currentReviewItem = myDrafts.length > 0 ? myDrafts[0] : null;
-  const showCameraOrb = !isMapOpen;
+  const showCameraOrb = !isMapOpen && activeTab === 'myItems';
 
   // Handle instructions modal close
   const handleInstructionsClose = () => {

From 709bc01b6b467cb3c44ce6d7e9ac5da03629b967 Mon Sep 17 00:00:00 2001
From: Foundups Agent <dev@foundups.com>
Date: Tue, 11 Nov 2025 21:54:43 +0900
Subject: [PATCH 10/11] feat(gotjunk): Refactor photo flow - Items populate
 Browse feed + Map markers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 modules/foundups/gotjunk/frontend/App.tsx     | 40 ++++++++++++++-----
 .../frontend/components/PigeonMapView.tsx     | 10 ++++-
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/App.tsx b/modules/foundups/gotjunk/frontend/App.tsx
index c07db0159..3a70f620e 100644
--- a/modules/foundups/gotjunk/frontend/App.tsx
+++ b/modules/foundups/gotjunk/frontend/App.tsx
@@ -83,6 +83,7 @@ const App: React.FC = () => {
   const [isRecording, setIsRecording] = useState(false);
   const [countdown, setCountdown] = useState(10);
   const [userLocation, setUserLocation] = useState<{ latitude: number; longitude: number } | undefined>();
+  const [locationFilter, setLocationFilter] = useState<{ latitude: number; longitude: number } | null>(null);
 
   // === INSTRUCTIONS MODAL (shows on every page load) ===
   const [showInstructions, setShowInstructions] = useState(true);
@@ -300,8 +301,8 @@ const App: React.FC = () => {
         id: `item-${Date.now()}`,
         blob,
         url,
-        status: 'draft',
-        ownership: 'mine',
+        status: 'browsing', // Changed: Photos go to browseFeed (not myDrafts)
+        ownership: 'world', // Changed: Found items are global, not user-owned (yet)
         classification,
         price,
         originalPrice: defaultPrice,
@@ -314,8 +315,8 @@ const App: React.FC = () => {
       console.log('[GotJunk] Saving new item:', { id: newItem.id, classification, price });
       await storage.saveItem(newItem);
 
-      setMyDrafts(current => {
-        console.log('[GotJunk] Adding to myDrafts, current count:', current.length);
+      setBrowseFeed(current => {
+        console.log('[GotJunk] Adding to browseFeed, current count:', current.length);
         return [newItem, ...current];
       });
 
@@ -486,11 +487,21 @@ const App: React.FC = () => {
     setEditingOptionsItem(null);
   };
 
-// Filter browse feed by classification type
-  const filteredBrowseFeed = classificationFilter === 'all'
+// Filter browse feed by classification type AND location (if map marker clicked)
+  let filteredBrowseFeed = classificationFilter === 'all'
     ? browseFeed
     : browseFeed.filter(item => item.classification === classificationFilter);
 
+  // Further filter by location if a map marker was clicked (show only items at that location)
+  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
+    );
+  }
+
   const currentReviewItem = myDrafts.length > 0 ? myDrafts[0] : null;
   const showCameraOrb = !isMapOpen && activeTab === 'myItems';
 
@@ -761,22 +772,29 @@ const App: React.FC = () => {
       {/* Map View */}
       {isMapOpen && (
         <PigeonMapView
-          junkItems={myListed.map(item => ({
+          junkItems={browseFeed.map(item => ({
             id: item.id,
             location: {
-              latitude: item.location?.latitude || userLocation?.latitude || 37.7749,
-              longitude: item.location?.longitude || userLocation?.longitude || -122.4194,
+              latitude: item.latitude || userLocation?.latitude || 37.7749,
+              longitude: item.longitude || userLocation?.longitude || -122.4194,
             },
-            title: item.id.split('-')[0] || 'Item',
+            title: item.classification || 'Item',
             imageUrl: item.url || '',
             status: 'available' as const,
-            timestamp: Date.now(),
+            timestamp: item.createdAt || Date.now(),
           }))}
           libertyAlerts={libertyAlerts}
           userLocation={userLocation || null}
           onClose={() => {
             setMapOpen(false); // Close overlay, return to current tab
           }}
+          onMarkerClick={(location) => {
+            // User clicked map marker → filter Browse view to items at that location
+            console.log('[GotJunk] Map marker clicked:', location);
+            setLocationFilter(location);
+            setActiveTab('browse'); // Switch to Browse tab
+            setMapOpen(false); // Close map
+          }}
           showLibertyAlerts={libertyEnabled}
         />
       )}
diff --git a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
index 96be85d58..dd12bd8d1 100644
--- a/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
+++ b/modules/foundups/gotjunk/frontend/components/PigeonMapView.tsx
@@ -24,6 +24,7 @@ interface PigeonMapViewProps {
   libertyAlerts?: LibertyAlert[];
   userLocation: { latitude: number; longitude: number } | null;
   onClose: () => void;
+  onMarkerClick?: (location: { latitude: number; longitude: number }) => void;
   showLibertyAlerts?: boolean;
 }
 
@@ -32,6 +33,7 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
   libertyAlerts = [],
   userLocation,
   onClose,
+  onMarkerClick,
   showLibertyAlerts = false,
 }) => {
   // Global view for Liberty Alerts, local view for GotJunk items
@@ -164,7 +166,13 @@ export const PigeonMapView: React.FC<PigeonMapViewProps> = ({
             width={30}
             anchor={[item.location.latitude, item.location.longitude]}
             color={getMarkerColor(item.status)}
-            onClick={onClose}
+            onClick={() => {
+              if (onMarkerClick) {
+                onMarkerClick(item.location);
+              } else {
+                onClose();
+              }
+            }}
           />
         ))}
 

From 2fd41bc17f420f4191d1194ed3c4540c7e2ebff0 Mon Sep 17 00:00:00 2001
From: Foundups Agent <dev@foundups.com>
Date: Tue, 11 Nov 2025 22:26:16 +0900
Subject: [PATCH 11/11] fix(gotjunk): Fix duplicate images and add fullscreen
 exit options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Bug Fixes

### 1. Duplicate Image Creation (Touch+Mouse Event Collision)
**Problem**: Selecting "bid" classification created 2 duplicate images
**Root Cause**: Mobile browsers fire BOTH touch events AND synthetic mouse events
- onTouchEnd → calls onTap → creates image #1
- onMouseUp → calls onTap AGAIN → creates image #2

**Solution**: Added 300ms debounce to useLongPress.ts handleEnd()
- Tracks lastTapTimeRef to prevent duplicate calls
- Skips tap if already fired within 300ms window

Files Changed:
- useLongPress.ts:46 - Added lastTapTimeRef tracking
- useLongPress.ts:109-113 - Added debounce logic

### 2. Fullscreen Exit Options
**Problem**: No way to exit fullscreen item view after double-tap

**Solutions Implemented**:
1. **Swipe-up gesture**: Swipe up to collapse back to thumbnails
   - ItemReviewer.tsx:36-41 - Detect vertical swipe up (offset.y < -50px)
   - ItemReviewer.tsx:80 - Enable vertical dragging with dragConstraints

2. **Collapse button**: "-" button in bottom-right corner
   - ItemReviewer.tsx:112-136 - Added circular button with minus icon
   - Positioned at bottom-8 right-8 for easy thumb access
   - Gray background with border, hover effects

## Testing

- Tap "bid" button → Creates 1 image (not 2) ✓
- Double-tap thumbnail → Opens fullscreen ✓
- Swipe up → Collapses to thumbnails ✓
- Click "-" button → Collapses to thumbnails ✓
- Swipe left/right → Keep/delete still works ✓

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend/components/ItemReviewer.tsx      | 38 ++++++++++++++++++-
 .../gotjunk/frontend/hooks/useLongPress.ts    | 12 ++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/modules/foundups/gotjunk/frontend/components/ItemReviewer.tsx b/modules/foundups/gotjunk/frontend/components/ItemReviewer.tsx
index 04c8c87cd..3d734dd87 100644
--- a/modules/foundups/gotjunk/frontend/components/ItemReviewer.tsx
+++ b/modules/foundups/gotjunk/frontend/components/ItemReviewer.tsx
@@ -33,6 +33,14 @@ export const ItemReviewer: React.FC<ItemReviewerProps> = ({ item, onDecision, on
     const swipeThreshold = 50;
     const velocityThreshold = 200;
 
+    // Check for vertical swipe UP to close (collapse back to thumbnails)
+    if (onClose && (info.offset.y < -swipeThreshold || info.velocity.y < -velocityThreshold)) {
+      console.log('[ItemReviewer] Swipe up detected - closing fullscreen');
+      onClose();
+      return;
+    }
+
+    // Horizontal swipe for keep/delete
     let decision: 'keep' | 'delete' | null = null;
 
     if (info.offset.x > swipeThreshold || info.velocity.x > velocityThreshold) {
@@ -68,8 +76,8 @@ export const ItemReviewer: React.FC<ItemReviewerProps> = ({ item, onDecision, on
       style={{ zIndex: Z_LAYERS.fullscreen }}
       role="dialog"
       aria-modal="true"
-      drag="x"
-      dragConstraints={{ left: -150, right: 150 }}
+      drag
+      dragConstraints={{ left: -150, right: 150, top: -200, bottom: 50 }}
       dragElastic={0.2}
       onDragEnd={handleDragEnd}
       onClick={handleTap}
@@ -100,6 +108,32 @@ export const ItemReviewer: React.FC<ItemReviewerProps> = ({ item, onDecision, on
           />
         )}
       </div>
+
+      {/* Collapse button (-) - Bottom right corner */}
+      {onClose && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation(); // Prevent double-tap detection
+            onClose();
+          }}
+          className="absolute bottom-8 right-8 w-14 h-14 bg-gray-800/90 hover:bg-gray-700/90 active:scale-95 rounded-full flex items-center justify-center shadow-2xl border-2 border-gray-600 transition-all z-10"
+          aria-label="Collapse to thumbnails"
+        >
+          <svg
+            className="w-8 h-8 text-white"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={3}
+              d="M20 12H4"
+            />
+          </svg>
+        </button>
+      )}
     </motion.div>
   );
 };
diff --git a/modules/foundups/gotjunk/frontend/hooks/useLongPress.ts b/modules/foundups/gotjunk/frontend/hooks/useLongPress.ts
index d4a9f235a..8f69b53c0 100644
--- a/modules/foundups/gotjunk/frontend/hooks/useLongPress.ts
+++ b/modules/foundups/gotjunk/frontend/hooks/useLongPress.ts
@@ -43,6 +43,7 @@ export function useLongPress({
   const longPressTriggeredRef = useRef(false);
   const startPosRef = useRef<{ x: number; y: number } | null>(null);
   const lastLongPressTimeRef = useRef<number>(0);
+  const lastTapTimeRef = useRef<number>(0); // Prevent double-tap from touch+mouse events
 
   const clear = useCallback(() => {
     if (timerRef.current) {
@@ -101,6 +102,17 @@ export function useLongPress({
 
     // Fire tap only if long-press wasn't triggered
     if (!longPressTriggeredRef.current && onTap) {
+      const now = Date.now();
+
+      // Prevent double-tap from touch+mouse events (mobile browsers fire both)
+      // Skip if onTap was called within 300ms (debounce)
+      if (now - lastTapTimeRef.current < 300) {
+        console.log('[useLongPress] Skipping duplicate tap event (touch+mouse collision)');
+        startPosRef.current = null;
+        return;
+      }
+
+      lastTapTimeRef.current = now;
       onTap(event);
     }